/*
 * Select2 General Bootstrap match
 * --------------------------------------------------
 */

.select2-container.is-invalid .select2-selection {
    border-color: var(--color-danger);
}

.select2-container.is-valid .select2-selection {
    border-color: var(--color-success);
}

/*
 * Form Validation 
 * --------------------------------------------------
 */

.validation-field {
    position: relative;
    display: block;
}

/* Removes bootstraps default icons in inputs */
.form-control.is-invalid,
.form-control.is-valid {
    background-image: none;
}

.validation-field.is-invalid::after,
.validation-field.is-valid::after {
    display: flex;
    position: absolute;
    align-items: center;
    top: 0;
    bottom: 0;
    right: 0.5rem;
    font-family: "Material Icons", sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    pointer-events: none;
}

.validation-field.is-invalid::after {
    content: "error_outline";
    color: var(--color-danger);
}

.validation-field.is-valid::after {
    /* content: "check_circle"; */
    color: var(--color-success);
}

/* Bootstrap fix to remove checkmark icon in select. */
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: none;
    padding-right: 2.25rem;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}