body {
    font-family: 'Poppins', sans-serif;
}
.login100-more {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: calc(100% - 520px);
  position: relative;
  z-index: 1;
}

.login100-more::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #e8519e;
  background: -webkit-linear-gradient(bottom, #e8519e, #c77ff2);
  background: -o-linear-gradient(bottom, #e8519e, #c77ff2);
  background: -moz-linear-gradient(bottom, #e8519e, #c77ff2);
  background: linear-gradient(bottom, #e8519e, #c77ff2);
  opacity: 0.8;
}
/* JJE/Claude 08/20/2026 - the shell rules that used to open this file - the
   .portal-container frame, the .tab-menu bar and the .portal-pane panes, plus
   the :root palette they use - moved to Css/portal-shell.css. Both _LoginLayout
   and _PortalLayout link that file, which is what lets the membership
   application flow render inside the Online Membership tab instead of jumping
   to a shell with no tabs on it.

   What is left here is this page's own content: the welcome pane, the two info
   cards, the pill buttons and everything under #loginform / #loginCard. None of
   it may move to portal-shell.css - it would then reach the membership forms.

   portal-shell.css is linked FIRST, so anything below can still override it and
   the var(--coop-*) references below resolve. */

.welcome-text h1 {
    /* Was 40px. This is a utility portal, not a marketing hero - at 40px the
       heading alone took three lines and about 150px before the member reached
       either card. 32px still reads as the largest thing on the page. */
    font-size: 32px;
    font-weight: 700;
    color: #0c447c;
    margin-bottom: 12px;
}

.welcome-text p {
    /*color: #5f5e5a;*/
    color: #0c447c;
    font-size: 16px;
    margin-bottom: 0;
}

/* INFO CARD */
.info-card {
    /*background: #ffffff;*/
    background: #e6f1fb;
    border: 2px solid #185fa5;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    /* Was height:100%, which stretched the card down the whole row and left a
       band of empty card under the last button. Hugging the content and sitting
       centred is the same treatment #loginCard already had for the same reason -
       it is now the default rather than an exception for one card. */
    height: auto;
    align-self: center;
    min-height: 0;
}

.info-card-icon {
    width: 56px;
    height: 56px;
    background-color: #185fa5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

    .info-card-icon img {
        width: 28px;
        height: 28px;
    }

.info-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: #0c447c;
    margin-bottom: 6px;
}

.info-card p {
    color: #0c447c;
    font-size: 15px;
    margin-bottom: 16px;
    /* flex-grow:1 was pushing the buttons to the bottom of a stretched card.
       With the card hugging its content there is nothing to push against, and
       growing the paragraph only reopens the gap this is meant to close. */
    flex-grow: 0;
}

/* BUTTONS */
.btn-primary-pill {
    display: block;
    width: 100%;
    padding: 12px 18px;
    background-color: #0c447c;
    color: #ffffff;
    border-radius: 30px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .btn-primary-pill:hover {
        background-color: #85b7eb ;
        color: #ffffff;
        text-decoration: none;
    }

.btn-outline-pill {
    display: block;
    width: 100%;
    padding: 12px 18px;
    background-color: #0c447c;
    color: #ffffff;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .btn-outline-pill:hover {
        background-color: #85b7eb;
        color: #ffffff;
        text-decoration: none;
    }

.btn-primary-pill i,
.btn-outline-pill i {
    margin-right: 6px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .welcome-text,
    .info-card {
        width: 100%;
        text-align: center;
    }

    .info-card-icon {
        margin: 0 auto 15px;
    }
}

/* ============================================================================
   GATEWAY LAYOUT -- P0 of the login gateway redesign. Added by Claude 08/20/2026.

   CSS only: no Razor and no controller changes, so this is safe to revert on
   its own. The grid overrides below match Bootstrap 4's own min-width:768px
   breakpoint -- the login area loads the BS4 flexbox grid, not the BS3 float
   grid used elsewhere in the portal.
   ============================================================================ */

/* The welcome pane and the action card used to occupy 5 and 4 of twelve columns
   with space-between, leaving roughly a quarter of the card as empty gutter.
   They now fill it. */
@media (min-width: 768px) {
    .portal-container .portal-pane .row > .col-md-5 {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .portal-container .portal-pane .row > .col-md-4 {
        flex: 0 0 42%;
        max-width: 42%;
    }

    /* The welcome copy has to keep wrapping. The background artwork starts about
       37% across, and widening the pane to 55% let the h1 set on one line straight
       through it.

       The cap goes on the text, not on .welcome-text itself: that element is also
       the .col-md-5 widened above, and ".portal-container .portal-pane .row >
       .col-md-5" outranks a bare class selector, so a max-width there is discarded
       and the headline keeps running into the artwork. */
    .welcome-text h1,
    .welcome-text p {
        max-width: 460px;
    }

    /* .info-card now hugs its content and centres by default, so this only
       restates it. Kept as the explicit guarantee for the sign-in card, which is
       the one that suffered most from the old height:100%. */
    #loginCard {
        height: auto;
        align-self: center;
    }
}

/* The announcement is information, not a failure. It kept the alert-danger red
   of a validation error, which trained members to ignore the one place the coop
   speaks to them. Scoped to the input-group wrapper so a genuine alert-danger
   rendered by any other view in this shell is untouched.
   Hiding the box when there is no announcement needs a Razor guard, so that part
   stays in P1 -- an empty red box is at least an empty blue one for now. */
#loginform .input-group > .alert.alert-danger {
    width: 100%;
    color: var(--coop-navy);
    background-color: var(--coop-blue-tint);
    border-color: var(--coop-blue);
}

    #loginform .input-group > .alert.alert-danger h5 {
        color: var(--coop-blue);
    }

/* Keyboard focus was invisible everywhere on this page. :focus rather than
   :focus-visible -- IE=edge is still declared in the layout head. */
.info-card a:focus,
#loginform .form-control:focus,
#loginform .btn:focus,
#loginform a:focus {
    outline: 2px solid var(--coop-blue);
    outline-offset: 2px;
}

#loginform .form-control:focus {
    border-color: var(--coop-blue);
    box-shadow: none;
}

