/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    /*position: absolute;
    left: -9999px;*/
        position: relative;
    display: none;
}

    [type="checkbox"]:not(:checked) + label,
    [type="checkbox"]:checked + label {
        position: relative;
        padding-left: 20px;
        cursor: pointer;
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none; /* Firefox all */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Likely future */
    }

        /* checkbox aspect */
        [type="checkbox"]:not(:checked) + label:before,
        [type="checkbox"]:checked + label:before {
            content: '';
            position: absolute;
            left: -5px;
            top: 2px;
            width: 17px;
            height: 17px;
            border: 1px solid #aaa;
            background: #f8f8f8;
            background: #fff;
            border-radius: 1px;
            box-shadow: inset 0 0px 1px rgba(0,0,0,.2);
        }
        /* checked mark aspect */
        [type="checkbox"]:not(:checked) + label:after,
        [type="checkbox"]:checked + label:after {
            font-family: 'icomoon' !important;
            content: '\e93a';
            position: absolute;
            top: 4px;
            left: -4px;
            font-size: 16px;
            line-height: 0.8;
            color: #007ba7;
            transition: all .2s;
        }
        /* checked mark aspect changes */
        [type="checkbox"]:not(:checked) + label:after {
            opacity: 0;
            transform: scale(0);
        }

        [type="checkbox"]:checked + label:after {
            opacity: 1;
            transform: scale(1);
        }
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

[type="checkbox"]:disabled:checked + label:after {
    color: #999;
}

[type="checkbox"]:disabled + label {
    color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
    border: 1px solid #007ba7;
}

/* hover style just for information */
label:hover:before {
    border: 1px solid #007ba7 !important;
}



/* With span instead of label*/


    [type="checkbox"]:not(:checked) + span,
    [type="checkbox"]:checked + span {
        position: relative;
        padding-left: 20px;
        cursor: pointer;
        -webkit-user-select: none; /* Chrome all / Safari all */
        -moz-user-select: none; /* Firefox all */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Likely future */
    }

        /* checkbox aspect */
        [type="checkbox"]:not(:checked) + span:before,
        [type="checkbox"]:checked + span:before {
            content: '';
            position: absolute;
            left: -5px;
            top: 2px;
            width: 17px;
            height: 17px;
            border: 1px solid #aaa;
            background: #f8f8f8;
            border-radius: 1px;
            box-shadow: inset 0 0px 1px rgba(0,0,0,.2);
        }
        /* checked mark aspect */
        [type="checkbox"]:not(:checked) + span:after,
        [type="checkbox"]:checked + span:after {
            font-family: 'icomoon' !important;
            content: '\e93a';
            position: absolute;
            top: 4px;
            left: -4px;
            font-size: 16px;
            line-height: 0.8;
            color: #007ba7;
            transition: all .2s;
        }
        /* checked mark aspect changes */
        [type="checkbox"]:not(:checked) + span:after {
            opacity: 0;
            transform: scale(0);
        }

        [type="checkbox"]:checked + span:after {
            opacity: 1;
            transform: scale(1);
        }
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + span:before,
[type="checkbox"]:disabled:checked + span:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}

[type="checkbox"]:disabled:checked + span:after {
    color: #999;
}

[type="checkbox"]:disabled + span {
    color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + span:before,
[type="checkbox"]:not(:checked):focus + span:before {
    border: 1px solid #007ba7;
}

/* hover style just for information */
span:hover:before {
    border: 1px solid #007ba7 !important;
}