poductivity-input-range {
  display: block;
  touch-action: none;
  overscroll-behavior-x: none;
}

input.pd-input-range-control {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--val) - var(--min)) / var(--range));
  --sx: calc(.5 * 18px + var(--ratio) * (100% - 18px));
  --sx-rtl: calc(.5 * 18px + calc(1 - var(--ratio)) * (100% - 18px));
  -webkit-appearance: none;
  background: transparent;
  margin: 9px 0;
  width: 100%;
}
input.pd-input-range-control::-moz-focus-outer {
  border: 0;
}
input.pd-input-range-control:focus {
  outline: 0;
}
input.pd-input-range-control::-webkit-slider-runnable-track {
  cursor: default;
  height: 5px;
  transition: all 0.2s ease;
  width: 100%;
  transition: none;
  background: linear-gradient(var(--poductivity-accent, #112bd1), var(--poductivity-accent, #112bd1)) 0/var(--sx) 100% no-repeat var(--poductivity-muted, #c0c3d9);
  border: 0 solid #cfd8dc;
  border-radius: 2.5px;
}
input.pd-input-range-control::-moz-range-progress {
  height: 5px;
  background: var(--poductivity-accent, #112bd1);
  border-radius: 2.5px;
}
input.pd-input-range-control::-ms-fill-lower {
  height: 5px;
  background: var(--poductivity-accent, #112bd1);
}
input.pd-input-range-control::-webkit-slider-thumb {
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
  background: var(--poductivity-accent, #112bd1);
  border: 2px solid #fff;
  border-radius: 9px;
  box-sizing: border-box;
  cursor: default;
  height: 18px;
  width: 18px;
  -webkit-appearance: none;
  margin-top: -6.5px;
}
input.pd-input-range-control::-moz-range-track {
  cursor: default;
  height: 5px;
  transition: all 0.2s ease;
  width: 100%;
  background: var(--poductivity-muted, #c0c3d9);
  border: 0 solid #cfd8dc;
  border-radius: 2.5px;
}
input.pd-input-range-control::-moz-range-thumb {
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
  background: var(--poductivity-accent, #112bd1);
  border: 2px solid #fff;
  border-radius: 9px;
  box-sizing: border-box;
  cursor: default;
  height: 18px;
  width: 18px;
}
input.pd-input-range-control::-ms-track {
  cursor: default;
  height: 5px;
  transition: all 0.2s ease;
  width: 100%;
  background: transparent;
  border-color: transparent;
  border-width: 9px 0;
  color: transparent;
}
input.pd-input-range-control::-ms-fill-lower {
  background: var(--poductivity-accent, #112bd1);
  border: 0 solid #cfd8dc;
  border-radius: 5px;
}
input.pd-input-range-control::-ms-fill-upper {
  background: var(--poductivity-muted, #c0c3d9);
  border: 0 solid #cfd8dc;
  border-radius: 5px;
}
input.pd-input-range-control::-ms-thumb {
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
  background: var(--poductivity-accent, #112bd1);
  border: 2px solid #fff;
  border-radius: 9px;
  box-sizing: border-box;
  cursor: default;
  height: 18px;
  width: 18px;
  margin-top: 1.25px;
}
input.pd-input-range-control:disabled::-webkit-slider-thumb, input.pd-input-range-control:disabled::-moz-range-thumb, input.pd-input-range-control:disabled::-ms-thumb, input.pd-input-range-control:disabled::-webkit-slider-runnable-track, input.pd-input-range-control:disabled::-ms-fill-lower, input.pd-input-range-control:disabled::-ms-fill-upper {
  cursor: not-allowed;
}