:root {
    --configColumn: 80;
    --configRow: 40;
}

#voice-menu:hover {
    background-color:lightgray;
}

.containerMix {
    grid-column: full-start/full-end;
    background-color: whitesmoke;
    display: grid;
    /*grid-template-columns: repeat(var(--configColumn),3rem) 1fr; /* penso sia meglio rendere variabile l'altezza e la larghezza della griglie per adattarla al meglio alle viste dei singoli impianti */
    /*grid-template-rows: repeat(var(--configRow),3rem);*/
    grid-gap: 0.1rem;
    overflow-x: scroll;
    overflow-y: hidden;
}

    .containerMix > * {
        width: max-content;
        height: max-content;
    }

    @media (max-width: 1000px) {
        .containerMix_tablet {
        display: grid;
    }
 
}

.objectMix {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0.1rem solid black;
}

/* .vagonetto {
    width: 10rem;
    height: 6rem;
    border-radius: 0.8rem;
    background-color: cornflowerblue;
    border: 0.1rem solid darkblue;
}*/

.vagonetto_text {
    position: relative;
    margin-top: 1rem;
    text-align: center;
}

.myMixer_header {
    width: 100%;
    height: 6rem;
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    background: #3b3f4f;
}

.myMixer_header_title {
    position: absolute;
    padding:1rem;
    color: white;
    left: 40%;
    top: 0.5rem;
}

/*PROVA MENU */

.btn_menu {
    position: relative;
    color: white;
    font-size: 6rem;
    top: 0.5rem;
}

    .btn_menu:hover .navSideMenu {
        width: 30%;
        height: 100%;
        display: grid;
        transition-property: width height;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
    }

.navSideMenu {
    position: absolute;
    top: 6rem;
    right: 0rem;
    height: max-content;
    width: 30rem;
    float: right;
    background-color: #3b3f4f;
    text-align: center;
    z-index: 999;
    border-style: outset;
}



.navSideMenu_group {
    margin-top: 0.5rem;  
    margin-bottom: 5rem;
}

.navSideMenu:hover .navSideMenu_group {
    display: inherit;
}

.navSideMenu_group {
/*    display: none;*/
    height: 100%;
}

.navSideMenu_content {
    margin: 1.5rem;
    position: relative;
}

.navSideMenu_content_body {
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    font-weight: 600;
    color: whitesmoke;
}
.navSideMenu_content_body_config {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    width: 60%;
    height: 2rem;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    margin-bottom: 0.2rem;
    position: relative;
    color: black;
}

.navSideMenu_content_body_config_btn {
    width: 2rem;
    height: 1.5rem;
    position: absolute;
    left: 0.2rem;
}

.navSideMenu_content_body_config_lbl {
    color: gray;
    margin-bottom: 0rem;
    position:absolute;
    left:50%;
    font-size: 1.5rem;
}

.containerMix_phone {
    position: absolute;
    display: grid;
    grid-template-areas: 
        "a b" 
        "a c" 
        "a d" 
        "e e" 
        "f g";
    width: 100%;
    height: 100%;
    background-color: green;
}


.containerMix_phone_block {
    margin: 1%;
    border-radius: 0.5rem;
    padding: 1%;
}


.containerMix_phone_inerte {
    grid-area: a;
}
.containerMix_phone_inerte_cemento {
    grid-area: b;
}
.containerMix_phone_inerte_acqua {
    grid-area: c;
}
.containerMix_phone_inerte_additivo {
    grid-area: d;
}
.containerMix_phone_inerte_mescolatore {
    grid-area: e;
}
.containerMix_phone_inerte_distributore {
    grid-area: f;
}
.containerMix_phone_inerte_distribuzione {
    grid-area: g;
}