body { background: #eeeeee; } .flex { display: flex; justify-content: center; align-content: center; align-items: center; } .flex.horizontal { flex-direction: row; } .flex.vertical { flex-direction: column; } .flex.between { justify-content: space-between; } .marginless { margin: 0 !important; } .paddingless { padding: 0 !important; } .black-text { color: #000 !important; } .grey-text { color: #a0a0a0 !important; } .white-text { color: #fff !important; } .histogram { height: 24px; width: 100%; margin: 0 auto; } .hitbox { align-items: flex-end; box-sizing: border-box; height: 100%; width: 100%; padding: 1px; border-radius: 3.75px; } .bar { background: #dcddde; padding-bottom: 1px; height: 100%; width: 85%; border-radius: 100px; } .bar.green { background: #21ba45; } .bar.red { background: #db2828; } .bar.orange { background: #f2711c; } span i.icon { margin: 0 .25em .25em 0 !important; } .ui.title.header .ui.image { margin-top: -.5em !important; }