.chart{
    zoom:1;width:90%
}
.chart:after{
    clear:both;content:'.';
    display:block;
    height:0;visibility:hidden
}
.chart li{
    display:block;
    height:23px;
    margin-top:3px;
    position:relative
}
.chart li:before{
    color:#fff;
    content:attr(title);
    left:5px;
    position:absolute;
    margin-top: 8px;
}
.chart li.title:before{
    color:#878e94;
    left:0
}
.chart li:first-child{
    margin-top:0
}
.chart li .bar{
    background:#d0bd86bd;
    height:100%;
    border-bottom: 2px solid #924b21;
}
.chart li .number{
    color:black;
    font-size:18px;
    font-weight:bold;
    padding-left:5px;
    position:absolute;
    top:-2px
}
.chart li.past .bar{
    background:#d09f86;
}
.chart li.past .number{
    color:#aaa;
}
@media screen and (max-width: 480px){.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}}