:host {
  display: var(--layout_-_display);
      -ms-flex-pack: var(--layout-justified_-_-ms-flex-pack); -webkit-justify-content: var(--layout-justified_-_-webkit-justify-content); justify-content: var(--layout-justified_-_justify-content);
      -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-items: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center_-_align-items);
      width: 200px;
      cursor: default;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      --paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
      --paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
      --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
      --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
      --calculated-paper-slider-height: var(--paper-slider-height, 2px);
}

:host(:focus) {
  outline: none;
}

:host([dir="rtl"]) #sliderContainer {
  -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
}

:host([dir="rtl"]) #sliderContainer {
  -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
}

:host([dir="ltr"]) #sliderContainer {
  -webkit-transform: scaleX(1);
      transform: scaleX(1);
}

#sliderContainer {
  position: relative;
      width: 100%;
      height: calc(30px + var(--calculated-paper-slider-height));
      margin-left: calc(15px + var(--calculated-paper-slider-height)/2);
      margin-right: calc(15px + var(--calculated-paper-slider-height)/2);
}

#sliderContainer:focus {
  outline: 0;
}

#sliderContainer.editable {
  margin-top: 12px;
      margin-bottom: 12px;
}

.bar-container {
  position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
}

.ring > .bar-container {
  left: calc(5px + var(--calculated-paper-slider-height)/2);
      transition: left 0.18s ease;
}

.ring.expand.dragging > .bar-container {
  transition: none;
}

.ring.expand:not(.pin) > .bar-container {
  left: calc(8px + var(--calculated-paper-slider-height)/2);
}

#sliderBar {
  padding: 15px 0;
      width: 100%;
      background-color: var(--paper-slider-bar-color, transparent);
      --paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
      --paper-progress-height: var(--calculated-paper-slider-height);
}

.slider-markers {
  position: absolute;
      
      top: 15px;
      height: var(--calculated-paper-slider-height);
      left: 0;
      right: -1px;
      box-sizing: border-box;
      pointer-events: none;
      display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-direction);
}

.slider-marker {
  -ms-flex: var(--layout-flex_-_-ms-flex); -webkit-flex: var(--layout-flex_-_-webkit-flex); flex: var(--layout-flex_-_flex); -webkit-flex-basis: var(--layout-flex_-_-webkit-flex-basis); flex-basis: var(--layout-flex_-_flex-basis);
}

.slider-markers::after, .slider-marker::after {
  content: "";
      display: block;
      margin-left: -1px;
      width: 2px;
      height: var(--calculated-paper-slider-height);
      border-radius: 50%;
      background-color: var(--paper-slider-markers-color, #000);
}

.slider-knob {
  position: absolute;
      left: 0;
      top: 0;
      margin-left: calc(-15px - var(--calculated-paper-slider-height)/2);
      width: calc(30px + var(--calculated-paper-slider-height));
      height: calc(30px + var(--calculated-paper-slider-height));
}

.transiting > .slider-knob {
  transition: left 0.08s ease;
}

.slider-knob:focus {
  outline: none;
}

.slider-knob.dragging {
  transition: none;
}

.snaps > .slider-knob.dragging {
  transition: -webkit-transform 0.08s ease;
      transition: transform 0.08s ease;
}

.slider-knob-inner {
  margin: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      background-color: var(--paper-slider-knob-color, var(--google-blue-700));
      border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
      border-radius: 50%;

      -moz-box-sizing: border-box;
      box-sizing: border-box;

      transition-property: -webkit-transform, background-color, border;
      transition-property: transform, background-color, border;
      transition-duration: 0.18s;
      transition-timing-function: ease;
}

.expand:not(.pin) > .slider-knob > .slider-knob-inner {
  -webkit-transform: scale(1.5);
      transform: scale(1.5);
}

.ring > .slider-knob > .slider-knob-inner {
  background-color: var(--paper-slider-knob-start-color, transparent);
      border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
}

.slider-knob-inner::before {
  background-color: var(--paper-slider-pin-color, var(--google-blue-700));
}

.pin > .slider-knob > .slider-knob-inner::before {
  content: "";
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -13px;
      width: 26px;
      height: 26px;
      border-radius: 50% 50% 50% 0;

      -webkit-transform: rotate(-45deg) scale(0) translate(0);
      transform: rotate(-45deg) scale(0) translate(0);
}

.slider-knob-inner::before, .slider-knob-inner::after {
  transition: -webkit-transform .18s ease, background-color .18s ease;
      transition: transform .18s ease, background-color .18s ease;
}

.pin.ring > .slider-knob > .slider-knob-inner::before {
  background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
}

.pin.expand > .slider-knob > .slider-knob-inner::before {
  -webkit-transform: rotate(-45deg) scale(1) translate(17px, -17px);
      transform: rotate(-45deg) scale(1) translate(17px, -17px);
}

.pin > .slider-knob > .slider-knob-inner::after {
  content: attr(value);
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -16px;
      width: 32px;
      height: 26px;
      text-align: center;
      color: var(--paper-slider-font-color, #fff);
      font-size: 10px;

      -webkit-transform: scale(0) translate(0);
      transform: scale(0) translate(0);
}

.pin.expand > .slider-knob > .slider-knob-inner::after {
  -webkit-transform: scale(1) translate(0, -17px);
      transform: scale(1) translate(0, -17px);
}

.slider-input {
  width: 50px;
      overflow: hidden;
      --paper-input-container-input_-_text-align:  center; --paper-input-container-input_-_overflow: initial; --paper-input-container-input_-_white-space: initial; --paper-input-container-input_-_text-overflow: initial; --paper-input-container-input_-_max-width: initial; --paper-input-container-input_-_box-sizing: initial; --paper-input-container-input_-_cursor: initial;;
      ;
}

#sliderContainer.disabled {
  pointer-events: none;
}

.disabled > .slider-knob > .slider-knob-inner {
  background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
      border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
      -webkit-transform: scale3d(0.75, 0.75, 1);
      transform: scale3d(0.75, 0.75, 1);
}

.disabled.ring > .slider-knob > .slider-knob-inner {
  background-color: var(--paper-slider-knob-start-color, transparent);
      border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
}

paper-ripple {
  color: var(--paper-slider-knob-color, var(--google-blue-700));
}

:host([dir="rtl"]) #sliderContainer.pin.expand > .slider-knob > .slider-knob-inner::after {
  -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
            transform: scale(1) translate(0, -17px) scaleX(-1) !important;
}

