.multi-checkbox input {
    position: absolute;
    left: -9999px
}

.multi-checkbox label {
    display: block;
    position: relative;
    padding: 5px 15px 5px 38px;
    border-radius: 5px;
    color: rgba(113, 128, 150, 1);
    background-color: #e2e8f0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .2s, box-shadow .2s;
    font-size:13px;
    margin-right:7px;
    margin-bottom:7px;
}

.dark .multi-checkbox label {
    color: rgba(113, 128, 150, 1);
}

.dark .multi-checkbox label::before {
    border: 2px solid rgba(113, 128, 150, 1);
}

.multi-checkbox label:hover {
    background-color: rgba(var(--bi-red-rgb),.3);
    transform:translateY(-1px);
    box-shadow: #bfbfbf 0 4px 12px;
}

.multi-checkbox label::before {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 10px;
    width: 20px;
    border: 2px solid #fff;
    border-radius: 7px;
    transition: background-color .2s
}

.multi-checkbox input:checked+label {
    background-color: rgba(var(--bi-blue-rgb),.8);
    color:white;
}

.multi-checkbox input:checked+label::before {
    border: 2px solid white;
}

.multi-checkbox input:checked+label::before {
    background-color: rgb(255, 255, 255)
}