@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap";
.app-shell {
  box-sizing: border-box;
  min-height: 100dvh;
  padding: 8px;
}

.glass-container {
  box-sizing: border-box;
  min-height: calc(100dvh - 16px);
  color: var(--md-sys-color-on-surface);
  transition: all .3s var(--m3-easing-standard);
  border-radius: 20px;
  flex-direction: column;
  padding: 20px;
  display: flex;
}

@media (width >= 768px) {
  .app-shell {
    padding: 24px;
  }

  .glass-container {
    -webkit-backdrop-filter: blur(16px);
    background-color: color-mix(in srgb, var(--md-sys-color-surface) 70%, transparent);
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 24px;
    min-width: 480px;
    max-width: 100%;
    min-height: calc(100dvh - 48px);
    padding: 32px;
    display: inline-flex;
  }
}

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0000;
  font-family: Google Sans Flex, Noto Sans SC, system-ui, sans-serif;
}

#root {
  min-height: 100dvh;
  position: relative;
}

:root {
  --m3-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --m3-easing-emphasized: cubic-bezier(.05, .7, .1, 1);
  --m3-easing-accelerate: cubic-bezier(.3, 0, 1, 1);
  --m3-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --m3-duration-short: .15s;
  --m3-duration-medium: .3s;
  --m3-duration-long: .4s;
}

@media (prefers-reduced-motion: no-preference) {
  body, #root, main, header, nav, div, section, article, md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button, md-filled-text-field, md-outlined-text-field, md-icon, md-icon-button, md-filled-icon-button, md-checkbox, md-switch, md-dialog, md-divider, md-list, md-list-item, md-menu, md-menu-item, md-tabs, md-primary-tab, md-secondary-tab, md-circular-progress, md-linear-progress, md-chip-set, md-filter-chip, md-assist-chip, md-suggestion-chip, md-outlined-select, md-select-option, .m3-card, .m3-card-outlined, .m3-section-title, .m3-section-desc {
    transition: background-color .6s var(--m3-easing-standard),
      color .6s var(--m3-easing-standard),
      border-color .6s var(--m3-easing-standard),
      box-shadow .6s var(--m3-easing-standard);
  }
}

@keyframes m3-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes m3-scale-enter {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes m3-slide-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes m3-exit {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes m3-scale-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.95);
  }
}

.page-enter {
  animation: m3-enter var(--m3-duration-medium) var(--m3-easing-emphasized) both;
}

.banner-enter {
  animation: m3-slide-down var(--m3-duration-short) var(--m3-easing-decelerate) both;
}

.banner-exit {
  animation: m3-exit var(--m3-duration-short) var(--m3-easing-accelerate) both;
}

.state-enter {
  animation: m3-scale-enter var(--m3-duration-medium) var(--m3-easing-emphasized) both;
}

@container (width >= 600px) {
  .responsive-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (width >= 1024px) {
  .responsive-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.m3-card {
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-level1);
  padding: 24px;
}

.m3-card-outlined {
  background-color: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 24px;
}

.m3-section {
  margin-bottom: 24px;
}

.m3-section-title {
  font: var(--md-sys-typescale-title-medium);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 16px;
}

.m3-section-desc {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 16px;
}

.responsive-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.form-container {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 24px 0;
}

.form-title {
  font: var(--md-sys-typescale-headline-medium);
  color: var(--md-sys-color-on-surface);
  margin-bottom: 8px;
}

.form-subtitle {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 32px;
}

.form-field {
  width: 100%;
  margin-bottom: 16px;
}

.form-actions {
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.form-links {
  font: var(--md-sys-typescale-body-small);
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.form-container md-filled-text-field, .form-container md-outlined-text-field, .form-container md-filled-button, .form-container md-outlined-button, .form-container md-filled-tonal-button {
  width: 100%;
}

.captcha-container {
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  min-height: 60vh;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
}

.captcha-container md-filled-text-field, .captcha-container md-outlined-text-field {
  width: 100%;
}

.captcha-title {
  font: var(--md-sys-typescale-headline-medium);
  color: var(--md-sys-color-on-surface);
  margin: 16px 0 8px;
}

.captcha-subtitle {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 32px;
}

.captcha-field {
  width: 100%;
  margin-bottom: 16px;
}

.captcha-actions {
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}

.captcha-actions md-filled-button, .captcha-actions md-outlined-button {
  width: 100%;
}

.not-found-header {
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  display: flex;
}

md-filled-button {
  --md-filled-button-leading-space: 24px;
  --md-filled-button-trailing-space: 24px;
}

md-outlined-button {
  --md-outlined-button-leading-space: 24px;
  --md-outlined-button-trailing-space: 24px;
}

md-filled-tonal-button {
  --md-filled-tonal-button-leading-space: 24px;
  --md-filled-tonal-button-trailing-space: 24px;
}

md-text-button {
  --md-text-button-leading-space: 12px;
  --md-text-button-trailing-space: 12px;
}

md-dialog {
  max-height: 90vh;
  overflow-y: auto;
  margin: auto !important;
  position: fixed !important;
  inset: 0 !important;
}

[slot="content"] {
  padding: 0 24px !important;
}

[slot="actions"] {
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 16px 24px !important;
  display: flex !important;
}

md-dialog .form-field {
  width: 100%;
  margin-bottom: 16px;
}

md-dialog .form-field md-outlined-text-field {
  width: 100%;
}
/*# sourceMappingURL=authpass-frontend.a4798a5b.css.map */