﻿
.awesomecheckbox > input[type=checkbox], .awesomeradio > input[type=radio] {
    margin-left: -10000%;
    height: 0;
}
    /* to hide the checkbox itself */

    .awesomecheckbox > input[type=checkbox] ~ label, .awesomeradio > input[type=radio] ~ label {
        margin-top: -1rem;
    }


        .awesomecheckbox > input[type=checkbox] ~ label:before, .awesomeradio > input[type=radio] ~ label:before {
            font-family: FontAwesome;
            display: inline-block;
            font-size: 2.3rem;
            vertical-align: -0.6rem;
        }

        .awesomecheckbox > input[type=checkbox] ~ label:before, .awesomeradio > input[type=radio] ~ label:before {
            content: "\f096";
            letter-spacing: 0.5rem;
        }
    /* unchecked icon */

    .awesomecheckbox > input[type=checkbox].input-validation-error ~ label:before, .awesomeradio > input[type=radio].input-validation-error ~ label:before {
        color: red;
    }
    /*Input validation error fix*/
    .awesomecheckbox > input[type=checkbox].input-validation-error, .awesomeradio > input[type=radio].input-validation-error {
        border: 0 solid #fff !important;
        outline: 0 solid #fff !important;
    }

    .awesomecheckbox > input[type=checkbox]:checked ~ label:before, .awesomeradio > input[type=radio]:checked ~ label:before {
        content: "\f046";
        letter-spacing: 0.15rem;
        color: #21C1C1;
    }
    /* checked icon */

    .awesomecheckbox > input[type=checkbox]:disabled ~ label:before, .awesomeradio > input[type=radio]:disabled ~ label:before, .awesomecheckbox > input[type=checkbox][readonly] ~ label:before, .awesomeradio > input[type=radio][readonly] ~ label:before {
        color: #aaaaaa;
    }
    /* disabled */

    .awesomecheckbox > input[type=checkbox]:disabled:checked ~ label:before, .awesomeradio > input[type=radio]:disabled:checked ~ label:before, .awesomecheckbox > input[type=checkbox][readonly]:checked ~ label:before, .awesomeradio > input[type=radio][readonly]:checked ~ label:before {
        color: #78bcbc;
    }
    /* disabled checked */

    .awesomecheckbox > input[type=checkbox]:disabled ~ label:before, .awesomeradio > input[type=radio]:disabled ~ label, .awesomecheckbox > input[type=checkbox][readonly] ~ label:before, .awesomeradio > input[type=radio][readonly] ~ label {
        pointer-events: none;
    }
    /* disabled */

    .awesomecheckbox > input[type=checkbox]:disabled:checked ~ label:before, .awesomeradio > input[type=radio]:disabled:checked ~ label, .awesomecheckbox > input[type=checkbox][readonly]:checked ~ label:before, .awesomeradio > input[type=radio][readonly]:checked ~ label {
        pointer-events: none;
    }

    /* disabled checked */

    .awesomecheckbox > input[type=checkbox] ~ label, .awesomeradio > input[type=radio] ~ label {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Chrome/Safari/Opera */
        -khtml-user-select: none; /* Konqueror */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE/Edge */
        user-select: none; /* non-prefixed version, currently not supported by any browser */
    }
