/* Extracted from login.html: block-1 */
:root {
  --login-bg:#0e1726;
  --login-card:#182335;
  --login-card-2:#202d40;
  --login-line:#314157;
  --login-text:#f7f9fc;
  --login-muted:#9cabc0;
  --login-yellow:#ffe36e;
  --login-green:#67d99a;
  --login-shadow:0 22px 62px rgba(0,0,0,.28);
}

body {
  min-height:100vh;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(92,40,92,.20),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(212,93,85,.10),
      transparent 28%
    ),
    var(--login-bg);
  color:var(--login-text);
}

body .wrap {
  width:min(1180px,calc(100% - 40px));
  max-width:none;
  box-sizing:border-box;
  margin:0 auto;
  padding:20px 0 45px;
}

/* Keep the complete Login banner title visible. */

body .queup-banner__title h1 {
  font-size:clamp(18px,2vw,30px);
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
}
/* Login layout */

.login-shell {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  min-height:570px;
  margin-top:18px;
  overflow:hidden;
  border:1px solid var(--login-line);
  border-radius:22px;
  background:var(--login-card);
  box-shadow:var(--login-shadow);
}

.login-intro {
  position:relative;
  display:flex;
  justify-content:center;
  flex-direction:column;
  overflow:hidden;
  padding:clamp(32px,6vw,72px);
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(255,227,110,.08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #111c2d,
      #1a2639
    );
}

.login-intro::before,
.login-intro::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.025);
}

.login-intro::before {
  top:-110px;
  right:-100px;
  width:280px;
  height:280px;
}

.login-intro::after {
  bottom:-90px;
  left:-80px;
  width:220px;
  height:220px;
}

.login-intro-content {
  position:relative;
  z-index:1;
}

.login-kicker {
  color:var(--login-yellow);
  font-size:9px;
  font-weight:950;
  letter-spacing:.17em;
}

.login-intro h1 {
  max-width:650px;
  margin:12px 0 12px;
  color:var(--login-text);
  font-size:clamp(36px,5.2vw,63px);
  line-height:.96;
  letter-spacing:-.055em;
}

.login-intro > .login-intro-content > p {
  max-width:560px;
  margin:0;
  color:var(--login-muted);
  font-size:12px;
  line-height:1.7;
}

.login-access-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  max-width:560px;
  margin-top:28px;
}

.login-access {
  padding:13px;
  border:1px solid var(--login-line);
  border-radius:13px;
  background:rgba(255,255,255,.035);
}

.login-access span {
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:8px;
  background:rgba(255,227,110,.10);
  color:var(--login-yellow);
  font-size:12px;
  font-weight:950;
}

.login-access strong {
  display:block;
  margin-top:9px;
  color:var(--login-text);
  font-size:11px;
}

.login-access small {
  display:block;
  margin-top:3px;
  color:var(--login-muted);
  font-size:8px;
  line-height:1.4;
}

/* Form side */

.login-panel {
  display:flex;
  justify-content:center;
  flex-direction:column;
  padding:clamp(28px,5vw,58px);
  border-left:1px solid var(--login-line);
  background:
    linear-gradient(
      145deg,
      var(--login-card),
      var(--login-card-2)
    );
}

.login-panel-label {
  color:var(--login-yellow);
  font-size:8px;
  font-weight:950;
  letter-spacing:.15em;
}

.login-panel h2 {
  margin:8px 0 5px;
  color:var(--login-text);
  font-size:29px;
  letter-spacing:-.035em;
}

.login-panel-subtitle {
  margin:0 0 23px;
  color:var(--login-muted);
  font-size:10px;
  line-height:1.5;
}

.login-flash {
  margin:0 0 13px;
  padding:10px 11px;
  border:1px solid rgba(255,127,134,.30);
  border-radius:10px;
  background:rgba(127,29,29,.28);
  color:#fecaca;
  font-size:10px;
  font-weight:800;
}

.login-form {
  display:grid;
  gap:13px;
}

.login-field {
  display:grid;
  gap:6px;
}

