/*****  Bar Chart  *****/
#barchart {
    width: 100%!important;
    padding-top: 65px;
    margin-bottom:20px;
}
#barchart .holder {
    background:var(--boxBgColor);
    height:35px;
    border-radius:4px;
    position: relative;
    margin-bottom: 10px;
}
#barchart .fill {
    height:100%;
    width:0;
    background:var(--linkBorderColor); 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px;
    position:relative;
}
#barchart .counter {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
}
#barchart .marker {
    position:absolute;
    bottom:100%;
    transform:translateX(-50%);
    text-align:center;
    margin-bottom: 15px;
    transition:opacity 0.4s ease;
    font-size:15px;
}
#barchart .marker::after {
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:105%;
    width:1px;
    height:30px;
    background:#000;
}
#barchart #legende {
    width:100%;
    display:flex;
    justify-content:space-between;
}
@media only screen and (max-width:849px) {
    .mod_article #barchart div > :first-child {
        margin-top:0!important;
    }
}
@media only screen and (max-width:444px) {
    #barchart {
        padding-top: 35px;
    }
    #barchart .marker {
        font-size: 11px;
    }
}