/* Small screens. The container and pane padding this block used to shrink now
   live in portal-shell.css; the welcome copy is all that is left here. */
@media (max-width: 767px) {
    .welcome-text h1 {
        font-size: 30px;
    }

    .welcome-text p {
        font-size: 15px;
    }
}

/* ---------------------------------------------------------------------------
   Fixes from the rendered page, 08/20/2026. Added by Claude.
   --------------------------------------------------------------------------- */

/* Labels inherited text-align:center from the card's .text-center, which reads as
   a heading rather than a field label. The card's own centred content - the Sign In
   heading, the sign-up and forgot-password links - is left alone. */
#loginCard label {
    display: block;
    text-align: left;
}

@media (max-width: 575px) {
    .welcome-text h1,
    .welcome-text p {
        max-width: none;
    }
}

/* The logo block inside a card. It replaced the standalone .logobox banner above
   the tabs, which cost ~160px of vertical space - a 72px wordmark, 30px margins
   either side and a trailing <br/><br/> - before the member saw either card. The
   logo now sits in whichever card is on screen: above the sign-in form on Online
   Banking, and where the generic membership glyph used to be on Online Membership.

   Sized by BOTH dimensions, not by height alone. Height alone looked right on a
   wide screen and broke every narrow one: the configured wordmark is 1167x204, so
   height:56px makes it 320px wide, and max-width:100% cannot shrink it while the
   height is pinned. Constraining both lets the browser pick whichever limit binds
   and keeps the aspect ratio either way. Claude 08/20/2026. */
.info-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.info-card-logo .portal-logo {
    max-height: 48px;
    max-width: 100%;
    height: auto;
    width: auto;
}

