/* FLEETCOM - the login page after /root/fleetcom_design/06_login_page.png
   (read with 05_design_system.png). Loaded only by index.php's flagged block,
   rooted at html.fc-login (set by js/gs.fleetcom.login.js). Sizes are the
   reference's pixels / 1.413 (it is drawn at 1440 CSS px across).
   Motion: transform / opacity / box-shadow only. */
html.fc-login {
    --fc-blue:#1B75BC; --fc-blue-d:#135A91; --fc-cyan:#00AEEF; --fc-orange:#F7941D; --fc-orange-ink:#A85D08;
    --fc-ink:#0D1B2A; --fc-ink2:#47596B; --fc-ink3:#5A6B7D; --fc-border:#E1E8F0; --fc-ground:#F5F8FC;
    --fc-ease:cubic-bezier(.2,.8,.2,1);
    height:100%;
}
html.fc-login body#login {
    display:block; min-height:100%; height:auto; margin:0; overflow-x:hidden; overflow-y:auto; position:relative;
    font-family:"IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:#FFFFFF;
    background-color:#041628;
    background-image:
        radial-gradient(108px 108px at 56.3% 24%, rgba(14,92,146,.95) 0%, rgba(9,66,108,.92) 92%, rgba(9,66,108,0) 100%),
        radial-gradient(130px 130px at 13.5% 80.5%, rgba(120,82,40,.55) 0%, rgba(40,46,52,.55) 90%, rgba(40,46,52,0) 100%),
        radial-gradient(620px 520px at 22% 32%, rgba(13,98,160,.62), rgba(8,58,100,.25) 55%, rgba(4,22,40,0) 80%),
        linear-gradient(180deg, #062a48 0%, #04203a 45%, #041628 100%);
    background-size:auto; background-position:0 0;
}
html.fc-login .fcl-decor { position:fixed; inset:0; z-index:0; pointer-events:none; }
html.fc-login .fcl-decor svg { width:100%; height:100%; display:block; }

/* ---- the top-right group: Support (soon), Demo account / Quote, Contact, language ---- */
html.fc-login .fcl-top { position:absolute; top:20px; right:43px; z-index:3; display:flex; align-items:center; gap:12px; }
html.fc-login .fcl-tbtn { display:inline-flex; align-items:center; gap:6px; height:37px; padding:0 11px; box-sizing:border-box; border-radius:10px;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#FFFFFF !important; text-decoration:none !important;
    font:600 12px/1 "IBM Plex Sans", sans-serif; white-space:nowrap; transition:box-shadow .18s var(--fc-ease), transform .18s var(--fc-ease); }
