* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/**
 * @prop --tct-data-table-width?: (<length-percentage>) Controls the optional explicit width of the data table.
 * @prop --tct-data-table-layout: (<custom-ident>) Controls the table-layout algorithm of the data table.
 * @prop --tct-data-table-background: (<color>) Controls the background color of the data table.
 * @prop --tct-data-table-backdrop-filter?: (*) Controls the optional backdrop-filter applied to the data table.
 * @prop --tct-data-table-shadow: (*) Controls the box shadow of the data table when shadowed.
 * @prop --tct-data-table-cell-padding: (<length-percentage>+) Controls the inner padding of data table cells in the default density.
 * @prop --tct-data-table-cell-padding-compact: (<length-percentage>+) Controls the inner padding of data table cells when density is compact.
 * @prop --tct-data-table-cell-padding-comfortable: (<length-percentage>+) Controls the inner padding of data table cells when density is comfortable.
 * @prop --tct-data-table-cell-font-size?: (<length-percentage>) Controls the optional font size of data table cell content.
 * @prop --tct-data-table-caption-side: (<custom-ident>) Controls the caption-side of the data table caption.
 * @prop --tct-data-table-caption-padding: (<length-percentage>+) Controls the inner padding of the data table caption.
 * @prop --tct-data-table-caption-text-align: (<custom-ident>) Controls the text alignment of the data table caption.
 * @prop --tct-data-table-caption-font-size?: (<length-percentage>) Controls the optional font size of the data table caption.
 * @prop --tct-data-table-caption-font-weight: (<number>) Controls the font weight of the data table caption.
 * @prop --tct-data-table-caption-color?: (<color>) Controls the optional text color of the data table caption.
 * @prop --tct-data-table-header-background?: (<color>) Controls the optional background color of the data table header row.
 * @prop --tct-data-table-header-border-color: (<color>) Controls the border color beneath the data table header row.
 * @prop --tct-data-table-header-border-style: (<custom-ident>) Controls the border style beneath the data table header row.
 * @prop --tct-data-table-header-border-width: (<length>+) Controls the border width beneath the data table header row.
 * @prop --tct-data-table-header-content-gap: (<length-percentage>) Controls the gap between header label and sort indicator.
 * @prop --tct-data-table-header-font-size: (<length-percentage>) Controls the font size of data table header cells.
 * @prop --tct-data-table-header-font-weight: (<number>) Controls the font weight of data table header cells.
 * @prop --tct-data-table-header-sortable-icon-size: (<length>) Controls the size of the sort-indicator icon in sortable headers.
 * @prop --tct-data-table-action-icon-size: (<length>) Controls the size of expandable-row and dropdown action icons.
 * @prop --tct-data-table-header-sorted-font-weight: (<number>) Controls the font weight applied to a sorted header column.
 * @prop --tct-data-table-sticky-header-background: (<color>) Controls the background color of the data table header when sticky.
 * @prop --tct-data-table-sticky-header-top?: (<length-percentage>) Controls the optional top offset of the sticky header.
 * @prop --tct-data-table-row-border-color: (<color>) Controls the border color between data table rows.
 * @prop --tct-data-table-row-border-style: (<custom-ident>) Controls the border style between data table rows.
 * @prop --tct-data-table-row-border-width: (<length>+) Controls the border width between data table rows.
 * @prop --tct-data-table-row-even-background: (<color>) Controls the background color of even-numbered rows when striped.
 * @prop --tct-data-table-row-odd-background?: (<color>) Controls the optional background color of odd-numbered rows when striped.
 * @prop --tct-data-table-column-border-color: (<color>) Controls the border color between data table columns when bordered.
 * @prop --tct-data-table-column-border-style: (<custom-ident>) Controls the border style between data table columns when bordered.
 * @prop --tct-data-table-column-border-width: (<length>+) Controls the border width between data table columns when bordered.
 * @prop --tct-data-table-clickable-row-hover-background: (<color>) Controls the background color of clickable rows on hover.
 * @prop --tct-data-table-selected-row-background: (<color>) Controls the background color of selected rows.
 * @prop --tct-data-table-expandable-row-hover-background: (<color>) Controls the background color of expandable rows on hover.
 * @prop --tct-data-table-expandable-row-even-hover-background: (<color>) Controls the background color of even-numbered expandable rows on hover.
 * @prop --tct-data-table-expandable-row-odd-hover-background: (<color>) Controls the background color of odd-numbered expandable rows on hover.
 * @prop --tct-data-table-expanded-row-background: (<color>) Controls the background color of an expanded row's content area.
 * @prop --tct-data-table-expanded-row-even-background: (<color>) Controls the background color of an even-numbered expanded row's content area.
 * @prop --tct-data-table-expanded-row-odd-background?: (<color>) Controls the optional background color of an odd-numbered expanded row's content area.
 * @prop --tct-data-table-loading-row-background: (<color>) Controls the background color of the loading and empty-state rows.
 * @prop --tct-data-table-select-column-width: (<length>) Controls the width of the select checkbox column.
 * @prop --tct-data-table-dropdown-column-width: (<length>) Controls the width of the row-actions dropdown column.
 * @prop --tct-data-table-dropdown-column-padding: (<length-percentage>+) Controls the inner padding of the row-actions dropdown column cells.
 * @prop --tct-data-table-expandable-row-control-column-width: (<length>) Controls the width of the expandable-row toggle column.
 * @prop --tct-data-table-expandable-row-control-column-padding: (<length-percentage>+) Controls the inner padding of the expandable-row toggle column cells.
 * @prop --tct-data-table-clickable-column-padding: (<length-percentage>+) Controls the inner padding of clickable-row toggle column cells.
 * @prop --tct-data-table-status-column-width: (<length>) Controls the width of the row status icon column. Default: 36px.
 * @prop --tct-data-table-status-icon-size: (<length>) Controls the size of the status icon within the status column. Default: 16px.
 * @prop --tct-data-table-row-status-border-width: (<length>) Controls the width of the row status accent bar. Default: 5px.
 * @prop --tct-data-table-row-status-border-radius: (*) Controls the border-radius of the row status accent bar.
 * @prop --tct-data-table-row-status-border-info-color: (<color>) Controls the color of the 'info' row status accent bar.
 * @prop --tct-data-table-row-status-border-alert-color: (<color>) Controls the color of the 'alert' row status accent bar.
 * @prop --tct-data-table-row-status-border-error-color: (<color>) Controls the color of the 'error' row status accent bar.
 * @prop --tct-data-table-row-status-border-warning-color: (<color>) Controls the color of the 'warning' row status accent bar.
 * @prop --tct-data-table-row-status-border-success-color: (<color>) Controls the color of the 'success' row status accent bar.
 */
