.main-bar {
  display: flex;
  margin-bottom: 25px;
}

.main-bar__bars {
  position: relative;
  overflow: hidden;
}

.main-bar__green-bar {
  background: #c9c9c9;
  height: 20px;
  width: 80%;
  border-radius: 10px 0 0 10px;
}

.main-bar__yellow-bar {
  background: #6d6d6d;
  height: 20px;
  width: calc(6% - 4px);
}

.main-bar__red-bar {
  background: #c9c9c9;
  height: 20px;
  width: 14%;
  border-radius: 0 10px 10px 0;
}

.main-bar__bar-content {
  z-index: 10;
  content: "";
  position: relative;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  height: 20px;
  transform: translate(-100%);
}

.main-bar__green-bar-content {
  transition: transform .3s linear;
  background: #24C73A;
}

.main-bar__yellow-bar-content {
  transition: transform .022s linear;
  background: #FFCF00;
}

.main-bar__red-bar-content {
  transition: transform .052s linear;
  background: #FD5A53;
}

.main-bar__line {
  position: absolute;
  top: 0;
  right: 0px;
  width: 4px;
  height: 27px;
  background: #448AFE;
}

.main-bar__max-timing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.main-bar__time {
  white-space: nowrap;
  position: absolute;
  top: 28px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 1000px) {
  .main-bar__green-bar {
    width: 69%;
  }
  
  .main-bar__yellow-bar {
    width: calc(11% - 4px);
  }

  .main-bar__red-bar {
    width: 20%;
  }
  
}