body {
  margin: 0;
  background: linear-gradient(rgba(var(--brand-color-rgb), 0.6), rgba(var(--brand-color-rgb), 0.6)),
  url("../../images/backgroundLogin.png"),
  no-repeat center center fixed;
  background-size: cover;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-height: 100dvh;
  overflow: auto;
}

.login-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 17dvh;
  padding-bottom: 17dvh;
}

@media (max-height: 700px) {
  .login-container {
    padding: 1dvh;
  }
}

@media (min-height: 701px) and (max-height: 900px) {
  .login-container {
    padding: 10dvh 2dvh;
  }
}


.login-card,
.login-error-card{
  background: var(--content-background);
  border-radius: 20px;
  padding: 2dvh;
  box-shadow:
          0 12px 40px  rgba(0, 0, 0, 0.5),
          0 24px 80px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 500px;
  width: 100%;
}

.login-logo-img{
  width: 100%;
  max-width: 300px;
}

.login-error-card svg{
  width: 4rem;
  height: 4rem;
}

.invalid-field{
  border: 2px solid var(--danger) !important;
}