/* Breakpoints */
/* stylelint-disable scss/percent-placeholder-pattern */
/* Typography */
.table th {
  font-family: var(--typo-headline-font);
  font-weight: var(--typo-headline-bold-weight);
  font-size: var(--typo-copy-m-size);
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: none;
  font-optical-sizing: auto;
}

.table__wrapper {
  margin: 0 var(--grid-standard-margin);
  color: var(--colors-text-copy);
  overflow-x: scroll;
}
@media screen and (min-width: 769px) {
  .table__wrapper {
    overflow-x: auto;
  }
}
.table__wrapper::-webkit-scrollbar {
  height: var(--spacer-2);
}
.table__wrapper::-webkit-scrollbar-track {
  background: var(--palette-sand-sand-dark);
}
.table__wrapper::-webkit-scrollbar-thumb {
  background: var(--palette-primary-100);
}
.table__content {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.table__content::-webkit-scrollbar {
  height: var(--spacer-2);
  background: var(--palette-hyundai-blue);
}
.table tr {
  border-bottom: 1px solid var(--palette-sand-sand-dark);
}
.table th,
.table td {
  text-align: left;
  padding: var(--spacer-4);
  min-width: 20rem;
}
@media screen and (min-width: 1025px) {
  .table th,
  .table td {
    min-width: 25.4rem;
  }
}
@media screen and (min-width: 1441px) {
  .table th,
  .table td {
    min-width: 34.5rem;
  }
}
.table th + td,
.table th + th,
.table td + td,
.table td + th {
  padding-left: calc(var(--spacer-4) + var(--grid-standard-gutter));
}
.table th {
  font-weight: var(--typo-headline-regular-weight);
}
.table .pip25-is-bg-color-hyundai-light-sand {
  background-color: var(--palette-sand-sand);
}

.table__wrapper::-webkit-scrollbar-track {
  background: var(--palette-grey-100);
}
.table__wrapper::-webkit-scrollbar-thumb {
  background: var(--palette-active-red);
}
.table tr {
  border-bottom: 1px solid var(--palette-grey-90);
}
.table .pip25-is-bg-color-hyundai-light-sand {
  background-color: transparent;
}
.table .pip25-is-bg-color-hyundai-light-sand th {
  color: var(--palette-performance-blue);
  border-bottom: 1px solid var(--palette-performance-blue);
}
.table__content {
  /* Case: NO header row */
}
.table__content:not(:has(.table__content-header)) th.table__sidebar {
  color: var(--palette-performance-blue);
}