.css-checkbox {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.css-checkbox+label {
    position: relative;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    height: 28px;
    color: #ccc;
}
.css-checkbox+label {
    font-size: 18px;
}

.css-checkbox+label::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
    width: 26px;
    height: 26px;
    background-color: rgb(51, 51, 51);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(112, 112, 112);
    border-radius: 2px;
    box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 7px 0px;
}

.css-checkbox+label::after {
    content: " ";
    background-repeat: no-repeat;
    background-size: 23px 23px;
    background-position: center center;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
    left: 0px;
    top: 0px;
    text-align: center;
    background-color: transparent;
    font-size: 10px;
    height: 28px;
    width: 28px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMTczLjg5OCA0MzkuNDA0bC0xNjYuNC0xNjYuNGMtOS45OTctOS45OTctOS45OTctMjYuMjA2IDAtMzYuMjA0bDM2LjIwMy0zNi4yMDRjOS45OTctOS45OTggMjYuMjA3LTkuOTk4IDM2LjIwNCAwTDE5MiAzMTIuNjkgNDMyLjA5NSA3Mi41OTZjOS45OTctOS45OTcgMjYuMjA3LTkuOTk3IDM2LjIwNCAwbDM2LjIwMyAzNi4yMDRjOS45OTcgOS45OTcgOS45OTcgMjYuMjA2IDAgMzYuMjA0bC0yOTQuNCAyOTQuNDAxYy05Ljk5OCA5Ljk5Ny0yNi4yMDcgOS45OTctMzYuMjA0LS4wMDF6Ii8+PC9zdmc+");
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}
.css-checkbox:checked+label::after {
    opacity: 1;
}


.css-checkbox+label:hover::before, .css-checkbox:checked+label:hover::after {
    opacity: 0.8;
}
.css-checkbox+label:hover {
    opacity: 0.9;
}