#background-render.svelte-1t7yqk4 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }

  .extra-height.svelte-h34f85 {
    height: 32px;
  }

  .login-logo-wrapper.svelte-h34f85 {
    min-width: 300px;
    display: flex;
    justify-content: center;
  }

  .f-text-danger.svelte-h34f85 {
    text-align: center;
    padding: 1em;
  }
  img.svelte-h34f85 {
    max-width: 250px;
    height: auto;
  }
  button.svelte-h34f85,
  input.svelte-h34f85 {
    width: 100%;
  }
  a.svelte-h34f85 small:where(.svelte-h34f85) {
    color: rgba(0, 0, 0, 0.3);
  }
  .link.svelte-h34f85 {
    color: var(--ftw-text-accent-one);
  }

  .extra-height.svelte-1cwt08n {
    height: 32px;
  }
  .f-card.svelte-1cwt08n {
    min-width: 300px;
  }
  .f-text-danger.svelte-1cwt08n {
    text-align: center;
    padding: 1em;
  }
  input.svelte-1cwt08n,
  button.svelte-1cwt08n {
    width: 100%;
  }
  .passkey-copy.svelte-1cwt08n {
    justify-content: center;
    text-align: center;
  }

  .loader.svelte-1cwt08n::after {
    content: '';
    position: absolute;
    animation: svelte-1cwt08n-animloader 2s linear infinite;
  }

  @keyframes svelte-1cwt08n-animloader {
    0% {
      content: '';
    }
    25% {
      content: '.';
    }
    50% {
      content: '..';
    }
    75% {
      content: '...';
    }
  }

  .f-card.svelte-kxqebk {
    min-width: 300px;
  }
  .f-text-danger.svelte-kxqebk {
    text-align: center;
    padding: 1em;
  }
  .login-logo-wrapper.svelte-kxqebk {
    min-width: 265px;
    padding: 17px 35px 20px 35px;
  }
  img.svelte-kxqebk {
    max-width: 250px;
    height: auto;
  }
  button.svelte-kxqebk {
    width: 100%;
  }
  a.svelte-kxqebk small:where(.svelte-kxqebk) {
    color: rgba(0, 0, 0, 0.3);
  }
  .link.svelte-kxqebk {
    color: var(--ftw-text-accent-one);
  }

  .f-card.svelte-1c9sivo {
    min-width: 300px;
  }
  .f-text-danger.svelte-1c9sivo {
    text-align: center;
    padding: 1em;
  }
  .login-logo-wrapper.svelte-1c9sivo {
    min-width: 265px;
    padding: 17px 35px 20px 35px;
  }
  img.svelte-1c9sivo {
    max-width: 250px;
    height: auto;
  }
  a.svelte-1c9sivo small:where(.svelte-1c9sivo) {
    color: rgba(0, 0, 0, 0.3);
  }
  .link.svelte-1c9sivo {
    color: var(--ftw-text-accent-one);
  }

  .svelte-fa-base {
    height: 1em;
    overflow: visible;
    transform-origin: center;
    vertical-align: -0.125em;
  }

  .svelte-fa-fw {
    text-align: center;
    width: 1.25em;
  }

  .svelte-fa-pull-left.svelte-q6zoq1 {
    float: left;
  }

  .svelte-fa-pull-right.svelte-q6zoq1 {
    float: right;
  }

  .svelte-fa-size-lg.svelte-q6zoq1 {
    font-size: 1.33333em;
    line-height: 0.75em;
    vertical-align: -0.225em;
  }

  .svelte-fa-size-sm.svelte-q6zoq1 {
    font-size: 0.875em;
  }

  .svelte-fa-size-xs.svelte-q6zoq1 {
    font-size: 0.75em;
  }

  .spin.svelte-q6zoq1 {
    animation: svelte-q6zoq1-spin 2s 0s infinite linear;
  }

  .pulse.svelte-q6zoq1 {
    animation: svelte-q6zoq1-spin 1s infinite steps(8);
  }

  @keyframes svelte-q6zoq1-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .loading.svelte-1satgyw {
    width: 100%;
    height: 100%;
  }

  .f-card.svelte-1pdqlb0 {
    min-width: 300px;
  }
  .f-text-danger.svelte-1pdqlb0 {
    text-align: center;
    padding: 1em;
  }

  .loader.svelte-1pdqlb0::after {
    content: '';
    position: absolute;
    animation: svelte-1pdqlb0-animloader 2s linear infinite;
  }

  @keyframes svelte-1pdqlb0-animloader {
    0% {
      content: '';
    }
    25% {
      content: '.';
    }
    50% {
      content: '..';
    }
    75% {
      content: '...';
    }
  }

  .f-card.svelte-jfy0vs {
    min-width: 300px;
  }
  header.svelte-jfy0vs h2:where(.svelte-jfy0vs) {
    padding-top: 0;
    margin-top: 0;
  }

  .help-link.svelte-1ta1j8x {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Keep the link above the login card's backdrop-filter stacking context. */
    z-index: 1;
    /* Quiet until wanted: this is a corner affordance, not a call to action. */
    opacity: 0.5;
    color: var(--ftw-text-color, inherit);
    line-height: 1;
    padding: 4px;
    /* A comfortable touch target without making the icon itself bigger. */
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .help-link.svelte-1ta1j8x:hover,
  .help-link.svelte-1ta1j8x:focus-visible {
    opacity: 1;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .f-app.svelte-1n46o8q {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .static-background.svelte-1n46o8q {
    background: linear-gradient(to top, rgb(4, 35, 55) 0%, rgb(59, 106, 121) 33%, rgb(126, 188, 191) 67%);
  }

  .top-section.svelte-1n46o8q {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    z-index: 1;
    margin: 20px;
  }

  .bottom-section.svelte-1n46o8q {
    flex: 1;
    width: 100%;
    min-height: 0;
  }

  .login-pane.svelte-1n46o8q {
    position: relative;
    z-index: 1;
  }

  .logo.svelte-1n46o8q {
    max-height: 100%;
    max-width: 300px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.37));
  }
.f-card {
    background: rgba(61, 70, 77, 0.45) !important;
    border-radius: 4%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}