/*Checkbox and Radio inputs*/
.chkContainer,
.chkContainerGreen,
.radContainer {
    cursor: pointer;
    display: block;
    font-size: 22px;
    margin-bottom: 26px;
    padding-left: 35px;
    position: relative;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .chkContainer input,
    .chkContainerGreen input,
    .radContainer input {
        cursor: pointer;
        height: 0;
        opacity: 0;
        position: absolute;
        width: 0;
    }

/* Create a custom checkbox */
.chkCheck {
    background-color: #eee;
    border-radius: 5px;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}

    /* Create the checkmark/indicator (hidden when not checked) */
    .chkCheck::after {
        content: "";
        display: none;
        position: absolute;
    }

/* Create a custom radiobox */
.chkRadio {
    background-color: #eee;
    border-radius: 50%;
    height: 30px;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}

    /* Create the checkmark/indicator (hidden when not checked) */
    .chkRadio::after {
        content: "";
        display: none;
        position: absolute;
    }

.chkCheckBorder, .chkRadioBorder,
.chkContainer .no-after::after,
.chkContainerGreen .no-after::after,
.radContainer .no-after::after,
.chkContainer .clear::after,
.chkContainerGreen .clear::after,
.radContainer .clear::after {
    border: 1px solid #17424E66;
}

/* On mouse-over, add a grey background color */
.chkContainer:hover input ~ .chkCheck,
.chkContainerGreen:hover input ~ .chkCheck,
.radContainer:hover input ~ .chkRadio {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkContainer input:checked ~ .chkCheck,
.radContainer input:checked ~ .chkRadio {
    background-color: #0090d4;
}

    /* Show the checkmark when checked */
    .chkContainer input:checked ~ .chkCheck::after,
    .radContainer input:checked ~ .chkRadio::after {
        display: block;
    }

/* When the checkbox is checked, add a green background */
.chkContainerGreen input:checked ~ .chkCheck,
.radContainerGreen input:checked ~ .chkRadio {
    background-color: #6da32f;
}

    /* Show the checkmark when checked */
    .chkContainerGreen input:checked ~ .chkCheck::after,
    .radContainerGreen input:checked ~ .chkRadio::after {
        display: block;
    }

/* Style the checkmark/indicator */
.chkContainer .chkCheck::after,
.chkContainerGreen .chkCheck::after {
    color: #fff;
    content: "\f00c";
    font: var(--fa-font-solid);
    margin-left: 7px;
    margin-top: 6px;
}

/* When the checkbox is indeterminate, add a white background */
.chkContainer input:indeterminate ~ .chkCheckIndeterminate {
    background-color: #fff;
}

    /* Show the dash when indeterminate */
    .chkContainer input:indeterminate ~ .chkCheckIndeterminate::after {
        display: block;
    }

/* Style the checkmark/indicator */
.chkContainer .chkCheckIndeterminate::after {
    color: #0090d4;
    content: "\f0c8";
    font: var(--fa-font-solid);
    margin-left: 7px;
    margin-top: 6px;
}

/* Style the indicator (dot/circle) */
.radContainer .chkRadio::after {
    border-radius: 50%;
    background: white;
    height: 14px;
    left: 7px;
    top: 7px;
    width: 14px;
}

/* On mouse-over, add a grey background color */
/*.chkContainer:hover input ~ .chkCheck::after, .radContainer:hover input ~ .chkRadio::after {
    background-color: #ccc;
}*/

/* When the checkbox is not checked, remove blue background */
.chkContainer input .no-after ~ .chkCheck,
.chkContainerGreen input .no-after ~ .chkCheck,
.radContainer input .no-after ~ .chkRadio,
.chkContainer input .clear ~ .chkCheck,
.chkContainerGreen input .clear ~ .chkCheck,
.radContainer input .clear ~ .chkRadio {
    /*background-color: #eee;*/
    content: none;
}

    /* Hide the checkmark when not checked */
    .chkContainer input .no-after ~ .chkCheck::after,
    .chkContainerGreen input .no-after ~ .chkCheck::after,
    .radContainer input .no-after ~ .chkRadio::after,
    .chkContainer input .clear ~ .chkCheck::after,
    .chkContainerGreen input .clear ~ .chkCheck::after,
    .radContainer input .clear ~ .chkRadio::after {
        /*display: none;*/
        content: none;
    }

.chkContainer .no-after::after,
.chkContainerGreen .no-after::after {
    background-color: #eee;
    border: 1px solid #e42313;
    border-radius: 5px;
    height: 30px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 30px;
}

.radContainer .no-after::after {
    background-color: #eee;
    border: 1px solid #e42313;
    border-radius: 50%;
    height: 30px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 30px;
}

.chkContainer .clear::after,
.chkContainerGreen .clear::after {
    background-color: #eee;
    border: 1px solid #17424E66;
    border-radius: 5px;
    height: 30px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 30px;
}

.radContainer .clear::after {
    background-color: #eee;
    border: 1px solid #17424E66;
    border-radius: 50%;
    height: 30px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 30px;
}

.chkCheckDisabled {
    background-color: #999;
    border-radius: 5px;
    height: 30px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 30px;
}

    /* Create the checkmark/indicator (hidden when not checked) */
    .chkCheckDisabled::after {
        content: "";
        display: none;
        position: absolute;
    }

/* When the checkbox is checked, add a blue background */
.chkContainer input:checked ~ .chkCheckDisabled,
.chkContainerGreen input:checked ~ .chkCheckDisabled {
    background-color: #555;
}

    /* Show the checkmark when checked */
    .chkContainer input:checked ~ .chkCheckDisabled::after,
    .chkContainerGreen input:checked ~ .chkCheckDisabled::after {
        display: block;
    }

/* Style the checkmark/indicator */
.chkContainer .chkCheckDisabled::after,
.chkContainerGreen .chkCheckDisabled::after {
    border: solid white;
    border-width: 0 3px 3px 0;
    height: 18px;
    left: 10px;
    top: 3px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 9px;
}

.radRadioDisabled {
    background-color: #999 !important;
    border-radius: 50%;
    height: 30px;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 30px;
}

    /* Create the checkmark/indicator (hidden when not checked) */
    .radRadioDisabled::after {
        content: "";
        display: none;
        position: absolute;
    }

/* When the checkbox is checked, add a blue background */
.chkContainer input:checked ~ .radRadioDisabled,
.chkContainerGreen input:checked ~ .radRadioDisabled {
    background-color: #555 !important;
}

    /* Show the checkmark when checked */
    .chkContainer input:checked ~ .radRadioDisabled::after,
    .chkContainerGreen input:checked ~ .radRadioDisabled::after {
        display: block;
    }

/* Style the checkmark/indicator */
.chkContainer .radRadioDisabled::after,
.chkContainerGreen .radRadioDisabled::after {
    border: solid white;
    border-width: 0 3px 3px 0;
    height: 18px;
    left: 10px;
    top: 3px;
    width: 9px;
}