#chart-column{
	margin-top: 10px;
    padding-left: 20px;
    position: relative;
    min-width: 20%;
}

#chart-column-header h1{
    /* centramos */
    text-align: center;

}

#close-chart-column-button {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    border: 2px solid #ccc; /* Añade un borde */
    border-radius: 30%; /* Haz el borde redondeado, opcional */
    padding: 5px; /* Añade algo de espacio interno para el borde */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CSS para cuando el mouse está sobre el div */
/* #close-chart-column-button:hover {
    background-color: #4f75f2;
    border-color: #4f75f2; 
} */

#close-chart-column-button img {
    height: 25px;
    width: 25px;
}

/* ---------------------Contenedores de de sistema e individuales-------- */
.charts-container h3{
    text-align: center;
}
.chart-column-menu {
    width: auto;
    display: flex;
    justify-content: space-between;
}

/* boton para mostrar-esconder graficos */
.charts_visibility_buttons{
    cursor: pointer;
}

/* ---------------------Contenedores de graficos de sistema e individuales-------- */

/* contenedor de todos los graficos */
.charts-content{
    justify-content: center;
}

/* Contenedor de un gráfico incluyendo menu y botones */
.chart-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.17); /* Sombra para resaltar */
    padding: 1vh; /* Espacio interno */
    margin-top: 2vh; /* Margen externo */
    
}

    .eviewer-graph{
        border-radius: 15px; /* Bordes redondeados */
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3); /* Sombra para resaltar */
        padding: 20px; /* Espacio interno */
        margin-bottom: 1vh; /* Margen externo */
    }

    /* Menú que está sobre todo gráfico */
    .chart-menu{
        width: auto;
        display: flex;
        justify-content: space-between;
        margin-bottom: 2vh;
    }
        /* Div hijo de chart-menu,  muestra selects etapa inicial y final */
        .time-select{
            width: 50%;
            min-width: 160px !important;
        }
        /* Clase div de titulos de etapa inicial y final */
        .time-select-title{
            display: flex;
            justify-content: left;
        }
        .tsel-start-title {
            text-align: left;
            width: 35%; /* Puedes ajustar este valor para cambiar el espacio entre los títulos */
        }
        .tsel-start {
            width: 50%;
        }

        .tsel-end-title {
            text-align: left;
            width: 35%; /* Puedes ajustar este valor para cambiar el espacio entre los títulos */
        }
        .tsel-end {
            width: 50%;
        }
        .hydrology-container{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .hsel-title{
            text-align: center;
        }
        .hydro-select{
            width: 55%;
        }
        .chartmenu-button{
            margin-bottom: 5px;
            margin-left: 10px;
        }
        .chartmenu-button img {
            height: 14px;
            width: 14px;
            /* Otros estilos comunes para las imágenes dentro de los botones */
        }
        .exp-csv-button,.exp-excel-button,.exp-button,.quit-button {
            cursor: pointer;
        }
        .move-button{
            cursor: move;
        }