﻿//:root {
    /* NASTRO */
    --primaryTappeto: white;
    --secondaryTappeto: black;
}



.aggregateContainer{
    display:grid;
}

.aggregateLoadingHeader {
    min-height: 1rem;
    background-color: #3b3f4f;
}


.aggregateObject {
    position: absolute;
    background-color: transparent;
    overflow: hidden;
    transform-origin: 50% 50%;
    top: 30rem;
    left: 30rem;
    width: 10rem;
    height: 10rem;
    cursor: all-scroll;
    resize: both;
}

.aggregateLoadingContainer {
    width: 100%;
    height: -webkit-fill-available;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 20% 60% 20%;
    background-color: whitesmoke;
    /* /* background: linear-gradient() --> da fare disegnare matrice  */
}

.aggregateLoadingContainer_left {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: repeat(3, minmax(20rem, 1fr));
}

.aggregateLoadingContainer_right {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2,1fr);
}

.aggregateLoadingContainer_body {
    width: 100%;
    height: 100%;
    position: relative;
    border: 0.1rem solid;
}

.aggregateLoadingContainer_left_object {
    padding: 1rem;
    border: 0.1rem solid rgba(1,1,1,0.2);
     max-height: 35rem; 
     min-height:27rem;  
     background-color: lightgray;
}

.aggregateLoadingContainer_left_object_header {
    display: grid;
    background-color: rgba(255,255,255,0.5);
    grid-auto-flow: column;
    grid-template-columns: 70% 1fr;
    padding: 0.2rem;
    text-align: center;
    border-radius: 0.5rem;
}

.aggregateLoadingContainer_left_object_body {
    max-height: 14rem;
    overflow: auto;
    padding: 1rem;
}

.list_item {
    grid-auto-flow: column;
    grid-template-columns: 70% 1fr;
    font-size: 1.5rem;
    padding: 0.5rem;
}
.list_header {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns :6% 8% 7% 7% 1fr;
}
.list_header_item{
    font-weight:600;
    font-size:1.2rem;
    margin-top:auto;
    margin-bottom:auto;
}



