.checkbox {
    display: inline-flex;
}

.checkbox-mark {
    background-color: var(--white);
    border-radius: 5px;
    border: 1px solid var(--gray-500) !important;
    cursor: pointer;
    flex-shrink: 0;
    height: 20px !important;
    margin-right: 5px;
    position: relative;
    top: 3px;
    transition: background-color 0.2s;
    width: 20px !important;
}

    .checkbox-mark::before {
        background-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.34936 1.07545C8.30196 0.990716 8.23828 0.916176 8.16198 0.856114C8.00898 0.735457 7.81443 0.680273 7.62086 0.702622C7.42729 0.724972 7.25044 0.823037 7.12895 0.975386L3.48181 5.57571C3.44174 5.62674 3.38322 5.65998 3.31888 5.66827C3.25453 5.67657 3.1895 5.65926 3.1378 5.62007L1.74794 4.54663C1.59265 4.42689 1.39616 4.37375 1.20169 4.39889C1.00722 4.42403 0.830703 4.5254 0.710969 4.68069C0.591235 4.83597 0.538093 5.03247 0.563234 5.22694C0.588374 5.42141 0.689738 5.59792 0.845026 5.71766L2.6065 7.07696C2.74041 7.18446 2.89533 7.26277 3.06131 7.30684C3.22729 7.35091 3.40065 7.35976 3.57025 7.33284C3.73986 7.30592 3.90195 7.24382 4.04612 7.15052C4.1903 7.05722 4.31336 6.93479 4.4074 6.7911L8.28323 1.89407C8.34362 1.81804 8.38841 1.73083 8.41501 1.63745C8.44161 1.54407 8.44951 1.44635 8.43824 1.3499C8.42698 1.25346 8.39677 1.16019 8.34936 1.07545Z' fill='white'/%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 120%;
        content: none;
        height: 8px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 9px;
    }

.checkbox input {
    display: none;
}

    .checkbox input:checked ~ span::before {
        content: "";
    }

    .checkbox input:checked ~ .checkbox-mark {
        background-color: var(--blue);
        border-color: var(--blue);
    }