.login-field label {
  color:var(--login-muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.login-field input {
  width:100%;
  min-height:47px;
  box-sizing:border-box;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--login-line);
  border-radius:11px;
  outline:none;
  background:var(--login-bg);
  color:var(--login-text);
  font-size:12px;
}

.login-field input:focus {
  border-color:#8c63a2;
  box-shadow:0 0 0 3px rgba(92,40,92,.18);
}

.login-password-wrap {
  position:relative;
}

.login-password-wrap input {
  padding-right:68px;
}

.login-password-toggle {
  position:absolute;
  top:50%;
  right:7px;
  width:auto;
  min-height:33px;
  margin:0;
  padding:6px 9px;
  border:0;
  border-radius:8px;
  background:var(--login-card-2);
  color:var(--login-muted);
  font-size:8px;
  font-weight:900;
  transform:translateY(-50%);
}

.login-submit {
  width:100%;
  min-height:48px;
  margin:5px 0 0;
  padding:10px 13px;
  border:1px solid rgba(255,227,110,.82);
  border-radius:11px;
  background:var(--login-yellow);
  color:#35152f;
  font-size:11px;
  font-weight:950;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.login-submit:hover {
  background:#fff1a7;
  transform:translateY(-1px);
}

.login-security {
  display:flex;
  align-items:center;
  gap:7px;
  margin:17px 0 0;
  color:var(--login-muted);
  font-size:8px;
  line-height:1.4;
}

.login-security span {

  font-size:8px;
  font-weight:650;
}

/* Light theme */

body.login-light {
  color-scheme:light;
  --login-bg:#f4f6fa;
  --login-card:#ffffff;
  --login-card-2:#f3f6fa;
  --login-line:#d7dfe9;
  --login-text:#172033;
  --login-muted:#617086;
  --login-shadow:0 20px 55px rgba(30,47,70,.13);
  background:
    radial-gradient(
      circle at 0 0,
      rgba(92,40,92,.07),
      transparent 28%
    ),
    #f4f6fa;
  color:#172033;
}

body.login-light .login-intro {
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(92,40,92,.06),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #f4f7fb
    );
}

body.login-light .login-panel {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f3f6fa
    );
}

body.login-light .login-access {
  background:#ffffff;
}

body.login-light .login-field input {
  border-color:#cfd8e5;
  background:#f8fafc;
  color:#172033;
}

body.login-light .login-field input::placeholder {
  color:#7b8798;
  opacity:1;
}

body.login-light .login-password-toggle {
  background:#edf1f6;
  color:#536176;
}

body.login-light .login-kicker,
body.login-light .login-panel-label {
  color:#744800;
}

body.login-light .login-access span {
  background:#fff4cc;
  color:#714700;
}

body.login-light .login-flash {
  border-color:#fecaca;
  background:#fee2e2;
  color:#8f1d1d;
}

body.login-light .login-title h1,
body.login-light .login-clock .zone {
  color:#ffe36e;
}

/* Responsive */

@media(max-width:840px) {
  .login-shell {
    grid-template-columns:1fr;
  }

  .login-intro {
    min-height:auto;
    padding:35px;
  }

  .login-panel {
    border-top:1px solid var(--login-line);
    border-left:0;
  }
}

@media(max-width:650px) {
  body .wrap {
    width:calc(100% - 16px);
    padding:8px 0 28px;
  }

  .login-banner {
    display:flex;
    align-items:stretch;
    flex-direction:column;
    padding:12px;
    border-radius:15px;
  }

  .login-brand {
    justify-content:center;
  }

  .login-banner-right {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .login-clock {
    justify-content:center;
  }

  #loginThemeToggle {
    width:100%;
  }

  .login-shell {
    min-height:0;
    margin-top:10px;
    border-radius:16px;
  }

  .login-intro {
    padding:27px 20px;
  }

  .login-intro h1 {
    font-size:38px;
  }

  .login-panel {
    padding:27px 20px;
  }
}

@media(max-width:440px) {
  .login-access-grid {
    grid-template-columns:1fr;
  }

  .login-banner-right {
    grid-template-columns:1fr;
  }
}
/* LOGIN PASSWORD SHOW BUTTON SIZE */

html body main.wrap #loginPasswordToggle {
  width:55px !important;
  min-width:40px !important;
  transform:translate(1px, -20px);
  height:30px !important;
  min-height:20px !important;

  padding:5px 10px !important;
  font-size:10px !important;
}
/* KEEP ME LOGGED IN */

.login-remember {
  transform:translate(5px, 8px);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  

  width:max-content;
  margin:0;
  padding:2px 0;

  color:var(--login-muted);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.login-remember input {
  width: 9%;px !important;
  min-width:9px !important;
  height:9px !important;
  min-height:9px !important;

  margin:0 !important;
  padding:0 !important;

  accent-color:#f5c84c;
  cursor:pointer;
}

.login-forgot-link {
  margin-left:6px;
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:900;
  text-decoration:underline;
  white-space:nowrap;
}

.login-forgot-link:hover {
  opacity:.7;
}