.scrollbarSlider {
          overflow-y: auto;
          /*
          height: 70%;
          top:;
          width: 50%;
          overflow: auto;
          padding: 0 10px;*/
      }
       /*       ScrollBar 6        */
        
      .scrollbarSlider::-webkit-scrollbar {
          width: 8px;
          height:70%;
          top:20%;
      }
      
      .scrollbarSlider::-webkit-scrollbar-track {
          border-radius: 6px;
          background-color: rgba(149, 165, 166, 0.6); /*#95a5a6;*/
          border: 1px solid rgba(202, 202, 202, 0.4); /* #cacaca77 */
          /*opacity:0.8;*/
      }
      
      .scrollbarSlider::-webkit-scrollbar-thumb {
          border-radius: 6px;
          background-color: rgba(44, 62, 80, 0.8); /*#2c3e50;*/
          /*opacity:0.8;*/
      }

      /* slider style */
      .welcome_slider {
        display: block;
        margin: auto;
        margin-top: 4vmin;
        width: 75%;
        height: 4vmin;
        background: linear-gradient(to right, #00ff00, #0099ff);
        outline: none;
        opacity: 0.7;
        transition: opacity 0.2s;
      }
      .welcome_slider:hover {
        opacity: 1;
      }

      .welcome_slider::-webkit-slider-thumb {
        appearance: none;
        width: 30px; /* Increase the width of the slider thumb */
        height: 30px; /* Increase the height of the slider thumb */
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
      }

      .welcome_sliderGreen {
        display: block;
        margin: auto;
        margin-top: 4vmin;
        width: 75%;
        height: 4vmin;
        background: linear-gradient(to right, #0000ff, #00ff99);
        outline: none;
        opacity: 0.7;
        transition: opacity 0.2s;
      }
      .welcome_sliderGreen:hover {
        opacity: 1;
      }

      .welcome_sliderGreen::-webkit-slider-thumb {
        appearance: none;
        width: 30px; /* Increase the width of the slider thumb */
        height: 30px; /* Increase the height of the slider thumb */
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff, 0 0 40px #0000ff;
      }

      .welcome_sliderReversed {
        display: block;
        margin: auto;
        margin-top: 4vmin;
        width: 75%;
        height: 4vmin;
        background: linear-gradient(to left, #00ff00, #0099ff);
        outline: none;
        opacity: 0.7;
        transition: opacity 0.2s;
      }
      .welcome_sliderReversed:hover {
        opacity: 1;
      }

      .welcome_sliderReversed::-webkit-slider-thumb {
        appearance: none;
        width: 30px; /* Increase the width of the slider thumb */
        height: 30px; /* Increase the height of the slider thumb */
        background: #ffffff;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
      }

      .sliderColorBlue {
        background: linear-gradient(to right, #00ff00, #0099ff);
      }
      .sliderColorBlue::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
      }
      .sliderColorBlueReversed {
        background: linear-gradient(to right, #00ff00, #0099ff);
      }
      .sliderColorBlueReversed::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
      }
      .sliderColorOrange {
        background: linear-gradient(to right, #00ff00, #0099ff);
      }
      .sliderColorOrange::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00;
      }
      .sliderColorGreen {
        background: linear-gradient(to right, #0000ff, #00ff99);
      }
      .sliderColorGreen::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff, 0 0 40px #0000ff;
      }
      .sliderColorGreenReversed {
        background: linear-gradient(to left, #0000ff, #00ff99);
      }
      .sliderColorGreenReversed::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #0000ff, 0 0 20px #0000ff, 0 0 30px #0000ff, 0 0 40px #0000ff;
      }
      .sliderColorRed {
        background: linear-gradient(to right, #ff0000, #ff9900);
      }
      .sliderColorRed::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000;
      }
      .sliderColorWhite {
        background: linear-gradient(to right, #ffffff, #ffffff);
      }
      .sliderColorWhite::-webkit-slider-thumb  {
        box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff;
      }

      .welcome_sliderValue,
      .welcome_sliderValueDeg {
        display: block;
        text-align: center;
        margin-top: 1vmin;
      }

      .welcome_sliderValue-bar {
        --h: 5vh;
        --stripe-color: rgba(255, 255, 255, 0.5);
        width: 100%;
        height: var(--h);
        display: block;
        margin: auto;
        margin-top: 3vmin;

        background-color: #ddd;
        background-color: #15171e;
      }

      .welcome_sliderStripes {
        width: 80%;
        height: 100%;
        background-image: linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent);
        background-size: calc(var(--h) / 2) calc(var(--h) / 2);
        /* background-color: #00ff00; */
        border-radius: 5px;
      }