/*
#divLogin
{
	width:400px; 
    height:300px; 
	background-color:orange;
	margin:auto;
	border-radius: 15px;
	padding:30px;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}
*/
/*
#divCommunity
{
	width:400px; 
    height:270px; 
	margin:auto;
	border-radius: 15px;
	padding:30px;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}
*/

.divInline
{
	display:inline-block;
}

.divInlineL
{
	display:inline-block;
	color:blue;
	width:220px;
}

.divInlineR
{
	display:inline-block;
	color:blue;
	
}

.formFullWidth
{
	width:100%;
}

#divfUsername, #divfPassword
{
	color:green;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

/* =====================================================================
   PHASE 9 / Track A - dark-glass login reskin.
   EVERY rule scoped to .ssss-login-glass (only emitted when LOGIN_GLASS=1).
   No other page loads login.css, so these cannot affect ops screens.
   ===================================================================== */
.ssss-login-glass{
  --lg-bg-0:#0b1220;                 /* page base, behind hero (solid fallback) */
  /* Subtle navy depth-gradient: lighter glow up top fading to the deep base, so a
     login with no Vanta hero (3D skipped, or LOGIN_VANTA=0) still reads as an
     intentional dark theme rather than a flat "all black" page. */
  --lg-bg-grad:radial-gradient(135% 105% at 50% 0%, #1b2c49 0%, #101d33 42%, #0b1220 100%);
  --lg-glass-bg:rgba(17,25,40,.72);  /* card fill - translucent when blur available */
  --lg-glass-bg-solid:#111928;       /* opaque backplate when blur/transparency unavailable */
  --lg-glass-brd:rgba(255,255,255,.14);
  --lg-text:#f2f5fa;                 /* ~13:1 on the composited card */
  --lg-text-dim:#c4cdda;             /* ~7:1, still >=4.5 - non-essential helper text only */
  --lg-input-bg:rgba(255,255,255,.06);
  --lg-input-brd:rgba(255,255,255,.22);
  --lg-focus:#ffa328;                /* = --ssss-orange */
  min-height:100vh;
  background:var(--lg-bg-0);          /* solid base (universal fallback) */
  background:var(--lg-bg-grad);       /* progressive enhancement: depth, never flat black */
  color:var(--lg-text);
}

/* Hero (3D canvas mount) - behind the card, never over video/tables/maps */
.ssss-login-glass #hero{
  position:fixed; inset:0; z-index:-1;
  background:var(--lg-bg-0);         /* solid fallback if WebGL/3D lib never initializes */
  background:var(--lg-bg-grad);      /* same depth-gradient shown when the 3D hero is skipped */
}

/* Glass card - backdrop-filter ONLY on this small chrome element, @supports-gated */
.ssss-login-glass .ssss-glass{
  background:var(--lg-glass-bg-solid);          /* default: OPAQUE (safe everywhere) */
  border-color:var(--lg-glass-brd) !important;  /* override BS .border */
  box-shadow:0 8px 40px rgba(0,0,0,.45);
  color:var(--lg-text);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ssss-login-glass .ssss-glass{
    background:var(--lg-glass-bg);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
            backdrop-filter:blur(16px) saturate(140%);
  }
}

/* Banner / labels / helper text -> light-on-dark */
.ssss-login-glass #divBanner,
.ssss-login-glass label,
.ssss-login-glass .ssss-glass{ color:var(--lg-text); }
.ssss-login-glass small,
.ssss-login-glass #divfUsername,
.ssss-login-glass #divfPassword{ color:var(--lg-text-dim); }  /* overrides legacy color:green when flag on */

/* Inputs (keep IDs; style by id/element) */
.ssss-login-glass #username,
.ssss-login-glass #password,
.ssss-login-glass #selCommunity,
.ssss-login-glass #txtForgotEmail,
.ssss-login-glass .form-control,
.ssss-login-glass .form-select{
  background:var(--lg-input-bg);
  border:1px solid var(--lg-input-brd);
  color:var(--lg-text);
  min-height:44px;                    /* WCAG 2.5.5 tap target */
}
.ssss-login-glass .form-control::placeholder{ color:var(--lg-text-dim); opacity:1; }

/* Brand-orange primary button (replaces Bootstrap blue), scoped */
.ssss-login-glass #btnLogin,
.ssss-login-glass #btnGo,
.ssss-login-glass .btn-primary{
  background-color:var(--ssss-orange);
  border-color:var(--ssss-orange);
  color:#1a1205;                      /* dark text on orange ~8.9:1, >=4.5 */
  min-height:44px; font-weight:600;
}
.ssss-login-glass #btnLogin:hover,
.ssss-login-glass #btnGo:hover,
.ssss-login-glass .btn-primary:hover{ filter:brightness(1.06); }

/* #btnMainCommunity keeps .btn-danger; #btnForgot stays a link but readable on dark */
.ssss-login-glass #btnForgot.btn-link{ color:var(--lg-focus); }

/* Forgot modal goes dark too (IDs untouched) */
.ssss-login-glass .modal-content{
  background:var(--lg-glass-bg-solid);  /* modal stays OPAQUE - no blur over a modal */
  color:var(--lg-text);
  border:1px solid var(--lg-glass-brd);
}
.ssss-login-glass .modal-content .btn-close{ filter:invert(1) grayscale(1); }

/* Visible focus ring (keyboard) - orange, never removed */
.ssss-login-glass :focus-visible{
  outline:3px solid var(--lg-focus);
  outline-offset:2px;
}

/* prefers-reduced-transparency -> force solid card, NO blur, NO hero */
@media (prefers-reduced-transparency: reduce){
  .ssss-login-glass .ssss-glass,
  .ssss-login-glass .modal-content{
    background:var(--lg-glass-bg-solid);
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
  }
  .ssss-login-glass #hero{ display:none; }
}

/* prefers-reduced-motion -> freeze/disable 3D animation (JS also skips init) */
@media (prefers-reduced-motion: reduce){
  .ssss-login-glass #hero{ display:none; }
}

/* =====================================================================
   Glass login polish (2026-08-19) — all rules stay scoped to
   .ssss-login-glass, so the legacy (flag-off) login is untouched.
   ===================================================================== */

/* Hero vignette: masks the wave-plane far edge that peeks in as a light
   strip at the top on wide viewports, and adds depth at the bottom. */
.ssss-login-glass #hero::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,18,32,.96) 0%, rgba(11,18,32,0) 16%),
    linear-gradient(0deg,   rgba(11,18,32,.85) 0%, rgba(11,18,32,0) 22%);
}

