.bar-chart-bar {
    background-color: #ffffff; 
    display: block; 
    position:relative; 
    width: 100%; 
    height: 20px; 
}
.bar {
    float: left;
    height: 100%;
    white-space: nowrap;
  }
  .bar1 {
    background-color: #00FF00;
  }
  .bar2 {
    background-color: #C8FF00;
  }
  .bar3 {
    background-color: #FFFF00;
  }
  .bar4 {
    background-color: #FFBE00;
  }
  .bar5 {
    background-color: #FF6900;
  }
  .bar6 {
    background-color: #FF0000;
  }
  .bar-0 {
    width: 0%;
  }
  .bar-1 {
    width: 1%;
  }
  .bar-2 {
    width: 2%;
  }
  .bar-3 {
    width: 3%;
  }
  .bar-4 {
    width: 4%;
  }
  .bar-5 {
    width: 5%;
  }
  .bar-6 {
    width: 6%;
  }
  .bar-7 {
    width: 7%;
  }
  .bar-8 {
    width: 8%;
  }
  .bar-9 {
    width: 9%;
  }
  .bar-10 {
    width: 10%;
  }
  .bar-11 {
    width: 11%;
  }
  .bar-12 {
    width: 12%;
  }
  .bar-13 {
    width: 13%;
  }
  .bar-14 {
    width: 14%;
  }
  .bar-15 {
    width: 15%;
  }
  .bar-16 {
    width: 16%;
  }
  .bar-17 {
    width: 17%;
  }
  .bar-18 {
    width: 18%;
  }
  .bar-19 {
    width: 19%;
  }
  .bar-20 {
    width: 20%;
  }
  .bar-21 {
    width: 21%;
  }
  .bar-22 {
    width: 22%;
  }
  .bar-23 {
    width: 23%;
  }
  .bar-24 {
    width: 24%;
  }
  .bar-25 {
    width: 25%;
  }
  .bar-26 {
    width: 26%;
  }
  .bar-27 {
    width: 27%;
  }
  .bar-28 {
    width: 28%;
  }
  .bar-29 {
    width: 29%;
  }
  .bar-30 {
    width: 30%;
  }
  .bar-31 {
    width: 31%;
  }
  .bar-32 {
    width: 32%;
  }
  .bar-33 {
    width: 33%;
  }
  .bar-34 {
    width: 34%;
  }
  .bar-35 {
    width: 35%;
  }
  .bar-36 {
    width: 36%;
  }
  .bar-37 {
    width: 37%;
  }
  .bar-38 {
    width: 38%;
  }
  .bar-39 {
    width: 39%;
  }
  .bar-40 {
    width: 40%;
  }
  .bar-41 {
    width: 41%;
  }
  .bar-42 {
    width: 42%;
  }
  .bar-43 {
    width: 43%;
  }
  .bar-44 {
    width: 44%;
  }
  .bar-45 {
    width: 45%;
  }
  .bar-46 {
    width: 46%;
  }
  .bar-47 {
    width: 47%;
  }
  .bar-48 {
    width: 48%;
  }
  .bar-49 {
    width: 49%;
  }
  .bar-50 {
    width: 50%;
  }
  .bar-51 {
    width: 51%;
  }
  .bar-52 {
    width: 52%;
  }
  .bar-53 {
    width: 53%;
  }
  .bar-54 {
    width: 54%;
  }
  .bar-55 {
    width: 55%;
  }
  .bar-56 {
    width: 56%;
  }
  .bar-57 {
    width: 57%;
  }
  .bar-58 {
    width: 58%;
  }
  .bar-59 {
    width: 59%;
  }
  .bar-60 {
    width: 60%;
  }
  .bar-61 {
    width: 61%;
  }
  .bar-62 {
    width: 62%;
  }
  .bar-63 {
    width: 63%;
  }
  .bar-64 {
    width: 64%;
  }
  .bar-65 {
    width: 65%;
  }
  .bar-66 {
    width: 66%;
  }
  .bar-67 {
    width: 67%;
  }
  .bar-68 {
    width: 68%;
  }
  .bar-69 {
    width: 69%;
  }
  .bar-70 {
    width: 70%;
  }
  .bar-71 {
    width: 71%;
  }
  .bar-72 {
    width: 72%;
  }
  .bar-73 {
    width: 73%;
  }
  .bar-74 {
    width: 74%;
  }
  .bar-75 {
    width: 75%;
  }
  .bar-76 {
    width: 76%;
  }
  .bar-77 {
    width: 77%;
  }
  .bar-78 {
    width: 78%;
  }
  .bar-79 {
    width: 79%;
  }
  .bar-80 {
    width: 80%;
  }
  .bar-81 {
    width: 81%;
  }
  .bar-82 {
    width: 82%;
  }
  .bar-83 {
    width: 83%;
  }
  .bar-84 {
    width: 84%;
  }
  .bar-85 {
    width: 85%;
  }
  .bar-86 {
    width: 86%;
  }
  .bar-87 {
    width: 87%;
  }
  .bar-88 {
    width: 88%;
  }
  .bar-89 {
    width: 89%;
  }
  .bar-90 {
    width: 90%;
  }
  .bar-91 {
    width: 91%;
  }
  .bar-92 {
    width: 92%;
  }
  .bar-93 {
    width: 93%;
  }
  .bar-94 {
    width: 94%;
  }
  .bar-95 {
    width: 95%;
  }
  .bar-96 {
    width: 96%;
  }
  .bar-97 {
    width: 97%;
  }
  .bar-98 {
    width: 98%;
  }
  .bar-99 {
    width: 99%;
  }
  .bar-100 {
    width: 100%;
  }