:root {
  --mslider-thumb-size: 2rem;
  --mslider-rail-perc: 0.7;
  --mslider-rail-size: calc(
    var(--mslider-thumb-size) * var(--mslider-rail-perc)
  );
}

.mslider {
  position: relative;
  width: 15rem;
  height: var(--mslider-thumb-size);
  background-color: transparent;
  margin: 0.5rem 0rem;
}

.mslider .thumb {
  position: absolute;
  width: calc(var(--mslider-thumb-size) / 2);
  height: var(--mslider-thumb-size);
  background-color: rgb(99, 99, 99);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.7;
}

.mslider .thumb:hover {
  opacity: 0.8;
}

.mslider .thumb:active {
  opacity: 0.9;
}

.mslider .rail {
  position: absolute;
  top: calc(calc(1 - var(--mslider-rail-perc)) * 50%);
  height: var(--mslider-rail-size);
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  color: white;
  font-weight: bold;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.mslider_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  color: white;
  font-weight: bold;
  text-align: center;

  width: 15rem;
  margin: 0.5rem 0rem;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.mslider_title div {
  flex-grow: 1;
}

.mslider .pre.rail,
.mslider_title div:nth-child(1) {
  background-color: rgb(255, 116, 116);
}

.mslider .post.rail,
.mslider_title div:nth-child(3) {
  background-color: rgb(97, 202, 97);
}

.mslider .mid.rail,
.mslider_title div:nth-child(2) {
  background-color: rgb(97, 142, 202);
}

.mslider_title div:nth-child(1) {
  background-color: rgb(255, 116, 116);
}