input[type='range'] {

  width: 100%;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  border-radius: 0.8rem
}

input[type="range"]::-webkit-slider-container {

  border-radius: 0.8rem;

  border-width: 1px;

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(var(--color-navy-03) / var(--tw-border-opacity));

  --tw-bg-opacity: 1;

  background-color: rgb(var(--color-navy-04) / var(--tw-bg-opacity))
}

input[type='range']::-webkit-slider-thumb {

  margin-top: -0.8rem;

  height: 2.4rem;

  width: 2.4rem;

  cursor: pointer;

  -webkit-appearance: none;

          appearance: none;

  border-radius: 4.0rem;

  border-width: 4px;

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(var(--color-blue) / var(--tw-border-opacity));

  background-image: linear-gradient(298.79deg, #2DB5D2 -23.47%, #00FA6C 92.01%, #2DB5D2 214.83%);
}

input[type='range']::-webkit-slider-runnable-track {

  margin: -0.1rem;

  height: 0.8rem;

  border-radius: 0.8rem;

  background-image: linear-gradient(to right, #171C3A, #171C3A);;

  background-size: var(--background-size, 0%) 100%;

  background-repeat: no-repeat
}

.slider label {

  font-family: var(--font-family-din-pro);

  font-size: var(--font-body-2-m-size);

  line-height: var(--font-body-2-m-line-height, normal);

  letter-spacing: var(--font-body-2-m-letter-spacing, 0);

  font-weight: var(--font-body-2-m-weight, 400)
}

.slider div {

  display: flex;

  width: 100%;

  justify-content: space-between
}

.slider {

  position: relative
}

.slider p {

  position: absolute;

  top: -3.2rem;

  left: 50%;

  --tw-text-opacity: 1 !important;

  color: rgb(var(--color-green) / var(--tw-text-opacity)) !important
}

.slider .slider-tooltip {

  position: absolute;

  top: -8.0rem;

  left: 50%;

  display: block;

  width: -moz-fit-content;

  width: fit-content;

  white-space: nowrap;

  --tw-text-opacity: 1;

  color: rgb(var(--color-blue) / var(--tw-text-opacity))
}

.slider .slider-tooltip > span {

  font-family: var(--font-family-din-pro);

  font-size: var(--font-body-2-m-size);

  line-height: var(--font-body-2-m-line-height, normal);

  letter-spacing: var(--font-body-2-m-letter-spacing, 0);

  font-weight: var(--font-body-2-m-weight, 400)
}

.slider .slider-tooltip > span {

  --tw-text-opacity: 1;

  color: rgb(var(--color-blue) / var(--tw-text-opacity))
}

.slider .slider-tooltip .slider-tooltip-content {

  margin-top: 0.8rem;

  width: -moz-fit-content;

  width: fit-content;

  white-space: nowrap;

  border-radius: 0.8rem;

  --tw-bg-opacity: 1;

  background-color: rgb(var(--color-blue) / var(--tw-bg-opacity));

  padding-left: 1.6rem;

  padding-right: 1.6rem;

  padding-top: 0.8rem;

  padding-bottom: 0.8rem;

  --tw-text-opacity: 1;

  color: rgb(var(--color-white) / var(--tw-text-opacity))
}

/* stylelint-disable-next-line selector-id-pattern */
.slider .slider-content #receiptsNumber {

  background-image: linear-gradient(298.79deg, #2DB5D2 -23.47%, #00FA6C 92.01%, #2DB5D2 214.83%);;

  -webkit-background-clip: text;

          background-clip: text;

  color: transparent;

  --tw-text-opacity: 1 !important;

  color: rgb(var(--color-green) / var(--tw-text-opacity)) !important
}

.slider .slider-tooltip-triangle {

  position: absolute;

  top: 100%;

  left: 33.333333%;

  margin-left: -0.8rem;

  margin-top: 0;

  border-width: 1.2rem;

  border-style: solid;

  border-left-color: transparent;

  border-right-color: transparent;

  --tw-border-opacity: 1;

  border-top-color: rgb(var(--color-blue) / var(--tw-border-opacity));

  border-bottom-color: transparent;

  content: ""
}

@media (min-width: 640px) {

  .container {

    max-width: 640px
  }

  .\!container {

    max-width: 640px !important
  }
}

@media (min-width: 768px) {

  .container {

    max-width: 768px
  }

  .\!container {

    max-width: 768px !important
  }
}

@media (min-width: 1024px) {

  .container {

    max-width: 1024px
  }

  .\!container {

    max-width: 1024px !important
  }

  .gap-grid {

    gap: 2.4rem
  }

  .slider label {

    font-size: var(--font-body-2-size);

    line-height: var(--font-body-2-line-height, normal);

    letter-spacing: var(--font-body-2-letter-spacing, 0);

    font-weight: var(--font-body-2-weight, 400)
  }

  .slider .slider-tooltip {

    top: -8.4rem
  }

  .slider .slider-tooltip > span {

    font-size: var(--font-body-2-size);

    line-height: var(--font-body-2-line-height, normal);

    letter-spacing: var(--font-body-2-letter-spacing, 0);

    font-weight: var(--font-body-2-weight, 400)
  }
}

@media (min-width: 1280px) {

  .container {

    max-width: 1280px
  }

  .\!container {

    max-width: 1280px !important
  }
}

@media (min-width: 1536px) {

  .container {

    max-width: 1536px
  }

  .\!container {

    max-width: 1536px !important
  }
}

@media (min-width: 1800px) {

  .container {

    max-width: 1800px
  }

  .\!container {

    max-width: 1800px !important
  }
}