/* ---------------------------------------------------------------------------
   Wide panel -- P5. A view that is a form rather than a sign-in box sets
   ViewBag.PanelWidth = "wide". Claude 08/20/2026.

   The shell was built around a small login box beside a welcome pane, and every
   one of the fourteen MemberAccount views inherited it. Registration is nine
   fields, so in a 42%-wide card it ran to about 1400px of scrolling with the
   entire left half of the page empty. Wide gives the form the container, drops
   the welcome pane that has nothing to say on a form page, and centres it.

   JJE 08/22/2026 - the whole block used to sit inside @@media (min-width:768px),
   so BELOW that width a form page put "Welcome to your Members Portal" and its
   marketing sentence above the form after all. Nobody noticed while the field
   pairing shared the same 768px threshold - the page was a plain stack there and
   the extra heading looked deliberate. Pairing starts at 576px now, so the two
   disagreed: a window between the two widths got the two-column form AND the
   welcome copy above it.

   There is no width at which the welcome pane belongs on a form page, so it is
   hidden at all of them. The 760px cap stays harmless on a narrow screen: the
   pane is already narrower than the cap.
   --------------------------------------------------------------------------- */
/* JJE/Claude 08/26/2026 - the two rules below used to be scoped to .is-wide, so
   the card centred on the three pages that ask for the wide panel (Register,
   ChangeAccountPassword, ResetForgotPassword) and sat hard against the right
   edge on the other five. They apply to every pane now; .is-wide is only the
   WIDTH variant, the same split the card skin made on 08/22.

   Specificity is deliberate and load-bearing. The @@media (min-width:768px)
   block above sets .col-md-4 to flex:0 0 42% at
   ".portal-container .portal-pane .row > .col-md-4" -- four classes. The rules
   here tie on that count and win on SOURCE ORDER, which is why they are below
   it rather than beside it. Raising them to five classes would work equally well
   and would be one more number to keep in step; the tie is the simpler contract.

   The two panes part company on the welcome copy, and the reason is what each
   pane holds:

   #banking is a form. A form cannot be centred with a marketing column beside
   it, and the copy is not lost -- Login.cshtml opens with its own
   <h1>Sign in</h1> inside the card, so hiding .welcome-text here also retires a
   second <h1> that should never have been on the page.

   #membership is NOT a form: _MembershipCard is a logo, a heading and two
   buttons. Nothing there needs centring at the expense of the page's only
   explanation, so the copy stays and stacks above the card instead. It leads
   with <h2>Online Membership</h2>, so removing .welcome-text would leave that
   tab with no <h1> at all.

   Both panes stack without a markup change: flex-basis 100% puts each child on
   its own line and the max-width plus auto margins centre the card on it. */
/* BOTH panes stack: welcome copy centred on top, card centred under it. The
   copy is the page's only explanation of what the two tabs are, and it reads as
   a heading for the card rather than as something competing with it.

   The .is-wide pages are the exception and keep the older behaviour below: on
   Register or ResetForgotPassword the copy sits above a heading that already
   says what the page is, so it is two headings for one form. */
.portal-container .portal-pane .row > .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    /* .welcome-text p sets margin-bottom:0, which was right while the copy sat
       in a column BESIDE the card and had nothing under it. Stacked above the
       card it left the sentence resting on the card's top border. Found by
       rendering the page, not by the suite. JJE/Claude 08/26/2026. */
    margin-bottom: 24px;
}

    /* The 460px cap on the copy is set in the @@media block above and is what
       keeps the headline off the artwork. Centred here, it needs the auto
       margins too or the block sits left inside a centred pane. Widened with the
       card: at 460px "Welcome to your Members Portal" broke after the fifth word
       and the sentence under it ran to three lines, which is most of the height
       that pushed the pane into scrolling. */
    .portal-container .portal-pane .row > .col-md-5 h1,
    .portal-container .portal-pane .row > .col-md-5 p {
        margin-left: auto;
        margin-right: auto;
        max-width: 760px;
    }

.portal-container.is-wide .portal-pane .row > .col-md-5 {
    display: none;
}

