.idwdyd-progress-bar {
    margin-top: 24px;
    display: flex;
    /* TODO: figure out how to make space between steps irregular [so they match Figma] */
    justify-content: space-between;
    margin-bottom: 23px;
}

.idwdyd-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    @media (max-width: 768px) {
    }
}
  
.step-title {
    @media (max-width: 768px) {
        text-overflow: ellipsis;
        overflow: hidden;
        max-height: 24px;
        text-align: center;
        .end-cap, .start-cap {
            max-width: 35px !important;
        }

        .middle-steps {
            max-width: 75px;
        }
    }
}
  
.idwdyd-step::before {
    position: absolute;
    content: "";
    border-bottom: 9px solid #EEF0F7;
    width: 100%;
    top: 30.5px;
    left: -50%;
    z-index: 2;
}
  
.idwdyd-step::after, .idwdyd-step.active::after {
    position: absolute;
    content: "";
    border-bottom: 9px solid #EEF0F7;
    width: 100%;
    top: 30px;
    left: 50%;
    z-index: 2;
}
  
.idwdyd-step .step-marker {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #EEF0F7;
    margin-bottom: 6px;
}
  
.idwdyd-step.active {
    font-weight: bold;

    .idwdyd-step.active .step-marker {
        background-color: #344563;
        background: #344563;
    }
}
  
.idwdyd-step.active::before {
    position: absolute;
    content: "";
    border-bottom: 9px solid #344563;
    width: 100%;
    top: 30.5px;
    left: -50%;
    z-index: 2;
}

.idwdyd-step.completed .step-marker, .start-cap .step-marker, .idwdyd-step.active .step-marker {
    background-color: #344563;
}
  
.idwdyd-step.completed::after, .idwdyd-step.completed::before, .start-cap.completed::after {
    position: absolute;
    content: "";
    border-bottom: 9px solid #344563;
    width: 100%;
    top: 30px;
    left: 50%;
    z-index: 3;
}
  
.idwdyd-step:first-child::before {
    content: none;
}

.idwdyd-step:last-child::after, .idwdyd-step.completed:last-child::before {
    content: none;
}
  
.step-icon {
    visibility: hidden;
}

.idwdyd-finished {
    .idwdyd-step.completed::after, .idwdyd-step.completed::before  {
      border-bottom: 9px solid #EFC846;  
    }
    
    .idwdyd-step.completed .step-marker {
      background-color: #EFC846;
    }

    .final-step {
      height: 26px !important;
      width: 26px !important;
      top: -5px !important;
      display: flex;
      align-items: stretch;
    }

    .step-icon {
        visibility: visible;
    }
}