body {
    font-family: 'Oswald', sans-serif;
}

.barfiller {
    width:100%;
    height:8px;
    background:var(--secondry-color);
    border:1px solid var(--primary-color);
    position:relative;
    margin-bottom:20px;
    
}

.barfiller .fill {
    display:block;
    position:relative;
    width:0px;
    height:100%;
    background: var(--primary-color)!important;
    z-index:1;
}

.barfiller .tipWrap {
    display:none;
}

.barfiller .tip {
    margin-top:-30px;
    padding:1px 4px;
    font-size:11px;
    color:#fff;
    left:0px;
    position: relative;;
    z-index:2;
    background: var(--secondry-color) ;
} 

.barfiller .tip:after {
    border:solid;
    border-color:var(--primary-color) transparent;
    border-width:6px 6px 0 6px;
    content:"";
    display:block;
    position:absolute;
    left:9px;
    top:100%;
    z-index:9
}