/* Reset CSS */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Body */
body {
  font-family: "Roboto", sans-serif;
  background-color: #fff;
}

/* Container */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100vw;
  min-height: 100vh; /* Mantém a altura da tela */
  overflow: hidden;
}

/* Login Container */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100vw; /* Ajusta para a largura total da tela */
  height: 100vh; /* Ajusta para a altura total da tela */
}

.background-container {
  width: 100%;
  height: 100vh;
  background-image: url("dist/login/images/wms-setor.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Form Container */
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80%;
  height: auto;
  align-self: stretch; /* Estende verticalmente */
}

/* Logo Container */
.logo-container {
  margin-top: 20px; /* Adicionado espaço superior */
  text-align: center;
  margin-bottom: 2rem; /* Adiciona espaçamento abaixo do logo */
}

.logo-mobiis-azul {
  width: 14.5rem;
}

/* Form */
.form {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Alterado para space-between para posicionar os elementos nos extremos */
  align-items: center;
  text-align: center;
  width: 333.66px;
  height: 625px;
  padding: 20px;
}

/* Input Group */
.input-group {
  position: relative;
  margin-bottom: 1.5rem;
  height: 52px;
  color: #969696;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.input-group .input-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  padding: 1rem 1rem 1rem 0rem;
  transform: translateY(-50%);
}

.input-group label {
  display: flex;
  margin-bottom: 5px;
  font-weight: bold;
}

.input-group input {
  width: inherit;
  max-width: 333.66px;
  height: 52px;
  padding: 0.625rem 2rem 0.625rem 3rem;
  border: 1px solid #969696;
}

input {
  border-radius: 0.5rem !important;
}

input:focus {
  border-color: #27348b;
  color: #27348b;
}

.input-group input:hover {
  border: 1px solid #27348b;
}

.input-group input:focus {
  outline: none;
}

.input-group input.error {
  border-color: red; /* Altera a cor da borda do input quando há erro */
}

.input-group.error .input-icon img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%)
    hue-rotate(330deg); /* Altera a cor do ícone quando há erro */
}

.input-icon {
  padding-left: 2rem;
}

/* Error Icon */
.error-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  padding-left: 1rem;
  transform: translateY(-50%);
  color: red;
}

/* Error Message */
.error-message {
  color: red;
  font-size: 14px;
  margin-top: 5px;
  margin-left: 20px; /* Adiciona um espaçamento à esquerda para coincidir com o ícone */
  position: absolute;
  bottom: -42px;
  left: -0.1rem;
}

/* Button */
.btn {
  width: 333.66px;
  height: 56px;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 100px;
  background: #374ac2 !important;
  color: #fff;
}

.btn:hover {
  background: #27348b !important;
}

.logo-mobiis-cinza {
  width: 5rem;
}

/* Footer */
.footer {
  margin-top: 20px;
  font-size: 14px;
  color: #6c757d;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .background-container {
    display: none; /* Oculta o background em telas menores */
  }
  .form-container {
    width: 90%; /* Ocupa 90% da largura da tela em telas menores */
    /* margin-top: 2rem; */
  }
  .form {
    width: 100%; /* Define a largura do formulário como 100% */
  }
  .input-group input,
  .btn {
    width: 100%; /* Define a largura dos inputs e botões como 100% */
    max-width: none; /* Remove a largura máxima para ocupar toda a largura disponível */
  }
  .input-group .input-icon {
    left: 8px; /* Ajusta o posicionamento do ícone */
  }
  .error-message {
    left: 0; /* Ajusta o posicionamento da mensagem de erro */
  }
}

/* Para telas de alta resolução (HD) */
@media screen and (min-resolution: 192dpi) {
  body {
    font-size: 16px; /* Tamanho base da fonte */
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

/* Teste em Dispositivos Reais */
@media screen and (max-width: 400px) {
  .logo-mobiis-azul {
    width: 13rem;
  }
  /*.input-group input
  .btn 
  
    padding: 0.8rem 1.2rem; 
    height: 40px;
  }*/

  .error-message {
    font-size: 10px;
    bottom: -30px;
  }
}