.checkbox {
    display:block;
    cursor: pointer;
    margin-bottom:1rem;
}

.checkbox:hover .checkbox_check {
    background: #ffffff;
}

.checkbox_input {
    width: 0;
    height: 0;
    opacity: 0;
}

.checkbox_input:checked + .checkbox_check {
    background: transparent;
    stroke-dashoffset: 0;
}

.checkbox_check {
    border: 0.2rem solid #ffffff;
    stroke: #f9f9f9;
    stroke-dasharray: 25;
    stroke-dashoffset: 25;
    stroke-linecap: round;
    stroke-width: 0.2em;
    border-radius: 0.2em;
    fill: none;
    transition: background 0.4s, stroke-dashoffset
    0.6s;
}