.flex-row-sb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

:host {
  width: 100%;
  height: 100%;
  --slider-height: var(--ti-custom-slider-height, 3px);
  --input-width: var(--ti-custom-slider-input-container-width, 70px);
  --marker-color: var(--ti-custom-slider-markers-color, #555555);
  --label-color: var(--ti-custom-slider-label-color, #555555);
}

paper-slider {
  width: inherit;
}

.custom-slider {
  --paper-slider-container-color: var(
    --ti-custom-slider-container-color,
    #d8d8d8
  );
  --paper-slider-bar-color: var(--ti-custom-slider-bar-color);
  --paper-slider-active-color: var(--ti-custom-slider-active-color, #c00);
  --paper-slider-secondary-color: var(--ti-custom-slider-secondary-color);
  --paper-slider-knob-color: var(--ti-custom-slider-knob-color, white);
  --paper-slider-disabled-knob-color: var(
    --ti-custom-slider-disabled-knob-color
  );
  --paper-slider-pin-color: var(--ti-custom-slider-pin-color, #c00);
  --paper-slider-font-color: var(--ti-custom-slider-font-color);
  --paper-slider-disabled-active-color: var(
    --ti-custom-slider-disabled-active-color
  );
  --paper-slider-disabled-secondary-color: var(
    --ti-custom-slider-disabled-secondary-color
  );
  --paper-slider-knob-start-color: var(
    --ti-custom-slider-knob-start-color,
    white
  );
  --paper-slider-knob-start-border-color: var(
    --ti-custom-slider-knob-start-border-color,
    white
  );
  --paper-slider-pin-start-color: var(--ti-custom-slider-pin-start-color);
  --paper-slider-height: var(--slider-height);
}

.custom-slider::shadow .slider-knob-inner.paper-slider {
  border: solid 1px #d8d8d8;
  box-shadow: 0 0 15px 1px #555555;
  @apply --ti-custom-slider-knob;
}

/* .custom-slider::shadow .slider-knob-inner.paper-slider:hover {
  box-shadow: 0 0 15px 1px #c00;
} */

.custom-slider::shadow .slider-input.paper-slider {
  min-width: var(--input-width);
}

.custom-slider ::shadow .slider-knob-inner {
  height: 13px;
  width: 13px;
  background-color: #ffffff;
  color: #990000;
  position: relative;
  top: 2px;
}

.custom-slider ::shadow div #labelAndInputContainer {
  height: 35px;
  width: 80px;
  border-radius: 4px;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-slider ::shadow div #labelAndInputContainer #input {
  border: none !important;
  color: #555555;
  font-family: Roboto;
  font-weight: 600;
  font-size: 13px;
}

.custom-slider ::shadow paper-input {
  border-radius: 5px;
  background-color: #f1f1f1;
}

/* To eliminate blue background in slider */
.custom-slider ::shadow #secondaryProgress {
  background: #d8d8d8 !important;
}

#progressContainer {
  border-radius: 3px;
}

.custom-slider::shadow .underline.paper-input-container {
  display: none;
}

.custom-slider::shadow paper-input-container {
  padding: 0;
}

.custom-slider::shadow
  .paper-input-container-0
  .input-content.paper-input-container
  input {
  border: 1px solid #5555;
  border-radius: 5px;
  padding: 3px;
  font-size: 12px;
  @apply --ti-custom-slider-input;
}

.ruler-container {
  position: relative;
  width: inherit;
  @apply --ti-custom-slider-ruler;
}

.ruler-container-editable {
  margin-top: -12px;
}

.ruler {
  height: 0.5em;
  margin-left: calc(15px + var(--slider-height) / 2);
  margin-right: calc(15px + var(--slider-height) / 2);
}

.ruler-editable {
  margin-right: calc(var(--input-width) + (15px + var(--slider-height) / 2));
}

.ruler-mark {
  position: relative;
  display: block;
  height: 0.5em;
  border-left: 0.125em solid var(--marker-color);
}

.ruler-label {
  position: absolute;
  max-width: max-content;
  font-size: 9.5px;
  font-family: roboto;
  font-weight: bold;
  color: #555555;
  top: 100%;
  margin-top: 5px;
  transform: translateX(-50%);
  letter-spacing: 0;
  line-height: 8px;
  @apply --ti-custom-slider-labels;
}