:root{
  --color-td-Table: #828282;
  --color-first-head:  #dbdbdb;
  --background-headModal: #d3a32b;
  --color-textHeadModal:black;

  --borde-histogramaRigeline1: #74520C;
  --color-histogramaRigeline1: #f3ad1c;

  --borde-histogramaRigeline2: #5E401F;
  --color-histogramaRigeline2: #c58841;

  --borde-histogramaRigeline3: #644F22;
  --color-histogramaRigeline3: #d2a649;

  --borde-histogramaRigeline4: #7A603A;
  --color-histogramaRigeline4: #ffc97a;

  --background-frecuencia: rgb(209, 163, 60);
  --banckground-largoPlazo: gray;
  --background-frecuenciaStoke: var(--background-S360);

  --border-legend : #d8d8d8;
  --background-legend: white;
  --background-nube: #f1f1f1;
  --border-nube: 0px;

  --color-lineCuadricula: rgb(230, 230, 230);

}
&[data-theme='light'] {
  --color-td-Table: #828282;
  --color-first-head:  #dbdbdb;
  --background-headModal: #d3a32b;
  --color-textHeadModal: black ;

  --borde-histogramaRigeline1: #74520C;
  --color-histogramaRigeline1: #f3ad1c4d;

  --borde-histogramaRigeline2: #5E401F;
  --color-histogramaRigeline2: #c588414d;

  --borde-histogramaRigeline3: #644F22;
  --color-histogramaRigeline3: #d2a6494d;

  --borde-histogramaRigeline4: #7A603A;
  --color-histogramaRigeline4: #ffc97a4d;

  --background-frecuencia: rgb(209, 163, 60);
  --banckground-largoPlazo: gray;
  --background-frecuenciaStoke: var(--background-S360);

  --border-legend : #d8d8d8;
  --background-legend: white;
  --background-nube: #f1f1f1;
  --border-nube: 0px;

  --color-lineCuadricula: rgb(230, 230, 230);
}
&[data-theme='dark'] {
  --color-td-Table: var(--color-text-S360);
  --color-first-head: #494949;
  --background-headModal:#1f1f1f;
  --color-textHeadModal: #d1a33c ;

  --borde-histogramaRigeline1: #D5AC4F;
  --color-histogramaRigeline1: #87600F;

  --borde-histogramaRigeline2: #B17A3A;
  --color-histogramaRigeline2:rgba(94, 64, 31, 0.6);

  --borde-histogramaRigeline3: #BD9541;
  --color-histogramaRigeline3: #7E632B;

  --borde-histogramaRigeline4: #E5B46D;
  --color-histogramaRigeline4: #997849;

  --background-frecuencia: #976800;
  --banckground-largoPlazo: white;
  --background-frecuenciaStoke: rgb(98 69 5);

  --border-legend : #d8d8d8;
  --background-legend: #3b3b3b;
  --background-nube: var(--background-S360);
  --border-nube: 1px;

  --color-lineCuadricula: rgb(81 81 81);
}


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

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

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

#containerBoxPlot{
  height: 100%;

  #divGrapBPWeek, #divGrapBPMouth{
    height: calc(50% - 10px);
  }

  & #divGrapBPMouth {
    margin-top: 18px;
  }

  & .container_check_Grafica{
    & span {
      color: var(--color-text-S360);
      cursor: pointer;
    }
  }

  .boxType {
    position: absolute;
    top: 11px;
    right: 181px;
    height: fit-content;

    padding: 0;
    margin: 0;

    .switch-toggle {
      & .switch {
          position: absolute;
          width: 94px;
          height: 18px;

        .slider:after{
          font-size: 10px;

        }
        .slider:before{
          height: 18px;
          width: 10px;
        }
        span {
          font-size: 10px;
        }
      }
    }

  }
}


#containerHistograma{
  height: 100%;
  overflow: hidden;
  background-color: var(--background-S360);

  #containerGrahHistoramRigeline {
    height: calc(100% - 20px);
    overflow-y: auto;

     /* Centrar visualmente la barra de scroll */
    &::-webkit-scrollbar {
      height: 6px; /* Altura de la barra de desplazamiento */
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background-color: var(--background-scroll);
      border-radius: 30px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #999;
      border-radius: 30px;
      cursor: pointer;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #818080; /* Color cuando se pasa el cursor */
    }

    &::-webkit-scrollbar-corner {
      background-color: transparent; /* Elimina el cuadro blanco */
    }
  }

  & .subDown{
    vertical-align: sub;
    font-size: x-small;
  }

  .titleRiglines {
    color: var(--color-text-S360);
    font-size: 18px;
    font-weight: bold;
    margin: 7px 0px 0px 11px;
  }

  .highcharts-title{
    font-size: 12px !important;
  }

  .highcharts-background {
    display: none !important;
  }

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

}

.highcharts-title, .titleRiglines {
  font-size: 16px !important;
}

.reduceIconGraph{
  font-size: 21px;
}

@media  (min-width: 857px) and (max-width: 1343px)   {
  #containerBoxPlot {
    flex: 0 0 48.7%;
    max-width: 48.7%;
  }
}



@media screen and (max-width: 1000px) {
  .highcharts-title, .titleRiglines {
    font-size: 12px !important;
  }
}

@media (max-width: 857px)   {
  #containerBoxPlot, #containerHistograma {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #containerHistograma{
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-top: 12px;
  }
}

@media screen and (max-width: 414px) {
  .highcharts-title, .titleRiglines {
    font-size: 10px !important;
  }
}