.eControls .eCheckBox {
    display: flex;
    align-items: center;
    flex-direction: var(--eCheckBoxDirection, row);
    gap: var(--eCheckBoxGap, 12px);

    &.edit-control {
        display: flex;
        align-items: var(--eToggleSwitchAlIt, start);
        flex-direction: var(--eToggleSwitchDirection, row);
        gap: var(--eToggleSwitchGap, 8px);
        border: var(--eToggleSwitchNoB, 1px solid var(--gray-300));
        border-radius: var(--radius-xl);
        padding: var(--eToggleSwitchPadding, var(--spacing-xl));

        &:has( .input-validation-error) {
            border-color: var(--error-500);
        }
    }

    & .k-checkbox-wrap {
        height: 100%;
    }

    & label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;

        &:has( .spanAsteriskRequired) {
            flex-direction: row;
        }
    }

    /*&:has( .k-checkbox:checked ) {
        border: var(--eToggleSwitchNoB, 1px solid var(--brand-600));
    }*/

    & .form-check-input,
    & .k-checkbox {
        border: 1px solid var(--gray-300);
        background-color: transparent;
        margin-top: 0;
    }

    & .form-check-input:checked,
    & .k-checkbox:checked {
        background-color: var(--brand-600) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    & .form-check-input:checked:focus,
    & .form-check-input:focus,
    & .k-checkbox:checked:focus,
    & .k-checkbox:focus {
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .input-validation-error {
        border-color: var(--error-500);
    }
}

.eControls [type="checkbox"] {
    border: 1px solid var(--gray-300);
    accent-color: transparent;
    margin-top: 0;
}

.eControls [type="checkbox"]:checked {
    accent-color: var(--brand-600) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.eControls [type="checkbox"]:checked:focus {
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
}

.eControls[data-accent="dark"] .eCheckBox {

    & .rb-title {
        color: var(--gray-700) !important;
    }

    & .rb-sub {
        color: var(--gray-600) !important;
    }
}