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

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Rubik', sans-serif;
}
h3 {
    font-size: 20px;
    font-weight: 500;
}
.login, .forgot-password, .validacion {
    background-color: #26292E;
    display: flex;
    align-items: center;
    min-height: 100vh;
}
.login form, .forgot-password form {
    background-color: #fff;
    min-height: 23rem;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
border-radius: 14px;
}
.validacion form {
    background-color: #fff;
    min-height: 26rem;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
border-radius: 14px;
}
.login form h3, .forgot-password form h3, .validacion form h3 {
    margin: auto;
    margin-bottom: 30px;
}
.login .logo, .forgot-password .logo, .validacion .logo {
    width: 200px;
    margin: 0 auto 30px;
}
.login .content-form, .forgot-password .content-form, .validacion .content-form {
    margin: auto;
    width: 90%;
}
/* .login .form-group {
    margin-bottom: 16px;
} */
/* .login label {
    font-family: 'Rubik' , sans-serif;
    font-weight: 300;
    font-size: 16px;
} */

.input-field {
    position: relative;
    margin-bottom: 24px;
}
.input-field input {
    width: 100%;
    height: 50px;
    border-radius: 6px;
    font-size: 16px;
    padding: 0 15px;
    border: 2px solid rgba(38, 41, 46, .3);
    background: transparent;
    color: #26292E;
    outline: none;
    transition: all .5s ease-in-out;
}
.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #26292E;
    font-size: 16px;
    pointer-events: none;
    transition: 0.3s;
}
input:focus {
    border: 2px solid #26292E;
}
input:focus~label,
input:valid~label {
    top: 0;
    left: 15px;
    font-size: 16px;
    padding: 0 4px;
    background: #ffffff;
}

/* .login .form-group {
    position: relative;
    height: 80px;
    line-height: 80px;
}
.login .form-group input {
    width: 100%;
    position: absolute;
    width: 100%;
    outline: none;
    font-size: 2.2em;
    padding: 0 30px;
    line-height: 80px;
    border-radius: 10px;
    border: 2px solid #f0ffff;
    background: transparent;
    transition: all 0.1s ease;
    z-index: 111;
}
.labelline {
    position: absolute;
    font-size: 1.5em;
    color: #C32429;
    margin: 0 20px;
    padding: 0 25px;
    background-color: aqua;
    transition: 0.2s ease;
}
.login .form-group  input:focus, .login .form-group  input:valid {
    color: bisque;
    border: 4px solid bisque;
}
.login .form-group  input:focus + .labelline, .login .form-group  input:valid + .labelline {
    color: bisque;
    height: 30px;
    line-height: 30px;
    transform: translate(-15px, -16px) scale(0.88);
    z-index: 1111;
} */

.btn-enviar {
    background-color: transparent;
    border-radius: 8px;
    border: 1px solid #C32429;
    transition:  all .5s ease-in-out;
    color: #26292E;
    margin-top: 10px;
    padding: 4px 12px;
    width: 100%;
    font-size: 14px;
    height: 40px;
}
.btn-enviar:hover {
    background-color: #C32429;
    border-radius: 50px;
    color: #fff;
}
.btn-text {
    color: #26292E;
    border: none;
    background-color: white;
    font-size: 12px;
    margin-top: 16px;
    display: flex;
    transition: all 0.3s ease-in-out;
}

.d-flex > .btn-text:hover {
    color: #C32429;
}
.btn-reenviar {
    background-color: transparent;
    height: 40px;
    border-radius: 8px;
    border: 1px solid rgba(38, 41, 46, .4);
    transition:  all .5s ease-in-out;
    color: rgba(38, 41, 46, .4);
    margin-top: 10px;
    padding: 4px 12px;
    width: 100%;
    font-size: 14px;
}
.btn-reenviar:hover {
    background-color: #C32429;
    border-radius: 50px;
    color: #fff;
}


