/*
* {
    box-sizing: border-box;
}
*/

.stepprogress {
    padding: 0;
    list-style-type: none;
    font-family: arial;
    font-size: 12px;
    clear: both;
    line-height: 1em;
    margin: 0 -1px;
    text-align: center;
}

.stepprogress li {
    float: left;
    padding: 10px 30px 10px 40px;
    background: #34882f;
    color: #fff;
    position: relative;
    /*border-top: 1px solid #666;
    border-bottom: 1px solid #666;*/
    margin: 0 1px;
}

.stepprogress li:before {
    content: '';
    border-left: 16px solid #fff;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: 0;
    left: 0;

}
.stepprogress li:after {
    content: '';
    border-left: 16px solid #34882f;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 20;
}

.stepprogress li.active {
    background: #e5a13e;
}

.stepprogress li.active:after {
    border-left-color: #e5a13e;
}

.stepprogress li.active.danger {
    background: #ff0000;
}

.stepprogress li.active.danger:after {
    border-left-color: #ff0000;
}

.vstepprogress {
  position: relative;
  padding-top: 10px;
  padding-left: 45px;
  list-style: none;
}
.vstepprogress::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  width: 10px;
  height: 100%;
  border-left: 2px solid #CCC;
}
.vstepprogress-item {
  position: relative;
  counter-increment: list;
}
.vstepprogress-item:not(:last-child) {
  padding-bottom: 5px;
}
.vstepprogress-item::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: -26px;
  height: 100%;
  width: 10px;
}
/* Green circle */
.vstepprogress-item::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: -37px;
  width: 24px;
  height: 24px;
  border: 2px solid #CCC;
  border-radius: 50%;
  background-color: #FFF;
}
.vstepprogress-item.is-done::before {
  border-left: 2px solid green;
}
.vstepprogress-item.is-done::after {
  /* content: "✔"; */
  content: "\2713";
  font-size: 15px;
  color: #FFF;
  text-align: center;
  border: 2px solid green;
  background-color: green;
}
.vstepprogress-item.current::before {
  border-left: 2px solid green;
}
.vstepprogress-item.current::after {
  content: counter(list);
  padding-top: 1px;
  width: 35px;
  height: 35px;
  top: -10px;
  left: -42px;
  font-size: 20px;
  text-align: center;
  color: #e5a13e;
  border: 2px solid #e5a13e;
  background-color: white;
}

.vstepprogress-item.approve_pending::before {
  border-left: 2px solid #f8ac59;
}
.vstepprogress-item.approve_pending::after {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;

  content: "\f252";
  padding-top: 1px;
  width: 35px;
  height: 35px;
  top: -10px;
  left: -42px;
  font-size: 20px;
  text-align: center;
  color: #e5a13e;
  border: 2px solid #e5a13e;
  background-color: white;
}

.vstepprogress-item.disapproved::before {
  border-left: 2px solid red;
}
.vstepprogress-item.disapproved::after {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;

  content: "\f05e";
  padding-top: 1px;
  width: 35px;
  height: 35px;
  top: -10px;
  left: -42px;
  font-size: 20px;
  text-align: center;
  color: #f00;
  border: 2px solid #e5a13e;
  background-color: white;
}