﻿.chkContainer {
    width: 20px;
    position: relative;
    margin: 20px auto;
}

    .chkContainer .chk {
        width: 25px;
        height: 25px;
        cursor: pointer;
        position: absolute;
        top: -4px;
        left: 0;
        border-radius: 0px;
        background: white;
        border: 3px solid #26A9E1;
    }

        .chkContainer .chk:after {
            content: '';
            width: 11px;
            height: 5px;
            position: absolute;
            top: 4px;
            left: 3px;
            border: 3px solid #005E91;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            box-sizing: content-box;
        }

        .chkContainer .chk:hover::after {
            opacity: 0.5;
        }

    .chkContainer input[type=checkbox] {
        opacity: 0 !important;
    }

        .chkContainer input[type=checkbox]:checked + .chk:after {
            opacity: 1;
            border-color: white;
        }

        .chkContainer input[type=checkbox]:checked + .chk {
            background: #26A9E1;
        }


    .chkContainer input:focus + span, .chkContainer input:hover + span {
        border-color: #26A9E1;
        box-shadow: 0px 0px 3px 2px #00bafa;
    }


    .chkContainer input[type=checkbox]:disabled + .chk {
        border: 3px solid #a2a9af;
    }

    .chkContainer input:disabled:focus + span, .chkContainer input:disabled:hover + span {
        box-shadow: 0px 0px 0px 0px #00bafa;
    }

        .chkContainer input:disabled:focus + span:after, .chkContainer input:disabled:hover + span:after {
            border-color: #858e95;
        }

.chk-lbl {
    margin-left: 15px;
    color: #31708f;
    font-weight: bold;
}
