ht-bar-new {
    display: block;
    height: 14px;
    pointer-events: none;
    position: relative;
    width: 110px;
}

ht-bar-new .ht-bar-denomination {
    white-space: nowrap;
    font-size: 11px;
    margin-left: 2px;
    line-height: 14px;
}

ht-bar-new .ht-bar-level {
    background-color: #59965d;
    position: absolute;
    overflow: hidden;
    color: #f7f8f7;
    height: 14px;
}

.rtl ht-bar-new .ht-bar-level
{
    text-align: left;
}

ht-bar-new .ht-bar-maxed {
    background-color: #FFC000;
    color: black;
    height: 14px;
}

ht-bar-new .ht-bar-cap {
    position: absolute;
    background-color: #CACACA;
    overflow: hidden;
    color: black;
    height: 14px;
}

ht-bar-new .ht-bar-max {
    position: absolute;
    background-color: #ECECEC;
    color: #3f7137;
    overflow: hidden;
    height: 14px;
}

ht-bar-new .ht-bar-level.verylow {
    background-color: #DD4140;
}

ht-bar-new .ht-bar-level.low {
    background-color: #F5A104;
    color: black;
}

ht-bar-new .ht-bar-level.high {
    background-color: #F1C40A;
    color: black;
}

ht-bar-new .ht-bar-level.veryhigh {
    background-color: #59965d;
}

ht-bar-new span {
    white-space: nowrap;
    margin-left: 2px;
}

ht-skill[max="8"] ht-bar-new, ht-skill .ht-youth-bar {
    width: 56px;
    margin-right: 2px;
}

ht-skill[max="9"] ht-bar-new {
    width: 63px;
    margin-right: 2px;
}