.login {
  background:
    linear-gradient(145deg, rgba(7, 19, 25, 0.9), rgba(7, 19, 25, 0.5)),
    url('/images/quasar-login-poster.jpg') center / cover no-repeat;
}

.login label {
  text-transform: none;
}

.collector-password {
  position: relative;
  display: block;
}

.login .collector-password input {
  padding-right: 58px;
}

.collector-password-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: #52616c;
}

.collector-password-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
}

.collector-password-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.collector-password-toggle .eye-off,
.collector-password-toggle.is-visible .eye-on {
  display: none;
}

.collector-password-toggle.is-visible .eye-off {
  display: block;
}

.login {
  justify-content: flex-start;
  padding: 18px 24px 16px;
}

.login .brand {
  margin-bottom: 18px;
}

.login label {
  gap: 5px;
  margin-bottom: 8px;
}

.login input,
.login select {
  height: 44px;
}

.login form > button {
  min-height: 42px;
}

.login-footer {
  margin-top: auto;
  margin-bottom: 0;
}