@dnb/eufemia/es/components/table/style/dnb-table.css

DNB Eufemia Design System UI Library

/*
* Table component
*
*/
/*
 * Utilities
 */
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-table,
.dnb-table__container {
  --table-border-width: 0.0625rem;
  --table-border: var(--table-border-width) solid var(--table-border-color);
  --table-outline-width: 0.0625rem;
  --table-outline: var(--table-outline-width) solid
    var(--table-outline-color);
  --table-outline-radius: 0.5rem;
}

.dnb-table {
  display: table;
  table-layout: auto;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
  border-spacing: 0;
  border-collapse: collapse;
}
.dnb-table--fixed {
  table-layout: fixed;
  width: auto;
}
.dnb-table--no-wrap {
  white-space: nowrap;
}
.dnb-table > caption {
  position: relative;
  caption-side: bottom;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: var(--font-size-basis);
  background-color: var(--color-white);
  text-align: left;
}
.dnb-table > caption::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -0.0625rem;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  top: calc(var(--table-border-width) * -1);
  right: 0;
  border-top: var(--table-border);
}
.dnb-table > caption:last-child::after {
  right: 0;
}
.dnb-table--outline {
  position: relative;
  clip-path: inset(0 0 -10rem 0 round var(--table-outline-radius) var(--table-outline-radius) 0 0);
  z-index: 1;
}
.dnb-table--outline, .dnb-table--outline::after {
  border-radius: var(--table-outline-radius);
}
.dnb-table--outline::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  z-index: 3;
  border: var(--table-outline);
}
.dnb-table--outline > caption, .dnb-table--outline > caption::after {
  border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
}
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last {
  clip-path: none;
}
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::before,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::after,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::before,
.dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::after {
  border-radius: 0;
}
.dnb-table.dnb-skeleton > * {
  -webkit-text-fill-color: var(--skeleton-color);
}
.dnb-card--no-inner-space .dnb-table {
  --table-outline-color: transparent;
  margin-bottom: 0;
}
.dnb-table > thead > tr > th.dnb-table--sortable, .dnb-table .dnb-table__th.dnb-table--sortable {
  color: var(--color-sea-green);
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
  opacity: 0;
  transition: opacity 200ms ease-out, transform 500ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
    transition-duration: 0.01ms;
  }
}
html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
  transition: none;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
  position: relative;
  z-index: 1;
  align-items: flex-end;
  box-shadow: none;
  line-height: inherit;
  margin: 0;
  padding: 0;
  padding-right: 0.5rem;
  color: inherit;
  font-weight: var(--font-weight-medium);
  text-align: inherit;
  font-size: inherit;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
  right: 0;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
  align-self: flex-end;
  margin-top: auto;
  margin-bottom: 0.25rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__alignment, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__alignment {
  vertical-align: top;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after {
  opacity: 1;
  color: var(--color-sea-green);
}
html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) {
  color: var(--color-sea-green);
}
html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
  opacity: 1;
}
html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
  opacity: 0;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
  cursor: not-allowed;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -1rem;
  right: 0.5rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
  right: -0.5rem;
}
html[data-visual-test] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon, html[data-visual-test] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, :not(.dnb-table--active) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):active .dnb-icon {
  opacity: 1;
}
html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
  opacity: 1;
  color: inherit;
}
html:not([data-visual-test]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after, html:not([data-visual-test]) html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]):not(:active) .dnb-button__text::after {
  visibility: visible;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -0.5rem;
  bottom: 0;
  right: -0.5rem;
  height: inherit;
  border-radius: inherit;
  outline: none;
}
html[data-whatinput=mouse] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  --border-color: var(--focus-ring-color);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: -0.5rem;
  bottom: 0;
  right: -0.5rem;
  height: inherit;
  border-radius: inherit;
  outline: none;
}
html[data-whatinput=touch] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  --border-color: var(--focus-ring-color);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  bottom: -0.5rem;
  left: -1rem;
  right: 0.5rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  right: -0.5rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) {
  color: var(--color-sea-green);
}
.dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
  visibility: hidden;
}
.dnb-table > thead > tr > th.dnb-table--sortable[align=right], .dnb-table .dnb-table__th.dnb-table--sortable[align=right] {
  padding-right: 0.5rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button {
  flex-direction: row-reverse;
}
.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
  padding-right: 0.5rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__icon {
  margin-left: -0.5rem;
}
.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
  padding-right: 0;
}
.dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after {
  right: 0;
}
.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after {
  opacity: 0;
}
.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon {
  opacity: 1;
}
html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
  color: var(--color-sea-green);
  opacity: 1;
}
.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] {
  cursor: not-allowed;
}
.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
  opacity: 0;
}
.dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
  visibility: visible;
}
html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput=keyboard] .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after {
  visibility: hidden;
}
.dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon, .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}
.dnb-table .dnb-table__th .dnb-table__help-button, .dnb-table > thead > tr > th .dnb-table__help-button {
  margin-left: 0.5rem;
}
.dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button {
  white-space: nowrap;
}

