/* One Call Solution - login page, new layout (OCS-LOGIN3). Everything here only applies once js/ocs-login.js has set
   html.ocs-lg, so without the script the page keeps its previous look (css/ocs-login.css). */
@font-face{font-family:'OCS Inter';font-weight:400;font-display:swap;src:url('fonts/ocs-inter-Regular.woff') format('woff')}
@font-face{font-family:'OCS Inter';font-weight:500;font-display:swap;src:url('fonts/ocs-inter-Medium.woff') format('woff')}
@font-face{font-family:'OCS Inter';font-weight:600;font-display:swap;src:url('fonts/ocs-inter-SemiBold.woff') format('woff')}
@font-face{font-family:'OCS Inter';font-weight:700;font-display:swap;src:url('fonts/ocs-inter-Bold.woff') format('woff')}
html.ocs-lg { --lg-navy:#0b2545; --lg-navy2:#0a1d38; --lg-blue:#00a8e8; --lg-ink:#0f1b2d; --lg-ink2:#334155; --lg-muted:#64748b; --lg-line:#dbe2ea; --lg-bg:#f1f4f8; }
html.ocs-lg body.login-page { display:grid !important; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); grid-template-rows:minmax(100vh,auto); min-height:100vh; margin:0; overflow:auto !important;
  background:var(--lg-bg) !important; font-family:'OCS Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important; color:var(--lg-ink); -webkit-font-smoothing:antialiased; }
html.ocs-lg body.login-page *, html.ocs-lg body.login-page *:before, html.ocs-lg body.login-page *:after { box-sizing:border-box; }
/* brand panel */
html.ocs-lg .ocs-lg-brand { grid-column:1; grid-row:1; position:relative; overflow:hidden; color:#fff; padding:44px 56px; display:flex; flex-direction:column; min-height:100vh;
  background:radial-gradient(90% 70% at 0% 0%,#14406f 0%,transparent 60%),radial-gradient(80% 60% at 100% 100%,#00a8e833 0%,transparent 60%),linear-gradient(160deg,var(--lg-navy),var(--lg-navy2)); }
html.ocs-lg .ocs-lg-logo { height:48px; width:auto; filter:brightness(0) invert(1); align-self:flex-start; }
html.ocs-lg .ocs-lg-waves { position:absolute; right:-260px; top:50%; transform:translateY(-50%); width:640px; height:640px; opacity:.16; pointer-events:none; }
html.ocs-lg .ocs-lg-mid { margin:auto 0; max-width:470px; position:relative; }
html.ocs-lg .ocs-lg-mid h1 { font-size:40px; line-height:1.15; font-weight:650; letter-spacing:-.8px; margin:0 0 14px; color:#fff; font-family:inherit; }
html.ocs-lg .ocs-lg-mid h1 em { font-style:normal; color:var(--lg-blue); }
html.ocs-lg .ocs-lg-lead { font-size:16.5px; line-height:1.55; color:#c9d5e6; margin:0 0 30px; }
html.ocs-lg .ocs-lg-feat { display:grid; gap:14px; }
html.ocs-lg .ocs-lg-feat > div { display:flex; align-items:center; gap:14px; font-size:13px; color:#9fb3cd; }
html.ocs-lg .ocs-lg-feat i { width:38px; height:38px; border-radius:11px; background:#ffffff14; border:1px solid #ffffff1f; display:grid; place-items:center; flex:none; }
html.ocs-lg .ocs-lg-feat svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html.ocs-lg .ocs-lg-feat b { display:block; font-weight:600; color:#fff; font-size:14.5px; }
html.ocs-lg .ocs-lg-foot { font-size:12.5px; color:#9fb3cd; position:relative; }
html.ocs-lg .ocs-lg-foot a { color:#fff !important; font-weight:600; text-decoration:none; }
/* form side */
html.ocs-lg body.login-page .login-box { grid-column:2; grid-row:1; align-self:center; justify-self:center; width:100%; max-width:400px; margin:40px 24px !important; padding:0; }
html.ocs-lg body.login-page .login-box > .margin, html.ocs-lg body.login-page .login-logo, html.ocs-lg body.login-page > footer { display:none !important; }
html.ocs-lg body.login-page .login-box center { text-align:left; display:block; }
html.ocs-lg body.login-page .login-box-body { background:transparent; box-shadow:none; padding:0; border-radius:0; text-align:left; }
html.ocs-lg .ocs-lg-h { font-size:28px; font-weight:650; letter-spacing:-.4px; color:var(--lg-navy); margin:0 0 6px; font-family:inherit; }
html.ocs-lg body.login-page .login-box-msg { color:var(--lg-muted); font-size:15px; font-weight:400; text-align:left; margin:0 0 28px; padding:0; }
html.ocs-lg body.login-page .login-box-msg.ocs-lg-h-only { font-size:24px; font-weight:650; color:var(--lg-navy); }
html.ocs-lg .ocs-lg-label { display:block; font-size:13.5px; font-weight:500; color:var(--lg-ink2); margin:0 0 6px; text-align:left; }
html.ocs-lg body.login-page .form-group.ocs-lg-field { position:relative; margin:0 0 16px; }
html.ocs-lg body.login-page .ocs-lg-field .form-control-feedback { display:none !important; }
html.ocs-lg body.login-page .ocs-lg-field .form-control { width:100%; height:46px; border:1px solid var(--lg-line); border-radius:10px; background:#fff; padding:0 44px 0 42px; font:inherit; font-size:15px; color:var(--lg-ink); box-shadow:none; transition:border-color .15s,box-shadow .15s; }
html.ocs-lg body.login-page .ocs-lg-field .form-control:focus { border-color:var(--lg-blue); box-shadow:0 0 0 3px #00a8e826; background:#fff; outline:none; }
html.ocs-lg body.login-page .ocs-lg-field .form-control::placeholder { color:#94a3b8; }
html.ocs-lg .ocs-lg-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:#94a3b8; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; z-index:2; }
html.ocs-lg .ocs-lg-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; cursor:pointer; color:#64748b; z-index:2; padding:0; }
html.ocs-lg .ocs-lg-eye:hover { background:var(--lg-bg); }
html.ocs-lg .ocs-lg-eye:focus-visible { outline:2px solid var(--lg-blue); outline-offset:1px; }
html.ocs-lg .ocs-lg-eye svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html.ocs-lg body.login-page .ocs-lg-err { display:flex !important; gap:10px; align-items:flex-start; background:#fef2f2; border:1px solid #fecaca; color:#991b1b !important; border-radius:10px; padding:10px 12px; font-size:13.5px; margin:0 0 16px; }
html.ocs-lg body.login-page .ocs-lg-err p { margin:0 !important; padding:0 !important; background:none !important; border:0 !important; color:inherit !important; font-weight:500 !important; }
html.ocs-lg .ocs-lg-err svg { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; margin-top:1px; }
html.ocs-lg body.login-page .login-box-body .row { margin:0; }
html.ocs-lg body.login-page .login-box-body .row > .col-xs-3 { display:none; }
html.ocs-lg body.login-page .login-box-body .row > .col-xs-6 { width:100%; padding:0; float:none; }
html.ocs-lg body.login-page #btn1 { width:100%; height:48px; border:0; border-radius:10px !important; background:var(--lg-navy) !important; color:#fff; font:inherit; font-size:15.5px; font-weight:600; letter-spacing:0;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 8px 20px #0b25452e; filter:none; transition:background .15s; }
html.ocs-lg body.login-page #btn1:hover { background:#12345f !important; }
html.ocs-lg body.login-page #btn1:focus-visible { outline:2px solid var(--lg-blue); outline-offset:2px; }
html.ocs-lg body.login-page #btn1 svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html.ocs-lg .ocs-lg-secure { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--lg-muted); font-size:12.5px; margin-top:18px; }
html.ocs-lg .ocs-lg-secure svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }
html.ocs-lg .ocs-lg-mfoot { display:none; }
/* phones and small tablets: navy background all over (like the brand panel), the sign-in card on it */
@media (max-width:860px) {
  html.ocs-lg body.login-page { grid-template-columns:1fr; grid-template-rows:auto;
    background:radial-gradient(120% 50% at 0% 0%,#14406f 0%,transparent 60%),radial-gradient(120% 50% at 100% 100%,#00a8e833 0%,transparent 60%),linear-gradient(160deg,var(--lg-navy),var(--lg-navy2)) !important; background-attachment:fixed !important; }
  html.ocs-lg .ocs-lg-brand { display:none; }
  html.ocs-lg body.login-page .login-box { grid-column:1; align-self:start; margin:34px auto 24px !important; max-width:calc(100% - 36px); }
  html.ocs-lg body.login-page .login-box > .margin { display:block !important; background:none; box-shadow:none; padding:0; margin:0 auto 26px !important; text-align:center; width:auto; }
  html.ocs-lg body.login-page .login-box > .margin img { height:40px; width:auto; filter:brightness(0) invert(1); display:inline-block; }
  html.ocs-lg body.login-page .login-box-body { background:#fff; border-radius:18px; padding:26px 22px; box-shadow:0 14px 40px #0b25452e; }
  html.ocs-lg .ocs-lg-h { font-size:24px; }
  html.ocs-lg .ocs-lg-mfoot { display:block; color:#9fb3cd; font-size:12px; margin-top:22px; text-align:center; }
  html.ocs-lg .ocs-lg-mfoot a { color:#fff !important; font-weight:600; text-decoration:none; }
  html.ocs-lg body.login-page .login-box-body { box-shadow:0 18px 50px #00000040; }
}
@media (max-height:640px) and (min-width:861px) { html.ocs-lg .ocs-lg-mid h1 { font-size:32px; } html.ocs-lg .ocs-lg-lead { margin-bottom:18px; } }