.step-flow{display:flex;align-items:center;gap:24px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.step-flow:hover{scrollbar-width:thin;scrollbar-color:#d1d5db transparent}.step-flow::-webkit-scrollbar{height:6px;opacity:0}.step-flow::-webkit-scrollbar-track{background:transparent}.step-flow::-webkit-scrollbar-thumb{background-color:transparent;border-radius:3px}.step-flow:hover::-webkit-scrollbar-thumb{background-color:#d1d5db}.step-flow-step{display:flex;align-items:center;gap:8px;background:transparent;border:none;padding:0;cursor:pointer;font:inherit;width:100%}.step-flow-divider{background:lightgray;height:1px;margin:16px 0 24px}.step-flow-circle{width:32px;height:32px;border-radius:999px;border:2px solid #d1d5db;display:flex;align-items:center;justify-content:center;font-weight:600;background:#ffffff;color:#d1d5db;flex-shrink:0}.step-flow-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#4b5563;white-space:nowrap}.step-flow-arrow{flex:1 1;height:2px;background:#e5e7eb;position:relative}.step-flow-arrow:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent #e5e7eb;border-style:solid;border-width:5px 0 5px 8px}.step-flow-step-active .step-flow-circle,.step-flow-step-completed .step-flow-circle{background:#0076a9;border-color:#0076a9;color:#ffffff}.step-flow-step-completed{cursor:pointer;pointer-events:auto}.step-flow-step-disabled{opacity:.4;cursor:default;pointer-events:none}@media (max-width:640px){.step-flow{gap:12px}.step-flow-label{font-size:10px}.step-flow-circle{width:28px;height:28px}}