.lineaAlterna {
    background-color: #F5F5F5;
    color:black;
    white-space:nowrap;
    border-bottom: 1px #CCCCCC solid;    
}
.lineaAlterna td {
    white-space:nowrap;
}
    .lineaAlterna:hover {
        text-decoration: none;
        background-position: center -68px;
        color: white;
        -webkit-animation: lineaEffect 150ms;
        -moz-animation: lineaEffect 150ms;
        animation: lineaEffect 150ms;
        background-color: #CD5A69;
    }
.lineaNormal {
    background-color: #F5F5F5;
    color: black;
    white-space: nowrap;
    border-bottom: 1px #CCCCCC solid;    
}
.lineaNormal td {
    white-space: nowrap;
}
.lineaNormal:hover {
    text-decoration: none;
    background-position: center -68px;
    color: white;
    -webkit-animation: lineaEffect 150ms;
    -moz-animation: lineaEffect 150ms;
    animation: lineaEffect 150ms;
    background-color: #CD5A69;
}
@-webkit-keyframes lineaEffect {
    from {
        background-color: #F5F5F5;
        color: black;
    }
    to {
        background-color: #CD5A69;
        color: white;
    }
}
@-moz-keyframes lineaEffect {
    from {
        background-color: #F5F5F5;
        color: black;
    }
    to {
        background-color: #CD5A69;
        color: white;
    }
}
@keyframes lineaEffect {
    from {
        background-color: #F5F5F5;
        color: black;
    }

    to {
        background-color: #CD5A69;
        color: white;
    }
}
.tituloListado {
    white-space:nowrap;
    height: 30px;
}
.tituloListado a {
    text-align: left;
    vertical-align: middle;
    color: #FFFFFF;
    text-decoration: none;
    white-space:nowrap;
    font: bold 11px Arial, Helvetica, sans-serif;
}
.tituloListado td {
    text-align: left;
    vertical-align: middle;
    background-color: #828c95;
    color: #FFFFFF;
    text-decoration: none;
    white-space:nowrap;
    font: bold 11px Arial, Helvetica, sans-serif;    
}
.tituloListado td:hover {
    background-color: #CCCCCC;
    color: #FFFFFF;
    -webkit-animation: tituloEffect 250ms;
    -moz-animation: tituloEffect 250ms;
    animation: tituloEffect 250ms;
}
@-webkit-keyframes tituloEffect {
    from {background-color: #828c95;}
    to {background-color: #CCCCCC;}
}
@-moz-keyframes tituloEffect {
    from {background-color: #828c95;}
    to {background-color: #CCCCCC;}
}
@keyframes tituloEffect {
    from {background-color: #828c95;}
    to {background-color: #CCCCCC;}
}
.valorLista {
    padding-left: 5px;
    padding-right: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
}
.lineaTotales {    
    text-align: right;
    vertical-align: middle;
    background-color: #c3ccd9;
    color: black;
    height: 18px;
    text-decoration: none;
    white-space:nowrap;    
    font: normal 12px Arial, Helvetica, sans-serif;
}
.lineaTotales:hover {
    background-color: #95A4BB;
    color:black;
    -webkit-animation: totalEffect 250ms;
    -moz-animation: totalEffect 250ms;
    animation: totalEffect 250ms;
}
@-webkit-keyframes totalEffect {
    from {background-color: #c3ccd9; color:black; }
    to {background-color: #95A4BB; color:black; }
}
@-moz-keyframes totalEffect {
    from {background-color: #c3ccd9; color:black; }
    to {background-color: #95A4BB; color:black; }
}
@keyframes totalEffect {
    from {background-color: #c3ccd9; color:black; }
    to {background-color: #95A4BB; color:black; }
}
.lineaBlanca {
    background-color:transparent;
    height: 18px;
}
.tablaReporte {
    font: normal 11px Arial, Helvetica, sans-serif;
    margin: 0px 10px 0px 10px;
    display: inline-block;
}
.tablaReporte table {
    border-collapse: collapse;    
}
.tablaReporte td {
    border: 0px;
    height:14px;
    padding-left:5px;
    padding-right:10px;
    padding-top:4px;
    padding-bottom:4px;
}
.mensajeErrorReporte {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #CC0000;
    color: white;
    font-weight: bold;
    padding: 5px 10px 5px 10px;
    font-size: 12px;
    line-height: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 10000
}
.botonPagina {
    display: inline-block;
    height: 30px;
    width: 30px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-top: 5px;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px #005f84 solid;
    background-color: #005f84;
}
    .botonPagina:hover {
        background-color: white;
        -webkit-animation: colorPaginaEffect 400ms;
        -moz-animation: colorPaginaEffect 400ms;
        animation: colorPaginaEffect 400ms;
        color: #005f84;
    }
.botonPagina1 {
    background-image: url('../Images/page-1-a.png');
    background-position: center;
    background-repeat: no-repeat;
}
.botonPagina1:hover {
    background-image: url('../Images/page-1-b.png');
    background-position: center;
    background-repeat: no-repeat;
}
.botonPagina2 {
    background-image: url('../Images/page-2-a.png'); 
    background-position: center;
    background-repeat: no-repeat;
}
.botonPagina2:hover {
    background-image: url('../Images/page-2-b.png');
    background-position: center;
    background-repeat: no-repeat;
}
.botonPaginaSeleccion {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    margin-top: 5px;
    text-align: center;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px #005f84 solid;
    color: #005f84;
}
@-webkit-keyframes colorPaginaEffect {
    from {
        background-color: #005f84;
        color: white;
    }
    to {
        background-color: white;
        color: #005f84;
    }
}
@-moz-keyframes colorPaginaEffect {
    from {
        background-color: #005f84;
        color: white;
    }
    to {
        background-color: white;
        color: #005f84;
    }
}
@keyframes colorPaginaEffect {
    from {
        background-color: #005f84;
        color: white;
    }
    to {
        background-color: white;
        color: #005f84;
    }
}
.ultimaPagina {
    display: inline-block;
    height: 18px;
    width: 30px;
    border: 0px transparent solid;
    background-color: white;
    font-weight: bold;
    font-size: 12px;
    margin-right: -3px;
    margin-top: 5px;
    text-align: center;
    vertical-align: middle;
    padding-top: 10px;
    color: #005f84;
}
.tituloAscendente {
    background-image: url('../Images/order-asc-n.png');
    background-repeat: no-repeat;
    background-position-x:3px;
    background-position-y:center;
}
.tituloDescendente {
    background-image: url('../Images/order-desc-n.png');
    background-repeat: no-repeat;
    background-position-x:3px;
    background-position-y:center;
}
.tituloNumeracion1::before {
    font-size: 8px;
    content: "1";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion2::before {
    font-size: 8px;
    content: "2";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion3::before {
    font-size: 8px;
    content: "3";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion4::before {
    font-size: 8px;
    content: "4";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion5::before {
    font-size: 8px;
    content: "5";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion6::before {
    font-size: 8px;
    content: "6";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion7::before {
    font-size: 8px;
    content: "7";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion8::before {
    font-size: 8px;
    content: "8";
    padding-left: 7px;
    padding-right: 3px;
}
.tituloNumeracion0::before {
    font-size: 8px;
    content: "";
    padding-left: 7px;
    padding-right: 3px;
}
.zoomImage {
  transition: transform .2s;
  -webkit-transition: transform .2s;
  -moz-transition: transform .2s;
}
.zoomImage:hover {
    transform: scale(1.6) translate(0, 22%);    
    -moz-transform: scale(1.6) translate(0, 22%);    
    -webkit-transform: scale(1.6) translate(0, 22%);    
}
.ecoPoint {
    height: 12px;
    width: 18px;
}
#celdaMenu1 {
    padding-left: 10px;
    text-align: left;
    vertical-align: middle;
    height: 35px;    
}
#celdaMenu1 .menuReportes {
    display: none;
    position: absolute;
    width: 100vw;
}
#celdaMenu1 .menuActual1 {
    font-size: 14px;
    color: white;
    font-weight: bold;
    background-color: transparent;
    border: 0px;
    text-align: left;
    cursor: pointer;
    padding: 0;
    width: 95vw;
    text-align: center;
    line-height: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
}
    #celdaMenu1 table {
        margin: auto;
        -webkit-box-shadow: 5px 5px 24px -3px rgba(0,0,0,0.75);
        -moz-box-shadow: 5px 5px 24px -3px rgba(0,0,0,0.75);
        box-shadow: 5px 5px 24px -3px rgba(0,0,0,0.75);
        width: 60%;
        background-color: var(--colorMenuReporte);
    }
#celdaMenu1 table td {
    display: block;
    height: 40px;
    vertical-align: middle;
}
#celdaMenu1 .menuReporte {
    color: white;
    display: block;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    line-height: 40px;
    padding: 0 10px 0 10px;
    border: 0px;
    background-color: transparent;
    width: 100%;
}
    #celdaMenu1 .menuReporteSeleccionado {
        background-color: white;
        display: block;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        line-height: 40px;
        padding: 0 10px 0 10px;
        border: 0px;
        width: 100%;
        color: var(--colorMenuReporte);
    }
#celdaMenu2 {
    font-size: 12px;
    padding-left: 0;
    text-align: left;
    vertical-align: middle;
    height: 35px;
}
#celdaMenu2 .menuOpciones {
    position: absolute;
    width: 100vw;
    display: none;
}
    #celdaMenu2 .menuActual2 {
        height: 30px;
        line-height: 30px;
        background-color: white;
        font-weight: bold;
        font-size: 12px;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 99vw;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #005f84;
        color: #005f84;
    }
#celdaMenu2 table {
    margin: auto;
    -webkit-box-shadow: 5px 5px 24px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 24px -3px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 24px -3px rgba(0,0,0,0.75);
    background-color: white;
}
#celdaMenu2 table td {
    display: block;
    height: 40px;
    vertical-align: middle;
    padding: 0;
    width: 160px;
    text-align: center;
}
#celdaMenu2 table td:first-child {
    padding-top: 5px;
}
.botonOpcion {
    height: 35px;
    background-color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 150px;
    border: 1px solid #005f84;
    color: #005f84;
}
.botonOpcion:hover {
    background-color: #005f84;
    color: #005f84;
    -webkit-animation: colorEffect 400ms;
    -moz-animation: colorEffect 400ms;
    animation: colorEffect 400ms;
}
.botonOpcion2 {
    height: 35px;
    background-color: white;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 150px;
    border: 1px solid var(--colorMenuReporte);
    color: var(--colorMenuReporte);
}
.botonOpcion2:hover {
    background-color: var(--colorMenuReporte);
    color: var(--colorMenuReporte);
    -webkit-animation: colorEffect2 400ms;
    -moz-animation: colorEffect2 400ms;
    animation: colorEffect2 400ms;
}
.cuadroConfiguracion {
    padding-top: 10px;
}
.anchoDia a {
    display: inline-block;
    width: 30px;
    padding: 2px;
    text-decoration: none;
    -webkit-transition: transform .2s;
    -moz-transition: transform .2s;
    transition: transform .2s;
    border: 0px solid transparent;
    color: black;
}
.anchoDia a:hover {
    background-color: gainsboro;
    transform: scale(1.5);
    border: 0px solid gray;
    color: black;
}
.diaMesSeleccionado a {
    background-color: gray;
    color: white;
}
.diaMesSeleccionado a:hover {
    background-color:gray;
    color: white;
}
.cuadroTextoConfigFiltro {
    max-width: 300px;
    width: 90%;
}
.cuadroVistaPrevia {
    padding-top: 5px;
}
@-webkit-keyframes colorEffect {
    from {
        background-color: white;
        color: #005f84;
    }
    to {
        background-color: #005f84;
        color: white;
    }
}
@-moz-keyframes colorEffect {
    from {
        background-color: white;
        color: #005f84;
    }
    to {
        background-color: #005f84;
        color: white;
    }
}
@keyframes colorEffect {
    from {
        background-color: white;
        color: #005f84;
    }
    to {
        background-color: #005f84;
        color: white;
    }
}
@-webkit-keyframes colorEffect2 {
    from {
        background-color: white;
        color: var(--colorMenuReporte);
    }
    to {
        background-color: var(--colorMenuReporte);
        color: white;
    }
}
@-moz-keyframes colorEffect2 {
    from {
        background-color: white;
        color: var(--colorMenuReporte);
    }
    to {
        background-color: var(--colorMenuReporte);
        color: white;
    }
}
@keyframes colorEffect2 {
    from {
        background-color: white;
        color: var(--colorMenuReporte);
    }
    to {
        background-color: var(--colorMenuReporte);
        color: white;
    }
}
@media only screen and (min-width: 700px) {
    .cuadroVistaPrevia {
        padding-top: 20px;
    }
    #celdaMenu1 .menuReportes {
        position: initial;
        display: initial;
        width: auto;
    }
    #celdaMenu1 .menuActual1 {
        display: none;
    }
    #celdaMenu1 table {
        margin-right: auto;
        margin-left: 0px;
        height: auto;
        background: transparent;
        border: none;
        -webkit-box-shadow: initial;
        -moz-box-shadow: initial;
        box-shadow: initial;
        -webkit-border-radius: initial;
        -moz-border-radius: initial;
        border-radius: initial;
        -webkit-appearance: initial;
        -moz-appearance: initial;
        width: initial;
    }
        #celdaMenu1 table td {
            display: initial;
            height: auto;
            vertical-align: middle;
            width:initial;
        }
    #celdaMenu1 .menuReportes {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 0;
    }
    #celdaMenu1 .menuReporte {
        font-size: 14px;
        color: white;
        font-weight: normal;
        background-color: transparent;
        border: 0px;
        text-align: left;
        cursor: pointer;
        display: inline-block;
        padding: 0px 20px 0px 0px;
        line-height: initial;
        width: auto;
    }
    #celdaMenu1 .menuReporte:hover {
        text-decoration: underline;
    }
    #celdaMenu1 .menuReporteSeleccionado {
        font-size: 14px;
        font-weight: bold;
        background-color: transparent;
        border: 0px;
        text-align: left;
        cursor: pointer;
        display: inline-block;
        padding: 0px 20px 0px 0px;
        line-height: initial;
        width: auto;
        background-color: var(--colorMenuReporte);
        color: white;
    }    
    .cuadroConfiguracion {
        padding-top: 80px;
    }
}
@media only screen and (min-width: 900px) {
    #celdaMenu1 {
        padding-left: 210px;
    }
    #celdaMenu2 {
        padding-left: 10px;
    }
    #celdaMenu2 .menuOpciones {
        position: initial;
        display: initial;
        width: auto;
        display: initial;
    }
    #celdaMenu2 .menuActual2 {
        display: none;
    }
    #celdaMenu2 table {
        margin: auto;
        -webkit-box-shadow: initial;
        -moz-box-shadow: initial;
        box-shadow: initial;
        background-color: white;
        margin-right: auto;
        margin-left: 0px;
        height: auto;
        background: transparent;
        border: none;
    }
    #celdaMenu2 table td {
        display: initial;
        height: auto;
        vertical-align: middle;
        padding: 0 10px 0 0;
        width: 150px;
        text-align: initial;
    }
    #celdaMenu2 table td:first-child {
        padding-top: 0;
    }
    .botonOpcion {
        height: 20px;
    }
    .botonOpcion2 {
        height: 20px;        
    }
}