.ff-block, .ff-style { margin:0 auto; width:auto;}
.ff-block td, .ff-style td { 
    display:block; 
    font-style:normal; 
    font-size:100%; 
    color:black; 
    /* padding-top:2px;  */
}
.ff-block tr:not(.headerrow) {
    display:block; 
}
.ff-block td:first-of-type, .ff-style td:first-of-type { 
    display: block; 
    /* padding-top:10px; 
    padding-bottom:1px;  */
    color:black; 
    font-family:'Open Sans', sans-serif; 
    font-size:105%; 
}
.ff-block tr.headerrow td:first-of-type, .ff-style tr.headerrow td:first-of-type { display: unset; padding-top: unset; padding-bottom:unset; color:#152C53; }
/*.ff-block td:first-of-type:has(> input[type="radio"]) { display: inline-block; font-style:normal; color:black; } */
span.required-asterisk { display:none; }
.ff-invalid { border-color:red; border-width:1.5px; }
i.validation-check { padding:5px; color:green; color:green;}
.required.ff-valid { border-color:green; }

/* Hide all ff-block-containers by default to prevent flash of content before JS runs */
.ff-block-container { display: none; }
.ff-block-container.active-ff-block-container { display: block; }
.ff-block-container.inactive-ff-block-container { opacity:0; overflow:hidden; position:absolute; z-index:-99; top:0; left:0; }
/* .prev-next-btn { margin-right:5px; font-size:100% !important; padding:8px 16px; display:inline-block; } */

.ff-trim-center { width:fit-content; margin:0 auto; }

.ff-block tr td:nth-child(2) .validation-msg {
    display: block;       /* Ensure the message is a block element */
    margin-top: 5px;     /* Adjust the space above the message */
    position: relative;   /* Position it relative to its normal position */
    clear: both;          /* Prevent it from floating next to other elements */
    color: red;           /* Keep the text color red, if desired */
}

/* Option A: MDB invalid-feedback is absolute, so reserve space inside the wrapper */
.ff-block-container .form-outline.has-validation-msg,
.ff-validate .form-outline.has-validation-msg {
  position: relative;
  padding-bottom: 0 !important;
  /* Reserve space below the outline so the absolute message doesn't overlap the next field */
  margin-bottom: 2.25rem !important;
}

/* Place our injected feedback just below the outlined control (outside the border) */
.ff-block-container .form-outline > .validation-msg.invalid-feedback,
.ff-validate .form-outline > .validation-msg.invalid-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

/* Ensure feedback becomes visible when input has .is-invalid */
.ff-block-container .form-outline .form-control.is-invalid ~ .invalid-feedback,
.ff-block-container .form-outline .form-select.is-invalid ~ .invalid-feedback,
.ff-validate .form-outline .form-control.is-invalid ~ .invalid-feedback,
.ff-validate .form-outline .form-select.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Checkboxes/radios: MDB sets .invalid-feedback { position: absolute }, which
   works for text/selects (re-anchored by the .form-outline rules above) but not
   for the narrow shrink-to-fit inline .form-check — there the message has no width
   to anchor to, so it wraps and drifts over the next field. Put it back in normal
   flow on its own single line under the box, so it pushes layout instead. */
.ff-block-container .form-check.has-validation-msg > .validation-msg.invalid-feedback,
.ff-validate .form-check.has-validation-msg > .validation-msg.invalid-feedback {
  position: static;
  width: auto;
  clear: both;
  white-space: nowrap;
  margin-left: 0;
}

/* Keep MDB absolute positioning, but avoid the negative overlap margin */
.ff-block-container .invalid-feedback,
.ff-validate .invalid-feedback {
  margin-top: 0.25rem !important; /* override MDB's -0.75rem */
}

/* When form-outline is inside an input-group (e.g. srchOrgs with Clear button),
   don't add margin-bottom to the outline itself — it would stretch the flex sibling.
   Instead, reserve space on the parent .mb-3 wrapper via margin-bottom. */
.ff-validate .input-group > .form-outline.has-validation-msg,
.ff-block-container .input-group > .form-outline.has-validation-msg {
  margin-bottom: 0 !important;
}
.ff-validate .mb-3:has(.input-group > .form-outline.has-validation-msg),
.ff-block-container .mb-3:has(.input-group > .form-outline.has-validation-msg) {
  margin-bottom: calc(1rem + 2.25rem) !important; /* default mb-3 + validation space */
}

/* Reserve space below form-outline for the absolutely-positioned .form-counter */
.form-outline.has-counter {
  margin-bottom: 1.75rem;
}
/* Pin the counter to the bottom-right of the input instead of letting it sit in normal flow
   (which pushed "9 / 25" down into the gap above the next field). */
.form-outline.has-counter .form-helper {
  position: absolute;
  right: 0;
  bottom: -1.15rem;
  margin: 0;
  line-height: 1;
}
.form-outline.has-counter .form-counter {
  font-size: 0.75rem;
  color: #6c757d;
}