/* ===========================================================================
   EECP Login / Password Reset
   ---------------------------------------------------------------------------
   Two-column sign-in shell used by LoginMaster.master.

   Palette is taken from the application's own Common.css so the login page
   reads as the front door of the product rather than a separate design:
       #a8bddf -> #6a85bb   widget-header gradient
       #6688bd              primary button (.btn-default)
       #5d708e              slate text / deep panel
       #edf2f9              pale page wash
       #3875d7              selection / focus accent (Kendo)
       #a80000              error text
       #EF2B2D              training-edition red
       #62b5e5              SaaS e Solutions brand cyan

   Several of those product colours do not meet WCAG 2.1 AA contrast, so the page
   uses darkened members of the same blue family for anything carrying text or
   acting as a control boundary. See the accessible tokens in :root below — each
   carries its measured ratio.

   No web fonts: Segoe UI is native on Windows and is the modern successor to
   the Verdana/Tahoma used elsewhere in the app, so the page paints with no
   external request (this matters on isolated/intranet deployments).

   This file deliberately overrides the floated .widget layout from Common.css,
   which is why several rules are more specific than they would otherwise need
   to be.
   =========================================================================== */

:root {
    --login-blue-300: #a8bddf;
    --login-blue-400: #8ba4cd;
    --login-blue-500: #6a85bb;
    --login-blue-600: #6688bd;
    --login-blue-700: #5d708e;
    --login-blue-900: #33405a;
    --login-pale: #edf2f9;
    --login-line: #c9d4e6;
    --login-line-strong: #999999;
    --login-ink: #242a35;
    --login-ink-soft: #5f6a7d;
    --login-accent: #3875d7;
    --login-cyan: #62b5e5;
    --login-error: #a80000;
    --login-error-bg: #fdf3f3;
    --login-error-line: #e6bcbd;
    --login-warn-bg: #fff6e0;
    --login-warn-line: #f0ad4e;
    --login-warn-ink: #8a5a00;
    --login-training: #EF2B2D;
    --login-ui: "Segoe UI", "Segoe UI Variable Text", Tahoma, Verdana, system-ui, sans-serif;

    /* --- WCAG 2.1 AA accessible variants of the palette above ---
       The product's own button colour #6688BD reaches only 3.61:1 against white,
       which fails 1.4.3 (needs 4.5:1). That is an app-wide issue in Common.css, not
       one introduced here, but this page cannot be compliant while using it. These
       are darkened members of the same blue family, with measured ratios noted so
       they are not "corrected" back to lighter values by mistake. */
    --login-action: #5d708e;         /* white text on it            5.03:1 */
    --login-action-hover: #4f6896;   /*                             5.60:1 */
    --login-action-active: #414f6d;  /*                             7.30:1 */
    --login-link: #5d708e;           /* on white                    5.03:1 */
    --login-link-hover: #45618f;     /*                             6.25:1 */
    --login-field-border: #7089ac;   /* vs white field  3.58:1 (1.4.11 needs 3) */
    --login-field-border-hover: #5d708e;

    /* Brand panel gradient. Every stop clears 4.5:1 with white text, so text is
       legible wherever it lands on the gradient rather than only near the bottom. */
    --login-panel-1: #516285;        /* white 6.11:1 */
    --login-panel-2: #414f6d;        /* white 7.30:1 */
    --login-panel-3: #2b3750;        /* white 11.4:1 */
}

/* ---------- accessibility helpers ---------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -48px;
    left: 0;
    background: var(--login-panel-3);
    color: #fff;
    padding: 9px 16px;
    z-index: 100;
    font-size: 13px;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ---------- page shell ---------- */

html, body.login-page {
    height: 100%;
}

body.login-page {
    margin: 0;
    padding: 0;
    background: var(--login-pale);
    color: var(--login-ink);
    font-family: var(--login-ui);
    -webkit-font-smoothing: antialiased;
    /* stops iOS/Android inflating text when the device is rotated to landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.login-page form {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.login-shell {
    display: -ms-grid;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
    /* dvh tracks the retracting mobile browser toolbar; 100vh alone leaves the
       page slightly taller than the visible area on iOS/Android. */
    min-height: 100dvh;
}

/* ---------- left: brand panel ---------- */

.login-brand {
    position: relative;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(160deg, var(--login-panel-1) 0%, var(--login-panel-2) 52%, var(--login-panel-3) 100%);
}

.login-brand::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 30px 30px;
}

.login-brand::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -190px;
    top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168,189,223,.34), transparent 62%);
}