/* NASTRO */
/*.belt {
    position: relative;
    width: 80rem;
    height: 10rem;
    background-color: transparent;
}

.belt_top {
    position: absolute;
    top: 16%;
    left: 4%;
    width: 102%;
    height: 20%;
    background: linear-gradient(104deg, transparent 10%, gray 10%, gray 90%, transparent 90%);
    z-index: 30;
}

.belt_bottom {
    position: absolute;
    top: 55%;
    left: 1%;
    width: 100%;
    height: 20%;
    z-index: 40;
    background: linear-gradient(60deg,transparent 10%, gray 10%, gray 90%, transparent 90%);
}

.belt_tappeto {
    position: absolute;
    top: 35%;
    left: 11%;
    width: 84.9%;
    height: 76%;
    background: linear-gradient(131deg, whitesmoke 3%, transparent 1%), linear-gradient(131deg, transparent 95%, whitesmoke 95%), repeating-linear-gradient(132deg,whitesmoke 10%, black 12%, whitesmoke 10%);
    background-repeat: repeat-x;
    animation: beltMove 0.3s infinite;
}

.belt_structure {
    position: absolute;
    z-index: 32;
    top: 75.5%;
    left: 11%;
    width: 81%;
    height: 40%;
    border: 0.1rem solid;
    background-color: gray;
}

.belt_front {
    position: absolute;
    top: 36%;
    left: 86%;
    width: 10%;
    height: 81%;
    background: repeating-linear-gradient(130deg, rgb(255, 255, 255) 0%, black 5%);
     z-index: -4; 
    opacity: 0.98;
    border-top-right-radius: 6rem;
    border-bottom-right-radius: 68rem;
     background-repeat: repeat-y; 
    transform: rotate(1deg);
    animation: beltMove1 0.3s infinite;
}

.material {
    position: absolute;
    top: 20%;
    left: 11%;
    width: 84.9%;
    height: 40%;
    animation: materialMove 4s infinite;
    animation-timing-function: linear;
    z-index: 35;
}

.material_part {
    position: absolute;
    width: 5%;
    height: 77%;
    border-radius: 1rem;
    border: 0.1rem solid rgba(1,1,1,0.5);
    background-color: sandybrown;
     animation-play-state: paused; 
     animation-timing-function: cubic-bezier(0.4, 0, 1, 1); 
}


.part1 {
    top: 29%;
    left: 0%;
    z-index: 123;
}

.part2 {
    top: 43%;
    left: -3%;
    z-index: 40;
}

.part3 {
    top: 40%;
    left: 5%;
    z-index: 33;
}


@keyframes beltMove {

    0% {
        background: linear-gradient(131deg, whitesmoke 3%, transparent 1%), linear-gradient(131deg, transparent 95%, whitesmoke 95%), repeating-linear-gradient(132deg,whitesmoke 10%, black 12%, whitesmoke 10%);
    }

    100% {
        background: linear-gradient(131deg, whitesmoke 3%, transparent 1%), linear-gradient(131deg, transparent 95%, whitesmoke 95%), repeating-linear-gradient(132deg,black 10%, whitesmoke 12%, rgb(35, 24, 24) 10%);
    }
}

@keyframes beltMove1 {

    0% {
        background: repeating-linear-gradient(130deg, rgb(255, 255, 255) 0%, black 5%);
    }

    100% {
        background: repeating-linear-gradient(130deg, black 0%, white 5%);
    }
}

@keyframes materialMove {

    0% {
        transform: translateX(0);
    }
     80% {
            transform: translateX(64rem);
    } 
    100% {
        transform: translateX(88%);
    }
}

 TRAMOGGGIA 


.tramoggia {
    width: 18rem;
    height: 27rem;
    position: absolute;
    background-color: transparent;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.tramoggia_inside {
    position: absolute;
    top: 2%;
    width: 80%;
    z-index: 2;
    height: 11%;
    background: linear-gradient(150deg, transparent 25%, rgba(1,1,1,0.8) 25%, rgba(1,1,1,0.8) 75%, transparent 75%);
}

.tramoggia_front {
    position: absolute;
    top: 13%;
    border: 0.1rem solid;
    left: 0%;
    width: 52%;
    height: 49.5%;
    background-color: gray;
}

.tramoggia_side {
    position: absolute;
    top: -14%;
    left: 53%;
    width: 27%;
    height: 92.5%;
    border: 0.1s;
    background: linear-gradient(150deg, transparent 25%, gray 25%, gray 75%, transparent 75%);
}

.tramoggia_side_shadow {
    position: absolute;
    top: -14%;
    left: 53%;
    width: 27.3%;
    height: 92.5%;
    z-index: -1;
    border: 0.1s;
    background: linear-gradient(150deg, transparent 25%, black 25%, black 75%, transparent 75%);
}

.tramoggia_bottom {
    position: absolute;
    top: 63%;
    left: -17.5%;
    width: 96%;
    height: 21%;
    background: linear-gradient(75deg, transparent 25%, gray 25%, gray 75%, transparent 75%);
}

.tramoggia_bottom_shadow {
    position: absolute;
    z-index: -1;
    top: 63%;
    left: -18.5%;
    width: 98%;
    height: 21%;
    background: linear-gradient(75deg, transparent 25%, black 25%, black 75%, transparent 75%);
}

.tramoggia_bottomSide {
    position: absolute;
    top: 53%;
    left: 3.8%;
    z-index: -2;
    width: 94%;
    height: 31%;
    background: linear-gradient(280deg, transparent 25%, gray 25%, gray 75%, transparent 75%);
}

.tramoggia_bottomSide1 {
    position: absolute;
    z-index: -1;
    top: 72%;
    left: 69%;
    transform: rotate(55deg);
    width: 7%;
    height: 19%;
    background-color: whitesmoke;
}

 ELEVATORE 



.elevatorContainer {
    width: 20rem;
    height: 35rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.elevator_body {
    width: 29%;
    height: 70%;
    background-color: gray;
    position: absolute;
    left: 50%;
    top: 13%;
    transform: translateX(-50%);
    z-index: 10;
    border-radius: 0.2rem;
}

.elevator_body_side {
    width: 8%;
    height: 86%;
    background: linear-gradient(155deg, transparent 10%, gray 10%, gray 90%, transparent 90%);
     background-color: black; 
    position: absolute;
    left: 69%;
    top: 4%;
    transform: translateX(-50%);
    z-index: 10;
    border-radius: -7.8rem;
}

.elevator_motor {
    font-size: 4.5rem;
    position: absolute;
    top: 6%;
    left: 52%;
    transform: translateX(-50%);
    z-index: 5;
}

.elevator_motor_back {
    font-size: 4.5rem;
    position: absolute;
    color: rgba(1,1,1,0.8);
    top: 5%;
    left: 57%;
    z-index: 2;
    transform: translateX(-50%);
}

.elevator_bocchetta {
    width: 39%;
    height: 17%;
    background: linear-gradient(72deg, darkgray 75%, transparent 75%);
     background-color: black; 
    position: absolute;
    left: 76%;
    top: 13%;
    transform: translateX(-50%);
    z-index: 15;
}

.elevator_bocchetta_back {
    width: 39%;
    height: 20%;
    background: linear-gradient(72deg, gray 85%, transparent 85%);
     background-color: black; 
    position: absolute;
    left: 75%;
    top: 10%;
    transform: translateX(-50%);
    z-index: 1;
}

.elevator_bocchetta_bottom {
    width: 16%;
    height: 17%;
    background: linear-gradient(-109deg, darkgray 75%, transparent 75%);
     background-color: black; 
    position: absolute;
    left: 27%;
    top: 60%;
    transform: translateX(-50%);
    z-index: 15;
}

.elevator_bocchetta_bottom_back {
    width: 39%;
    height: 17%;
    background: linear-gradient(72deg, gray 85%, transparent 85%);
     background-color: black; 
    position: absolute;
    left: 199%;
    top: 13%;
    transform: translateX(-50%);
    z-index: 1;
    width: 17%;
    height: 18%;
    background: linear-gradient(-109deg, gray 75%, transparent 75%);
     background-color: black; 
    position: absolute;
    left: 27%;
    top: 59%;
    transform: translateX(-50%);
    z-index: 1;
}*/
