input[type="checkbox"],
input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    margin-right: -2em;
    opacity: 0;
    width: 1em;
    z-index: -1;
}

    input[type="checkbox"] + label,
    input[type="radio"] + label {
        text-decoration: none;
        color: #7f888f;
        cursor: pointer;
        display: inline-block;
        font-size: 1em;
        font-weight: 400;
        padding-left: 2.4em;
        padding-right: 0.75em;
        position: relative;
    }

        input[type="checkbox"] + label:before,
        input[type="radio"] + label:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        /* AFTER (FA5 — HJA/Arcana) */
        input[type="checkbox"] + label::before,
        input[type="radio"] + label::before {
            font-family: 'Font Awesome 5 Free';
            font-style: normal;
            font-weight: 900;
            background: #ffffff;
            border-radius: 0.375em;
            border: solid 1px rgba(210, 215, 217, 0.75);
            content: '';
            display: inline-block;
            height: 1.65em;
            left: 0;
            line-height: 1.58125em;
            position: absolute;
            text-align: center;
            top: 0;
            width: 1.65em;
        }



    input[type="checkbox"]:checked + label:before,
    input[type="radio"]:checked + label:before {
        background: #3d4449;
        border-color: #3d4449;
        color: #ffffff;
        content: '\f00c';
    }



    input[type="checkbox"]:focus + label:before,
    input[type="radio"]:focus + label:before {
        border-color: #6cc5af;
        box-shadow: 0 0 0 1px #6cc5af;
    }

    input[type="checkbox"] + label:before {
        border-radius: 0.375em;
    }


    /*
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;

}

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
 */
}