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


/* Estilos para centralizar o formulário */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #e8f3eb;
}
.text-login{
  font-size: 1rem;
  line-height: 1rem;
  color: #7393b5;
  margin-bottom: 3rem;

}
/* Estilos para o formulário de login */
.layout{
  box-shadow: 15px 29px 38px -28px rgba(0,0,0,0.2),0px 10px 15px -3px rgba(0,0,0,0.1);
  transition: all 300ms ease;
}
.login-form {
width: 600px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
text-align: center;
}

/* Estilos para o ícone no topo */
.login-icon {
    display: block;
    margin: 0 auto 10px;
    width: 160px;
    height: 80px;
    background-image: url(https://gestaoparts.com.br/wp-content/uploads/2024/11/gestao-parts-logo-verde.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-top: 4rem;
}

/* Estilos para os rótulos */
label {
display: block;
margin-top: 10px;
margin-bottom: 10px;
text-align: left;
line-height: 1rem;
font-weight: regular;
}

/* Estilos para os campos de entrada */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 4rem;
box-sizing: border-box;
}

/* Estilos para o botão de envio */
button {
background-color: #18ba60; 
color: white;
font-size: 1rem;
padding: 10px 35px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 400ms ease;
}
button:hover{
  filter: brightness(0.8);
  border-bottom: inset;
  border-bottom: 3px solid #ccc; 
}

/* Estilos para o checkbox */
.footer-form{
display: flex;
gap: .5rem;
align-items: center;
justify-content: end;

}
.footer-form a{
  margin-left: 4rem;
  text-decoration: none;
  color: #000;
  transition: all 400ms ease;
}
.footer-form a:hover{
  color: rgb(107, 118, 129);
}

/* Estilos para mensagens de erro */
.error-message {
color: red;
font-size: 14px;
text-align: left;
margin-bottom: 10px;
margin-top: 15px;
text-align: center;
}
.error-message-login{
color: red;
font-size: 1rem;
}
.lds-ring {
display: none;
position: relative;
width: 35px;
height: 22px;

}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 20px;
height: 20px;
margin: 8px;
border: 3px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
  transform: rotate(0deg);
}
100% {
  transform: rotate(360deg);
}
}