/**
  * @yaireo/ui-range - CSS-only custom, flexible, range input
  *
  * @version v2.1.15
  * @homepage https://github.com/yairEO/ui-range
  */

  .range {
    --primaryColor: #0366d6;
    --value-active-color: white;
    --value-background: #000000;
    --value-font: 600 14px/1 Poppins;
    --progress-color: #EEE;
    --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) inset;
    --fill-color: var(--primaryColor);
    --thumb-size: 20px;
    --track-height: calc(var(--thumb-size) / 2);
    --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    --ticks-thickness: 1px;
    --ticks-height: 5px;
    --ticks-color: silver;
    --step: 1;
    --ticks-count: calc(var(--max) - var(--min)) / var(--step);
    --maxTicksAllowed: 30;
    --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
    --x-step: Max(
      var(--step),
      var(--too-many-ticks) * (var(--max) - var(--min))
    );
    --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
    --tickIntervalPerc: calc(
      (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *
        var(--tickEvery, 1)
    );
    --completed: calc(
      (var(--value) - var(--min)) / (var(--max) - var(--min)) * 100
    );
    --LTR: 1;
    /* display: inline-block; */
    height: max(var(--track-height), var(--thumb-size));
    background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
    background-size: var(--tickIntervalPerc) var(--ticks-height);
    background-position-x: calc(var(--thumb-size) / 2);
    background-position-y: var(--flip-y, bottom);
    position: relative;
    z-index: 1;
    padding-bottom: var(--flip-y, var(--ticks-height));
    padding-top: calc(var(--flip-y) * var(--ticks-height));
   }

   [dir=rtl] .range {
     --LTR: -1;
   }
   .range[data-ticks-position='top']{
      --flip-y: 1
   }
   .range::before, .range::after {
     --offset: calc(var(--thumb-size) / 2);
     content: counter(x);
     font: 14px Poppins;
     position: absolute;
     bottom: var(--flip-y, -2.5ch);
     top: calc(-2.5ch * var(--flip-y));
     opacity: var(--min-max-opacity, 0.5);
     pointer-events: none;
   }
   .range::before {
     counter-reset: x var(--min);
     left: var(--offset);
     transform: translateX(calc(-50% * var(--LTR)));
   }
   [dir=rtl] .range::before {
     left: auto;
     right: var(--offset);
   }
   .range::after {
     counter-reset: x var(--max);
     right: var(--offset);
     transform: translateX(calc(50% * var(--LTR)));
   }
   [dir=rtl] .range::after {
     right: auto;
     left: var(--offset);
   }
   .range__progress {
     position: absolute;
     left: 0;
     top: calc(50% - var(--ticks-height) / 2);
     transform: var(--flip-y, translateY(-50%) translateZ(0));
     width: 100%;
     height: calc(var(--track-height));
     pointer-events: none;
     z-index: -1;
     box-shadow: var(--progress-shadow);
     border-radius: 20px;
     background: var(--fill-color, white);
   }
   .range__progress::after {
     content: "";
     display: block;
     margin-left: auto;
     margin-right: -1px;
     width: calc( (100% - var(--completed) * 1%) + (var(--completed) / 100) * var(--thumb-size) );
     height: 100%;
     background: var(--progress-color, #eee);
     box-shadow: inherit;
     border-radius: 0 20px 20px 0;
   }
   [dir="rtl"]
   .range__progress::after{
      margin-right:auto;
      margin-left:-1px;
      border-radius:20px 0 0 20px
   }
   /* bola range */
   .range > input {
     -webkit-appearance: none;
     width: 100%;
     height: var(--thumb-size);
     margin: 0;
     cursor: -webkit-grab;
     cursor: grab;
     outline: none;
     background: none;
   }
   .range > input::-webkit-slider-thumb {
     -webkit-appearance: none;
             appearance: none;
     height: var(--thumb-size);
     width: var(--thumb-size);
     border-radius: 50%;
     background: var(--thumb-color, white);
     border: 1px solid silver;
     box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
   }
   .range > input::-moz-slider-thumb {
     -moz-appearance: none;
          appearance: none;
     height: var(--thumb-size);
     width: var(--thumb-size);
     border-radius: 50%;
     background: var(--thumb-color, white);
     border: 1px solid silver;
     box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
   }
   .range > input::-ms-thumb {
     appearance: none;
     height: var(--thumb-size);
     width: var(--thumb-size);
     border-radius: 50%;
     background: var(--thumb-color, white);
     border: 1px solid silver;
     box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow);
   }
   .range > input:active {
     cursor: -webkit-grabbing;
     cursor: grabbing;
     --thumb-color: var(--fill-color);
     --inner-shadow: 0 0 0 calc(var(--thumb-size) / 4) inset white;
   }
   .range>input:active+output{
      transition:0s
   }
   /* .range>input:hover+output{
      --value-background: var(--primaryColor);
      color:var(--value-active-color);
      transform:translate(var(--x-offset), 0);
      box-shadow:0 0 0 3px var(--value-background)
   } */
   /* texto value */
   .range > output{
      --x-offset: calc(var(--completed) * -1% * var(--LTR));
      --pos: calc(
        ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%
      );
      pointer-events:none;
      position:absolute;
      z-index:5;
      background:var(--value-background);
      border-radius:2px;
      color: white;
      padding:1px 4px;
      top:-4ch;
      left:var(--pos);
      transform:translate(var(--x-offset), 6px);
      transition:all .12s ease-out, left 0s, top 0s
   }
   [dir=rtl] .range > output {
     left: auto;
     right: var(--pos);
   }
   .range > output::after {
     content: var(--text-value);
     font: var(--value-font);
   }