body {
    grid-template-columns: 1fr;
    grid-template-rows: 2rem 2rem 1fr 2rem;
}

small {
    flex-basis: 100%;
    text-align: right;
    line-height: 1.5rem;
    font-family: 'JetBrains Mono';
}

/* -----------------------------
-------------------------------- 
 
STATUS LOGS / HISTORY 
 
--------------------------------
----------------------------- */

#status-history {
    overflow-y: scroll;
    overflow-x: hidden;
    /* todo : hide scrollbar */
    scroll-behavior: smooth;
    border-top: 1px solid var(--ui-2);
}

#status-history::-webkit-scrollbar {
    display: none !important;
}

#status-history-go-top-button, 
#status-history-go-bottom-button {
    height: 2rem;
    background-color: transparent;
    text-align: center;
    font-size: 0.5rem;
    line-height: 2.25rem;
    color: var(--ui-3);
    padding: 0 1rem;
}

#status-history-go-top-button:hover,
#status-history-go-bottom-button:hover {
    color: var(--ui-4);
    background-color: var(--ui-2);
    cursor: pointer;
}

#status-history-go-bottom-button {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    outline: 1px solid var(--ui-2);
}

#status-history-go-bottom-button.yellow {
    outline: 1px solid var(--ui-yellow);
    color: var(--ui-yellow) !important;
}

.status:hover { outline: 1px solid #FFF; }
.status:hover .time { opacity: 1 !important; }

.status, .labels {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 1rem;
    outline: 1px solid transparent;
    opacity: 1;
    /* transition: 0.15s outline linear, 0.15s opacity linear; */
}

.labels {
    border-top: 1px solid var(--ui-2);
    line-height: 2.25rem;
}

.labels small {
    font-weight: 700;
    line-height: 2rem;
    color: var(--ui-3);
    text-transform: uppercase;
}

.time,
.module,
.message {
    text-align : left;
}

.time   { min-width: 8rem;   max-width: 8rem;   }
.module { min-width: 4.5rem; max-width: 4.5rem; }
.message {
    width: 100%;
    overflow: hidden;
    padding-left: 0.25rem;
    text-align: justify;
    /* enable if you'd like one liner updates, but I think multi line is good */
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    /* direction: rtl */
}

.time,
.module {
    opacity: 0.5;
    transition: 0.5s opacity ease;
}

.status.updated .time {
    opacity: 1;
}

pre { display: inline-block; }