.styled-checkbox {
    position: absolute;
    opacity: 0;
}
.styled-checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
.styled-checkbox + label:before {
    content: '';
    margin-right: 12px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: white;
    border: 1px solid #d1d1d1;
    border-radius: 3px;
}
.styled-checkbox:hover + label:before {
    background: #fff;
}
.styled-checkbox:focus + label:before {
    /*-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);*/
    /*box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);*/
}
.styled-checkbox:checked + label:before {
    background: #fff;
}
.styled-checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
.styled-checkbox:disabled + label:before {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #fff;
}
.styled-checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 7px;
    background: #0097a7;
    width: 3px;
    height: 3px;
    -webkit-box-shadow: 2px 0 0 #0097a7, 4px 0 0 #0097a7, 6px 0 0 #0097a7, 8px 0 0 #0097a7, 8px -2px 0 #0097a7, 8px -4px 0 #0097a7, 8px -6px 0 #0097a7, 8px -8px 0 #0097a7, 8px -10px 0 #0097a7, 8px -12px 0 #0097a7, 8px -14px 0 #0097a7, 8px -16px 0 #0097a7;
    box-shadow: 2px 0 0 #0097a7, 4px 0 0 #0097a7, 6px 0 0 #0097a7, 8px 0 0 #0097a7, 8px -2px 0 #0097a7, 8px -4px 0 #0097a7, 8px -6px 0 #0097a7, 8px -8px 0 #0097a7, 8px -10px 0 #0097a7, 8px -12px 0 #0097a7, 8px -14px 0 #0097a7, 8px -16px 0 #0097a7;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


.styled-checkbox.chk-red:checked + label:after {
    background: #a70000;
    -webkit-box-shadow: 2px 0 0 #a70000, 4px 0 0 #a70000, 6px 0 0 #a70000, 8px 0 0 #a70000, 8px -2px 0 #a70000, 8px -4px 0 #a70000, 8px -6px 0 #a70000, 8px -8px 0 #a70000, 8px -10px 0 #a70000, 8px -12px 0 #a70000, 8px -14px 0 #a70000, 8px -16px 0 #a70000;
    box-shadow: 2px 0 0 #a70000, 4px 0 0 #a70000, 6px 0 0 #a70000, 8px 0 0 #a70000, 8px -2px 0 #a70000, 8px -4px 0 #a70000, 8px -6px 0 #a70000, 8px -8px 0 #a70000, 8px -10px 0 #a70000, 8px -12px 0 #a70000, 8px -14px 0 #a70000, 8px -16px 0 #a70000;
}

.styled-checkbox.chk-green:checked + label:after {
    background: #09a90c;
    -webkit-box-shadow: 2px 0 0 #09a90c, 4px 0 0 #09a90c, 6px 0 0 #09a90c, 8px 0 0 #09a90c, 8px -2px 0 #09a90c, 8px -4px 0 #09a90c, 8px -6px 0 #09a90c, 8px -8px 0 #09a90c, 8px -10px 0 #09a90c, 8px -12px 0 #09a90c, 8px -14px 0 #09a90c, 8px -16px 0 #09a90c;
    box-shadow: 2px 0 0 #09a90c, 4px 0 0 #09a90c, 6px 0 0 #09a90c, 8px 0 0 #09a90c, 8px -2px 0 #09a90c, 8px -4px 0 #09a90c, 8px -6px 0 #09a90c, 8px -8px 0 #09a90c, 8px -10px 0 #09a90c, 8px -12px 0 #09a90c, 8px -14px 0 #09a90c, 8px -16px 0 #09a90c;
}