
/* :root {
  --table-border-color: #d4d4d5;
  --thead-background: #f3f5f6;
  --tbody-tr-odd: #fff;
  --tbody-tr-even: #f5f7f8;
} */

table {
  background-color: var(--table-background-color);
  color: var(--table-color);
  border: 1px solid var(--table-border-color);
  border-spacing: 0;
  border-collapse: separate;
  border-radius: 0.3rem;
  width: 100%;
}

thead tr,
tr.header {
  background-color: var(--thead-background-color);
  color: var(--thead-color);
}

thead tr th {
  border-top: 1px solid var(--table-border-color);
}

thead tr:last-child th {
  border-bottom: 1px solid var(--table-border-color);
}

thead tr:first-child th {
  border-top: 0;
}

tfoot tr,
tr.footer {
  background-color: var(--tfoot-background-color);
  color: var(--tfoot-color);
}

tfoot tr th {
  border-top: 1px solid var(--table-border-color);
}

tfoot tr:last-child th {
  border-bottom: 1px solid var(--table-border-color);
}

tfoot tr:first-child th {
  border-top: 0;
}


th {
  font-weight: bold;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--table-border-color);
}

th a {
  color: #333;
}

th a:hover {
  text-decoration: none;
}

tr:first-child th,
tr:first-child td {
  border-top: none;
}

tfoot tr:first-child td {
  border-top: 1px solid var(--table-border-color);
}

table.alternating tbody tr:nth-child(2n)   {
  background-color: var(--tbody-tr-even-background-color);
  color: var(--tbody-tr-even-color);
}

table.alternating tbody tr:nth-child(2n+1)  {
  background-color: var(--tbody-tr-odd-background-color);
  color: var(--tbody-tr-odd-color);
}

th.center, td.center {
  text-align: center;
}

th.right, td.right {
  text-align: right;
}

th.currency, td.currency,
th.amount, td.amount {
  text-align: right;
  white-space: nowrap;
}

th.number, td.number {
  text-align: center;
}

th.total, td.total {
  font-weight: bold;
}

th.datetime, td.datetime {
  white-space: nowrap;
  text-align: right;
}

th.actions, td.actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
  float: none;
}

tr.hover-highlight:hover {
  background-color: var(--tbody-tr-hover-background-color) !important;
  color: var(--tbody-tr-hover-color) !important;
}

tr.hover-reveal-actions > td.actions .reveal {
  visibility: hidden;
}

tr.hover-reveal-actions:hover > td.actions .reveal {
  visibility: visible;
}

tr.hover-reveal-actions > td.actions .reveal-opacity {
  opacity: 0.1;
}

tr.hover-reveal-actions:hover > td.actions .reveal-opacity {
  opacity: 1.0;
}

tbody tr td {
  vertical-align: top;
}

table.adjusted {
  width: auto;
}

table.borderless {
  border: none;
  background: transparent;

  tr, td, th {
    border: none !important;
  }
}

table.bordered {
  border-collapse: collapse;

  td, th {
    border: 1px solid #ccc;
  }
}

table.row-hover {
  tbody tr:hover {
    background-color: #dedede !important;
  }
}

table tr.top-align {
  vertical-align: top;
}

table.tight {
  tr {
    vertical-align: top;
  }

  td, th {
    padding: 0.3rem 0.6rem;
  }
}

table.right-values {
  td {
    text-align: right;
  }
}

@media(max-width: 48rem) {

  table th.detail-1,
  table td.detail-1 {
    display: none;
  }

}

@media(max-width: 40rem) {

  table th.detail-1,
  table td.detail-1,
  table th.detail-2,
  table td.detail-2 {
    display: none;
  }

  table.name_value_pairs {
    display: block;

    tr, th, td {
      display: block;
    }

    th, td {
      border: none;
      padding: 0;
      margin: 0.5em;
    }

  }


}

@media(max-width: 30rem) {

  table th.detail-1,
  table td.detail-1,
  table th.detail-2,
  table td.detail-2,
  table th.detail-3,
  table td.detail-3 {
    display: none;
  }

}