@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";


.container-global{
    width: 85%;
    max-width: 1100px;
    margin: 0 auto;
}

/*Banner*/
.seccion-banner {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 200px;
    /*margin-top: 50px;*/
}
.banner{
    width: 100%;
    max-width: 1100px;
    max-height: 200px;
    object-fit: cover;
    object-position: center center;

    display: block;
    position: relative;
    opacity: 1;
    transition: .5s ease;
    backface-visibility: hidden;
}
.seccion-banner:hover .banner {
    opacity: 0.3;
}

/*botones banner*/
.seccion-botones-banner {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top : 50%; left : 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.seccion-banner:hover .seccion-botones-banner {
    opacity: 1;
}

/*boton Editar*/

/*texto(ningun archivo sellecionado)transparecia*/
/*.boton-seleccionar-imagen {
    color: transparent;
}*/
.boton-seleccionar-imagen::-webkit-file-upload-button {
    visibility: hidden;
}
.boton-seleccionar-imagen::before {
    content: 'Editar';
    display: inline-block;
    cursor: pointer;
    text-align: center;
    background-color:#00adef;
    color: white;
    font-size: 15px;
    padding: 7px;
    width: 150px;
    height: 35px;
}
.boton-seleccionar-imagen:hover::before {
    background-color:#0093CB;
}
.boton-seleccionar-imagen:active {
    outline: 0;
}
.boton-seleccionar-imagen:active::before {
    background:#0093CB; 
}
/*texto(ningun archivo sellecionado)campo de contenido*/
#fileToUpload, .boton-seleccionar-imagen::before {
/*    width: 150px;*/
    height: 35px;
}
/*fin de boton Editar*/


/*boton cargar*/
.boton-subir-imagen{
    border: none;
    text-align: center;
    background-color:#00adef;
    color: white;
    font-size: 15px;
    padding: 7px;
    width: 150px;
    height: 35px;
    margin-top: 10px;
}
.boton-subir-imagen:hover, .boton-subir-imagen:focus, .boton-subir-imagen:active {
    background-color:#0093CB;
    color: white;
}
/*fin de boton cargar*/
/*fin de Banner*/

.register-link{ /*Boton registrar*/
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    color: white;
    border: none;
    background: #00adef;
    cursor: pointer;
    position:absolute;
    /*right: 245px;*/
    padding: 7px;
    width: 250px;
    height: 35px;
}

.register-link-centered{ /*Boton registrar*/
    position: fixed;
    left: 50%;
}
/*Boton registrar-efecto hover*/
.register-link:hover, .register-link:focus, .register-link:active {
    background-color:#0093CB;
    color: white;
}

.register-data{ /*Boton oculto*/
    float: right;
    border: none;
    background: none;
}

.register-data-center{
    width: 100%;
    padding-left: 50%;
    padding-right: 50%;
    border: none;
    background: none;
}

.seccionNuevo{
    padding-right: 245px;
}

.register-link:hover{
    text-decoration: none;
}

