.form-select {
    /* Re-apply Bootstrap's default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Re-apply Bootstrap's custom arrow SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")!important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;

    padding-right: 2.25rem !important;
}

.bg-light-aqua {
    background-color: #2AE3D9 !important;
}

.border-light-aqua {
    border-color: #1aafa4 !important;
}

.text-light-aqua {
    color: #1aafa4 !important;
}

#login-body {
    height: 100vh; /* Ensures HTML and BODY elements take 100% of the viewport height */
    margin: 0;    /* Remove default browser margins */
    padding: 0;   /* Remove default browser padding */
    min-height: 100vh; /* Ensures body is at least viewport height, but can grow */
    overflow-y: scroll; /* Ensures vertical scrollbar is always available if needed */
    overflow-x: hidden; /* Prevents horizontal scrolling unless explicitly desired */
}

#mainContainer {
    display: flex; /* Makes the main container a flex container */
    align-items: center; /* Vertically centers its direct children (the .row) */
    /* If you prefer the row to stretch to fill the height, use align-items: stretch; instead */
}

#mainContainer > .row {
    flex-grow: 1; /* Allows the row to grow and fill available vertical space */
    width: 100%; /* Ensure the row takes full width within the container-fluid */
}

/* Ensure your col-height-stretch class makes the columns' content fill their vertical space */
.col-height-stretch {
    display: flex; /* Make the column itself a flex container */
    flex-direction: column; /* Stack children vertically */
    height: 100%; /* Ensure the column takes 100% of its parent's height (the .row) */
}

/* This rule makes sure the inner content div (e.g., the p-4 bg-white div or the empty div for image)
   also grows to fill the height of its col-height-stretch parent. */
.col-height-stretch > div { /* This targets the inner div for the form's content */
    flex-grow: 1; /* Allows the inner div to grow and fill available space */
    display: flex; /* Make the inner div a flex container */
    flex-direction: column; /* Stack its own children (like form, h2, etc.) vertically */
    justify-content: center; /* Vertically center content inside the form column */
    /* Add overflow-y: auto; if the form content might exceed the height of the column */
}

/* The first column (image) should also have its height handled by col-height-stretch.
   If there's no inner content div, it might just be the .col-md-6 itself that needs the min-height: */
.col-md-6.col-height-stretch { /* This targets the image column specifically */
    min-height: 100vh; /* A fallback min-height to ensure it's visible on smaller forms */
    /* You had min-height inline, which is fine, but if you want it CSS-controlled for all cases,
       this is how you'd do it. Remove the inline min-height if you use this. */
}