/***********LOGIN SISTEMA***************/
#body-login, html{
    min-height:100%;
}
#body-login{
    font-family: 'luzsans-bookluzsans-book';
    background-image:url('../images/img-login/back-login.jpg');
    font-size:16px;
    background-size:100% auto;
    overflow: hidden;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
#div-login{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width:100%;
}
.login-content .logo, .login-content .login{
    width:45%;
    float:left;
}
.login-content .logo{
    border-right: 1px solid #fff;
    text-align: right;
    padding-right: 35px;
}
.login{
    padding: 0 0 0 30px;
    text-align: left;
}
.avisov4{
    clear: both;
    width: 70%;
    text-align: justify;
    margin: 5px auto;
    padding: 5px 15px;
    background: #005d91c4;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-size: 12.5px;
    letter-spacing: .5px;
}
.avisov4 .tit-aviso{
    text-align: center;
    font-weight: bold;
    letter-spacing: 1.5px;
    background: #215671;
    padding: 5px;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
}
.avisov4 .resaltar{
    font-weight: bold;
    color: #fdfdfd;
    text-transform: uppercase;
    text-decoration: underline;
}
.formulario{
    width: 70%;
} 
.login .formulario input{
    background: #fff!important;
    border: 1px solid #5ec9f3;
    width: 85%;
    height: 35px;
    margin-bottom: 10px;
    padding-left: 5px;
    color: #27689d;
    font-size: 16px;
    -webkit-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    margin-left: -5px;
}
.login .formulario i{
    font-size: 25px;
    vertical-align: top;
    z-index: 9999;
    padding: 5px 5px;
    /*color: #2ba5d5;*/
    color: #718b95;
    background: #fff;
    height: 27px;
    -webkit-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
    border: 1px solid #5ec9f3;
        width: 20px;
}
.login .formulario input:focus i{
    color: #2ba5d5;
}
.login .formulario input:focus{
    outline:0px;
}
.login .formulario input:hover i{
    color:#11436b;
}

