/**
* Custom colors
* Name That Color
**/
/* Developer Note: Only modify code from this line onward */
.custom-progress-bar {
  margin-top: 8px;
  background: #FFFFFF;
  height: 59px;
  position: relative;
}
@media (max-width: 768px) {
  .custom-progress-bar {
    max-height: 48px;
    margin-top: 0;
  }
}
.custom-progress-bar .step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  width: 25%;
}
@media (max-width: 768px) {
  .custom-progress-bar .step {
    width: 100%;
  }
}
.custom-progress-bar .step .circle {
  width: 32px;
  height: 32px;
  aspect-ratio: 1;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #C6C6C6;
  color: #FFFFFF;
}
.custom-progress-bar .step .circle .icon-check-bold:before {
  font-size: 21px;
  font-weight: 600;
  top: 1px;
  position: relative;
}
.custom-progress-bar .step .title {
  color: #6D3B8F;
}
.custom-progress-bar .step.current {
  border-bottom: 3px solid #6D3B8F;
}
@media (max-width: 768px) {
  .custom-progress-bar .step.current {
    padding: 12px 16px;
  }
}
.custom-progress-bar .step.current .circle {
  background-color: #6D3B8F;
}
@media (max-width: 768px) {
  .custom-progress-bar .step.current .circle {
    display: none !important;
  }
}
.custom-progress-bar .step.current .text-caption-regular {
  color: #9B9B9B;
}
@media (max-width: 768px) {
  .custom-progress-bar .step.current .subtitle {
    display: none !important;
  }
}
.custom-progress-bar .step.current .icon-directions-bus {
  font-size: 16px;
  color: #6D3B8F;
  margin-right: 8px;
}
.custom-progress-bar .step.complete .circle {
  background-color: #349A26;
}
.custom-progress-bar .step.complete {
  border-bottom: 3px solid #349A26;
}
@media (max-width: 768px) {
  .custom-progress-bar .step.complete {
    display: none !important;
  }
}
.custom-progress-bar .step.disable {
  color: #868686;
  border-bottom: 3px solid #DDD;
}
.custom-progress-bar .step.disable .circle {
  background-color: #C6C6C6;
}
.custom-progress-bar .step.disable .label, .custom-progress-bar .step.disable .title, .custom-progress-bar .step.disable .subtitle {
  color: #868686;
}
@media (max-width: 768px) {
  .custom-progress-bar .step.disable {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .progress-bar-wrapper {
    max-height: 48px;
    margin-bottom: 20px;
  }
  .progress-bar-wrapper .container {
    padding: 0;
  }
}