html.fc-login .fcl-tbtn .fcl-ico { width:16px; height:16px; flex:none; }
html.fc-login .fcl-tbtn:hover, html.fc-login .fcl-tbtn:focus-visible { box-shadow:0 0 0 3px rgba(0,174,239,.22); outline:none; }
html.fc-login .fcl-tbtn[aria-disabled="true"] { cursor:default; }
html.fc-login .fcl-soon { font:700 8.5px/1 "IBM Plex Sans", sans-serif; letter-spacing:.06em; text-transform:uppercase; font-style:normal;
    background:var(--fc-orange); color:#2A1600; padding:3px 5px; border-radius:5px; margin-left:2px; }
html.fc-login .fcl-lang { height:37px; }
html.fc-login .fcl-lang .ms-parent { width:auto !important; height:37px; }
html.fc-login .fcl-lang .ms-choice { height:37px !important; min-width:0; padding:0 26px 0 12px !important; box-sizing:border-box; border-radius:10px !important;
    border:1px solid rgba(255,255,255,.16) !important; background:rgba(255,255,255,.04) !important; box-shadow:none !important; }
html.fc-login .fcl-lang .ms-choice > span { position:static !important; display:block; line-height:35px !important; padding:0 !important; color:#FFFFFF !important;
    font:600 12.5px/35px "IBM Plex Sans", sans-serif !important; }
html.fc-login .fcl-lang .ms-choice > div { top:10px !important; right:9px !important; filter:invert(1) brightness(2); }
html.fc-login .fcl-lang select { display:none; }
body#login > .ms-drop { border-radius:10px; border:1px solid var(--fc-border); box-shadow:0 12px 32px rgba(13,27,42,.24); font-family:"IBM Plex Sans", sans-serif; }

/* ---- the hero on the left ---- */
html.fc-login .fcl-hero { position:absolute; left:46px; top:50%; transform:translateY(-298px); z-index:2; max-width:520px; }
html.fc-login .fcl-badge { display:inline-flex; align-items:center; gap:9px; height:30px; padding:0 14px 0 12px; box-sizing:border-box; border-radius:999px;
    border:1px solid rgba(0,174,239,.42); background:rgba(0,174,239,.10); color:#8AD8FA; font:600 11px/1 "IBM Plex Sans", sans-serif; }
html.fc-login .fcl-badge i { width:6px; height:6px; border-radius:50%; background:var(--fc-cyan); }
html.fc-login .fcl-h1 { margin:26px 0 0; font:700 50px/55px "IBM Plex Sans", sans-serif; letter-spacing:-.02em; color:#FFFFFF; }
html.fc-login .fcl-h1 span { display:block; }
html.fc-login .fcl-h1b { background:linear-gradient(90deg, #12B4F0 0%, #3BB2E4 30%, #C9A055 62%, #F7941D 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
html.fc-login .fcl-lead { margin:18px 0 0; max-width:500px; font:400 15.5px/27px "IBM Plex Sans", sans-serif; color:rgba(255,255,255,.80); }
html.fc-login .fcl-stats { display:flex; gap:24px; margin-top:38px; }
html.fc-login .fcl-stat { border-left:2px solid var(--fc-cyan); padding:2px 0 2px 13px; display:flex; flex-direction:column; gap:7px; flex:none; max-width:112px; }
html.fc-login .fcl-stat:nth-child(1) { max-width:96px; } html.fc-login .fcl-stat:nth-child(2) { max-width:118px; } html.fc-login .fcl-stat:nth-child(3) { max-width:170px; }
html.fc-login .fcl-stat b { font:600 29px/1 "IBM Plex Mono", monospace; color:#FFFFFF; letter-spacing:-.01em; }
html.fc-login .fcl-stat b small { font-size:17px; margin-left:1px; }
html.fc-login .fcl-stat span { font:600 10.5px/1.5 "IBM Plex Sans", sans-serif; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.72); display:block; }

/* ---- the card on the right (the platform's own .wrapper / .inner-wrapper) ---- */
html.fc-login body#login .wrapper { display:block; position:absolute; right:60px; top:50%; transform:translateY(-50%); z-index:2; }
html.fc-login body#login .wrapper .inner-wrapper.fcl-card { width:425px; box-sizing:border-box; margin:0; padding:34px 34px 30px; float:none !important; opacity:1 !important;
    background:#FFFFFF; border:none; border-radius:21px; backdrop-filter:none;
    box-shadow:0 1px 2px rgba(13,27,42,.10), 0 30px 70px rgba(0,8,20,.45); color:var(--fc-ink); }
html.fc-login body#login .logo-block { margin:0 0 0; display:flex; justify-content:center; float:none; }
html.fc-login body#login .logo { max-height:34px; filter:none; opacity:1; transition:none; transform:none; }
html.fc-login body#login .logo:hover { transform:none; }
html.fc-login .fcl-head { text-align:center; margin:27px 0 12px; }
html.fc-login .fcl-title { margin:0; font:700 25px/1.2 "IBM Plex Sans", sans-serif; color:var(--fc-ink); letter-spacing:-.01em; }
html.fc-login .fcl-sub { margin:9px 0 0; font:400 13px/1.4 "IBM Plex Sans", sans-serif; color:var(--fc-ink3); }
html.fc-login body#login .server-select .row3:empty { display:none; }
html.fc-login body#login .registration-closed { background:#FEF3E2; color:var(--fc-orange-ink); box-shadow:none; border-radius:10px; font:500 13px/1.4 "IBM Plex Sans", sans-serif; padding:10px 12px; }

/* the three blocks: one shown at a time (same #anchors) */
html.fc-login body#login .wrapper .inner-wrapper .content { height:auto; overflow:visible; }
html.fc-login body#login .wrapper .inner-wrapper .content .content-block { display:none; min-height:0; }
html.fc-login body#login .wrapper .inner-wrapper .content .content-block.fcl-on { display:block; }
html.fc-login body#login .wrapper .inner-wrapper .content .content-block .row3 { margin:0 0 16px; }
html.fc-login body#login .wrapper .inner-wrapper .content .content-block .row3:last-of-type { margin-bottom:14px; }
html.fc-login .fcl-label { display:block; margin:0 0 5px; font:600 12.5px/1.2 "IBM Plex Sans", sans-serif; color:var(--fc-ink); }

/* fields: the platform's inputs (type unchanged); the icon is painted, the platform's icon class kept */
html.fc-login body#login input.inputbox { display:block; height:47px; width:100% !important; max-width:none !important; box-sizing:border-box; padding:0 44px 0 42px; border:1px solid var(--fc-border) !important; border-radius:10px;
    background-color:#FFFFFF !important; background-repeat:no-repeat !important; background-position:15px center !important; background-size:17px 17px !important;
    font:400 14px/1 "IBM Plex Sans", sans-serif; color:var(--fc-ink) !important; box-shadow:none !important; opacity:1; float:none; margin:0;
    transition:box-shadow .18s var(--fc-ease); }
html.fc-login body#login input.inputbox::placeholder { color:#8593A3; }
html.fc-login body#login input.inputbox:hover { border-color:#C9D6E3 !important; }
html.fc-login body#login input.inputbox:focus { border-color:var(--fc-blue) !important; box-shadow:0 0 0 3px rgba(27,117,188,.16) !important; outline:none; }
html.fc-login body#login input.icon-user { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E") !important; }
html.fc-login body#login input.icon-password { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.2'/%3E%3Cpath d='M8.2 10.5V7.8a3.8 3.8 0 0 1 7.6 0v2.7'/%3E%3C/svg%3E") !important; }
html.fc-login body#login input.icon-email { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B7D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.2'/%3E%3Cpath d='M4.5 7l7.5 6 7.5-6'/%3E%3C/svg%3E") !important; }
/* the platform's show / hide password control (checkbox + label), drawn as an eye inside the field */
html.fc-login body#login .content-block .row3-password-wrapper { position:relative; display:block !important; }
html.fc-login body#login .content-block .row3-password-wrapper .password-input { width:100% !important; max-width:none !important; flex:none; border-radius:10px; border-right:1px solid var(--fc-border) !important; height:47px; }
/* the platform's invisible checkbox stays the click target (its label is pointer-events:none): placed over the drawn eye */
html.fc-login body#login .content-block .row3-password-wrapper .login-reveal-checkbox { position:absolute !important; right:8px; bottom:7px; top:auto; width:33px !important; height:33px !important; flex:none !important;
    margin:0; opacity:0; z-index:1000 !important; pointer-events:auto !important; cursor:pointer !important; }
html.fc-login body#login .row3-password-wrapper label.reveal { position:absolute !important; right:8px !important; left:auto !important; top:auto !important; bottom:7px !important; width:33px !important; height:33px !important;
    margin:0 !important; border-radius:8px; cursor:pointer; border:none !important; background-color:transparent !important; box-shadow:none; background-repeat:no-repeat !important; background-position:center !important; background-size:18px 18px !important; opacity:1 !important; transform:none !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347596B' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") !important; }
html.fc-login body#login .row3-password-wrapper label.reveal.hide { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B75BC' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M4 4l16 16'/%3E%3C/svg%3E") !important; }
html.fc-login body#login .row3-password-wrapper .login-reveal-checkbox:focus-visible + label.reveal { box-shadow:0 0 0 3px rgba(27,117,188,.22); }

/* remember me + forgot password */
html.fc-login .fcl-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 22px; }
html.fc-login body#login .fcl-row .remember-block { float:none; margin:0; padding:0; display:flex; align-items:center; position:static; width:auto; height:auto; }
html.fc-login body#login .fcl-row .remember-block .custom-checkbox { display:inline-flex !important; align-items:center; gap:10px; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important;
    background:none !important; border:none !important; box-shadow:none !important; cursor:pointer; font:500 13.5px/1.2 "IBM Plex Sans", sans-serif; color:var(--fc-ink); float:none; position:static; }
