:root {
  --table-width: 100%;
  --table-vertical-align: top;
  --table-border-color: #dee2e6;
  --table-caption-side: bottom;
  --table-border-collapse: collapse;
  --table-border-width: 1px;
  --table-cell-padding: 0.5rem;
  /* stylelint-disable */
  --table-striped-bg: rgba(0, 0, 0, 0.05);
  --table-striped-color: #212529;
  --table-hover-bg: rgba(0, 0, 0, 0.075);
  /* stylelint-enable */
  --table-hover-color: #212529;
  --table-head-bg: #212529;
  --table-head-color: #fff;
}

/* Material Design Blue Theme */
.table-blue {
  --table-border-color: #bbdefb;
  --table-striped-bg: #e3f2fd;
  --table-striped-color: #0a2248;
  --table-hover-bg: #90caf9;
  --table-hover-color: white;
  --table-head-bg: #2196f3;
}

/* Material Design Green Theme */
.table-green {
  --table-border-color: #c8e6c9;
  --table-striped-bg: #e8f5e9;
  --table-striped-color: #073a0a;
  --table-hover-bg: #a5d6a7;
  --table-hover-color: white;
  --table-head-bg: #4caf50;
}

/* Material Design Purple Theme */
.table-purple {
  --table-border-color: #e1bee7;
  --table-striped-bg: #f3e5f5;
  --table-striped-color: #230646;
  --table-hover-bg: #ce93d8;
  --table-hover-color: white;
  --table-head-bg: #9c27b0;
}

/* Material Design Orange Theme */
.table-orange {
  --table-border-color: #ffe0b2;
  --table-striped-bg: #fff3e0;
  --table-striped-color: #4a2500;
  --table-hover-bg: #ffcc80;
  --table-hover-color: white;
  --table-head-bg: #ff9800;
}

/* Material Design Gray Theme */
.table-gray {
  --table-border-color: #e0e0e0;
  --table-striped-bg: #f5f5f5;
  --table-striped-color: #1a1a1a;
  --table-hover-bg: #bdbdbd;
  --table-hover-color: white;
  --table-head-bg: #9e9e9e;
}

/* Material Design Red Theme */
.table-red {
  --table-border-color: #ffcdd2;
  --table-striped-bg: #ffebee;
  --table-striped-color: #4a0a0a;
  --table-hover-bg: #ef9a9a;
  --table-hover-color: white;
  --table-head-bg: #f44336;
}

/* Material Design Yellow Theme */
.table-yellow {
  --table-border-color: #fff9c4;
  --table-striped-bg: #fffde7;
  --table-striped-color: #4a4300;
  --table-hover-bg: #fff59d;
  --table-hover-color: black;
  --table-head-bg: #ffeb3b;
  --table-head-color: black;
}

/* Material Design Silver Theme */
.table-silver {
  --table-border-color: #dcdcdc;
  --table-striped-bg: #f8f8f8;
  --table-striped-color: #1a1a1a;
  --table-hover-bg: #c0c0c0;
  --table-hover-color: white;
  --table-head-bg: #b0b0b0;
}

/* Material Design Brown Theme */
.table-brown {
  --table-border-color: #d7ccc8;
  --table-striped-bg: #efebe9;
  --table-striped-color: #2d1a13;
  --table-hover-bg: #a1887f;
  --table-hover-color: white;
  --table-head-bg: #795548;
}

/* Material Design Gold Theme */
.table-gold {
  --table-border-color: #ffecb3;
  --table-striped-bg: #fff8e1;
  --table-striped-color: #4a3a00;
  --table-hover-bg: #ffd54f;
  --table-hover-color: black;
  --table-head-bg: #ffc107;
}

/* Material Design Black Theme */
.table-black {
  --table-border-color: #9e9e9e;
  --table-striped-bg: #e0e0e0;
  --table-striped-color: #000;
  --table-hover-bg: #424242;
  --table-hover-color: white;
  --table-head-bg: #000;
}

/* Material Design Olive Theme */
.table-olive {
  --table-border-color: #e6ee9c;
  --table-striped-bg: #f9fbe7;
  --table-striped-color: #242700;
  --table-hover-bg: #c0ca33;
  --table-hover-color: black;
  --table-head-bg: #827717;
}

/* Material Design Pink Theme */
.table-pink {
  --table-border-color: #f8bbd0;
  --table-striped-bg: #fce4ec;
  --table-striped-color: #3a0b12;
  --table-hover-bg: #f06292;
  --table-hover-color: white;
  --table-head-bg: #e91e63;
}

/* Material Design Cyan Theme */
.table-cyan {
  --table-border-color: #b2ebf2;
  --table-striped-bg: #e0f7fa;
  --table-striped-color: #00363b;
  --table-hover-bg: #4dd0e1;
  --table-hover-color: white;
  --table-head-bg: #00bcd4;
}

/* Base styles */
.table-ultimate {
  display: block;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  /* stylelint-disable */
  -ms-overflow-style: -ms-auto-hiding-scrollbar;
  /* stylelint-enable */
}

.table-ultimate table {
  width: var(--table-width);
  caption-side: var(--table-caption-side);
  vertical-align: var(--table-vertical-align);
  border-collapse: var(--table-border-collapse);
  border-color: var(--table-border-color);
}

.table-ultimate thead {
  vertical-align: bottom;
}

.table-ultimate tbody,
.table-ultimate td,
.table-ultimate tfoot,
.table-ultimate th,
.table-ultimate thead,
.table-ultimate tr {
  border-width: 0;
  border-style: solid;
  border-color: inherit;
}

.table-ultimate table > :not(caption) > * > * {
  padding: var(--table-cell-padding);
  border-bottom-width: var(--table-border-width);
}

.table-ultimate th {
  text-align: inherit;
  /* stylelint-disable */
  text-align: -webkit-match-parent;
  /* stylelint-enable */
}

/* Variants */
.table-ultimate .striped-odd > tbody > tr:nth-of-type(odd) {
  color: var(--table-striped-color);
  background-color: var(--table-striped-bg);
}

.table-ultimate .striped-even > tbody > tr:nth-of-type(even) {
  color: var(--table-striped-color);
  background-color: var(--table-striped-bg);
}

.table-ultimate .filled-head > thead > * {
  color: var(--table-head-color);
  background-color: var(--table-head-bg);
}

.table-ultimate .row-hover > tbody > tr:hover {
  color: var(--table-hover-color);
  background-color: var(--table-hover-bg);
}

.table-ultimate .side-filled > tbody > tr > td:first-child {
  color: var(--table-head-color);
  background-color: var(--table-head-bg);
}