/** Colors **/
:root {
    --color-white: rgb(255, 255, 255);
    --color-grey: rgb(187, 187, 187);
    --color-light-gray: rgb(238, 238, 238);
}

.custom-table {
    width: 99%;
    margin-bottom: 20px;
}

.custom-table-topHeader {
    background: #111;
    color: white;
    text-transform: uppercase;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: left;
}

.custom-table-header {
    padding: 10px;
    background: #34495e;
    color: white;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
    overflow: hidden;
}


.custom-table td {
    padding: 10px;
    border: 1px solid #ccc;
}


.custom-table-striped tr:nth-child(2n) td {
    background: #eee;
}

.custom-table-hover tr:hover td {
    background: #ddd;
}

/** CELLS **/

td.c-title, th.c-title { font-weight: bold; }
td.c-actions, th.c-actions,td.c-center, th.c-center { text-align: center;}

/** TABLE-RESET **/

table.table-reset tr:nth-child(2n) { background-color: var(--color-white); }
table.table-reset tr:nth-child(2n+1) { background-color: var(--color-white); }

/**
 * table-striped
 * <h2 class="table-header">TITLE</h2>
 * <table class="table-striped table-left-bordered">
 *  <tr class="row-item"><td>1</td><td>2</td><td>3</td></tr>
 *  <tr class="row-empty"><td colspan="3"></tr>
 *  <tr class="row-item"><td>4</td><td>5</td><td>6</td></tr>
 * </table>
 * <div class="table-footer empty"></div>
 */

table.table { width: 100%; border-collapse: separate; }
table.table tr th, table.table tr td { padding: 0.5em 0.8em; }
table.table tr:first-child th { font-weight: bold; font-size: 1.3em; white-space: nowrap; background: var(--color-grey) }
table.table-striped tr:nth-child(2n) { background-color: var(--color-light-gray); }
table.table-striped tr:nth-child(2n+1) { background-color: var(--color-white); }

table.table-striped tr.row-empty td,
table.table-striped tr.row-empty th {
    background-color: var(--color-white);
    border: none;
}
table.table-striped tr.row-empty td:before,
table.table-striped tr.row-empty th:before {
    content: "\00a0";
    width: 0;
}


.table-th-1r { width: 1rem; }
.table-th-2r { width: 2rem; }
.table-th-3r { width: 3rem; }

table.table-left-bordered { border-left: solid 3px rgb(187, 187, 187); }
table.table-right-bordered { border-right: solid 3px rgb(187, 187, 187); }

.table-header, .table-footer {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    color: rgb(0, 0, 0);
    background-color: var(--color-grey);
    font-weight: bold;
}
.table-header {
    margin-bottom: 0;
    padding: 0.6em;
    font-size: 1.2em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}
.table-footer {
    margin-bottom: 0.5em;
    padding: 0.4em;
    font-size: 1.05em;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
.table-footer.empty:before { content: "\00a0"; }