.chart_title { float:left; width:60px;}

.chart{zoom:1;width:130px; float:left; margin-top:2px;}
.chart:after{clear:both;content:'.';display:block;height:0;visibility:hidden}
.chart li{display:block;height:14px;margin-top:5px;position:relative}
.chart li:before{color:#fff;content:attr(title);left:0;position:absolute}
.chart li.title:before{color:black;left:0}
.chart li:first-child{margin-top:0}
.chart li.past .bar{height:100%; background:#4981c9}
.chart li.past .number{color:black; padding-left:5px;position:absolute;top:-2px; white-space:nowrap;}
.chart li.last .bar{height:100%; background:#4981c9; display:none;}
.chart li.last .number{color:black; padding-left:5px;position:absolute;top:-2px; white-space:nowrap; display:none;}

@media screen and (max-width: 230px){
	.chart li{height:auto}
	.chart li:before{color:black;display:block;left:0;position:relative}
	.chart li.title:before{border-bottom:1px solid}
	.chart li .bar{height:23px}
	.chart li .number{display:block;left:0 !important;padding-left:0;position:relative;top:-8px}
	}