.internet-connection-status {
    width: 100%;
    max-height: 0;  /* Start with a max-height of 0 */
    overflow: hidden;  /* Hide anything outside of the max height */
    text-align: center;
    color: var(--white);
    font-weight: 700;
    font-size: 12px;
    background-color: transparent;
    padding: 0 0;  /* No padding when collapsed */
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;  /* Transition both max-height and padding */
}

.internet-connection-status.online {
    background-color: #00b894;
}

.internet-connection-status.offline {
    background-color: #ea4c62;
}

.internet-connection-status.active {
    max-height: 100px;  /* Set a fixed max-height when the message is visible */
    padding: 5px 0;  /* Add padding when active */
}