.table {
    display: grid;
    grid-template-columns: [toolbar] auto [layout] 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.table-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto [grid] 1fr;
    overflow: hidden;
    position: relative;
    grid-column: layout;
}

.table-container {
    overflow: auto;
    width: 100%;
    grid-row: grid;
}

.table-grid {
    position: relative;
    display: grid;
    cursor: default;
    grid-template-columns: inherit;
    justify-items: stretch;
    align-items: stretch;
    min-width: fit-content;
    grid-auto-rows: max-content;
}

.table-row, .table-rows, .table-header-row {
    display: contents;
}

.table-grid[x-selected-row-highlight] .table-row.active > .table-cell:not([x-editing]) {
    background-color: var(--ThmSelBkColor);
    color: var(--ThmSelColor);
}

.table-header {
    padding: var(--Padding) 1em;
    font-weight: bold;
    background-color: inherit;
    color: inherit;
}

.table-header-row > .table-header {
    text-align: center;
    display: grid;
    align-items: center;
}

.table-cell:not(.hidden) {
    display: grid;
    padding: var(--Padding);
    background-color: inherit;
    color: inherit;
}

.table-cell:not(.hidden):empty::before {
    content: "\00a0";
    color: transparent;
}

.table-row-number {
    background-color: var(--ThmBkColor) !important;
    color: var(--ThmColor) !important;
}

.table-edit-form:not(.hidden) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
}

.table-edit-form-container {
    overflow: auto;
}

@media (min-width: 576px) {

    .table-cell.no-wrap {
        white-space: nowrap;
    }

    .table-grid.mobile-hidden-header .table-row > .table-header {
        padding: 0;
        overflow: hidden;
    }

    .table-container:not(.border):not(.border-active) .table-grid[x-table-row-separator] .table-row > .table-cell,
    .table-grid[x-table-row-separator] .table-row:not(:last-child) > .table-cell,
    .table-grid[x-table-row-separator][x-row-border] .table-row > .table-cell,
    .table-grid[x-table-row-separator] > .table-header-row > .table-header {
        border-bottom: var(--BorderSize) solid var(--ThmBorderColor);
    }

    .table-grid[x-table-column-separator] .table-cell:not(:last-child),
    .table-grid[x-table-column-separator] .table-header:not(:last-child) {
        border-right: var(--BorderSize) solid var(--ThmBorderColor);
    }
}

@media (max-width: 575px) {

    .table {
        font-size: 80%;
    }

    .table-grid.mobile-hidden-header:not([x-table-show-header]) {
        grid-template-columns: 1fr;
    }

    .table-grid.mobile-hidden-header[x-table-show-header] {
        grid-template-columns: auto 1fr;
    }

    .table-grid.mobile-hidden-header > .table-header-row {
        display: none;
    }

    .table-grid.mobile-hidden-header .table-row > .table-cell:not(.hidden) {
        justify-items: start;
        align-items: center;
    }

    .table-grid.mobile-hidden-header .table-row > .table-header {
        padding: var(--Padding);
        display: grid;
        align-items: center;
    }

    .table-grid[x-table-row-separator]:not(.mobile-hidden-header) .table-header-row:not(:last-child) > .table-header,
    .table-grid[x-table-row-separator]:not(.mobile-hidden-header) .table-row:not(:last-child) > .table-cell,
    .table-container:not(.border):not(.border-active) .table-grid.mobile-hidden-header[x-table-row-separator] .table-row > .table-cell:nth-last-child(1),
    .table-container:not(.border):not(.border-active) .table-grid.mobile-hidden-header[x-table-row-separator] .table-row > .table-header:nth-last-child(2),
    .table-container:not(.border):not(.border-active) .table-grid:not(.mobile-hidden-header)[x-table-row-separator] .table-row > .table-cell,
    .table-grid[x-table-row-separator][x-row-border] .table-row > .table-cell:nth-last-child(1),
    .table-grid[x-table-row-separator][x-row-border] .table-row > .table-header:nth-last-child(2),
    .table-grid.mobile-hidden-header[x-table-row-separator] .table-row:not(:last-child) > .table-cell:nth-last-child(1),
    .table-grid.mobile-hidden-header[x-table-row-separator] .table-row:not(:last-child) > .table-header:nth-last-child(2) {
        border-bottom: var(--BorderSize) solid var(--ThmBorderColor);
    }

    .table-container:not(.border):not(.border-active) .table-grid.mobile-hidden-header[x-table-row-separator] .table-row:first-child > .table-cell:nth-child(2),
    .table-container:not(.border):not(.border-active) .table-grid.mobile-hidden-header[x-table-row-separator] .table-row:first-child > .table-header:first-child {
        border-top: var(--BorderSize) solid var(--ThmBorderColor);
    }

    .table-grid[x-table-column-separator]:not(.mobile-hidden-header) .table-cell:not(:last-child),
    .table-grid[x-table-column-separator] .table-header {
        border-right: var(--BorderSize) solid var(--ThmBorderColor);
    }
}

@media (any-hover: hover) {
    *[x-can-hover=true] .table-grid[x-table-row-highlight] .table-row:hover > .table-cell:not([x-editing]) {
        background-color: var(--ThmHlBkColor);
        color: var(--ThmHlColor);
    }
    *[x-can-hover=true] .table-grid[x-table-row-highlight] .table-row:active > .table-cell:not([x-editing]) {
        background-color: var(--ThmSelBkColor);
        color: var(--ThmSelColor);
    }
}

.table-check {
    border: var(--BorderSize) solid var(--ThmColor);
    width: fit-content;
    height: fit-content;
}

.table-check:not(.icon-check)::before {
    background-color: transparent !important;
}

.table-check > div {
    margin: 8%;
}

.table-cell[x-editing] .table-check {
    background-color: var(--CheckBackgroundColor);
}

.table-edit-toolbar[x-row-separator] {
    border-bottom: var(--BorderSize) solid var(--ThmBorderColor) !important;
}

.table-edit-toolbar[x-border] {
    border: var(--BorderSize) solid var(--ThmBorderColor);
    border-bottom: none;
}

.table-row-toolbar:not([x-border]) {
    border-right: var(--BorderSize) solid var(--ThmBorderColor);
}

.table-row-toolbar[x-border] {
    border: var(--BorderSize) solid var(--ThmBorderColor);
    border-right: none;
}