﻿.grid-container2 {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "label1 label2 label3 label4 label5" "input1 input2 input3 input4 input5";
}

.grid-item2 {
    border: .01em solid;
    border-color: #e5e5e5;
    padding: .5em;
}

.cell-style-color {
    border: .01em solid;
    border-color: #e5e5e5;
    padding: .5em;
    background-color: #C7E3F0;
}

.grid-item2:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: label1;
}

.grid-item2:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: label2;
}

.grid-item2:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: label3;
}

.grid-item2:nth-child(4) {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
    grid-area: label4;
}

.grid-item2:nth-child(5) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    grid-area: label5;
}

.grid-item2:nth-child(6) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: input1;
}

.grid-item2:nth-child(7) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: input2;
}

.grid-item2:nth-child(8) {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: input3;
}

.grid-item2:nth-child(9) {
    -ms-grid-row: 2;
    -ms-grid-column: 4;
    grid-area: input4;
}

.grid-item2:nth-child(10) {
    -ms-grid-row: 2;
    -ms-grid-column: 5;
    grid-area: input5;
}

@media screen and (max-width:840px) {
    .grid-container2 {
        display: -ms-grid;
        display: grid;
        grid-template-areas: "label1 label1 label1 label1 label1" "input1 input1 input1 input1 input1" "label2 label2 label2 label2 label2" "input2 input2 input2 input2 input2" "label3 label3 label3 label3 label3" "input3 input3 input3 input3 input3" "label4 label4 label4 label4 label4" "input4 input4 input4 input4 input4" "label5 label5 label5 label5 label5" "input5 input5 input5 input5 input5";
    }

    .grid-item2:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(2) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(3) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(4) {
        -ms-grid-row: 7;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(5) {
        -ms-grid-row: 9;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(6) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(7) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(8) {
        -ms-grid-row: 6;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(9) {
        -ms-grid-row: 8;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }

    .grid-item2:nth-child(10) {
        -ms-grid-row: 10;
        -ms-grid-column: 1;
        -ms-grid-column-span: 5;
    }
}