/* Card geometry: fixed comfortable width, softer corners, layered shadow,
   faint top highlight so the glass reads as lit from above. */
.ssss-login-glass .ssss-glass{
  width:min(92vw, 430px);
  border-radius:18px !important;
  border-top-color:rgba(255,255,255,.28) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.55),
    0 2px 8px rgba(0,0,0,.35);
}

/* In-card brand block */
.ssss-login-glass .lg-cardbrand{ margin-bottom:1.6rem; }
.ssss-login-glass .lg-cardbrand-badge{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:linear-gradient(160deg, #ffb845 0%, #ff9d1f 100%);
  color:#1a1205; font-weight:800; font-size:19px; letter-spacing:.5px;
  box-shadow:0 6px 18px rgba(255,157,31,.35);
  margin-bottom:.9rem;
}
.ssss-login-glass .lg-cardbrand-title{
  font-size:20px; font-weight:700; line-height:1.3; color:var(--lg-text);
}
.ssss-login-glass .lg-cardbrand-sub{
  margin-top:.35rem;
  font-size:12.5px; line-height:1.55; color:var(--lg-text-dim);
}
.ssss-login-glass .lg-cardbrand-rule{
  width:46px; height:3px; border-radius:2px;
  background:var(--lg-focus);
  margin-top:1rem;
  opacity:.9;
}

/* Labels: quieter than the inputs so the field content leads */
.ssss-login-glass #divLogin label,
.ssss-login-glass #divCommunity label{
  font-size:13px; font-weight:600; letter-spacing:.2px;
  color:var(--lg-text-dim);
}

/* Inputs: calm at rest, orange glow on focus */
.ssss-login-glass .form-control,
.ssss-login-glass .form-select{
  border-radius:10px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ssss-login-glass .form-control:focus,
.ssss-login-glass .form-select:focus{
  background:rgba(255,255,255,.09);
  border-color:var(--lg-focus);
  box-shadow:0 0 0 3px rgba(255,163,40,.18);
  outline:none;
}

/* Primary button: gradient + lift on hover */
.ssss-login-glass #btnLogin,
.ssss-login-glass #btnGo{
  border-radius:10px;
  background:linear-gradient(180deg, #ffb845 0%, #ff9d1f 100%);
  border:none;
  box-shadow:0 6px 20px rgba(255,157,31,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ssss-login-glass #btnLogin:hover,
.ssss-login-glass #btnGo:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(255,157,31,.4);
  filter:brightness(1.04);
}
.ssss-login-glass #btnLogin:active,
.ssss-login-glass #btnGo:active{ transform:translateY(0); }

/* Card entrance (skipped under reduced motion; Bootstrap's translate-middle
   transform is the animation's resting state so the final layout is identical) */
@media (prefers-reduced-motion: no-preference){
  .ssss-login-glass .ssss-glass{
    animation:lgCardIn .55s cubic-bezier(.16,1,.3,1);
  }
  @keyframes lgCardIn{
    from{ opacity:0; transform:translate(-50%,-46%); }
    to  { opacity:1; transform:translate(-50%,-50%); }
  }
}

/* Quiet footer, fixed to the bottom of the viewport */
.ssss-login-glass .lg-foot{
  position:fixed; left:0; right:0; bottom:14px;
  text-align:center;
  font-size:12px; letter-spacing:.4px;
  color:var(--lg-text-dim); opacity:.55;
  pointer-events:none;
}

/* Login-page recolour of the global a11y focus ring (ssss.css uses
   !important deliberately): same 3px ring + white halo geometry, brand
   orange instead of info-blue so the autofocused email field doesn't
   clash with the glass card. Keyboard visibility is unchanged. */
.ssss-login-glass a:focus-visible,
.ssss-login-glass button:focus-visible,
.ssss-login-glass input:focus-visible,
.ssss-login-glass select:focus-visible,
.ssss-login-glass textarea:focus-visible{
  outline:3px solid var(--lg-focus) !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.85) !important;
}

/* Community <select>: the NATIVE dropdown popup rendered its own light
   background while the option text inherited our light-on-dark colour →
   white-on-white list (reported on darwin4s). color-scheme:dark makes
   Chromium/Firefox paint the popup dark; the explicit option colours are
   the cross-browser backstop. Scoped to the glass login only. */
.ssss-login-glass{ color-scheme:dark; }
.ssss-login-glass select option{
  background-color:#111928;   /* --lg-glass-bg-solid */
  color:#f2f5fa;              /* --lg-text */
}