.login {
    background-color: #767676 /*greenyellow /*indianred*/ /*#ED1C24*/ /*#767676*/ !important;
}

.main-page {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    max-width: 100%;
    max-height: auto;
}

.site-logo {
    width: clamp(12rem, 18vw, 20rem);
    margin-bottom: 10px;
    margin-top: 10px;
}

    .site-logo a {
        display: inline-block;
    }

    .site-logo img {
        vertical-align: middle;
    }

.ref-image {
    text-align: center;
}

#form-content {
    padding: clamp(20px, 4vw, 42px);
}

#forget-section {
    padding-bottom: clamp(24px, 5.5vw, 90px);
    padding-top: clamp(24px, 5.3vw, 90px);
}

#reset-section {
    padding-bottom: clamp(24px, 7.3vw, 100px);
    padding-top: clamp(24px, 7.3vw, 100px);
}

.image-section {
    flex: 1 1 50%;
    min-height: 100vh;
}

    .image-section img {
        width: 80%;
        height: auto;
    }

.form-section {
    flex: 1 1 50%;
    padding: clamp(20px, 3vw, 30px);
    background-color: white;
    min-height: 100vh;
}

.form-info {
    font-family: monospace;
}

    .form-info h1 {
        font-size: 32px;
        font-weight: bold;
        color: #FF5353;
        text-align: center;
        margin-bottom: 10px;
    }

    .form-info p {
        font-size: 18px;
        color: #FF5353;
        text-align: center;
        margin-bottom: 20px;
    }


.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

.form-actions {
    margin-top: 10px;
    text-align: center;
}

.form-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    background-color: #FF5353;
    border: none;
    color: #fff;
    cursor: pointer;
}

    .form-btn:hover {
        background-color: red;
    }

#submit-btn, #back-btn {
    border-radius: 20px;
}

.icon-prepend,
.icon-append {
    padding: 13px 14px; /* Adjusted padding */
    display: flex;
    align-items: center;
    border: 1px solid #FF5353;
    background-color: #FFCBCB;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

    .icon-prepend i,
    .icon-append i {
        color: #495057;
    }

#form-content .form-control {
    width: calc(100% - 34px); 
    padding: 20px 14px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    color: #495057;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

    #form-content .form-control:focus {
        border-color: #FF5353;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        background-color: #FFCBCB;
    }

.input-group {
    display: flex;
    align-items: center;
}




#forget-password {
    text-align: center;
}

    #forget-password a {
        color: #dc3545;
        text-decoration: none;
    }

        #forget-password a:hover {
            text-decoration: none;
        }

.copyright {
    text-align: center;
    color: indianred;
    font-size: 18px
}

.rememberme-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {

    /* New approach: instead of a separate image banner stacked above or
       below the form (every version of that kept running into "empty
       space here" / "wrong part cropped there" complaints), the image now
       sits as a full-screen fixed background behind everything, and the
       login card floats on top of it as a translucent white sheet - the
       image shows through / peeks above the card instead of living in its
       own boxed-off section. */
    .main-page {
        position: relative;
        min-height: 100vh;
    }

    .login-form {
        padding: 30px;
    }

    /* Fixed + inset:0 takes this out of the normal flex flow entirely and
       pins it behind everything else in the viewport, regardless of DOM
       order - so the earlier order:1/order:2 stacking trick is no longer
       needed here.

       position: fixed needs !important: each page's own <style> block
       (needed for the absolute-positioned .ref-image overlay technique
       used everywhere else) sets .image-section to position: relative
       unconditionally, and since that block is written after this
       stylesheet in the page, it would otherwise silently win here at
       every screen size - which is exactly what happened the first time
       this was written (verified by testing: .image-section measured as
       position: relative, not fixed, and the "fixed background" never
       actually applied).

       Deliberately NO z-index here: setting one (even 0) would make this
       element establish its own stacking context, which would trap
       .site-logo - a DOM child of .image-section on the Forgot/Reset
       password pages - inside that context. .site-logo's own z-index
       would then only ever be compared against its sibling .ref-image
       here, never against .form-section, so it could never actually
       render above the card below no matter how high that z-index was
       set. Leaving z-index unset (auto) keeps .image-section out of the
       stacking-context business entirely, so .site-logo's z-index is
       compared directly against .form-section's, as intended. */
    .image-section {
        position: fixed !important;
        inset: 0;
        height: 100vh;
    }

    .ref-image img {
        object-position: center top;
    }

    /* Sits above the fixed background image. Semi-transparent + a
       backdrop-filter blur (rather than a flat translucent color) gives a
       frosted-glass look: the image's colors and shapes bleed through
       softly instead of showing crisp through plain transparency, which
       keeps the form text readable no matter what's behind it. The
       -webkit- prefix is required for Safari/iOS, which still needs it for
       backdrop-filter; @supports guards it so browsers without any
       backdrop-filter support (there are very few left) just fall back to
       the plainer translucent white underneath. A rounded top edge and a
       faint top border (a common glass-panel highlight) reinforce the
       "pane of glass" read. Pushed down by margin-top so roughly the top
       fifth of the screen shows the image uncovered above the card. */
    .form-section {
        position: relative;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.82);
        border-radius: 24px 24px 0 0;
        margin-top: 20vh;
        min-height: 80vh;
        border-top: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
    }

    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .form-section {
            background-color: rgba(255, 255, 255, 0.6);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
        }
    }

    /* Above both the background image and the translucent card, so it
       stays fully legible regardless of what's behind it at this point.
       z-index needs !important for the same reason as .image-section's
       position above: the Forgot/Reset pages' own <style> block sets
       .site-logo { z-index: 1 } unconditionally, written after this
       stylesheet, so it would otherwise silently cap this back down to 1
       (still above .ref-image's implicit 0, but no longer guaranteed
       above .form-section's explicit z-index: 1 - a tie that would then
       depend on DOM/paint order instead of being explicit). */
    .site-logo {
        position: relative;
        z-index: 2 !important;
        width: clamp(8rem, 30vw, 12rem);
        margin: 12px auto 0;
    }
}

/* Real tablet / small-laptop tier (was previously "handled" by five
   exact-pixel @media (width: ...) rules above that only matched one
   person's exact zoomed browser width and did nothing for anyone else). */
@media (min-width: 769px) and (max-width: 1100px) {
    #form-content {
        padding: clamp(16px, 3vw, 28px);
    }
}

/* Short / landscape viewports (e.g. a laptop with the browser toolbar taking
   up vertical space, or a phone in landscape): min-height:100vh above can
   otherwise force scrolling even when the form itself would fit. */
@media (max-height: 560px) and (min-width: 769px) {
    .image-section,
    .form-section {
        min-height: auto;
    }
}