/*
* Table component
*
*/
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-table__th__horizontal {
  display: flex;
  align-items: flex-end;
}
.dnb-table__th, .dnb-table thead th {
  background-color: var(--table-th-background-color);
}
.dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
  --table-th-background-color: initial;
}
.dnb-table tbody tr th[scope=row] + td:last-child {
  width: 100%;
}

/*
* Table component
*
*/
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-table--border tbody .dnb-table__td::after,
.dnb-table--border tbody .dnb-table__th::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -0.0625rem;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border: var(--table-border);
  border-bottom: none;
}
.dnb-table--border tbody .dnb-table__td:last-child::after,
.dnb-table--border tbody .dnb-table__th:last-child::after {
  right: 0;
}
.dnb-table--border tbody .dnb-table__td:first-child::after,
.dnb-table--border tbody .dnb-table__th:first-child::after {
  border-left: none;
}
.dnb-table--border tbody .dnb-table__td:last-child::after,
.dnb-table--border tbody .dnb-table__th:last-child::after {
  border-right: none;
}
.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td::after,
.dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th::after {
  border-top: none;
}
.dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
  border-top: var(--table-border);
}
.dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__th::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -0.0625rem;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border-top: var(--table-border);
}
.dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__td:last-child::after,
.dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__th:last-child::after {
  right: 0;
}
.dnb-table {
  /* stylelint-disable */
}
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child,
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::after,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::before,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::after,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::before,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::after,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::before,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::after {
  border-top-left-radius: var(--table-outline-radius);
}
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child,
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
.dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::after,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::before,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
.dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::after,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::before,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::after,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::before,
.dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::after {
  border-top-right-radius: var(--table-outline-radius);
}
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last {
  clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
}
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after,
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child,
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before,
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::before,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child::after,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::before,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child::after {
  border-bottom-left-radius: var(--table-outline-radius);
}
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after,
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child,
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before,
.dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::before,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child::after,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::before,
.dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child::after {
  border-bottom-right-radius: var(--table-outline-radius);
}
.dnb-table {
  /* stylelint-enable */
}
.dnb-table__td--no-spacing,
.dnb-table td.dnb-table__td--no-spacing {
  padding: 0;
}
.dnb-table__td--spacing-horizontal,
.dnb-table td.dnb-table__td--spacing-horizontal {
  padding-top: 0;
  padding-bottom: 0;
}

/*
* Table component
*
*/
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.dnb-table > tbody > tr, .dnb-table .dnb-table__tr, .dnb-table .dnb-table__tr--even {
  background-color: var(--color-black-3);
}
.dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .dnb-table .dnb-table__tr--odd {
  background-color: var(--color-white);
}

/*
* Table component
*
*/
.dnb-table thead th, .dnb-table tbody td, .dnb-table__th, .dnb-table__td {
  position: relative;
  border-spacing: 0;
  word-break: keep-all;
}

/*
* Table component
*
*/
.dnb-table tr.sticky {
  position: sticky;
  z-index: 4;
  transform: translate3d(0, var(--table-offset, 0), 0);
}
.dnb-table tr.sticky.css-position {
  top: var(--table-top, 0);
}
.dnb-table tr.sticky.is-sticky th::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
  clip-path: inset(6px 0 -48px 0);
}

