.text_center{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #555;
}


.grid_container{
    width: 90%;
    border: 1px solid #555;
    display: grid;
    text-align: center;
    vertical-align:middle; 
    margin: 0 auto;
}
.grid_container {
grid-template-columns:[line_1] 0.5fr [line2] 0.5fr [column-2] ;
grid-template-rows:[row-1] 1.3fr [row-2] 1fr [row-3] 2fr [row-4];
}

.grid_water {
    width: 90%;
    border: 1px solid #555;
    display: grid;
    text-align: center;
    vertical-align:middle; 
    margin: 0 auto;
}

.grid_water {
    grid-template-columns:[line_1] 0.6fr [line2] 1fr [column-3] 1fr [line4];
    grid-template-rows:[row-1] 1.3fr [row-2] 1fr [row-3] 1fr [row-4] 1fr [row-5] 1fr [row-6] 1fr [row-7] 1fr [row-8];
}

.area{
    width: 90%;
    border: 1px solid #555;
    display: grid;
    text-align: center;
    vertical-align:middle; 
    margin: 0 auto;
}

.area{
    grid-template-columns:[line_1] 1fr [line2] 1fr [column-3] 1fr [line4] 1fr [line5];
    grid-template-rows:[row-1] 0.8fr [row-2] 0.8fr [row-3] 6fr [row-4];
}

.none{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:2;
   
}
.manager_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:4;
}
.consumer_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:4;
    grid-row-end:6;
}
.category_1{
    grid-column-start:1;
    grid-column-end:4;
    grid-row-start:1;
    grid-row-end:2;
    background-color: rgba(249, 240, 203,0.5);
    font-weight: 600;
    font-size: 20px;
}

.category_2{
    grid-column-start:4;
    grid-column-end:6;
    grid-row-start:1;
    grid-row-end:2;
}
.local_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
}
.local_fee_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
}
.overlocal_1{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:2;
    grid-row-end:3;
}
.overlocal_fee_1{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:3;
    grid-row-end:4;
}
.local_2{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:2;
    grid-row-end:3;
}
.local_fee_2{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:3;
    grid-row-end:4;
}
.overlocal_2{
    grid-column-start:5;
    grid-column-end:6;
    grid-row-start:2;
    grid-row-end:3;
}
.overlocal_fee_2{
    grid-column-start:5;
    grid-column-end:6;
    grid-row-start:3;
    grid-row-end:4;
}
.local_3{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:4;
    grid-row-end:5;
}
.local_fee_3{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:5;
    grid-row-end:6;
}
.overlocal_3{
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:4;
    grid-row-end:5;
}
.overlocal_fee_3{
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:5;
    grid-row-end:6;
}
.local_4{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:4;
    grid-row-end:5;
}
.local_fee_4{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:5;
    grid-row-end:6;
}
.overlocal_4{
    grid-column-start:5;
    grid-column-end:6;
    grid-row-start:4;
    grid-row-end:5;
}
.overlocal_fee_4{
    grid-column-start:5;
    grid-column-end:6;
    grid-row-start:5;
    grid-row-end:6;
}

.bucket {
    grid-column-start:1;
    grid-column-end:4;
    grid-row-start:1;
    grid-row-end:2;
    background-color: rgba(249, 240, 203,0.5);
    font-weight: 600;
    font-size: 20px;
}

.local_bucket {
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:2;
    grid-row-end:3;
}

.overlocal_bucket {
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:2;
    grid-row-end:3;
}

.account{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
}

.account_1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
}
.account_2{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:4;
    grid-row-end:5;
}
.account_3{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:5;
    grid-row-end:6;
}
.account_4{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:6;
    grid-row-end:7;
}
.account_5{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:7;
    grid-row-end:8;
}
.local_fee_B1{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:3;
    grid-row-end:4;
}
.local_fee_B2{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:4;
    grid-row-end:5;
}
.local_fee_B3{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:5;
    grid-row-end:6;
}
.local_fee_B4{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:6;
    grid-row-end:7;
}
.local_fee_B5{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:7;
    grid-row-end:8;
}

.godOfWater {
    grid-column-start:1;
    grid-column-end:4;
    grid-row-start:8;
    grid-row-end:9;
    background-color: rgba(249, 240, 203,0.5);
    font-weight: 600;
    font-size: 20px;
}

.type {
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:9;
    grid-row-end:10;
}

.type_1 {
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:10;
    grid-row-end:11;
}

.type_2 {
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:11;
    grid-row-end:12;
}

.local_water {
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:9;
    grid-row-end:10;
}

.overlocal_water {
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:9;
    grid-row-end:10;
}

.local_fee_W1 {
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:10;
    grid-row-end:11;
}

.local_fee_W2 {
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:11;
    grid-row-end:12;
}

.overlocal_fee_W1 {
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:10;
    grid-row-end:11;
}

.overlocal_fee_W2 {
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:11;
    grid-row-end:12;
}

.overlocal_list{
    grid-column-start:1;
    grid-column-end:5;
    grid-row-start:1;
    grid-row-end:2;
    font-weight: 600;
    font-size: 20px;
}

.area_n{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
}
.area_w{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:2;
    grid-row-end:3;
}
.area_s{
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:2;
    grid-row-end:3;
}
.area_e{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:2;
    grid-row-end:3;
}

.area_n1{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:3;
    grid-row-end:4;
}

.area_w1{
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:3;
    grid-row-end:4;
}

.area_s1{
    grid-column-start:3;
    grid-column-end:4;
    grid-row-start:3;
    grid-row-end:4;
}
.area_e1{
    grid-column-start:4;
    grid-column-end:5;
    grid-row-start:3;
    grid-row-end:4;
}

.blue{
    background-color: rgb(113, 227, 239);
}
.pink{
    background-color: rgb(239, 182, 196);
}