.authentication-wrapper.authentication-basic {
  padding-inline: 1.5rem;
}

.auth-theme-toggle {
  position: fixed;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 2;
}

.brand-lockup {
  display: inline-block;
  inline-size: clamp(210px, 80%, 300px);
  container-type: inline-size;
}

.brand-logo {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.brand-logo-dark {
  display: none;
}

[data-bs-theme="dark"] .brand-logo-light {
  display: none;
}

[data-bs-theme="dark"] .brand-logo-dark {
  display: block;
}

.brand-suffix {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-block-start: 0.4rem;
  font-size: 7cqw;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--msl-brand-gold);
}

.brand-connector {
  position: relative;
  flex: 1 1 auto;
  block-size: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

.brand-connector::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.1em;
  inset-block-start: 50%;
  inline-size: 0.5em;
  block-size: 0.5em;
  border-radius: 50%;
  background-color: currentColor;
  transform: translateY(-50%);
}

.brand-typing-wrap {
  position: relative;
  display: inline-block;
  margin-inline-end: -0.18em;
}

.brand-typing {
  display: block;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: brand-type 1s steps(10) 0.35s both;
}

.brand-caret {
  position: absolute;
  inset-block: 0.1em 0.1em;
  inset-inline-start: 0;
  inline-size: 0.09em;
  background-color: currentColor;
  animation:
    brand-caret-move 1s steps(10) 0.35s both,
    brand-caret-blink 0.44s step-end 0.35s 3,
    brand-caret-hide 0.01s linear 1.35s forwards;
}

@keyframes brand-type {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes brand-caret-move {
  to {
    inset-inline-start: 100%;
  }
}

@keyframes brand-caret-blink {
  50% {
    opacity: 0;
  }
}

@keyframes brand-caret-hide {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-typing {
    clip-path: none;
    animation: none;
  }

  .brand-caret {
    display: none;
  }
}

.auth-footer {
  color: var(--bs-body-color);
}

.captcha-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.captcha-refresh {
  flex-shrink: 0;
}

.captcha-image {
  max-inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

@media (max-width: 575.98px) {
  .brand-lockup {
    inline-size: clamp(190px, 66%, 240px);
  }
}