.list-group.vertical-steps{
  padding-left:10px;
}
.list-group.vertical-steps .list-group-item{
  border:none;
  border-left:3px solid #ece5dd;
  box-sizing:border-box;
  border-radius:0;
  counter-increment: step-counter;
  padding-left:20px;
  padding-right:0px;
  padding-bottom:20px;  
  padding-top:0px;
}
.list-group.vertical-steps .list-group-item.active{
  background-color:transparent;
  color:inherit;
}
.list-group.vertical-steps .list-group-item:last-child{
  border-left:3px solid transparent;
  padding-bottom:0;
}
.list-group.vertical-steps .list-group-item::before {
  border-radius: 50%;
  background-color:#ece5dd;
  color:#555;
  content: counter(step-counter);
  display:inline-block;
  float:left;
  height:25px;
  line-height:25px;
  margin-left:-34px;
  text-align:center;  
  width:25px;  
}
.list-group.vertical-steps .list-group-item span,
.list-group.vertical-steps .list-group-item a{
  display:block;
  overflow:hidden;
  padding-top:2px;
}
.list-group.vertical-steps .list-group-item h3{
    margin-top:0px;
    font-size:16px;
    font-weight:bold;
    color:#ece5dd;
    font-family:ClioRegularItalic;
}

.list-group.vertical-steps .list-group-item.completed h3{
   color:#666;
}


.list-group.vertical-steps .list-group-item.active h3{
   color:#000;
}

.list-group.vertical-steps .list-group-item.active  h3 > span::after{
   font-family: FontAwesome;
   content: "\f061";
   
   display:inline-block ;
   margin-left:5px;   
}

.list-group.vertical-steps .list-group-item.completed  h3 > span::after{
   font-family: FontAwesome;
   content: "\f058";
   color:forestgreen;
   display:inline-block ;
   margin-left:5px;   
}


.list-group.vertical-steps .list-group-item  div{
   display:none;
}
.list-group.vertical-steps .list-group-item.active  div{
   display:block;
}

.list-group.vertical-steps .list-group-item.active h3{
      color:#000;
}

/*Active/ Completed States*/
.list-group.vertical-steps .list-group-item.active::before{
  background-color:#0052c2;
  color:#fff;
}
.list-group.vertical-steps .list-group-item.completed{
  border-left:3px solid #0052c2;
}
.list-group.vertical-steps .list-group-item.completed::before{
  background-color:#0052c2;
  color:#fff;
}
.list-group.vertical-steps .list-group-item.completed:last-child{
  border-left:3px solid transparent;
}


/*HORIZONTAL*/

.list-group.horizontal-steps{
  padding-left:10px;
}
.list-group.horizontal-steps .list-group-item{
  border:none;
  border-left:3px solid #ece5dd;
  box-sizing:border-box;
  border-radius:0;
  counter-increment: step-counter;
  padding-left:20px;
  padding-right:0px;
  padding-bottom:20px;  
  padding-top:0px;
}
.list-group.horizontal-steps .list-group-item.active{
  background-color:transparent;
  color:inherit;
}
.list-group.horizontal-steps .list-group-item:last-child{
  border-left:3px solid transparent;
  padding-bottom:0;
}
.list-group.horizontal-steps .list-group-item::before {
  border-radius: 50%;
  background-color:#ece5dd;
  color:#555;
  content: counter(step-counter);
  display:inline-block;
  float:left;
  height:25px;
  line-height:25px;
  margin-left:-34px;
  text-align:center;  
  width:25px;  
}
.list-group.horizontal-steps .list-group-item span,
.list-group.horizontal-steps .list-group-item a{
  display:block;
  overflow:hidden;
  padding-top:2px;
}
.list-group.horizontal-steps .list-group-item h3{
    margin-top:0px;
    font-size:16px;
    font-weight:bold;
    color:#ece5dd;
    font-family:ClioRegularItalic;
}

.list-group.horizontal-steps .list-group-item.completed h3{
   color:#666;
}


.list-group.horizontal-steps .list-group-item.active h3{
   color:#000;
}

.list-group.horizontal-steps .list-group-item.active  h3 > span::after{
   font-family: FontAwesome;
   content: "\f061";
   
   display:inline-block ;
   margin-left:5px;   
}

.list-group.horizontal-steps .list-group-item.completed  h3 > span::after{
   font-family: FontAwesome;
   content: "\f058";
   color:forestgreen;
   display:inline-block ;
   margin-left:5px;   
}


.list-group.horizontal-steps .list-group-item  div{
   display:none;
}
.list-group.horizontal-steps .list-group-item.active  div{
   display:block;
}

.list-group.horizontal-steps .list-group-item.active h3{
      color:#000;
}

/*Active/ Completed States*/
.list-group.horizontal-steps .list-group-item.active::before{
  background-color:#0052c2;
  color:#fff;
}
.list-group.horizontal-steps .list-group-item.completed{
  border-left:3px solid #0052c2;
}
.list-group.horizontal-steps .list-group-item.completed::before{
  background-color:#0052c2;
  color:#fff;
}
.list-group.horizontal-steps .list-group-item.completed:last-child{
  border-left:3px solid transparent;
}