/* **************************** ESTILOS GENERALES **************************** */
body {
    background-color: #F1F3FA;
}

/* DESHABILITAR EL FOCO DEL BOTON BOOTSTRAP */
.btn:focus {
    box-shadow: none !important;
}
/* ************************** FIN ESTILOS GENERALES ************************** */

/* *********** CONTENIDO PRINCIPAL DE LA PAGINA (ETIQUETA SECTION) *********** */
#principal {
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 5px;
}
/* ********* FIN CONTENIDO PRINCIPAL DE LA PAGINA (ETIQUETA SECTION) ********* */

/* ********************** ARTICULO TOKEN Y SU CONTENIDO ********************** */
#token {
    padding-top: 20px;
    text-align: center;
    width: 500px;
    margin: auto;
    color: red;
}

.visualizar {
    display: none;
}
/* ******************** FIN ARTICULO TOKEN Y SU CONTENIDO ******************** */

/* ********************** ARTICULO LOGIN Y SU CONTENIDO ********************** */
#login {
    width: 400px;
    margin: auto;
}

/* IMAGEN PORTADA */
#login > figure {
    width: max-content;
    margin: 1rem auto 1rem;
    padding: auto;
}

#logo {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

#tituloLogo {
    text-align: center;
    margin-top: 20px;
    color: #3092C0;
    font-size: 20px;
    font-weight: bolder;
}

/* FORMULARIO DE ACCESO */
.alto {
    height: 50px;
    font-size: 20px;
}

.alto > img {
    width: 16px;
}
/* FIN FORMULARIO DE ACCESO */

/* BOTONES FORMULARIO DE ACCESO (INCLUYE CAPTCHA E INICIO) */
.mostrar_password:focus {
    box-shadow: inherit !important;
}

#btnAcceso {
    padding: 2px 10px;
    /*width: 80%;*/
    max-width: max-content;
}
/* FIN BOTONES FORMULARIO DE ACCESO (INCLUYE CAPTCHA E INICIO) */

/* VALIDACION FORMULARIO DE ACCESO */
label.error {
    /*font-size: 12px;*/
    font-weight: 600;
    color: red;
}
/* FIN VALIDACION FORMULARIO DE ACCESO */
/* ******************** FIN ARTICULO LOGIN Y SU CONTENIDO ******************** */


/* ************************ ESTILOS VENTANAS MODALES ************************ */
/* ESTILOS VENTANA MODAL PROCEDIMIENTOS DE LA PAGINA */
#modalAyuda {
    height: 95%;
    overflow-y: hidden;
}

#modalAyuda .modal-dialog {
    height: 100%;
}

#modalAyuda .modal-dialog .modal-content {
    max-height: 94%;
}

#modalAyuda .modal-dialog .modal-content .modal-body {
    max-height: 100%;
    overflow-y: auto;
}
/* FIN ESTILOS VENTANA MODAL PROCEDIMIENTOS DE LA PAGINA */
/* ********************** FIN ESTILOS VENTANAS MODALES ********************** */

/* ************** AJUSTE DE VENTANA SEGUN ANCHO DE LA PANTALLA ************** */
/* PANTALLA MOVIL => ANCHO MAXIMO 800px Y ORIENTACION DISPOSITIVO VERTICAL */
@media only screen and (max-width: 800px) and (orientation: portrait) {
    
}

/* PANTALLA MOVIL => ANCHO MAXIMO 800px Y ORIENTACION DISPOSITIVO HORIZONTAL */
@media only screen and (max-width: 800px) and (orientation: landscape) {
    
}

/* PANTALLA PEQUEÑA => ANCHO ENTRE 800px Y 1024px */
@media only screen and (min-width: 800px) and (max-width: 1024px){
    
}

/* PANTALLA MEDIANA => ANCHO ENTRE 1024px Y 1920px */
@media only screen and (min-width: 1024px) and (max-width: 1920px){
    
}

/* PANTALLA GRANDE => ANCHO SUPERIOR A 1920px */
@media only screen and (min-width: 1920px){
    
}
/* ************ FIN AJUSTE DE VENTANA SEGUN ANCHO DE LA PANTALLA ************ */