:root { color-scheme:light;--login-ink:#18364d;--login-muted:#748599;--login-teal:#098c8a; }
* { box-sizing:border-box; }
html { height:100%;overflow:hidden; }
body.login-page { margin:0;height:100%;overflow:hidden;font-family:"Segoe UI",Arial,sans-serif;background:#eef3f7;color:var(--login-ink); }
button,input { font:inherit; } button,a,input { -webkit-tap-highlight-color:transparent; }
.login-shell { display:grid;grid-template-columns:1.06fr 1fr;height:100vh;height:100dvh;min-height:0;margin:auto; }
.login-brand-panel { position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:48px clamp(32px,5vw,85px);background:#102d47;color:white; }
.login-brand-panel:before { content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(155deg,rgba(9,29,48,.93) 8%,rgba(14,57,79,.85) 55%,rgba(5,113,115,.75)),url('../images/Road_Transport.jpg') center/cover; }
.login-brand-panel:after { content:"";position:absolute;z-index:-1;width:650px;height:650px;border:1px solid #ffffff12;border-radius:50%;right:-380px;top:19%;box-shadow:0 0 0 80px #ffffff04,0 0 0 160px #ffffff03;pointer-events:none; }
.login-brand { display:flex;align-items:center;gap:18px; }
.login-logo-tile { display:flex;align-items:center;justify-content:center;width:134px;min-height:76px;padding:0;background:transparent;flex-shrink:0; }
.login-company-logo { display:block;max-width:100%;max-height:66px;object-fit:contain; }
.login-logo-fallback { font-size:35px;font-weight:750;color:var(--login-teal); }
[hidden] { display:none!important; }
.login-company-name { font-size:17px;font-weight:600;line-height:1.45;max-width:270px;color:#e1eff7; }
.login-brand-copy { position:relative;margin:80px 0 38px;max-width:530px; }
.login-eyebrow { display:flex;align-items:center;gap:9px;color:#9cdbdb;font-weight:700;font-size:10px;letter-spacing:.16em; }
.login-eyebrow span { width:6px;height:6px;border-radius:50%;background:#65d9c5;box-shadow:0 0 0 4px #65d9c518; }
.login-brand-copy h1 { font-size:clamp(38px,4.3vw,65px);font-weight:650;line-height:1.1;letter-spacing:-.055em;margin:23px 0; }
.login-brand-copy em { font-style:normal;color:#6fe3d2; }
.login-brand-copy p { max-width:385px;line-height:1.85;font-size:15px;color:#b8d0de;margin:0; }
.login-route { position:relative;padding:22px 24px;margin:0 0 70px;border:1px solid #ffffff21;background:#ffffff08;border-radius:14px;max-width:475px; }
.login-route-line { display:flex;align-items:center;gap:12px; }.login-route-dot { width:9px;height:9px;border-radius:50%;background:#80e7d8;box-shadow:0 0 0 5px #80e7d815; }.login-route-dot.destination { background:white; }
.login-route-path { flex:1;border-top:1px dashed #95c4d088; }.login-route-marker { display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:#7ce2d418;border:1px solid #7ce2d433;border-radius:12px; }.login-route-marker svg { width:25px;height:25px;color:#a3f3e5; }
.login-route-labels { display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#a3c2d3;margin-top:13px; }.login-route-labels strong { color:#ddf5f0;font-weight:600; }
.login-brand-footer { display:flex;gap:12px;align-items:center;color:#b3ccd9;font-size:11px; }.login-brand-rule { width:27px;height:1px;background:#6db1b7; }
.login-form-panel { display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:linear-gradient(145deg,#fff,#f9fbfd);padding:50px 44px 75px; }
.login-form-content { width:100%;max-width:390px; }

.login-form-eyebrow { color:#8c9bac;font-size:10px;font-weight:700;letter-spacing:.14em; }
.login-form-content h2 { margin:11px 0 12px;letter-spacing:-.045em;font-size:38px;font-weight:650;line-height:1.2; }
.login-intro { margin:0 0 32px;font-size:14px;line-height:1.7;color:var(--login-muted); }.login-intro strong { color:#456175;font-weight:600; }
.login-field { margin-bottom:23px; }.login-field label { display:block;font-size:12px;font-weight:600;color:#365369;margin-bottom:9px; }
.login-input { display:block;width:100%;height:53px;border:1px solid #dce5ed;border-radius:9px;background:#fff;padding:0 15px;color:var(--login-ink);font-size:14px;transition:border-color .15s,box-shadow .15s;outline:none; }.login-input::placeholder { color:#9ba9b7; }.login-input:focus { border-color:#1b9e99;box-shadow:0 0 0 4px #1b9e9910; }
.login-password-wrap { position:relative; }.login-password-wrap .login-input { padding-right:72px; }.login-password-toggle { position:absolute;right:10px;top:10px;height:33px;padding:0 9px;border:0;background:transparent;color:#577287;font-size:11px;font-weight:700;border-radius:5px;cursor:pointer; }.login-password-toggle:hover { background:#eef7f7;color:#078881; }
.login-submit { display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:53px;padding:14px 20px;border:0;border-radius:9px;background:linear-gradient(105deg,#127697,#078f88);box-shadow:0 7px 17px #098b8926;color:#fff;font-size:14px;font-weight:650;cursor:pointer;transition:box-shadow .15s,transform .15s; }.login-submit:hover { box-shadow:0 10px 22px #098b8940;transform:translateY(-1px); }.login-submit svg { width:19px;height:19px; }.login-submit:disabled { cursor:wait;opacity:.8;transform:none; }
.login-submit-spinner { display:none;width:16px;height:16px;border:2px solid #ffffff50;border-top-color:#fff;border-radius:50%;animation:login-spin .8s linear infinite; }.is-submitting .login-submit-spinner { display:inline-block; }.is-submitting svg { display:none; }
.login-help { text-align:center;color:#8b9baa;font-size:11px;line-height:1.7;margin:20px 0 0; }.login-powered { display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:#9aa8b5;margin-top:39px; }.login-powered a { color:#3c727f;font-weight:650;text-decoration:none; }.login-powered a:hover { text-decoration:underline; }
.login-form-footer { position:absolute;bottom:26px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.02em;color:#9aa8b5; }.login-footer-dot { width:5px;height:5px;border-radius:50%;background:#8ebbbb; }
.login-validation.field-validation-error { display:block;color:#b44848;font-size:11px;margin-top:7px;line-height:1.5; }.login-validation.field-validation-valid { display:none; }.login-input.input-validation-error { border-color:#d77b7b; }.login-server-error { padding:12px 14px;color:#a64141;background:#fff1f1;border:1px solid #f1d2d2;border-radius:8px;font-size:12px;line-height:1.6;margin-bottom:22px; }.login-caps-lock { color:#aa781c;font-size:11px;margin:7px 0 0; }
button:focus-visible,a:focus-visible { outline:3px solid #1a9b99;outline-offset:3px; }
@keyframes login-spin { to { transform:rotate(360deg); } }
@media(max-width:1050px) { .login-brand-panel { padding:40px 32px; }.login-company-name { font-size:15px; }.login-logo-tile { width:112px; }.login-brand-copy { margin-top:60px; }.login-form-panel { padding:40px 32px 70px; }.login-route { padding:18px; }.login-route-labels { font-size:9px; } }
@media(max-width:767px) { .login-shell { grid-template-columns:1fr; }.login-brand-panel { padding:25px 25px 28px; }.login-logo-tile { width:96px;min-height:58px; }.login-company-logo { max-height:42px; }.login-company-name { max-width:none;font-size:15px; }.login-brand-copy { margin:26px 0 0; }.login-brand-copy h1 { font-size:32px;margin:13px 0 10px; }.login-brand-copy h1 br { display:none; }.login-brand-copy em { margin-left:6px; }.login-brand-copy p { font-size:12px;line-height:1.7; }.login-eyebrow { font-size:8px; }.login-route,.login-brand-footer { display:none; }.login-form-panel { padding:34px 25px 65px; }.login-form-content { max-width:430px; }.login-form-content h2 { font-size:29px;margin-top:8px; }.login-intro { margin-bottom:24px;font-size:12px; }.login-field { margin-bottom:19px; }.login-powered { margin-top:25px; }.login-form-footer { bottom:19px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important;transition:none!important; }.login-submit:hover { transform:none; } }

/* Fit the available height instead of letting decorative spacing grow the page. */
.login-brand-panel,.login-form-panel { min-width:0;min-height:0; }
.login-brand-panel { padding-top:clamp(20px,5vh,48px);padding-bottom:clamp(20px,5vh,48px);gap:20px; }
.login-brand-copy { margin:clamp(10px,5vh,45px) 0 0; }
.login-route { margin:0 0 clamp(0px,3vh,30px); }
@media(max-height:760px) {
    .login-brand-copy h1 { font-size:clamp(32px,6vh,49px);margin:16px 0; }
    .login-route { padding:15px 20px; }
    .login-form-panel { padding-top:24px;padding-bottom:42px; }
    
    .login-form-content h2 { font-size:32px;margin:8px 0; }
    .login-intro { margin-bottom:20px; }
    .login-field { margin-bottom:17px; }
    .login-help { margin-top:14px; }
    .login-powered { margin-top:20px; }
    .login-form-footer { bottom:15px; }
}
@media(max-width:767px) {
    .login-shell { grid-template-rows:max-content minmax(0,1fr); }
    .login-brand-panel { padding:18px 25px;gap:0; }
    .login-brand-copy { margin:16px 0 0; }
    .login-brand-copy h1 { font-size:28px;margin:10px 0 0; }
    .login-brand-copy p { display:none; }
    .login-form-panel { padding:22px 25px 42px; }
    .login-intro { margin-bottom:18px; }
    .login-field { margin-bottom:16px; }
    .login-powered { margin-top:18px; }
    .login-form-footer { bottom:14px; }
}
@media(max-height:600px) {
    .login-brand-copy { margin:0; }
    .login-route,.login-brand-footer,.login-form-eyebrow,.login-help,.login-form-footer { display:none; }
    .login-form-panel { padding-top:12px;padding-bottom:12px; }
    .login-form-content h2 { font-size:27px;margin:0 0 7px; }
    .login-intro { margin-bottom:12px;font-size:12px;line-height:1.5; }
    .login-field { margin-bottom:12px; }
    .login-field label { margin-bottom:5px; }
    .login-input { height:44px; }
    .login-password-toggle { top:6px; }
    .login-submit { min-height:44px;padding:10px 20px; }
    .login-powered { margin-top:12px; }
    .login-server-error { padding:8px 12px;margin-bottom:12px; }
    .login-validation.field-validation-error { margin-top:3px; }
}
@media(max-width:767px) and (max-height:700px) {
    .login-brand-panel { padding:12px 25px; }
    .login-brand-copy { display:none; }
}
.login-company-name { margin:0;max-width:none;font-size:clamp(28px,2.6vw,44px);font-weight:750;line-height:1.2;letter-spacing:-.025em;color:#fff;overflow-wrap:anywhere; }
.login-form-heading { display:flex;align-items:center;gap:20px;margin-bottom:12px; }
.login-form-logo { width:160px;min-height:150px;border:0;box-shadow:none; }
.login-form-logo .login-company-logo { width:100%;max-height:160px; }
@media(max-height:760px), (max-width:767px) {
    .login-form-heading { flex-direction:row;align-items:center;gap:16px;margin-bottom:12px; }
    .login-form-logo { width:150px;min-height:140px; }
    .login-form-logo .login-company-logo { max-height:140px; }
    .login-welcome-copy { min-width:0; }
    .login-welcome-copy h2 { font-size:clamp(24px,3vw,32px);margin:7px 0 0; }
}
@media(max-width:767px) {
    .login-company-name { font-size:clamp(22px,5.8vw,28px); }
    .login-form-logo { width:134px;min-height:120px; }
    .login-form-logo .login-company-logo { max-height:134px; }
}
@media(max-height:600px) {
    .login-form-heading { gap:12px;margin-bottom:8px; }
    .login-form-logo { width:110px;min-height:90px; }
    .login-form-logo .login-company-logo { max-height:100px; }
    .login-welcome-copy h2 { font-size:24px;margin:0; }
}