/* One width for every card in the shell. It was 480px for a moment, which is a
   sign-in box's natural size but made the announcement panel under it wrap to
   six lines and the pane scroll. 760px is the width the three form pages have
   used since 08/20 and it fits the announcement in three. */
.portal-container .portal-pane .row > .col-md-4 {
    flex: 0 0 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* Short, related fields pair up rather than each taking a full row: the name
   fields and the two password fields are the ones that read as a set. Scoped to
   the wide panel so the sign-in box is untouched.

   :not(.auth-form) added 08/22/2026 by Claude. This pairs fields by POSITION -
   every second .form-group.row starts a new line - which works only as long as
   the source order happens to put related fields next to each other. On the
   sign-up form it did not: it lined Branch Code up with Last Name, and left half
   a column empty beside the password checklist. That view declares its own grid
   now (.auth-form, in Css/portal-forms.css) and has to be able to, so it opts
   out here rather than fighting a rule that outranks it on specificity.

   Whatever else lands in the wide panel still gets the old behaviour, which is
   better than nothing for a form that has expressed no opinion. */
@media (min-width: 992px) {
    .portal-container.is-wide .form-group.row > .col-12 {
        max-width: 100%;
    }

    .portal-container.is-wide #loginform form:not(.auth-form) {
        display: flex;
        flex-wrap: wrap;
        gap: 0 22px;
    }

    .portal-container.is-wide #loginform form:not(.auth-form) > * {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* form-group.row is every labelled field; pairing them two-up halves the
       height of the page without touching the markup or the tab order. */
    .portal-container.is-wide #loginform form:not(.auth-form) > .form-group.row {
        flex: 1 1 calc(50% - 11px);
    }
}

/* ---------------------------------------------------------------------------
   The privacy-notice modal. JJE/Claude 08/20/2026.

   The notice is about 300 words, so the dialog grew taller than the viewport and
   the whole overlay scrolled. That put "Agree and Continue" below the fold: the
   one action the dialog exists to offer was invisible until the applicant
   scrolled to the bottom of a wall of legal text, and the heading saying what
   they were agreeing to had scrolled off the top by then.

   Cap the dialog at the viewport, let the BODY scroll, and the header and the two
   buttons stay put. Written as flexbox rather than with .modal-dialog-scrollable
   because that class arrived in Bootstrap 4.3 and the vendored build here
   predates it - and the packages in this tree are pinned.

   Scoped to #myModal so any other dialog on the page is untouched.
   --------------------------------------------------------------------------- */
#myModal .modal-dialog {
    display: flex;
    flex-direction: column;
    /* 3.5rem is the dialog's own top+bottom margin at this breakpoint. */
    max-height: calc(100vh - 3.5rem);
}

#myModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}

#myModal .modal-header,
#myModal .modal-footer {
    flex: 0 0 auto;
}

#myModal .modal-body {
    /* min-height:0 is the part that actually does the work: without it a flex
       item refuses to shrink below its content, so the body never scrolls and
       the footer is pushed off the bottom anyway. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575px) {
    #myModal .modal-dialog {
        max-height: calc(100vh - 1rem);
    }
}

/* The dialog is rendered inside #loginCard, which carries .text-center, so the
   notice inherited centred alignment: every paragraph centre-set, and the six
   purpose bullets sitting hard against the left edge with their text centred
   away from them. That is unreadable for a consent an applicant is expected to
   actually read. Same fix, and same reason, as #loginCard label above. */
#myModal .modal-body {
    text-align: left;
}

/* ============================================================================
   THE CARD THE LOGIN PAGES SIT IN. Claude 08/22/2026.

   The field system these pages use -- .auth-head, .auth-form, .auth-field and
   the rest -- was here until 08/22 and now lives in Css/portal-forms.css, which
   BOTH layouts link. It moved for the same reason the tabbed frame moved to
   portal-shell.css: the membership application flow needed the same forms, and a
   second copy of a design drifts silently.

   What is left here is what only the login side has: the card itself, and the
   two shapes .auth-form does not describe -- a field inside a Bootstrap input
   group, and the button password-reveal.js floats over a bare password field.
   ============================================================================ */

