/* Progress Bar */
.progress-bar {
  display: flex;
  background-color: #181818;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 32px;
}
@media (max-width: 500px) {
  .progress-bar {
    margin-bottom: 20px;
  }
}
.circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}
@media (max-width: 500px) {
  .circle {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
}
.circle.completed {
  border: 3px solid #4A3AFF;
  background-color: #4A3AFF;
}
.circle.incompleted {
  border: 3px solid #4A3AFF;
  background-color: #4A3AFF;
}
.circle.non-started {
  background-color: #EFF0F6;
  border: 3px solid #EFF0F6;
}

.number {
  font-size: 12px;
  font-weight: 600;
}
@media (max-width: 500px) {
  .number {
    font-size: 10px
  }
}
.number.non-started {
  color: white;
}
.number.incompleted {
  color: #181818;
}
.number.completed {
  color: white;
}

.progress {
  width: 120px;
  height: 6px;
  border-radius: 8px;
}
@media (max-width: 500px) {
  .progress {
    width: 60px;
    height: 5px;
  }
}
.progress.incompleted {
  background: linear-gradient(to right, #4A3AFF 50%, #EFF0F6 50%);
}
.progress.completed {
  background: linear-gradient(to right, #4A3AFF 50%, #4A3AFF 50%);
}
.progress.non-started{
  background: linear-gradient(to right, #EFF0F6 50%, #EFF0F6 50%);
}

.step {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #181818;
  margin-left: 16px;
}
@media (max-width: 500px) {
  .step {
    margin-left: 10px;
  }
}

.divisor {
  width: 100%;
  height: 1px;
  background-color: #292929;
}