.checkbox input[type="checkbox"] {
    opacity: 0;
}

.checkbox label::before{
    content: "";
    height: 13px;
    width: 13px;
    border: 1px solid;
    border-radius:5px;
    background: #ededed;
    border-color: #ededed;
}

.checkbox:hover label::before {
    background: #e6e3e3;
    border-color: #e6e3e3;
}

.checkbox label::after {
content: "";
display: inline-block;
height: 4px;
width: 7px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
color:white;
}

.checkbox label {
    position: relative;
}

.checkbox label::before,
.checkbox label::after {
    position: absolute;
}/*Outer-box*/
.checkbox label::before {
    top: 0px;
    /* top: 6px; */
    left: -18px;
}/*Checkmark*/
.checkbox label::after {
    left: -15px;
    top: 3px;
}

/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] + label::after {
    content: none;
}/*Unhide the checkmark on the checked state*/
.checkbox input[type="checkbox"]:checked + label::after {
    content: "";
}

.checkbox input[type="checkbox"]:checked + label::before {
        background: #60db85;
        border-color: #60db85;
}