.login .btns .btn-aceptar, .login .btns .btn-cancelar{
    float: left;
    width: 45%;
    height: 45px;
    color: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size:16px;
}
.login .btns{
    margin: 0px auto;
}
.login .btn-aceptar{
    background: #6eac3d;
    background: -moz-linear-gradient(top, #6eac3d, #4e8819);
    background: linear-gradient(to bottom, #6eac3d, #4e8819);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6eac3d), to(#4e8819));
    border: 1px solid #55a010;
    margin-right: 10px;
}
.login .btn-cancelar{
    background: rgba(74,71,70,1);
    background: -moz-linear-gradient(top, rgba(74,71,70,1) 0%, rgba(66,66,66,1) 42%, rgba(54,54,54,1) 71%, rgba(46,46,46,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(74,71,70,1)), color-stop(42%, rgba(66,66,66,1)), color-stop(71%, rgba(54,54,54,1)), color-stop(100%, rgba(46,46,46,1)));
    background: -webkit-linear-gradient(top, rgba(74,71,70,1) 0%, rgba(66,66,66,1) 42%, rgba(54,54,54,1) 71%, rgba(46,46,46,1) 100%);
    background: -o-linear-gradient(top, rgba(74,71,70,1) 0%, rgba(66,66,66,1) 42%, rgba(54,54,54,1) 71%, rgba(46,46,46,1) 100%);
    background: -ms-linear-gradient(top, rgba(74,71,70,1) 0%, rgba(66,66,66,1) 42%, rgba(54,54,54,1) 71%, rgba(46,46,46,1) 100%);
    background: linear-gradient(to bottom, rgba(74,71,70,1) 0%, rgba(66,66,66,1) 42%, rgba(54,54,54,1) 71%, rgba(46,46,46,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4746', endColorstr='#2e2e2e', GradientType=0 );
    border: 1px solid #4a4746;    
}
.login .btn-aceptar:hover{
    background: #6ec121;
    background: -moz-linear-gradient(top, #6ec121, #4f9b0a);
    background: linear-gradient(to bottom, #6ec121, #4f9b0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6ec121), to(#4f9b0a));
}
.login .btn-cancelar:hover{
    background: rgba(77,77,77,1);
    background: -moz-linear-gradient(top, rgba(77,77,77,1) 0%, rgba(99,99,99,1) 40%, rgba(99,99,99,1) 63%, rgba(77,77,77,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(77,77,77,1)), color-stop(40%, rgba(99,99,99,1)), color-stop(63%, rgba(99,99,99,1)), color-stop(100%, rgba(77,77,77,1)));
    background: -webkit-linear-gradient(top, rgba(77,77,77,1) 0%, rgba(99,99,99,1) 40%, rgba(99,99,99,1) 63%, rgba(77,77,77,1) 100%);
    background: -o-linear-gradient(top, rgba(77,77,77,1) 0%, rgba(99,99,99,1) 40%, rgba(99,99,99,1) 63%, rgba(77,77,77,1) 100%);
    background: -ms-linear-gradient(top, rgba(77,77,77,1) 0%, rgba(99,99,99,1) 40%, rgba(99,99,99,1) 63%, rgba(77,77,77,1) 100%);
    background: linear-gradient(to bottom, rgba(77,77,77,1) 0%, rgba(99,99,99,1) 40%, rgba(99,99,99,1) 63%, rgba(77,77,77,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d4d4d', endColorstr='#4d4d4d', GradientType=0 );
}
.login-content .logo a{
    display: table;
    color: #114169;
    text-decoration: none;
    margin: 20px auto;
    font-family: Century Gothic;
    width:95%;
}
.login-content .logo a:hover{
    color:#fff;
}
.login-content .logo .fa-question{
    font-size: 12px;
    vertical-align: super;
}

.login ::-webkit-input-placeholder { color: #969696; } 
 
.login :-moz-placeholder { /* Firefox 18- */ color: #969696; } 
 
.login ::-moz-placeholder { /* Firefox 19+ */ color: #969696; } 
 
.login :-ms-input-placeholder { color: #969696; }

.cf-turnstile{
    width: 94%;
  text-align: center;
}
@media screen and (min-width:836px) and (max-width:949px){
    .formulario {
        width: 100%;
    }
}
@media screen and (max-width:836px) and (min-width:475px){
    .login-content .logo{
        text-align: center;
        padding-right: 0;    
    }
    .login-content .logo, .login-content .login {
        width: auto;
        float: none;    
    }
    .login{
        text-align:center;
        padding: 0 0 0 0;
    }
    .formulario {
        width: 100%;
    }
    .login .formulario input{
        width: 55%;
    }
    .login .btns .btn-aceptar, .login .btns .btn-cancelar{
        float: none;
        width: 30%;    
    }
    .login-content .logo a{
        color: #114169;
    }
    .login-content .logo a:hover{
        color: #4b861c;
    }
}
@media screen and (max-width:474px){
    .login-content .logo{
        text-align: center;
        padding-right: 0;    
    }
    .login-content .logo, .login-content .login {
        width: auto;
        float: none;    
    }
    .login{
        text-align:center;
        padding: 0 0 0 0;
    }
    .formulario {
        width: 100%;
    }
    .login-content .logo a{
        color: #114169;
    }
    .login-content .logo a:hover{
        color: #4b861c;
    }
    
    .login-content .logo img{ 
        width:100%;
    }
    .login .formulario input{
        width: 75%;
    }
     .login .btns .btn-aceptar, .login .btns .btn-cancelar{
        float: none;
        width: 40%;    
    }
}


/************LOGIN RPT_GERENCIAL******************/

#login_layer{
    
    width:100%;
    height:auto;
    min-height:100%;
    position:absolute;
    background: #044c8b;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #f3f3f3 49%, #f7fafc 51%, #ffffff 51%, #ffffff 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f0f0f0), color-stop(49%, #f3f3f3), color-stop(51%, #f7fafc), color-stop(51%, #ffffff), color-stop(100%, #ffffff));
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #f3f3f3 49%, #f7fafc 51%, #ffffff 51%, #ffffff 100%);
    background: -o-linear-gradient(top, #f0f0f0 0%, #f3f3f3 49%, #f7fafc 51%, #ffffff 51%, #ffffff 100%);
    background: -ms-linear-gradient(top, #f0f0f0 0%, #f3f3f3 49%, #f7fafc 51%, #ffffff 51%, #ffffff 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #f3f3f3 49%, #f7fafc 51%, #ffffff 51%, #ffffff 100%);
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#044c8b', endColorstr='#ffffff', GradientType=0 );    */
}  
.login-container{
    position:absolute;
    width:100%;
    height:100%;
    background:url('../images/img-login/img-back.png') repeat-x;
    background-position-y:50%;
    background-position:center;
}
#login_layer .logo{
    background:url('../images/img-login/login-logo.png') no-repeat center top;
    width:281px;height:93px;
    margin:0px auto 5px;
}
#login_layer .logotsieven{
    background:url('../images/img-login/logo_tsieven.png') no-repeat center top;
    width:281px;height:93px;
    margin:0px auto 5px;
}
#login_layer .frm-container{
    
    width:488px;
    height:340px;
    margin:0 auto;
    background:#f5f5f5;
    background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
    background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
    background: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#f5f5f5), to(#e5e5e5));
    border:1px solid #bdbdbd;
    
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.2); 
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2); 
    /*---- acomodamos a que quede a la mitad ----*/
    position:relative;
    margin-top:10%;

}
.frm-container .login-foot{
    width:100%;
    height:75px;
    margin:0 auto;
    
    background:#166ba2;
    background: -moz-linear-gradient(top, #166ba2, #063f61);
    background: linear-gradient(to bottom, #166ba2, #063f61);
    background: -webkit-gradient(linear, 0% 50%, 60% 40%, from(#166ba2), to(#063f61));
    
    border-radius: 0px 0px 10px 10px;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px;

}
.frm-container .frm-login{
    height:170px;
    width:98%;
    margin:0 auto;
    padding:0px 0px 0px;
}
/*---------------------------------- FORMULARIO ------------------------------------*/
/* ----------------------------- formulario ------------------------------------*/
.frm-login .user, .frm-login .pass{text-align:center;}
.frm-login  input[type=text], .frm-login  input[type=password]{

    border: 0px;
    background:#ffffff url('../images/img-login/text-boxes.png') no-repeat left top;
    color:#888;
    outline:none;
    width: 80%;
    height:40px;
    margin: 5px auto 8px auto;
    padding: 0 10px 0 30px;
   
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    
    -moz-background-size: 24px 160px;
    -o-background-size: 24px 160px;
    -webkit-background-size: 24px 160px;
    background-size: 24px 160px;
    
    -webkit-box-shadow:inset 0px 0px 10px #c6c6c6;
    -moz-box-shadow:inset 0px 0px 10px #c6c6c6;
    box-shadow:inset 0px 0px 10px #c6c6c6;
    border:1px solid #cdcdcd;
    opacity:0.70;

}
.frm-login  input:hover, .frm-login  input:focus{opacity:1;}
.frm-login .user input{background-position:0px 0;}
.frm-login .user input:focus{background-position:0px -40px;}
.frm-login .pass input{background-position:0px -80px;}
.frm-login .pass input:focus{background-position:0px -120px;}

/*btns*/
.frm-login .btns{
    width:320px;
    margin:0 auto;
}
.frm-login button{
    color:#ffffff;
    font-size:14px;
    font-weight:bold;
    text-shadow:1px 1px 2px #555555;
    text-align:center;
    outline:none;
    height: 40px;
    margin: 5px 10px;
    padding: 0px;
    width: 130px;
    height:35px;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    cursor:pointer;
}
.frm-login button.btn-cancelar{
    
    background:#024f74;
    background: -moz-linear-gradient(top, #024f74, #023851);
    background: linear-gradient(to bottom, #024f74, #023851);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024f74), to(#023851));
    border:1px solid #07466f;
}
.frm-login button.btn-cancelar:hover{
    
    background:#0b6f9e;
    background: -moz-linear-gradient(top, #0b6f9e, #05415d);
    background: linear-gradient(to bottom, #0b6f9e, #05415d);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0b6f9e), to(#05415d));
}
.frm-login button.btn-aceptar{
    
    background:#6eac3d;
    background: -moz-linear-gradient(top, #6eac3d, #4e8819);
    background: linear-gradient(to bottom, #6eac3d, #4e8819);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6eac3d), to(#4e8819));
    border:1px solid #55a010;
}
.frm-login button.btn-aceptar:hover{
    
    background:#6ec121;
    background: -moz-linear-gradient(top, #6ec121, #4f9b0a);
    background: linear-gradient(to bottom, #6ec121, #4f9b0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6ec121), to(#4f9b0a));
}
/*------------------- MENU INFERIOR --------------------*/
.login-foot ul{list-style:none;width:98%;margin:0px auto;clear:both;height:30px;}
.login-foot li{
    float:left;
    width:49%;
    text-align:center;
    padding:5px 0;
}
.login-foot a{color:#3aadf2;text-decoration:none;}
.login-foot a:hover{color:#aee0fe;}
li.line{
    border-right:2px solid #01314e;
}
.logos-foot{
    /*background:url('../images/img-login/img-logosfoot.png') right no-repeat;*/
    width:95%;height:36px;
    margin:0 auto;
    
}

/*---------------------- SOMBRA EN EL FOOTER -----*/
#login_layer .shadow{
    
    width:782px;
    height:214px;
    margin:-54px auto;
    position:relative;
    background:transparent url('../images/img-login/img-shadow.png') center top no-repeat;
}
