html { font-size: 3rem; }
.container, .container-fluid { margin-top: 30px; }
.card-body { padding: 0.75rem; }
.card-body .row { margin-bottom: 30px; }

#appContent { display: none; }
#footer { margin-bottom: 35px; }
#footer div { text-align: center; }
#footer a { font-size: 1.5em; color: #F39C12; }

/* Switch part */
.switches .row { margin-bottom: 30px; }
.switch { background-position-x: 0; background-repeat: no-repeat; height: 325px; background-size: 100%; }
.switch[data-states="2"] { background-size: 200%; }
.switch[data-states="2"][state="1"] { background-position-x: 100%; }
.switch[data-states="3"] { background-size: 300%; }
.switch[data-states="3"][state="1"] { background-position-x: 50%; }
.switch[data-states="3"][state="2"] { background-position-x: 100%; }
.switch[data-states="4"] { background-size: 400%; }
.switch[data-states="4"][state="1"] { background-position-x: 33.333%; }
.switch[data-states="4"][state="2"] { background-position-x: 66.666%; }
.switch[data-states="4"][state="3"] { background-position-x: 100%; }
.switch[data-states="5"] { background-size: 500%; }
.switch[data-states="5"][state="1"] { background-position-x: 25%; }
.switch[data-states="5"][state="2"] { background-position-x: 50%; }
.switch[data-states="5"][state="3"] { background-position-x: 75%; }
.switch[data-states="5"][state="4"] { background-position-x: 100%; }

.manualIrrigate, .manualIrrigateTime {
    background: #656364;
    width: 100%;
    height: 150px;
    text-align: center;
    padding-top: 37px;
}
.manualIrrigate.active { background: #b3ce1d; }

.manualIrrigateTime {
    height: 100px;
    padding-top: 15px;
}
.manualIrrigateTime[data-value="0"] {
    background: #f9644e;
    height: 150px;
    font-size: 1.1rem;
    line-height: 1.15rem;
}
.manualIrrigateTime[data-value="0"] span {
    font-size: 0.8rem;
}