/* Local checkmark artwork also works under the app's self-only image policy. */

input[type="checkbox"] {

    -webkit-appearance: none;

    appearance: none;

    display: inline-block;

    width: 1.1em;

    height: 1.1em;

    flex-shrink: 0;

    vertical-align: -0.15em;

    border: 1px solid #8c9baa;

    border-radius: 0.25em;

    background-color: #fff;

    background-image: none;

    background-position: center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

    cursor: pointer;

}

input[type="checkbox"]:checked,

input[type="checkbox"].form-check-input:checked {

    border-color: var(--dg-accent, #c72030);

    background-color: var(--dg-accent, #c72030);

    background-image: url("../images/checkbox-check.svg");

}

input[type="checkbox"]:focus-visible {

    outline: 3px solid #397ecc;

    outline-offset: 3px;

}

input[type="checkbox"]:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}

@media (forced-colors: active) {

    input[type="checkbox"] {

        -webkit-appearance: auto;

        appearance: auto;

    }

}