body {
  background-color: #f4f6f8 !important;
  color: #1d2327 !important;
}
#login-footer > div {
  background: #e9edf0 !important;
  color: #4b5563 !important;
}
.form-control, input.form-control,
#login-form input[type="text"], #login-form input[type="password"], #login-form input[type="email"] {
  background-color: #ffffff !important;
  color: #1d2327 !important;
  -webkit-text-fill-color: #1d2327 !important;
  caret-color: #1d2327 !important;
  border: 1px solid #c3c4c7 !important;
}
/* autofill do navegador (Chrome/Edge) mantem o texto digitado claro se nao sobrescrever isso */
#login-form input:-webkit-autofill,
#login-form input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #1d2327 !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* centraliza o bloco (logo + formulario) de verdade, tanto vertical quanto
   horizontal - o layout padrao usa "top:16vh/20vh" fixo, calibrado pro
   tamanho original da logo, e desalinha quando a logo muda de tamanho. */
body.task-login #layout-content {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100% !important;
}
.task-login #logo {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  width: 300px !important;
  max-width: 90% !important;
  height: auto !important;
  margin: 0 auto 28px !important;
}
body.task-login #login-form {
  position: static !important;
  top: auto !important;
  margin: 0 auto !important;
}