/*tabla principal lobby*/
.tabla-lobby-acceso th, td{
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

div.dataTables_wrapper div.dataTables_length select{
    pointer-events: none;
}


/*
Contenedor de carga multiple de pacientes (Modal -> ) (CREADO POR JUAN)
*/

.modal_containerL{
    background:  rgba(0, 0, 0,0.0);  
    position:absolute;
    opacity: 0; 
    z-index: 10;
    transition: all 500ms ease;
    pointer-events: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1073px; 
}
.modal_containerL:target{
    opacity: 1;
    pointer-events: auto;
}

/*seccion registro fondo blanco*/
.modal_customL{
    width: 70%;
    height: auto;
    margin: auto;
    position: absolute;
    right: 50px; left: 50px;
    background: white;
    padding: 0px;
    margin-top: 163px;
    margin-bottom: auto;
    /*bordes y sombreado*/
    border: 1px solid #b0b0b0;
    box-shadow: 0 10px 6px -4px #777;
    -webkit-box-shadow: 0 10px 6px -4px #777;
    -moz-box-shadow: 0 10px 6px -4px #777;  
}

/*seccion registro texto (nuevo...)*/
.modal_headingL{
    width: 100%;
    display: block;
    height: 50px;
    /* margin-bottom: 60px; (borrado 3/7/20 12:44)*/
    background:#777777;
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

.input-modalsL{
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 20px;
    padding-top: 35px;    
    padding-bottom: 10px;
}

/*seccion registro (casillas de relleno)*/
.input-modalsL input{
    margin-bottom: 15px;
    width: 100%;
    height: 35px;
    font-size: 15px;
    box-sizing: border-box;
    padding-left: 10px;
    border: 1px solid #ccc;
}
/*seccion registro (color del texto de las casillas)*/
.input-modalsL input::placeholder{
    color: #CCC;
}

/*seccion registro texto (icono cerrar)*/
.modal_closeL{
    color: white;
    position:absolute;
    padding: 15px;
    text-decoration: none;
    right: 0px;
    font-size: 15pt;
    top: 0px;
}

/*(icono cerrar)-efecto hover*/
.modal_closeL:hover, .modal_closeL:focus, .modal_closeL:active {
    background-color:#00adef;
    color: white;
}

/*
ModalL FIN
*/



/*todo el contenedor Nuevo... (modal)*/
/*______________________________________________________-*/
/*seccion registro fondo opacidad*/
.modal_containerC{
    background:  rgba(0, 0, 0,0.0);  
    position:absolute;
    opacity: 0; 
    z-index: 10;
    transition: all 500ms ease;
    pointer-events: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1073px; 
}
.modal_containerC:target{
    opacity: 1;
    pointer-events: auto;
}

/*seccion registro fondo blanco*/
.modal_customC{
    width: 450px;
    height: auto;
    margin: auto;
    position: absolute;
    right: 50px; left: 50px;
    background: white;
    padding: 0px;
    margin-top: 163px;
    margin-bottom: auto;
    /*bordes y sombreado*/
    border: 1px solid #b0b0b0;
    box-shadow: 0 10px 6px -4px #777;
    -webkit-box-shadow: 0 10px 6px -4px #777;
    -moz-box-shadow: 0 10px 6px -4px #777;  
}

/*seccion registro texto (nuevo...)*/
.modal_headingC{
    width: 100%;
    display: block;
    height: 50px;
    /* margin-bottom: 60px; (borrado 3/7/20 12:44)*/
    background:#2e3092;
    color: white;
    text-align: center;
    font-weight: lighter;
    font-size: 20px;
    padding:10px;
}

.input-modalsC{
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 20px;
    padding-top: 35px;    
    padding-bottom: 10px;
}

/*seccion registro (casillas de relleno)*/
.input-modalsC input{
    margin-bottom: 15px;
    width: 100%;
    height: 35px;
    font-size: 15px;
    box-sizing: border-box;
    padding-left: 10px;
    border: 1px solid #ccc;
}
/*seccion registro (color del texto de las casillas)*/
.input-modalsC input::placeholder{
    color: #CCC;
}

/*seccion registro texto (icono cerrar)*/
.modal_closeC{
    color: white;
    position:absolute;
    padding: 15px;
    text-decoration: none;
    right: 0px;
    font-size: 15pt;
    top: 0px;
}

/*(icono cerrar)-efecto hover*/
.modal_closeC:hover, .modal_closeC:focus, .modal_closeC:active {
    background-color:#00adef;
    color: white;
}

/*(icono check) - ver contrasena*/
input[type=checkbox]{
    width: 31px;
    height: 31px;
    border-right-width: 20px;
    margin-left: 15px;
    float: none;  
}
/*(texto check) - mostrar contrasenas*/
.texto-mostrar-esconder-pass{
    font-size: 14px;
    color:#777777;
    float: left;
    margin-top: 15px;
    text-align: center;
    margin-bottom: 0px; 
}

/*(icono cerrar)-efecto hover*/
.btnRegister{
    margin-bottom: 15px;
    width: 60%;
    height: 35px;
    font-size: 15px;
    box-sizing: border-box;
    border-color: #00adef;
    background: #00adef;
    color: white;
    margin-top: 40px;
}

/*(icono cerrar)-efecto hover*/
.btnRegister:hover, .btnRegister:focus, .btnRegister:active {
    background-color:#0093CB;
    color: white;
}

/*seccion registro texto (Datos incorrectos)*/
.rojo-alerta{
    color: red;
    text-align: center;		
}

.titulo-tabla-profesional th{
    border: 1px solid #ccc; 
    background: rgba(0,0,0,.05); 
    padding: 9px;
    font-weight: normal;
}

/*seccion registro texto (Datos incorrectos)*/
.titulo-tabla th{
    font-weight: lighter;
    background: #2e3092;
    color: white;
    width: 100%;
    height: 35px;
    font-size: 20px;
    text-align: center;
    border: none;
    padding: 2px;
}






/* todo el contenedor ver mas o licencias */
/*______________________________________________________-*/
/*seccion ver licencias fondo opacidad*/
.detalles-modalC{
    background:  rgba(0, 0, 0,0.0);
    position:absolute;
    opacity: 1; 
    z-index: 10;
    transition: all 500ms ease;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1073px;
}
.detalles-modalC:target{
    opacity: 1;
    pointer-events: auto;
}

/*seccion fondo blanco*/
.contenedor-detalles-modalC{
    max-width: 600px;
    width: 100%;
    height: auto;
    margin: auto;
    position: absolute;
    right: 50px; left: 50px;
    background: white;
    padding: 0px;
    margin-top: 163px;
    margin-bottom: auto;
    /*bordes y sombreado*/
    border: 1px solid #b0b0b0;
    box-shadow: 0 10px 6px -4px #777;
    -webkit-box-shadow: 0 10px 6px -4px #777;
    -moz-box-shadow: 0 10px 6px -4px #777;    
}

.encabezado-detalles-modalC{
    width: 100%;
    display: block;
    height: 50px;
    background:#777777;
    color: white;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

/* tabla historial licencias */
.tabla-detalles-licencias{
    margin: 30px;
}


/*boton adquirir horas*/
.boton-adquirir-horas-detalles{
    font-size: 15px;
    text-align: center;
    color: white;
    border: none;
    background: #00adef;
    width: 250px;
    cursor: pointer;
    padding: 7px;
    position:absolute;
    right: 0px;
    margin-right: 30px;
    margin-bottom: 130px;
    bottom: 0px;
}

/*(boton adquirir horas)-efecto hover*/
.boton-adquirir-horas-detalles:hover, .boton-adquirir-horas-detalles:focus, .boton-adquirir-horas-detalles:active {
    background-color:#0093CB;
    color: white;
    text-decoration: none;
}

/*boton ver mas informacion*/
.boton-ver-mas-informacion{
    font-size: 15px;
    text-align: center;
    color: white;
    border: none;
    background:#00adef;
    width: 250px;
    cursor: pointer;
    padding: 7px;
    position:absolute;
    right: 0px;
    margin-right: 30px;
    margin-bottom: 80px;
    bottom: 0px;
}
/*(boton ver mas informacion)-efecto hover*/
.boton-ver-mas-informacion:hover, .boton-ver-mas-informacion:focus, .boton-ver-mas-informacion:active {
    background-color:#0093CB;
    color: white;
    text-decoration: none;
}

/*boton generar formato de registro*/
.boton-formato-registro-detalles{
    font-size: 15px;
    text-align: center;
    color: white;
    border: none;
    background: #00adef;
    width: 250px;
    cursor: pointer;
    padding: 7px;
    position:absolute;
    right: 0px;
    margin-right: 30px;
    margin-bottom: 30px;
    bottom: 0px;
}

/*(boton generar formato de registro)-efecto hover*/
.boton-formato-registro-detalles:hover, .boton-formato-registro-detalles:focus, .boton-formato-registro-detalles:active {
    background-color:#0093CB;
    color: white;
    text-decoration: none;
}

/*(historial licencias)titulos verde*/
/*______________________________________________________-*/
/*bloquear seccion (mostrar entradas/maximo 10)*/
#tablaLicencias_wrapper .dataTables_length{
    pointer-events: none;
}
/*search corto*/
#tablaLicencias_wrapper .dataTables_filter input{
    width: 75%;
}
/*(historial licencias)ancho*/
#tablaLicencias_wrapper, #tablaLicencias{
    width: 100%;
}
/*(historial licencias)espacio entre tabla y botones azules*/
#tablaLicencias_wrapper{
    padding-bottom: 140px;
}












