:root {
        --table-background                  : white;
        --table-border                      : black;
        --table-row-header                  : black;
        --table-row-stripe-odd              : var(--table-background);
        --table-row-stripe-even             : #eee;
        --table-row-focus                   : darkorange;
        --table-row-active                  : var(--main-hilighted-positive);
        --table-row-highlighted             : Moccasin;
        --table-gridline                    : #bbb;
        --table-gridline-dark               : #b55;
        --table-text                        : var(--main-text-color);
        --table-highlighted-text            : var(--table-text);
        --table-caption-back                : #866;
        --table-caption-text                : white;
    }


    table.data {
        background              : var(--table-background);
        border-collapse         : collapse;
        border                  : 2px solid var(--table-border);
        margin                  : auto;
        color                   : var(--table-text);
    }

    table.data.compact {
        font-size               : 11px;
    }

    table.data td, table.data tr, table.data th {
        padding                 : 7px;
        border                  : 1px solid var(--table-border);
    }

    table.data.compact td, table.data.compact tr, table.data.compact th {
        padding                 : 4px;
        border                  : 1px solid var(--table-border);
    }

    table.data.grid td {
        border-right            : 1px solid var(--table-gridline);
    }

    table.data th {
        border-color            : var(--table-border);
        background              : var(--table-row-header);
    }

    table.data.grid th {
        border-right            : 1px solid var(--table-gridline-dark);
    }

    td.caption, .data caption {
        color                   : var(--table-caption-text);
        background              : var(--table-caption-back);
        font-size               : 14px;
        font-weight             : bold;
        padding                 : 7px;
    }
    .data.grid caption {
        border-top              : 3px solid var(--table-border);
        border-right            : 3px solid var(--table-border);
        border-left             : 3px solid var(--table-border);
    }

    tr.odd td, .data.stripe tr:nth-child(odd) td {
        background              : var(--table-row-stripe-odd);
    }

    tr.even td, .data.stripe tr:nth-child(even) td {
        background              : var(--table-row-stripe-even);
    }

    tr.hilighted_focus td, .hilighted_focus {
        background              : var(--table-row-focus) !important;
        color                   : var(--table-highlighted-text);
    }

    tr.hilighted_active td, .hilighted_active {
        background              : var(--table-row-active) !important;
        color                   : var(--table-highlighted-text);
    }

    tr.hilighted td, .hilighted {
        background              : var(--table-row-highlighted) !important;
        color                   : var(--table-highlighted-text);
    }

    .scrolling {
        overflow-y              : scroll;
        width                   : 80%;
        margin                  : auto;
        border                  : 2px solid var(--table-border);
    }

    .scrolling table.data {
        width                   : 100%;
        border                  : 0px solid var(--table-border);
    }

    /* NON TABLES */

    div.data > * {
        padding                 : 7px;
        border                  : 2px solid var(--table-border);
        background              : var(--table-background);
    }

    .data + .data {
        margin-top: 1em;
    }

    .custom_grid > .data, .custom_grid > .data + .data {
        margin: 0;
    }