.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
   content: counter(stepNum);
   font-family: inherit;
   font-weight: 700;
}
 .multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
   background-color: #ededed;
}
 .multi-steps {
   display: table;
   table-layout: fixed;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}
 .multi-steps > li {
   counter-increment: stepNum;
   text-align: center;
   display: table-cell;
   position: relative;
   color: tomato;
   flex: 1 0;
   flex-basis: 110px;
}
 .multi-steps > li:before {
   content: '\f00c';
   content: '\2713';
   content: '\10003';
   content: '\10004';
   content: '\2713';
   display: block;
   margin: 0 auto 4px;
   background-color: #fff;
   width: 36px;
   height: 36px;
   line-height: 32px;
   text-align: center;
   font-weight: bold;
   border-width: 2px;
   border-style: solid;
   border-color: tomato;
   border-radius: 50%;
}
 .multi-steps > li:after {
   content: '';
   height: 2px;
   width: 100%;
   background-color: tomato;
   position: absolute;
   top: 16px;
   left: 50%;
   z-index: -1;
}
 .multi-steps > li:last-child:after {
   display: none;
}
 .multi-steps > li.is-active:before {
   background-color: #fff;
   border-color: tomato;
}
 .multi-steps > li.is-active ~ li {
   color: #808080;
}
 .multi-steps > li.is-active ~ li:before {
   background-color: #ededed;
   border-color: #ededed;
}