/*
* Table component
*
*/
.dnb-table__container {
  position: relative;
}
.dnb-table__container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  z-index: 3;
  border: var(--table-outline);
}
.dnb-table__container, .dnb-table__container::after {
  border-radius: var(--table-outline-radius);
}
.dnb-table__container, .dnb-table__container__body, .dnb-table__container__head, .dnb-table__container__foot {
  display: flex;
  flex-direction: column;
}
.dnb-table__container__body .dnb-table:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.dnb-table__container__body .dnb-table__size--large .dnb-table__th {
  padding-top: 1.5rem;
}
.dnb-table__container__body .dnb-table {
  position: relative;
}
.dnb-table__container__body .dnb-table::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border-bottom: var(--table-border);
}
.dnb-table__container__body .dnb-table {
  /* stylelint-disable */
}
.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
.dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after, .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
.dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
  border-top: none;
}
.dnb-table__container__body .dnb-table {
  /* stylelint-enable */
}
.dnb-table__container__head {
  padding: 2rem 1rem 0;
}
.dnb-table__container__head--empty {
  padding: 0;
  min-height: 1.5rem;
}
.dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]) {
  margin: 0;
}
.dnb-table__container__foot {
  padding: 1rem;
  padding-bottom: 1.25rem;
}
.dnb-table__container__foot--empty {
  padding: 0;
  min-height: 1rem;
}
.dnb-table__container .dnb-table__scroll-view {
  clip-path: inset(0 round 0 0 var(--table-outline-radius) var(--table-outline-radius));
}
@supports (-webkit-appearance: none) and (not (-moz-appearance: meterbar)) {
  .dnb-table__container::after {
    bottom: calc(var(--table-outline-width) * -1);
  }
  .dnb-table__container:has(.dnb-table__container__foot--empty)::after {
    bottom: 0;
  }
}
.dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
  overflow: visible;
}
.dnb-card .dnb-table__container {
  width: 100%;
}

