Bewaesserungsanlage/Webserver/static/Styles/dashboard.css

#zones{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat( {{ zones|length  }} , minmax(150px, auto)); moved to content div to use jinja */
    grid-gap: 30px;
    margin: 0 auto;
}
.zone{
    position: relative;
    background: green;
    color: white;
    font-size: larger;
    padding-left: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
}
.zone a{
    color: inherit;
    text-decoration: inherit;
}

.zone:hover{
    animation: scale 0.5s linear 0.0s normal both;
}


@keyframes scale{
    0% {transform: scale3d(100%, 100%, 100%);}
    100% {transform: scale3d(107%, 120%, 100%);}
}

.zone h4{
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: x-large;
}
.zone_number{
    position: absolute;
    top: 15px;
    right: 30px;;
}

.zone table{
    table-layout: auto;
    width: 100%;
}


td.icon{
    text-align: left;
    width: 30px;
}
td.property{
    text-align: left;
}
td.value{
    text-align: left;
    position: relative;
}
p.end_time_value, p.planed_duration_value {
    display: inline;
}




.outer_dot {
    height: 30px;
    width: 30px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    z-index: 1;
}
.inner_icon{
    color: black;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    height: 15px;
    width: 15px;
    margin-left: 7.5px;
    margin-top: 7.5px;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}
.dot_green {
    background-color: green;
}
.dot_red {
    background-color: red;
}

@media screen and (min-width: 2051px){
    .zone:nth-child(even){
        background: blue;
    }
}

@media screen and (max-width: 2050px) and (min-width: 1351px){
    #zones{
        grid-template-columns: repeat(2, 1fr);
    }
    .zone:nth-child(4n){
        background: blue;
    }
    .zone:nth-child(4n+1){
        background: blue;
    }
}

@media screen and (max-width: 1350px){
    #zones{
        grid-template-columns: repeat(1, 1fr);
    }
    .zone{
        max-width: 600px;
    }
    .zone:nth-child(even){
        background: blue;
    }
}