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

DNB Eufemia Design System UI Library

/*
* Table component
*
*/
/*
 * Utilities
 */
/*
* Button mixins
*
*/
.eufemia-scope--11_3_0 .dnb-table {
  --table-th-background-color: var(--token-color-background-neutral);
  --table-highlight-background: var(--token-color-decorative-first-muted);
  --table-th-highlight-border: var(--token-color-decorative-first-subtle);
  display: table;
  table-layout: auto;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0.5rem;
  border-spacing: 0;
  border-collapse: collapse;
}
.eufemia-scope--11_3_0 .dnb-table--fixed {
  table-layout: fixed;
  width: auto;
}
.eufemia-scope--11_3_0 .dnb-table--no-wrap {
  white-space: nowrap;
}
.eufemia-scope--11_3_0 .dnb-table > caption {
  position: relative;
  caption-side: bottom;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: var(--font-size-basis);
  background-color: var(--token-color-background-neutral);
  text-align: left;
}
.eufemia-scope--11_3_0 .dnb-table > caption::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -0.0625rem;
  z-index: 1;
  pointer-events: none;
  top: calc(var(--table-border-width) * -1);
  right: 0;
  border-top: var(--table-border);
}
.eufemia-scope--11_3_0 .dnb-table > caption:last-child::after {
  right: 0;
}
.eufemia-scope--11_3_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;
}
.eufemia-scope--11_3_0 .dnb-table--outline, .eufemia-scope--11_3_0 .dnb-table--outline::after {
  border-radius: var(--table-outline-radius);
}
.eufemia-scope--11_3_0 .dnb-table--outline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  z-index: 3;
  border: var(--table-outline);
}
.eufemia-scope--11_3_0 .dnb-table--outline > caption, .eufemia-scope--11_3_0 .dnb-table--outline > caption::after {
  border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
}
.eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
.eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last {
  clip-path: none;
}
.eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::before, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__th::after, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td, .eufemia-scope--11_3_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr--clickable.dnb-table__tr--last .dnb-table__td::before, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table.dnb-skeleton > * {
  -webkit-text-fill-color: var(--skeleton-color);
}
.eufemia-scope--11_3_0 .dnb-card--no-inner-space .dnb-table {
  --table-outline-radius: var(--rounded-corner, var(--token-radius-md));
  --table-outline-color: transparent;
  margin-bottom: 0;
}
.eufemia-scope--11_3_0 .dnb-card .dnb-table {
  --table-outline-radius: var(--rounded-corner, var(--token-radius-md));
}
.eufemia-scope--11_3_0 .dnb-spacing .dnb-table p,
.eufemia-scope--11_3_0 .dnb-spacing .dnb-table ul,
.eufemia-scope--11_3_0 .dnb-spacing .dnb-table ol,
.eufemia-scope--11_3_0 .dnb-spacing .dnb-table dl,
.eufemia-scope--11_3_0 .dnb-spacing .dnb-table pre {
  margin-top: 0;
  margin-bottom: 0;
}
.eufemia-scope--11_3_0 .dnb-table {
  /* stylelint-disable-next-line no-descending-specificity */
}
.eufemia-scope--11_3_0 .dnb-table, .eufemia-scope--11_3_0 .dnb-table__container {
  --table-border-color: var(--token-color-stroke-neutral-subtle);
  --table-outline-color: var(--token-color-stroke-neutral-subtle);
  --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: var(--token-radius-md);
}
html[data-visual-test] .eufemia-scope--11_3_0 .dnb-table, html[data-visual-test] .eufemia-scope--11_3_0 .dnb-table__container {
  --table-border-color: blue;
  --table-outline-color: red;
  --table-accordion-border-color: green;
  --table-th-highlight-border: magenta;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable {
  color: var(--token-color-text-action);
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .eufemia-scope--11_3_0 .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) {
  .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
    transition-duration: 0.01ms;
  }
}
html[data-visual-test] .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, html[data-visual-test] .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
  transition: none;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .eufemia-scope--11_3_0 .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;
  font-weight: var(--font-weight-medium);
  text-align: inherit;
  font-size: inherit;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
  right: 0;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__alignment, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__alignment {
  vertical-align: top;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after {
  opacity: 1;
  color: var(--token-color-text-action);
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
  opacity: 0;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--11_3_0 .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] .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--11_3_0 :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] .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--11_3_0 :not(.dnb-table--active) .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]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .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] .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--11_3_0 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] .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=mouse] .eufemia-scope--11_3_0 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(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .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] .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--11_3_0 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] .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput=touch] .eufemia-scope--11_3_0 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(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
  --border-color: currentcolor;
  --border-width: 0.125rem;
  right: -0.5rem;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
  visibility: hidden;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right], .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] {
  padding-right: 0.5rem;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button {
  flex-direction: row-reverse;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_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__icon, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_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, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_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, .eufemia-scope--11_3_0 .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;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after {
  opacity: 0;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon {
  opacity: 1;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .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]) .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
  color: var(--token-color-text-action);
  opacity: 1;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] {
  cursor: not-allowed;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after {
  opacity: 0;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after, .eufemia-scope--11_3_0 .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] .eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput=keyboard] .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after {
  visibility: hidden;
}
.eufemia-scope--11_3_0 .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon, .eufemia-scope--11_3_0 .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}
.eufemia-scope--11_3_0 .dnb-table .dnb-table__th .dnb-table__help-button, .eufemia-scope--11_3_0 .dnb-table > thead > tr > th .dnb-table__help-button {
  margin-left: 0.5rem;
}
.eufemia-scope--11_3_0 .dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button {
  white-space: nowrap;
}

