/* Corpo com gradiente de fundo e centralização */
body {
  background: linear-gradient(to right, #4CAF50, #2196F3); /* Gradiente de verde para azul */
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* Estilos para a logo */
.logo {
  display: block; /* Bloco para alinhar a logo */
  width: 250px; /* Largura padrão para desktops */
  margin: -50px auto 20px; /* Margens para centralização e espaçamento */
  margin-bottom: 5px;
  transition: width 0.3s ease-in-out; /* Transição suave ao redimensionar */
}

/* Caixa de login com fundo semi-transparente */
.login-box {
  background-color: rgba(255, 255, 255, 0.8); /* Fundo semi-transparente branco */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: 400px; /* Define uma largura máxima de 400px para desktops */
  margin: 0 auto;
  width: 100%;
  transition: max-width 0.3s ease-in-out;
}

/* Textos personalizados */
.text-white {
  color: #ffffff !important;
}

.text-dark {
  color: #000000 !important; /* Cor preta para textos em formulários */
}

.mb-3 {
  margin-bottom: 1.5rem;
}

/* Estilo dos formulários */
.form-control {
  background-color: #ffffff; /* Fundo branco dos inputs */
  color: #000000; /* Texto preto */
}

/* Estilos para o botão */
.btn-primary {
  background-color: #4CAF50; /* Fundo verde para o botão */
  border-color: #4CAF50;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #45a049; /* Fundo mais escuro ao passar o mouse */
  border-color: #45a049;
}

/* Media Queries para tornar responsivo */

/* Dispositivos pequenos - smartphones em retrato */
@media (max-width: 576px) {
  .logo {
    width: 150px; /* Reduz o tamanho da logo em telas menores */
  }

  .login-box {
    max-width: 90%; /* Aumenta a largura em telas menores */
    padding: 15px;
  }
}

/* Dispositivos médios - tablets */
@media (max-width: 768px) {
  .logo {
    width: 180px; /* Ajuste da logo para tablets */
  }

  .login-box {
    max-width: 80%; /* Largura do box em tablets */
  }
}

/* Dispositivos grandes - desktops */
@media (min-width: 992px) {
  .logo {
    width: 250px; /* Tamanho da logo para desktops */
  }

  .login-box {
    max-width: 400px; /* Largura do box para desktops */
  }
}

.eye-icon {
  color: black; /* Cor preta para o ícone */
  cursor: pointer; /* Mãozinha ao passar o mouse */
  font-size: 1.2em; /* Tamanho do ícone */
}

.input-group-text {
  background-color: transparent; /* Torna o fundo do ícone transparente */
  border: none; /* Remove borda extra ao redor do ícone */
  padding: 0.375rem; /* Ajusta o espaçamento ao redor do ícone */
}

.input-group-text .fas {
  width: 20px; /* Largura do ícone */
  height: 20px; /* Altura do ícone */
}