sict_csic/static/css/mapa.css

#map {
    height: calc(90% - 44px);
    width: 98% !important;
    margin-left: auto;
    margin-right: auto;
    /*position: absolute !important;*/
}

.specialWidth {
    width: 100px;
}

table,
thead,
tbody,
th,
td {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    border: #691c32 solid 1px;
    border-collapse: collapse;
    font-size: 12px;
}

th {
    text-align: right;
    /* width: 180px; */
    background: #691c32;
    color: white;
    padding: 5px;
}

td {
    background-color: white;
}

th,
td {
    text-align: center;
}

.centerText {
    text-align: center;
}

.headerContainer {
    background-color: #691c32;
    color: white;
    margin-bottom: 1px;
    padding: 1px;
}

#title {
    text-align: center;
}

#tableSitios td {
    background-color: #ffffff;
}


/* tabla sticky thead test */

#tableSitios {
    table-layout: fixed;
    border-collapse: collapse;
}

#tableSitios tbody {
    display: block;
    overflow: auto;
    width: auto;
    height: 400px;
}

#tableSitios thead tr {
    display: block;
}

#tableSitios th,
#tableSitios td {
    width: 100px;
    border: 1px solid #000000;
}


/* tabla flotante */

#tableContainerSitios {
    /* nuevo inicio */
    /* overflow: auto; */
    height: 400px;
    /* nuevo fin */
    position: absolute;
    z-index: 1;
    top: 25%;
    padding-left: 5px;
    /*
    
    
    
*/
}

#contImgDownloads {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-areas: "nsitios nsitios nsitios" "csvDescarga jsonDescarga txtDescarga";
    justify-items: center;
    align-items: center;
    padding: 10px;
    /* Estilos */
    background-color: #691c32;
    font-size: 20px;
    color: #ffffff;
    font-weight: bolder;
    border-radius: 8px;
    margin-bottom: 8px;
}

#nsitios {
    grid-area: nsitios;
}

#jsonDescarga {
    grid-area: jsonDescarga;
}

#csvDescarga {
    grid-area: csvDescarga;
}

#txtDescarga {
    grid-area: txtDescarga;
}

#map {
    position: absolute;
    z-index: -1;
    width: 100%;
}

#csvDescarga,
#jsonDescarga,
#txtDescarga {
    cursor: pointer;
}


/* #contenedorMapa {
display: grid;
grid-template-columns: 15% 85%;
} */


/* inicio table vertical test */


/* https://codepen.io/veekungx/pen/MWgvBxe?editors=1100 */

.vertical {
    display: -ms-grid;
    -ms-grid-rows: auto auto;
    -ms-grid-columns: auto auto;
    display: grid;
    grid-template-columns: min-content min-content;
    grid-template-rows: auto auto;
    grid-template-areas: "caption caption" "head body";
}

.vertical thead {
    grid-area: head;
    display: flex;
    flex-shrink: 0;
    min-width: min-content;
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.vertical tbody {
    grid-area: body;
    display: flex;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

.vertical tr {
    display: flex;
    flex-direction: column;
    min-width: min-content;
    flex-shrink: 0;
}

.vertical td,
.vertical th {
    display: block;
}

.vertical caption {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: caption;
}


/* fin table vertical test */

@media screen and (min-width: 0px) and (max-width:720px) {
    #tableContainerSitios {
        /* nuevo inicio */
        /* overflow: auto; */
        height: 400px;
        /* nuevo fin */
        position: relative;
        top: 3px;
        /*z-index: 1;*/
        /*top: 25%;*/
    }
    #tableSitios {
        margin-left: auto;
        margin-right: auto;
    }
    #tableSitios tbody {
        height: 225px;
    }
    #contImgDownloads {
        grid-area: contImgDownloads;
    }
}