/*
* Table component
*
*/
.eufemia-scope--11_3_0 .dnb-table__th__horizontal {
  display: flex;
  align-items: flex-end;
}

.eufemia-scope--11_3_0 .dnb-table__th, .eufemia-scope--11_3_0 .dnb-table thead th {
  background-color: var(--table-th-background-color);
}

.eufemia-scope--11_3_0 .dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
  --table-th-background-color: initial;
}

.eufemia-scope--11_3_0 .dnb-table tbody tr th[scope=row] + td:last-child {
  width: 100%;
}

.eufemia-scope--11_3_0 .dnb-table__th--highlight {
  --table-th-background-color: var(--table-highlight-background);
}

.eufemia-scope--11_3_0 .dnb-table--border .dnb-table__th--highlight + .dnb-table__th--highlight::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  right: -0.0625rem;
  z-index: 1;
  pointer-events: none;
  border-left: var(--table-border-width) solid var(--table-th-highlight-border);
}

.eufemia-scope--11_3_0 .dnb-table--border .dnb-table__th--highlight + .dnb-table__th--highlight:last-child::after {
  right: 0;
}

/*
 * Utilities
 */
/*
* Table component
*
*/
.eufemia-scope--11_3_0 .dnb-table__td {
  position: relative;
  background-color: var(--table-td-background);
}

.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__td::after,
.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__th::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  right: -0.0625rem;
  z-index: 1;
  pointer-events: none;
  border-left: var(--table-border-left, var(--table-border));
  border-right: var(--table-border-right, var(--table-border));
  border-top: var(--table-border-top, var(--table-border));
  border-bottom: var(--table-border-bottom, none);
}

.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__td:last-child::after,
.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__th:last-child::after {
  right: 0;
}

.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__td:first-child::after,
.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__th:first-child::after {
  border-left: none;
}

.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__td:last-child::after,
.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__th:last-child::after {
  border-right: none;
}

.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--11_3_0 .dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th::after {
  border-top: none;
}

.eufemia-scope--11_3_0 .dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--11_3_0 .dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
  border-top: var(--table-border-top, var(--table-border));
}

.eufemia-scope--11_3_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__td::after,
.eufemia-scope--11_3_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__th::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  right: -0.0625rem;
  z-index: 1;
  pointer-events: none;
  border-top: var(--table-border-top, var(--table-border));
}

.eufemia-scope--11_3_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__td:last-child::after,
.eufemia-scope--11_3_0 .dnb-table thead:has(.dnb-table__tr--even) + tbody .dnb-table__tr:first-child .dnb-table__th:last-child::after {
  right: 0;
}

.eufemia-scope--11_3_0 .dnb-table__td--clickable {
  padding: 0;
}

.eufemia-scope--11_3_0 .dnb-table__td--clickable:active {
  --table-td-background: var(--table-accordion-background--active);
}

.eufemia-scope--11_3_0 .dnb-table__td__button {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: inherit;
  font: inherit;
  cursor: pointer;
}

