/*Globales*/
    html,
    body {
        font-family: var(--fuente);
        box-sizing: border-box;
        font-size: 62.5%;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    *, *:before, *:after { box-sizing: inherit }
/*Fin de Globales*/
/*Tipografía*/
    h1 {
        font-size: 2.5rem;
        text-align: center;
    }
/*Tipografía*/

/*Mapa*/
    #viewDiv {
        height: 100%;
        width: 100%;
    }
    @media (min-width: 900px) {
        #viewDiv{
            width: calc(100% - 30rem);
        }
    }
    .esri-ui .esri-attribution { display: none } /*barra de información de esri*/
/*Fin de Mapa*/

/*Barra lateral*/
    .sidebar {
        position: absolute;
        background-color: #ccc;
        top: 0%;
        bottom: 0%;
        right: -30rem;
        width: 30rem;
        transition: right 0.3s ease-in-out;
        overflow-y: auto;
    }
    .sidebar.show { right: 0 }
    .sidebar_content {
        width: 100%;
        height: 100%;
    }
    .sidebar_content .header {
        text-transform: uppercase;
        font-size: 1.6rem;
        background-color: #d86464;
        padding: 1.2rem;
        margin: 2rem 1rem 0 1rem;
        border-radius: 2rem;
        color: #ffd6d6;
        font-weight: 500;
        text-align: center;
        transition: all .5s ease;
    }
    .btn_cerrar {/*boton para desplegar sidebar*/
        background-color: #ccc;
        position: absolute;
        font-size: 2rem;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        padding: 1rem;
        border-right: #929292 solid 1px;
        cursor: pointer;
        transition: right 0.3s ease-in-out, background-color 0.3s;
    }
    .btn_cerrar:hover { background-color: aquamarine }
    .btn_cerrar.active { right: 30rem }
    .dropdown {
        font-size: 1.8rem;
        display: grid;
        grid-template-columns: 75% 25%;
        flex-direction: column;
        gap: 1rem;
        margin: 0 2.5rem;
        padding: 0 1rem;
        border-left: 2px solid #929292;
        white-space: pre-wrap;
    }
    .checkbox-container {
        grid-column: 1 / 2;
        display: flex; 
        align-items: baseline; 
        gap: 5px; 
    }
    .opacityClass {
        max-width: 10rem;
    }
    @media (min-height: 400px) { .sidebar { overflow-y: hidden } }/*responsive a 400 pixeles*/
    @media (min-width: 900px) { /*responsive a 900 pixeles*/
        .sidebar { right: 0 }
        .btn_cerrar { display: none }
    }
/*Fin de barra lateral*/