.SingleWeightThinSelector {
  position: absolute;
  color: var(--text-color);
  user-select: none;
  overflow: hidden;
}

.SingleWeightSelectorThinTitle {
  position: absolute;
  font-weight: bold;
  font-size: var(--component-font-size);
  left: 0;
  text-align: center;
  top: 0;
  z-index: var(--component-title-zindex);
  text-shadow: black 1px 1px 1px;
}
.SingleWeightSelectorThinTitleText {
  font-size: 24px;
  text-transform: uppercase;
  display: inline;
}
.SingleWeightSelectorThinTitleLbs {
  font-size: 18px;
  display: inline;
  margin-left: 5px;
}

.SingleWeightSelectorActualWaterTankWater,
.SingleWeightThinSelectorWaterTank,
.SingleWeightThinSelectorWaterTankWater {
  box-sizing: border-box; /*The width and height includes the border*/
  border-radius: var(--weight-selector-radius);
  background-color: var(--weight-selector-water-tank-bgcolor);
}

.SingleWeightThinSelectorWaterTankWater {
  position: absolute;
  background-color: var(--weight-selector-water-tank-bgcolor-water);
  border-bottom-left-radius: var(--weight-selector-radius);
  border-bottom-right-radius: var(--weight-selector-radius);
  z-index: var(--water-zindex);
}

.SingleWeightSelectorWeight {
  position: absolute;
  z-index: var(--component-title-zindex);
  text-align: center;
}

.SingleWeightSelectorWeight_Number {
  font-size: var(--component-big-font-size);
  line-height: var(--component-big-font-size);
  font-weight: bold;
}

.SingleWeightSelectorWeight_Lbs {
  font-size: var(--component-font-size);
  margin-left: 8px;
}

.Svg {
  position: absolute;
  z-index: var(--component-svg-zindex);
  overflow: visible;
}

.SingleWeightSelectorActualWaterTankWater {
  position: absolute;
  z-index: var(--water-actual-zindex);
  background: linear-gradient(
    to bottom,
    var(--weight-selector-water-tank-bgcolor-water) 0%,
    var(--weight-selector-actual-water-tank-bgcolor-water) 100%
  );
  transition: width 200ms ease-in-out;
}
