/***********************************************************************************************************************************************************/
/* Global overrides to standard formvalidation.io library styles */
/***********************************************************************************************************************************************************/

/* form-floating class makes controls taller, so location of X ends up being too high.  This overrides that and forces it more center */
.fv-form-float.fv-plugins-bootstrap5-row-invalid .fv-plugins-icon {
    top: 10px !important;
}

/* Overrides default feedback icon position when using input groups */
.fv-plugins-bootstrap5 .inputGroupContainer .fv-plugins-icon {
    right: 50px;
    z-index: 100;
}

/* Overrides default visibiliity of feedback validator icons */
/* NOTE: Used to set the valid class to '' in the Icon plugin init code.  That approach no longer appears to be supported and causes click problems now */
.fv-plugins-icon.fa.fa-check, .fv-plugins-icon.fa.fa-refresh {
    display: none;
}

/* NOTE: Used to hide the space a validator icon occupies if there's no icon currently set (specifically targets date/time fields) */
/*       This tweak specifically targets date/time icons which will not accept click events after a feedback icon was previously shown */
.fv-plugins-icon:not(.fa) {
    display: none;
}

/* Overrides style of bootstrap multi-select */
/* When the select field is validated, the plugin adds the invalid (or valid) class to the original select element. The behavior is correct.
               However, the Bootstrap Multiple Select plugin hides the original <select> element, and uses a <button> which is displayed on the top.  
               So, to fix this, we add the error border to the button when the field is invalid.
            */
.fv-plugins-bootstrap5-row-invalid button.dropdown-toggle {
    border: 1px solid var(--formValidationInvalidColor);
}

/* Show corresponding button borders with invalid color whenever a form control is invalid */
.fv-plugins-bootstrap5-row-invalid > .input-group button {
    border: solid 1px var(--formValidationInvalidColor);
}

/* Hide bottom border on first button */
.fv-plugins-bootstrap5-row-invalid > .input-group > .input-group-btn-vertical > .btn:
    first-child {
    border-bottom: 0px;
}

/* Set labels and and corresponding button icons (of inputGroups) to invalid color whenever form control is invalid */
    label.is-invalid,
.fv-plugins-bootstrap5-row-invalid > .input-group button > i.fa,
.fv-plugins-bootstrap5-row-invalid > .input-group button > i.fas {
    color: var(--formValidationInvalidColor);
}