/* Keep the original header dimensions and give the timeline labels room below it. */
body.has-activity-line .app-topbar.app-mainnav { overflow: visible; }
@media (max-width: 767.98px) {
    body.has-activity-line .content-page {
        padding-top: calc(var(--app-topbar-height) + 12px) !important;
    }
}
.app-activity-line {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px;
    padding: 0 16px;
    background: transparent;
    pointer-events: none;
    color: var(--bs-body-color, #475569);
}
.app-activity-line__scale { position: relative; height: 20px; margin: 0 28px; }
.app-activity-line__chevron {
    position: absolute; top: -11.5px; width: 24px; height: 24px;
    min-height: 24px !important;
    transform: none;
    display: grid; place-items: center; padding: 0; border: 0;
    background: transparent; color: inherit; font-size: 0; line-height: 1;
    pointer-events: auto; cursor: pointer;
}
.app-activity-line__chevron::before {
    content: ''; position: absolute; top: 12px; left: 12px;
    box-sizing: border-box; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.app-activity-line__previous::before { transform: translate(-50%, -50%) rotate(135deg); }
.app-activity-line__next::before { transform: translate(-50%, -50%) rotate(-45deg); }
.app-activity-line__previous { left: 4px; }
.app-activity-line__next { right: 4px; }
.app-activity-line__chevron:disabled { opacity: .35; cursor: default; }
.app-activity-line__chevron:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 4px; }
.app-activity-line__tick { position: absolute; top: 7px; transform: translateX(-50%); font-size: 9px; line-height: 11px; white-space: nowrap; }
.app-activity-line__tick::after { content: ''; position: absolute; width: 1px; height: 4px; top: -7px; left: 50%; background: var(--border, #e5e7eb); }
.app-activity-line__dot { position: absolute; top: .5px; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: auto; }
.app-activity-line__dot::after { content: ''; position: absolute; inset: -5px; }
.app-activity-line__dot:hover, .app-activity-line__dot:focus-visible { z-index: 2; outline: 2px solid var(--bs-body-color, #334155); outline-offset: 2px; }
.app-activity-line__status { position: absolute; top: 7px; left: 30px; font-size: 9px; line-height: 11px; color: inherit; background: transparent; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.app-activity-line__status:focus-visible { width: auto; height: auto; clip-path: none; z-index: 3; pointer-events: auto; }
@media (max-width: 900px) {
    .app-activity-line__tick:nth-child(2n) { font-size: 0; }
}
@media (max-width: 500px) {
    .app-activity-line__tick:not(:nth-child(4n + 1)) { font-size: 0; }
}