:root {
    /* prova */
    --windowHeight: 60rem;
    /* altezza larghezza dei quadratini */
    --heightDivision: 2;
    --widthDivision: 2;
}


.provaContainer {
    width: 100%;
    height: 70rem;
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: repeat(93,1rem);
    grid-template-rows: repeat(70,1rem);
    overflow: hidden;
}

.snodo1 {
    position: absolute;
    width: 100%;
    height: 30%;
    background-color: blue;
    /* -webkit-clip-path: ellipse(42% 50% at 52% 50%); */
    /* clip-path: ellipse(42% 50% at 52% 50%); */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 30;
}


.snodo2 {
    position: absolute;
    width: 30%;
    height: 50%;
    background-color: blue;
    top: 50%;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: 20;
}




.drawerContainer {
    width: 100%;
    height: 70rem;
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: repeat(var(--widthDivision),1rem);
    grid-template-rows: repeat(var(--heightDivision),1rem);
    overflow: hidden;
}

.drawerBlock {
    width: auto;
    height: auto;
    border: 0.1rem solid rgba(1,1,1,0.2);
}

    .drawerBlock:hover {
        border: 0.2rem solid red;
        transform: scale(1.1);
    }

.drawerBlockSelected {
    width: auto;
    height: auto;
    border: 0.1rem solid rgba(1,1,1,0.2);
    background-color: blue;
}
.drawerExample {
    width: 150%;
    height: 150%;
    border: 0.1rem solid rgba(1,1,1,0.2);
}



.pumpContainer {
    position: relative;
    width: 100%;
    height: 100%;
}
.silos_Container {
    width: 50%;
    height: 100%;
    background-color: transparent;
    position: relative;
}

.pump_ing1 {
    position: absolute;
    width: 13%;
    height: 72%;
    background-color: black;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 6%;
    transform: translate(-50%,-50%);
    z-index: 30;
}


.pump_ing2 {
    position: absolute;
    width: 11%;
    height: 71.5%;
    background-color: gray;
    top: 50%;
    left: 11%;
    transform: translate(-50%,-50%);
    z-index: 20;
}



.pump_ing3 {
    position: absolute;
    width: 12%;
    height: 72%;
    background-color: gray;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 17%;
    transform: translate(-50%,-50%);
    z-index: 10;
}

.pump_ing4 {
    position: absolute;
    width: 17%;
    height: 55%;
    background-color: gray;
    top: 50%;
    left: 24%;
    transform: translate(-50%,-50%);
    z-index: 10;
}





.pump_out1 {
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    z-index: 30;
    position: absolute;
    width: 11%;
    height: 71.5%;
    background-color: black;
    top: 50%;
    left: 94%;
    transform: translate(-50%,-50%);
}


.pump_out2 {
    position: absolute;
    width: 11%;
    height: 71.5%;
    background-color: gray;
    top: 50%;
    left: 89%;
    transform: translate(-50%,-50%);
    z-index: 20;
}



.pump_out3 {
    position: absolute;
    width: 12%;
    height: 72%;
    background-color: gray;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 83%;
    transform: translate(-50%,-50%);
    z-index: 10;
}

.pump_out4 {
    position: absolute;
    width: 17%;
    height: 55%;
    background-color: gray;
    top: 50%;
    left: 73%;
    transform: translate(-50%,-50%);
    z-index: 10;
}



.pump_wheel1 {
    position: absolute;
    width: 53.3%;
    height: 80%;
    background: -webkit-linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    background: -o-linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    background: -moz-linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    background: linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 20;
}

.pump_wheel2 {
    position: absolute;
    width: 48%;
    height: 72%;
    background-color: yellow;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 30;
}

.pump_wheel3 {
    position: absolute;
    width: 46.6%;
    height: 70%;
    background: -webkit-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    background: -o-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    background: -moz-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    background: repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    border-radius: 50%;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 40;
   
}

.pump_wheel3_transparent {
    position: absolute;
    width: 46.6%;
    height: 70%;
    background-color: greenyellow;
    border-radius: 50%;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 40;
}

.pump_wheel4 {
    position: absolute;
    width: 41%;
    height: 63%;
    background-color: whitesmoke;
    border-radius: 50%;
    top: 48.3%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 50;
}