html.fc-login body#login .fcl-row .remember-block .custom-checkbox::before { content:""; flex:none; width:16px; height:16px; box-sizing:border-box; border:1.5px solid #9AAABB; border-radius:4px; background:#FFFFFF center / 12px 12px no-repeat;
    transition:box-shadow .16s var(--fc-ease); }
html.fc-login body#login .fcl-row .remember-block .custom-checkbox.checked::before { border-color:var(--fc-blue); background-color:var(--fc-blue);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
html.fc-login body#login .fcl-row .remember-block .custom-checkbox:hover::before { box-shadow:0 0 0 3px rgba(27,117,188,.14); }
html.fc-login body#login .fcl-row .remember-block .custom-checkbox::after { display:none !important; }
html.fc-login body#login .fcl-row .remember-block input { display:none !important; }   /* the platform's hidden checkbox (its label toggles it) */
html.fc-login body#login a.fcl-forgot { font:600 13.5px/1.2 "IBM Plex Sans", sans-serif; color:var(--fc-blue) !important; text-decoration:none; white-space:nowrap; }
html.fc-login body#login a.fcl-forgot:hover { text-decoration:underline; }

/* the platform's login button */
html.fc-login body#login .wrapper .content-block .submit-btn { position:relative; margin:0; height:auto; }
html.fc-login body#login .wrapper .content-block input.button { display:block; width:100%; height:49px !important; margin:0; padding:0 26px 0 0; border:none; border-radius:10px; cursor:pointer;
    background:linear-gradient(90deg, #155F99 0%, #1B75BC 50%, #1386CC 100%) !important; color:#FFFFFF !important;
    font:600 15.5px/49px "IBM Plex Sans", sans-serif; letter-spacing:.005em; text-shadow:none;
    box-shadow:0 10px 26px rgba(0,174,239,.32), 0 2px 6px rgba(13,27,42,.14); transition:box-shadow .18s var(--fc-ease), transform .18s var(--fc-ease); }
