.realtime-connections-watcher
{
    display: flex;
    flex-direction: row;

    margin-block: 5px;
    padding: 10px 20px 20px 0px;
    text-align: left;
    align-items: center;

    gap: 10px;

    filter: brightness(200%);
}

.realtime-connections-watcher img
{
    height: 1em;
    width: auto;
}

.realtime-connections-watcher div.realtime-text-content
{
    position: relative;
    font-size: 12px;

    height: 1.5em;
    gap: 4px;
    display: flex;
    align-items: baseline;
    flex-direction: row;
    flex-wrap: nowrap;
}

.realtime-connections-watcher div.realtime-counter-display
{
    position: relative;

    font-family: "IBM Plex Mono", "Courier New", monospace;
    display: flex;
    flex-direction: row-reverse;
    max-height: 100%;
    overflow-x: hidden;
    transition: 0.5s width ease-out;
}

.realtime-connections-watcher div.realtime-counter
{
    position: relative;
    display: flex;
    flex-direction: column;
    width: max-content;
    flex-shrink: 0;
    overflow-y: hidden;
}

.realtime-connections-watcher div.realtime-counter span
{
    flex-shrink: 0;
    height: 1.5em;
}