.progressbar {
      counter-reset: step;
      padding: inherit;
      z-index: 1000;
    width: 600px;
    min-width: 150px;
  }
  .progressbar li {
      list-style-type: none;
      width: 16%;
      float: left;
      font-size: 13px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #7d7d7d;
      transition: all 0.4s;
      -webkit-transition: all 0.4s;

  }

.progressbar_3 li{
       width: 33%;
    }

.progressbar_4 li{
       width: 24%;
    }

.progressbar_5 li{
       width: 20%;
    }
  .progressbar li i{
    font-size: 16px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
  }
 .progressbar li.active{
  color: #55b776;
 }

 .progressbar li.false{
  color: #ff0000;
 }
@media (min-width: 768px) { 
 .progressbar li {
font-size: 16px;

 }
   .progressbar li i{
    font-size: 19px;
  }

 }
  .progressbar li .nb {
      width: 55px;
      height: 55px;
      content: counter(step);
      counter-increment: step;
      line-height: 56px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
      transition: all 0.2s;
      -webkit-transition: all 0.2s;
      
  }

/*   .progressbar li .nb:hover{
    background: #7d7d7d;
    color: white;
    cursor: pointer;

   }*/

  .progressbar li:after{
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d !important;
      top: 28px;
      left: -50%;
      z-index: -1;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active .nb {
    border:3px;
      border-color: #55b776;
      background:  #55b776;
      color: white;
  }




  .progressbar li.now .nb {
    border:3px;
      border-color: #ccc;
      background:  #0062cc;
      color: white;
  }
  .progressbar li.now>span{
    color: #0062cc;
  }

  .progressbar li.finish  .nb {
    border:3px;
      border-color: #ccc;
      background:  #ccc;
      color: black;
  }





  .progressbar li.active + li:after {
      background-color: #55b776;
  }
  .progressbar li.false + li:after {
      background-color:  #ff0000;
  }

    .progressbar li.finish + li:after {
      background-color:  #ccc;
  }
 

.progressbar li.false .nb {
    border:3px;
      border-color: #f30202;
      background:  #f30202;
      color: white;
  }
 /*   .progressbar li.false .nb:hover{
    background: #b50000;
    color: white;
    cursor: pointer;

   }
*/

/*    .progressbar li.active .nb:hover{
    background: #23753f;
    color: white;
    cursor: pointer;
   }*/
/*    .progressbar li.finish .nb:hover{
    background:#a2a2a2;
    color: black;
    cursor: pointer;

   }*/


.cursor-pointer{
  cursor: pointer;
}