@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');



body{
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* background-color: #0c3c83 ; */
    background-image: url("imagenes/Fondo_pantalla.png");
    background-size: cover;
}
#salir{
    font-family: 'Poppins', sans-serif;
    
}

.tituloPaginasU{
    width: 100%;
    height: 10%;
    background-color: #1c4474;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    border-bottom: 2px ridge rgb(177, 177, 177);
    display: flex;
    justify-content: space-between;
    align-items: center;
    

}

.cuerpoPaginasBitacorasU{
    width: 100%;
    height: 80%;
    background-color: white;
    display: flex;

}

.piePaginasU{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 10%;
    background-color: #1c4474 ;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
    
}




#tableE{
    height: 155vh;
}

#myChart{
    height: 400px;
}

#logoHeader1{
    width: 5%;
    height: 75%;
}
.col{
    background-color: #00ff22;
}
#tableC{
    height: 100vh;
}
h2{
    color: white;
    
    text-align: center;
    font-family: 'Arimo', sans-serif;
}
table tr td {
    width: 1%;
    white-space: nowrap;
}
#id_El{
    display: none;
}

#id_E{
    display: none;
}
#idr{
    display: none;
}
#idF{
    display: none;
}
#pl01i{
    display: none;  
}
#pl02i{
    display: none;  
}
#pl03i{
    display: none;  
}
#pl04i{
    display: none;  
}
#pl05i{
    display: none;  
}
#pl06i{
    display: none;  
}
#pl07i{
    display: none;  
}
#pl08i{
    display: none;  
}
#pl09i{
    display: none;  
}
#pl10i{
    display: none;  
}
#pl11i{
    display: none;  
}
#sysali{
    display: none;  
}
#accordion{
    display: none;  
}
#caragaTable{
    background-color: #0c3c83 ;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
}
#textCargando{
    font-size: 32px;
    color: white;
}
#datosUser{
    color: white;
    font-size: 20px;
    border-bottom: 1px solid #92d104;
    font-family: 'Arimo', sans-serif;
}
.inputlog{
    width: 80%;
    height: 7%;
    text-align: center;
    font-size: 20px;
}
#editar{
    width: 15px;
    height: 15px;
}
#eliminar{
    width: 15px;
    height: 15px;
}

#editarFacE{
    width: 15px;
    height: 15px;
}
.contra{
    color: white;
}
#acep{
    width: 30%;
    height: 10%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    
}
#acep:hover {
    background-color: #3e8e41;
    color:black;
}

#agrega{
    width: 90%;
    height: 6%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#agrega:hover {
    background-color: #3e8e41;
    color:black;
}


#agregaElectrica{
    width: 90%;
    height: 6%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#agregaElectrica:hover {
    background-color: #3e8e41;
    color:black;
}

#agregaAgua{
    width: 90%;
    height: 10%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#agregaAgua:hover {
    background-color: #3e8e41;
    color:black;
}

.tituloPagPie{
    /* font-family: 'Bowlby One SC', cursive; */
    font-family: 'Poppins', sans-serif;

    font-size: 28px;
    color: white;
    padding-left: 0px;
}




.piePaginas{
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: white;
    background-color: #0454a4;
}


.contenedor{
    width: 60%;
    height: 85%;
    background-color: aqua;
    display: flex;
    box-shadow: 0px 2px 10px 8px rgba(0,0,0,0.37);
    -webkit-box-shadow: 0px 2px 10px 8px rgba(0,0,0,0.37);
    -moz-box-shadow: 0px 2px 10px 8px rgba(0,0,0,0.37);
}

.izquierdo{
    width: 50%;
    height: 100%;
    background-image: url("imagenes/fondoAzul3.png");
    background-size: cover;
}
#title_name{
    color: rgb(0, 0, 0);
}
.derecho{
    width: 50%;
    height: 100%;
    background-color: #0c3c83 ;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login{
    background-color: #0c3c83 ;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items:center;
    justify-content:space-around;

}
#logoLogin{
    width: 40%;
    height: 9%;
}
#energia{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#energia:hover {
    background-color: #3e8e41;
    color:black;
}


#energia1{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#energia1:hover {
    background-color: #3e8e41;
    color:black;
}






#energiaF{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#energiaF:hover {
    background-color: #3e8e41;
    color:black;
}


#energiaF1{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#energiaF1:hover {
    background-color: #3e8e41;
    color:black;
}






