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

:root {
  --table-text-color: #1f1f1f;
  --component-visualtheme-white: #fff;
  --component-visualtheme-grey: #f5f5f5;
}

@media (min-width: 0px) and (max-width: 427px) {
  :root {
    --table-spacing: 24px 0 0 0;
    --table-heading-font-size: 16px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 12px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 140%;

    --table-footer-font-size: 14px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --bleed-margin: calc(-1 * 16px);
    --bleed-padding: 16px;
    --table-cell-spacing: 24px 16px 24px 0;
    --table-header-footer-cell-spacing: 16px 16px 16px 0;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --table-cell-spacing: 24px 24px 24px 0;
    --table-header-footer-cell-spacing: 16px 24px 16px 0;
  }
}

@media (min-width: 428px) and (max-width: 767px) {
  :root {
    --table-spacing: 24px 0 0 0;
    --table-heading-font-size: 16px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 12px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 125%;

    --table-footer-font-size: 14px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --table-spacing: 72px 0 0 0;
    --table-heading-font-size: 18px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 14px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 140%;

    --table-footer-font-size: 16px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;

    --bleed-margin: calc(-1 * 36px);
    --bleed-padding: 36px;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --table-spacing: 80px 0 0 0;
    --table-heading-font-size: 18px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 14px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 140%;

    --table-footer-font-size: 16px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;

    --bleed-margin: calc(-1 * 40px);
    --bleed-padding: 40px;
  }
}

@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    --table-spacing: 80px 0 0 0;
    --table-heading-font-size: 20px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 14px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 140%;

    --table-footer-font-size: 16px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;

    --bleed-margin: calc(-1 * 154px);
    --bleed-padding: 154px;
  }
}

@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --table-spacing: 80px 0 0 0;
    --table-heading-font-size: 20px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 14px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 140%;

    --table-footer-font-size: 16px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;

    --bleed-margin: calc(-1 * 234px);
    --bleed-padding: 234px;
  }
}

@media (min-width: 1920px) and (max-width: 50000px) {
  :root {
    --table-spacing: 80px 0 0 0;
    --table-heading-font-size: 20px;
    --table-heading-font-weight: 500;
    --table-heading-line-height: 125%;

    --table-cell-font-size: 14px;
    --table-cell-font-weight: 400;
    --table-cell-line-height: 140%;

    --table-footer-font-size: 16px;
    --table-footer-font-weight: 500;
    --table-footer-line-height: 140%;

    --bleed-margin: calc(-1 * 394px);
    --bleed-padding: 394px;
  }
}

.data-table {
  font-family: ABBvoice;
}

.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: var(--bleed-margin);
  padding-inline: var(--bleed-padding);
}

.datatable *,
.datatable *:before,
.datatable *:after {
  box-sizing: inherit;
}

.data-table .links-container {
  display: flex;
  width: 100%;
  margin-top: 40px;
  gap: 16px;
}

@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-direction: column;
  }
}

.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 {
  border-top: 0 none;
  border-bottom: 1px solid #000;
}

.data-table table th {
  border-bottom: 1px solid #dbdbdb;
  color: var(--table-text-color);
  font-size: var(--table-heading-font-size);
  line-height: var(--table-heading-line-height);
  font-weight: var(--table-heading-font-weight);
  font-style: normal;
}

.data-table table td {
  border-top: 1px solid #dbdbdb;
  padding: var(--table-cell-spacing);
  color: var(--table-text-color);
  font-size: var(--table-cell-font-size);
  font-weight: var(--table-cell-font-weight);
  line-height: var(--table-cell-line-height);
  font-style: normal;
}

.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(--table-text-color);

  font-style: normal;
  border-bottom: 0 none;
  border-top: 1px solid #000;

  font-size: var(--table-footer-font-size);
  font-weight: var(--table-footer-font-weight);
  line-height: var(--table-footer-line-height);
}

.data-table .headline + .table,
.data-table .links-container + .table {
  margin: var(--table-spacing);
}

.data-table table th,
.data-table .has-footer table tr:last-child td {
  padding: var(--table-header-footer-cell-spacing);
}

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