/* foglio stile per le card del locale tecnico */

.plantContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
    gap: 10px;
}

.wrapperGlobal {
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 90%;
    gap: 10px;
}

.wrapperABCD {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap:10px;
}

.wrapperBCD {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 10px;
}

.wrapperCD {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 10px;
}

.cardA {
    width: 33%;
    height: 100%;
}

.cardB {
    width: 100%;
    height: 20%;
}

.cardC {
    width: 100%;
    height: 100%;
}

.cardD {
    width: 100%;
    height: 100%;
}

.cardE {
    width: 100%;
    height: 70%;
}

.plant_baseCard {
    display: flex;
    flex-direction: column;
    background-color: var(--cardBg);
    border-radius: 10px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 5px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: clamp(0.2rem, 0.8vw, 1rem);
    color: white;
    gap: 10px;
}

.plant_titleCard {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: clamp(20px, 50px, 80px);
    gap: 20px;
    color:white;
}

.plant_iconCard {
    width:auto;
    height:auto;
}

.plant_titleTextCard {
    width: 100%;
    height: auto;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: clamp(0.9rem, 0.8vw, 1.5rem);
}

.plant_img {
    display: flex;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.imgWh100-50 {
    width: 100%;
    height: 50%;
}

.imgWh30-100 {
    width: 30%;
    height: 100%;
}

.imgBoilerOn {
    background-image: url('../asset/img/PNG/plantCard/boiler.png');
}

.imgBoilerOff {
    background-image: url('../asset/img/PNG/plantCard/noBoiler.png');
}

.imgTankOn {
    background-image: url('../asset/img/PNG/plantCard/tank.png');
}

.imgTankOff {
    background-image: url('../asset/img/PNG/plantCard/noTank.png');
}

.imgTankBoiler {
    background-image: url('../asset/img/PNG/plantCard/tank_boiler.png');
}

.imgTankHeater {
    background-image: url('../asset/img/PNG/plantCard/tank_heater.png');
}

.imgNoChoose {
    background-image: url('../asset/img/PNG/plantCard/noChoose.png');
}

.plantWrapper {
    display: flex;
    width: 100%;
    height: auto;
    height: auto;
    align-items: center;
    gap: 10px;
}

.extraGap {
    gap: 3px;
}

.row-direction {
    flex-direction:row;
}

.col-direction {
    flex-direction: column;
}

.counter {
    display: flex;
    background-color: white;
    color: var(--cardBg);
    border-radius: 3px;
    width: 7%;
    height: 130%;
    align-items: center;
    justify-content: center;
}

    .counter:hover {
        background-color: #ffed00;
        color:black;
    }

.counterSelect {
    background-color: var(--navBarA);
    color: white;
}

.changeAlert {
    background-color:lightcoral;
    border-radius:5px;
    padding:9px;
}

.optionSelected {
    background-color: var(--navBarA);
    width:100%;
}