/* Generated from tabler-upgrade.css. Page-specific CSS split for faster loads. */

body.login-body {
  --login-primary: #0b5f8f;
  --login-primary-dark: #061a29;
  --login-accent: #ff922b;
  --login-ink: #101828;
  --login-muted: #667085;
  --login-line: #d8e2eb;
  min-height: 100vh !important;
  margin: 0 !important;
  color: #ffffff !important;
  background:
    linear-gradient(90deg, rgba(6, 24, 38, 0.94) 0%, rgba(6, 24, 38, 0.68) 42%, rgba(6, 24, 38, 0.34) 100%),
    url("/assets/mfo-hero-road.webp") center / cover fixed no-repeat !important;
  overflow-x: hidden !important;
}

body.login-body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 78% 15%, rgba(255, 146, 43, 0.22), transparent 24rem),
    linear-gradient(180deg, rgba(6, 24, 38, 0) 0, rgba(6, 24, 38, 0.16) 46%, rgba(237, 245, 244, 0.95) 100%);
  content: "";
  pointer-events: none;
}

body.login-body .login-header {
  display: flex !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: 3.9rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin: 0 !important;
  padding: 0.62rem max(0.75rem, calc((100vw - 72rem) / 2 + 0.75rem)) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(214, 225, 234, 0.82) !important;
  border-radius: 0 !important;
  box-shadow: 0 0.75rem 2rem rgba(6, 24, 38, 0.14) !important;
  backdrop-filter: blur(18px) !important;
}

body.login-body .login-shell {
  display: grid !important;
  width: min(72rem, calc(100% - 2rem)) !important;
  max-width: calc(100vw - 2rem) !important;
  grid-template-columns: minmax(19rem, 0.78fr) minmax(21rem, 0.58fr) !important;
  gap: clamp(1.1rem, 4vw, 4rem) !important;
  align-items: center !important;
  min-height: calc(100vh - 3.9rem) !important;
  margin: 0 auto !important;
  padding: clamp(2rem, 5vw, 4rem) 0 4rem !important;
}

body.login-body .login-intro {
  display: grid !important;
  max-width: 42rem !important;
  gap: 1rem !important;
}

body.login-body .login-intro h1 {
  max-width: 11ch !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(3rem, 7vw, 5.6rem) !important;
  line-height: 0.94 !important;
  letter-spacing: 0 !important;
}

body.login-body .login-intro > p {
  max-width: 38rem !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

body.login-body .login-proof-list {
  display: grid !important;
  max-width: 36rem !important;
  gap: 0.65rem !important;
  margin-top: 0.2rem !important;
}

body.login-body .login-proof-list > div {
  display: flex !important;
  min-height: 2.8rem !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding: 0.66rem 0.78rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 0.8rem !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

body.login-body .login-proof-list svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 auto !important;
  color: #ffcf8a !important;
}

body.login-body .login-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  padding: 0.35rem !important;
  background: #f2f6fb !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 0.8rem !important;
}

body.login-body .login-tabs button {
  min-height: 2.55rem !important;
  color: var(--login-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.62rem !important;
  font-weight: 900 !important;
}

body.login-body .login-form-heading {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.8rem !important;
  padding: 0.9rem !important;
  background: #f7faff !important;
  border: 1px solid var(--login-line) !important;
  border-radius: 0.9rem !important;
}

body.login-body .login-form-heading svg {
  width: 2.55rem !important;
  height: 2.55rem !important;
  flex: 0 0 auto !important;
  padding: 0.62rem !important;
  color: var(--login-primary) !important;
  background: #e7f4f7 !important;
  border-radius: 0.85rem !important;
}

body.login-body .login-form-heading h2 {
  margin: 0 !important;
  color: var(--login-ink) !important;
  font-size: 1.28rem !important;
  line-height: 1.15 !important;
}

body.login-body .login-form-heading p {
  margin: 0.28rem 0 0 !important;
  color: var(--login-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 900px) {
body.login-body {
    background:
      linear-gradient(180deg, rgba(6, 24, 38, 0.92), rgba(6, 24, 38, 0.72) 26rem, rgba(237, 245, 244, 0.96) 100%),
      url("/assets/mfo-hero-road.webp") center top / cover fixed no-repeat !important;
  }

body.login-body .login-shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 1.4rem 0 2.5rem !important;
  }
}

@media (max-width: 620px) {
body.login-body .login-header {
    min-height: 3.45rem !important;
    padding: 0.52rem 0.58rem !important;
  }

body.login-body .login-shell {
    width: calc(100% - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    gap: 0.85rem !important;
    padding: 1rem 0 2rem !important;
  }

body.login-body .login-intro h1 {
    max-width: 12ch !important;
    font-size: 2.25rem !important;
    line-height: 1.02 !important;
  }

body.login-body .login-proof-list {
    gap: 0.5rem !important;
  }

body.login-body .login-proof-list > div {
    min-height: 2.45rem !important;
    padding: 0.55rem 0.65rem !important;
    font-size: 0.84rem !important;
  }

body.login-body .login-tabs {
    grid-template-columns: 1fr !important;
  }
}

body.login-body .login-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem) !important;
  gap: clamp(1.5rem, 5vw, 4.4rem) !important;
  align-items: center !important;
  min-height: calc(100vh - 4.9rem) !important;
  padding: clamp(2.4rem, 6vw, 5rem) 0 4rem !important;
}

body.login-body .login-card-heading {
  display: grid !important;
  gap: 0.28rem !important;
  padding: 0.9rem 0.95rem 0.15rem !important;
}

body.login-body .login-card-heading h2 {
  margin: 0 !important;
  color: var(--auth-ink) !important;
  font-size: 1.35rem !important;
  line-height: 1.12 !important;
}

body.login-body .login-card-heading span {
  color: var(--auth-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

body.login-body .login-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  padding: 0.36rem !important;
  background: #eef5f7 !important;
  border: 1px solid var(--auth-line) !important;
  border-radius: 0.82rem !important;
}

body.login-body .login-tabs button {
  min-height: 2.52rem !important;
  color: var(--auth-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0.64rem !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

@media (max-width: 680px) {
body.login-body .login-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}