/* DataTables 3: use its current controls and Quark2 colors in either appearance. */
.dt-container {
  overflow: visible; padding-bottom: 1rem; color: var(--q2-text);
  --dt-html_background: var(--q2-bg-elev);
  --dt-row_background: var(--q2-bg-elev);
  --dt-input_color: var(--q2-text);
  --dt-input_background: var(--q2-bg);
  --dt-input_border: 1px solid var(--q2-border-strong);
  --dt-paging-button_color: var(--q2-text);
  --dt-paging-button_color-current: var(--q2-text);
  --dt-paging-button_background-current: var(--q2-bg-muted);
  --dt-paging-button_border-current: 1px solid var(--q2-border-strong);
}
.dt-container table.dataTable {
  color: var(--q2-text); background: var(--q2-bg-elev);
  font-family: var(--pico-font-family-sans-serif); font-weight: 400;
}
.dt-container table.dataTable tbody { font-weight: 400; }
.dt-container table.dataTable thead th { font-weight: 600; }
/* Scroll the table, leaving the surrounding form controls' focus rings free. */
.dt-container .dt-layout-table { overflow-x: auto; padding: .25rem; margin-inline: -.25rem; }
.dt-container table.dataTable :is(th, td) { background-color: transparent; color: var(--q2-text); }
.dt-container :is(input, select) { width: auto; display: inline-block; margin: 0; }
.dt-container select { min-width: 5rem; padding-right: 2rem; }
.dt-container :is(.dt-length, .dt-search) { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dt-container label { display: inline; margin: 0; }
div.dt-container .dt-search input[type='search'] {
  padding-block: .5rem; padding-inline: 2.5rem 1.75rem;
  background-position: 1rem center; background-size: 1rem auto;
}
/* Blades treats role=button as a full button; these are only sort arrows. */
.dt-container .dt-column-order[role='button'] {
  margin: 0; padding: 0; border: 0; border-radius: 0; min-width: 0;
  background: transparent; box-shadow: none; color: inherit;
}
.dt-container .dt-paging button { width: auto; margin-bottom: 0; }
.dt-container ul.dtr-details > li { list-style: none; }
.dt-container table.dataTable td.child { white-space: normal; }
.dt-container .dtr-data { overflow-wrap: anywhere; }