#progressbar { 
    margin-bottom: 30px; 
    overflow: hidden; 
    color: lightgrey 
} 
  
#progressbar .active { 
    color: #2F8D46
} 
  
#progressbar li { 
    list-style-type: none; 
    font-size: 15px; 
    width: 15%; 
    float: right; 
    position: relative; 
    font-weight: 400;
    text-align: center;

} 
  
#progressbar #step1:before { 
    content: "1"
} 
  
#progressbar #step2:before { 
    content: "2"
} 
  
#progressbar #step3:before { 
    content: "3"
} 
  
#progressbar #step4:before { 
    content: "4"
} 
  
  
#progressbar #step5:before { 
    content: "5"
} 
  
  
#progressbar #step6:before { 
    content: "6"
} 
  
#progressbar li:before { 
    width: 50px; 
    height: 50px; 
    line-height: 45px; 
    display: block; 
    font-size: 20px; 
    color: #ffffff; 
    background: lightgray; 
    border-radius: 50%; 
    margin: 0 auto 10px auto; 
    padding: 2px
} 
  
#progressbar li:after { 
    content: ''; 
    width: 100%; 
    height: 2px; 
    background: lightgray; 
    position: absolute; 
    right: 0; 
    top: 25px; 
    z-index: -1
} 
  
#progressbar li.active:before, 
#progressbar li.active:after { 
    background: #2F8D46
} 
  
.progress { 
    height: 20px
} 
  
.progress-bar { 
    background-color: #2F8D46
}