@font-face {
    font-family: 'quicksand'; /*a name to be used later*/
    src: url(fonts/static/Quicksand-Regular.ttf); /*URL to font*/
}
:root{
    --azul: #134074;
    --azul_oscuro: #0B2545;
    --azul_gris: #8DA9C4;
    --blanco: #fff;
    --fuente: 'quicksand',sans-serif;
}
*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'quicksand', sans-serif;
}
.main{
    background-image: url(login-img/b18c377b-05fd-490c-bdd4-955a5360747b.jpg);
    background-color: #0B2545;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.banner_error{display: none;position: fixed;top: 0;left: 0;justify-content: center;align-items: center;width: 100%;height: 55px;font-size: 20px;background-color: red;color: white;}
.row{display: flex;align-items: center;gap: 10px;width: 100%;position: relative;background-color: var(--fondo);border-radius: 5px;padding: 0 20px;}
.row-titulo{position: absolute; top: 15px;padding: 0 20px;}
.row-usuario{position: absolute; top: 175px;padding: 0 20px;}
.row-clave{position: absolute;top: 280px;padding: 0 20px;}
.row-acceso{position: absolute;top: 395px;padding: 0 20px;}
.row-recovery{position: absolute;top: 455px;padding: 0 20px;}
/*RECOVERY*/
.row-titulo-rec{position: absolute; top: 15px;}
.row-usuario-rec{position: absolute; top: 175px;}
.row-acceso-rec{position: absolute;top: 395px;}
.row-back-rec{position: absolute;top: 455px;}
.text-subtitulo{position: absolute;top: 95px;width: 100%;color: #ffffff;margin-left: 40px;}
/*NEW PASSWORD*/
.row-nclave-titulo{position: absolute; top: 15px;}
.row-nclave1{position: absolute; top: 175px;}
.row-nclave2{position: absolute;top: 280px;}
.row-nclave-save{position: absolute;top: 395px;}
.row-nclave-aviso{position: absolute;top: 150px;}
.row-nclave-enlace{position: absolute;top: 380px;}
.row-nclave-back{position: absolute;top: 475;}
.up{text-transform: uppercase;}
.s{font-size: 14px;color: var(--text-color);border: none;padding: 8px;border-radius: 25px;outline: none;width: 200px;}
.t{font-size: 17px;color: var(--text-color);border: none;padding: 5px;width: 100%;height: 35px;margin-inline-end: 35px;outline: none;border-bottom: 1px solid var(--navbar);background: #fff;border-radius: 7px;padding: 5px 8px;}
.l{font-size: 16px;color: var(--label_color);font-size: 20px;color: var(--blanco);border-radius: 5px;padding: 3px;}
.ta{resize: none;min-height: 100px;}
.bt{padding: 10px;background-color: var(--azul);color: #fff;border: none;border-radius: 5px;cursor: pointer;font-weight: bold;font-size: 17px;width: 100%;height: 45%;}
.bt{transition: background-color .1s ease-in-out;}
.bt:hover{cursor: pointer;background-color: var(--azul_oscuro);}
.bt:active{transform: scale(.98);}
.column{position: relative;display: flex;flex-direction: column;flex: 1;padding: 5px;gap: 5px;}
.main{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: var(--azul_oscuro);}
.copy{font-size: 19px;}
.panel-login{position:relative;height: 520px;border-radius: 10px;display: flex;justify-content: flex-end;background-color: rgb(57, 130, 173, 0.2);box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4); border-radius: 16px;backdrop-filter: blur(5px);border: 1px solid rgba(57, 130, 173, 0.07);}
.row h1{display: flex;gap: 5px;justify-content: center;font-size: 55px;height: 55px;color: var(--blanco);margin-top: 15px;}
.bnv{width: 100%;height: 30px;color: var(--blanco);text-align: center;margin-top: 15px;}
.image-box img{width: 100%;height: 100%;object-fit: cover;}
.login-box{display: flex;flex-direction: column;align-items: center;width: 350px;height: 500px;}
.adv{font-size: 19px;width: 100%;color: white;padding-top: 25px;}
.div_button{width: 100%;}
.column a{text-decoration: none;color: var(--blanco);font-size: 14px;cursor: pointer;}
.paraula{position: relative;}
.eye_p{position: relative;}
.eye{position: absolute;top: 47px;right: 10px;width: 25px;height: 25px;background-color: white;cursor: pointer;}
@media(max-width:900px){
    .panel-login{flex-direction: column;}
    .login-box{min-width: 100%;padding: 20px;}
    .row h1{margin-top: 50px;}
    .bnv{font-size: 23px;}
}
@media(max-width:568px){
    .panel-login{width: 90%;}
    .login-box{width: 100%;height: 100%;justify-content: center;}
    .row h1{margin-top: 40px;margin-bottom: 0;}
    .bnv{font-size: 22px;}
    .t{height: 50px;font-size: 23px;}
    .bt{height: 50px;font-size: 23px;}
    .eye{top: 49px;right: 10px;width: 35px;height: 35px;cursor: pointer;}
    .column a{font-size: 20px;}
}