:host {
  display: block;
  left: 0 !important;
  position: static !important;
  right: 0 !important;
  top: 0 !important;
  width: 100%;
}

.ctrl-hdr {
  color: #999999;	
  font-family: Roboto;	
  font-size: 11px;
  line-height: 13px;
  margin-bottom: 4px;
  width: 100%;
}

.ctrl-cnt {
  display: flex;
  flex-wrap: nowrap;
  width: 110%;
}

.disabled * {
  color: rgba(128, 128, 128, 0.3) !important;
}

.disabled > .ctrl-cnt {
  cursor: not-allowed !important;
}

.disabled input {
  cursor: not-allowed !important;
}

.numberbox {
  background: #FFF;
  border: 1px solid rgba(223,223,223,0.75);
  border-radius: 2px;
  color: #555;
  font-family: Roboto;
  font-size: 12px !important;
  outline: none;
  padding: 6px 0px 6px 12px;
  width: 100%;
}

.main-cntr {
  width: 100%;
}

.slider-cntr {
  margin-right: 20px;
  position: relative;
  top: -5px;
  width: calc(100% - 100px);
}

.numbbox-cntr {
  width: 50px;
}


#slider{
  width: 100%;
  height: 53%;
  --ti-widget-slider-tick-color:#BDBDBD;
  --ti-widget-slider-progress-color:#990000;
}

#slider::shadow #divContainer #slider::shadow #sliderKnob > * {
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  border-color:#BDBDBD;
  background-color: #FFFFFF;
}

#slider::shadow #divContainer #slider::shadow #sliderBar #progressContainer {
  background-color: #EEEEEE;
  height: 8px;
  border: 1px solid rgba(153,153,153,0.5);
  border-radius:5px;
}

#slider::shadow #divContainer #slider::shadow #sliderBar #progressContainer #secondaryProgress{
  transform: scaleX(0) !important;
}

#slider::shadow #divContainer #slider::shadow #sliderContainer{
  margin:0px;
}

#slider::shadow #divContainer #ruler{
  margin-left: 2px;
  margin-top:25px;
  padding: 0px;
}

#slider::shadow #divContainer #ruler::shadow #tickContainer .tick{  
  border: none;
  width: 0px;
}

#slider::shadow #divContainer #ruler::shadow #tickContainer .tick .tickLabel{  
  color: #555555;
  display: flex;
  font-family: Roboto;	
  font-size: 12px;
  justify-content: center;
  padding: 0.3em 0.2em;
  transform: translateX(0%);
}

#slider::shadow #divContainer #ruler::shadow #tickContainer .tick
.spinner{
  margin-left:7px;
}

#slider::shadow #divContainer #ruler::shadow #tickContainer{
  height: 50%;
}