:host {
  display: block;
}

.container {
  --comp-cell-padding: var(--tct-data-table-cell-padding, var(--tct-table-cell-padding, var(--app-scale-3x, 15px)));
  --comp-select-column-width: var(--tct-data-table-select-column-width, var(--tct-table-select-column-width, var(--tct-checkbox-size, 20px)));
  --comp-dropdown-column-width: var(--tct-data-table-dropdown-column-width, var(--tct-table-dropdown-column-width, var(--tct-btn-icon-width, 44px)));
  --comp-expandable-row-control-column-width: var(--tct-data-table-expandable-row-control-column-width, var(--tct-table-expandable-row-control-column-width, var(--tct-btn-icon-width, 44px)));
  overflow: auto;
  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));
  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
  scrollbar-width: thin;
  scrollbar-color: var(--comp-scrollbar-color) transparent;
}
.container::-webkit-scrollbar {
  width: var(--comp-scrollbar-size);
  height: var(--comp-scrollbar-size);
  margin: 5px;
}
.container::-webkit-scrollbar-thumb {
  background: var(--comp-scrollbar-color);
  border-radius: var(--comp-scrollbar-border-radius);
}
.container::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--comp-scrollbar-border-radius);
}
:host([shadowed]:not([shadowed=false])) .container {
  box-shadow: var(--tct-data-table-shadow, var(--tct-table-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14))));
}
:host([density=compact]) .container {
  --comp-cell-padding: var(--tct-data-table-cell-padding-compact, var(--tct-table-cell-padding-compact, var(--app-scale-1x, 5px)));
}
:host([density=comfortable]) .container {
  --comp-cell-padding: var(--tct-data-table-cell-padding-comfortable, var(--tct-table-cell-padding-comfortable, var(--app-scale-5x, 25px)));
}
:host([sticky]:not([sticky=false])) .container {
  overflow: unset;
}

