.progressbar {
    /* counter-reset: step; */
  }
  .progressbar li {
    list-style: none;
    display: inline-block;
    width: 18%;
    position: relative;
    text-align: center;
    cursor: pointer;
  }
  .progressbar li:before {
    /* content: counter(step);
    counter-increment: step; */
    width: 30px;
    height: 30px;
    line-height : 30px;
    border: 1px solid #ddd;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    background-color: #fff;
    z-index: -1;
  }
  .progressbar li:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    top: 15px;
    left: -50%;
    z-index : -1;
  }
  .progressbar li:first-child:after {
    content: none;
  }
  .progressbar li.active {
    color: #7e0095;
  }
  .progressbar li.active:before {
    border-color: #7e0095;
  }
  .progressbar li.active + li:after {
    background-color: #7e0095;
  }

  .progressbar li{
      position: relative;
  }


  .progressbar li i.fa.fa-check{
      position: absolute;
      padding: 8px;
      border-radius: 50%;
      top: 0px;
      background-color: #ced3d6;
      color: white;
  }

  .progressbar .active i.fa.fa-check{
      background: #7e0095!important;
      color: white!important;
  }
  .progressbar i.fa-list,
  .progressbar i.fa-truck-loading ,
  .progressbar i.fa.fa-truck,
  .progressbar i.fas.fa-warehouse,
  .progressbar i.fas.fa-hourglass-start,
  .progressbar i.fas.fa-handshake,
  .progressbar i.fas.fa-undo-alt{
      position: absolute;
      top:-50px;
      font-size: 30px;
  }

  .progressbar li label{
      position: absolute;
      bottom:-70px;
      font-weight: bold;
      font-size: 10px;
      text-align: left;
  }

  .active i.fa.fa-truck, .active i.fas.fa-truck-loading,.active i.fas.fa-warehouse,.active i.fas.fa-hourglass-start,.active i.fas.fa-handshake,.active i.fas.fa-undo-alt{
      color:#7e0095;
  }