:root {
  --brand-color: #5C68D9;
}

.login-title {
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  color: var(--brand-color) !important;
  margin-bottom: 20px;
}

#login-email,
#login-password {
  letter-spacing: 0.06em;
  background-color: #EEF0FB !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  width: 360px;
}

#login-email::placeholder,
#login-password::placeholder {
  font-weight: 700;
  font-size: 0.6rem;
}

#login-email:hover,
#login-password:hover {
  border: 1px solid #AFB3EA !important;
}

#login-email:focus,
#login-password:focus {
  border: 1px solid var(--brand-color) !important;
  box-shadow: none !important;
}

#login-email.is-invalid,
#login-password.is-invalid {
  border-color: #FF397B !important;
  background-image: url("/assets/ui/error.svg") !important;
  background-size: 20px 20px;
}

#login-remember {
  background-color: #EEF0FB !important;
  border: 1px solid transparent !important;
  border-radius: 0.25rem !important;
}

#login-remember:focus-visible {
  border: 1px solid var(--brand-color) !important;
}

#login-remember.form-check-input:focus {
  box-shadow: none !important;
  outline: none !important;
}

#login-remember:checked {
  background-color: var(--brand-color) !important;
  border: 1px solid var(--brand-color) !important;
}

#login-remember + label {
  font-weight: 700;
  font-size: 0.6rem;
  color: #7B7F85;
  margin-left: 0.1rem;
  transform: translateY(-1.2px);
}

.remember-row {
  width: 360px;
}

#login-button {
  font-size: 0.85rem !important;
  background-color: var(--brand-color) !important;
  color: #FFFFFF !important;
  border-radius: 0.5rem !important;
  width: 360px;
  text-align: center;
  margin-top: 10px;
  transition: padding-left 0.2s ease;
}

#login-button:hover {
  padding-left: 2.5rem;
}

#login-button:active {
  padding-left: 2.5rem;
}

#login-button:focus-visible {
  padding-left: 2.5rem;
  box-shadow: none !important;
}