.automatico_abilitato {
    background-color: lightgreen !important;
    color:gray;
}

.automatico_disabilitato {
    background-color: red !important;
    color: whitesmoke;
}

.deviatore_Nastro {
    width: 0;
    height: 0;
    border-left: 1.5rem solid transparent;
    border-right: 1.5rem solid transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.deviatore_Nastro_Attivo_Up {
    border-bottom: 1.5rem solid limegreen !important;
    transform: translateX(-50%) scale(1.2);
    transition: all 0.3s ease 0.2s;
}

.deviatore_Nastro_Attivo_Down {
    border-top: 1.5rem solid limegreen !important;
    transform: translateX(-50%) scale(1.2);
    transition: all 0.3s ease 0.2s;
}

/* NASTRO REVERSIBILE */

.reversible_belt {
    position: absolute;
    height: 5.5rem;
    display: inline-block;
    background-image: repeating-linear-gradient(to bottom, #ccc 0, #ccc 0.5rem, gray 0.5rem, gray 1rem);
    border: 0.1rem solid gray;
    border-radius:0.7rem;
}

/* NASTRO ROTANTE */

.rotating_belt {
    height: 5.5rem;
    position: absolute;
    display: inline-block;
    background-image: repeating-linear-gradient(to right, #ccc 0, #ccc 0.5rem, gray 0.5rem, gray 1rem);
    border: 0.1rem solid gray;
    border-radius: 0.7rem;
    pointer-events: none;
    opacity: 0.6
}

.spia_nastro_caricamento {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    color: black;
    font-size: 3rem;
    color: #0fc910;
}

/* NASTRO ORIZZONTALE */

.horizontal_belt {
    position: absolute;
    height: 5.5rem;
    display: inline-block;
    background-image: repeating-linear-gradient(to right, #ccc 0, #ccc 0.5rem, gray 0.5rem, gray 1rem);
    border: 0.1rem solid gray;
    border-radius:0.7rem;
}

/* NASTRO ELEVATORE */

.elevator_belt {
    position: absolute;
    display: inline-block;
    background-color: lightgray;
    border: 0.2rem solid;
    height: 15rem;
}

.elevator_belt_body {
    width: 100%;
    height: 93%;
    background-color: lightgray;
    border: 0.2rem solid;
    position: relative;
    max-width: 9.5rem;
    margin-left: auto;
    margin-right: auto;
}

.elevator_belt_body_name {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 1.2rem;
    text-transform: uppercase;
}

.elevator_belt_body_maxLevelCharge {
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 0;
    top: 6rem;
    border: 0.1rem solid
}

.elevator_belt_body_maxLevelDischarge {
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 6.9rem;
    top: 6rem;
    border: 0.1rem solid
}

.elevator_belt_body_start {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 5.7rem;
    left: 3rem;
    border: 0.1rem solid;
    border-radius: 2rem;
}

.elevator_belt_body_safetySxLS {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 0%;
    right: -5.5rem;
    border: 0.1rem solid;
    border-radius: 2rem;
}

.elevator_belt_body_safetyDxLS {
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 10.5rem;
    right: -5.5rem;
    border: 0.1rem solid;
    border-radius: 2rem;
}

/* NASTRO MOBILE */

.floating_belt {
    height: 5.5rem;
    background-image: repeating-linear-gradient(to right, #ccc 0, #ccc 0.5rem, gray 0.5rem, gray 1rem);
    border: 0.1rem solid gray;
    border-radius:0.7rem;
}

/* TRAMOGGIA DI CARICO */
.hopper_loading_container {
    position: relative;
}

.hopper_loading {
    display: grid;
    height: 100%;
    width: 98%;
    background-color: grey;
    position: absolute;
    left: 4%;
    padding: 0.3rem;
    grid-template-rows: auto auto auto auto;
}

.hopper_loading_coperchio {
    position: relative;
    left: 4%;
    top: 0%;
    width: 10%;
    height: 100%;
    border: 1px solid black;
}

/* LOADING CONTROL */

.loadingControl {
    display: inline-block;
    width: auto;
    margin-bottom: 0px;
    margin-top: 0px;
    background-color: #f0f0f0;
    color: #666666;
    padding: 1rem;
    border: 0.1rem solid transparent;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.15);
}

/* AGGREGATE LOADING */

.aggregate {
    text-align: center;
    border: 0.2rem solid black;
    background-color: #808080;
}

    .aggregate.selected {
        transform:scale(1.1);
        z-index:2;
        border: 0.3rem solid #0fc910 !important;
        background-color: #807d7d;
    }

    .aggregate:hover {
        transform: scale(1.1);
        z-index:1;
        background-color: #807d7d;
        cursor: pointer;
    }
    
/* AGGREGATE Position */

.aggregatepos {
    text-align: center;
    border: 0.2rem solid black;
    background-color: #d3d3d3;
    height: 1rem;
}

    .aggregatepos:hover {
        transform: scale(1.05);
        z-index: 1;
        background-color: #008000;
        cursor: pointer;
    }

@keyframes aggregate {
    0% {
        border: 0.3rem solid transparent;
    }

    50% {
        border: 0.3rem solid transparent;
    }
}


@media (max-width: 1100px) {

    .aggregate {
        min-width: 10rem;
    }
}

/* LOADING BELT LONG */

.loadingLongBelt {
    width: 100%;
    height: 5.5rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: inline-block;
    background-image: repeating-linear-gradient(to right, #ccc 0, #ccc 0.5rem, gray 0.5rem, gray 1rem);
    border: 0.1rem solid gray;
    border-radius:0.7rem;
}

.loadingLongBelt_width {
    width: 40rem;
    position:relative
}

.loadingDisable {
    border-color: red !important;
}


@media (max-width: 1100px) {

    .loadingLongBelt_width {
        width: 35rem;
    }
}

/* NASTRO IN ALLARME */

.belt_alarm {
    border: 0.3rem solid red;  
}

@keyframes  {
    0% {
        border: 0.3rem solid transparent;
    }

    50% {
        border: 0.3rem solid transparent;
    }
}