/* style tick marks*/
.range-slider {
  flex: 1;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.sliderticks span {
  display: flex;
  justify-content: center;
  width: 1px;
  height: 10px;
  /* background: #bcbcbc; */
  line-height: 40px;
}

/* end ticks style*/


input[type="range"] {
  -webkit-appearance: none;
  appearance: none; 
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 15px;
  height: 6px;
  background: #dce1ff;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 15px;
  width: 15px;
  background-color: #0967ce;
  border-radius: 50%;
  border: none;

  /* box-shadow: -407px 0 0 400px #f50; emove this line */
  transition: .2s ease-in-out;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #042d58;
  border-radius: 50%;
  transition: .2s ease-in-out;
}

/* slider contents */

.wrapper {
  max-width: 350px;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.range {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
  height: 6rem;
  width: 90%;
  /* background: #dddcdc; */
  padding: 10px 15px;
}


.sliderticks span {
  display: flex;
  justify-content: center;
  width: 1px;
  height: 10px;
  /* background: #bcbcbc; */
  line-height: 14px;
  padding-top: 2%;
}

/*  fluid width via https://css-tricks.com/snippets/css/fluid-typography/ */
/* font-size: calc([minimum font size] + ([maximum font size] - [minimum font size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */


/* .wa-labels-left {
  /* font-size: 40px */
  /* font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
  /* font-size: calc(24px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
  /* font-size: calc(34px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); */
  /* font-size: calc(24px + (30 - 24) * ((100vw - 700px) / (1600 - 700))); */
  
/* } */ 

/* .wa-labels-left  {
  font-size: 26px;
}

@media (min-width: 700px) {
  .wa-labels-left  {
    font-size: 18px;
  }
} */


/* .wa-labels-left  svg text {
  font-size: calc(16px + (8 - 16) * ((100vw - 320px) / (640 - 320)));
}

@media (min-width: 641px) {
  .wa-labels-left  svg text {
    font-size: calc(8px + (4 - 8) * ((100vw - 640px) / (1280 - 640)));
  }
}

@media (min-width: 1280px) {
  .wa-labels-left  svg {
    width: 1280px;
  }

  .wa-labels-left  svg text {
    font-size: 4px;
  }
} */

/* .wa-labels-left  svg text {
  font-size: 40px
} */

/* @media (min-width: 641px) {
  .wa-labels-left  svg text {
    font-size: calc(8px + (4 - 8) * ((100vw - 640px) / (1280 - 640)));
  }
}

@media (min-width: 1280px) {
  .wa-labels-left  svg {
    width: 1280px;
  }

  .wa-labels-left  svg text {
    font-size: 4px;
  }
} */


/* .labels{
  font-size:large;
} */