div.table-container {
    width: 100%;
    display: inline-block;
    /*position: relative;*/
    border: 1px solid var(--flex-border-color-light); 
}

div.table-container > table {
    min-width: 100%;;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

div.table-container > table th,
div.table-container > table td {
    border-right: 1px solid var(--flex-border-color-light); 
    border-bottom: 1px solid var(--flex-border-color-light); 
    background: var(--flex-bg-white);
    margin: 0;
    padding: 0;
    display: table-cell;
}

.table-container > table > thead > tr > th:last-child,
.table-container > table > tbody > tr > td:last-child,
.table-container > table > tfoot > tr > th:last-child {
    border-right: 0;
}

.table-container > table > tbody > tr:last-child > td {
    border-bottom: 0;
}

div.table-container > table th > div,
div.table-container > table td > div {
    position: relative;
    height: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

div.table-container > table > thead > tr > th {
    background: var(--flex-bg-light);
}

.table-container > table > tfoot > tr > th {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 9;
}

.table-container > table > thead > tr > th.checkbox,
.table-container > table > tbody > tr > td.checkbox,
.table-container > table > tfoot > tr > th.checkbox,
.table-container > table .row-options {
    border-right: 0;
    text-align: center;
    z-index: 10;
}

.table-container > table > thead > tr > .row-options > div {
    text-align: left;
}

.table-container > table > thead > tr > th.checkbox > div,
.table-container > table > tbody > tr > td.checkbox > div,
.table-container > table > tfoot > tr > th.checkbox > div {
    width: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
}

.table-container > table th.checkbox > div > button,
.table-container > table td.checkbox > div > button {
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
    color: var(--flex-bg-muted);
    opacity: 0.5;
    font-size: 1rem;
}

.table-container > table tr:hover th.checkbox > div > button,
.table-container > table tr:hover td.checkbox > div > button,
.table-container > table tr th.checkbox > div > button.active,
.table-container > table tr td.checkbox > div > button.active {
    opacity: 1;
}

.table-container > table > thead > tr > th.key-field {
    left: 0;
    z-index: 11;
}

.table-container > table > tbody > tr > td.key-field,
.table-container > table > tfoot > tr > th.key-field {
    position: -webkit-sticky; 
    position: sticky;
    left: 0;
    z-index: 6;
}

.table-container > table > tfoot > tr > th.key-field {
    z-index: 10;
}

.table-container > table > thead > tr > th.key-field:after,
.table-container > table > tbody > tr > td.key-field:after,
.table-container > table > tfoot > tr > th.key-field:after {
    content: '';
    position: absolute;
    right: 1px;
    width: 1px;
    top: -5px;
    bottom: 3px;
    box-shadow: var(--flex-shadown-key-column);
    -webkit-box-shadow: var(--flex-shadown-key-column);
}

.table-container > table .key-field.no-separator:after {
    display: none;
}

.pin-header > table > thead > tr > th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-container.fixed-width {
    overflow: auto;
    max-width: 100%;
}

.table-container.fixed-column-size {
    width: auto;
}

.table-container.fixed-column-size > table {
    min-width: unset;
}

.table-container.fixed-column-size > table th > div,
.table-container.fixed-column-size > table td > div {
    width: 10rem;
}

.table-container.fixed-column-size > table th.key-field > div,
.table-container.fixed-column-size > table td.key-field > div {
    width: 12rem;
}

.table-container.fixed-column-size > table .row-options > div {
    width: unset;
}

.table-container.fixed-column-size > table > thead .row-options > div {
    padding-left: .5em;
}

.table-container.fixed-column-size > table .primary-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.table-container.fixed-column-size > table .primary-cell > div.field {
    position: relative;
    flex-grow: 1;
    height: 100%;
}

.table-container.fixed-column-size > table .primary-cell > div.option {
    position: relative;
    width: 1.5rem;
    height: 100%;
    opacity: 0.5;
    margin-left: .25em;
}

.table-container.fixed-column-size > table .primary-cell > div.option:last-child {
    margin-right: .25em;
}

.table-container > table tr:hover .primary-cell > div.option {
    opacity: 1;
}

.table-container > table > thead > tr > th.sticky-option,
.table-container > table > tbody > tr > td.sticky-option,
.table-container > table > tfoot > tr > th.sticky-option {
    position: -webkit-sticky; 
    position: sticky;
    left: 0;
    z-index: 11;
}

.table-container > table > tbody > tr > td.sticky-option {
    position: -webkit-sticky; 
    position: sticky;
    left: 0;
    z-index: 9;
}


.table-container > table > tfoot > tr > th {
    border-top: 0;
    border-bottom: 0;
    padding-top: 1px;
    padding-bottom: 0;
    background: #eee;
}

.table-container > table > tfoot > tr > th > div {
   background: var(--flex-bg-white);
}

.table-container > table > tfoot > tr > th > div:empty {
    display: table-footer-group;
}

.table-container > table > tfoot > tr > th > div:empty:after {
    content: ' ';
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    background:var(--flex-bg-white);
}

.table-container.f-tc-loading {
    overflow: hidden;
    min-height: 10rem;
}

.table-container > .f-tc-loading-backdrop,
.table-container > .f-tc-loading-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; 
    -webkit-transition: opacity .2s ease-in;
    -moz-transition: opacity .2s ease-in;
    transition: opacity .2s ease-in;
    background-color: unset;
}

.table-container > .f-tc-loading-backdrop.f-tc-show {
    background: white;
    pointer-events: all;
    opacity: .75;
}

.table-container > .f-tc-loading-container.f-tc-show {
    /*padding-top: 5%;*/
    background: transparent;
    pointer-events: all;
    opacity: 1;
    z-index: 501;
}
  
.table-container > .f-tc-loading-backdrop.f-tc-hide,
.table-container > .f-tc-loading-container.f-tc-hide {
    pointer-events: none;
    opacity: 0; 
}

.table-container > .f-tc-loading-container > .f-loading {
    font-size: 3.5rem;
    border-color: #eee;
    border-top-color: var(--flex-text-primary);
}

/* light theme */

.table-container.light { 
    border: 0;
    border-radius: 0;
    background: var(--flex-bg-white);
}

.table-container.light > table > thead > tr > th.checkbox,
.table-container.light > table > tbody > tr > td.checkbox,
.table-container.light > table > tfoot > tr > th.checkbox,
.fixed-column-size.light > table > * > tr > .key-field.row-options {
    border: 0;
}

.fixed-column-size.light > table > * > tr > .row-options > div {
    background: transparent;
}

.table-container.light > table > thead > tr > th.checkbox > div,
.table-container.light > table > tbody > tr > td.checkbox > div,
.table-container.light > table > tfoot > tr > th.checkbox > div {
    background: var(--flex-bg-white);
}

.table-container.light > table > thead > tr > th,
.table-container.light > table > tfoot > tr > th {
    background: var(--flex-bg-white);
    border: .25em solid var(--flex-bg-white);  
    border-bottom: 0;
    border-top: 0;
}

.table-container.light > table > tfoot > tr > th {    
    padding-top: .25em;
    border-top: 0;
}

.table-container.light > table > tbody > tr > td {
    border: .25em solid var(--flex-bg-white);
}

.table-container.light > table > tbody > tr > td > div,
.table-container.light > table > tfoot > tr > th > div {
    background: var(--flex-bg-light); 
    border-radius: .2em;  
    overflow: hidden;
    position: relative;
}

.table-container.light > table > thead > tr > th.key-field,
.table-container.light > table > tbody > tr > td.key-field,
.table-container.light > table > tfoot > tr > th.key-field {
    border-left: 0;
}

.table-container.light > table > thead > tr > th.key-field:after,
.table-container.light > table > tbody > tr > td.key-field:after,
.table-container.light > table > tfoot > tr > th.key-field:after {
    box-shadow: var(--flex-shadown-key-column-inverted);
    -webkit-box-shadow: var(--flex-shadown-key-column-inverted);   
}


.table-container.light > table > tfoot > tr > th > div:empty,
.table-container.light > table > tfoot > tr > th > div:empty:after {
    display: none;
}

/* minimal theme */

.table-container.minimal { 
    border: 0;
    border-radius: 0;
}

.table-container.minimal > table > thead > tr > th {
    background: var(--flex-bg-white);
}

.table-container.minimal > table > thead > tr > th:last-child,
.table-container.minimal > table > tbody > tr > td:last-child,
.table-container.minimal > table > tfoot > tr > th:last-child {
    border-right: 0;
}


.table-container.minimal > table > tfoot > tr > th {
    padding-bottom: 1px;
}

.table-container.minimal > table > tfoot > tr > th > div:empty:after {
    bottom: 1px;
}


/* flat theme */

.table-container.flat { 
    border: 0;
    border-radius: 0;
}

.table-container.flat > table > thead > tr > th {
    background: var(--flex-bg-white);
    border-bottom: 1px solid var(--flex-bg-muted);  
    border-right: 0;  
}

.table-container.flat > table > tbody > tr > td {
    border: 0;
}

.table-container.flat > table > tfoot > tr > th {
    padding-bottom: 1px;
}

.table-container.flat > table > tfoot > tr > th > div:empty:after {
    bottom: 1px;
}