) onto
its own line beneath. Position it as an overlay inside the field
instead. position:relative on every .viewportCredentials row is
harmless for rows without an absolutely-positioned child; !important
overrides the inline style="...margin:auto..." already on the icon's
div (the inline height:40px is kept — 4px top/bottom = vertically
centered within the 48px-tall input). */
.mx-login-card .viewportCredentials {
position: relative;
}
.lbl_input input[type="password"] {
padding-right: 44px !important;
}
#togglePassword {
position: absolute;
right: 14px;
bottom: 4px;
margin: 0 !important;
}
/* User request: all remaining non-black help/footer links on this card
should be black. ("Register here" and "Use your username and
password" are already forced black above; these are the rest.)
lblHavingTroubleLoggingIn/lblLearnAboutMFA/lblMFAIsComing are
asp:Label server controls; Web.config sets
,
which mangles their rendered id with naming-container prefixes (e.g.
"ctl00_bodyContentPlaceHolder_udPanel_lblMFAIsComing") — a bare
#lblMFAIsComing selector never matches. [id$="..."] matches the
rendered id regardless of prefix. */
#entraLoginSection .entraHeader,
#entraLoginSection .entraLink,
[id$="lblHavingTroubleLoggingIn"],
[id$="lblLearnAboutMFA"],
[id$="lblMFAIsComing"],
.viewportCredentials a {
color: var(--mx-color-text-primary) !important;
}
/* User request: hide the "Forgot Username" half of the forgot-link row,
keeping only "Forgot password?" visible, per the target design. */
.mx-hidden {
display: none;
}
/* User request: match the member-facing MX login exactly — hide the
legacy CMS-only notices ("Logins are now authenticated…", "Having
trouble logging in?", "Learn about additional security") and the
"FBG Employee? Log In via Entra" workforce-login link. Hidden, not
removed from the DOM, so the flag-Off legacy layout stays
byte-identical; these selectors only bite inside .mx-login-card,
which renders only when the MX flag is on. */
.mx-login-card .viewportThirdOptionContainer,
.mx-login-card .loginFooterRow {
display: none;
}
/* User request: match the target design's field rows — vertical gap
between rows (MX's actual Login.styled.ts Form gap = theme.spacing(3)
= 24px), and floating labels inside the input border (MUI
OutlinedInput look) instead of a separate label line above the field. */
.mx-login-card .lbl_input.viewportCredentials {
margin-bottom: var(--mx-space-3);
}
/* The forgot-password row is immediately followed by the button row's
own margin-top:10px, so it doesn't need the standard gap below it too
— :last-of-type would be wrong here (the button row is also a
positioned after it, so it's not actually the last div of its type);
:has(a) identifies it the same way the existing right-align rule does. */
.mx-login-card .lbl_input.viewportCredentials:has(a) {
margin-bottom: 0;
}
.mx-login-card .lbl_input span.mx-field-label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-family: var(--mx-font-family);
font-size: var(--mx-body1-size);
color: var(--mx-color-text-secondary);
background: var(--mx-color-background-paper);
padding: 0 4px;
pointer-events: none;
transition: top 0.15s ease, transform 0.15s ease, font-size 0.15s ease;
white-space: nowrap;
}
.mx-login-card .lbl_input span.mx-field-label .required {
color: var(--mx-color-error);
}
/* Floats up + shrinks on focus, or whenever the field has a value
(:placeholder-shown only matches an EMPTY field with its placeholder
showing — the placeholder=" " on txtUsername/txtPassword exists
purely to make this pseudo-class available; the space is never
visible since the label sits on top of it). This also correctly
floats the label on a server postback that redisplays a validation
error with the previously-typed value still in the field, since
:placeholder-shown reflects the input's actual current value, not
just client-side typing. */
.mx-login-card .lbl_input input:focus + span.mx-field-label,
.mx-login-card .lbl_input input:not(:placeholder-shown) + span.mx-field-label {
top: 0;
transform: translateY(-50%) scale(0.85);
left: 10px;
}
/* User request: "Log in" (classic-login submit) should be full-width,
matching "Sign in with MyFBG" and the target design, rather than the
shrink-wrapped right-aligned button from the previous iteration.
btnContinueExisting is an asp:Button (runat=server), so its rendered
id is AutoID-mangled — [id$="..."] matches regardless of prefix. */
[id$="btnContinueExisting"] {
width: 100%;
float: none;
}
/* User request: pin the support footer (phone icon + number) to the bottom
of the page, constrained to the RIGHT side (the form panel), not the full
page width. position:absolute resolves against .mx-shell__form-panel
(which is position:relative), so the bar exactly matches the form panel's
width and bottom edge — on desktop that's the right column, and below the
lg breakpoint (single-column) it's the full width — with no reliance on
the two columns being an exact 50/50 split. */
.mx-support-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: var(--mx-space-1);
padding: var(--mx-space-2);
background: var(--mx-grey-50);
font-family: var(--mx-font-family);
font-size: var(--mx-subtitle2-size);
color: var(--mx-color-text-secondary);
}
/* The legacy master-page footer ("The Contractors Plan" image bar) isn't
part of the MX design; keep it hidden on the MX view so the page ends
at the login card. Only affects the MX view — this stylesheet isn't
loaded at flag-Off. */
#bottom_content_outer {
display: none;
}
.mx-support-footer svg {
flex-shrink: 0;
color: var(--mx-color-text-secondary);
}
.mx-support-footer a {
color: var(--mx-color-text-primary) !important;
font-weight: 700;
text-decoration: underline;
}
/* Entra multi-account overlay */
.entraOverlayDialog {
font-family: var(--mx-font-family);
border-radius: 16px;
}
.entraOverlayTitle {
font-family: var(--mx-font-family) !important;
color: var(--mx-color-text-primary) !important;
}
.entraOverlaySubtitle,
.entraAccountTable {
font-family: var(--mx-font-family) !important;
}
.entraCancelBtn {
font-family: var(--mx-font-family) !important;
border-radius: 16px;
}