.pump_wheel4_pala {
    /* background-color: black; */
    background: linear-gradient(black 70%, lightblue 71%);
    width: 10%;
    height: 36%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%) rotate(44deg);
    top: 21%;
    transform-origin: 100% 100%;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.tubo {
    width: 25rem;
    height: 5rem;
    /* usa linear gradient */
    background: -webkit-linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    background: -o-linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    background: -moz-linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    background: linear-gradient(0deg, rgb(41, 43, 47) 0%, rgb(149, 149, 186) 50%, rgb(41, 43, 47) 100%);
    border: 0.1rem solid;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


.tubo_curva_dx_basso {
    background: radial-gradient(circle 5rem at 100% 100%,black,black 50%, transparent 51%);
}
.tubo_curva_dx_alto {
    background: radial-gradient(circle 5rem at 100% 0%,black,black 50%, transparent 51%);
}
.tubo_curva_sx_alto {
    background: radial-gradient(circle 5rem at 0% 0%,black,black 50%, transparent 51%);
}

.tubo_curva_sx_basso {
    background: radial-gradient(circle 5rem at 0% 100%,black,black 50%, transparent 51%);
}





.water {
    width: 95%;
    height: 49%;
    /* position: relative; */
    /* margin-left: auto; */
    background: -webkit-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    background: -o-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    background: -moz-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    background: repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    /* margin-right: auto; */
    /* margin-bottom: auto; */
    /* margin-top: auto; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  
    border: 0.05rem solid;
    border-radius: 0.2rem;
}






.washingName {
    position: absolute;
    top: -51%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    color: black;
    width:5rem;
}




.scale_Container {
    position: relative;
    width: 15rem;
    height: 20rem;
    border: 0.2rem solid black;
    background-color: saddlebrown;
    clip-path: polygon(0% 0%, 0% 46%, 40% 85%, 40% 100%, 60% 100%, 60% 85%, 101% 46%, 100% 0%);
}






.valve_Container {
    position: relative;
    width: 9rem;
    height: 6rem;
}


.valve_ing1 {
    position: absolute;
    width: 13%;
    height: 44%;
    background-color: black;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 6%;
    transform: translate(-50%,-50%);
    z-index: 30;
}


.valve_ing2 {
    position: absolute;
    width: 11%;
    height: 43.5%;
    background-color: gray;
    top: 50%;
    left: 11%;
    transform: translate(-50%,-50%);
    z-index: 20;
}



.valve_ing3 {
    position: absolute;
    width: 12%;
    height: 43%;
    background-color: gray;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 17%;
    transform: translate(-50%,-50%);
    z-index: 10;
}

.valve_ing4 {
    position: absolute;
    width: 66%;
    height: 30%;
    background-color: gray;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
}

.valve_ing5 {
    position: absolute;
    width: 37%;
    height: 11%;
    background-color: BLACK;
    top: 31%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

.valve_ing6 {
    position: absolute;
    width: 27%;
    height: 33%;
    background-color: gray;
    top: 12%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
}

.valve_ing7 {
    position: absolute;
    width: 21%;
    height: 21%;
    background-color: lightgray;
    top: 12%;
    left: 26%;
    transform: translate(-50%,-50%);
    z-index: 10;
    border-top-left-radius: 30%;
    border-bottom-left-radius: 30%;
}




.valve_out1 {
    position: absolute;
    width: 8%;
    height: 30%;
    background-color: black;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 80%;
    transform: translate(-50%,-50%);
    z-index: 30;
    position: absolute;
    width: 11%;
    height: 44%;
    background-color: blue;
    top: 50%;
    left: 94%;
    transform: translate(-50%,-50%);
    /* z-index: 20; */
}


.valve_out2 {
    position: absolute;
    width: 11%;
    height: 43.5%;
    background-color: gray;
    top: 50%;
    left: 89%;
    transform: translate(-50%,-50%);
    z-index: 20;
}



.valve_out3 {
    position: absolute;
    width: 12%;
    height: 43%;
    background-color: gray;
    -webkit-clip-path: ellipse(42% 50% at 52% 50%);
    clip-path: ellipse(42% 50% at 52% 50%);
    top: 50%;
    left: 83%;
    transform: translate(-50%,-50%);
    z-index: 10;
}







/*@keyframes pumpWheelRotate1 {

    0% {
        background: linear-gradient(black 100%, lightblue 100%);
    }

    12.5% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    25% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    37.5% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    50% {
        background: linear-gradient(black 20%, lightblue 21%);
    }

    62.5% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    75% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    87.5% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    100% {
        background: linear-gradient(black 100%, lightblue 100%);
    }
}

@keyframes pumpWheelRotate2 {

    0% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    12.5% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    25% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    37.5% {
        background: linear-gradient(black 20%, lightblue 21%);
    }

    50% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    62.5% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    75% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    87.5% {
        background: linear-gradient(black 100%, lightblue 100%);
    }

    100% {
        background: linear-gradient(black 80%, lightblue 81%);
    }
}

@keyframes pumpWheelRotate3 {

    0% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    12.5% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    25% {
        background: linear-gradient(black 20%, lightblue 21%);
    }

    37.5% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    50% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    62.5% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    75% {
        background: linear-gradient(black 100%, lightblue 100%);
    }

    87.5% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    100% {
        background: linear-gradient(black 60%, lightblue 61%);
    }
}

@keyframes pumpWheelRotate4 {

    0% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    12.5% {
        background: linear-gradient(black 20%, lightblue 21%);
    }

    25% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    37.5% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    50% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    62.5% {
        background: linear-gradient(black 100%, lightblue 100%);
    }

    75% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    87.5% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    100% {
        background: linear-gradient(black 40%, lightblue 41%);
    }
}

@keyframes pumpWheelRotate4 {

    0% {
        background: linear-gradient(black 20%, lightblue 41%);
    }

    12.5% {
        background: linear-gradient(black 20%, lightblue 21%);
    }

    25% {
        background: linear-gradient(black 40%, lightblue 41%);
    }

    37.5% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    50% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    62.5% {
        background: linear-gradient(black 100%, lightblue 100%);
    }

    75% {
        background: linear-gradient(black 80%, lightblue 81%);
    }

    87.5% {
        background: linear-gradient(black 60%, lightblue 61%);
    }

    100% {
        background: linear-gradient(black 40%, lightblue 41%);
    }
}



@keyframes WheelRotate {
    0% {
        transform: translate(-50%,-50%) rotate(360deg);
    }

    100% {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}


@keyframes FLUID {
    0% {
        background: -webkit-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
        background: -o-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
        background: -moz-repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
        background: repeating-linear-gradient(90deg, rgb(52, 96, 183) 0%, rgb(37, 127, 234) 5%);
    }

    50% {
        background: -webkit-repeating-linear-gradient(90deg, rgb(37, 127, 234) 0%, rgb(52, 96, 183) 5%);
        background: -o-repeating-linear-gradient(90deg, rgb(37, 127, 234) 0%, rgb(52, 96, 183) 5%);
        background: -moz-repeating-linear-gradient(90deg, rgb(37, 127, 234) 0%, rgb(52, 96, 183) 5%);
        background: repeating-linear-gradient(90deg, rgb(37, 127, 234) 0%, rgb(52, 96, 183) 5%);
    }
}*/