.eufemia-scope--11_3_0 .dnb-table__td__button__icon {
  flex: none;
  color: var(--table-accordion-icon-color);
  opacity: 0;
}

.eufemia-scope--11_3_0 .dnb-table__td__button:focus-visible {
  outline: none;
}

.eufemia-scope--11_3_0 .dnb-table__td__button::before {
  content: "";
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  right: calc(var(--table-accordion-outline-width--active) * -1);
  border: var(--border-width, 0) solid var(--border-color, transparent);
}

html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table__td__button:hover[disabled] {
  cursor: not-allowed;
}

html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table__td__button:hover:not([disabled])::before {
  --border-width: var(--table-accordion-outline-width);
  --border-color: var(--table-accordion-outline-color);
}

html:not([data-whatintent=touch]) .eufemia-scope--11_3_0 .dnb-table__td__button:hover:not([disabled]) .dnb-table__td__button__icon {
  color: var(--table-accordion-icon-color--active);
  opacity: 1;
}

.eufemia-scope--11_3_0 .dnb-table__td__button:active::before {
  --border-width: var(--table-accordion-outline-width--active);
  --border-color: var(--table-accordion-outline-color);
}

.eufemia-scope--11_3_0 .dnb-table__td__button:active .dnb-table__td__button__icon {
  color: var(--table-accordion-icon-color--active);
  opacity: 1;
}

.eufemia-scope--11_3_0 .dnb-table__td:last-child > .dnb-table__td__button::before {
  right: 0;
}

.eufemia-scope--11_3_0 .dnb-table__td__button:not(:active):not(:hover):focus-visible::before {
  --border-width: var(--focus-ring-width);
  --border-color: var(--token-color-stroke-action-focus);
}

.eufemia-scope--11_3_0 .dnb-table__td__button:not(:active):not(:hover):focus-visible .dnb-table__td__button__icon {
  opacity: 1;
}

.eufemia-scope--11_3_0 .dnb-table__td__button__content {
  flex: 1;
  min-width: 0;
}

.eufemia-scope--11_3_0 .dnb-table__td--highlight, .eufemia-scope--11_3_0 .dnb-table__th--highlight {
  --table-border-left: var(--table-border-width) solid transparent;
  --table-border-right: var(--table-border-width) solid transparent;
  --table-border-top: var(--table-border-width) solid transparent;
  --table-border-bottom: var(--table-border-width) solid transparent;
}

.eufemia-scope--11_3_0 .dnb-table__td--highlight {
  --table-td-background: var(--table-highlight-background);
}

.eufemia-scope--11_3_0 .dnb-table__td--highlight-border {
  --table-border-top: var(--table-border-width) solid
    var(--table-th-highlight-border);
}

.eufemia-scope--11_3_0 .dnb-table__th--highlight + .dnb-table__th--highlight, .eufemia-scope--11_3_0 .dnb-table__th--highlight + .dnb-table__td--highlight, .eufemia-scope--11_3_0 .dnb-table__td--highlight + .dnb-table__td--highlight {
  --table-border-left: var(--table-border-width) solid
    var(--table-th-highlight-border);
}

.eufemia-scope--11_3_0 .dnb-table--highlight-neighbor-left {
  --table-border-left: var(--table-border-width) solid transparent;
}

.eufemia-scope--11_3_0 .dnb-table--highlight-neighbor-right {
  --table-border-right: var(--table-border-width) solid transparent;
}

.eufemia-scope--11_3_0 .dnb-table--highlight-neighbor-top {
  --table-border-top: var(--table-border-width) solid transparent;
}

.eufemia-scope--11_3_0 .dnb-table__td--selected {
  --table-td-background: var(
    --table-td-background--selected,
    var(--token-color-background-selected-subtle)
  );
  /* stylelint-disable */
}

.eufemia-scope--11_3_0 .dnb-table__td--selected .dnb-table__td__button__icon {
  opacity: 1;
  color: var(--token-color-icon-selected);
}

.eufemia-scope--11_3_0 .dnb-table__td--selected {
  /* stylelint-enable */
}

.eufemia-scope--11_3_0 .dnb-table__td--selected .dnb-table__td__button:not(:hover):not(:active)::before {
  --border-width: var(--table-accordion-outline-width--active);
  --border-color: var(--token-color-stroke-selected);
}

