/**
 * Grid Collections
 */

.grid {
    display: grid;
    grid-template-columns: var(--grid-cols);
    grid-template-rows: var(--grid-rows);
    grid-column-gap: var(--grid-column-gutter, 0);
    grid-row-gap: var(--grid-row-gutter, 0);
}

/**
 * The grid created for dashboard layout
 */
.main-layout-dashboard-grid {
    --grid-cols: 240px auto;
    --grid-rows: 55px auto 44px;
}
/** this is special for main dashboard layout */
.top-grid { grid-area: 1 / 1 / 2 / 3; }
.left-grid { grid-area: 2 / 1 / 3 / 2; }
.main-grid { grid-area: 2 / 2 / 3 / 3; }
.bottom-grid { grid-area: 3 / 1 / 4 / 3; }

.feedback-grid {
    --grid-cols: 34px auto 24px;
    --grid-rows: auto;
}
.feedback-grid .grid-wrapper {
    display: grid;
    align-items: center;
}

.wizard-top {
    grid-area: header;
}
.wizard-main-content {
    grid-area: main;
}

.sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
}

.start-1-col { grid-area: 1 / 1 / 2 / 2; }
.start-2-cols { grid-area: 1 / 1 / 3 / 3; }
.middle-col { grid-area: 1 / 2 / 2 / 3; }
.end-1-col { grid-area: 1 / 3 / 2 / 4; }
.end-2-cols { grid-area: 1 / 2 / 2 / 4; }
.all-cols { grid-area: 1 / 1 / 2 / 4; }

.start-1-col-row-2 { grid-area: 2 / 1 / 3 / 2; }
.middle-col-row-2 { grid-area: 2 / 2 / 3 / 3; }

.end-2-row-1-col { grid-area: 1 / 3 / 3 / 4;}


.content-grid {
    display: grid;
    grid-template-columns: 80px auto;
    grid-column-gap: 0;
}