html {
   height: 100%;
}

body {
   min-height: 100vh;
   height: 100%;
   background-color: #FFFFFF;
   display: initial;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
   border: 1px solid #DDDDDD;
   -webkit-text-fill-color: #707070;
   -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
   transition: background-color 5000s ease-in-out 0s;
   -webkit-animation: background-color 5000s ease-in-out 0s;
}



/* CONTEÚDO DO FORMULÁRIO DE LOGIN */
/* CONTEÚDO DO FORMULÁRIO DE LOGIN */
form {
   position: relative;
   width: max-content;
   max-width: 450px;
   text-align: right;
}

/* TITULO */
form h1 {
   margin-bottom: 60px;
   color: var(--color-main);
   text-align: left;
   font-weight: 600;
   font-size: 34px;
   line-height: 46px;
}

/* INPUTS */
form .form-group-2 {
   margin: 0px;
}
form .form-group-2 label {
   margin-bottom: 10px;
   color: #545454;
   font-weight: normal;
   font-size: 18px;
   line-height: 24px;
   text-align: left;
}

form .form-group-2 input {
   padding: 16px 30px 13px;
   border: 1px solid #D3D3D3;
   border-radius: 35px;
   background: #FFFFFF 0% 0% no-repeat padding-box;
   color: var(--color-main);
   font-weight: normal;
   font-size: 16px;
   line-height: 26px;
}
form .form-group-2 input#senha {
   padding-right: 55px;
}
form .form-group-2 input::placeholder {
   color: #AAAAAA;
   font-weight: inherit;
   font-size: inherit;
   line-height: inherit;
}
/* BOTÃO PARA MOSTRAR/ESCONDER A SENHA */
form .form-group-2 .toggle-password {
   position: absolute;
   right: 20px;
   bottom: 9px;
   color: var(--color-main);
   z-index: 1;
   transform-origin: bottom left;
   transition: all 0.3s ease;
   -webkit-animation: all 0.3s ease;
}
form .form-group-2 .toggle-password .icon_eye {
   opacity: 1;
   pointer-events: all;
   cursor: pointer;
   transition: all 0.3s ease;
   -webkit-animation: all 0.3s ease;
}
form .form-group-2 .toggle-password.visible .icon_eye {
   opacity: 0;
   pointer-events: none;
}

form .form-group-2 .toggle-password .icon_eye_off {
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0;
   pointer-events: none;
   cursor: pointer;
   transition: all 0.3s ease;
   -webkit-animation: all 0.3s ease;
}
form .form-group-2 .toggle-password.visible .icon_eye_off {
   opacity: 1;
   pointer-events: all;
}

/* BOTÃO ESQUCI MINHA SENHA */
form a {
   margin-top: 5px;
   color: var(--color-main);
   font-weight: 600;
   font-size: 16px;
   line-height: 27px;
   text-align: right;
   text-decoration: underline;
   transition: color 0.2s ease;
   -webkit-animation: color 0.2s ease;
}

/* BOTÃO DE ENVIAR FORMULÁRIO */
form button[type="submit"] {
   position: relative;
   width: 100%;
   padding: 20px 30px 18px;
   margin-top: 60px;
   border-radius: 30px;
   border-color: var(--color-main);
   background-color: var(--color-main);
   color: #FFFFFF;
   font-weight: 600;
   font-size: 20px;
   line-height: 27px;
   text-align: center;
}
form button[type="submit"]:hover {
   background-color: var(--color-main-dark);
}



/* IMAGEM AO LADO DO FORMULÁRIO DE LOGIN */
/* IMAGEM AO LADO DO FORMULÁRIO DE LOGIN */
.image-login {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: left;
}




@media (max-width: 500px) {
   body {
      overflow: auto;
   }


   form {
      width: 100%;
      padding: 60px 30px;
   }
   form h1 {
      margin-bottom: 80px;
      font-size: 30px;
      line-height: 40px;
   }

   form .form-group-2 label {
      font-size: 16px;
      line-height: 20px;
   }
   form .form-group-2 input {
      padding: 14px 20px 12px;
      font-size: 15px;
      line-height: 22px;
   }

   form .form-group-2 .toggle-password {
      bottom: 7px;
   }

   form .form-group-2 .toggle-password svg {
      width: 22px;
      height: 22px;
   }
   
   form a {
      font-size: 14px;
      line-height: 22px;
   }
   form button[type="submit"] {
      font-size: 18px;
      line-height: 22px;
   }
}
@media (max-width: 350px) {
   form {
      padding: 60px 20px;
   }

   form .form-group-2 label {
      font-size: 15px;
      line-height: 18px;
   }
   form .form-group-2 input {
      padding-left: 20px;
      font-size: 14px;
      line-height: 20px;
   }
   form .form-group-2 input#senha {
      padding-right: 45px;
   }

   form .form-group-2 .toggle-password {
      right: 16px;
      bottom: 7px;
   }

   form .form-group-2 .toggle-password svg {
      width: 20px;
      height: 20px;
   }
   form a {
      font-size: 12px;
      line-height: 18px;
   }
   form button[type="submit"] {
      padding: 17px 30px 16px;
      font-size: 16px;
      line-height: 20px;
   }
}