.eufemia-scope--11_3_0 .dnb-table {
  /* stylelint-disable */
}

.eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--11_3_0 .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);
}

.eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--11_3_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--11_3_0 .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);
}

.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:first-child, .eufemia-scope--11_3_0 .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, .eufemia-scope--11_3_0 .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, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:first-child, .eufemia-scope--11_3_0 .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, .eufemia-scope--11_3_0 .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);
}

.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child .dnb-table__td__button::before,
.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child .dnb-table__td__button::before,
.eufemia-scope--11_3_0 .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__td__button::before,
.eufemia-scope--11_3_0 .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__td__button::before {
  border-bottom-left-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__th:last-child, .eufemia-scope--11_3_0 .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, .eufemia-scope--11_3_0 .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, .eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr--clickable:not(.dnb-table__tr--expanded).dnb-table__tr--last .dnb-table__td:last-child, .eufemia-scope--11_3_0 .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, .eufemia-scope--11_3_0 .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);
}

.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child .dnb-table__td__button::before,
.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child .dnb-table__td__button::before,
.eufemia-scope--11_3_0 .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__td__button::before,
.eufemia-scope--11_3_0 .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__td__button::before {
  border-bottom-right-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table {
  /* stylelint-enable */
}

.eufemia-scope--11_3_0 .dnb-table__td--no-spacing,
.eufemia-scope--11_3_0 .dnb-table td.dnb-table__td--no-spacing {
  padding: 0;
}

.eufemia-scope--11_3_0 .dnb-table__td--spacing-horizontal,
.eufemia-scope--11_3_0 .dnb-table td.dnb-table__td--spacing-horizontal {
  padding-top: 0;
  padding-bottom: 0;
}

/*
* Table component
*
*/
.eufemia-scope--11_3_0 .dnb-table > tbody > tr, .eufemia-scope--11_3_0 .dnb-table .dnb-table__tr, .eufemia-scope--11_3_0 .dnb-table .dnb-table__tr--even {
  --table-td-background: var(
    --token-color-component-table-background-neutral-alternative
  );
}

.eufemia-scope--11_3_0 .dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .eufemia-scope--11_3_0 .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .eufemia-scope--11_3_0 .dnb-table .dnb-table__tr--odd {
  --table-td-background: var(--token-color-background-neutral);
}

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

.eufemia-scope--11_3_0 .dnb-table thead th.dnb-table__cell--focus, .eufemia-scope--11_3_0 .dnb-table tbody td.dnb-table__cell--focus, .eufemia-scope--11_3_0 .dnb-table__th.dnb-table__cell--focus, .eufemia-scope--11_3_0 .dnb-table__td.dnb-table__cell--focus {
  outline: none;
  --border-color: var(--token-color-stroke-action-focus);
  --border-width: var(--focus-ring-width);
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}

.eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-top .dnb-table thead th, .eufemia-scope--11_3_0 .dnb-table thead th.dnb-table__td--vertical-align-top, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-top .dnb-table tbody td, .eufemia-scope--11_3_0 .dnb-table tbody td.dnb-table__td--vertical-align-top, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-top .dnb-table__th, .eufemia-scope--11_3_0 .dnb-table__th.dnb-table__td--vertical-align-top, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-top .dnb-table__td, .eufemia-scope--11_3_0 .dnb-table__td.dnb-table__td--vertical-align-top {
  vertical-align: top;
}

.eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-middle .dnb-table thead th, .eufemia-scope--11_3_0 .dnb-table thead th.dnb-table__td--vertical-align-middle, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-middle .dnb-table tbody td, .eufemia-scope--11_3_0 .dnb-table tbody td.dnb-table__td--vertical-align-middle, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-middle .dnb-table__th, .eufemia-scope--11_3_0 .dnb-table__th.dnb-table__td--vertical-align-middle, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-middle .dnb-table__td, .eufemia-scope--11_3_0 .dnb-table__td.dnb-table__td--vertical-align-middle {
  vertical-align: middle;
}

.eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-bottom .dnb-table thead th, .eufemia-scope--11_3_0 .dnb-table thead th.dnb-table__td--vertical-align-bottom, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-bottom .dnb-table tbody td, .eufemia-scope--11_3_0 .dnb-table tbody td.dnb-table__td--vertical-align-bottom, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-bottom .dnb-table__th, .eufemia-scope--11_3_0 .dnb-table__th.dnb-table__td--vertical-align-bottom, .eufemia-scope--11_3_0 .dnb-table__tr--vertical-align-bottom .dnb-table__td, .eufemia-scope--11_3_0 .dnb-table__td.dnb-table__td--vertical-align-bottom {
  vertical-align: bottom;
}

.eufemia-scope--11_3_0 .dnb-table {
  /* stylelint-disable no-descending-specificity */
}

.eufemia-scope--11_3_0 .dnb-table--outline tr:first-of-type > .dnb-table__cell--focus:first-child,
.eufemia-scope--11_3_0 .dnb-table--outline .dnb-table__tr:first-of-type > .dnb-table__cell--focus:first-child {
  border-top-left-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table--outline tr:first-of-type > .dnb-table__cell--focus:last-child,
.eufemia-scope--11_3_0 .dnb-table--outline .dnb-table__tr:first-of-type > .dnb-table__cell--focus:last-child {
  border-top-right-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child tr:last-of-type > .dnb-table__cell--focus:first-child,
.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-of-type > .dnb-table__cell--focus:first-child {
  border-bottom-left-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child tr:last-of-type > .dnb-table__cell--focus:last-child,
.eufemia-scope--11_3_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-of-type > .dnb-table__cell--focus:last-child {
  border-bottom-right-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table {
  /* stylelint-enable no-descending-specificity */
}

/*
* Table component
*
*/
.eufemia-scope--11_3_0 .dnb-table tr.sticky {
  position: sticky;
  z-index: 4;
  transform: translate3d(0, var(--table-offset, 0), 0);
}

.eufemia-scope--11_3_0 .dnb-table tr.sticky.css-position {
  top: var(--table-top, 0);
}

.eufemia-scope--11_3_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
*
*/
.eufemia-scope--11_3_0 .dnb-table__container {
  position: relative;
  background-color: var(--token-color-background-neutral);
}

.eufemia-scope--11_3_0 .dnb-table__container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  z-index: 3;
  border: var(--table-outline);
}

.eufemia-scope--11_3_0 .dnb-table__container, .eufemia-scope--11_3_0 .dnb-table__container::after {
  border-radius: var(--table-outline-radius);
}

.eufemia-scope--11_3_0 .dnb-table__container, .eufemia-scope--11_3_0 .dnb-table__container__body, .eufemia-scope--11_3_0 .dnb-table__container__head, .eufemia-scope--11_3_0 .dnb-table__container__foot {
  display: flex;
  flex-direction: column;
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table:not([class*=space__bottom]) {
  margin-bottom: 0;
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
  padding-top: 1.5rem;
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table {
  position: relative;
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  border-bottom: var(--table-border);
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table {
  /* stylelint-disable */
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__td::after {
  border-top: none;
}

.eufemia-scope--11_3_0 .dnb-table__container__body .dnb-table {
  /* stylelint-enable */
}

.eufemia-scope--11_3_0 .dnb-table__container__head {
  padding: 2rem 1rem 0;
}

.eufemia-scope--11_3_0 .dnb-table__container__head--empty {
  padding: 0;
  min-height: 1.5rem;
}

.eufemia-scope--11_3_0 .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]) {
  margin: 0;
}

.eufemia-scope--11_3_0 .dnb-table__container__foot {
  padding: 1rem;
  padding-bottom: 1.25rem;
}

.eufemia-scope--11_3_0 .dnb-table__container__foot--empty {
  padding: 0;
  min-height: 1rem;
}

.eufemia-scope--11_3_0 .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)) {
  .eufemia-scope--11_3_0 .dnb-table__container::after {
    bottom: calc(var(--table-outline-width) * -1);
  }
  .eufemia-scope--11_3_0 .dnb-table__container:has(.dnb-table__container__foot--empty)::after {
    bottom: 0;
  }
}
.eufemia-scope--11_3_0 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
  overflow: visible;
}

.eufemia-scope--11_3_0 .dnb-card .dnb-table__container {
  width: 100%;
}

/*
 * Utilities
 */
/*
* Table component
*
*/
.eufemia-scope--11_3_0 .dnb-table {
  --table-accordion-background: var(--token-color-background-neutral);
  --table-accordion-header-background: var(
    --token-color-background-neutral