/* Mobile only: remove the white card surface, not its contents. */
@media (max-width: 767px) {
  .hub-keycloak-login-ui__loginContainer {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* Match the original, more open spacing between letters. */
#login input,
#login button,
#login a,
#login label,
#login p,
#login span {
  letter-spacing: .02em;
}

#username[data-error="true"] {
  border-color: #d71920 !important;
}

#username[data-error="true"] + label,
#username[data-error="true"]::placeholder {
  color: #d71920 !important;
}

.login-email-error {
  display: block;
  margin: -1.5rem 0 -.8rem;
  color: #d71920;
  font-family: RealHeadPro-Light, sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.4;
}

.login-email-error[hidden] {
  display: none;
}

.login-email-error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  margin-right: .5rem;
  border-radius: 50%;
  color: #fff;
  background: #d71920;
  font: 700 1rem Arial, sans-serif;
}

/* Original eye state: add the slash while the password is hidden. */
.component__showButton___-mcg4w {
  position: relative;
  display: inline-flex;
}

.component__showButton___-mcg4w.password-hidden::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 1px solid #1b1b1b;
  transform: rotate(34deg);
  pointer-events: none;
}