#gas{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#gas:hover {
    background-color: #3e8e41;
    color:black;
}
#gasF{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#gasF:hover {
    background-color: #3e8e41;
    color:black;
}

#costo{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#costo:hover {
    background-color: #3e8e41;
    color:black;
}
#costoF{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#costoF:hover {
    background-color: #3e8e41;
    color:black;
}

#hombre{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#hombre:hover {
    background-color: #3e8e41;
    color:black;
}

#hombreF{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#hombreF:hover {
    background-color: #3e8e41;
    color:black;
}

#facturado{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#facturado:hover {
    background-color: #3e8e41;
    color:black;
}
#facturadoF{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#facturadoF:hover {
    background-color: #3e8e41;
    color:black;
}
#usersSystem{
    width: 14%;
    height: 40%;
    background-color: #92d104   ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#usersSystem:hover {
    background-color: #3e8e41;
    color:black;
}


#usersSystem1{
    width: 14%;
    height: 40%;
    background-color: #92d104   ;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#usersSystem1:hover {
    background-color: #3e8e41;
    color:black;
}



#semanalC{
    width: 14%;
    height: 40%;
    background-color:  #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#semanalC:hover {
    background-color: #3e8e41;
    color:black;
}


#tableau{
    width: 14%;
    height: 40%;
    background-color:  #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#tableau:hover {
    background-color: #3e8e41;
    color:black;
}
#historialCambios{
    width: 14%;
    height: 40%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#historialCambios:hover {
    background-color: #3e8e41;
    color:black;
}

.botonesH{
    background-color: #0c3c831e;
    width: 100%;
    height: 33%;
    /* margin-top: 1%; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2px ridge rgb(177, 177, 177);
  
}
h3{
    text-align: center;
    background-color: #0c3c831e;
    margin-bottom: 0%;
}

.bitacoras{
    background-color: #ebebeb96;
    width: 100%;
    height: 33%;
    /* margin-top: 1%; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    border-bottom: 2px ridge rgb(177, 177, 177);

}

.facturasBotones{
    background-color: #0c3c831e;
    width: 100%;
    height: 33%;
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid rgb(177, 177, 177);

}

.contenedor_paginas{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}
.tituloPaginas{
    width: 100%;
    height: 6.49%;
    background-color: #1c4474;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    border-bottom: 2px ridge rgb(177, 177, 177);
    display: flex;
    justify-content: space-between;
    align-items: center;
    

}

.tituloPaginasHome{
    width: 100%;
    height: 10%;
    background-color: #1c4474;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    border-bottom: 2px ridge rgb(177, 177, 177);
    display: flex;
    justify-content: space-between;
    align-items: center;
    

}

.tituloPaginas1{
    width: 100%;
    height: 6.5%;
    background-color: #1c4474;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    border-bottom: 2px ridge rgb(177, 177, 177);
    display: flex;
    justify-content: space-between;
    align-items: center;
    

}

.cuerpoPaginas{
    width: 100%;
    height: 80%;
    background-color: white;
    display: flex;
    flex-direction: column;
}
.cuerpoPaginasBitacoras{
    width: 100%;
    height: 87%;
    background-color: white;
    display: flex;

}



.cuerpoPaginasConsumo{
    width: 100%;
    height: 80%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.izquierdoC{
    background-color: #dadada;
    padding-top: 25px;
    padding-bottom: 25px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* display: flex;
    justify-content: center; */
}

.derechoc{
background-color: #ffffff;
padding-top: 25px;
padding-bottom: 25px;
width: 100%;

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

}

#tableConsumoGas{
    font-size: 12px;
    width: 90%;
    height: 150px;
    text-align: center; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}

#tableConsumoAgua{
    font-size: 12px;
    width: 90%;
    height: 150px;
    text-align: center; 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}



#tableConsumoElectrico{
    font-size: 12px;
    width: 90%;
    height: 150px;
    text-align: center;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}

.titulotabl{
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    padding-left: 60px; 
    padding-right: 5%;
}
.titulotablc{
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    padding-left: 60px; 
    padding-right: 9%;
}
.titleTablaC{
    background-color: #083e75;
    color: white;
    font-size: 10px;
    height: 23px;
    text-align: center;
}
#tableConsumoElectrico tr td {
    width: 1%;
    white-space: nowrap;
}
#tableConsumoElectrico_info{
    display: flex;
    align-items: center;
    justify-content: center;  
}
#tableConsumoElectrico_paginate{
    display: flex;
    align-items: center;
    justify-content: center;
}