/*(cargar reporte cogscreen*/
.buttoon-reporte-link a{
    text-decoration: none;
    color: white;
    font-size: 15px;
}
.buttoon-reporte-link a:hover {
    color: white;
    text-decoration: none;
}  
.buttoon-reporte-link{
    border: none;
    background: #00adef;
    cursor: pointer;
    padding: 7px;
    width: 250px;
    height: 35px;      
   }
.buttoon-reporte-link:hover {
    background-color:#0093CB;
    text-decoration: none;
}   
   
    
.modal_titulo_cargar_reporte{ 
    width: 100%;
    display: block;
    height: 280px;
    margin: auto;
    background: white;
    margin-top: 50px;                   
    margin-bottom: auto;
    /*bordes y sombreado*/
    border: 1px solid #b0b0b0;
    box-shadow: 0 10px 6px -4px #777;
    -webkit-box-shadow: 0 10px 6px -4px #777;
    -moz-box-shadow: 0 10px 6px -4px #777; 
}


.modal_contenedor_cargar_reporte{
    width: 100%;
    display: block;
    height: 50px;
    /* margin-bottom: 60px; (borrado 3/7/20 12:44)*/
    background:#2e3092;
    color: white;
    text-align: center;
    font-weight: lighter;
    font-size: 20px;
    padding:10px;
}













