ht-bar { display: block; }

ht-bar table { table-layout: fixed; }

.rtl ht-bar table td, .rtl ht-bar table th { padding: 0; }

ht-bar td { height: 14px; font-size: 11px; line-height: 11px; padding: 0; vertical-align: middle; }

ht-bar .ht-bar-level { background-color: #A9A9A9; position: relative; }
ht-bar .ht-bar-level.ht-bar-maxed { background-color: #FFEB99; }
ht-bar .ht-bar-cap { background-color: #CACACA; text-align: right; }
.rtl ht-bar .ht-bar-cap { text-align: left; }
ht-bar .ht-bar-max { background-color: #ECECEC; color: #B5A9A9; display: flex; align-items: center; }

ht-bar.ht-bar-primary td { height: 17px; }
ht-bar.ht-bar-primary .ht-bar-level { background-color: #66CC32; color: #FFEB99; }
ht-bar.ht-bar-primary .ht-bar-max { background-color: #FFEB99; color: #66CC32 }

ht-bar ht-bar-name { color: black; white-space: nowrap; position: absolute; top: 2px; left: 2px; }
.rtl ht-bar ht-bar-name { left: auto; right: 2px; }

ht-bar ht-bar-number { display: inline-block; margin-left: 5px; margin-right: 5px; white-space: nowrap; }

ht-bar .ht-bar-level ht-bar-number { position: absolute; top: 2px; right: 0; }
.rtl ht-bar .ht-bar-level ht-bar-number { right: auto; left: 0; }

.ht-bar-level { position: relative; }
.ht-bar-level-label { display: none; position: absolute; left: 75px; top: 2px; }
.rtl .ht-bar-level-label { left: auto; right: 75px; }
ht-bar.ht-bar-show-level-label .ht-bar-level-label { display: block; }
ht-bar.ht-bar-show-level-label ht-bar-number { display: none; }