.graf-bar-race-init { position: relative; width: 100%; --race-brand: #3388bb; }
.graf-bar-race-init #day-track { position: relative; height: 20px; margin: 20px auto; max-width: calc(100% - 30px); }
.graf-bar-race-init .tick-container { position: absolute; width: 100%; height: 2px; background: #ccc; }
.graf-bar-race-init .tick-container .tick { position: absolute; top: -4px; height: 10px; width: 1px; background: #aaa; cursor: pointer; }
.graf-bar-race-init .tick::after { content: attr(data-label); position: absolute; font-size: 10px; }
.graf-bar-race-init .tick-container .tick::after { top: 14px; transform: translateX(-50%); }
.graf-bar-race-init .current-day::after { color: var(--race-brand); font-weight: bold; font-size: 12px; }
.graf-bar-race-init .day-marker { position: absolute; top: -6px; width: 13px; height: 13px; background: var(--race-brand); border-radius: 50%; transform: translateX(-50%); transition: left .4s; pointer-events: none; }
.graf-bar-race-init .race-buttons { margin: 5px 0; display: inline-block; vertical-align: middle; }
.graf-bar-race-init .race-buttons button { padding: 5px; border: 0; border-radius: 5px; font-size: 25px; color: #777; background: #eee; cursor: pointer; }
.graf-bar-race-init button.play.active { color: #0b6f0b; background: #c8fac8; }
.graf-bar-race-init button.pause.active { color: #fda400; background: #fce8c8; }
.graf-bar-race-init button.restart.active { color: #1b8bfa; background: #cbe6fc; }
.graf-bar-race-init .bar-line { position: absolute; width: 100%; display: flex; align-items: center; height: 20px; padding: 5px 0; box-sizing: border-box; transition: top .8s; }
.graf-bar-race-init .bar-label { width: 180px; flex-shrink: 0; font-size: 11px; text-align: right; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.graf-bar-race-init .bar-wrapper { flex-grow: 1; position: relative; display: flex; align-items: center; }
.graf-bar-race-init .bar-value { width: 36px; height: 15px; line-height: 15px; font-size: 11px; font-weight: bold; z-index: 1; background: white; border: 1px solid #aaa; border-radius: 5px; text-align: center; }
.graf-bar-race-init .bar { height: 15px; line-height: 15px; transition: width .8s, background .8s; border-radius: 4px; padding-left: 6px; box-sizing: border-box; }
.graf-bar-race-init .muted .bar-label { color: #aaa; }
.graf-bar-race-init .muted .bar { opacity: .25; }
.graf-bar-race-init .muted:hover .bar { opacity: .75; }
.graf-bar-race-init #graph-scale { position: relative; height: 20px; margin-left: 190px; bottom: 4px; border-bottom: 1px solid #ccc; }
.graf-bar-race-init .scale-line { position: absolute; top: 15px; width: 1px; background: #ddd; z-index: 0; }
.graf-bar-race-init #graph-scale .tick { position: absolute; }
.graf-bar-race-init #graph-scale .tick::after { top: 2px; left: -6px; }