:root {
  --ifx-font-family: "Source Sans 3", 'Arial, sans-serif';
}

.stepper {
  display: flex;
  align-items: center;
}
.stepper.compact {
  align-items: center;
  gap: 8px;
}
.stepper.compact.compact-right {
  flex-direction: row-reverse;
  text-align: left;
}
.stepper.compact .stepper-wrapper {
  width: unset;
  flex-direction: column;
}
.stepper.vertical {
  height: 100%;
}
.stepper.vertical .stepper-wrapper {
  flex-direction: column;
  width: unset;
  height: 100%;
}

.stepper-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.stepper-wrapper ::slotted(*) {
  display: flex;
  flex: 1;
  justify-content: flex-start;
}

.stepper-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  font: 600 0.875rem/1.25rem "Source Sans 3";
  min-width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: conic-gradient(#0A8276 var(--pb, 0%), #BFBBBB 0);
}
.stepper-progress .progress-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: white;
}