/*-------------------------------------------------------------------------------*/
/* elementi di stile generali per il navigatore */
/*-------------------------------------------------------------------------------*/

.navigatorContainer {
    position: absolute;
    height: auto;
    min-width: 300px;
    max-width: 560px;
    left: 100px;
    top: 50%;
    padding: 5px;
    background-color: var(--navigatorBg);
    border-radius: 20px;
    z-index: 3;
    opacity: 0.8;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border-color: var(--icoSxBg);
    border-width: 1px;
    border-style: solid;
}

.anchorContainer {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 8px;
    left: 8px;
    border-radius: 5px;
    height: 44px;
    width: 44px;
    background-color: var(--mainBg);
    color: var(--navigatorBg);
    cursor: move;
}
.anchorContainer:hover {
    background-color:var(--navBarC);
}

.addButtonContainer {
    display: flex;
    position:relative;
    width:100%;
    justify-content: center;
    align-items: center;
}

.addButton {
    cursor: pointer;
    color: var(--bs-body-bg);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    border: solid 3px var(--baseBg);
}
    .addButton:hover {
        background-color:white;
        color: var(--navBarA);
    }

/*contenitore per le icone rappresentanti le zone*/
.iconZoneContainer {
    width: 100%;
    margin-top: 35px;
    margin-bottom: 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/*contenitore dei tasti azioni sul navigatore*/
.zoneComContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

/*tasti comandoi sul navigatore*/
.navButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 44px;
    width: 44px;
    border-radius: 5px;
    background: var(--baseBg);
    color: var(--mainIcoBg);
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
}
    .navButton:hover {
        background: var(--navBarA);
        color: var(--navBarColor);
    }

.icoNav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 44px;
    margin: 5px;
    border-radius: 5px;
    background-color: var(--baseBg);
    color: var(--navigatorBg);
    font-size: 23px;
    font-weight: bold;
}
    .icoNav:hover {
        cursor: pointer;
        background: var(--navBarC);
        color: var(--navBarColor);
    }

    /*attivo solo durante la funzione sposta zona dal navigatore*/
    .icoNav.moveIcon:hover:before {
        content: "";
        position: absolute;
        top:4px;
        left:-6px;
        width:3px;
        height:40px;
        border-radius:50%;
        background-color:red;
    }


.actualSelectIco {
    border: 3px solid var(--navSelect);
    /*background-color: var(--navSelect);*/
    color: black;
}

.moveSelect {
    background-color: var(--navBarA);
    color: var(--navBarColor);
    z-index: 999;
    border-radius: 50%;
    animation: pulse 1s infinite; /* 1s è la durata dell'animazione, infinite la ripete all'infinito */
}

@keyframes pulse {
    0% {
        transform: scale(1); /* Scala iniziale dell'elemento */
        opacity: 1; /* Opacità iniziale dell'elemento */
    }

    50% {
        transform: scale(1.8); /* Scala l'elemento leggermente più grande */
        opacity: 0.4; /* Riduci l'opacità */
    }

    100% {
        transform: scale(1); /* Scala l'elemento alla dimensione originale */
        opacity: 1; /* Ripristina l'opacità */
    }
}