.login-brand > * {
    position: relative;
    z-index: 1;
}

/* Client logo plate.
   serviceProvider.LogoImage is an arbitrary blob with an arbitrary ContentType
   (any colour, any aspect ratio, transparent or opaque). The opaque white plate
   guarantees contrast without constraining the tenant, and is the same white
   background the logo already renders on in the post-login SiteHeader — so it
   imposes no new requirement on any client.
     - opaque #fff (never rgba) so brand colour is not tinted by the panel
     - padding = quiet zone, so a mark never touches a coloured edge
     - max box + object-fit:contain, so any aspect ratio is contained, never stretched */
.login-brand .client-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    background: #fff;
    border-radius: 3px;
    padding: 12px 16px;
    min-width: 96px;
    min-height: 56px;
    max-width: 260px;
    box-shadow: 0 1px 3px rgba(12,20,36,.3);
}

/* LoginMaster.Master.cs writes serviceProvider.LogoHeight/LogoWidth as an INLINE
   style on this image. Inline wins over the stylesheet, so width/height are forced
   back to auto with !important — otherwise max-height would cap the height while the
   inline width stayed fixed, stretching the logo. Aspect ratio is then preserved and
   the max-* rules do the containing. */
.login-brand .client-logo img,
.login-brand .client-logo-img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
    border: 0;
}

/* Head takes the free height so the identity block still sits low in the column,
   directly above the legal block — i.e. desktop looks exactly as it did before
   the panel was split in two. */
.login-brand-head {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.login-brand-legal {
    flex: 0 0 auto;
}

.login-identity {
    margin-top: auto;
    padding-top: 48px;
}

.login-acronym {
    margin: 0;
    font-size: 52px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1;
}

.login-app-title {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255,255,255,.92);
    line-height: 1.5;
    max-width: 38ch;
}

.login-page .trainingLabel {
    margin-top: 18px;
}

.login-page .trainingLabel span {
    color: #ffd9d9 !important;
    font-size: 15px !important;
}

/* environment + version */
.login-meta {
    margin: 38px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.22);
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
}

.login-meta dt {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.88);
}

.login-meta dd {
    margin: 5px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.login-env-badge {
    display: inline-block;
    color: #ffe2ad;
    background: rgba(240,173,78,.18);
    border: 1px solid rgba(240,173,78,.55);
    border-radius: 3px;
    padding: 1px 8px;
    letter-spacing: .04em;
}

/* Disclaimer — Login.aspx divDisclaimer, text from
   SystemConfigurationLogic.GetDisclaimerText(); hidden when unset. */
.login-disclaimer {
    margin-top: 26px;
    max-width: 56ch;
}

.login-disclaimer h4 {
    margin: 0 0 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
}

.login-disclaimer span,
.login-disclaimer p {
    display: block;
    font-size: 11.5px;
    line-height: 1.65;
    color: rgba(255,255,255,.88);
}

/* ---------- right: form column ---------- */

.login-form-side {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 40px;
}

.login-form-wrap {
    width: 100%;
    max-width: 356px;
}

/* Reset the floated Common.css widget so it can be a plain block here. */
.login-page .widget,
.login-page .widget * {
    float: none !important;
    box-sizing: border-box;
}

.login-page .widget {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.login-page .widget > .widget-header {
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
}

.login-page .widget > .widget-header h2 {
    margin: 0 0 7px;
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--login-ink);
    text-align: left;
}

.login-page .widget > .widget-body {
    width: 100%;
    padding: 0;
}

.login-page .widget > .widget-footer {
    width: 100%;
    padding: 0;
}

.login-page .widget .widget-controls {
    width: 100%;
}

/* error / message banner */
.login-page .widget-text.centered-text {
    text-align: left;
    background: var(--login-error-bg);
    border: 1px solid var(--login-error-line);
    border-left: 3px solid var(--login-error);
    border-radius: 3px;
    padding: 11px 13px;
    margin-bottom: 22px;
    line-height: 1.5;
}

.login-page .widget-text.centered-text .error,
.login-page .error {
    color: var(--login-error);
    font-size: 13px;
}

/* ---------- form elements ---------- */

.login-page .form-element-list {
    width: 100%;
}

.login-page .form-element-list > .form-element {
    width: 100%;
    margin-bottom: 18px;
}

/* Same specificity story as the inputs: Common.css has
       .form-element-list > .form-element.list > .form-element-label { float:left; margin-bottom:4px }
   at (0,4,0), so the ancestor classes here are needed to keep this spacing. */
.login-page .form-element-label,
.login-page .widget .form-element-list .form-element .form-element-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--login-ink);
    margin-bottom: 6px;
}