/* responsive */

/* seccion de banner - ocultar*/
@media screen and (min-width: 320px) and (max-width: 350px){
    .seccion-banner{
        display: none;
    }
}


/* seccion de registro */
@media screen and (min-width: 488px) and (max-width: 555px){
    .modal_customC{
        width: 400px;
        margin-top: 213px;
    }    
}
@media screen and (min-width: 400px) and (max-width: 488px){
    .modal_customC{
        width: 300px;
        margin-top: 213px;
    }
}
@media screen and (min-width: 360px) and (max-width: 400px){
    .modal_customC{
        max-width: 300px;
        margin-top: 213px;
        left: 30px;
        right: 30px;
    }
}
@media screen and (min-width: 339px) and (max-width: 360px){
    .modal_customC{
        max-width: 280px;
        margin-top: 213px;
        left: 30px;
        right: 30px;
    }
}
@media screen and (min-width: 320px) and (max-width: 339px){
    .modal_customC{
        max-width: 260px;
        margin-top: 213px;
        left: 30px;
        right: 30px;
    }
}



/* seccion de ver licencias */
@media screen and (min-width: 600px) and (max-width: 767px){
    .contenedor-detalles-modalC{
        max-width: 500px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }
}
@media screen and (min-width: 500px) and (max-width: 600px){
    .contenedor-detalles-modalC{
        max-width: 400px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }
}
@media screen and (min-width: 501px) and (max-width: 554px){
    .contenedor-detalles-modalC{
        max-width: 400px;
        margin-top: 213px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }
}
@media screen and (min-width: 400px) and (max-width: 500px){
    .contenedor-detalles-modalC{
        max-width: 300px;
        margin-top: 213px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }
}
@media screen and (min-width: 363px) and (max-width: 499px){
    .boton-adquirir-horas-detalles, .boton-ver-mas-informacion{
        width: 235px;
    }
}
@media screen and (min-width: 360px) and (max-width: 400px){
    .contenedor-detalles-modalC{
        max-width: 300px;
        margin-top: 213px;
        left: 30px;
        right: 30px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }
}
@media screen and (min-width: 339px) and (max-width: 360px){
    .contenedor-detalles-modalC{
        max-width: 280px;
        margin-top: 213px;
        left: 30px;
        right: 30px;
    }
    .boton-adquirir-horas-detalles, .boton-ver-mas-informacion{
        width: 215px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }   
}
@media screen and (min-width: 320px) and (max-width: 339px){
    .contenedor-detalles-modalC{
        max-width: 260px;
        margin-top: 213px;
        left: 30px;
        right: 30px;
    }
    .boton-adquirir-horas-detalles, .boton-ver-mas-informacion{
        width: 200px;
    }
    .tabla-detalles-licencias{
        overflow: scroll; 
        width: auto;
    }
}

