.status-row {
    margin: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dbdbdb;
}

.footer li {
    margin: .4rem 1rem;
}

@media (min-width: 769px) {
    .flex-text {
        font-size: calc(1rem + 0.4vw - 9.5px);
        vertical-align: middle;
    }
}

@media (max-width: 768px) {
    .flex-text {
        font-size: 1rem;
        vertical-align: middle;
    }
}

.centre {
    text-align: center;
}

.red-icon {
    color: red;
}

.grow-3 {
    flex-grow: 3;
}

.grow-4 {
    flex-grow: 4;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

@keyframes shrink {
    0% {
        background: green;
    }
    75% {
        background: yellow;
    }
    100% {
        background: red;
    }
    to {
        /* More performant than animating `width` */
        transform: scaleX(0);
    }
}

#time-bar-id {
    --duration: 10;
}

.time-bar div {
    height: 5px;
    animation: shrink calc(var(--duration) * 1s) linear forwards;
    transform-origin: left center;
}

.nowrap-whitespace {
    white-space: nowrap;
}