.x-axis-scroll {
    overflow-x: auto;
}

.remediation-table-wrapper {
    display: grid;
    border: 1px solid black;
    min-width: min-content;
}

.m-col-1 {
    grid-area: m-col-1;
}

.m-col-2 {
    grid-area: m-col-2;
}

.m-col-3 {
    grid-area: m-col-3;
}

.col-1 {
    grid-area: col-1;
}

.col-2 {
    grid-area: col-2;
}

.col-3 {
    grid-area: col-3;
}

.col-4 {
    grid-area: col-4;
}

.col-5 {
    grid-area: col-5;
}

.col-6 {
    grid-area: col-6;
}

.col-7 {
    grid-area: col-7;
}

.col-8 {
    grid-area: col-8;
}

.col-9 {
    grid-area: col-9;
}

.template-1,
.template-2,
.template-3,
.template-4,
.template-5,
.template-6 {
    background-color: lightblue;
    font-weight: bold;
}
.template-1 .bg-white,
.template-2 .bg-white,
.template-3 .bg-white,
.template-4 .bg-white,
.template-5 .bg-white,
.template-6 .bg-white {
    background-color: white;
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
}

.template-1 > div, 
.template-2 > div, 
.template-3 > div, 
.template-4 > div, 
.template-5 > div, 
.template-6 > div {
    min-height: 2em;
    padding: 2px 8px;
    text-align: center;
    border: 1px solid grey;
}

.template-1 > div input[type="text"], .template-1 > div textarea,
.template-2 > div input[type="text"], .template-2 > div textarea,
.template-3 > div input[type="text"], .template-3 > div textarea,
.template-4 > div input[type="text"], .template-4 > div textarea,
.template-5 > div input[type="text"], .template-5 > div textarea,
.template-6 > div input[type="text"], .template-6 > div textarea {
    height: auto;
    line-height: normal;
    font-size: 13px;
    text-align: left;
    padding: 0 16px 0 0;
    white-space: nowrap;
    width: min-content;
    overflow-x: hidden;
}

.template-1 > div .ValidationMessage,
.template-2 > div .ValidationMessage, 
.template-3 > div .ValidationMessage, 
.template-4 > div .ValidationMessage, 
.template-5 > div .ValidationMessage, 
.template-6 > div .ValidationMessage{
    text-align: left;
}

.template-1 {
    display: grid;
    grid-template-areas: 
    'm-col-1 m-col-2 m-col-2 m-col-2 m-col-3 m-col-3 col-7' 
    'col-1 col-2 col-3 col-4 col-5 col-6 col-7'
    '. . . . . . .';
    grid-template-columns: 1fr 2fr repeat(5,1fr);
}

.template-2 {
    display: grid;
    grid-template-areas: 
    'm-col-1 m-col-2 m-col-2 m-col-2 m-col-2 m-col-3' 
    'col-1 col-2 col-3 col-4 col-5 col-6'
    '. . . . . .';
    grid-template-columns: 1fr 2fr 1fr 1fr 1fr 1.5fr;
}

.template-3 {
    display: grid;
    grid-template-areas: 
    'm-col-1 m-col-2 m-col-2 m-col-3 m-col-3 col-6' 
    'col-1 col-2 col-3 col-4 col-5 col-6'
    '. . . . . .';
    grid-template-columns: 1fr 2fr repeat(4,1fr);
}

.template-4 {
    display: grid;
    grid-template-areas:  
    'col-1 col-2 col-3 col-4 col-5'
    '. . . . .';
    grid-template-columns: 1fr 2fr repeat(3,1fr);
}

.template-5 {
    display: grid;
    grid-template-areas:  
    'col-1 col-2 col-3 col-4 col-5 col-6'
    'm-col-1 m-col-1 m-col-1 m-col-1 m-col-1 m-col-1'
    '. . . . . .';
    grid-template-columns: repeat(6,1fr);
}

.template-5.v2 {
    display: grid;
    grid-template-areas:  
    'col-1 col-2 col-3 col-4 col-5'
    'm-col-1 m-col-1 m-col-1 m-col-1 m-col-1'
    '. . . . .';
    grid-template-columns: repeat(5,1fr);
}

.template-6 {
    display: grid;
    grid-template-areas: 
    'm-col-1 m-col-2 m-col-2 m-col-2 m-col-2 m-col-3 m-col-3 m-col-3 col-9' 
    'col-1 col-2 col-3 col-4 col-5 col-6 col-7 col-8 col-9'
    '. . . . . . . . .';
    grid-template-columns: 1fr 2fr repeat(7,1fr);
}