div.left {
    background: rgb(219, 237, 231);
    display: flex;
    flex-direction: column;
    height: 100vh; /* Altezza completa viewport */
    min-width: 350px;
    max-width: 350px;
    overflow: hidden; /* Previene scroll generale */
    border-right: 0px;
    z-index: 999;
    position:relative
}

div.right{
    flex-grow: 1;
    height: 100%;
    background: white;
    padding:30px 10px 10px 10px;
    overflow: auto;
}

/******* TOP-BAR */
.left .top-bar{
    flex-shrink: 0;
    margin:10px auto auto auto;
}

.left .top-bar .logo{
    max-width: 200px;
}

.left .top-bar .appname{
    color: var(--marrone);
    font-size: 1.2rem;
}

.left .top-bar .hide-menu{
    position: absolute;
    top: 5px;
    right: 17px;
    cursor: pointer;
    font-size: 30px;
    padding: 0;
    background: 0 0;
    border: 0;
    color: var(--marrone);
}

.show-menu{
    position: absolute;
    left: 10px;
    top: 5px;
    cursor: pointer;
    font-size: 30px;
    padding: 0;
    background: 0 0;
    border: 0;
    color: var(--marrone);
}



.left .top-buttons {
    flex-shrink: 0; /* Non si restringe */
    padding: 10px;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid #ddd;
}

.left  .scroll-menu {
    flex: 1; /* Occupa tutto lo spazio disponibile */
    overflow-y: auto; /* Scroll verticale se necessario */

}
.left .bottom-button {
    flex-shrink: 0; /* Non si restringe */
    border-top: 1px solid #ddd;
    padding: 10px;
}

/******* PANEL MENU */
.menu{
    min-width: 350px;
    max-width: 350px;
    height: 100%;
    border-right:1px solid lightgray;
    background:var(--bianco);
    padding: 10px 20px;
}



.menu .panel {
    border-color:var(--appcolor);
}

.menu .panel-heading {
    background-color: var(--appcolor);
    border-bottom-color: var(--appcolor);
}

.menu .panel .panel-heading .panel-title .btn-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.menu .panel .panel-heading .panel-title .btn-group button{
    background-color: inherit;
    color: var(--bianco);
    font-weight: bold;
    text-align: left;
    padding:0
}

.menu .panel .panel-heading .panel-title .btn-group span{
    position: absolute;
    right:5px;
    color:var(--bianco);
}

.menu .panel .panel-body{
    padding:0;
}

.menu .panel .panel-body .list-group{
    margin-bottom: 0px
}

.menu .panel .panel-body .list-group .list-group-item{
    padding:10px
}


.menu .panel .panel-body .list-group .list-group-item:first-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.menu .panel .panel-body .list-group .list-group-item.active{
    background-color: var(--appcoloralpha2);
    border-color:  var(--appcoloralpha2);
    color:var(--marrone);
}


/******* NAV  MENU */
.left .nav {
    background: inherit;
}

.left .nav .nav-item{
    background: inherit;
}

.left .nav .nav-item .list-group-item{
    border: none;
    background: transparent;
    display:flex;
    align-items: center;
    gap:5px;
}

.left .nav .nav-item .list-group-item i,.left .nav .nav-item .list-group-item ion-icon{
    font-size:28px
}

.left .nav .nav-item .list-group-item span{
    /*    flex-grow:1*/
}

.left .nav .nav-item .list-group-item[disabled]:hover{
    cursor:auto
}

.left .nav .nav-item .list-group-item:not([disabled]):hover{
    cursor:pointer
}


.left .nav .nav-item .list-group-item.active{
    color: black;
    margin-left: 10px;
    background-color: var(--bianco);
    border-radius:22px 0 0 22px
}

.left .nav-item.active + .nav-item,.nav-item.prev { /* prev e next element*/
    background: white !important;
}
.nav-item.prev > a { /* prev element arrotonda solo l’angolo in alto a destra */
    border-radius: 0 0 22px 0;
    background: var(--appcoloralpha2) !important;
}

.left .nav-item.active + .nav-item a{  /* next element arrotonda solo l’angolo in basso a destra */
    border-radius: 0 22px 0px 0;
    background: var(--appcoloralpha2);
}







/**** XS */
@media (max-width: 767px) {
    .left.visibile{
        position: absolute !important;
        top: 0px;
        left: 0px;
        height: 99vh;
        box-shadow: -1px 1px 15px 1px rgba(0, 0, 0, 0.3);
        display: block !important;
        z-index: 9;
    }

    .left .show-menu{
        display: block !important;
    }
    .left .scroll-menu{
        height: calc(100vh - 320px)
    }


    /*    .left > div:first-of-type {
            display: block !important;
        }*/

    .right{
        width:100%
    }

    .titolotabella{
        font-size: 26px
    }
}