:root {
    --checkbox-hover-color: #A1DDF0;
    --checkbox-solid-color: #91D3EA;
    --checkbox-border-color: #91D3EA;
}

input[type=checkbox] {
    position: relative;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--checkbox-border-color);
    border-radius: 2px;
    height: 17px;
    width: 18px;
    background-color: white;
}

    input[type=checkbox]:checked {
        background: var(--checkbox-solid-color)
    }

    input[type=checkbox]:hover {
        background: var(--checkbox-hover-color)
    }

    input[type=checkbox]:checked ~ .checkbox-mark {
        display: inline;
    }

    input[type=checkbox]:after ~ .checkbox-mark {
        display: none;
    }

.checkbox-mark {
    display: none;
    pointer-events: none;
    position: absolute;
    left: 4px;
    top: 4px;
}