.progress-bar-demo .progress-bar {
    text-align: left !important;
    padding: 4px !important;
  }
  
  .progress-bar-demo .progress {
    position: relative;
    height: 28px;
    padding: 0;
    margin-bottom: 10px;
  }
  
  .progress-bar-demo .progress > .demo-progress-title {
    position: absolute;
    top: 4px;
    left: 10px;
    color: #FFFFFF;
  }
    
  .progress-bar-demo .demo-progress-bar-01 {
    background-color: #0dcaf0;
  }
  
  .progress-bar-demo .demo-progress-bar-02 {
    background-color: #008648;
  }
    
    .progress-bar-demo .demo-progress-bar-03 {
    background-color: #dc3545;
    }
    
    .progress-bar-demo .demo-progress-bar-04 {
    background-color: #ffc107;
    }
  
  .progress-bar-demo .progress > .demo-progress-info {
    position: relative;
    color: #ffffff;
    padding: 4px 6px;
    right: 0;
    z-index: 1 !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
    
  .progress-bar-demo .progress > .demo-progress-info:before {
    content: "";
    position: absolute;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    height: 0px;
    width: 0px;
    margin-left: -14px;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-01 {
    background-color: #0889a3;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-01:before {
    border-right: 10px solid #0889a3;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-02 {
    background-color: #006134;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-02:before {
    border-right: 10px solid #006134;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-03 {
    background-color: #a90111;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-03:before {
    border-right: 10px solid #a90111;
  }
     
  .progress-bar-demo .progress > .demo-progress-info-04 {
    background-color: #b68800;
  }
    
  .progress-bar-demo .progress > .demo-progress-info-04:before {
    border-right: 10px solid #b68800;
  }