stepbar.component.css

#stepbar .stepped-process-item {
  width: 12.5%; /* 100 / steps */
}
/* reactive stepbar */
.stepped-process .stepped-process-item {
  padding-left: 1.25rem;
  padding-right: .25rem;
}

.stepped-process .stepped-process-item:first-child {
  padding-left: 1rem;
}

.stepped-process .step-title {
  margin-left: .15rem;
}

/* narrow screens: don't show step number */
@media (max-width: 767px) {
  .stepped-process .step-number {
    display: none;
  }
}

/* very narrow screens: show step number only */
@media (max-width: 479px) {
  .stepped-process .step-number {
    display: inline;
  }
  .stepped-process .step-number:after {
    display: none;
  }
  .stepped-process .step-title {
    display: none;
  }
}
/* customize stepped-process-max-items to 8 */
.stepped-process-item:not(:last-child) {
  margin-right: var(--bs-stepped-process-item-margin-end);
}
.stepped-process-item:not(:last-child)::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 1px);
  z-index: -1;
  width: var(--bs-stepped-process-item-arrow-width);
  -webkit-clip-path: var(--bs-stepped-process-item-arrow-shape);
  clip-path: var(--bs-stepped-process-item-arrow-shape);
  content: "";
  background-color: inherit;
}

.stepped-process-item:nth-child(1) {
  z-index: 8;
}

.stepped-process-item:nth-child(2) {
  z-index: 7;
}

.stepped-process-item:nth-child(3) {
  z-index: 6;
}

.stepped-process-item:nth-child(4) {
  z-index: 5;
}

.stepped-process-item:nth-child(5) {
  z-index: 4;
}

.stepped-process-item:nth-child(6) {
  z-index: 3;
}

.stepped-process-item:nth-child(7) {
  z-index: 2;
}

.stepped-process-item:nth-child(8) {
  z-index: 1;
}

.stepped-process-item.active {
  background-color: #f88378 !important;
}
.stepped-process-item.active a {
  color: #ffffff !important;
}
.stepped-process-item a {
  text-decoration: none;
}