/* The card. White rather than tinted, one hairline border rather than two solid
   pixels, and the shadow doing the work of separating it from the artwork.

   JJE 08/22/2026 - this was scoped to .is-wide, so only the sign-up form wore it
   and the other eight pages in the Online Banking tab kept the notice skin. It is
   the whole section's card now. Only .is-wide still changes the WIDTH; what the
   card looks like no longer depends on which page is inside it. */
#loginCard {
    background: #ffffff;
    border: 1px solid #dbe6f2;
    border-radius: 18px;
    padding: 30px 34px 26px;
    box-shadow: 0 14px 34px rgba(12,68,124,.13);
    /* The card is .text-center for the landing page's sake. A form is read down
       its left edge. Pages that genuinely centre their content - the terminal
       message page - carry .text-center on their own wrapper and are unaffected. */
    text-align: left;
}

@media (max-width: 575px) {
    #loginCard {
        padding: 22px 18px 20px;
        border-radius: 14px;
    }
}

/* --- A FIELD IN AN INPUT GROUP -------------------------------------------
   The sign-in form puts its username and password in .input-group with an icon
   in front and a reveal button behind. The rounded 10px corners portal-forms.css
   gives every control would round the joins too, so the icon, the field and the
   button stop reading as one control. Square off the inside edges and let the
   group own the outside ones.

   Kept here rather than moved: no membership form has an input group, and a rule
   in the shared file that nothing on one of its two layouts uses is a rule
   nobody will dare delete later. */
#loginform .auth-form .input-group {
    width: 100%;
    /* Bootstrap 4.3 sets flex-wrap:wrap on .input-group. With the widths below
       correct there is nothing to wrap, but stating it means a future stray width
       cannot break the row into three again - which is exactly what happened on
       08/22/2026 when the shared file carried width:100% on .form-control. */
    flex-wrap: nowrap;
}

#loginform .auth-form .input-group > .form-control {
    /* Bootstrap's own values for a grouped control, restated because they are the
       reason the icon, the field and the button share a line. width:1% is not a
       typo: it is a flex-basis stand-in that lets flex-grow do the sizing. */
    flex: 1 1 auto;
    width: 1%;
    border-radius: 0;
    /* A flex item will not shrink below its content width without this, and the
       group then forces the card wider than the pane. */
    min-width: 0;
}

/* The addons must not stretch or shrink - they are sized by their content. */
#loginform .auth-form .input-group > .input-group-prepend,
#loginform .auth-form .input-group > .input-group-append {
    flex: 0 0 auto;
    display: flex;
}

#loginform .auth-form .input-group > .input-group-prepend:first-child > .input-group-text,
#loginform .auth-form .input-group > .form-control:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#loginform .auth-form .input-group > .input-group-append:last-child > .btn,
#loginform .auth-form .input-group > .form-control:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#loginform .auth-form .input-group-text {
    height: 46px;
    padding: 0 14px;
    color: var(--coop-blue);
    background-color: #f2f7fc;
    border: 1px solid #cfdded;
    border-right: none;
}

#loginform .auth-form .input-group-append .btn {
    height: 46px;
    padding: 0 14px;
    color: #6f8298;
    background-color: #f2f7fc;
    border: 1px solid #cfdded;
    border-left: none;
}

    #loginform .auth-form .input-group-append .btn:hover {
        color: var(--coop-navy);
        background-color: #e7eff8;
    }

/* password-reveal.js wraps a BARE password field in a positioned span and floats
   the button over the field's right edge, with the geometry written as an inline
   style. Only the colour is ours to set. */
#loginform .auth-form .password-reveal-wrap {
    width: 100%;
}

    #loginform .auth-form .password-reveal-wrap .password-reveal {
        color: #6f8298;
    }