@dnb/eufemia 10.76.1 → 10.77.0

package/cjs/components/table/style/dnb-table--isolated.css

@@ -0,0 +1,754 @@
+/*
+* Table component
+*
+*/
+/*
+ * Utilities
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.eufemia-scope--10_77_0 .dnb-table,
+.eufemia-scope--10_77_0 .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;
+}
+
+.eufemia-scope--10_77_0 .dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.eufemia-scope--10_77_0 .dnb-table--fixed {
+  table-layout: fixed;
+  width: auto;
+}
+.eufemia-scope--10_77_0 .dnb-table--no-wrap {
+  white-space: nowrap;
+}
+.eufemia-scope--10_77_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(--color-white);
+  text-align: left;
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table > caption:last-child::after {
+  right: 0;
+}
+.eufemia-scope--10_77_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--10_77_0 .dnb-table--outline, .eufemia-scope--10_77_0 .dnb-table--outline::after {
+  border-radius: var(--table-outline-radius);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table--outline > caption, .eufemia-scope--10_77_0 .dnb-table--outline > caption::after {
+  border-radius: 0 0 var(--table-outline-radius) var(--table-outline-radius);
+}
+.eufemia-scope--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child,
+.eufemia-scope--10_77_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--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th, .eufemia-scope--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::before, .eufemia-scope--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__th::after, .eufemia-scope--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td, .eufemia-scope--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::before, .eufemia-scope--10_77_0 .dnb-table--outline > caption:not(.dnb-sr-only) ~ tbody:last-child .dnb-table__tr:last-child .dnb-table__td::after, .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table.dnb-skeleton > * {
+  -webkit-text-fill-color: var(--skeleton-color);
+}
+.eufemia-scope--10_77_0 .dnb-card .dnb-table {
+  --table-outline-color: transparent;
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable, .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable {
+  color: var(--color-sea-green);
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button, .eufemia-scope--10_77_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;
+  color: inherit;
+  font-weight: var(--font-weight-medium);
+  text-align: inherit;
+  font-size: inherit;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, .eufemia-scope--10_77_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;
+}
+html[data-visual-test] .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, html[data-visual-test] .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
+  transition: none;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text, .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after, .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
+  right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon, .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after, .eufemia-scope--10_77_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(--color-sea-green);
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before, html:not([data-whatintent=touch]) .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_77_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--10_77_0 html:not([data-whatintent=touch]) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_77_0 :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] .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_77_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, html[data-visual-test] .eufemia-scope--10_77_0 html:not([data-whatintent=touch]) .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon, .eufemia-scope--10_77_0 :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]) .eufemia-scope--10_77_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--10_77_0 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]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 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]) .eufemia-scope--10_77_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--10_77_0 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]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 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;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) {
+  color: var(--color-sea-green);
+}
+.eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, .eufemia-scope--10_77_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--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+  right: -0.5rem;
+}
+.eufemia-scope--10_77_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--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right], .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] {
+  padding-right: 0.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button, .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--sortable[align=right] .dnb-table__sort-button.dnb-button {
+  flex-direction: row-reverse;
+}
+.eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after, .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon, .eufemia-scope--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_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--10_77_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--10_77_0 .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;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:focus[disabled] {
+  cursor: not-allowed;
+}
+.eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-button__text::after, .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon, .eufemia-scope--10_77_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--10_77_0 .dnb-table .dnb-table__th .dnb-table__help-button, .eufemia-scope--10_77_0 .dnb-table > thead > tr > th .dnb-table__help-button {
+  margin-left: 0.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-table > thead > .dnb-table--no-wrap .dnb-table__sort-button {
+  white-space: nowrap;
+}
+
+/*
+* Table component
+*
+*/
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.eufemia-scope--10_77_0 .dnb-table__th__horizontal {
+  display: flex;
+  align-items: flex-end;
+}
+.eufemia-scope--10_77_0 .dnb-table__th, .eufemia-scope--10_77_0 .dnb-table thead th {
+  background-color: var(--table-th-background-color);
+}
+.eufemia-scope--10_77_0 .dnb-table tbody tr:has(th:first-child + td:last-child) th[scope=row] {
+  --table-th-background-color: initial;
+}
+.eufemia-scope--10_77_0 .dnb-table tbody tr th[scope=row] + td:last-child {
+  width: 100%;
+}
+
+/*
+* Table component
+*
+*/
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.eufemia-scope--10_77_0 .dnb-table {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__td::after,
+.eufemia-scope--10_77_0 .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;
+}
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__td:last-child::after,
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__th:last-child::after {
+  right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__td:first-child::after,
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__th:first-child::after {
+  border-left: none;
+}
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__td:last-child::after,
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__th:last-child::after {
+  border-right: none;
+}
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.eufemia-scope--10_77_0 .dnb-table--border tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  border-top: none;
+}
+.eufemia-scope--10_77_0 .dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__td::after,
+.eufemia-scope--10_77_0 .dnb-table--border thead + tbody .dnb-table__tr:first-child .dnb-table__th::after {
+  border-top: var(--table-border);
+}
+.eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:first-child::after, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:first-child::after, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:first-child::after, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:first-child::before, .eufemia-scope--10_77_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--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline thead:first-of-type .dnb-table__tr:first-of-type .dnb-table__td:last-child::after, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td:last-child::after, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__th:last-child::after, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child, .eufemia-scope--10_77_0 .dnb-table--outline caption:first-child + tbody .dnb-table__tr:first-of-type .dnb-table__td:last-child::before, .eufemia-scope--10_77_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--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child,
+.eufemia-scope--10_77_0 .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));
+}
+.eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:first-child::after, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:first-child::after, .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__th:last-child::after, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::before, .eufemia-scope--10_77_0 .dnb-table--outline tbody:last-child .dnb-table__tr:last-child .dnb-table__td:last-child::after, .eufemia-scope--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_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--10_77_0 .dnb-table__td--no-spacing,
+.eufemia-scope--10_77_0 .dnb-table td.dnb-table__td--no-spacing {
+  padding: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__td--spacing-horizontal,
+.eufemia-scope--10_77_0 .dnb-table td.dnb-table__td--spacing-horizontal {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/*
+* Table component
+*
+*/
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.eufemia-scope--10_77_0 .dnb-table > tbody > tr, .eufemia-scope--10_77_0 .dnb-table .dnb-table__tr, .eufemia-scope--10_77_0 .dnb-table .dnb-table__tr--even {
+  background-color: var(--color-black-3);
+}
+.eufemia-scope--10_77_0 .dnb-table > tbody > tr:not(.dnb-table__tr--even):nth-of-type(2n), .eufemia-scope--10_77_0 .dnb-table .dnb-table__tr:not(.dnb-table__tr--even):nth-of-type(2n), .eufemia-scope--10_77_0 .dnb-table .dnb-table__tr--odd {
+  background-color: var(--color-white);
+}
+
+/*
+* Table component
+*
+*/
+.eufemia-scope--10_77_0 .dnb-table thead th, .eufemia-scope--10_77_0 .dnb-table tbody td, .eufemia-scope--10_77_0 .dnb-table__th, .eufemia-scope--10_77_0 .dnb-table__td {
+  position: relative;
+  border-spacing: 0;
+  word-break: keep-all;
+}
+
+/*
+* Table component
+*
+*/
+.eufemia-scope--10_77_0 .dnb-table tr.sticky {
+  position: sticky;
+  z-index: 4;
+  transform: translate3d(0, var(--table-offset, 0), 0);
+}
+.eufemia-scope--10_77_0 .dnb-table tr.sticky.css-position {
+  top: var(--table-top, 0);
+}
+.eufemia-scope--10_77_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--10_77_0 .dnb-table__container {
+  position: relative;
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__container, .eufemia-scope--10_77_0 .dnb-table__container::after {
+  border-radius: var(--table-outline-radius);
+}
+.eufemia-scope--10_77_0 .dnb-table__container, .eufemia-scope--10_77_0 .dnb-table__container__body, .eufemia-scope--10_77_0 .dnb-table__container__head, .eufemia-scope--10_77_0 .dnb-table__container__foot {
+  display: flex;
+  flex-direction: column;
+}
+.eufemia-scope--10_77_0 .dnb-table__container__body .dnb-table {
+  position: relative;
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.eufemia-scope--10_77_0 .dnb-table__container__body .dnb-table:not([class*=space__bottom]) {
+  margin-bottom: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__container__body .dnb-table__size--large .dnb-table__th {
+  padding-top: 1.5rem;
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after,
+.eufemia-scope--10_77_0 .dnb-table__container__body .dnb-table tbody:first-child .dnb-table__tr:first-of-type .dnb-table__td::after,
+.eufemia-scope--10_77_0 .dnb-table__container__body .dnb-table > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after,
+.eufemia-scope--10_77_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--10_77_0 .dnb-table__container__head {
+  padding: 2rem 1rem 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__container__head--empty {
+  padding: 0;
+  min-height: 1.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-spacing .dnb-table__container__head .dnb-h--large:not([class*=space__top]) {
+  margin: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__container__foot {
+  padding: 1rem;
+  padding-bottom: 1.25rem;
+}
+.eufemia-scope--10_77_0 .dnb-table__container__foot--empty {
+  padding: 0;
+  min-height: 1rem;
+}
+.eufemia-scope--10_77_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--10_77_0 .dnb-table__container::after {
+    bottom: calc(var(--table-outline-width) * -1);
+  }
+}
+.eufemia-scope--10_77_0 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
+  overflow: visible;
+}
+.eufemia-scope--10_77_0 .dnb-card .dnb-table__container {
+  width: 100%;
+}
+
+/*
+* Table component
+*
+*/
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__th.dnb-table__th__button-icon.dnb-table__th {
+  padding: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__th.dnb-table__th__button-icon,
+.eufemia-scope--10_77_0 .dnb-table__th.dnb-table__th__button-icon div {
+  width: 3.5rem;
+  text-indent: -300vw;
+}
+.eufemia-scope--10_77_0 .dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon,
+.eufemia-scope--10_77_0 .dnb-table__size--medium .dnb-table__th.dnb-table__th__button-icon div {
+  width: 3rem;
+}
+.eufemia-scope--10_77_0 .dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon,
+.eufemia-scope--10_77_0 .dnb-table__size--small .dnb-table__th.dnb-table__th__button-icon div {
+  width: 2.5rem;
+}
+.eufemia-scope--10_77_0 .dnb-table__td.dnb-table__td__button-icon {
+  -webkit-user-select: none;
+          user-select: none;
+}
+.eufemia-scope--10_77_0 .dnb-table__td.dnb-table__td__button-icon.dnb-table__td {
+  padding: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable .dnb-table__button {
+  display: flex;
+  justify-content: center;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
+  color: var(--table-accordion-icon-color);
+  transition: transform 500ms var(--easing-default);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr--no-animation .dnb-table__button .dnb-icon, html[data-visual-test] .eufemia-scope--10_77_0 .dnb-table__tr--clickable .dnb-table__button .dnb-icon {
+  transition: none !important;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable, .eufemia-scope--10_77_0 .dnb-table__tr__accordion-content {
+  position: relative;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr--expanded, .eufemia-scope--10_77_0 .dnb-table__tr__accordion-content {
+  z-index: 3;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable:active, html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-table__tr--clickable:focus, .eufemia-scope--10_77_0 .dnb-table__tr--clickable:hover:not(.dnb-table__tr--hover.dnb-table__tr--expanded) {
+  z-index: 5;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr--expanded .dnb-table__button .dnb-icon {
+  transform: rotate(180deg);
+}
+.eufemia-scope--10_77_0 .dnb-table--border .dnb-table__tr--clickable.dnb-table__tr--expanded td::after {
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) {
+  outline: none;
+}
+.eufemia-scope--10_77_0 .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;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled) td:not(:first-of-type)::before {
+  border-left: none;
+}
+.eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .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] .eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):not(:active):not(:hover):focus td:first-of-type::before {
+  left: 0;
+}
+.eufemia-scope--10_77_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]) .eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active:hover td::before,
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr:not(.dnb-table__tr--disabled):active .dnb-table__td {
+  background-color: var(--table-accordion-outline-background--active);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .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]) .eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable.dnb-table__tr--disabled .dnb-table__td__button-icon .dnb-icon {
+  color: var(--table-accordion-icon-color--disabled);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content__inner {
+  overflow: hidden;
+  will-change: height;
+  transition: height 400ms var(--easing-default);
+  position: relative;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content__inner__spacing {
+  padding: 1rem;
+  transform: translateY(-10px);
+  transition: transform 500ms var(--easing-default);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transform: translateY(0);
+}
+html[data-visual-test] .eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--parallax .dnb-table__tr__accordion-content__inner__spacing {
+  transition: none;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--expanded > td.dnb-table__td {
+  background-color: var(--color-white);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--expanded + .dnb-table__tr--clickable .dnb-table__td:last-child::after {
+  right: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--single td {
+  padding: 0 !important;
+  width: calc(100% - 3.5rem);
+}
+.eufemia-scope--10_77_0 .dnb-table__size--medium .dnb-table__tr__accordion-content--single td {
+  width: calc(100% - 3rem);
+}
+.eufemia-scope--10_77_0 .dnb-table__size--small .dnb-table__tr__accordion-content--single td {
+  width: calc(100% - 2.5rem);
+}
+.eufemia-scope--10_77_0 .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);
+}
+.eufemia-scope--10_77_0 .dnb-table--outline .dnb-table__tr__accordion-content--single:last-of-type td::before {
+  border-bottom: none;
+}
+.eufemia-scope--10_77_0 .dnb-table--border .dnb-table__tr__accordion-content--single td::after {
+  border-top: none;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--single > td.dnb-table__td {
+  padding: 0;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl,
+.eufemia-scope--10_77_0 .dnb-table__tr__accordion-content--single > td.dnb-table__td .dnb-dl dt {
+  margin: 0;
+}
+.eufemia-scope--10_77_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;
+}
+.eufemia-scope--10_77_0 .dnb-table__tr--clickable:not(.dnb-table__tr--disabled) {
+  cursor: pointer;
+}
+.eufemia-scope--10_77_0 .dnb-table__td-wrapper {
+  display: flex;
+}
+
+.eufemia-scope--10_77_0 .dnb-spacing .dnb-table p,
+.eufemia-scope--10_77_0 .dnb-spacing .dnb-table ul,
+.eufemia-scope--10_77_0 .dnb-spacing .dnb-table ol,
+.eufemia-scope--10_77_0 .dnb-spacing .dnb-table dl,
+.eufemia-scope--10_77_0 .dnb-spacing .dnb-table pre {
+  margin-top: 0;
+  margin-bottom: 0;
+}