.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;
        }

        .chart li.title:before
        {
            color: black;
            font-weight: bold;
            left: 0;
        }

        .chart li:first-child
        {
            margin-top: 0;
        }

        .chart li .bar
        {
            background: black;
            height: 100%;
        }

        .chart li .number
        {
            color: black;
            font-size: 18px;
            font-weight: bold;
            padding-left: 5px;
            position: absolute;
            top: -2px;
        }

        .chart li.past .bar
        {
            background: #990000;
        }

        .chart li.past .number
        {
            color: #990000;
        }
         .chart li.newPast .bar
        {
            background: #ffcc66;
        }

        .chart li.greenPast .number
        {
            color: #00e64d;
        }
          .chart li.greenPast .bar
        {
            background: #00e64d;
        }

        .chart li.greenPast .number
        {
            color: #009900;
        }
        .chart li.bluePast .bar
        {
            background: #0099ff;
        }

        .chart li.bluePast .number
        {
            color: #0099ff;
        }

@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;
        }
}