/* Readable login and contact fields in both login themes. */
body ngx-login .my-login-page {
  --login-field-bg: #f3f4f6;
  --login-field-text: #172033;
  --login-field-muted: #586174;
  --login-field-border: #8792a5;
  --login-field-focus: #662cfd;
}
body ngx-login .my-login-page.dark-mode {
  --login-field-bg: #282b3d;
  --login-field-text: #f8faff;
  --login-field-muted: #bec6d8;
  --login-field-border: #8490aa;
  --login-field-focus: #b1a0ff;
}
body ngx-login .my-login-page .login-left input,
body ngx-login .my-login-page .contact-form input,
body ngx-login .my-login-page .contact-form textarea {
  background: var(--login-field-bg) !important;
  color: var(--login-field-text) !important;
  -webkit-text-fill-color: var(--login-field-text) !important;
  caret-color: var(--login-field-text) !important;
  border: 1px solid var(--login-field-border) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}
body ngx-login .my-login-page input::placeholder,
body ngx-login .my-login-page textarea::placeholder {
  color: var(--login-field-muted) !important;
  -webkit-text-fill-color: var(--login-field-muted) !important;
  opacity: 1 !important;
}
body ngx-login .my-login-page input:focus,
body ngx-login .my-login-page textarea:focus {
  outline: 2px solid var(--login-field-focus) !important;
  outline-offset: 2px;
  border-color: var(--login-field-focus) !important;
}
body ngx-login .my-login-page input:-webkit-autofill,
body ngx-login .my-login-page input:-webkit-autofill:hover,
body ngx-login .my-login-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--login-field-bg) inset !important;
  -webkit-text-fill-color: var(--login-field-text) !important;
  caret-color: var(--login-field-text) !important;
}
body ngx-login .my-login-page .toggle-password {
  color: var(--login-field-muted) !important;
}
body ngx-login .my-login-page .toggle-password:hover {
  color: var(--login-field-focus) !important;
}