/*
* Table component
*
*/
.dnb-table {
  --table-accordion-background: var(--color-white);
  --table-accordion-header-background: var(--color-white);
  --table-accordion-border-width: 0.0625rem;
  --table-accordion-border-color: var(--color-black-20);
  --table-accordion-border: var(--table-accordion-border-width) solid
    var(--table-accordion-border-color);
  --table-accordion-icon-color: var(--color-sea-green);
  --table-accordion-icon-color--active: var(--color-emerald-green);
  --table-accordion-icon-color--disabled: var(--color-sea-green-30);
  --table-accordion-outline-color: var(--color-emerald-green);
  --table-accordion-outline-width: var(--focus-ring-width);
  --table-accordion-outline-background--active: var(--color-pistachio);
}
.dnb-table__th.dnb-table__th__button-icon.dnb-table__th {
  padding: 0;
}
.dnb-table__th.dnb-table__th__button-icon,
.dnb-table__th.dnb-table__th__button-icon div {
  width: 3.5rem;
}
.dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon,
.dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon div {
  width: 3rem;
}
.dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon,
.dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon div {
  width: 2.5rem;
}
.dnb-table__th.dnb-table__th__button-icon,
.dnb-table__th.dnb-table__th__button-icon div {
  text-indent: -300vw;
}
.dnb-table__td.dnb-table__td__button-icon.dnb-table__td {
  padding: 0;
}
.dnb-table__td.dnb-table__td__button-icon {
  -webkit-user-select: none;
          user-select: none;
}
.dnb-table__tr--clickable .dnb-table__button {
  display: flex;
  justify-content: center;
}
.dnb-table__tr--clickable .dnb-table__button .dnb-icon {
  color: var(--table-accordion-icon-color);
  transition: transform 500ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
    transition-duration: 0.01ms;
  }
}
.dnb-table__tr--clickable.dnb-table__tr--no-animation .dnb-table__button .dnb-icon, html[data-visual-test] .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
  transition: none !important;
}
.dnb-table__tr--clickable, .dnb-table__tr__accordion-content {
  position: relative;
}
.dnb-table__tr--clickable.dnb-table__tr--expanded, .dnb-table__tr__accordion-content {
  z-index: 3;
}
.dnb-table__tr--clickable:active, html[data-whatinput=keyboard] .dnb-table__tr--clickable:focus, .dnb-table__tr--clickable:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
  z-index: 5;
}
.dnb-table__tr--clickable.dnb-table__tr--expanded .dnb-table__button .dnb-icon {
  transform: rotate(180deg);
}
.dnb-table--border .dnb-table__tr--clickable.dnb-table__tr--expanded td::after {
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) {
  outline: none;
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border: var(--table-accordion-outline-width) solid transparent;
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
  border-left: none;
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:last-of-type)::before {
  border-right: none;
}
html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) td::before {
  border-color: var(--table-accordion-outline-color);
}
html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover:not([disabled]) .dnb-table__td__button-icon .dnb-icon {
  color: var(--table-accordion-icon-color--active);
}
.dnb-table--border tbody .dnb-table__tr--clickable:not(.dnb-table__tr--expanded):not(.dnb-table__tr--last) .dnb-table__td::before {
  bottom: calc(var(--table-border-width) * -1);
}
.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):hover .dnb-table__td {
  background-color: var(--color-white);
}
html[data-whatinput=keyboard] .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td::before {
  border-color: var(--focus-ring-color);
  border-width: var(--focus-ring-width);
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
  left: 0;
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:last-of-type::before {
  right: 0;
}
html:not([data-whatintent=touch]) .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active td::before {
  border-color: var(--table-accordion-outline-color);
  border-width: var(--table-accordion-border-width);
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
  background-color: var(--table-accordion-outline-background--active);
}
.dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td .dnb-table__td__button-icon .dnb-icon {
  color: var(--table-accordion-icon-color--active);
}
.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td {
  background-color: var(--table-accordion-header-background);
}
.dnb-table__tr--clickable.dnb-table__tr--expanded:not(.dnb-table__tr--disabled).dnb-table__tr--hover:not(:active):hover .dnb-table__td::before {
  border: none;
  border-top: var(--table-accordion-border);
}
html:not([data-whatinput=keyboard]) .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) {
  background-color: var(--table-accordion-header-background);
}
html:not([data-whatinput=keyboard]) .dnb-table__tr--clickable.dnb-table__tr.dnb-table__tr--expanded:not(.dnb-table__tr--disabled):not(:active):not(:hover) td::before {
  border: none;
  border-top: var(--table-accordion-border);
}
.dnb-table__tr--clickable.dnb-table__tr--disabled .dnb-table__td__button-icon .dnb-icon {
  color: var(--table-accordion-icon-color--disabled);
}
.dnb-table__tr__accordion-content__inner {
  overflow: hidden;
  will-change: height;
  transition: height 400ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-table__tr__accordion-content__inner {
    transition-duration: 0.01ms;
  }
}
.dnb-table__tr__accordion-content__inner__spacing {
  padding: 1rem;
  transform: translateY(-10px);
  transition: transform 500ms var(--easing-default);
}
@media (prefers-reduced-motion: reduce) {
  .dnb-table__tr__accordion-content__inner__spacing {
    transition-duration: 0.01ms;
  }
}
.dnb-table__tr__accordion-content__inner {
  position: relative;
}
.dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
  transform: translateY(0);
}
html[data-visual-test] .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
  transition: none;
}
.dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
  background-color: var(--color-white);
}
.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -0.0625rem;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border-top: var(--table-accordion-border);
}
.dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td:last-child::after {
  right: 0;
}
.dnb-table__tr__accordion-content--single > td {
  padding: 0 !important;
  width: calc(100% - 3.5rem);
}
.dnb-table__size--medium .dnb-table__tr__accordion-content--single > td {
  width: calc(100% - 3rem);
}
.dnb-table__size--small .dnb-table__tr__accordion-content--single > td {
  width: calc(100% - 2.5rem);
}
.dnb-table__tr__accordion-content--single > td::before {
  content: "";
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: calc(var(--table-accordion-border-width) * -1);
  pointer-events: none;
  border-bottom: var(--table-accordion-border);
}
.dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td::before {
  border-bottom: none;
}
.dnb-table--border .dnb-table__tr__accordion-content--single td::after {
  border-top: none;
}
.dnb-table__tr__accordion-content--single > td.dnb-table__td {
  padding: 0;
}
.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl,
.dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl dt {
  margin: 0;
}
.dnb-table__tr__accordion-content.dnb-table__tr .dnb-table__td {
  background-color: var(--table-accordion-background);
  /**
    * Safari on iOS and macOS has problems on animating when vertical-align is baseline.
    * What happens is that the td is not 0, even the content inside is 0. With vertical top, we omit that.
    * But we do not need baseline in this tr > td, so we reset it.
    */
  vertical-align: top;
}
.dnb-table__tr--clickable:not(.dnb-table__tr--disabled) {
  cursor: pointer;
}
.dnb-table__tr--clickable:has(.dnb-table + .dnb-table__tr__accordion-content--animating) {
  -webkit-user-select: none;
          user-select: none;
}
.dnb-table__td-wrapper {
  display: flex;
}

.dnb-spacing .dnb-table p,
.dnb-spacing .dnb-table ul,
.dnb-spacing .dnb-table ol,
.dnb-spacing .dnb-table dl,
.dnb-spacing .dnb-table pre {
  margin-top: 0;
  margin-bottom: 0;
}