@import url('data-table-reset.css');
@import url('buttons.css');
@import url('headline.css');
@import url('handy-scroll.css');

:root {
  --component-visualtheme-white: var(--aot-ref-white);
  --component-visualtheme-grey: var(--aot-sys-color-background-light-secondary);
}

@media (min-width: 768px) {
  :root {
    --grid-column: 1 / span 9;
  }
}

@media (min-width: 1440px) {
  :root {
    --grid-column: 1 / span 8;
  }
}

@media (min-width: 1920px) {
  :root {
    --gap: 24px;
  }
}

.data-table {
  font-family: var(--aot-sys-typography-font-family);
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  column-gap: var(--grid-column-gap);
}

.datatable:has(.bg-white) {
  background-color: var(--component-visualtheme-white);
}

.datatable:has(.bg-grey) {
  background-color: var(--component-visualtheme-grey);
}

.datatable {
  box-sizing: border-box;
  margin-inline: calc(-1 * var(--aot-sys-layout-bleed));
  padding-inline: var(--aot-sys-layout-bleed);
}

.datatable *,
.datatable *:before,
.datatable *:after {
  box-sizing: inherit;
  grid-column: 1 / -1;
}

.data-table .links-container {
  display: flex;
  width: 100%;
  gap: var(--aot-sys-spacing-component-xx-small);
  grid-column: var(--grid-column, 1/-1);
  padding-right: var(--aot-sys-spacing-component-x-small);
}

@media only screen and (min-width: 768px) and (max-width: 50000px) {
  .data-table .links-container {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .data-table .links-container {
    flex-wrap: wrap;
  }
}

.data-table table {
  table-layout: fixed;
}

@media only screen and (min-width: 0px) and (max-width: 427px) {
  :root {
    /* 136 + 16 */
    --min-col-width: 152px;
  }

  .data-table {
    table:has(tr:first-child > td:nth-child(3)),
    table:has(tr:first-child > th:nth-child(3)) {
      min-width: calc(var(--min-col-width) * 3);
    }

    table:has(tr:first-child > td:nth-child(4)),
    table:has(tr:first-child > th:nth-child(4)) {
      min-width: calc(var(--min-col-width) * 4);
    }

    table:has(tr:first-child > td:nth-child(5)),
    table:has(tr:first-child > th:nth-child(5)) {
      min-width: calc(var(--min-col-width) * 5);
    }
  }
}

@media screen and (min-width: 428px) and (max-width: 767px) {
  :root {
    /* 174 + 16 */
    --min-col-width: 190px;
  }

  .data-table {
    table:has(tr:first-child > td:nth-child(3)),
    table:has(tr:first-child > th:nth-child(3)) {
      min-width: calc(var(--min-col-width) * 3);
    }

    table:has(tr:first-child > td:nth-child(4)),
    table:has(tr:first-child > th:nth-child(4)) {
      min-width: calc(var(--min-col-width) * 4);
    }

    table:has(tr:first-child > td:nth-child(5)),
    table:has(tr:first-child > th:nth-child(5)) {
      min-width: calc(var(--min-col-width) * 5);
    }
  }
}

@media screen and (max-width: 767px) {
  .datatable .data-table .table.scrollable-table {
    margin-right: -16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .datatable .data-table .table.scrollable-table {
    margin-right: -36px;
  }
}

.data-table table tr:first-child th {
  color: var(--aot-sys-color-shades-grey90);
  font-family: var(--aot-sys-typography-font-family);
  font-size: var(--aot-sys-typography-body-large-bold-font-size);
  font-style: normal;
  font-weight: var(--aot-sys-typography-body-x-large-bold-font-weight);
  line-height: var(--aot-sys-typography-body-large-reg-line-height);
  letter-spacing: var(--aot-sys-typography-headline-display-sc-x-small-letter-spacing);

  border-top: 0 none;
  padding: 16px 0;
}

.data-table table tr:first-child {
  border-bottom: var(--aot-sys-borders-small) solid var(--aot-sys-color-primary-black);
}

.data-table table td {
  border-top: var(--aot-ref-border-1) solid var(--aot-ref-black);
  padding: var(--aot-sys-spacing-component-x-small) 0;
  color: var(--aot-sys-color-shades-grey90);
  font-size: var(--aot-sys-typography-body-x-small-reg-font-size);
  font-weight: var(--aot-sys-typography-body-xx-small-reg-font-weight);
  line-height: var(--aot-sys-typography-body-x-small-reg-line-height);
  letter-spacing: var(--aot-sys-typography-body-x-small-reg-letter-spacing);
  font-style: normal;
}

.data-table table tr > *:not(:first-child):not(:last-child),
.data-table .has-footer table tr > *:not(:first-child):not(:last-child) {
  padding-inline: var(--gap, 16px);
}

.data-table table td a {
  color: var(--table-text-color);
  position: relative;
}

.data-table table td a:hover {
  text-decoration: none;
}

.data-table .has-footer table tr:last-child td {
  color: var(--aot-sys-color-shades-grey90);

  font-style: normal;
  border-bottom: 0 none;
  border-top: var(--aot-sys-borders-small) solid var(--aot-sys-color-primary-black);

  font-size: var(--aot-sys-typography-body-large-reg-font-size);
  font-weight: var(--aot-sys-typography-body-large-bold-font-weight);
  line-height: var(--aot-sys-typography-body-large-reg-line-height);
}

.data-table .headline + .table,
.data-table .links-container + .table {
  margin: var(--aot-ref-spacing-80) 0 0 0;
  grid-column: 1/-1;
}

.data-table table th,
.data-table .has-footer table tr:last-child td {
  padding: var(--aot-sys-spacing-component-x-small) 0;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}