table {
  table-layout: var(--tct-data-table-layout, var(--tct-table-layout, auto));
  border-collapse: collapse;
  border-spacing: 0;
  width: var(--tct-data-table-width, var(--tct-table-width));
  min-width: 100%;
  background: var(--tct-data-table-background, var(--tct-table-background, var(--t-base, #ffffff)));
  backdrop-filter: var(--tct-data-table-backdrop-filter, none);
  caption-side: var(--tct-data-table-caption-side, var(--tct-table-caption-side, bottom));
}

thead {
  border-width: var(--tct-data-table-header-border-width, var(--tct-table-header-border-width, 0 0 2px 0));
  border-style: var(--tct-data-table-header-border-style, var(--tct-table-header-border-style, solid));
  border-color: var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));
  background: var(--tct-data-table-header-background, var(--tct-table-header-background));
}
:host([sticky]:not([sticky=false])) thead {
  position: sticky;
  top: var(--tct-data-table-sticky-header-top, 0px);
  background: var(--tct-data-table-sticky-header-background, var(--tct-table-background, var(--t-base, #ffffff)));
}

col.status-column {
  width: var(--tct-data-table-status-column-width, 36px);
}
col.select-column {
  width: var(--comp-select-column-width);
}
col.expandable-row-control-column {
  width: var(--comp-expandable-row-control-column-width);
}
col.dropdown-column {
  width: var(--comp-dropdown-column-width);
}
:host(:is([bordered=vertical], [bordered=grid])) col {
  border-width: var(--tct-data-table-column-border-width, 0 1px 0 0);
  border-style: var(--tct-data-table-column-border-style, solid);
  border-color: var(--tct-data-table-column-border-color, var(--t-gray-9, #999999));
}
:host(:is([bordered=vertical], [bordered=grid])) col:last-child {
  border: none;
}

td,
th {
  padding: var(--comp-cell-padding);
  text-align: start;
  vertical-align: middle;
}
td.status-column + :is(td, th),
th.status-column + :is(td, th) {
  padding-left: 0;
}
td.align-end,
th.align-end {
  text-align: end;
}
td.align-center,
th.align-center {
  text-align: center;
}
td.vertical-align-top,
th.vertical-align-top {
  vertical-align: top;
}
td.vertical-align-bottom,
th.vertical-align-bottom {
  vertical-align: bottom;
}

th .header-content {
  font-weight: var(--tct-data-table-header-font-weight, var(--tct-table-header-font-weight, 600));
  font-size: var(--tct-data-table-header-font-size, var(--app-font-size, var(--const-px-14, 14px)));
}
th.sorted .header-content {
  font-weight: var(--tct-data-table-header-sorted-font-weight, var(--tct-table-header-sorted-font-weight, 600));
}
th .sorted-indicator {
  --comp-header-sortable-icon-size: var(--tct-data-table-header-sortable-icon-size, var(--tct-table-header-sortable-icon-size, var(--app-scale-3x, 15px)));
  --tct-icon-stroke-width: 2;
  width: var(--comp-header-sortable-icon-size);
  height: var(--comp-header-sortable-icon-size);
}
th .sorted-indicator.direction-ASC {
  transform: rotate(180deg);
}
th q2-btn .header-content {
  display: flex;
  align-items: center;
  gap: var(--tct-data-table-header-content-gap, var(--tct-table-header-content-gap, var(--app-scale-2x, 10px)));
}

tr {
  position: relative;
}
tr.expandable, tr.clickable {
  cursor: pointer;
}
tr.expandable:focus, tr.clickable:focus {
  outline: none;
  box-shadow: none;
}
tr.expandable {
  --tct-btn-icon-hover-background: transparent;
}
tr.expandable:hover {
  background: var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2));
}
tr.striped-even {
  background: var(--tct-data-table-row-even-background, var(--t-gray-14, #f2f2f2));
}
tr.striped-even.expanded {
  background: var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, #f2f2f2)));
}
tr.striped-even.expandable:hover {
  background: var(--tct-data-table-expandable-row-even-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)));
}
tr.striped-odd {
  background: var(--tct-data-table-row-odd-background, transparent);
}
tr.striped-odd.expanded {
  background: var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)));
}
tr.striped-odd.expandable:hover {
  background: var(--tct-data-table-expandable-row-odd-hover-background, var(--tct-data-table-expandable-row-hover-background, var(--t-gray-14, #f2f2f2)));
}
tr.clickable:hover {
  background: var(--tct-data-table-clickable-row-hover-background, var(--tct-table-clickable-row-hover-background, var(--t-gray-14, #f2f2f2)));
}
tr.selected {
  background: var(--tct-data-table-selected-row-background, var(--tct-table-selected-row-background, var(--t-gray-14, #f2f2f2)));
}
tr.expanded {
  background: var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)));
}
tr.expanded .toggle-expandable-row {
  transform: rotate(180deg);
}
:host(:is([bordered], [bordered=horizontal], [bordered=grid]):not([bordered=vertical], [bordered=false])) tbody tr {
  border-width: var(--tct-data-table-row-border-width, var(--tct-table-row-border-width, 0 0 1px 0));
  border-style: var(--tct-data-table-row-border-style, var(--tct-table-row-border-style, solid));
  border-color: var(--tct-data-table-row-border-color, var(--tct-table-row-border-color, var(--t-gray-9, #999999)));
}
tr.loading-row {
  background: var(--tct-data-table-loading-row-background, var(--tct-table-loading-row-background, var(--t-base, #ffffff)));
}
tr.loading-row td {
  text-align: center;
}
tr.loading-row q2-loading {
  font-size: 4em;
}
tr.empty-state {
  background: var(--tct-data-table-loading-row-background, var(--t-base, #ffffff));
}
tr.empty-state td {
  text-align: center;
}
tr.empty-state .empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--app-scale-10x, 50px);
  padding-bottom: var(--app-scale-10x, 50px);
  gap: var(--app-scale-4x, 20px);
  --tct-icon-size: var(--app-scale-6x, 30px);
}
tr:is(.status, .expanded.status, .expandable-row.status) td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--tct-data-table-row-status-border-width, var(--app-scale-1x, 5px));
  border-radius: var(--tct-data-table-row-status-border-radius, var(--app-border-radius-5, 24px));
}
tr.status td:first-child::before {
  top: var(--tct-data-table-row-status-border-top, var(--app-scale-1x, 5px));
  bottom: var(--tct-data-table-row-status-border-bottom, var(--app-scale-1x, 5px));
}
tr.expanded.status td:first-child::before {
  bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
tr.expandable-row.status td:first-child::before {
  top: -1px;
  bottom: var(--tct-data-table-row-status-border-bottom, var(--app-scale-1x, 5px));
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
tr.status-info td:first-child::before {
  background: var(--tct-data-table-row-status-border-info-color, var(--const-stoplight-info, #0077cc));
}
tr.status-alert td:first-child::before {
  background: var(--tct-data-table-row-status-border-alert-color, var(--const-stoplight-alert, #cc0000));
}
tr.status-error td:first-child::before {
  background: var(--tct-data-table-row-status-border-error-color, var(--const-stoplight-alert, #cc0000));
}
tr.status-warning td:first-child::before {
  background: var(--tct-data-table-row-status-border-warning-color, var(--const-stoplight-warning, #cc7700));
}
tr.status-success td:first-child::before {
  background: var(--tct-data-table-row-status-border-success-color, var(--const-stoplight-success, #007700));
}
tr.expandable-row {
  background: var(--tct-data-table-expanded-row-background, var(--tct-table-expanded-row-background, var(--t-gray-14, #f2f2f2)));
}
.striped-odd + tr.expandable-row {
  background: var(--tct-data-table-expanded-row-odd-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)));
}
.striped-even + tr.expandable-row {
  background: var(--tct-data-table-expanded-row-even-background, var(--tct-data-table-expanded-row-background, var(--t-gray-14, transparent)));
}

td {
  font-size: var(--tct-data-table-cell-font-size, inherit);
}
td.status-column {
  position: relative;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  line-height: 0;
}
td.status-column q2-icon {
  --tct-icon-size: var(--tct-data-table-status-icon-size, 18px);
}
td.clamped div {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--comp-line-clamp-count, 1);
  -webkit-box-orient: vertical;
}
td.expandable-row-control-column {
  --tct-icon-size: var(--tct-data-table-action-icon-size, var(--const-px-18, 18px));
  --tct-btn-icon-hover-bg: transparent;
  padding: var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));
  text-align: center;
}
td.dropdown-column {
  --tct-icon-size: var(--tct-data-table-action-icon-size, var(--const-px-18, 18px));
  padding: var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));
  text-align: center;
}
td.click-column:not(.sr) {
  padding: var(--tct-data-table-clickable-column-padding, var(--tct-table-clickable-column-padding, 0 5px));
  text-align: center;
}

caption {
  padding: var(--tct-data-table-caption-padding, var(--tct-table-caption-padding, var(--app-scale-2x, 10px)));
  font-size: var(--tct-data-table-caption-font-size, var(--tct-table-caption-font-size, inherit));
  font-weight: var(--tct-data-table-caption-font-weight, var(--tct-table-caption-font-weight, 600));
  text-align: var(--tct-data-table-caption-text-align, var(--tct-table-caption-text-align, center));
  color: var(--tct-data-table-caption-color, var(--tct-table-caption-color, inherit));
}

q2-checkbox {
  padding: 0;
}

.tag-table {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: var(--app-scale-2x);
  column-gap: var(--app-scale-2x);
}
.tag-table q2-tag {
  --tct-tag-font-size: var(--app-font-size, var(--const-px-14, 14px));
  --tct-tag-padding-inline: var(--app-scale-2x, 10px);
  --tct-tag-height: var(--app-scale-4x, 20px);
  --tct-tag-margin: 0;
}