.slider {
  width: 98%;
}

/*Custom noUISlider CSS*/

.noUi-tooltip {
  display: block;
  transition: all 0.2s ease-in-out;
}
.noUi-active .noUi-tooltip {
  display: block;
  color: #3f729c;
}
.noUi-target {
  height: 4px;
  border-radius: 40px;
  background-color: #ebebeb;
  border: none;
  box-shadow: none;
}

/*handle*/
.noUi-handle {
  width: 22px !important;
  height: 22px !important;
  background: #ffffff;
  border: 6px solid #ff8c00 !important;
  border-radius: 50% !important;
  transition: all 0.2s ease-in-out;
  top: 50% !important;
  transform: translateY(-50%);
}
.noUi-handle:after,
.noUi-handle:before {
  content: unset !important;
}
.noUi-handle:focus {
  outline: none;
  box-shadow: 0px 0px 5px 0px rgb(40 39 33 / 50%);
}
.noUi-handle:hover {
  cursor: grab;
}
.noUi-handle:active {
  cursor: grabbing;
}

.noUi-tooltip {
  border: none;
  background-color: transparent;
}
.noUi-horizontal .noUi-tooltip {
  font-size: 12px;
  font-weight: 500;
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.noUi-handle::before,
.noUi-handle::after {
  width: 0;
  height: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
}

/*pips*/
.noUi-pips-horizontal {
  padding: 0px 0;
  height: fit-content !important;
}
.noUi-connect {
  background: #ff8c00 !important;
}
.noUi-value.noUi-value-horizontal.noUi-value-large {
  margin-top: 0px !important;
}
.noUi-marker-horizontal.noUi-marker {
  display: none;
  width: 0px;
  height: 0px;
  margin-left: 0;
  background: rgba(40, 39, 33, 0.25);
}
.noUi-marker-horizontal.noUi-marker-large {
  height: 12px;
}
.noUi-marker-horizontal.noUi-marker-large:first-child,
.noUi-marker-horizontal.noUi-marker:nth-last-child(2) {
  height: 24px;
  transform: translateY(-4px);
}
.noUi-value.noUi-value-horizontal.noUi-value-large {
  font-size: 10px;
  margin-top: 16px;
  display: none;
}
.noUi-value.noUi-value-horizontal.noUi-value-large:nth-child(2),
.noUi-value.noUi-value-horizontal.noUi-value-large:last-child {
  display: none;
}

@media all and (min-width: 768px) {
  .noUi-value.noUi-value-horizontal.noUi-value-large {
    display: block;
  }
}
