@charset "utf-8";


*{
    margin: 0px;
    padding: 0px;
    background: #FFFFFF;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
html{
    font-size: 100%;
}
.main-container{
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
}

.login-container-left{
    box-sizing: border-box;
    width: 60%;
    height: 100%;
    display: none;
}
.login-container-right{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 30%;
    flex-direction: column;
}
.title-logo-container{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    justify-content: flex-end;
    flex-basis: 40%;
    padding-bottom: 1.5rem;

}

.contenedor-logo{
    display: flex;
    align-items: end;
    justify-content: center;
}

.form_acceso{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 70%;
    flex-basis: 60%;
}

.estatus1{
    display: flex;
    justify-content: center;
    border-width: medium;
    border-color: black;
    height: 3rem;
    background: #EEEEEE;
    color: #DE212C;
    width: 95%;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    border-style: solid;
    border-width: thin;
    border-color: #eee;
}

.alert-warning-message{
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.1rem;
    background: #eee;
    
}


.div-input-users-form{
  box-sizing: border-box;
    margin-bottom: 1rem;
    margin-top: 0.2rem;
    height: 3rem;
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-style: solid;
    border-width: thin;
    border-color: #cecece;
    border-radius: 0.5rem;
}


.div-input-users-form span{
    flex-basis: 3rem;
    /*height: 80%;*/

    display: flex;
    align-items: center;
    justify-content: center;
    
}


input {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    flex-basis: 100%;
    width: 100%;
    border: none;
    padding-left: 1rem;
    outline: none;
    background: none;
    font-size: 80%;
    height: 100%;
    letter-spacing: 0.1rem;
    z-index: 2;
}
.viewHidePass{
    justify-content: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
/* Enlace texto*/
.div-olvide-recuperarPassword{
    display: flex;
    justify-content: flex-end;
    width: 95%;
    height: 5%;
}
/*etiqueta floating de input*/
.labelFloating{
    font-size: 0.9rem;
    /*margin-top: 2px;*/
    color: #778899;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 1rem;
    /*top: 17px;*/
    /*left: 6px;*/
    /*z-index: 1;*/
    /*display: none;*/
}
/*contenedor de floating de input*/
.divFloating{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 100%;
    width: 75%;
    position: relative;
}
/*ini mostrar floating input*/
/*propiedades agregadas*/
.floatingInputActivo{
    
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top: 20%;
    font-size: 70%;
    color: #056dae;
    
    
}
.captchaLogin{
    position: absolute;
    top: -4px;
    right: -80px;
    
}
.captchaKey{
    display: none;
}
.captchaKeyVisible{
    
    display: block;
}
/*mensaje advertencia input*/
.labelFloatingWarning{
    font-size: 0.7em;
    width: 95%;
    padding-left: 20px;
    display: none;
    color: #de212c;
}

.mostrar{
    display: block;
}
.ocultar{
    display: none;
}
.marginBottonInput{
    margin-bottom: 15px;
}
.colorBordeActivo{
    border-color: #056dae;
    opacity: 0.9;
    box-shadow: 3px 0px 20px rgba(163,163,163, 0.2);
     -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.colorBordeInactivo{
    border-color: #cecece;
    
}
.colorBordeError{
    border-color: #EEEEEE;
    
     box-shadow: 2px 0px 15px rgba(245,6,6, 0.4);
     -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    
}

.colorCheckOff{
    
    color:#056dae;
}
.colorCheckOn{
    color: #056dae;
}
/*fin mostrar floating input*/











.img_panel_index{
    width: 100%;
}


.div-input-p{
    height: 3%;
    font-size: 75%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5%;


}

.div-input-img-users-form{
    box-sizing: border-box;
    margin-bottom:  0%;
    height: 9%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    border-style:  solid;
    border-width: thin;
    border-color: #cecece;
    border-radius: 4px;
}



.activarInput__{

    border-color:  #056DAE;
    background: #2888ff;
}
.desactivarInput__{

    border-color:  #FF0000;
}
.okInput__{

    border-color:  #84BD00;
}
.div-input-img-users-form:focus{
    color: #056DAE;
}
.colum{
    flex-direction: row;

}

.formulario__input-error{


    display: none;

}
.formulario__input-error-activo {
    display: block;
    align-self: center;
    color: crimson;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 4px;
    padding-right: 10px;

}











.div-text-box{
    width: 100%;
    height: 40px;

}
.div-input-users-form span img{
    width: 25px;
    height: 25px;

}






input:focus {
    /*border:  1.9px solid #FDE428;*/
    /*outline: none;*/
    /*box-shadow: 3px 0px 20px rgba(163,163,163, 0.4);*/
    color: black;
    
    /*background: white;*/
}


.titulo_acceso{
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;


    font-size: 100%;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 2%;
    text-align: center;
    display: block;


}

.div_compuesto{

    height: 10%;
}
buttondf {
    /*font-family: "Roboto", sans-serif;*/
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    /*text-transform: capitalize;*/
    outline: 0;
    background: #2387b8;
    /*background: #ff5722;*/
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 5px;

    color: #FFFFFF;
    font-size: 125%;
    -webkit-transition: all 0.3 ease;
    transition: all ease;
    cursor: pointer;

}

.button{
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    /*text-transform: capitalize;*/
    outline: 0;
    background: #257eed;
    /*background: #ff5722;*/
    text-decoration: none;
    width: 100%;
    height: 50%;
    text-align: center;
    border: 0;
    border-radius: 5px;

    color: #FFFFFF;
    font-size: 125%;
    -webkit-transition: all 0.3 ease;
    transition: all ease;
    cursor: pointer;

}
.div-boton{
    background: #257eed;
    border: none;
    margin-top: 0%;
    align-items: center;

}

.div-div-boton h1{

    color: #257edd;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    letter-spacing: 3px;
    font-size: 150%;
    display: flex;
    justify-content: center;
    margin-top: 36%;


}
.div-div-boton h2{
    color: crimson;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
    font-size: 120%;
    display: flex;
    justify-content: center;


}
.div-div-boton h3{
    color: crimson;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    letter-spacing: 0px;
    font-size: 110%;
    display: flex;
    justify-content: center;
    font-weight: 100;
    margin-top: 5%;


}
.button2{
    background: #2888ff;

}
.span1{
    height: 100%;

}

bvutton:hover  {
    opacity: 0.9;



}
.backgroundNone{
    background: none;
}
.spinner {
  border: 3px solid whitesmoke;
  border-left-color: transparent;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  background: #2387b8;
  margin-right: 5px;
  display: block;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* Altura pantalla  19 pulgadas*/
/*@media (max-height: 800px) {


    button{
        background: yellow;
        height: 100%;
        margin-top: 2%;
    }
    .img-logueo{
        width: 250px;

    }
    .login-container-right {


    }
    .div-input-users-form {

        height: 13%;
        margin-bottom: 2%;
    }
    .div_compuesto {
        height: 13%;
    }
    .login-container {

        margin-top: 5%;
    }
}
@media (max-height: 576px) {

    .estatus1{

        background: greenyellow;
    }
    button{
        background: greenyellow;
        height: 100%;
    }
    .img-logueo{
        width: 250px;

    }
    .login-container-right {

        align-items: flex-start;
    }
}
@media (max-height: 450px) {

    .estatus1{

        background: salmon;
    }
    button{
        background: salmon;
        height: 100%;
    }
    .img-logueo{
        width: 250px;

    }
    .login-container-right {

        align-items: flex-start;
    }

}

ancho pantalla 19 pulgadas trbj
@media (max-width: 1448px) {

    button {
        font-size: 120%;


    }

    .login-container{

        width: 35vw;
    }
    .estatus1{

        background:  brown;
    }

}

@media (max-width: 1200px) {

    button {
        font-size: 120%;
        height: 150%;

    }

    .login-container{

        width: 35vw;
    }

    .titulo_acceso{
        font-size: 95%;
    }

}

TABLET GRAFICA
@media (max-width: 992px) {

    button {
        font-size: 120%;


    }

    .login-container-left{
        width: 50vw;

    }
    .login-container-right{

        width: 50vw;
        padding-left: 0%;

    }
    .login-container{

        width: 40vw;
    }

    .img_panel_acceso {
        width: 100%;
        height: 100%;
    }
    .titulo_acceso{
        font-size: 100%;
    }

}


@media (max-width: 768px) {

    button {
        font-size: 100%;
        height: 100%;

    }


    .login-container-left{
        width: 40vw;

    }
    .login-container-right{

        width: 60vw;


    }
    input{


        font-size: 80%;
    }
    .login-container{

        width: 45vw;
    }

    .img_panel_acceso {
        width: 140%;
        height: 100%;
    }

}

@media (max-width: 576px) {

    button {
        font-size: 100%;


    }



    .login-container-left{
        display: none;

    }
    .login-container-right{

        width: 100vw;
        padding-left: 0%;
        justify-content: center;
        align-items: center;

    }
    input{

        flex-basis: 85%;
        font-size: 90%;
        margin-left: 5px;
    }
    .login-container{

        width: 80vw;
    }


    .div-input-users-form span {
        flex-basis: 15%;

    }
   

}


.btn-resetPass{
    background: #3f51b5;

}

.preloaderr {
  width: 50px;
  height: 50px;
  border: 10px solid #6d6ff5;
  border-top: 10px solid #2f22ff;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  visibility: hidden;
    opacity: 0;
}
@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.mostrar__preloader{
    
    visibility: visible;
    opacity: 1;
}





.preloader {
    width: 5em;
    height: 5em;
    font-size: 25px;
    box-sizing: border-box;
    border-top: 0.3em solid hotpink;
    border-radius: 50%;
    position: relative;
    animation: rotating 2s ease-in-out infinite;
    --direction: 1;
    display: none;
}

.preloader::before,
.preloader::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    box-sizing: border-box;
    top: -0.2em;
}

.preloader::before {
    border-top: 0.3em solid dodgerblue;
    transform: rotate(120deg);
}

.preloader::after {
    border-top: 0.3em solid gold;
    transform: rotate(240deg);
}

.preloader span {
    position: absolute;
    color: white;
    width: inherit;
    height: inherit;
    text-align: center;
    line-height: 10em;
    font-family: sans-serif;
    animation: rotating 2s linear infinite;
    --direction: -1;
}

@keyframes rotating {
    50% {
        transform: rotate(calc(180deg * var(--direction)));
    }

    100% {
        transform: rotate(calc(360deg * var(--direction)));
    }
}

@keyframes load {
    0%{
        opacity: 0.08;
         font-size: 10px; 
                                font-weight: 400; 
                                filter: blur(5px);
                                letter-spacing: 3px;
        }
    100%{
         opacity: 1; 
         font-size: 12px; 
                                font-weight:600; 
                                filter: blur(0); 
        }
}

.animate {
        display:flex;
        justify-content: center;
        align-items: center;
        height:14%;
        margin: auto;
        width: 350px; 
        font-size:26px; 
        font-family: Helvetica, sans-serif, Arial;
        animation: load 2s infinite 0s ease-in-out;
        animation-direction: alternate;
        text-shadow: 0 0 1px white;
}

.loading{
    display: none;
    height: 10%;
    margin-top: 6%;
    margin-left: 35%;

}
h2 {
    color: #ccc;
    margin: 0;
    font: 12px helvetica nue;
    text-transform: uppercase;
    letter-spacing: .2em;
}


 * Loading Dots
 * Can we use pseudo elements here instead :after?
 



 * Dots Colors
 * Smarter targeting vs nth-of-type?
 


 * Animation keyframes
 * Use transition opacity instead of keyframes?
 
@keyframes loading {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
*/