:root {
    --validation-label-color: #333333;
    --validation-bg-color: #E9D5DB;
    --validation-border-color: #AC1640;
    --validation-font-color: #333333;
    --validation-invalid-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23AC1640" class="" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg>');
}

/*
 * Forcefully removes Bootstrap's .is-valid styles (green checkmark/border).
*/

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
    border-color: #dee2e6;
    background-image: none !important; /* Forcefully removes the checkmark icon */
    box-shadow: none; /* Removes the green glow on focus */
}

/* Also reset the check/radio and label styles */
.was-validated .form-check-input:valid,
.form-check-input.is-valid {
    border-color: #007575;
}

    .was-validated .form-check-input:valid ~ .form-check-label,
    .form-check-input.is-valid ~ .form-check-label {
        color: inherit;
    }


/* Invalid - override CSS managed by CMS */
.form-control.is-invalid
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
}

/* Use instead of readonly tag to allow validation */
.readonly-css {
    pointer-events: none;
    cursor: not-allowed;
}

.form-control.is-invalid.hasDatepicker,
.was-validated .form-control.hasDatepicker:invalid {
    background-position: right calc(2em + .1875rem) center !important;
}

.calendar-date-icon {
    z-index: 5;
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:focus {
    --bs-form-select-bg-icon: var(--validation-invalid-icon);
    border-width: 2px;
    background-color: var(--validation-bg-color);
    border-color: var(--validation-border-color);
    box-shadow: none;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-control:invalid:focus {
    background-image: var(--validation-invalid-icon);
    border-width: 2px;
    background-color: var(--validation-bg-color);
    border-color: var(--validation-border-color);
    box-shadow: none;
}

.form-control,
.form-select,
.form-check-input {
    outline: none !important;
}

    .form-check-input.is-invalid,
    .was-validated .form-check-input:invalid,
    .was-validated .form-check-input:invalid:focus {
        border-width: 2px;
        background-color: var(--validation-bg-color);
        border-color: var(--validation-border-color);
    }

        .form-check-input.is-invalid ~ .form-check-label,
        .was-validated .form-check-input:invalid ~ .form-check-label {
            color: var(--validation-label-color);
        }

.invalid-feedback {
    color: var(--validation-border-color);
    font-weight: bold;
}

.invalid-box {
    border: 2px solid var(--validation-border-color);
    border-radius: .5rem;
    background-color: var(--validation-bg-color);
    padding: .5rem 1rem;
    margin: 0;
}

.was-validated .form-check-input-square:invalid {
    border-color: var(--validation-border-color) !important;
}

.was-validated .form-check-input-square.input-validation-error:invalid:focus {
    box-shadow: none;
}