input[type="checkbox"] {
    position: relative;
    border: 1px solid var(--border-gray-200);
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0px 8px 0px 0px;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 16px;
    width: 16px;
    border-radius: 4px;
    opacity: 0.5;
    accent-color: var(--blue-500);
}

input[type="checkbox"]:hover {
    opacity: 1;
}

input[type="checkbox"]:checked {
    background-color: var(--blue-500);
    opacity: 1;
}

input[type="checkbox"]:before {
    content: "";
    position: absolute;
    right: 50%;
    top: 50%;
    width: 4px;
    height: 10px;
    border: solid #fff;
    border-width: 0 1px 1px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}