:root {
    --configColumn: 36;
    /* @reasonCode green */
    --configRow: 40;
}

.containerMix {
    grid-column: full-start/full-end;
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: repeat(var(--configColumn),3rem) 1fr; /*penso sia meglio fare variaible l'altezza e la larghezza della griglie per adattarla al meglio alLA VISTA DEI SINGOLI IMPIANTI*/
    grid-template-rows: repeat(var(--configRow),3rem);
    grid-gap: 0.1rem;
}


@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;
}






/*PROVA MENU */

.btn_menu {
    color: white;
    font-size: 5rem;
  
}
    /* .btn_menu:hover{
    transform: rotate(-90deg);
    width:4rem;
    height:4rem;
    transition-property:all;
    transition-duration: 0.5s;
    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: 6rem;
    width: 9rem;
    float: right;
    background-color: #3b3f4f;
    text-align: center;
    z-index: 999;
}

    .navSideMenu:hover {
        /* right: 9rem; */
        z-index: 990;
        padding-right: 5.5rem;
        min-width: 20%;
        width: max-content;
        top: 0rem;
        height: 100%;
        display: grid;
        grid-template-rows: min-content;
        transition-property: width height;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
    }


/* .navSideMenu:hover .btn_menu{

    top:0.5rem;

    width:4rem;
    height:4rem;

    transition-property:all;
    transition-duration: 0.5s;
    transform: rotate(-90deg) ;



} */
/* .navSideMenu:hover +.navSideAllarms{

    display: none;


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

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

.navSideMenu_group {
    display: none;
    height: 10%;
}

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

.navSideMenu_content_body {
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
    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;
}