.banner-menu-no-connection {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    color: white;
    background-color: var(--surface-800);;
    padding: 2px;
    animation: pulse-banner-offline 2s;
    -webkit-animation: pulse-banner-offline 2s;
    z-index: 3;
    height: 22px;

    @media (min-width: 501px) {
        left: 50%;
        right: auto; /* Disabilita il right 0 */
        transform: translateX(-50%);
        width: 500px;
    }
}


.banner-menu-reconnection {
    position: fixed;
    opacity: 0;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 22px;
    z-index: 3;
    color: white;;
    background-color: #189cd8;
    padding: 3px;
    animation: pulse-banner-return-online 5s;
    -webkit-animation: pulse-banner-return-online 5s;

    @media (min-width: 501px) {
        left: 50%;
        right: auto; /* Disabilita il right 0 */
        transform: translateX(-50%);
        width: 500px;
    }
}

/* ANIMAZIONE OFFLINE */

@-webkit-keyframes pulse-banner-offline {
    0% {
        background-color: var(--surface-500);
    }
    100% {
        background-color: var(--surface-800);
    }
}

@keyframes pulse-banner-offline {
    0% {
        background-color: var(--surface-500);
    }
    100% {
        background-color: var(--surface-800);
    }
}

/* ANIMAZIONE DI NUOVO ONLINE */

@-webkit-keyframes pulse-banner-return-online {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes pulse-banner-return-online {
    0% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.img-offline-globe-empty-result {
    width: 5rem;
    height: 5rem;
    filter: grayscale(1) brightness(70%);
}