html.fc-login body#login .wrapper .content-block input.button::before { display:none; }
html.fc-login body#login .wrapper .content-block input.button:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,174,239,.40), 0 3px 8px rgba(13,27,42,.16); }
html.fc-login body#login .wrapper .content-block input.button:active { transform:translateY(0); }
html.fc-login body#login .wrapper .content-block input.button:focus-visible { outline:none; box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--fc-blue); }
html.fc-login .fcl-btn-arrow { position:absolute; top:0; height:49px; display:flex; align-items:center; left:calc(50% + 46px); pointer-events:none; color:#FFFFFF; }
html.fc-login .fcl-btn-arrow .fcl-ico { width:17px; height:17px; }
html.fc-login body#login #connect > .recover-register-block { display:none; }

/* or · create an account · demo / quote · links */
html.fc-login .fcl-or { display:flex; align-items:center; gap:12px; margin:19px 0 18px; color:var(--fc-ink3); font:400 11.5px/1 "IBM Plex Sans", sans-serif; }
html.fc-login .fcl-or::before, html.fc-login .fcl-or::after { content:""; flex:1; height:1px; background:var(--fc-border); }
html.fc-login .fcl-two { display:grid; grid-template-columns:1.04fr 1fr; gap:10px; }
html.fc-login .fcl-b2 { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; box-sizing:border-box; border-radius:10px; text-decoration:none !important;
    font:600 13.5px/1 "IBM Plex Sans", sans-serif; transition:box-shadow .18s var(--fc-ease); }
html.fc-login .fcl-b2 .fcl-ico { width:16px; height:16px; }
html.fc-login .fcl-b2-reg { border:1px solid #CFDEEC; background:#FFFFFF; color:var(--fc-blue) !important; }
html.fc-login .fcl-b2-demo { border:1px solid #F6D3A2; background:#FFF7EC; color:var(--fc-orange-ink) !important; }
html.fc-login .fcl-b2:hover, html.fc-login .fcl-b2:focus-visible { box-shadow:0 0 0 3px rgba(27,117,188,.14); outline:none; }
html.fc-login .fcl-b2[aria-disabled="true"] { cursor:default; }
html.fc-login .fcl-links { display:flex; justify-content:center; align-items:center; margin:19px 0 0; padding-top:18px; border-top:1px solid #EDF1F6; }
html.fc-login body#login a.fcl-link { display:inline-flex; align-items:center; gap:7px; padding:0 14px; font:500 13px/1.2 "IBM Plex Sans", sans-serif; color:var(--fc-ink2) !important; text-decoration:none; }
html.fc-login body#login a.fcl-link + a.fcl-link { border-left:1px solid var(--fc-border); }
html.fc-login body#login a.fcl-link:hover { color:var(--fc-blue) !important; }
html.fc-login body#login a.fcl-link .fcl-ico { width:15px; height:15px; }
html.fc-login body#login .footer.fcl-empty { display:none; }
html.fc-login body#login .footer.text { margin-top:16px; border:none; color:var(--fc-ink3); font:400 12px/1.4 "IBM Plex Sans", sans-serif; text-align:center; }

/* style.override.css forces the old login with !important (52 px fields, 55 px padding, 12 px radius, an orange
   button that stays orange on hover): each property named again here, at a higher specificity */
html.fc-login body#login input.inputbox { height:47px !important; padding:0 44px 0 42px !important; border-radius:10px !important; font-size:14px !important; }
html.fc-login body#login input.inputbox:hover { box-shadow:none !important; }
html.fc-login body#login input.inputbox:focus { transform:none !important; }
html.fc-login body#login .wrapper .content-block input.button { border-radius:10px !important; font-size:15.5px !important; font-weight:600 !important;
    box-shadow:0 10px 26px rgba(0,174,239,.32), 0 2px 6px rgba(13,27,42,.14) !important; }
html.fc-login body#login .wrapper .content-block input.button:hover { background:linear-gradient(90deg, #155F99 0%, #1B75BC 50%, #1386CC 100%) !important; transform:translateY(-1px) !important;
    box-shadow:0 14px 32px rgba(0,174,239,.40), 0 3px 8px rgba(13,27,42,.16) !important; }
html.fc-login body#login .wrapper .content-block input.button:active { transform:translateY(0) !important; }
html.fc-login body#login .wrapper .content-block input.button:focus-visible { box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--fc-blue) !important; }

/* recover / register blocks: the same parts */
html.fc-login body#login #recover input.button, html.fc-login body#login #register input.button { margin-top:4px; padding:0; }
html.fc-login body#login #recover .recover-register-block, html.fc-login body#login #register .recover-register-block { display:flex; justify-content:center; gap:8px; margin:18px 0 0; padding:0;
    font:400 13px/1.2 "IBM Plex Sans", sans-serif; color:var(--fc-ink3); list-style:none; }
html.fc-login body#login .recover-register-block li a { color:var(--fc-blue) !important; font-weight:600; text-decoration:none; }

/* page footer */
html.fc-login .fcl-foot { position:absolute; left:46px; bottom:34px; z-index:2; font:400 12.5px/1 "IBM Plex Sans", sans-serif; color:rgba(255,255,255,.58); }
html.fc-login .fcl-foot a { color:rgba(255,255,255,.88) !important; text-decoration:none; }
html.fc-login .fcl-foot a:hover { text-decoration:underline; }

/* the platform's message dialog (wrong credentials etc.: its own generic text), in the design system */
html.fc-login .ui-dialog.dialog-notify-titlebar { border:none !important; border-radius:14px !important; padding:0 !important; box-shadow:0 24px 60px rgba(0,8,20,.40) !important; font-family:"IBM Plex Sans", sans-serif; overflow:visible; }
html.fc-login .ui-dialog.dialog-notify-titlebar .ui-dialog-titlebar { display:none; }
html.fc-login .ui-dialog.dialog-notify-titlebar { background:#FFFFFF !important; }
html.fc-login .ui-dialog.dialog-notify-titlebar .ui-dialog-content { padding:22px 24px 18px !important; color:var(--fc-ink); background:transparent !important; border:none !important; border-radius:14px !important; }
html.fc-login .ui-dialog.dialog-notify-titlebar .ui-dialog-content .row, html.fc-login .ui-dialog.dialog-notify-titlebar .ui-dialog-content .row2 { background:transparent !important; border:none !important; }
html.fc-login #dialog_notify_text { display:block; font:500 14px/1.5 "IBM Plex Sans", sans-serif; color:var(--fc-ink); text-align:center; max-width:320px; margin:0 auto 16px; }
html.fc-login #dialog_notify input.button { min-width:110px; height:38px; border:none !important; border-radius:10px !important; background:var(--fc-blue) !important; color:#FFFFFF !important;
    font:600 13.5px/38px "IBM Plex Sans", sans-serif !important; cursor:pointer; box-shadow:none; transition:box-shadow .16s var(--fc-ease); }
html.fc-login #dialog_notify input.button:focus-visible, html.fc-login #dialog_notify input.button:hover { box-shadow:0 0 0 3px rgba(27,117,188,.22); outline:none; }
html.fc-login .ui-widget-overlay { background:rgba(4,22,40,.55) !important; opacity:1 !important; }

/* narrower screens: the same parts in one column (no information hidden) */
@media (max-width:1180px), (max-height:700px) {
    html.fc-login .fcl-hero, html.fc-login body#login .wrapper, html.fc-login .fcl-top, html.fc-login .fcl-foot { position:relative; inset:auto; transform:none; }
    html.fc-login .fcl-top { justify-content:flex-end; padding:20px 24px 0; flex-wrap:wrap; }
    html.fc-login .fcl-hero { padding:36px 24px 0; max-width:none; }
    html.fc-login body#login .wrapper { padding:32px 16px; display:flex; justify-content:center; }
    html.fc-login .fcl-foot { padding:0 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
    html.fc-login * { transition:none !important; }
}

/* round 19 - a phone: the three figures share the width (they pushed the page to 501 px at 390), 44 px touch targets,
   16 px fields (iOS does not zoom into them); nothing hidden */
html.fc-login, html.fc-login body { max-width:100%; overflow-x:hidden; }
@media (max-width:599px) {
    html.fc-login .fcl-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:28px; }
    html.fc-login .fcl-stat, html.fc-login .fcl-stat:nth-child(n) { max-width:none; min-width:0; padding-left:10px; }
    html.fc-login .fcl-stat b { font-size:24px; }
    html.fc-login .fcl-stat span { font-size:9.5px; overflow-wrap:anywhere; }
    html.fc-login .fcl-hero { padding:28px 16px 0; }
    html.fc-login .fcl-top, html.fc-login .fcl-foot { padding-left:16px; padding-right:16px; }
    html.fc-login .ms-choice { min-height:44px; }
    html.fc-login body#login input[type="text"], html.fc-login body#login input[type="password"] { font-size:16px !important; }
}

/* ROUND 29: EVERY KIND OF COMPUTER (CLAUDE.md 5c). Below 700 px of height the page used to fall back to the one-column
   layout, 1 148 px tall: on a 1366x768 laptop's window (628 px) the card began under the fold and its button was off the
   screen. */
/* a WIDE but SHORT window (an ordinary laptop: 1366x768 leaves ~630 px, 1280x720 ~580, 1024x600 ~460): two columns, everything
   on one screen - the hero and the links at the left, the card at the right, each made compact; nothing hidden */
@media (min-width:900px) and (max-height:700px) {
    html.fc-login body#login { min-height:100vh; height:100vh; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto minmax(0, 1fr) auto; column-gap:28px; row-gap:8px; padding:12px 28px; align-items:center; overflow-x:hidden; overflow-y:auto; }
    html.fc-login .fcl-hero, html.fc-login body#login .wrapper, html.fc-login .fcl-top, html.fc-login .fcl-foot { position:static; inset:auto; transform:none; }
    html.fc-login .fcl-top { grid-column:1; grid-row:1; justify-content:flex-start; padding:0; flex-wrap:wrap; gap:8px; }
    html.fc-login .fcl-hero { grid-column:1; grid-row:2; padding:0; max-width:560px; align-self:center; }
    html.fc-login .fcl-foot { grid-column:1; grid-row:3; padding:0; }
    html.fc-login body#login .wrapper { grid-column:2; grid-row:1 / span 3; padding:0; display:block; align-self:center; }
    html.fc-login body#login .wrapper .inner-wrapper.fcl-card { padding:18px 30px 16px; }
    html.fc-login .fcl-head { margin:10px 0 6px; }
    html.fc-login .fcl-h1 { font-size:clamp(26px, 6.2vh, 44px) !important; line-height:1.12 !important; margin:10px 0 8px !important; }
    html.fc-login .fcl-lead { margin:0 0 12px !important; font-size:clamp(13px, 2.5vh, 16px) !important; line-height:1.45 !important; }
    html.fc-login .fcl-stats { margin-top:0 !important; }
}
/* shorter still (a 1024x600 netbook in a window: ~460 px): the same two columns, the card and the hero drawn smaller to fit.
   `zoom` keeps the layout honest (the box really is smaller); a browser without it keeps the full size and the page scrolls. */
@media (min-width:900px) and (max-height:540px) {
    html.fc-login body#login { padding:8px 24px; row-gap:4px; }
    html.fc-login body#login .wrapper .inner-wrapper.fcl-card { zoom:.8; }
    html.fc-login .fcl-hero { zoom:.86; }
}
@media (min-width:900px) and (max-height:440px) {
    html.fc-login body#login .wrapper .inner-wrapper.fcl-card { zoom:.7; }
    html.fc-login .fcl-hero { zoom:.74; }
}

/* ===== ROUND 29: EVERY KIND OF COMPUTER (CLAUDE.md 5c) - must stay AFTER the one-column block above, which it replaces for a wide, short window ===== */
/* a WIDE but SHORT window (an ordinary laptop: 1366x768 leaves ~630 px, 1280x720 ~580, 1024x600 ~460): two columns, everything
   on one screen - the hero and the links at the left, the card at the right, each made compact; nothing hidden */
@media (min-width:900px) and (max-height:700px) {
    html.fc-login body#login { min-height:100vh; height:100vh; box-sizing:border-box; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto minmax(0, 1fr) auto; column-gap:28px; row-gap:8px; padding:12px 28px; align-items:center; overflow-x:hidden; overflow-y:auto; }
    html.fc-login .fcl-hero, html.fc-login body#login .wrapper, html.fc-login .fcl-top, html.fc-login .fcl-foot { position:static; inset:auto; transform:none; }
    html.fc-login .fcl-top { grid-column:1; grid-row:1; justify-content:flex-start; padding:0; flex-wrap:wrap; gap:8px; }
    html.fc-login .fcl-hero { grid-column:1; grid-row:2; padding:0; max-width:560px; align-self:center; }
    html.fc-login .fcl-foot { grid-column:1; grid-row:3; padding:0; }
    html.fc-login body#login .wrapper { grid-column:2; grid-row:1 / span 3; padding:0; display:block; align-self:center; }
    html.fc-login body#login .wrapper .inner-wrapper.fcl-card { padding:18px 30px 16px; }
    html.fc-login .fcl-head { margin:10px 0 6px; }
    html.fc-login .fcl-h1 { font-size:clamp(26px, 6.2vh, 44px) !important; line-height:1.12 !important; margin:10px 0 8px !important; }
    html.fc-login .fcl-lead { margin:0 0 12px !important; font-size:clamp(13px, 2.5vh, 16px) !important; line-height:1.45 !important; }
    html.fc-login .fcl-stats { margin-top:0 !important; }
}
/* shorter still (a 1024x600 netbook in a window: ~460 px): the same two columns, the card and the hero drawn smaller to fit.
   `zoom` keeps the layout honest (the box really is smaller); a browser without it keeps the full size and the page scrolls. */
@media (min-width:900px) and (max-height:540px) {
    html.fc-login body#login { padding:8px 24px; row-gap:4px; }
    html.fc-login body#login .wrapper .inner-wrapper.fcl-card { zoom:.8; }
    html.fc-login .fcl-hero { zoom:.86; }
}
@media (min-width:900px) and (max-height:440px) {
    html.fc-login body#login .wrapper .inner-wrapper.fcl-card { zoom:.7; }
    html.fc-login .fcl-hero { zoom:.74; }
}

/* ===== ROUND 32: --fc-zoom on the login page (owner, 2026-10-09) - the same factor as the tracking page's panels:
   min(1, max(0.8, window width / 1920)), written by the first lines of gs.fleetcom.login.js. The whole page is one box here
   (no map), so the factor is on <body>. Only the two-column layout (wider than 1180 px): the one-column page of tablets and
   phones is not concerned. At 1920 px and more the factor is 1. ===== */
@media (min-width:1181px) { html.fc-login body#login { zoom:var(--fc-zoom, 1); } }