input::placeholder {
    color: #656565;
    color: var(--sc-style-color-mid-gray);
}

.button:visited {
	color: #efefef;
    color: var(--sc-style-color-white);
}

.button:focus,
button:focus,
input[type=button]:focus,
input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=reset]:focus,
input[type=radio]:focus,
input[type=search]:focus,
input[type=submit]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
select:focus,
textarea:focus {
    outline: 2px solid #00ff00;
    outline: 2px solid var(--sc-style-color-logo-light-green);
    box-shadow: 0 0 15px #00ff00;
    box-shadow: 0 0 15px var(--sc-style-color-logo-light-green);
}

.button,
button,
input[type=button],
input[type=color],
input[type=reset],
input[type=submit] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #96305a;
    background-color: var(--sc-style-color-logo-burgundy);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 0.2em;
    color: #efefef;
    color: var(--sc-style-color-white);
    font-size: 1em;
    margin: 0.4em;
    padding: 0.4em;
    text-decoration: none;
}

.button:hover,
button:hover,
input[type=button]:hover,
input[type=color]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    filter: brightness(110%);
}

.button:active,
button:active,
input[type=button]:active,
input[type=color]:active,
input[type=reset]:active,
input[type=submit]:active {
    filter: brightness(90%);
}

.button.disabled,
button:disabled,
input[type=button]:disabled,
input[type=color]:disabled,
input[type=reset]:disabled,
input[type=submit]:disabled {
    filter: grayscale(1);
}

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #efefef;
    background-color: var(--sc-style-color-white);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 0.2em;
    height: 1.4em;
    margin: 0.4em;
    position: relative;
    width: 1.4em;
    transition: all .3s;
}
   
input[type=checkbox]:checked,
input[type=checkbox]:indeterminate {
    animation: a .3s ease-in forwards;
    background-color: #96305a;
    background-color: var(--sc-style-color-logo-burgundy);
}

input[type=checkbox]:checked::before {
    border: solid #efefef;
    border: solid var(--sc-style-color-white);
    border-width: 0 2px 2px 0;
    content: '';
    display: block;
    height: .6em;
    position: absolute;
    right: calc(50% - .25em);
    top: calc(50% - .5em);
    transform: rotate(45deg);
    transform-origin: center center;
    transition: all .3s;
    width: .3em;
    z-index: 1;
}

input[type=checkbox]:indeterminate::before {
    border: solid #efefef;
    border: solid var(--sc-style-color-white);
    border-width: 0 0 2px 0;
    content: '';
    display: block;
    height: .3em;
    position: absolute;
    right: calc(50% - .3em);
    top: calc(50% - .35em);
    transform: rotate(0deg);
    transform-origin: center center;
    transition: all .3s;
    width: .6em;
    z-index: 1;
}

input[type=color] {
    -webkit-appearance: none;
    appearance: none;
    height: 2.36em;
    width: 2.36em;
}

input[type=text],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
textarea {
    -webkit-appearance: none;
    appearance: none;
    background-color: #efefef;
    background-color: var(--sc-style-color-white);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 0.2em;
    color: #151515;
    color: var(--sc-style-color-black);
    font-size: 1em;
    margin: 0.4em;
    padding: 0.4em;
}

input[type=radio] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #efefef;
    background-color: var(--sc-style-color-white);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 50%;
    height: 1.4em;
    margin: 0.4em;
    position: relative;
    width: 1.4em;
    transition: all .3s;
}

input[type=radio]:checked::before {
    -webkit-appearance: none;
    appearance: none;
    background-color: #96305a;
    background-color: var(--sc-style-color-logo-burgundy);
    border-radius: 50%;
    content: '';
    display: block;
    height: 0.8em;
    position: absolute;
    right: calc(50% - 0.4em);
    top: calc(50% - 0.4em);
    transform-origin: center center;
    transition: all .3s;
    width: 0.8em;
    z-index: 1;
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #656565;
    background-color: var(--sc-style-color-mid-gray);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 0.2em;
    height: 0.4em;
    margin: 0.4em;
}

input[type=range]::-webkit-slider-thumb,
input[type=range]::-moz-range-thumb {
    appearance: none;
    background-color: #00ff00;
    background-color: var(--sc-style-color-logo-light-green);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 50%;
    height: 1em;
    margin: 0.4em;
    width: 1em;
}

select {
    background-color: #96305a;
    background-color: var(--sc-style-color-logo-burgundy);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 0.2em;
    color: #efefef;
    color: var(--sc-style-color-white);
    font-size: 1em;
    margin: 0.4em;
    padding: 0.4em;
}

select[multiple] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #efefef;
    background-color: var(--sc-style-color-white);
    border: 2px solid #96305a;
    border: 2px solid var(--sc-style-color-logo-burgundy);
    border-radius: 0.2em;
    color: #151515;
    color: var(--sc-style-color-black);
    font-size: 1em;
    margin: 0.4em;
    padding: 0.4em;
}

select[multiple] option:checked {
    background: #96305a linear-gradient(0deg, #96305a 0%, #96305a 100%);
    background: var(--sc-style-color-logo-burgundy) linear-gradient(0deg, var(--sc-style-color-logo-burgundy) 0%, var(--sc-style-color-logo-burgundy) 100%);
}