/* GlanceDesk Crypto Bot: the look of the sign-in page. Written by deploy/auth/auth_setup.sh --brand-login from brand_assets.py
   (undo: --unbrand-login). Only Authelia's stable ids, element names, attributes and theme variables are used. */
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/glancedesk-login/fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/glancedesk-login/fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/glancedesk-login/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
/* the theme variables of every Authelia theme, on <html> and on <body> (Authelia puts data-theme on both; html[data-theme] and
   body[data-theme] are more specific than Authelia's own [data-theme=...]) */
html[data-theme], body[data-theme] { --background:#101014; --foreground:#EDEEF0; --card:#17181E; --card-foreground:#EDEEF0;
  --popover:#17181E; --popover-foreground:#EDEEF0; --primary:#FFB11A; --primary-foreground:#101014;
  --secondary:#A7A9B0; --secondary-foreground:#101014;
  --muted:#24252B; --muted-foreground:#A7A9B0; --accent:#24252B; --accent-foreground:#EDEEF0;
  --border:#2E2F34; --input:#5d606a; --ring:#FFB11A; --divider:#2E2F34;
  --custom-icon:#EDEEF0; --custom-loading-bar:#FFB11A;
  --font-sans:"IBM Plex Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme:dark; }
html[data-theme], html[data-theme] body { background:#101014; color:#EDEEF0; }
/* the card */
#first-factor-stage > div { box-sizing:border-box; width:calc(100% - 32px); max-width:440px; margin:24px auto; padding:32px 28px 20px;
  background:#17181E; border:1px solid #2E2F34; border-radius:12px; }
#first-factor-stage img[src$="/logo.png"] { width:64px; height:64px; border-radius:24%; }
/* the lockup in place of the "Sign in" heading: [G] GlanceDesk(tm) | Crypto Bot, then the subtitle */
#first-factor-stage div:has(> h5) { --s:26px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:6px; }
#first-factor-stage div:has(> h5)::before { content:"\2122"; content:"\2122" / "GlanceDesk Crypto Bot"; box-sizing:border-box; flex:none;
  height:var(--s); padding:calc(var(--s) * 0.08) 0 0 calc(var(--s) * 5.9678); font-size:calc(var(--s) * 0.3); line-height:1;
  color:#A7A9B0; align-self:center;
  background:url("/glancedesk-login/favicon.svg") left center / var(--s) var(--s) no-repeat,
    url("/glancedesk-login/wordmark-white.png") calc(var(--s) * 1.32) center / auto calc(var(--s) * 0.61) no-repeat; }
#first-factor-stage h5 { display:flex; align-items:center; margin:0; font-size:0; line-height:0; }
#first-factor-stage h5::before { content:""; flex:none; width:1px; height:calc(var(--s) * 0.72); margin:0 calc(var(--s) * 0.38); background:#3a3b43; }
#first-factor-stage h5::after { content:"Crypto Bot"; content:"Crypto Bot" / ""; flex:none; white-space:nowrap;
  font:600 calc(var(--s) * 0.62)/1 "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#FFB11A; }
#first-factor-stage div:has(> h5)::after { content:"Sign in to continue"; flex:0 0 100%; margin-top:14px; font-size:15px; line-height:1.4; color:#A7A9B0; }
@media (max-width: 400px) { #first-factor-stage > div { padding:28px 20px 18px; } #first-factor-stage div:has(> h5) { --s:23px; } }
/* the buttons: Sign in in amber with dark text (from the variables), at least 44 px high; the passkey button stays, as an outline */
#sign-in-button, #passkey-sign-in-button { min-height:48px; border-radius:8px; text-transform:none; letter-spacing:0; }
#sign-in-button { font-size:16px; font-weight:600; }
#passkey-sign-in-button { font-size:15px; font-weight:500; background:transparent; color:#EDEEF0; border:1px solid #5d606a; }
#passkey-sign-in-button:hover { background:#24252B; }
#username-textfield, #password-textfield { border-radius:8px; color:#EDEEF0; }
#language-button { color:#A7A9B0; }
/* the second step (one-time code): the six boxes get the same border as the fields of the first step */
#otp-input input[inputmode="numeric"] { border-color:#5d606a; }
#first-factor-stage a[href*="authelia.com"] { color:#8D9099; }