﻿body {
}
.ImageGridRow {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 0;
}

.GridRow12 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 1fr 2fr;
}

.GridRow21 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 2fr 1fr;
}

.GridRow22 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 1fr 1fr;
}

.GridRow34 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 3fr 4fr;
}

.GridRow45 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 4fr 5fr;
}

.GridRow54 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 5fr 4fr;
}

.GridRow13 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 1fr 3fr;
    column-gap: 0;
}

.GridRow23 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 2fr 3fr;
    column-gap: 0;
}

.GridRow14 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 1fr 4fr;
    column-gap: 0;
}

.GridRow31 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 3fr 1fr;
    column-gap: 0;
}

.GridRow41 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 4fr 1fr;
    column-gap: 0;
    gap: 0;
}

.GridRow33 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0;
}

.GridRow44 {
    display: grid;
    /* grid-template-rows: 30px 30px 30px 30px 30px 30px; */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 0;
}

.GridRow55 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    column-gap: 0;
}

.GridRow66 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 0;
}

.GridRow46 {
    display: grid;
    grid-template-columns: 4fr 6fr;
    column-gap: 0;
}

.GridRow64 {
    display: grid;
    grid-template-columns: 6fr 4fr;
    column-gap: 0;
}

.GridRow37 {
    display: grid;
    grid-template-columns: 3fr 7fr;
    column-gap: 0;
}

.GridRow73 {
    display: grid;
    grid-template-columns: 7fr 3fr;
    column-gap: 0;
}

.GridRow91 {
    display: grid;
    grid-template-columns: 9fr 1fr;
    column-gap: 0;
}

.GridRow19 {
    display: grid;
    grid-template-columns: 1fr 9fr;
    column-gap: 0;
}

.GridRow85 {
    display: grid;
    grid-template-columns: 85fr 15fr;
    column-gap: 0;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
    padding: 12px 04px;
    text-align: left;
    /*background-color: #f1f1f1;*/ /*whitesmoke*/
    margin-left: 02px;
    margin-bottom: 12px;
    border-radius: 8px;
}
.MenusGridContainer {
    display: grid;
    /* grid-template-columns: repeat(6, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Automatically adjust columns */
    /* grid-template-rows: minmax(100px, auto) 1fr minmax(50px, 200px); */
    /* grid-template-rows: repeat(minmax(70px, 80px)); */
    gap: 12px;
    /* Centering essentials */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* Visual guide */
    /* border: 1px dashed #ccc; */
}

@media (max-width: 559px) {
    .MenusDiv {
        width: 98%;
    }
    .MenusSubDiv {
        width: 100%;
        margin: auto;
        padding: 08px 02px;
        background-color: navajowhite;
    }

    .MenusGridContainer {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Automatically adjust columns */
        gap: 08px;
        /* Centering essentials */
        width: 100%;
        max-width: 550px;
    }
}

.MenusGridItem {
    /* background: #4CAF50; */
    text-align: center;
    align-content: center;
    /* padding: 20px; */
    /* color: white; */
}
.Col1 {
    grid-column: 1;
    /*margin-left: 2px;
    padding-left: 2px;*/
    /* line-height: 30px; */
}

.Col2 {
    grid-column: 2;
}

.Col3 {
    grid-column: 3;
}

.Col4 {
    grid-column: 4;
}

.Col5 {
    grid-column: 5;
}

.Col6 {
    grid-column: 6;
}

.Col12 {
    grid-column: 1 /span 2;
}

.Col23 {
    grid-column: 2 /span 2;
}

.Col123 {
    grid-column: 1 / span 3;
}

.Col34 {
    grid-column: 3 /span 2;
}

.Col45 {
    grid-column: 4 /span 2;
}

.Col1234 {
    grid-column: 1 / span 4;
}
.Col234 {
    grid-column: 2 / span 3;
}
.Col345 {
    grid-column: 3 /span 3;
}

.Col56 {
    grid-column: 5 /span 2;
}

.Col2345 {
    grid-column: 2 / span 4;
}

.Col12345 {
    grid-column: 1 / span 5;
}

.Col23456 {
    grid-column: 2 / span 5;
}

.Col1, .Col2, .Col3, .Col4, .Col5, .Col6 {
    grid-row: auto;
    /* padding: 1em; */
    border: none;
    /* font-size: 12px; */
    margin-bottom: 2px;
}

.GridRowAccountList {
    display: grid;
    grid-template-columns: 99fr 1fr;
    column-gap: 0;
    /* grid-template-columns: 0.1fr 2fr; */
}
