:root {
  --color-serieScartter: #5e5e5e;
  --border-legend : #d8d8d8;
  --background-legend: white;
  --color-limit-legend-yellow: var(--color-warning-hover-S360);
  --color-limit-legend-greend:  green;
  --background-frecuencia: rgb(209, 163, 60);
  --banckground-largoPlazo: black;
  --background-frecuenciaStoke: var(--background-S360);
}
&[data-theme='light'] {
  --color-serieScartter: #5e5e5e;
  --border-legend : #d8d8d8;
  --background-legend: white;
  --color-limit-legend-yellow: var(--color-warning-hover-S360);
  --color-limit-legend-greend:  green;
  --background-frecuencia: rgb(209, 163, 60);
  --banckground-largoPlazo: black;
  --background-frecuenciaStoke: var(--background-S360);

}
&[data-theme='dark'] {
  --color-serieScartter: #000000;
  --border-legend : #d8d8d8;
  --background-legend: #3b3b3b;
  --color-limit-legend-yellow: yellow;
  --color-limit-legend-greend:  #33d95a;
  --background-frecuencia: #976800;
  --banckground-largoPlazo: white;
  --background-frecuenciaStoke: rgb(98 69 5);
}


#ContainerGraps{

  margin-top: 8px;
  height: calc(48% - 3vh);

  & #divGrapPareto{
    min-width: 400px;
    height: 100%;

    .highcharts-navigator-series{
      &.highcharts-series-1{
        display: none
      }
    }
  }

  & .borderGraph{
    border: 1px solid var(--color-border-S360);
    border-radius: var( --border-radius-S360);
  }

  & #divContarinerBoxWhiskers{
    margin-left: 10px;
    height: 100%;

    & #divSelectPI{
      position: relative;
      width: 120%;
      top: 5px;
      left: 56%;
    }

    & #divGraphBoxWhiskers{
      position: relative;
      margin-top: -30px;
      min-width: 200px;
      height: 100%;

      & .highcharts-boxplot-median{
        stroke: rgb(0 0 0);
        stroke-width: 0.5px;
      }
    }
  }

  & .highcharts-scrollbar{
    & .highcharts-scrollbar-track{
      stroke: transparent;
    }
  }

  & .SPI{
    z-index: 99 !important;
  }
}

#containerSecondsTable {
  width: 100%;

  #divHistograma{
    & .highcharts-series {
      & .highcharts-point {
          stroke: var(--background-frecuenciaStoke) !important;
      }
    }
  }
}

.reduceIconGraph{
  font-size: 21px;
  color: var(--color-text-S360);
}

@media (max-width: 1680px) {
  #divGrapPareto {
    max-width: 49%;
  }

  #divContarinerBoxWhiskers {
    & #divSelectPI {
        left: 55% !important;
    }
  }

}

@media (max-height: 876px) {
  #ContainerGraps{
    height: calc(45% - 3vh);
  }
}

@media (max-height: 833px) {
  #ContainerGraps{
    height: calc(400px - 3px);
    padding-bottom: 6px;
  }
}

@media (max-width: 450px) {
  #divSelectPI div{
    width: 120px;
  }
  #divContarinerBoxWhiskers{
    min-width: 399px;
    margin-top: 8px;
  }
  #divContarinerBoxWhiskers {
    margin-left: 0px !important;
  }
}