#tableConsumoGas_info{
    display: flex;
    align-items: center;
    justify-content: center;  
}
#tableConsumoGas_paginate{
    display: flex;
    align-items: center;
    justify-content: center;
}


.izquierdoE{
    background-color: #0c3c831e;
    width: 10%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    border-right: 1px ridge rgb(177, 177, 177);
}
.derechoE{
    background-color: #ebebeb28;
    width: 90%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

table.rowAlternate tr:nth-child(odd)
{ background-color: #eee;
   
   
}
table.rowAlternate tr:nth-child(even)
{ background-color: #fff;
    
}
table{
    
    font-size: 16px;
    text-align: center;
    width: 1150px;
    height: 300px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
}


#tableBitacoraAgua{
    
    font-size: 12px;
    text-align: center;
    width: 1050px;
    height: 300px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
}
.titleTabla1{
    background-color: #083e75;
    color: white;
    font-size: 8px;
    height: 43px;
    text-align: center;
}



td{
    border-bottom: 1px solid black;
}
.titleTabla{
    background-color: #083e75;
    color: white;
    font-size: 15px;
    height: 43px;
    text-align: center;
}


.piePaginas{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 6.5%;
    background-color: #1c4474 ;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
}

.piePaginasHome{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 10%;
    background-color: #1c4474 ;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: white;
    
}

#logoHeader{
    width: 5%;
    height: 75%;
}

#documentoDrive{
    width: 20px;
    height: 20px;
}

img{
    width: 20%;
    height: 65%;
    cursor: pointer;
}






@media screen and (max-width: 600px) {

    body{
        height: 130vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    #homes{
        height: 130vh; 
    }
    #log{
        height: 80vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .tituloPagPie{
        /* font-family: 'Bowlby One SC', cursive; */
        font-family: 'Poppins', sans-serif;
    
        font-size: 18px;
        color: white;
        padding-left: 0px;
    }

    #myChart{
        height: 180px;
    }

    .contenedor{
        width: 90%;
        height: 90%;
        background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .izquierdo{
        width: 0%;
        height: 0%;
        background-color:  #ffffff ;
        display: none;
        align-items: center;
        justify-content: center;
        
    }
   
    .derecho{
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cuerpoPaginas{
        height: 90%;
        display: flex;
        flex-direction: column;
    }

    .cuerpoPaginasBitacoras{
        height: 90%;
        display: flex;
        flex-direction: column;
    }

    .piePaginas{
        color: white;
    background-color: #0454a4;
        width: 100%;

        height: 5%;
    }
    .izquierdoE{
        background-color: #0c3c831e;
        width: 100%;
        height: 15%;
        
    }
    .derechoE{
        background-color: #ffffff;
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .login{
        background-color:  #0c3c83  ;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items:center;
        justify-content:space-around;
        
    }

    #logoLogin{
        width: 55%;
        height: 15%;
    }

    h2{
        color: white;
        text-align: center;
        font-size: 15;
    }
    #datosUser{
        display: none;
    }

  
    .botonesH{
        /* background-color: #0c3c83; */
        width: 100%;
        height: 30%;
       
        display: flex;
        flex-wrap: wrap;
      
        justify-content: space-around;
        border-bottom: 2px solid rgb(177, 177, 177);
      
    }
    
    .bitacoras{
        /* background-color: #888888; */
        width: 100%;
        height: 35%;
        /* margin-top: 1%; */
        display: flex;
        flex-wrap: wrap;
      
        justify-content: space-around;
        border-bottom: 2px solid rgb(177, 177, 177);
    
    }
    
    .facturasBotones{
        /* background-color: #800000; */
        width: 100%;
        height: 35%;
       
        display: flex;
        flex-wrap: wrap;
      
        justify-content: space-around;
        border-bottom: 2px solid rgb(177, 177, 177);
    
    }
    #energia{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #energia:hover {
        background-color: #3e8e41;
        color:black;
    }

    #energia1{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #energia1:hover {
        background-color: #3e8e41;
        color:black;
    }





    #energiaF1{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #energiaF1:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #gas{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #gas:hover {
        background-color: #3e8e41;
        color:black;
    }
    #gasF{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #gasF:hover {
        background-color: #3e8e41;
        color:black;
    }

    #costo{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #costo:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #costoF{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #costoF:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #hombre{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #hombre:hover {
        background-color: #3e8e41;
        color:black;
    }
    #hombreF{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #hombreF:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #facturado{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #facturado:hover {
        background-color: #3e8e41;
        color:black;
    }
    #facturadoF{
        width: 80%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #facturadoF:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #usersSystem{
        width: 80%;
        height: 20%;
        background-color: #92d104   ;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #usersSystem:hover {
        background-color: #3e8e41;
        color:black;
    }

    #usersSystem1{
        width: 80%;
        height: 20%;
        background-color: #92d104   ;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #usersSystem1:hover {
        background-color: #3e8e41;
        color:black;
    }
   
   
    #semanalC{
        width: 80%;
        height: 20%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #semanalC:hover {
        background-color: #3e8e41;
        color:black;
    }



    #tableau{
        width: 80%;
        height: 20%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #tableau:hover {
        background-color: #3e8e41;
        color:black;
    }
    #historialCambios{
        width: 80%;
        height: 20%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #historialCambios:hover {
        background-color: #3e8e41;
        color:black;
    }

    

    img{
        width: 10%;
        height: 99%;
    }

    #logoHeader{
        width: 24%;
        height: 65%;
    }

    .logoHeaderH{
        width: 24%;
        height: 60%;
    }

  

    
