.barfiller {
    display: inline-block;
    /*width: 50%;*/
    width: calc(100% - 10px);
    height: 13px;
    /*background: #fcfcfc;*/
    background: #d9d9d9;
    border: 1px solid #ccc;
    position: relative;
    /*box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5);
    -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5);*/
}
@media (max-width: 768px) {
    .barfiller {
        width: calc(100% - 4px);
        margin: 0 2px;
    }
}

    .barfiller img {
        width:100%;
        height:8px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99
    }
    .barfiller .fill {
        display: block;
        position: relative;
        width: 0px;
        height: 100%;
        background: #333;
        z-index: 0;
    }

    .barfiller .tipWrap {
        display: none;
    }

    .barfiller .tip {
        margin-top: -20px;
        padding: 0px 4px;
        font-size: 9px;
        color: #fff;
        left: 0px;
        position: absolute;
        z-index: 2;
        background: #333;
        line-height: 14px;
    }

        .barfiller .tip:after {
            border: solid;
            border-color: rgba(0,0,0,.8) transparent;
            border-width: 5px 4px 0 4px;
            content: "";
            display: block;
            position: absolute;
            left: 9px;
            top: 100%;
            z-index: 9
        }