@axa-fr/react-toolkit-form-steps/dist/af-step-form-new.css

1. [Installation](#installation) 2. [Old Design Steps](#old-design-steps) 3. [New Design Steps](#new-design-steps)

.af-steps-new{margin-bottom:2rem;background:#fff}.af-steps-new .af-steps-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;line-height:3rem;padding:0;margin:0;border-bottom:1px solid #eceeef;list-style:none;counter-reset:stepper-counter}.af-steps-new .af-steps-list-step{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;color:#333;counter-increment:stepper-counter}.af-steps-new .af-steps-list-step.number::before{content:none}.af-steps-new .af-steps-list-step::before{content:counter(stepper-counter);color:#333;margin-right:.8rem;font-size:1.2rem;font-weight:600}.af-steps-new .af-steps-list-step::after{content:"";font-family:icons}.af-steps-new .af-steps-list-step.on{color:#00008f}.af-steps-new .af-steps-list-step.on *,.af-steps-new .af-steps-list-step.on::before{color:#00008f}.af-steps-new .af-steps-list-step.past{color:#4d4d4d}.af-steps-new .af-steps-list-step.past::before{color:#4d4d4d}.af-steps-new .af-steps-list-step.past:hover{color:#00008f}.af-steps-new .af-steps-list-step.disabled{color:#ccc}.af-steps-new .af-steps-list-step.disabled::before{color:#ccc}.af-steps-new .af-steps-list-step.disabled .af-steps-list-stepNumber,.af-steps-new .af-steps-list-step.disabled .af-steps-list-stepTitle{color:#ccc}.af-steps-new .af-steps-list-stepLabel{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding-right:2rem}.af-steps-new .af-steps-list-stepNumber{margin-right:.6rem;font-size:1.2rem;font-weight:600;color:#333}.af-steps-new .af-steps-list-stepNumber .glyphicon{font-size:1.5rem;width:17px}.af-steps-new .af-steps-list-stepTitle{font-weight:600;color:#333}.af-steps-new .af-steps-list-stepTitle:hover{color:#00008f}.af-steps-new .af-steps-list-step:last-child.on::before{color:#1cc578}.af-steps-new .af-steps-list-step:last-child::before{content:"";font-family:icons}.af-steps-new .af-steps-list-step:last-child::after{content:none}.af-steps-new .af-steps-list-step:last-child .af-steps-list-stepLabel{padding-right:0}.af-steps-new .af-steps-list-step:last-child .af-steps-list-stepLabel::after,.af-steps-new .af-steps-list-step:last-child .af-steps-list-stepLabel::before{display:none}.af-steps-new .af-steps-list-step:last-child .af-steps-list-stepNumber{font-size:2rem}@media(max-width:575.98px){.af-steps-new .af-steps-list{table-layout:auto}.af-steps-new .af-steps-list-step{min-width:3rem;padding-left:0}.af-steps-new .af-steps-list-stepTitle{display:none}.af-steps-new .af-steps-list-stepNumber{left:2rem;z-index:2;margin-right:1rem}.af-steps-new .af-steps-list-stepNumber .glyphicon{font-size:1.2rem}.af-steps-new .af-steps-list-step.on .af-steps-list-stepTitle{display:block}.af-steps-new .af-steps-list-step.on .af-steps-list-stepNumber{margin-right:.5rem}.af-steps-new .af-steps-list-step.on .af-steps-list-stepNumber .glyphicon{font-size:1.2rem}}