@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box !important; font-family:'Play', sans-serif;}
html{margin:0; padding:0; height:100%}
body.login{color: #444; margin:0; display:flex; flex-direction:column;justify-content:center; align-items: center; height:100%;background: url('../assets/img/bg_parallax_2.jpg') center center no-repeat; background-size: cover;}
#frm_login{position:relative; z-index:999;}
.login_container{position:relative; z-index:999; box-shadow:0 0 15px; width:300px; display:flex; flex-direction:column;align-items: center; gap:10px; padding:15px;background:#FAFAFA; border-radius:15px;}
.logo_only img{height:100px;}
.app_name{font-size:26px; font-weight:bold;text-align:center}
.full_app_name{text-align:center; font-size:10px; color:#AAA;}
.frm_title{color:#666; text-align:center;}
.frm_main{display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; }
.loader-container{display:flex; flex-direction:column; justify-content:center; align-items:center;}
.loader{transform:scale(0.5);}
.t-white{color:white;}
.t-blue{color: #2e61f0FF;}
.t-bold{font-weight:bold;}

/*Inputs*/
.input_login{border:none; border-bottom: 1px solid #999; width:100%; padding:10px; padding-left:40px; margin:10px auto;color:#111;}
.input_login:focus {outline:0;}
.i-user{background: url('../assets/img/icon-usuario.png') no-repeat 10px center;background-size:24px 24px; background-color: transparent;}
.i-pass{background: url('../assets/img/icon-password.png') no-repeat 10px center;background-size:24px 24px; background-color: transparent;}
.input_login::placeholder{color:#999;}
.input_login:read-only{background:transparent; border-bottom:1px solid #7f7f7f; color:#7f7f7f;}

/*Boton login*/
.icono-key{background: url('../assets/img/icon-key.svg') no-repeat center center}
.boton_login{background-color: #df812e; color:white; font-weight:bold; margin-top:10px; border:none;  width:100%; height:35px; transition: background-color 0.8s,background-position 0.5s; transition-timing-function:ease}
.inv-texto{opacity:0; transition: opacity ease 0.5s;}
.boton_login:hover{background-color:#ff9a41 ; background-position:50px ; box-shadow:0 0 5px rgba(0,0,0,.5); transition: background-color 0.8s,background-position 0.5s; transition-timing-function:ease}
.boton_login:hover .inv-texto{opacity:1;transition: opacity ease 0.5s;}

.error_tab{background:#990000FF; box-shadow:0 0 10px #000; border-radius: 0 0 15px 15px; padding:15px; bottom:10px; color:white; position:absolute; z-index:0; width: 90%;left: 5%; text-align: center;}

.creado{text-align:right; position:absolute; right:0; bottom: 20px; border-radius: 15px 0 0 15px; padding:10px 15px; background:rgba(0,0,0,0.6); box-shadow:0 0 10px; color:#666; font-size:10px; text-decoration:none;}
.creado a{text-decoration:none;}
.hidden{display:none;}


/*Animacion de exito*/
.success-animation { margin:20px auto;}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4bb71b;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4bb71b;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position:relative;
    top: 5px;
    right: 5px;
   margin: 0 auto;
}
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4bb71b;
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}