.back-img {
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.back-svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 1422 800'%3E%3Cstyle%3E svg g polygon %7B stroke-dasharray: 700; opacity: .6; stroke: %23ffffff; animation: appear 14s ease-in-out infinite; %7D @keyframes appear %7B 0%25 %7B stroke-dashoffset: 700; %7D 50%25 %7B stroke-dashoffset: 0; %7D 100%25 %7B stroke-dashoffset: 700; %7D %7D %3C/style%3E%3Cg width='100%25' height='100%25' shape-rendering='crispEdges' stroke-linejoin='round' fill='none' stroke-width='2.5' stroke='%23ffffff'%3E%3Cpolygon points='1422,0 1066.5,0 1066.5,200'%3E%3C/polygon%3E%3Cpolygon points='1066.5,0 1066.5,200 711,200'%3E%3C/polygon%3E%3Cpolygon points='888.75,300 1066.5,300 1066.5,200'%3E%3C/polygon%3E%3Cpolygon points='711,200 888.75,200 711,300'%3E%3C/polygon%3E%3Cpolygon points='711,300 888.75,400 711,400'%3E%3C/polygon%3E%3Cpolygon points='1066.5,300 888.75,400 1066.5,400'%3E%3C/polygon%3E%3Cpolygon points='1422,200 1244.25,200 1422,300'%3E%3C/polygon%3E%3Cpolygon points='1244.25,300 1244.25,200 1066.5,300'%3E%3C/polygon%3E%3Cpolygon points='1066.5,400 1066.5,300 1244.25,300'%3E%3C/polygon%3E%3Cpolygon points='1244.25,300 1422,400 1244.25,400'%3E%3C/polygon%3E%3Cpolygon points='711,100 533.25,0 533.25,100'%3E%3C/polygon%3E%3Cpolygon points='533.25,100 533.25,0 355.5,100'%3E%3C/polygon%3E%3Cpolygon points='533.25,100 533.25,200 355.5,200'%3E%3C/polygon%3E%3Cpolygon points='711,200 711,100 533.25,200'%3E%3C/polygon%3E%3Cpolygon points='355.5,0 355.5,200 0,200'%3E%3C/polygon%3E%3Cpolygon points='177.75,200 355.5,300 177.75,300'%3E%3C/polygon%3E%3Cpolygon points='177.75,200 0,200 0,300'%3E%3C/polygon%3E%3Cpolygon points='177.75,400 0,400 0,300'%3E%3C/polygon%3E%3Cpolygon points='355.5,400 355.5,300 177.75,300'%3E%3C/polygon%3E%3Cpolygon points='711,300 711,200 533.25,300'%3E%3C/polygon%3E%3Cpolygon points='355.5,200 533.25,300 533.25,200'%3E%3C/polygon%3E%3Cpolygon points='355.5,400 533.25,300 533.25,400'%3E%3C/polygon%3E%3Cpolygon points='533.25,400 533.25,300 711,400'%3E%3C/polygon%3E%3Cpolygon points='711,450 711,400 622.125,400'%3E%3C/polygon%3E%3Cpolygon points='533.25,450 622.125,400 533.25,400'%3E%3C/polygon%3E%3Cpolygon points='622.125,450 622.125,500 533.25,450'%3E%3C/polygon%3E%3Cpolygon points='711,450 711,500 622.125,450'%3E%3C/polygon%3E%3Cpolygon points='355.5,500 355.5,400 533.25,400'%3E%3C/polygon%3E%3Cpolygon points='533.25,500 533.25,600 355.5,600'%3E%3C/polygon%3E%3Cpolygon points='711,500 533.25,600 711,600'%3E%3C/polygon%3E%3Cpolygon points='177.75,400 355.5,500 177.75,500'%3E%3C/polygon%3E%3Cpolygon points='177.75,400 0,400 0,500'%3E%3C/polygon%3E%3Cpolygon points='177.75,600 177.75,500 0,500'%3E%3C/polygon%3E%3Cpolygon points='355.5,600 177.75,600 355.5,500'%3E%3C/polygon%3E%3Cpolygon points='0,600 355.5,800 0,800'%3E%3C/polygon%3E%3Cpolygon points='711,600 533.25,600 711,700'%3E%3C/polygon%3E%3Cpolygon points='533.25,600 355.5,700 533.25,700'%3E%3C/polygon%3E%3Cpolygon points='355.5,700 533.25,800 355.5,800'%3E%3C/polygon%3E%3Cpolygon points='533.25,800 533.25,700 711,700'%3E%3C/polygon%3E%3Cpolygon points='1422,500 1244.25,400 1422,400'%3E%3C/polygon%3E%3Cpolygon points='1244.25,500 1066.5,500 1244.25,400'%3E%3C/polygon%3E%3Cpolygon points='1244.25,600 1244.25,500 1066.5,500'%3E%3C/polygon%3E%3Cpolygon points='1422,500 1244.25,500 1422,600'%3E%3C/polygon%3E%3Cpolygon points='888.75,400 1066.5,500 1066.5,400'%3E%3C/polygon%3E%3Cpolygon points='888.75,500 888.75,400 711,400'%3E%3C/polygon%3E%3Cpolygon points='888.75,600 711,500 888.75,500'%3E%3C/polygon%3E%3Cpolygon points='888.75,600 1066.5,500 888.75,500'%3E%3C/polygon%3E%3Cpolygon points='1066.5,700 1066.5,600 888.75,700'%3E%3C/polygon%3E%3Cpolygon points='888.75,600 888.75,700 711,700'%3E%3C/polygon%3E%3Cpolygon points='711,700 888.75,800 711,800'%3E%3C/polygon%3E%3Cpolygon points='1066.5,700 1066.5,800 888.75,800'%3E%3C/polygon%3E%3Cpolygon points='1422,600 1066.5,800 1422,800'%3E%3C/polygon%3E%3C/g%3E%3Cg fill='hsl(220, 62%25, 45%25)' stroke-width='3' stroke='hsl(220, 43%25, 13%25)'%3E%3C/g%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    opacity: .2;
    background-size: cover;
}