:root {
  --w3-primary: #007bff;
  --w3-primary-hover: #0069d9;
  --w3-danger: #dc3545;
  --w3-text: #212529;
  --w3-muted: #70757a;
  --w3-border: #e2e5e9;
  --w3-surface: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--w3-text);
  background: var(--w3-surface);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body { margin: 0; }

button, input { font: inherit; }

.w3-login {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.w3-login__content,
.w3-login__identity {
  display: grid;
  width: 50%;
  place-items: center;
}

.w3-login__content { padding: 2rem; }

.w3-login__form-wrap { width: min(100%, 390px); }

.w3-login__brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .2rem;
  font-size: 1.75rem;
}

.w3-login__brand-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

.w3-login__version,
.w3-login__description {
  margin: 0 0 2rem;
  color: var(--w3-muted);
}

#recover-title {
  margin: 1.75rem 0 .35rem;
  font-size: 1.35rem;
}

.w3-field {
  padding: .75rem 1rem;
  border: 1px solid var(--w3-border);
  background: var(--w3-surface);
}

.w3-field--first { border-radius: .5rem .5rem 0 0; }

.w3-field--last {
  border-top: 0;
  border-radius: 0 0 .5rem .5rem;
}

.w3-field:focus-within {
  position: relative;
  border-color: var(--w3-primary);
  box-shadow: 0 0 0 1px var(--w3-primary);
}

.w3-field label {
  display: block;
  margin-bottom: .15rem;
  color: var(--w3-muted);
  font-size: .75rem;
}

.w3-field input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--w3-text);
  background: transparent;
  font-size: 1.15rem;
}

.w3-field input::placeholder { color: #a8adb3; }

.w3-login__link-row {
  display: flex;
  justify-content: flex-end;
  margin: 1.25rem 0 2rem;
}

.w3-login__link {
  padding: .25rem 0;
  border: 0;
  color: var(--w3-muted);
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
}

.w3-login__link:hover,
.w3-login__link:focus-visible { color: var(--w3-primary); }

.w3-login__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  color: #212529;
  background-color: transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  user-select: none;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  box-shadow: none;
}

.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
}

.w3-login__submit {
  color: var(--login-foreground, #fff);
  background-color: var(--login-background, #3c8dbc);
  border-color: var(--login-background, #3c8dbc);
}

.w3-login__submit:hover {
  color: var(--login-foreground, #fff);
  background-color: var(--login-background, #3c8dbc);
  border-color: var(--login-background, #3c8dbc);
  filter: brightness(.9);
}

.w3-login--support {
  --login-background: #001f3f;
  --login-foreground: #fff;
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  box-shadow: none;
}

.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

.btn:focus-visible,
.w3-login__link:focus-visible {
  outline: 3px solid rgb(0 123 255 / 30%);
  outline-offset: 2px;
}

.w3-login__identity {
  padding: 3rem;
  background: var(--login-background, #3c8dbc);
}

.w3-login__identity img {
  display: block;
  width: min(50%, 360px);
  max-height: 70vh;
  object-fit: contain;
}

.w3-toast-region {
  position: fixed;
  z-index: 1000;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: min(360px, calc(100% - 2rem));
  gap: .5rem;
}

.toast {
  max-width: 350px;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: .25rem;
  color: #fff;
  background-clip: padding-box;
  box-shadow: 0 .25rem .75rem rgb(0 0 0 / 10%);
  font-size: .875rem;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: .25rem .75rem;
  border-bottom: 1px solid rgb(0 0 0 / 5%);
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
  color: #fff;
  background-color: rgb(52 58 64 / 70%);
}

.toast-header strong { margin-left: .5rem; }

.toast-body { padding: .75rem; }

.bg-info { background-color: rgb(23 162 184 / 85%); }
.bg-danger { background-color: rgb(220 53 69 / 85%); }
.bg-success { background-color: rgb(40 167 69 / 85%); }
.bg-warning { color: #1f2d3d; background-color: rgb(255 193 7 / 85%); }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .w3-login { flex-direction: column-reverse; }

  .w3-login__content,
  .w3-login__identity { width: 100%; }

  .w3-login__content {
    min-height: 72vh;
    min-height: 72dvh;
    padding: 2rem 1.25rem;
  }

  .w3-login__identity {
    min-height: 28vh;
    min-height: 28dvh;
    padding: 1.25rem;
  }

  .w3-login__identity img {
    width: auto;
    max-width: 65%;
    max-height: 22vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}