:root{   
    /* // table varables */
    --row-odd: #e9e9e9;
    --row-even: #f6f6f6;
    --header-text-color: var(--black);
}

.wrapper {
    position:relative;
}

.table {
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: table;
    margin-bottom: 0.8em;
}
.table.header {
    margin: 0;
}

.caption {
    caption-side: top; 
    display: table-caption; 
    text-align: center; 
    background: transparent; 
}

.row {
    display: table-row;
    background: var(--row-even);
}

.row.header:hover {
    background: var(--accent) !important;
}

.row.header:hover .cell {
    color: var(--header-text-color) !important;
}

.row:hover {
    background: var(--light-gray)  !important;
}

.row:hover .cell {
    color: white  !important;
}

.row:nth-of-type(odd) {
    background: var(--row-odd);
}

.row.header {
    font-size: 1.05rem;
    background: var(--accent);
}

.row.header .cell {
    border-bottom: 1px solid var(--accent2);
    text-decoration: none;
    color: var(--header-text-color);

}

.cell {
    padding: 0.3em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    display: table-cell;
    font-size: 1rem;
    color: var(--font-color-darker);
    vertical-align: middle;
}

.cell a {
    text-decoration: none;
    color: var(--font-color-darker);
}

.cell a:hover {
    font-style: oblique;
}

.cell.data {
    padding-right: 0.5em;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}