#graphics_container{
    height: calc(100vh - 90px);
    /* border: 1px solid var(--color-border-S360); */
    width: 100%;
    & .grafica {
        height: calc(100vh - 90px) !important; 
        overflow: hidden !important;
    }
    .graficaStyleCss {
        & .highcharts-container {
            & .highcharts-root {
                & .highcharts-xaxis text {
                    fill: var(--color-text-S360) !important;
                }
                & .highcharts-yaxis text {
                    fill: var(--color-text-S360) !important;
                }
            }
        }
    }

    .Container_Graph_scroll{
        overflow-x: auto;
        height: 100%;
        width: 100%;
        position: relative;
        #container_graphic{
            width: 100%; 
            height: 100%;
        }

        .legend-toggle {
            display: flex;
            align-items: center;
            gap: 4px;
            font-family: Arial, sans-serif;
            font-size: 14px;
    
            position: absolute;
            top: 54px;
            left: 12px;

            #legendStatus{
                font-size: 10px;
                z-index: 2;
                color: var(--color-text-secundary-S360);
            }
        }
    
        .switch {
            position: relative;
            display: inline-block;
            width: 28px;
            height: 12px;
        }
    
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
    
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 34px;
        }
    
        .slider:before {
            position: absolute;
            content: "";
            height: 8px;
            width: 8px;
            left: 3px;
            bottom: 2.2px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
    
        input:checked + .slider {
            background-color: #4caf50;
        }
    
        input:checked + .slider:before {
            transform: translateX(14px);
        }
    
        .slider:hover {
            background-color: #a6a6a6;
        }
    }

    .highcharts-legend-item{
        span{
            color: var(--color-text-S360) !important;
            width: auto;
        }
    }
    
    .highcharts-xaxis-labels{
        transform: translateY(10px);
    }
    
    .highcharts-xaxis{
        text{
            transform: translateY(5px);
        }
    }

    .message-container{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        
        span{
            opacity: 0.5;
            color: var(--color-text-S360);
        }
    }
}

.comparacion{
    .highcharts-data-labels{
        >:nth-child(3n) {
            opacity: 1 !important;
            text{
                transform: translateY(20px);
                opacity: 1 !important;
            }
        }
    }
    & .highcharts-title{
        fill: var(--color-text-S360) !important;
    }
}

.highcharts-scrollable-mask{
    fill: var(--scrollbar);
}

/* Comentar esto para ocultar el tooltip  */
/* .highcharts-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 100;
    transform: translate(6.5%, 30%);
} */

.highcharts-legend-item {
    max-width: 150px;
    min-width: 120px;
   & span {
    white-space: normal !important;
  }
}