/* Estilos Gerais */
html {
  background-color: #f4f4f4;
}

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

/* Estilos do Banner */
.banner {
  width: 70%;
  height: 100%;
  background-image: url("/static/images/banner_repex.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Estilos para o conteúdo central */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* Isso garantirá que o conteúdo ocupe toda a altura disponível dentro da .banner */
}


.center-image {
  align-self: center;
}

.center-text {
  text-align: center;
  /* Ajuste conforme necessário */
}

/* Estilo para a imagem de copyright */
.copyright-image {
  align-self: center;
  margin-bottom: 20px;  /* Ou qualquer valor que preferir */
}


/* Estilos do Container de Login */
.login-container {
  width: 30%;
  height: 100%;
  background-color: #ffffff;
  padding: 50px;
  overflow-y: auto;
  display: flex; /* Habilita Flexbox */
  flex-direction: column; /* Organiza os filhos em uma coluna */
  justify-content: center; /* Centraliza os filhos verticalmente */
}

/* Estilos da Mensagem de Login */
.login-box-msg {
  font-size: 24px;
  color: #002d72;
  margin-bottom: 20px;
}

/* Estilos do Botão de Login */
.login-button {
  margin-top: 20px; /* Espaçamento entre o botão e a linha acima */
  min-width: 80px; /* Largura mínima para acomodar o texto */
  padding: 10px 20px; /* Padding para centralizar o texto */
  white-space: nowrap; /* Evita que o texto quebre em várias linhas */
}

/* Estilos dos Inputs Modernos */
.modern-input {
  border: none;
  border-bottom: 0.1px solid #a8a8a8;
  border-radius: 0;
  box-shadow: none;
  padding-right: 30px;
}

.modern-input:focus {
  border: none;
  border-bottom: 1px solid #002d72;
  border-radius: 0;
  box-shadow: none;
}

/* Estilos dos Labels */
.form-group label {
  color: #002d72;
  font-weight: bold;
}

/* Estilos do Grupo de Senha */
.password-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  cursor: pointer;
}

.toggle-password i {
  color: #424242;
  transition: transform 0.3s ease; /* Adiciona uma transição suave à propriedade transform */
  margin-top: 7px;
}

.password-group.has-error .toggle-password {
  transform: translateY(-25%);
  margin-top: 0px;
}

.toggle-password.eye-slash i {
  transform: rotate(180deg); /* Rotação de 180 graus quando a classe eye-slash é aplicada */
}

/* Estilos dos Botões Primários */
.btn-primary {
  background-color: #002d72;
  border-color: #002d72;
}

a {
  color: #002d72;
}

.btn-primary:hover {
  background-color: #0047b1;
  border-color: #0047b1;
}

/* Estilos do Checkbox */
.custom-checkbox .form-check-input {
  width: 15px;
  height: 15px;
  border-radius: 5px;
  margin-right: 5px;
}

.custom-checkbox .form-check-input:checked {
  background-color: #002d72; /* Cor de fundo quando marcado */
  border-color: #002d72; /* Cor da borda quando marcado */
}

/* Estilos do link Voltar para login */
.back-to-login {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1; /* para garantir que ele fique acima dos outros elementos */
  color: #424242;
  font-weight: bold; /* texto em negrito */
}

/* Espaçamento entre o ícone e o texto */
.back-to-login i {
  margin-right: 5px; /* adiciona um espaçamento à direita do ícone */
}

/* Estilo para o input quando há um erro */
.password-group.has-error .modern-input {
    border-bottom: 1px solid red;
}

/* Estilo para a mensagem de erro */
.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    align-items: center;
}

/* Estilo para o ícone de erro */
.error-message i {
    margin-right: 5px;
}


/* Estilos para Versão Mobile */
@media (max-width: 900px) {
  .banner {
    width: 100%; /* Ocupa toda a largura da tela */
    height: 30%; /* Reduz a altura */
  }

  .login-container {
    width: 100%; /* Ocupa toda a largura da tela */
    height: 70%; /* Ajusta a altura */
    padding: 20px; /* Reduz o padding */
  }

  .back-to-login {
    position: absolute;
    top: 50px;
    left: 20px;
    z-index: 1; /* para garantir que ele fique acima dos outros elementos */
  }

  body {
    flex-direction: column; /* Empilha os elementos verticalmente */
  }

  .login-button .recuperar-button {
    min-width: 60px; /* Reduz a largura mínima do botão */
  }
}