:root {
  --header-height: 5rem;
}

body {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/login_background.webp) top/cover no-repeat;
}

/* HEADER */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header nav {
  width: 100%;
  min-height: var(--header-height);
  font-size: 20px;
  z-index: 999;
}

/* MAIN */
main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FORM */
form {
  width: 26rem;
  padding: 1.5rem;
  border-radius: 10px;
  color: #ccc;
  margin-top: var(--header-height) !important;
}

.blurry-effect {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(13.5px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(13.5px);
  border-radius: 10px;
  border: 1px solid rgb(0, 0, 0);
}

.form-control:-webkit-autofill {
  transition: background-color 9999999s ease-in-out 0s; /* Transição longa para manter a cor de fundo */
}

.form-control,
.form-control:focus {
  background-color: transparent;
  color: #cccccc;
}

/* Estilos para o preenchimento automático em navegadores que usam WebKit, como Safari e Chrome */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: #cccccc !important;
}

/* Estilos para o preenchimento automático no Firefox */
.form-control:-moz-autofill,
.form-control:-moz-autofill:hover,
.form-control:-moz-autofill:focus,
.form-control:-moz-autofill:active {
  box-shadow: 0 0 0 30px transparent inset !important;
  text-fill-color: #cccccc !important;
}

/* Estilos para o preenchimento automático no Microsoft Edge */
.form-control:-ms-autofill {
  box-shadow: 0 0 0 30px transparent inset !important;
  text-fill-color: #cccccc !important;
}

form a:hover {
  text-decoration: underline;
}

form .send-button {
  background-color: #111111;
}

/* INPUT PASSWORD */
.form-outline {
  position: relative;
}

.form-outline input[type="password"] {
  padding-right: 40px; /* Espaço para o ícone */
}

.form-outline i {
  display: none;
  position: absolute;
  right: 10px;
  top: 50%; /* Centralizar verticalmente */
  transform: translateY(-50%); /* Ajuste fino da posição vertical */
  cursor: pointer;
}
.form-outline:hover i {
  display: block;
}

.invalid-feedback-password {
  margin-top: -2.2rem;
}

@media (max-width: 575.98px) {
  form {
    width: 100%;
  }
}