/* progress tracker vertical */
.wrapper {
  width: 330px;
  font-family: 'Helvetica';
  font-size: 14px;
  border: 1px solid #CCC;
}

.StepProgress {
  position: relative;
  padding-left: 45px;
  list-style: none;
}

.StepProgress::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 15px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #CCC;
}
  
.StepProgress-item {
    position: relative;
    counter-increment: list;
}

.StepProgress-item:not(:last-child) {
      padding-bottom: 20px;
    }
    
.StepProgress-item::before {
      display: inline-block;
      content: '';
      position: absolute;
      left: -30px;
      height: 100%;
      width: 10px;
    }
    
.StepProgress-item::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 0;
      left: -37px;
      width: 12px;
      height: 12px;
      border: 2px solid #CCC;
      border-radius: 50%;
      background-color: #FFF;
    }
    
.StepProgress-item.is-done::before {
        border-left: 2px solid green;
      }
.StepProgress-item.is-done::after {
        content: "✔";
        font-size: 10px;
        color: #FFF;
        text-align: center;
        border: 2px solid green;
        background-color: green;
      }

    
.StepProgress-item.current::before {
        border-left: 2px solid green;
      }
      
.StepProgress-item.current::after {
        content: counter(list);
        padding-top: 1px;
        width: 19px;
        height: 18px;
        top: -4px;
        left: -40px;
        font-size: 14px;
        text-align: center;
        color: green;
        border: 2px solid green;
        background-color: white;
      }

  
.StepProgress  strong {
    display: block;
  }

/* progress tracker horisontal */

.progress-meter-container {
  width: 100%;
  margin: 0 auto;
  font-size: 0.8rem;
}

.progress-meter {
  padding: 0;
}

ol.progress-meter {
  padding-bottom: 9.5px;
  list-style-type: none;
}
ol.progress-meter li {
  display: inline-block;
  text-align: center;
  text-indent: -19px;
  height: 36px;
  width: 15%;
  font-size: 12px;
  border-bottom-width: 4px;
  border-bottom-style: solid;
}
ol.progress-meter li:before {
  position: relative;
  float: left;
  text-indent: 0;
  left: -webkit-calc(50% - 9.5px);
  left: -moz-calc(50% - 9.5px);
  left: -ms-calc(50% - 9.5px);
  left: -o-calc(50% - 9.5px);
  left: calc(50% - 9.5px);
}
ol.progress-meter li {
  font-size: 12px;
}
ol.progress-meter li.done:before, ol.progress-meter li.current:before, ol.progress-meter li.todo:before {
  height: 19px;
  width: 19px;
  line-height: 21.85px;
  bottom: -28.175px;
  border: none;
  border-radius: 19px;
}
ol.progress-meter li.done {
  color: black;
  border-bottom-color: yellowgreen;
}
ol.progress-meter li.done:before {
  color: white;
  background-color: yellowgreen;
  content: "\2713";
}
ol.progress-meter li.current {
  color: black;
  border-bottom-color:  orange;
}
ol.progress-meter li.current:before {
  color: white;
  background-color: orange;
  content: " ";
}
ol.progress-meter li.todo {
  color: silver;
  border-bottom-color: silver;
}
ol.progress-meter li.todo:before {
  color: white;
  background-color: silver;
  content: "\2717";
}