/*
Boton de carga de archivo o documento
*/

/*boton gris escondido (selecionar archivo)*/
.boton-editar-stock::-webkit-file-upload-button {
    /*    visibility: hidden;*/
    display: none;
}
/*inicio de boton Editar*/
.boton-editar-stock::before {
    content: 'Editar';
    display: inline-block;
    cursor: pointer;
    text-align: center;
    background-color:#00adef;
    color: white;
    font-size: 15px;
    padding: 7px;
    width: 150px;
    height: 35px;
    float: right;
}
.boton-editar-stock:hover::before {
    background-color:#0093CB;
}

/*texto(ningun archivo sellecionado)campo de contenido*/
#fileToUpload, .boton-editar-stock::before {
    font-size: 15px;
    float: right;
    margin-left: 50px;
}
/*fin de boton Editar*/




.boton-cargar-stock {
    border: none;
    text-align: center;
    background-color:#00adef;
    color: white;
    font-size: 15px;
    padding: 7px;
    width: 180px;
    height: 35px;
    margin-top: 10px;
    float: right;
}
.boton-cargar-stock:hover, .boton-cargar-stock:focus, .boton-cargar-stock:active {
    background-color:#0093CB;
}

/*
Fin boton de carga de archivo o documento
*/

    
/* seccion cargar reporte cogscreen*/
@media screen and (min-width: 579px) and (max-width: 787px){
.modal_titulo_cargar_reporte{ 
    height: 300px;
}
}  

@media screen and (min-width: 321px) and (max-width: 575px){
    .modal_titulo_cargar_reporte{ 
    height: 320px;
}
.boton-editar-stock::before{ 
    width: 85px;
}
}


/* responsive (opacidad negra) */
/*@media screen and (max-width: 1100px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1093px;
    }
}
@media screen and (min-width: 833px) and (max-width: 1100px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1246px;
    }
}
@media screen and (min-width: 777px) and (max-width: 833px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1265px;
    }
}
@media screen and (min-width: 769px) and (max-width: 777px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1280px;
    }
}
@media screen and (min-width: 605px) and (max-width: 769px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1360px;
    }
}
@media screen and (min-width: 585px) and (max-width: 605px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1550px;
    }
}
@media screen and (min-width: 557px) and (max-width: 585px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1569px;
    }
}
@media screen and (min-width: 489px) and (max-width: 557px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1619px;
    }
}
@media screen and (min-width: 449px) and (max-width: 489px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1600px;
    }
}
@media screen and (min-width: 447px) and (max-width: 449px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1620px;
    }
}
@media screen and (min-width: 407px) and (max-width: 447px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1639px;
    }
}
@media screen and (min-width: 379px) and (max-width: 407px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1661px;
    }
}
@media screen and (min-width: 371px) and (max-width: 379px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1680px;
    }
}
@media screen and (min-width: 331px) and (max-width: 371px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1699px;
    }
}
@media screen and (min-width: 320px) and (max-width: 331px){
    .modal_containerC,.detalles-modalC{
        padding-bottom: 1718px;
    }
}*/



/* tabla (boostrap) */
@media screen and (min-width: 320px) and (max-width: 764px){
    #tablaUsuarios_wrapper{
        overflow: scroll; 
        width: auto;
    }
}
/* fin responsive */