@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    * {
        margin: 0; padding: 0; outline: none; list-style: none; text-decoration: none; }

    @media only screen and (min-width: 801px) and (max-width: 2160px){  
    body{
        background: #F8F8FF; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }    

    .container{
        width: 1000px; height: 100vh; display: flex; justify-content: center; align-items: center; }

    .logo-off {
        position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 100px; height: 70px; background-color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }

    .logo-off img {
        max-width: 100%; max-height: 100%; }    

    .BoxCenterLoggedOutLogin, .BoxCenterLoggedOutRecoverPassword{
        width: 400px; background: #ffffff; border-radius: 5px; box-shadow: 5px 5px 20px #DCDCDC; position: fixed; }    

    .form-header {
        margin: 1.5rem 1.5rem 0 1.5rem; display: flex; justify-content: space-between; }

    .form-header h1::after {
        content: ''; display: block; width: 70px; height: 0.3rem; background-color: #9370DB; margin: 0 auto; position: absolute; border-radius: 10px; }

    .title {
        font: 300 14px Montserrat; color: #000000; }

    .input-group {
        display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2rem; }

    #alerta-login, #alerta-Recover{
        display: none; width: 100%; }

    .box-alert-invalid{
        background-color: #FFC0CB; width: 100%; border: 1px solid #DB7093; text-align: center; font: 500 14px Montserrat; color: #8B0000; margin: -10px 0 15px 0; padding: 10px 0 10px 0; border-radius: 2px; cursor: pointer; }

    .box-alert-valid{
        background-color: #40E0D0; width: 100%; border: 1px solid #008B8B; text-align: center; font: 500 14px Montserrat; color: #2F4F4F; margin: -10px 0 15px 0; padding: 10px 0 10px 0; border-radius: 2px; cursor: pointer; }

    i.fa-times{
        font-size: 15px; }    

    .input-box{
        display: flex; flex-direction: column; margin-bottom: 15px; width: 100%; position: relative; }

    .input-box input{
        margin: 0.2rem 0; font: 600 14px Montserrat; padding: 0.8rem 0.6rem; outline: 1px solid #DCDCDC; border: none; border-radius: 2px; padding-left: 30px; }
    
    .input-box input::placeholder{
        color: #000000; font: 400 14px Montserrat; }

    .input-box label i{
        position: absolute; left: 5px; top: 50%; transform: translateY(-50%); margin-right: 5px; background: linear-gradient(#9370DB, #4B0082); -webkit-background-clip: text; color: transparent; }    
    
    .Recover-Password-button {
        font: 500 12px Montserrat; color: #000000; text-align: right; width: 100%; margin: -0.5rem 0 -1rem 0; cursor: pointer; }
    
    .page-button {
        display: flex; align-items: center; }

    .page-button button {
        border: none; background-color: #9370DB; padding: 0.4rem 1rem; border-radius: 5px; cursor: pointer; color: #ffffff; font: 300 14px Montserrat; }

    .page-button button:hover {
            background-color: #4B0082; }

    .Action-Button input[type=submit] {
        width: 90%; margin: -10px 5% 1.5rem 5%; border: none; background-color: #9370DB; padding: 0.62rem; border-radius: 5px; cursor: pointer; font: 500 14px Montserrat; color: #ffffff; }

    .Action-Button input[type=submit]:hover{
        background-color: #4B0082; }

    }    

    @media only screen and (min-width: 1px) and (max-width: 800px){
   
    body{
        background: #F8F8FF; width: 100vw; height: auto; justify-content: center; align-items: center; display: flex; }  

    .logo-off {
        margin-top: 0vw; width: 25vw; height: 17.5vw; background-color: transparent; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; }

    .logo-off img {
        max-width: 100%; max-height: 100%; }  

    .BoxCenterLoggedOutLogin, .BoxCenterLoggedOutRecoverPassword{
        width: 90vw; margin: 0 5vw 0 5vw; background: #ffffff; border-radius: 5px; box-shadow: 5px 5px 20px #DCDCDC; }

    .form-header{
        margin: 1.5rem 1.5rem 0 1.5rem; display: flex; justify-content: space-between; }

    .form-header h1::after{
        content: ''; display: block; width: 15vw; height: 0.3rem; background-color: #9370DB; margin: 0 auto; position: absolute; border-radius: 10px; }    

    .title{
        margin: 1.5rem 0 0 0; font: 300 2.8vw Montserrat; color: #000000; }

    .page-button{
        display: flex; align-items: center; }

    .page-button button{
        border: none; background-color: #9370DB; padding: 0.4rem 1rem; border-radius: 5px; cursor: pointer; color: #ffffff; font: 300 4vw Montserrat; margin: 1.5rem 0 0 0; }
    
    .input-group{
        display: flex; flex-wrap: wrap; justify-content: space-between; padding: 1.5rem; }  
    
    .input-box{
        display: flex; flex-direction: column; margin-bottom: 1vh; width: 100%; position: relative; }

    .input-box input{
        margin: 0.2rem 0; font: 600 4vw Montserrat; padding: 0.8rem 0.6rem; outline: 1px solid #DCDCDC; border: none; border-radius: 2px; padding-left: 7vw; }

    .input-box input::placeholder{
        color: #000000; font: 400 4vw Montserrat; }

    .input-box label i{
        position: absolute; left: 1.5vw; top: 50%; transform: translateY(-50%); margin-right: 1.5vw; background: linear-gradient(#9370DB, #4B0082); -webkit-background-clip: text; color: transparent; }

    .Action-Button input[type=submit]{
        width: 90%; margin: 0 5% 1.5rem 5%; border: none; background-color: #9370DB; padding: 0.62rem; border-radius: 5px; cursor: pointer; font: 500 4vw Montserrat; color: #ffffff; }
    
    .Recover-Password-button {
        font: 500 3.5vw Montserrat; color: #000000; text-align: right; width: 100%; margin: 0.3rem 0 0.3rem 0; cursor: pointer; }
    
    #alerta-login, #alerta-Recover{
        display: none; width: 100%; }

    .box-alert-invalid{
        background-color: #FFC0CB; width: 100%; border: 1px solid #DB7093; text-align: center; font: 500 3vw Montserrat; color: #8B0000; margin: -1vw 0 2vw 0; padding: 2.5vw 0 2.5vw 0; border-radius: 2px; cursor: pointer; }

    .box-alert-valid{
        background-color: #40E0D0; width: 100%; border: 1px solid #008B8B; text-align: center; font: 500 3vw Montserrat; color: #2F4F4F; margin: -1vw 0 2vw 0; padding: 2.5vw 0 2.5vw 0; border-radius: 2px; cursor: pointer; }

    i.fa-times{
        font-size: 3vw; }    

    }