/* Responsive Tables by Drew Dyksterhouse (sapientPearwood): https://plnkr.co/edit/1Q5VFj; who was inspired by Chris Coyier: https://css-tricks.com/responsive-data-tables/ */

.responsive-header {
  display: none;
}

/*Mobile*/

.responsive-table.mobile,
.mobile thead,
.mobile tbody,
.mobile th,
.mobile td,
.mobile tr {
  display: block;
}

.mobile thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.mobile thead {
  background: transparent;
  border: 0;
  display: none;
}

.mobile tr {
  border-width: 3px;
  border-style: groove;
  border-color: var(--divider)
  text-align: right !important;
}

.mobile td {
  border: none;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: var(--divider);
  min-height: 1em;
  height: fit-content;
  font-size: 1em;
  position: relative;
  text-align: right;
  word-wrap: break-word;
}

.mobile .responsive-header {
  color: var(--body-text) !important;
  font-family: var(--header-fonts);
  font-variation-settings: var(--header-variations);
  font-weight: 700;
  display: inline;
  float: left;
  padding: 0px !important;
  padding-left: 5px !important;
  font-size: 1.1em;
  top: 3px;
  height: 1rem;
  font-style: normal;
  border: none;
}

.mobile td:before {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 45%;
  padding-right: 10px;
  white-space: nowrap;
}

.mobile td:nth-child(6) {  /* This affects the title column, despite all evidence to the contrary */
  font-style: italic !important;
  font-weight: 450; /* Text weight, according to IBM Plex Sans */
  font-size: 1em;
}