.login-page .form-element-input {
    width: 100%;
}

/* Specificity note: Common.css declares
       .form-element-list > .form-element.list > .form-element-input input { height: 20px }
   which scores (0,4,1) and therefore beats a plain
   `.login-page .form-element-input input[type=text]` at (0,3,1), regardless of load
   order — the fields render 20px tall. The extra ancestor classes below raise these
   selectors above it. Keep them if this rule is ever refactored. */
.login-page .widget .form-element-list .form-element .form-element-input input[type=text],
.login-page .widget .form-element-list .form-element .form-element-input input[type=password] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-family: var(--login-ui);
    font-size: 14.5px;
    color: var(--login-ink);
    background: #fff;
    border: 1px solid var(--login-field-border);
    border-radius: 3px;
    transition: border-color .15s, box-shadow .15s;
}

.login-page .widget .form-element-list .form-element .form-element-input input[type=text]:hover,
.login-page .widget .form-element-list .form-element .form-element-input input[type=password]:hover {
    border-color: var(--login-field-border-hover);
}

.login-page .widget .form-element-list .form-element .form-element-input input[type=text]:focus,
.login-page .widget .form-element-list .form-element .form-element-input input[type=password]:focus {
    outline: none;
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(56,117,215,.16);
}

/* forgot-password / remember-me row */
.login-page .form-element-list-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: -2px 0 24px;
}

.login-page .form-element-list-inline .form-element {
    margin: 0;
}

.login-page .form-element-list-inline .form-element-input {
    width: auto;
}

.login-page .form-element-list-inline input[type=checkbox] {
    width: 15px;
    height: 15px;
    margin: 0 6px 0 0;
    vertical-align: -2px;
    accent-color: var(--login-accent);
}

.login-page .form-element-list-inline label {
    font-size: 13px;
    color: var(--login-ink-soft);
}

/* "Forgot Password?" is a real <button>, styled as a link (keeps it keyboard
   operable and out of the tab order confusion an href="#" creates). */
.login-page .link-button {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--login-ui);
    font-size: 13px;
    color: var(--login-link);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-page .link-button:hover {
    color: var(--login-accent);
}

.login-page .link-button:focus-visible {
    outline: 2px solid var(--login-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* primary button */
.login-page .widget-controls .btn,
.login-page .btn.btn-default {
    display: block;
    width: 100%;
    height: 42px;
    margin: 0;
    border: 1px solid var(--login-action);
    border-radius: 3px;
    cursor: pointer;
    background: var(--login-action);
    color: #fff;
    font-family: var(--login-ui);
    font-size: 14.5px;
    font-weight: 600;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.login-page .widget-controls .btn:hover,
.login-page .btn.btn-default:hover {
    background: var(--login-action-hover);
    border-color: var(--login-action-hover);
}

.login-page .widget-controls .btn:active,
.login-page .btn.btn-default:active {
    background: var(--login-action-active);
}

.login-page .widget-controls .btn:focus-visible,
.login-page .btn.btn-default:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56,117,215,.35);
}

/* ---------- credit line ---------- */

.login-credit {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #e8eef7;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--login-ink-soft);
}

/* SaaS e Solutions corporate mark — belongs with the "Powered by" credit,
   not with the EECP wordmark. */
.login-credit .saase-mark {
    display: block;
    width: 19px;
    height: auto;
    flex: none;
    border: 0;
}

/* ---------- password reset extras ---------- */

.login-page .widget-body .widget-text {
    font-size: 13px;
    color: var(--login-ink-soft);
    line-height: 1.55;
    margin-bottom: 18px;
}

.login-page .widget-body .widget-text h4 {
    margin: 0 0 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--login-ink);
}

.login-page .password-strength {
    font-weight: 600;
}

/* ---------- forgot-password dialog ----------
   jQuery UI's base theme is intentionally unstyled, so the dialog is themed here
   to match the product. This file is loaded AFTER jquery-ui.css in
   LoginMaster.master, which is what lets these rules win without !important.
   `.login-dialog` comes from the widget's dialogClass option. */

/* jQuery UI relocates the dialog out of .widget (appendTo form:first), so it never
   inherits the border-box reset scoped to `.login-page .widget *`. Without this the
   field's width:100% plus its own padding and border overflows the dialog body. */
.ui-dialog.login-dialog,
.ui-dialog.login-dialog * {
    box-sizing: border-box;
}