table.rowAlternate tr:nth-child(odd)
{ background-color: #eee;
   
   
}
table.rowAlternate tr:nth-child(even)
{ background-color: #fff;
    
}
table{
    font-size: 8px;
    text-align: center;
    width: 180px;
    height: 400px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
}
.tableUsuariosLegal_paginate{
    text-align: center;
    size: 5%;
    font-size: 6px;
}

.tableUsuarios_paginate{
    text-align: center;
    size: 5%;
    font-size: 6px;
}

#tableUsuarios{
    text-align: center;
    size: 5%;
    font-size: 6px;
    width: 5%;
    height: 400px;
}
#tableUsuarios th{
    font-size: 4px;
}
#tableUsuarios td{
 
  font-size: 5px;
}

.ocultar{
    display: none;
}
table tr td {
    width: 1%;
    white-space: nowrap;
}
li{font-size: 10px;}
td{
    border-bottom: 1px solid black;
}
.titleTabla{
    background-color: #083e75;
    color: white;
    font-size:8px;
    height: 13px;
    width: 2px;
    text-align: center;
}

#agrega{
    width: 90%;
    height: 50%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#agrega:hover {
    background-color: #3e8e41;
    color:black;
}
#agregaElectrica{
    width: 90%;
    height: 50%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#agregaElectrica:hover {
    background-color: #3e8e41;
    color:black;
}

#agregaAgua{
    width: 90%;
    height: 50%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    
}
#agregaAgua:hover {
    background-color: #3e8e41;
    color:black;
}
#acep{
    width: 40%;
    height: 10%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    
}
#acep:hover {
    background-color: #3e8e41;
    color:black;
}
h3{
    font-family: 'Poppins', sans-serif;
    text-align: center;
    background-color: #0c3c831e;
    margin-bottom: 0%;
}
#ticket{
    width: 10%;
    height: 80%;
    font-size: 8px;
    color: white;
}


}



