.progress-bar {
  background-color: #fdfdfd;
  border-radius: var(--border-radius);
  height: 16px;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--main-color);
  margin: 5px 0;
}
.progress-bar:has(.is-completed) {
  border-color: rgba(21, 103, 21, 0.45);
}
.progress-bar:has(.is-not-completed) {
  border-color: rgba(215, 8, 8, 0.45);
}
.progress-bar .custom-progress {
  background: var(--main-color);
  border-radius: var(--border-radius);
  height: 15px;
  width: 0;
  transition: width 0.5s ease-in;
}
.progress-bar .custom-progress.is-completed {
  background: #156715;
}
.progress-bar .custom-progress.is-not-completed {
  background: #b30707;
}
.progress-bar .progress-value {
  position: absolute;
  color: var(--desc-color);
  transform: translatex(-50%);
  right: 50%;
  top: 2px;
  font-size: 18px;
  line-height: 18px;
}