.ui-dialog.login-dialog {
    padding: 0;
    border: 1px solid var(--login-line-strong);
    border-radius: 5px;
    background: #fff;
    font-family: var(--login-ui);
    box-shadow: 0 18px 44px -12px rgba(28,40,66,.45), 0 2px 6px rgba(28,40,66,.16);
    max-width: calc(100vw - 32px);
}

/* title bar reuses the product's widget-header gradient */
.ui-dialog.login-dialog .ui-dialog-titlebar {
    background: linear-gradient(to bottom, var(--login-action) 6%, var(--login-action-hover) 75%);
    border: 0;
    border-bottom: 1px solid var(--login-line-strong);
    border-radius: 4px 4px 0 0;
    padding: 0 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.ui-dialog.login-dialog .ui-dialog-title {
    float: none;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 1px rgba(50,66,97,.35);
}

/* close button — jQuery UI's default is an icon sprite; replace with a glyph */
.ui-dialog.login-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-indent: 0;
    overflow: hidden;
}

.ui-dialog.login-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.login-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none;
}

.ui-dialog.login-dialog .ui-dialog-titlebar-close::before {
    content: "\00d7";
    display: block;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
}

.ui-dialog.login-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(255,255,255,.22);
}

.ui-dialog.login-dialog .ui-dialog-titlebar-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

/* body */
.ui-dialog.login-dialog .ui-dialog-content {
    padding: 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--login-ink);
    background: #fff;
}

.ui-dialog.login-dialog .dialog-lede {
    margin: 0;
    color: var(--login-ink-soft);
    font-size: 13px;
}

.ui-dialog.login-dialog .dialog-lede em {
    color: var(--login-ink);
    font-style: normal;
    font-weight: 600;
}

.login-page .ForgotPasswordDialogBody {
    background: #f4f7fb;
    border: 1px solid var(--login-field-border);
    border-radius: 3px;
    margin-top: 16px;
    padding: 14px;
}

.login-page .ForgotPasswordDialogBody label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--login-ink);
    margin-bottom: 7px;
}

.login-page .ForgotPasswordDialogBody input[type=text] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    font-family: var(--login-ui);
    font-size: 14px;
    color: var(--login-ink);
    background: #fff;
    border: 1px solid var(--login-field-border);
    border-radius: 3px;
    transition: border-color .15s, box-shadow .15s;
}

.login-page .ForgotPasswordDialogBody input[type=text]:hover {
    border-color: var(--login-field-border-hover);
}

.login-page .ForgotPasswordDialogBody input[type=text]:focus {
    outline: none;
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px rgba(56,117,215,.16);
}

/* status / error line under the field */
.ui-dialog.login-dialog .dialog-message:not(:empty) {
    display: block;
    margin-top: 14px;
    padding: 9px 12px;
    background: var(--login-error-bg);
    border: 1px solid var(--login-error-line);
    border-left: 3px solid var(--login-error);
    border-radius: 3px;
    color: var(--login-error);
    font-size: 12.5px;
}

/* button pane */
.ui-dialog.login-dialog .ui-dialog-buttonpane {
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-top: 1px solid #e3eaf4;
    background: #f7f9fc;
    border-radius: 0 0 4px 4px;
}

.ui-dialog.login-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
    display: flex;
    gap: 10px;
    margin: 0;
}

.ui-dialog.login-dialog .ui-dialog-buttonpane button {
    height: 38px;
    margin: 0;
    padding: 0 18px;
    border-radius: 3px;
    font-family: var(--login-ui);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.ui-dialog.login-dialog .ui-dialog-buttonpane button.login-dialog-primary {
    background: var(--login-action);
    border: 1px solid var(--login-action);
    color: #fff;
}

.ui-dialog.login-dialog .ui-dialog-buttonpane button.login-dialog-primary:hover {
    background: var(--login-action-hover);
    border-color: var(--login-action-hover);
}

.ui-dialog.login-dialog .ui-dialog-buttonpane button.login-dialog-secondary {
    background: #fff;
    border: 1px solid var(--login-field-border);
    color: var(--login-ink);
}

.ui-dialog.login-dialog .ui-dialog-buttonpane button.login-dialog-secondary:hover {
    background: #eef2f9;
    border-color: var(--login-field-border-hover);
}

.ui-dialog.login-dialog .ui-dialog-buttonpane button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56,117,215,.35);
}

/* modal backdrop */
.ui-widget-overlay {
    background: #1c2842;
    opacity: .45;
}

/* ---------- responsive ---------- */

