.step-indicator{gap:5px;justify-items:center;margin:0 auto;max-width:420px;padding:0 40px 30px;width:100%;--step-color-normal:#a9a9a9;--step-color-completed:#66cc02;--step-color-active:crimson;--step-color-active-background:var(--step-color-active);--step-color-active-icon:#fff;--step-text-color:#000;--step-icon-size:32px}.step,.step-indicator{align-items:center;display:flex}.step{flex-direction:column;position:relative;z-index:1}.step-indicator .step-icon{background-color:transparent;border:2px solid var(--step-color-normal);border-radius:50%;font-size:calc(var(--step-icon-size)*.66);height:var(--step-icon-size);position:relative;vertical-align:middle;width:var(--step-icon-size)}.step-icon:before{background:var(--step-color-normal);border-radius:50%;content:"";height:40%;left:50%;line-height:var(--step-icon-size);position:absolute;top:50%;transform:translate(-50%,-50%);width:40%}.step+.indicator-line{background-color:var(--step-color-normal)}.step.completed .step-icon{background:var(--step-color-completed);border-color:var(--step-color-completed)}.step.completed .step-icon:before{background-color:transparent;color:#fff;content:"✔";height:100%;text-align:center;width:100%}.step.completed+.indicator-line{background-color:var(--step-color-completed)}.step.active .step-icon{background:var(--step-color-active-background);border-color:var(--step-color-active)}.step.active .step-icon:before{background-color:var(--step-color-active-icon)}.step p{color:var(--step-text-color);font-size:14px;font-weight:700;margin:0;position:absolute;text-align:center;text-wrap:nowrap;top:calc(100% + 5px)}.indicator-line{background:var(--step-color-normal);flex:1;height:2px;width:100%}@media screen and (max-width:500px){.step-indicator{max-width:300px}}