body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
 }   
 html {
    background: url('../login/background-login1.jpg') no-repeat center center fixed;
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
 }
 
 .div-img{
    width: 100%;
    text-align: center;
    margin-top: 80px;
 }
 
 img {
    height: 43px;
    width: 406px;
 }
 
 ::-webkit-input-placeholder { /* Edge */
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: .15em;
    text-align: center;
 }
 
 ::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: .15em;
    text-align: center;
 }
 
 ::placeholder {
    color: #FFFFFF;
    font-size: 15px;
    letter-spacing: .15em;
    text-align: center;
 }
 #btn_login, #btn_recuperar, #btn_cambiar_contraseña{
    border: none;
    width:100%;
    font-family: 'Bold', sans-serif;
    text-transform: uppercase;
    border-radius: 22.5px;
    cursor: pointer;
    color: #fff;
    background-size: 200%;
    transition: 0.2s;
    height: 45px;
    letter-spacing: .17em;
    background-image: linear-gradient(to left, #E8336E,#E8336E,#ff6699,#E8336E,#E8336E);
    outline:none;
 }
 #btn_login:hover , #btn_recuperar:hover, #btn_cambiar_contraseña:hover{
    background-position: right;
    /* letter-spacing: .47em; */
 }

 #btn_regresar_login{
   margin-bottom: 30px;
   font-family: 'Raleway', sans-serif;
   font-style: bold;
   font-size: 13px;
   color: rgb(85, 26, 139);

   text-decoration:none; 
   cursor: pointer;
 }
 
 .input{
    text-align:center;
    background: none;
    background-color: none;
    border: 0px;
    height: 100%;
    color: white;
    width: 250px;
    position: relative;
    outline: none;
    bottom: 1px;
    padding: 2px 15px 2px 2px;
    font-size: 15px;
    letter-spacing: .15em;
 }


 input:-webkit-autofill,
 input:-webkit-autofill:hover, 
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
 select:-webkit-autofill:hover,
 select:-webkit-autofill:focus {
   border: none;
   -webkit-text-fill-color: white;
   -webkit-box-shadow: 0 0 0 1000px transparent inset;
   transition: background-color 5000s ease-in-out 0s;
}
@keyframes autofill {
   100% {
       background: transparent;
       color: inherit;
   }
}

@-webkit-keyframes autofill {
   100% {
       background: transparent;
       color: inherit;
   }
}

 div.buscador {
    border: 1px solid #824680;
    border-radius: 9px;
    padding: 4px;
    height: 30px;
    margin-bottom: 20px;
    transition: 0.4s;
 }
 
 input.icono {
    width: 11px;
    border: 0px;
    position: relative;
    top:1px;
    margin-right: 7px;
    margin-left: 4px;
 }
 
 .div-formularios{
    width: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
 }
 #div-principal-form-login{
    position: relative;
    margin-top: 50px;
    height: 420.34px; /* 554  1/3 = 184.666*/ 
    width: 429.33px; /* 644 1/3 = 214.666 */
    background-image: url('../login/bg-login.png');
    background-color: transparent;
    border-radius:  17px;
 }
 
 #titulo-form {
   text-align: center; 
 }
 #titulo-form > img{
    margin: 15px 0px;
    display: none;
   width: 25px!important;
   height: 25px!important;
   
 }
 h4, p {
   text-align: center;
   width: 100%;
   font-family: 'Raleway', sans-serif;
   color: #FFF; /* #d63031*/ 
   background: none!important;
 }
 h4{
   font-size: 25px !important;
   font-weight: bold;
 }
 p{
   font-size: 16px !important;
   font-weight: 400;
 }
 #datos_incorrectos, #contraseñas_incorrectas{
   color: #d63031;
   font-weight: 600;
   display: none;

 }

 .login_recuperar_texto{
    margin-top: 15px;
 }
 #recuperar_password{
   justify-content: center;
   align-items: center;
   display: show;

 }

 #login_box{
    display: none;
 }

 #add_password{
   display: flex;
   justify-content: center;
   align-items: center;
   display: none;
 }

 
 #div-form-login{
    display: flex;
    justify-content: center;
    align-items: center;
 }
 
 .opciones{
    margin-bottom: 30px;
    font-family: 'Raleway', sans-serif;
    font-style: bold;
    font-size: 12px;
    color: rgb(85, 26, 139);
    display: flex;
 }
 .opciones > div > a{
    text-decoration:none; 
    transition: 0.2s;
 }
 /* .opciones > div > a:hover{
    font-size: 12.5px;
 } */
 
.recuperar_texto{
   width: 75%;
   text-align: center;
   padding: 0 55px;
   margin-bottom: 40px;
   font-size: 14px!important;
}

#res_restablecer{
   width: 75%;
    text-align: center;
    padding: 0 55px;
    margin-bottom: 40px;
    margin-top: 60px;
    font-size: 20px!important;
    display: none;

}
#res_restablecer_icono{
   width: 75%;
    text-align: center;
    padding: 0 55px;
    margin-bottom: 40px;
    font-size: 50px!important;
    display: none;

}

 .opciones > div > *{
    cursor: pointer;
 }
 
 .opciones > div:nth-child(1){
    width: 100%;
    text-align: right;
    margin-top: 5.5px;
 }
 
 #form-login > div:nth-child(2){
    margin-bottom: 12px;
 }
 
 #div-principal-form-restablecer{
    display: none;
 }