.progress-bar {
  position: relative;
  border-radius: 50px;
  border: 1px solid #FFFFFF;
  height: 0.5rem;
  width: 100%;
  /* overflow: hidden; */
}

.progress {
  background: #FFFFFF;
  border-radius: 50px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: width 1s linear;
}


.card-unit .progress-bar,
.card-lesson .progress-bar,
.card-ranking .progress-bar,
#course-breadcrumb .progress-bar {
  border-color: var(--site-secondary);
}

.card-unit .progress,
.card-lesson .progress,
.card-ranking .progress,
#course-breadcrumb .progress {
  background: var(--site-secondary);
}