:root {
  --table-border: rgba(45, 127, 209, 0.2);
  --table-header-bg: #f2f7fc;
  --table-row-hover: rgba(85, 185, 232, 0.075);
  --table-cell-padding: 11px 12px;
}

:where(.sh-data-table-wrap, .table-scroll, .admin-table-wrapper, .admin-table-scroll, .table-wrap) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.sh-data-table, .data-table, .admin-table, .users-table, .health-technical table, .collaborators table, .drilldown table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

:where(.sh-data-table, .data-table, .admin-table, .users-table, .health-technical table, .collaborators table, .drilldown table) :is(th, td) {
  border: 1px solid var(--table-border);
  padding: var(--table-cell-padding);
  text-align: left;
  vertical-align: top;
}

:where(.sh-data-table, .data-table, .admin-table, .users-table, .health-technical table, .collaborators table, .drilldown table) th {
  background: var(--table-header-bg);
  color: inherit;
  font-weight: 800;
}

:where(.sh-data-table, .data-table, .admin-table, .users-table, .health-technical table, .collaborators table, .drilldown table) tbody tr {
  transition: background-color 120ms ease;
}

:where(.sh-data-table, .data-table, .admin-table, .users-table, .health-technical table, .collaborators table, .drilldown table) tbody tr:hover {
  background: var(--table-row-hover);
}

:where(.sh-data-table, .data-table, .admin-table, .users-table, .health-technical table, .collaborators table, .drilldown table) :is(button, a, input, select):focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}