.graph {
   float: left;
   clear: left;
}

.graph * {
   margin: 0;
   padding: 0;
}

.graph .title {
   text-align: center;
   font-weight: bold;
   font-size: 20px;
   margin-bottom: 10px;
}

.graph .data {
   list-style-type: none;
   position: relative;
   border-bottom: 2px solid #333;
   overflow: hidden;
}

.graph .bar0, .bar1, .bar2, .bar3, .bar4, .bar5, .bar6, .bar7, .bar8, .bar9 {
   position: absolute;
   bottom: 0;
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.graph .bar0 {
   background: #6e6e6e;
}

.graph .bar1 {
   background: #a4a4a4;
}

.graph .bar2 {
   background: #00ffff;
}

.graph .bar3 {
   background: #2e9afe;
}

.graph .bar4 {
   background: #2efe9a;
}

.graph .bar5 {
   background: #31b404;
}

.graph .bar6 {
   background: #f3f781;
}

.graph .bar7 {
   background: #dba901;
}

.graph .bar8 {
   background: #faac58;
}

.graph .bar9 {
   background: #fe2e2e;
}


.graph .value0, .value1, .value2, .value3, .value4, .value5, .value6, .value7, .value8, .value9 {
   margin-top: 5px;
   display: block;
   color: #ffffff;
   font-size: 9px;
   text-align: center;
}

.graph .value2, .value4, .value6, .value8 {
   color: #000000;
}

.graph .outer {
   margin-top: -15px;
   color: #000000;
}

.graph .label {
   margin-top: 5px;
   height: 1.8em;
   list-style-type: none;
}

.graph .label li {
   float: left;
   text-align: center;
   font-size: 8px;
}

.graph .data {
   background: #c0c0c0;
}

.graph .label {
   color: #eeee00;
   background: #000000;
   /* font-weight: bold; */
}