:root {
    /*If changing, change in SAM.css also*/
    --rc-focus: #1E90FF;
    --rc-border: red;
    --rc-border-disabled: gray;
    --rc-text: #000;
    --rc-text-disabled: gray;
    --rc-background: #DEDEDE;
    --rc-background-disabled: #F0F0F0;
    --rc-main-color: #00548B;
    --rc-main-color-disabled: #002640;
    --rc-secondary-color: #FFFFFF;
    --rc-secondary-color-disabled: #A0A0A0;
}

input[type="checkbox"]:not(:only-child),
input[type="radio"]:not(:only-child) {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    clip: rect(0,0,0,0);
}

input[type="checkbox"] + ::before,
input[type="checkbox"] + label::before,
input[type="radio"] + ::before,
input[type="radio"] + label::before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    width: .8em;
    height: .8em;
    line-height: .75em;
    transition: all .25s ease-out;
    border: 1px solid #000; /* Redundancy for old browsers */
    border: 1px solid var(--rc-border);
    background: #DEDEDE; /* Redundancy for old browsers */
    background: var(--rc-background);
    margin: .275em .2em .375em;
}

input[type="radio"] + ::before,
input[type="radio"] + label::before {
    border-radius: 50%;
}

input[type="checkbox"]:not(:disabled) + *,
input[type="radio"]:not(:disabled) + * {
    color: #000; /* Redundancy for old browsers */
    color: var(--rc-text);
}

/*Not Focus*/
input[type="checkbox"]:checked:not(:focus) + ::before,
input[type="checkbox"]:checked:not(:focus) + label::before {
    box-shadow: inset 0 0 0 7px #00548B; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 7px var(--rc-main-color);
}

input[type="radio"]:checked:not(:focus) + ::before,
input[type="radio"]:checked:not(:focus) + label::before {
    box-shadow: inset 0 0 0 2px white, inset 0 0 0 7px #00548B; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 2px var(--rc-secondary-color), inset 0 0 0 7px var(--rc-main-color);
}

input[type="checkbox"]:not(:checked):not(:disabled):hover:not(:focus) + ::before,
input[type="checkbox"]:not(:checked):not(:disabled):hover:not(:focus) + label::before,
input[type="radio"]:not(:checked):not(:disabled):hover:not(:focus) + ::before,
input[type="radio"]:not(:checked):not(:disabled):hover:not(:focus) + label::before {
    box-shadow: inset 0 0 0 1.5px #0080d5; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 1.5px var(--rc-focus);
}

/*Disabled*/
input[type="checkbox"]:disabled + ::before,
input[type="checkbox"]:disabled + label::before,
input[type="radio"]:disabled + ::before,
input[type="radio"]:disabled + label::before {
    border: 1px solid gray; /* Redundancy for old browsers */
    border: 1px solid var(--rc-border-disabled);
    background: #F0F0F0; /* Redundancy for old browsers */
    background: var(--rc-background-disabled);
}

input[type="checkbox"]:disabled + *,
input[type="radio"]:disabled + * {
    color: gray; /* Redundancy for old browsers */
    color: var(--rc-text-disabled);
}

input[type="checkbox"]:disabled:checked + ::before,
input[type="checkbox"]:disabled:checked + label::before {
    box-shadow: inset 0 0 0 7px #002640; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 7px var(--rc-main-color-disabled);
}

input[type="radio"]:disabled:checked + ::before,
input[type="radio"]:disabled:checked + label::before {
    box-shadow: inset 0 0 0 2px #A0A0A0, inset 0 0 0 7px #002640; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 2px var(--rc-secondary-color-disabled), inset 0 0 0 7px var(--rc-main-color-disabled);
}

/*Focus*/
input[type="checkbox"]:checked:focus + ::before,
input[type="checkbox"]:checked:focus + label::before {
    box-shadow: inset 0 0 0 7px #00548B, 0 0 1.5px 1.5px #0080D5; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 7px var(--rc-main-color), 0 0 1.5px 1.5px var(--rc-focus);
}

input[type="radio"]:checked:focus + ::before,
input[type="radio"]:checked:focus + label::before {
    box-shadow: inset 0 0 0 2px white, inset 0 0 0 7px #00548B, 0 0 1.5px 1.5px #0080D5; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 2px var(--rc-secondary-color), inset 0 0 0 7px var(--rc-main-color), 0 0 1.5px 1.5px var(--rc-focus);
}

input[type="checkbox"]:not(:checked):not(:disabled):hover:focus + ::before,
input[type="checkbox"]:not(:checked):not(:disabled):hover:focus + label::before,
input[type="radio"]:not(:checked):not(:disabled):hover:focus + ::before,
input[type="radio"]:not(:checked):not(:disabled):hover:focus + label::before {
    box-shadow: inset 0 0 0 1.5px #0080d5, 0 0 1.5px 1.5px #0080D5; /* Redundancy for old browsers */
    box-shadow: inset 0 0 0 1.5px var(--rc-focus), 0 0 1.5px 1.5px var(--rc-focus);
}


input[type="checkbox"]:not(:checked):not(:hover):focus + ::before,
input[type="checkbox"]:not(:checked):not(:hover):focus + label::before,
input[type="radio"]:not(:checked):not(:hover):focus + ::before,
input[type="radio"]:not(:checked):not(:hover):focus + label::before {
    box-shadow: 0 0 1.5px 1.5px #0080D5; /* Redundancy for old browsers */
    box-shadow: 0 0 1.5px 1.5px var(--rc-focus);
}

/*Check inside*/
input[type="checkbox"] + ::after,
input[type="checkbox"] + label::after {
    opacity: 0;
    transition: opacity ease-in .25s;
    display: block;
    position: absolute;
    top: .55em;
    left: .72em;
    width: .60em;
    height: .25em;
    margin-top: -.05em;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-55deg);
    transform: translate3d(-50%,-50%,0) rotate(-55deg);
    content: "";
}

input[type="checkbox"]:checked + ::after,
input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

input[type="checkbox"]:disabled + ::after,
input[type="checkbox"]:disabled + label::after {
    border-bottom: 2px solid #A0A0A0; /* Redundancy for old browsers */
    border-bottom: 2px solid var(--rc-secondary-color-disabled);
    border-left: 2px solid #A0A0A0; /* Redundancy for old browsers */
    border-left: 2px solid var(--rc-secondary-color-disabled);
}

input[type="checkbox"]:not(:disabled) + ::after,
input[type="checkbox"]:not(:disabled) + label::after {
    border-bottom: 2px solid #FFF; /* Redundancy for old browsers */
    border-bottom: 2px solid var(--rc-secondary-color);
    border-left: 2px solid #FFF; /* Redundancy for old browsers */
    border-left: 2px solid var(--rc-secondary-color);
}

input[type="checkbox"] + * {
    position: relative;
}