.terminal-container {
    display: grid;
    grid-template-areas: "header" "main";
    grid-template-columns: auto;
    gap: 3rem;
    max-width: 1366px;
    margin: 0;
    padding-bottom: 4.5rem;
}

@media (max-width: 1024px) {
    .terminal-container {
        grid-template-areas: "header" "main";
        grid-template-rows: auto 1fr;
        grid-template-columns: 100%;
    }
}

.terminal-container .terminal-header {
    grid-area: header;
    display: grid;
    grid-template-areas: "name date" "name settings";
    grid-auto-flow: row;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 1024px;
}

@media (max-width: 768px) {
    .terminal-container .terminal-header {
        grid-area: header;
        display: grid;
        grid-template-areas: "name" "date" "settings";
        grid-auto-flow: column;
        grid-template-rows: auto auto auto;
        grid-template-columns: 100%;
        gap: 1rem;
    }
}


.terminal-container .terminal-header > div {
    padding: 1rem;
}

.terminal-container .terminal-header .header-name {
    grid-area: name;
    padding: 2rem;
}

@media (max-width: 768px) {
    .terminal-container .terminal-header .header-name {
        display: grid;
        align-items: center;
        padding: 1.5rem;
    }
}

.header-name .name-col-1 {
    grid-area: col-1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.header-name .name-col-2 {
    grid-area: col-2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}


.terminal-container .terminal-header .header-name h1,
.terminal-container .terminal-header .header-name h2 {
    color: var(--white);
}

.terminal-container .terminal-header .header-name h1 {
    font-weight: bolder;
}

.terminal-container .terminal-header .header-name h2 {
    font-size: small;
}

.terminal-container .terminal-header .header-date {
    grid-area: date;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.terminal-container .terminal-header .header-date div {
    margin-bottom: .5ex;
}

.terminal-container .terminal-header .header-date .header-desc {
    font-style: italic;
}

.terminal-container .terminal-header .header-settings {
    grid-area: settings;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1ex;
}


.terminal-container .terminal-main {
    grid-area: main;
    display: grid;
    grid-template-areas: "control total" "table table" "table-footer table-footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1.5fr 1fr;
    height: 100%;
    max-width: 1024px;
    margin: 0;
}

@media (max-width: 1024px) {
    .terminal-container .terminal-main {
        grid-area: main;
        display: grid;
        grid-template-areas: "control" "total" "table" "table-footer";
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        gap: .75rem;
        height: 100%;
        min-width: 100%;
        max-width: 100%;
        margin: 0;
    }
}


.terminal-container .terminal-main .main-control {
    grid-area: control;
    max-width: 1024px;
    padding: 2rem calc(1.05rem + .5ex) calc(1.05rem + .5ex) 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.main-control .control-order {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding-bottom: .5rem;
}

.terminal-container .terminal-main .main-total {
    grid-area: total;
    border: 1px solid var(--secondary);
    padding: 2.5rem 1rem 1rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .terminal-container .terminal-main .main-total {
        margin-left: 1rem;
        display: block;
        gap: 0;
    }
}

.terminal-container .terminal-main .main-table {
    grid-area: table;
    max-width: 1024px;
    margin-top: 2.5%;
}

.terminal-container .terminal-main .main-table-footer {
    grid-area: table-footer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -ms-flex-line-pack: end;
    align-content: end;
    text-align: end;
    padding: 2rem;
}

/*# sourceMappingURL=wwwroot/css/terminal-page.css.map */