div {
    overflow: auto;
}

.noOverflow {
    overflow: hidden;
}

.wrapper {
    display: grid;
    height: 100%;

}


.sub-grid {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.h-align-left{
    justify-self:start;
    text-align:start;
}

.h-align-right {
    justify-self: end;
    text-align: end;
}

.h-align-center {
    justify-self: center;
    text-align: center;
}

.h-align-strech {
    justify-self: stretch;
    text-align: justify;
}


.v-align-top {
    align-self: start;
    
}

.v-align-bottom {
    align-self: end;
    vertical-align:bottom;
}

.v-align-center {
    align-self: center;
}
.v-align-strech {
    align-self: stretch;
}

.vh-align-center {
    justify-self: center;
    align-self: center;
}

.vh-align-strech {
    justify-self: stretch;
    align-self: stretch;
}

    .gap-5 {
        grid-gap: 5px;
    }

.gap-10 {
    grid-gap: 10px;
}

.gap-15 {
    grid-gap: 15px;
}

.gap-20 {
    grid-gap: 20px;
}

.row-gap-5{
    grid-row-gap:5px;
}
.row-gap-10 {
    grid-row-gap: 10px;
}
.row-gap-15 {
    grid-row-gap: 15px;
}
.row-gap-20 {
    grid-row-gap: 20px;
}


.col-gap-5 {
    grid-column-gap: 5px;
}

.col-gap-10 {
    grid-column-gap: 10px;
}

.col-gap-15 {
    grid-column-gap: 15px;
}

.col-gap-20 {
    grid-column-gap: 20px;
}

/* **** COLS *****/
/*
.col-2 {
    grid-template-columns: repeat(2, 1fr);
}

.col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.col-5 {
    grid-template-columns: repeat(5, 1fr);
}

.col-6 {
    grid-template-columns: repeat(6, 1fr);
}
*/

.col-2-auto {
    grid-template-columns: auto 1fr;
}
.col-3-auto {
    grid-template-columns: auto auto 1fr;
}

.col-2 {
    grid-template-columns: repeat(2, 50%);
}

.col-3 {
    grid-template-columns: repeat(3, 33.33%);
}

.col-4 {
    grid-template-columns: repeat(4, 25%);
}

.col-5 {
    grid-template-columns: repeat(5, 20%);
}

.col-6 {
    grid-template-columns: repeat(6, 16.66%);
}


/* **** ROWS *****/
/*
.row-2 {
    grid-template-rows: repeat(2, 1fr);
}

.row-3 {
    grid-template-rows: repeat(3, 1fr);
}

.row-4 {
    grid-template-rows: repeat(4, 1fr);
}

.row-5 {
    grid-template-rows: repeat(5, 1fr);
}

.row-6 {
    grid-template-rows: repeat(6, 1fr);
}
.row-7 {
    grid-template-rows: repeat(7, 1fr);
}

.row-8 {
    grid-template-rows: repeat(8, 1fr);
}

.row-9 {
    grid-template-rows: repeat(9, 1fr);
}

.row-10 {
    grid-template-rows: repeat(10, 1fr);
}

.row-11 {
    grid-template-rows: repeat(11, 1fr);
}

.row-12 {
    grid-template-rows: repeat(12, 1fr);
}

.row-13 {
    grid-template-rows: repeat(13, 1fr);
}

.row-14 {
    grid-template-rows: repeat(14, 1fr);
}

.row-15 {
    grid-template-rows: repeat(15, 1fr);
   
}
*/

.row-2 {
    grid-template-rows: repeat(2, 50%);
}

.row-3 {
    grid-template-rows: repeat(3, 33.33%);
}

.row-4 {
    grid-template-rows: repeat(4, 25%);
}

.row-5 {
    grid-template-rows: repeat(5, 20%);
}

.row-6 {
    grid-template-rows: repeat(6, 16.66%);
}

.row-7 {
    grid-template-rows: repeat(7, 14.285%);
}

.row-8 {
    grid-template-rows: repeat(8, 12.5%);
}

.row-9 {
    grid-template-rows: repeat(9, 11,11%);
}

.row-10 {
    grid-template-rows: repeat(10, 10%);
}

.row-11 {
    grid-template-rows: repeat(11, 9.09%);
}

.row-12 {
    grid-template-rows: repeat(12, 8.33%);
}

.row-13 {
    grid-template-rows: repeat(13, 7.69%);
}

.row-14 {
    grid-template-rows: repeat(14, 7.14%);
}

.row-15 {
    grid-template-rows: repeat(15, 6.66%);
}


.row-2-auto {
    grid-template-rows: auto 1fr;
}

.row-3-auto {
    grid-template-rows: auto auto 1fr;
}
.row-4-auto {
    grid-template-rows: auto auto auto 1fr;
}

/*****   COL Span *****/



.col-pos-0-1 {
    grid-column: 1 / 2;
}

.col-pos-0-2 {
    grid-column: 1 / 3;
}

.col-pos-0-3 {
    grid-column: 1 / 4;
}

.col-pos-0-4 {
    grid-column: 1 / 5;
}

.col-pos-0-5 {
    grid-column: 1 / 6;
}

.col-pos-0-6 {
    grid-column: 1 / 7;
}


.col-pos-1-2 {
    grid-column: 2 / 3;
}

.col-pos-1-3 {
    grid-column: 2 / 4;
}

.col-pos-1-4 {
    grid-column: 2 / 5;
}

.col-pos-1-5 {
    grid-column: 2 / 6;
}

.col-pos-1-6 {
    grid-column: 2 / 7;
}

.col-pos-2-3 {
    grid-column: 3 / 4;
}

.col-pos-2-4 {
    grid-column: 3 / 5;
}

.col-pos-2-5 {
    grid-column: 3 / 6;
}

.col-pos-2-6 {
    grid-column: 3 / 7;
}

.col-pos-3-4 {
    grid-column: 4 / 5;
}

.col-pos-3-5 {
    grid-column: 4 / 6;
}

.col-pos-3-6 {
    grid-column: 4 / 7;
}

.col-pos-4-5 {
    grid-column: 5 / 6;
}

.col-pos-4-6 {
    grid-column: 5 / 7;
}

.col-pos-5-6 {
    grid-column: 6 / 7;
}

/****** ROWS SPANS ****/
.row-pos-0-1 {
    grid-row: 1 / 2;
}

.row-pos-0-2 {
    grid-row: 1 / 3;
}

.row-pos-0-3 {
    grid-row: 1 / 4;
}

.row-pos-0-4 {
    grid-row: 1 / 5;
}

.row-pos-0-5 {
    grid-row: 1 / 6;
}

.row-pos-0-6 {
    grid-row: 1 / 7;
}

.row-pos-0-7 {
    grid-row: 1 / 8;
}

.row-pos-0-8 {
    grid-row: 1 / 9;
}

.row-pos-0-9 {
    grid-row: 1 / 10;
}

.row-pos-0-10 {
    grid-row: 1 / 11;
}

.row-pos-0-11 {
    grid-row: 1 / 12;
}

.row-pos-0-12 {
    grid-row: 1 / 13;
}

.row-pos-0-13 {
    grid-row: 1 / 14;
}

.row-pos-0-14 {
    grid-row: 1 / 15;
}

.row-pos-0-15 {
    grid-row: 1 / 16;
}




.row-pos-1-2 {
    grid-row: 2 / 3;
}

.row-pos-1-3 {
    grid-row: 2 / 4;
}

.row-pos-1-4 {
    grid-row: 2 / 5;
}

.row-pos-1-5 {
    grid-row: 2 / 6;
}

.row-pos-1-6 {
    grid-row: 2 / 7;
}

.row-pos-1-7 {
    grid-row: 2 / 8;
}

.row-pos-1-8 {
    grid-row: 2 / 9;
}

.row-pos-1-9 {
    grid-row: 2 / 10;
}

.row-pos-1-10 {
    grid-row: 2 / 11;
}

.row-pos-1-11 {
    grid-row: 2 / 12;
}

.row-pos-1-12 {
    grid-row: 2 / 13;
}

.row-pos-1-13 {
    grid-row: 2 / 14;
}

.row-pos-1-14 {
    grid-row: 2 / 15;
}

.row-pos-1-15 {
    grid-row: 2 / 16;
}






.row-pos-2-3 {
    grid-row: 3 / 4;
}

.row-pos-2-4 {
    grid-row: 3 / 5;
}

.row-pos-2-5 {
    grid-row: 3 / 6;
}

.row-pos-2-6 {
    grid-row: 3 / 7;
}

.row-pos-2-7 {
    grid-row: 3 / 8;
}

.row-pos-2-8 {
    grid-row: 3 / 9;
}

.row-pos-2-9 {
    grid-row: 3 / 10;
}

.row-pos-2-10 {
    grid-row: 3 / 11;
}

.row-pos-2-11 {
    grid-row: 3 / 12;
}

.row-pos-2-12 {
    grid-row: 3 / 13;
}

.row-pos-2-13 {
    grid-row: 3 / 14;
}

.row-pos-2-14 {
    grid-row: 3 / 15;
}

.row-pos-2-15 {
    grid-row: 3 / 16;
}








.row-pos-3-4 {
    grid-row: 4 / 5;
}

.row-pos-3-5 {
    grid-row: 4 / 6;
}

.row-pos-3-6 {
    grid-row: 4 / 7;
}

.row-pos-3-7 {
    grid-row: 4 / 8;
}

.row-pos-3-8 {
    grid-row: 4 / 9;
}

.row-pos-3-9 {
    grid-row: 4 / 10;
}

.row-pos-3-10 {
    grid-row: 4 / 11;
}

.row-pos-3-11 {
    grid-row: 4 / 12;
}

.row-pos-3-12 {
    grid-row: 4 / 13;
}

.row-pos-3-13 {
    grid-row: 4 / 14;
}

.row-pos-3-14 {
    grid-row: 4 / 15;
}

.row-pos-3-15 {
    grid-row: 4 / 16;
}







.row-pos-4-5 {
    grid-row: 5 / 6;
}

.row-pos-4-6 {
    grid-row: 5 / 7;
}

.row-pos-4-7 {
    grid-row: 5 / 8;
}

.row-pos-4-8 {
    grid-row: 5 / 9;
}

.row-pos-4-9 {
    grid-row: 5 / 10;
}

.row-pos-4-10 {
    grid-row: 5 / 11;
}

.row-pos-4-11 {
    grid-row: 5 / 12;
}

.row-pos-4-12 {
    grid-row: 5 / 13;
}

.row-pos-4-13 {
    grid-row: 5 / 14;
}

.row-pos-4-14 {
    grid-row: 5 / 15;
}

.row-pos-4-15 {
    grid-row: 5 / 16;
}







.row-pos-5-6 {
    grid-row: 6 / 7;
}

.row-pos-5-7 {
    grid-row: 6 / 8;
}

.row-pos-5-8 {
    grid-row: 6 / 9;
}

.row-pos-5-9 {
    grid-row: 6 / 10;
}

.row-pos-5-10 {
    grid-row: 6 / 11;
}

.row-pos-5-11 {
    grid-row: 6 / 12;
}

.row-pos-5-12 {
    grid-row: 6 / 13;
}

.row-pos-5-13 {
    grid-row: 6 / 14;
}

.row-pos-5-14 {
    grid-row: 6 / 15;
}

.row-pos-5-15 {
    grid-row: 6 / 16;
}









.row-pos-6-7 {
    grid-row: 7 / 8;
}

.row-pos-6-8 {
    grid-row: 7 / 9;
}

.row-pos-6-9 {
    grid-row: 7 / 10;
}

.row-pos-6-10 {
    grid-row: 7 / 11;
}

.row-pos-6-11 {
    grid-row: 7 / 12;
}

.row-pos-6-12 {
    grid-row: 7 / 13;
}

.row-pos-6-13 {
    grid-row: 7 / 14;
}

.row-pos-6-14 {
    grid-row: 7 / 15;
}

.row-pos-6-15 {
    grid-row: 7 / 16;
}







.row-pos-7-8 {
    grid-row: 8 / 9;
}

.row-pos-7-9 {
    grid-row: 8 / 10;
}

.row-pos-7-10 {
    grid-row: 8 / 11;
}

.row-pos-7-11 {
    grid-row: 8 / 12;
}

.row-pos-7-12 {
    grid-row: 8 / 13;
}

.row-pos-7-13 {
    grid-row: 8 / 14;
}

.row-pos-7-14 {
    grid-row: 8 / 15;
}

.row-pos-7-15 {
    grid-row: 8 / 16;
}







.row-pos-8-9 {
    grid-row: 9 / 10;
}

.row-pos-8-10 {
    grid-row: 9 / 11;
}

.row-pos-8-11 {
    grid-row: 9 / 12;
}

.row-pos-8-12 {
    grid-row: 9 / 13;
}

.row-pos-8-13 {
    grid-row: 9 / 14;
}

.row-pos-8-14 {
    grid-row: 9 / 15;
}

.row-pos-8-15 {
    grid-row: 9 / 16;
}






.row-pos-9-10 {
    grid-row: 10 / 11;
}
.row-pos-9-11 {
    grid-row: 10 / 12;
}

.row-pos-9-12 {
    grid-row: 10 / 13;
}

.row-pos-9-13 {
    grid-row: 10 / 14;
}

.row-pos-9-14 {
    grid-row: 10 / 15;
}

.row-pos-9-15 {
    grid-row: 10 / 16;
}




.row-pos-10-11 {
    grid-row: 11 / 12;
}

.row-pos-10-12 {
    grid-row: 11 / 13;
}

.row-pos-10-13 {
    grid-row: 11 / 14;
}

.row-pos-10-14 {
    grid-row: 11 / 15;
}

.row-pos-10-15 {
    grid-row: 11 / 16;
}




.row-pos-11-12 {
    grid-row: 12 / 13;
}

.row-pos-11-13 {
    grid-row: 12 / 14;
}

.row-pos-11-14 {
    grid-row: 12 / 15;
}

.row-pos-11-15 {
    grid-row: 12 / 16;
}




.row-pos-12-13 {
    grid-row: 13 / 14;
}

.row-pos-12-14 {
    grid-row: 13 / 15;
}

.row-pos-12-15 {
    grid-row: 13 / 16;
}



.row-pos-13-14 {
    grid-row: 14 / 15;
}

.row-pos-13-15 {
    grid-row: 14 / 16;
}



.row-pos-14-15 {
    grid-row: 15 / 16;
}