@charset "utf-8";

.checkbox {
    color: #999;
    font-size: 15px;
    position: relative;
    line-height: 30px;
    float: left;
    width: 100%;
}

.checkbox label {
    position: relative;
    padding-left: 25px;
}

.checkbox label:before {
    background: #acb5ba;
    content: "";
    left: 0;
    position: absolute;
    top: 1px;
    height: 17px;
    width: 17px;
    border-radius: 4px;
}

.checkbox label:after {
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    height: 9px;
    left: 6px;
    position: absolute;
    top: 3px;
    width: 4px;
    transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.checkbox input[type="checkbox"] {
    cursor: pointer;
    position: absolute;
    width: 50px;
    height: 40px;
    z-index: 1;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.checkbox input[type="checkbox"]:hover + label:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    border-color: #fff;
}

.modal-1 .checkbox input[type="checkbox"]:hover + label:after {
    border-color: #fff;
}

.checkbox input[type="checkbox"]:checked + label:after,
.checkbox input[type="checkbox"]:checked + label:before {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.checkbox input[type="checkbox"]:checked + label:before {
    background:#24c4c4;
}

.checkbox input[type="checkbox"]:checked + label {
    color:#24c4c4;
}

/*===== Modal 2 ====*/

.modal-2 .checkbox label:before {
    background: none;
    border: 2px solid;
}

.modal-2 .checkbox input[type="checkbox"]:checked + label:before,
.modal-2 .checkbox input[type="checkbox"]:checked + label:after {
    background: none;
    border-color:#24c4c4;
}

/*===== Modal 3 ====*/

.modal-3 .checkbox label:before {
    background: none;
    border: 2px solid;
    border-radius: 100%;
    -moz- border-radius: 100%;
    -webkit- border-radius: 100%;
}

.modal-3 .checkbox label:after {
    width: 6px;
    height: 15px;
    top: -3px;
    left: 8px
}

.modal-3 .checkbox input[type="checkbox"]:checked + label:before,
.modal-3 .checkbox input[type="checkbox"]:checked + label:after {
    background: none;
    border-color:#24c4c4;
}

/*===== Modal 4 ====*/

.modal-4 .checkbox label:before {
    background: none;
    border: 2px solid;
    border-radius: 0;
    -moz- border-radius: 0;
    -webkit- border-radius: 0;
}

.modal-4 .checkbox label:after {
    width: 6px;
    height: 15px;
    top: -3px;
    left: 8px
}

.modal-4 .checkbox input[type="checkbox"]:checked + label:before,
.modal-4 .checkbox input[type="checkbox"]:checked + label:after {
    background: none;
    border-color:#24c4c4;
}