﻿.CheckBox input[type="checkbox"]:checked + label::before,
.CheckBox input[type="checkbox"][checked="checked"] + label::before {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: right;
}

.CheckBox {
    position: relative;
}

    .CheckBox input[type="checkbox"] {
        left: -99999px;
        opacity: 0;
        position: absolute;
    }

    .CheckBox label {
        cursor: pointer;
        font-size: 1rem;
        line-height: 24px;
        padding-left: 35px;
        vertical-align: middle;
        right: 2px;
    }

        .CheckBox label::before {
            background: #fff;
            border: 2px solid #999;
            content: '';
            right: 2px;
            position: absolute;
            top: 0;
            border-radius: 4px;
            height: 20px;
            width: 20px;
            box-sizing: border-box;
        }

    .CheckBox input[type="checkbox"]:focus + label::before,
    .CheckBox input[type="checkbox"].focus + label::before {
        -webkit-box-shadow: 0 0 8px #2375bb;
        -moz-box-shadow: 0 0 8px #2375bb;
        box-shadow: 0 0 8px #2375bb;
        outline: none;
    }

    .CheckBox input[type="checkbox"]:checked + label::before,
    .CheckBox input[type="checkbox"][checked="checked"] + label::before {
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        content: "\f00c";
        color: #2375bb;
        font-size: 11px;
    }