/* ---------- responsive ----------
   Tablet and below the two columns stack. The sign-in form is ordered FIRST so it
   is reachable without scrolling past a full-height brand panel; identity, version
   and the disclaimer follow it. The brand panel contains no focusable elements, so
   reordering it visually does not desync the focus order from the DOM. */

@media (max-width: 900px) {
    /* Three stacked bands: branded header, sign-in form, legal footer.
       The last row is 1fr so it absorbs any leftover viewport height — without it a
       page whose content falls just short of the viewport leaves the body background
       showing as a gap under the last band. */
    .login-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }

    /* The wrapper stops generating a box, so its two children become grid items of
       .login-shell and can be ordered around the form. Its gradient and decorative
       pseudo-elements go with it, hence the explicit backgrounds below. */
    .login-brand {
        display: contents;
    }

    /* A display:contents element generates no box, but its pseudo-elements are still
       generated — and they lose it as their containing block. The decorative bloom
       (520px wide, right:-190px) would then be positioned against the viewport and
       push exactly 190px of horizontal scroll. Both are decorative, so drop them. */
    .login-brand::before,
    .login-brand::after {
        display: none;
    }

    .login-brand-head {
        order: 1;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        color: #fff;
        background: linear-gradient(135deg, var(--login-panel-1) 0%, var(--login-panel-2) 100%);
    }

    .login-form-side {
        order: 2;
        padding: 26px 18px 22px;
        align-items: flex-start;
    }

    .login-brand-legal {
        order: 3;
        padding: 18px 18px 26px;
        color: #fff;
        background: var(--login-panel-3);
    }

    .login-form-wrap {
        max-width: 440px;
        margin: 0 auto;
    }

    /* compact logo plate for the header strip */
    .login-brand .client-logo {
        flex: 0 0 auto;
        padding: 7px 11px;
        min-height: 40px;
        min-width: 0;
        max-width: 140px;
    }

    .login-brand .client-logo img,
    .login-brand .client-logo-img {
        max-height: 34px;
    }

    /* identity sits beside the logo rather than being pushed to the bottom */
    .login-identity {
        margin-top: 0;
        padding-top: 0;
        min-width: 0;
    }

    .login-acronym {
        font-size: 21px;
    }

    .login-app-title {
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.35;
        max-width: none;
        /* two lines maximum so the header strip cannot grow unbounded on a long
           Application.Title; the full value stays in the DOM for screen readers */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .login-page .trainingLabel {
        margin-top: 6px;
    }

    .login-page .trainingLabel span {
        font-size: 13px !important;
    }

    /* environment + version become one quiet row above the disclaimer */
    .login-meta {
        margin: 0 0 14px;
        padding-top: 0;
        border-top: 0;
        gap: 24px;
    }

    .login-meta dt {
        display: inline;
        font-size: 10px;
    }

    .login-meta dd {
        display: inline;
        margin: 0 0 0 6px;
        font-size: 12px;
    }

    .login-disclaimer {
        margin-top: 0;
        max-width: none;
    }
}

@media (max-width: 560px) {
    .login-brand-head {
        padding: 12px 15px;
        gap: 12px;
    }

    .login-form-side {
        padding: 22px 15px 20px;
    }

    .login-brand-legal {
        padding: 16px 15px 22px;
    }

    .login-acronym {
        font-size: 19px;
    }

    /* 16px is the threshold below which iOS Safari zooms the page on focus.
       Selectors mirror the specificity note above so Common.css does not win. */
    .login-page .widget .form-element-list .form-element .form-element-input input[type=text],
    .login-page .widget .form-element-list .form-element .form-element-input input[type=password],
    .login-page .ForgotPasswordDialogBody input[type=text] {
        font-size: 16px;
    }

    /* comfortable touch targets */
    .login-page .widget .form-element-list .form-element .form-element-input input[type=text],
    .login-page .widget .form-element-list .form-element .form-element-input input[type=password] {
        height: 44px;
    }

    .login-page .widget-controls .btn,
    .login-page .btn.btn-default {
        height: 46px;
    }

    .login-page .form-element-list-inline {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* dialog: fill the width it is given and stack its buttons */
    .ui-dialog.login-dialog {
        width: calc(100vw - 24px) !important;
        left: 12px !important;
        right: 12px !important;
    }

    .ui-dialog.login-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        float: none;
        flex-direction: column-reverse;
        width: 100%;
    }

    .ui-dialog.login-dialog .ui-dialog-buttonpane button {
        width: 100%;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}