@media screen and (min-width: 601px) and (max-width: 800px) {

    body{
        height: 85vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    #homes{
        height: 130vh;
    }
   

    #tableE{
        height: 155vh;
    }
    #myChart{
        height: 130px;
    }
    
    
    #salir{
        width: 8%;
        height: 60%;
        font-size: 12px;
    }
    #ticket{
        width: 15%;
        height: 90%;
        font-size: 12px;
        color: white;
    }
    #ticketa{
        
        color: white;
    }


    .contenedor{
        width: 95%;
        height: 95%;
        background-color: aqua;
        display: flex;
        flex-direction: column;
    }

    .izquierdo{
        width: 100%;
        height: 15%;
        background-color:  #ffffff ;
        display: none;
      

        
    }
    .derecho{
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .botonesH{
        height: 100%;
        width: 100%;
      
        display: flex;
        flex-wrap: wrap;  
   
        justify-content: space-around; 
    }

    .login{
    background-color:  #0c3c83  ;
     width: 100%;
     height: 100%;
    
     
    
    }

    #logoLogin{
        width: 20%;
        height: 60%;
    }

    .inputlog{
        width: 30%;
        height: 14%;
    }
    .cuerpoPaginas{
        display: flex;
        flex-direction: column;
    }
    .tituloPaginas{
        height: 10%;
        width: 100%;
    }

    .cuerpoPaginasBitacoras{
        width: 100%;
        height: 80%;
        background-color: white;
        display: flex;
        
    
    }
    .piePaginas{
        width: 100%;
        height: 10%;
        color: white;
    background-color: #0c3c83;
    }

    .derechoE{
        background-color: #ffffff;
        width: 80%;
        height: 55%;
        display: flex;
        flex-wrap: wrap;
        padding-top: 0%;
        justify-content: center;
    }

    .izquierdoE{
        background-color: #0c3c831e;
        width: 20%;
        height: 100%;
        border-bottom: 1px solid grey;
    }
  
    #tableUsuariosLegal{

        background-color: #0c3c83;
    }

    #acep{
        width: 30%;
        height: 20%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        
    }
    #acep:hover {
        background-color: #3e8e41;
        color:black;
    }

    #energia{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #energia:hover {
        background-color: #3e8e41;
        color:black;
    }


    #energia1{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #energia1:hover {
        background-color: #3e8e41;
        color:black;
    }








    #energiaF{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #energiaF:hover {
        background-color: #3e8e41;
        color:black;
    }


    
    #energiaF1{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #energiaF1:hover {
        background-color: #3e8e41;
        color:black;
    }





    
    #gas{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #gas:hover {
        background-color: #3e8e41;
        color:black;
    }
    #gasF{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #gasF:hover {
        background-color: #3e8e41;
        color:black;
    }
    #costo{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #costo:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #costoF{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #costoF:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #hombre{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #hombre:hover {
        background-color: #3e8e41;
        color:black;
    }
    #hombreF{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #hombreF:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #facturado{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #facturado:hover {
        background-color: #3e8e41;
        color:black;
    }
    #facturadoF{
        width: 14%;
        height: 70%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 8px;
        cursor: pointer;
        
    }
    #facturadoF:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #usersSystem{
        width: 20%;
        height: 50%;
        background-color: #92d104  ;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #usersSystem:hover {
        background-color: #3e8e41;
        color:black;
    }



    #usersSystem1{
        width: 20%;
        height: 50%;
        background-color: #92d104  ;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #usersSystem1:hover {
        background-color: #3e8e41;
        color:black;
    }
    





    
    #semanalC{
        width: 18%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #semanalC:hover {
        background-color: #3e8e41;
        color:black;
    }
    #tableau{
        width: 18%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #tableau:hover {
        background-color: #3e8e41;
        color:black;
    }
    #historialCambios{
        width: 18%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #historialCambios:hover {
        background-color: #3e8e41;
        color:black;
    }
    h5{
        width: 18%;
        height: 50%; 
    }
    table.rowAlternate tr:nth-child(odd)
    { background-color: #eee;
       
       
    }
    table.rowAlternate tr:nth-child(even)
    { background-color: #fff;
        
    }
    table{
        font-size: 6px;
        text-align: center;
        width: 500px;
        height: 150px;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    }

    .tableFacturaElectrica{
        font-size: 8px;
        text-align: center;
        width: 500px;
        height: 150px;
    }
    td{
        border-bottom: 1px solid black;
    }
    .titleTabla{
        background-color: #083e75;
        color: white;
        font-size: 6px;
        height: 15px;
        text-align: center;
    }

    #agrega{
        width: 90%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
        
    }
    #agrega:hover {
        background-color: #3e8e41;
        color:black;
    }
    #agregaElectrica{
        width: 90%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
        
    }
    #agregaElectrica:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #agregaAgua{
        width: 90%;
        height: 15%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
        
    }
    #agregaAgua:hover {
        background-color: #3e8e41;
        color:black;
    }

    

    img{
        width: 15px;
        height: 15px;
    }



}

