body {
}

.cssGrd1ClmContainr {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.cssGrd2ClmContainr {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.cssGrd3ClmContainr {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.cssGrd4ClmContainr {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.cssGrd5ClmContainr {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.cssGrd6ClmContainr {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    grid-gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.cssGrd1ClmContainr > div,
.cssGrd2ClmContainr > div,
.cssGrd3ClmContainr > div,
.cssGrd4ClmContainr > div,
.cssGrd5ClmContainr > div,
.cssGrd6ClmContainr > div {background-color:white;border-width:5px;border-style:solid;border-color:#f9f9f9;border-radius:10px;padding:10px 0;font-size:30px;}


.cssClmSt1End3 {grid-column-start: 1;grid-column-end: 3;}
.cssClmSt1End4 {grid-column-start: 1;grid-column-end: 4;}
.cssClmSt1End5 {grid-column-start: 1;grid-column-end: 5;}
.cssClmSt1End6 {grid-column-start: 1;grid-column-end: 6;}
.cssClmSt1End7 {grid-column-start: 1;grid-column-end: 7;}
.cssClmSt2End4 {grid-column-start: 2;grid-column-end: 4;}
.cssClmSt2End5 {grid-column-start: 2;grid-column-end: 5;}
.cssClmSt2End6 {grid-column-start: 2;grid-column-end: 6;}
.cssClmSt3End4 {grid-column-start: 3;grid-column-end: 4;}


.cssGrd1ClmContainr > div:hover,
.cssGrd2ClmContainr > div:hover,
.cssGrd3ClmContainr > div:hover,
.cssGrd4ClmContainr > div:hover,
.cssGrd5ClmContainr > div:hover,
.cssGrd6ClmContainr > div:hover {
    border: 5px solid whitesmoke;
    box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2)
}

.cssDBContent {font-size:30px;}
.cssDBHdgDiv {padding: 5px 0px 8px 10px;/* top right bottom left*/border-bottom: 1px solid whitesmoke;}
.cssDBDtlDiv {padding:  15px 5px 0px 10px;/* top right bottom left*/}