#main_soporte_default{
     height: auto;
     color: #fff;
     font-size: 20px;
}


.main__container__login__register{
     width: 100%;
     max-width: 800px;
     margin: auto;
     position: relative;
     height: auto;
     margin-top: 100px;
     margin-bottom: 100px;
 }
 
 .background__box{
     width: 100%;
     height: auto;
     padding: 0px 20px;
     display: flex;
     justify-content: center;
     backdrop-filter: blur(10px);
     background-color: rgba(3, 40, 67, 0.5);
     border-radius: 20px;
     text-align: center;
 }
 
 .background__box div{
     margin: 80px 40px;
     color: white;
     transition: all 500ms;
 }
 
 .background__box p,
 .background__box button{
     margin-top: 30px;
 }
 
 .background__box div h3{
     font-weight: 400;
     font-size: 26px;
 }
 
 .background__box button{
     padding: 10px 40px;
     border:  2px solid #fff;
     background: transparent;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     color: #fff;
     outline: none;
     transition: all 300ms;
     border-radius: 20px;
 }
 
 .background__box button:hover{
     background: #fff;
     color: #2f67f6;
 }
 
 /*forms*/

#register_btn, #login_btn{
    transition: all .5s;
}

.login__register__forms__btns{
    transition: .3s ease all;
}

.login__register__forms__btns:hover{
    background-color: #0056b3;
}
 
 .login__register__container{
     display: flex;
     align-items: center;
     width: 100%;
     max-width: 300px;
     position: relative;
     top: -190px;
     left: 10px;
     height: auto;
 
     transition: left 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
 }
 
 .login__register__container form{
     width: 100%;
     padding: 80px 20px;
     background: #fff;
     position: absolute;
     border-radius: 20px;
 }
 
 .login__register__container form h2{
     font-size: 30px;
     text-align: center;
     margin-bottom: 20px;
     color: #2F67F6;
 }
 
 .login__register__container form input{
     width: 100%;
     margin-top: 20px;
     padding: 10px;
     border: none;
     background: #F2F2F2;
     font-size: 16px;
     outline: none;
     border-radius: 20px;
 }
 
 .login__register__container form button{
     padding: 10px 40px;
     margin-top: 40px;
     border: none;
     font-size: 14px;
     background: #2F67F6;
     color: #fff;
     cursor: pointer;
     outline: none;
     border-radius: 20px;
 }
 
 .login__form{
     opacity: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }
 
 .register__form{
     display: none;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 .register__form span{
     color: #c43333;
     font-size: 15px;
 }


 #loginForm_warnings{
    color: #c43333;
    font-size: 15px;
    margin-top: 10px;
 }

 .mobile__forms{
    display: none;
 }
 
 /* responsive */
 
 @media screen and (max-width: 900px){

 
     .background__box{
         max-width: 350px;
         height: 300px;
         flex-direction: column;
         margin: auto;
     }
     .background__box div{
         margin: 0px;
         position: absolute;
     }
 
     /*responsive form*/

     .mobile__forms{
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        text-align: center;
        gap: 30px;
        align-items: center;
     }

     .mobile__forms form{
        backdrop-filter: blur(3px);
     background-color: rgba(3, 40, 67, 0.3);
     border-radius: 20px;
     padding: 0.5em;
     gap: 15px;
     display: flex;
     flex-direction: column;
     padding: 0.5em;
    width: 100%;
    height: 100%;
    align-items: center;
     }

     .mobile__forms form input{
        width: 90%;
        background-color: #ccc;
        color: #333;
        border: none;
        border-radius: 20px;
        padding: 8px;
     }

     .mobile__forms form .register__optionalField{
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        width: 100%;
        align-items: center;
     }
     .mobile__forms form .register__optionalField input{
        width: 90%;
     }

     .mobile__forms form button{
        padding: 10px 40px;
     border: none;
     font-size: 14px;
     background: #2F67F6;
     color: #fff;
     cursor: pointer;
     outline: none;
     border-radius: 20px;
     }



     .main__container__login__register{
        width: 100%;
        max-width: 800px;
        margin: auto;
        position: relative;
        height: auto;
        display: none;
    }
 
     .login__register__container{
         top: -10px;
         left: -5px;
         margin: auto;
     }
     .login__register__container form{
         position: relative;
     }

     /* Clase CSS para la animación de aparición */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Clase CSS para la animación de desaparición */
.fade-out {
    opacity: 1;
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}
 
 }