@media screen and (min-width:801px) and (max-width: 1499px) {

    body{
        height: 100vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    


    .contenedor{
        width: 70%;
        height: 90%;
        background-color: aqua;
        display: flex;
        
    }

    .izquierdo{
        width: 50%;
        height: 100%;
        background-color:  #ffffff ;
        

        
    }
    .derecho{
        width: 50%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login{
    background-color:  #0c3c83  ;
     width: 100%;
     height: 100%;
    
     
    
    }


    #myChart{
        height: 200px;
    }

    #logoLogin{
        width: 40%;
        height: 15%;
    }

    .inputlog{
        width: 40%;
        height: 5%;
    }

    .derechoE{
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    table.rowAlternate tr:nth-child(odd)
    { background-color: #eee;
       
       
    }
    table.rowAlternate tr:nth-child(even)
    { background-color: #fff;
        
    }
    table{
        font-size: 13px;
        text-align: center;
        width: 800px;
        height: 100px;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    }
    td{
        border-bottom: 1px solid black;
    }

    #tableBitacoraAgua{
    
        font-size: 9px;
        text-align: center;
        width: 750px;
        height: 300px;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
    }
    .titleTabla1{
        background-color: #083e75;
        color: white;
        font-size: 4px;
        height: 43px;
        text-align: center;
    }
    
    
    .titleTabla{
        background-color: #083e75;
        color: white;
        font-size: 8px;
        height: 18px;
        text-align: center;
    }
    li{
        font-size: 8px;
    }
    #agrega{
        width: 90%;
        height: 7%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 1px 1px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
        
    }
    #agrega:hover {
        background-color: #3e8e41;
        color:black;
    }
    #agregaElectrica{
        width: 90%;
        height: 7%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 1px 1px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
        
    }
    #agregaElectrica:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #agregaAgua{
        width: 90%;
        height: 7%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 1px 1px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
        
    }
    #agregaAgua:hover {
        background-color: #3e8e41;
        color:black;
    }
    #usersSystem{
        width: 13%;
        height: 50%;
        background-color: #92d104  ;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #usersSystem:hover {
        background-color: #3e8e41;
        color:black;
    }


    #usersSystem1{
        width: 13%;
        height: 50%;
        background-color: #92d104  ;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #usersSystem1:hover {
        background-color: #3e8e41;
        color:black;
    }




    #historialCambios{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #historialCambios:hover {
        background-color: #3e8e41;
        color:black;
    }
    
    #semanalC{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #semanalC:hover {
        background-color: #3e8e41;
        color:black;
    }

    #tableau{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #tableau:hover {
        background-color: #3e8e41;
        color:black;
    }

    #energia{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #energia:hover {
        background-color: #3e8e41;
        color:black;
    }


    #energia1{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #energia1:hover {
        background-color: #3e8e41;
        color:black;
    }





    #energiaF{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #energiaF:hover {
        background-color: #3e8e41;
        color:black;
    }


    #energiaF1{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #energiaF1:hover {
        background-color: #3e8e41;
        color:black;
    }






    #gas{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #gas:hover {
        background-color: #3e8e41;
        color:black;
    }
    #gasF{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #gasF:hover {
        background-color: #3e8e41;
        color:black;
    }
    #costo{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #costo:hover {
        background-color: #3e8e41;
        color:black;
    }

    #costoF{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        
    }
    #costoF:hover {
        background-color: #3e8e41;
        color:black;
    }

    #hombre{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #hombre:hover {
        background-color: #3e8e41;
        color:black;
    }

    #hombreF{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #hombreF:hover {
        background-color: #3e8e41;
        color:black;
    }

    h5{
        width: 10%;
        height: 50%; 
    }
    #facturado{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #facturado:hover {
        background-color: #3e8e41;
        color:black;
    }

    #facturadoF{
        width: 13%;
        height: 50%;
        background-color: #92d104;
        border: none;
        color: white;
        padding: 5px 2px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        cursor: pointer;
        
    }
    #facturadoF:hover {
        background-color: #3e8e41;
        color:black;
    }

    img{
        width: 20%;
        height: 50%;
    }

    button{
        font-size: 10px;
    }
    #usersSystem{
        font-size: 14px;
    }
    #usersSystem1{
        font-size: 14px;
    }


}
#ticketa{
    text-decoration: none;
    color: white;
}
#salirS{
    background-color: red;
}

/* #ticket{
    width: 100%;
    height: 50%;
    background-color: #92d104;
    border: none;
    color: white;
    padding: 5px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.67);
   font-family: Arial, Helvetica, sans-serif;
    
}
#ticket:hover {
    background-color: #3e8e41;
    color:black;
} */