@dnb/eufemia 9.15.2 → 9.16.3

package/cjs/style/dnb-ui-elements.css

@@ -0,0 +1,1742 @@
+@charset "UTF-8";
+/**
+ * HTML Elements
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * CSS Properties
+ *
+ */
+:root {
+  --font-family-default: 'DNB', sans-serif;
+  --font-family-monospace: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
+    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
+    monospace;
+  --font-weight-default: normal;
+  --font-weight-basis: normal;
+  --font-weight-regular: normal;
+  --font-weight-medium: 500;
+  --font-weight-bold: 600;
+  --font-size-x-small: 0.875rem;
+  --font-size-small: 1rem;
+  --font-size-basis: 1.125rem;
+  --font-size-basis--em: 1em;
+  --font-size-medium: 1.25rem;
+  --font-size-large: 1.625rem;
+  --font-size-x-large: 2.125rem;
+  --font-size-xx-large: 3rem;
+  --line-height-xx-small--em: 1em;
+  --line-height-x-small: 1.125rem;
+  --line-height-small: 1.25rem;
+  --line-height-basis: 1.5rem;
+  --line-height-basis--em: 1.333em;
+  --line-height-medium: 2rem;
+  --line-height-large: 2.5rem;
+  --line-height-x-large: 3.5rem;
+  --color-mint-green-50: #d2f0e9;
+  --color-mint-green-25: #e9f8f4;
+  --color-mint-green-12: #f4fbf9;
+  --color-sea-green-30: #b3dada;
+  --color-accent-yellow-30: #feebc1;
+  --color-signal-orange: #ff5400;
+  --color-fire-red: #dc2a2a;
+  --color-success-green: #007b5e;
+  --color-fire-red-8: #fdeeee;
+  --color-black: #000;
+  --color-black-80: #333;
+  --color-black-55: #737373;
+  --color-black-20: #ccc;
+  --color-black-8: #ebebeb;
+  --color-black-3: #f8f8f8;
+  --color-white: #fff;
+  --color-black-border: #cdcdcd;
+  --color-black-background: #fafafa;
+  --color-sea-green: #007272;
+  --color-mint-green: #a5e1d2;
+  --color-summer-green: #28b482;
+  --color-emerald-green: #14555a;
+  --color-ocean-green: #00343e;
+  --color-accent-yellow: #fdbb31;
+  --color-indigo: #23195a;
+  --color-violet: #6e2382;
+  --color-sky-blue: #4bbed2;
+  --color-lavender: #f2f2f5;
+  --color-sand-yellow: #fbf6ec;
+  --color-pistachio: #f2f4ec;
+  --color-mint-green-alt: #ebfffa;
+  --color-indigo-medium: #6e6491;
+  --color-indigo-light: #b9afc8;
+  --color-violet-medium: #a06eaf;
+  --color-violet-light: #cfb9d7;
+  --color-sky-blue-medium: #87d2e1;
+  --color-sky-blue-light: #c3ebf0;
+  --spacing-xx-small: 0.25rem;
+  --spacing-x-small: 0.5rem;
+  --spacing-small: 1rem;
+  --spacing-medium: 1.5rem;
+  --spacing-large: 2rem;
+  --spacing-x-large: 3rem;
+  --spacing-xx-large: 3.5rem;
+  --layout-small: 40em;
+  --layout-medium: 50em;
+  --layout-large: 60em;
+  --layout-x-large: 72em;
+  --layout-xx-large: 80em;
+  --layout-xxx-large: 90em;
+  --shadow-default: 0 8px 16px rgba(51, 51, 51, 0.08);
+  --shadow-default-x: 0;
+  --shadow-default-y: 8px;
+  --shadow-default-blur-radius: 16px;
+  --shadow-default-color: rgba(51, 51, 51, 0.08); }
+
+/*
+ * Import all Elements
+ *
+ */
+/*
+ * Core Styles
+ * Mainly only the margins are defined in here
+ *
+ */
+/*
+ * Anchor
+ *
+ */
+/*
+ * Anchor mixins
+ *
+ */
+button.dnb-anchor {
+  cursor: pointer;
+  line-height: 1.625rem;
+  line-height: calc(1.5rem + 0.125rem);
+  line-height: calc(var(--line-height-basis) + 0.125rem);
+  border: none;
+  background: none;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none; }
+
+.dnb-anchor {
+  display: inline;
+  padding: 0.05575em 0.125em 0.05575em;
+  color: #007272;
+  color: var(--color-sea-green);
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  text-decoration: none;
+  -webkit-box-shadow: 0 0.09375rem 0 0 currentColor;
+          box-shadow: 0 0.09375rem 0 0 currentColor;
+  border-radius: 0;
+  -webkit-transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out, -webkit-box-shadow 180ms ease-in-out;
+  transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out, -webkit-box-shadow 180ms ease-in-out;
+  transition: background-color 200ms ease-in-out, box-shadow 180ms ease-in-out, border-radius 200ms ease-in-out;
+  transition: background-color 200ms ease-in-out, box-shadow 180ms ease-in-out, border-radius 200ms ease-in-out, -webkit-box-shadow 180ms ease-in-out; }
+  .dnb-p .dnb-anchor,
+  .dnb-lead .dnb-anchor,
+  .dnb-h--xx-large .dnb-anchor,
+  .dnb-h--x-large .dnb-anchor,
+  .dnb-h--large .dnb-anchor,
+  .dnb-h--medium .dnb-anchor,
+  .dnb-h--basis .dnb-anchor,
+  .dnb-h--small .dnb-anchor,
+  .dnb-h--x-small .dnb-anchor {
+    font-size: inherit; }
+  .dnb-anchor:focus {
+    outline: none;
+    border-radius: 0.25em; }
+    .dnb-anchor:focus:not(:active) {
+      color: #007272;
+      color: var(--color-sea-green);
+      background-color: transparent;
+      -webkit-transition: none;
+      transition: none;
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      text-decoration: none; }
+    html[data-whatinput='keyboard'] .dnb-anchor:focus {
+      --border-color: var(--color-emerald-green);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-anchor:focus {
+          -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                  box-shadow: 0 0 0 0.125rem #14555a;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                  box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+  .dnb-anchor:hover, .dnb-anchor:active {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    border-radius: 0.25em;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    text-decoration: none; }
+  .dnb-anchor:active {
+    color: #a5e1d2;
+    color: var(--color-mint-green);
+    background-color: #14555a;
+    background-color: var(--color-emerald-green);
+    border-radius: 0.25em;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    text-decoration: none; }
+  .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon) {
+    position: relative;
+    background-size: 0;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=); }
+    .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon)::after {
+      content: '';
+      position: relative;
+      display: inline-block;
+      width: 0.889em;
+      height: 0.889em;
+      margin-left: 0.3em;
+      margin-right: 0.125em;
+      color: inherit;
+      background-size: cover;
+      background-image: inherit;
+      -webkit-transition: -webkit-transform 0.3s ease-out, -webkit-filter 1s ease-in-out;
+      transition: -webkit-transform 0.3s ease-out, -webkit-filter 1s ease-in-out;
+      transition: transform 0.3s ease-out, filter 1s ease-in-out;
+      transition: transform 0.3s ease-out, filter 1s ease-in-out, -webkit-transform 0.3s ease-out, -webkit-filter 1s ease-in-out;
+      -webkit-transform-origin: bottom;
+              transform-origin: bottom; }
+    .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon):active {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg==); }
+    .dnb-anchor[target='_blank']:not(:empty):not(.dnb-anchor--no-icon)::after {
+      top: 0.125em; }
+  [data-visual-test-wrapper] .dnb-anchor {
+    -webkit-transition: none;
+    transition: none; }
+  .dnb-anchor .dnb-icon {
+    display: inline-block;
+    -webkit-transform: translateY(-0.0625em);
+            transform: translateY(-0.0625em); }
+
+.dnb-anchor--hover {
+  color: #007272;
+  color: var(--color-sea-green);
+  background-color: #d2f0e9;
+  background-color: var(--color-mint-green-50);
+  border-radius: 0.25em;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  text-decoration: none; }
+
+.dnb-anchor--active {
+  color: #a5e1d2;
+  color: var(--color-mint-green);
+  background-color: #14555a;
+  background-color: var(--color-emerald-green);
+  border-radius: 0.25em;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  text-decoration: none; }
+
+.dnb-anchor--focus {
+  outline: none;
+  border-radius: 0.25em; }
+  .dnb-anchor--focus:not(:active) {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: transparent;
+    -webkit-transition: none;
+    transition: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+    text-decoration: none; }
+  html[data-whatinput='mouse'] .dnb-anchor--focus {
+    --border-color: var(--color-emerald-green);
+    -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      html[data-whatinput='mouse'] .dnb-anchor--focus {
+        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                box-shadow: 0 0 0 0.125rem #14555a;
+        -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+
+.dnb-anchor--no-style {
+  color: inherit;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  text-decoration: none;
+  -webkit-transition: none;
+  transition: none; }
+  .dnb-anchor--no-style:hover {
+    color: inherit;
+    background-color: transparent; }
+
+.dnb-anchor--no-underline {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  text-decoration: none; }
+
+.dnb-anchor--no-hover:hover {
+  color: inherit;
+  background-color: transparent; }
+
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+  border-radius: 0; }
+
+.dnb-anchor--no-animation {
+  -webkit-transition: none;
+  transition: none; }
+
+.dnb-anchor--contrast {
+  color: #fff;
+  color: var(--color-white);
+  -webkit-box-shadow: 0 0.09375rem 0 0 #fff;
+          box-shadow: 0 0.09375rem 0 0 #fff;
+  -webkit-box-shadow: 0 0.09375rem 0 0 var(--color-white);
+          box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+  .dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white);
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  .dnb-anchor--contrast:active {
+    color: #14555a;
+    color: var(--color-emerald-green);
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-anchor--contrast:not(:disabled):focus {
+    color: #fff;
+    color: var(--color-white);
+    background-color: transparent;
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-anchor--contrast:not(:disabled):focus {
+      --border-color: var(--color-white);
+      -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+              box-shadow: 0 0 0 0.125rem var(--border-color);
+      border-color: transparent; }
+      @media screen and (-ms-high-contrast: none) {
+        html[data-whatinput='keyboard'] .dnb-anchor--contrast:not(:disabled):focus {
+          -webkit-box-shadow: 0 0 0 0.125rem #fff;
+                  box-shadow: 0 0 0 0.125rem #fff;
+          -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
+                  box-shadow: 0 0 0 0.125rem var(--color-white); } }
+
+a.dnb-button {
+  -webkit-transition: none;
+  transition: none; }
+
+.dnb-skeleton > .dnb-anchor,
+.dnb-anchor.dnb-skeleton {
+  -webkit-box-shadow: none;
+          box-shadow: none; }
+  .dnb-skeleton > .dnb-anchor::after,
+  .dnb-anchor.dnb-skeleton::after {
+    -webkit-filter: grayscale(100%) opacity(0.3);
+            filter: grayscale(100%) opacity(0.3); }
+
+/*
+ * Typography
+ *
+ */
+.dnb-small {
+  font-size: 1rem;
+  font-size: var(--font-size-small); }
+
+.dnb-p {
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  color: currentColor;
+  color: var(--theme-color-black-80, currentColor);
+  padding: 0; }
+  .dnb-p:not([class*='space__top']) {
+    margin-top: 0; }
+  .dnb-p:not([class*='space__bottom']) {
+    margin-bottom: 0; }
+  .dnb-p--lead {
+    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
+    line-height: 1.75rem;
+    line-height: calc(2rem - 0.25rem);
+    line-height: calc(var(--line-height-medium) - 0.25rem); }
+    .dnb-p--lead > small {
+      font-size: 1.125rem;
+      font-size: var(--font-size-basis);
+      line-height: 1.5rem;
+      line-height: var(--line-height-basis); }
+  .dnb-p--ingress, .dnb-p--medium {
+    font-weight: 500;
+    font-weight: var(--font-weight-medium); }
+  .dnb-p b,
+  .dnb-p strong {
+    font-weight: 500;
+    font-weight: var(--font-weight-medium); }
+  .dnb-p--bold {
+    font-weight: 600;
+    font-weight: var(--font-weight-bold); }
+  .dnb-p__size--xx-large {
+    font-size: 3rem;
+    font-size: var(--font-size-xx-large);
+    line-height: 3.5rem;
+    line-height: var(--line-height-x-large); }
+  .dnb-p__size--x-large {
+    font-size: 2.125rem;
+    font-size: var(--font-size-x-large);
+    line-height: 3.5rem;
+    line-height: var(--line-height-x-large); }
+  .dnb-p__size--large {
+    font-size: 1.625rem;
+    font-size: var(--font-size-large);
+    line-height: 2.5rem;
+    line-height: var(--line-height-large); }
+  .dnb-p__size--basis {
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis); }
+  .dnb-p__size--medium {
+    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
+    line-height: 2rem;
+    line-height: var(--line-height-medium); }
+  .dnb-p--small, .dnb-p__size--small,
+  .dnb-p > small {
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+  .dnb-p--x-small, .dnb-p__size--x-small {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small);
+    line-height: 1.125rem;
+    line-height: var(--line-height-x-small); }
+  .dnb-p > cite {
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    font-style: italic; }
+
+.dnb-h--xx-large {
+  font-size: 3rem;
+  font-size: var(--font-size-xx-large);
+  line-height: 3.5rem;
+  line-height: var(--line-height-x-large); }
+  .dnb-h--xx-large > small {
+    display: block;
+    font-size: 2.125rem;
+    font-size: var(--font-size-x-large);
+    line-height: 2.5rem;
+    line-height: var(--line-height-large); }
+
+.dnb-h--x-large {
+  font-size: 2.125rem;
+  font-size: var(--font-size-x-large);
+  line-height: 2.5rem;
+  line-height: var(--line-height-large); }
+  .dnb-h--x-large > small {
+    display: block;
+    font-size: 2.125rem;
+    font-size: var(--font-size-x-large);
+    line-height: 2.5rem;
+    line-height: var(--line-height-large); }
+
+.dnb-h--large {
+  font-size: 1.625rem;
+  font-size: var(--font-size-large);
+  line-height: 2rem;
+  line-height: var(--line-height-medium); }
+  .dnb-h--large > small {
+    font-size: 1.25rem;
+    font-size: var(--font-size-medium);
+    line-height: 1.875rem;
+    line-height: calc(2rem - 0.125rem);
+    line-height: calc(var(--line-height-medium) - 0.125rem); }
+
+/* dnb-h--medium looks the same as .dnb-lead */
+.dnb-lead,
+.dnb-h--medium {
+  font-size: 1.25rem;
+  font-size: var(--font-size-medium);
+  line-height: 1.75rem;
+  line-height: calc(2rem - 0.25rem);
+  line-height: calc(var(--line-height-medium) - 0.25rem); }
+  .dnb-lead > small,
+  .dnb-h--medium > small {
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis); }
+
+.dnb-h--basis {
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis); }
+  .dnb-h--basis > small {
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+
+.dnb-h--small {
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  line-height: 1.25rem;
+  line-height: var(--line-height-small); }
+  .dnb-h--small > small {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small);
+    line-height: 1.25rem;
+    line-height: var(--line-height-small); }
+
+.dnb-h--x-small {
+  font-size: 0.875rem;
+  font-size: var(--font-size-x-small);
+  line-height: 1.125rem;
+  line-height: var(--line-height-x-small); }
+
+.dnb-lead,
+.dnb-h--xx-large,
+.dnb-h--x-large,
+.dnb-h--large,
+.dnb-h--medium,
+.dnb-h--basis,
+.dnb-h--small,
+.dnb-h--x-small,
+.dnb-core-style .dnb-lead,
+.dnb-core-style .dnb-h--xx-large,
+.dnb-core-style .dnb-h--x-large,
+.dnb-core-style .dnb-h--large,
+.dnb-core-style .dnb-h--medium,
+.dnb-core-style .dnb-h--basis,
+.dnb-core-style .dnb-h--small,
+.dnb-core-style .dnb-h--x-small {
+  padding: 0;
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  color: currentColor;
+  color: var(--theme-color-black-80, currentColor); }
+  .dnb-lead:not([class*='dnb-space']),
+  .dnb-h--xx-large:not([class*='dnb-space']),
+  .dnb-h--x-large:not([class*='dnb-space']),
+  .dnb-h--large:not([class*='dnb-space']),
+  .dnb-h--medium:not([class*='dnb-space']),
+  .dnb-h--basis:not([class*='dnb-space']),
+  .dnb-h--small:not([class*='dnb-space']),
+  .dnb-h--x-small:not([class*='dnb-space']),
+  .dnb-core-style .dnb-lead:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--xx-large:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--x-large:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--large:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--medium:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--basis:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--small:not([class*='dnb-space']),
+  .dnb-core-style .dnb-h--x-small:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-lead .dnb-icon--default,
+  .dnb-h--xx-large .dnb-icon--default,
+  .dnb-h--x-large .dnb-icon--default,
+  .dnb-h--large .dnb-icon--default,
+  .dnb-h--medium .dnb-icon--default,
+  .dnb-h--basis .dnb-icon--default,
+  .dnb-h--small .dnb-icon--default,
+  .dnb-h--x-small .dnb-icon--default,
+  .dnb-core-style .dnb-lead .dnb-icon--default,
+  .dnb-core-style .dnb-h--xx-large .dnb-icon--default,
+  .dnb-core-style .dnb-h--x-large .dnb-icon--default,
+  .dnb-core-style .dnb-h--large .dnb-icon--default,
+  .dnb-core-style .dnb-h--medium .dnb-icon--default,
+  .dnb-core-style .dnb-h--basis .dnb-icon--default,
+  .dnb-core-style .dnb-h--small .dnb-icon--default,
+  .dnb-core-style .dnb-h--x-small .dnb-icon--default {
+    font-size: 1em; }
+  .dnb-lead .dnb-icon--medium,
+  .dnb-h--xx-large .dnb-icon--medium,
+  .dnb-h--x-large .dnb-icon--medium,
+  .dnb-h--large .dnb-icon--medium,
+  .dnb-h--medium .dnb-icon--medium,
+  .dnb-h--basis .dnb-icon--medium,
+  .dnb-h--small .dnb-icon--medium,
+  .dnb-h--x-small .dnb-icon--medium,
+  .dnb-core-style .dnb-lead .dnb-icon--medium,
+  .dnb-core-style .dnb-h--xx-large .dnb-icon--medium,
+  .dnb-core-style .dnb-h--x-large .dnb-icon--medium,
+  .dnb-core-style .dnb-h--large .dnb-icon--medium,
+  .dnb-core-style .dnb-h--medium .dnb-icon--medium,
+  .dnb-core-style .dnb-h--basis .dnb-icon--medium,
+  .dnb-core-style .dnb-h--small .dnb-icon--medium,
+  .dnb-core-style .dnb-h--x-small .dnb-icon--medium {
+    font-size: 1.5em; }
+  .dnb-lead a,
+  .dnb-lead .dnb-anchor,
+  .dnb-h--xx-large a,
+  .dnb-h--xx-large .dnb-anchor,
+  .dnb-h--x-large a,
+  .dnb-h--x-large .dnb-anchor,
+  .dnb-h--large a,
+  .dnb-h--large .dnb-anchor,
+  .dnb-h--medium a,
+  .dnb-h--medium .dnb-anchor,
+  .dnb-h--basis a,
+  .dnb-h--basis .dnb-anchor,
+  .dnb-h--small a,
+  .dnb-h--small .dnb-anchor,
+  .dnb-h--x-small a,
+  .dnb-h--x-small .dnb-anchor,
+  .dnb-core-style .dnb-lead a,
+  .dnb-core-style .dnb-lead .dnb-anchor,
+  .dnb-core-style .dnb-h--xx-large a,
+  .dnb-core-style .dnb-h--xx-large .dnb-anchor,
+  .dnb-core-style .dnb-h--x-large a,
+  .dnb-core-style .dnb-h--x-large .dnb-anchor,
+  .dnb-core-style .dnb-h--large a,
+  .dnb-core-style .dnb-h--large .dnb-anchor,
+  .dnb-core-style .dnb-h--medium a,
+  .dnb-core-style .dnb-h--medium .dnb-anchor,
+  .dnb-core-style .dnb-h--basis a,
+  .dnb-core-style .dnb-h--basis .dnb-anchor,
+  .dnb-core-style .dnb-h--small a,
+  .dnb-core-style .dnb-h--small .dnb-anchor,
+  .dnb-core-style .dnb-h--x-small a,
+  .dnb-core-style .dnb-h--x-small .dnb-anchor {
+    padding-top: 0;
+    padding-bottom: 0.03125rem; }
+
+.dnb-spacing .dnb-h--xx-large:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*='space__top']) {
+  margin-top: 3rem; }
+
+.dnb-spacing .dnb-h--xx-large:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--xx-large:not([class*='space__bottom']) {
+  margin-bottom: 2.5rem; }
+
+.dnb-spacing .dnb-h--x-large:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*='space__top']) {
+  margin-top: 3rem; }
+
+.dnb-spacing .dnb-h--x-large:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--x-large:not([class*='space__bottom']) {
+  margin-bottom: 1rem; }
+
+.dnb-spacing .dnb-h--large:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--large:not([class*='space__top']) {
+  margin-top: 3rem; }
+
+.dnb-spacing .dnb-h--large:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--large:not([class*='space__bottom']) {
+  margin-bottom: 1rem; }
+
+.dnb-spacing .dnb-lead:not([class*='space__top']),
+.dnb-spacing .dnb-h--medium:not([class*='space__top']),
+.dnb-spacing .dnb-h--basis:not([class*='space__top']),
+.dnb-spacing .dnb-h--small:not([class*='space__top']),
+.dnb-spacing .dnb-h--x-small:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-lead:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--medium:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--basis:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--small:not([class*='space__top']),
+.dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*='space__top']) {
+  margin-top: 2rem; }
+
+.dnb-spacing .dnb-lead:not([class*='space__bottom']),
+.dnb-spacing .dnb-h--medium:not([class*='space__bottom']),
+.dnb-spacing .dnb-h--basis:not([class*='space__bottom']),
+.dnb-spacing .dnb-h--small:not([class*='space__bottom']),
+.dnb-spacing .dnb-h--x-small:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-lead:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--medium:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--basis:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--small:not([class*='space__bottom']),
+.dnb-core-style .dnb-spacing .dnb-h--x-small:not([class*='space__bottom']) {
+  margin-bottom: 1rem; }
+
+.dnb-spacing .dnb-p:not([class*='dnb-space']),
+.dnb-core-style .dnb-spacing .dnb-p:not([class*='dnb-space']) {
+  margin-top: 0;
+  margin-bottom: 1.5rem; }
+
+/*
+ * Blockquote
+ *
+ */
+.dnb-blockquote {
+  display: inline-block;
+  width: auto;
+  padding: 1.5rem;
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  line-height: 1.25rem;
+  line-height: var(--line-height-small);
+  color: #a5e1d2;
+  color: var(--color-mint-green);
+  background-color: #00343e;
+  background-color: var(--color-ocean-green);
+  border-radius: 1rem;
+  position: relative; }
+  .dnb-blockquote:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-blockquote::before {
+    content: '';
+    position: absolute;
+    top: 2rem;
+    left: 1.5rem;
+    width: 3em;
+    height: 3em;
+    background-size: cover;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==); }
+  .dnb-blockquote, .dnb-blockquote.dnb-blockquote--left {
+    padding-left: 6rem;
+    padding-top: 2rem;
+    padding-bottom: 3rem; }
+  .dnb-blockquote.dnb-blockquote--top {
+    padding-left: 1.5rem;
+    padding-top: 6rem;
+    padding-bottom: 3rem; }
+  .dnb-blockquote.dnb-blockquote--no-background {
+    background-color: transparent;
+    color: currentColor;
+    color: var(--theme-color-black-80, currentColor); }
+    .dnb-blockquote.dnb-blockquote--no-background::before {
+      -webkit-filter: grayscale(1) brightness(24%);
+              filter: grayscale(1) brightness(24%); }
+  .dnb-blockquote .dnb-cite,
+  .dnb-blockquote .dnb-figcaption,
+  .dnb-blockquote cite,
+  .dnb-blockquote footer,
+  .dnb-blockquote figcaption {
+    display: block;
+    margin-top: 1rem;
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    font-style: italic; }
+    .dnb-blockquote .dnb-cite::before,
+    .dnb-blockquote .dnb-figcaption::before,
+    .dnb-blockquote cite::before,
+    .dnb-blockquote footer::before,
+    .dnb-blockquote figcaption::before {
+      content: '—';
+      display: inline-block;
+      padding-right: 0.5rem; }
+  .dnb-spacing .dnb-blockquote h1,
+  .dnb-spacing .dnb-blockquote h2,
+  .dnb-spacing .dnb-blockquote h3,
+  .dnb-spacing .dnb-blockquote .dnb-h--xx-large,
+  .dnb-spacing .dnb-blockquote .dnb-h--large,
+  .dnb-spacing .dnb-blockquote .dnb-h--medium,
+  .dnb-spacing .dnb-blockquote .dnb-lead {
+    margin: 0; }
+  .dnb-blockquote .dnb-anchor {
+    font-size: inherit; }
+  .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) a {
+    color: #fff;
+    color: var(--color-white);
+    -webkit-box-shadow: 0 0.09375rem 0 0 #fff;
+            box-shadow: 0 0.09375rem 0 0 #fff;
+    -webkit-box-shadow: 0 0.09375rem 0 0 var(--color-white);
+            box-shadow: 0 0.09375rem 0 0 var(--color-white); }
+    .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:hover, .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active,
+    .dnb-blockquote:not(.dnb-blockquote--no-background) a:hover,
+    .dnb-blockquote:not(.dnb-blockquote--no-background) a:active {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      background-color: #fff;
+      background-color: var(--color-white);
+      -webkit-box-shadow: none;
+              box-shadow: none; }
+    .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:active,
+    .dnb-blockquote:not(.dnb-blockquote--no-background) a:active {
+      color: #14555a;
+      color: var(--color-emerald-green);
+      background-color: #fff;
+      background-color: var(--color-white); }
+    .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus,
+    .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus {
+      color: #fff;
+      color: var(--color-white);
+      background-color: transparent;
+      outline: none; }
+      html[data-whatinput='keyboard'] .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard']
+      .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus {
+        --border-color: var(--color-white);
+        -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                box-shadow: 0 0 0 0.125rem var(--border-color);
+        border-color: transparent; }
+        @media screen and (-ms-high-contrast: none) {
+          html[data-whatinput='keyboard'] .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-anchor:not(:disabled):focus, html[data-whatinput='keyboard']
+          .dnb-blockquote:not(.dnb-blockquote--no-background) a:not(:disabled):focus {
+            -webkit-box-shadow: 0 0 0 0.125rem #fff;
+                    box-shadow: 0 0 0 0.125rem #fff;
+            -webkit-box-shadow: 0 0 0 0.125rem var(--color-white);
+                    box-shadow: 0 0 0 0.125rem var(--color-white); } }
+  .dnb-blockquote:not(.dnb-blockquote--no-background) h1,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) h2,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) h3,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--xx-large,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--large,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-h--medium,
+  .dnb-blockquote:not(.dnb-blockquote--no-background) .dnb-lead {
+    color: #a5e1d2;
+    color: var(--color-mint-green); }
+
+.dnb-spacing .dnb-blockquote:not([class*='dnb-space']) {
+  margin-top: 0;
+  margin-bottom: 1.5rem; }
+
+.dnb-spacing .dnb-blockquote p:last-child {
+  margin-bottom: 0; }
+
+/*
+ * Lists
+ *
+ */
+.dnb-ul {
+  padding: 0;
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: currentColor;
+  color: var(--theme-color-black-80, currentColor); }
+  .dnb-ul:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-ul:not([class*='dnb-space__left']) {
+    padding-left: 2rem; }
+  .dnb-ul ul,
+  .dnb-ul ol {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    padding-left: 2rem; }
+  .dnb-ul li,
+  .dnb-ul--outside li {
+    position: relative; }
+    .dnb-ul li::before,
+    .dnb-ul--outside li::before {
+      position: absolute;
+      left: -10rem;
+      width: 10rem;
+      padding-right: 0.25rem;
+      text-align: right; }
+  .dnb-ul--inside li::before {
+    position: relative;
+    left: 0;
+    width: auto;
+    padding-right: 0;
+    text-align: left;
+    text-align: initial; }
+  .dnb-ul .dnb-anchor {
+    font-size: inherit; }
+  .dnb-ul li {
+    display: list-item;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem; }
+
+.dnb-ol {
+  padding: 0;
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: currentColor;
+  color: var(--theme-color-black-80, currentColor);
+  color: currentColor;
+  color: var(--theme-color-black-80, currentColor); }
+  .dnb-ol:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-ol:not([class*='dnb-space__left']) {
+    padding-left: 2rem; }
+  .dnb-ol ul,
+  .dnb-ol ol {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    padding-left: 2rem; }
+  .dnb-ol li,
+  .dnb-ol--outside li {
+    position: relative; }
+    .dnb-ol li::before,
+    .dnb-ol--outside li::before {
+      position: absolute;
+      left: -10rem;
+      width: 10rem;
+      padding-right: 0.25rem;
+      text-align: right; }
+  .dnb-ol--inside li::before {
+    position: relative;
+    left: 0;
+    width: auto;
+    padding-right: 0;
+    text-align: left;
+    text-align: initial; }
+  .dnb-ol .dnb-anchor {
+    font-size: inherit; }
+  .dnb-ol li {
+    display: list-item;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem; }
+  .dnb-ol ul,
+  .dnb-ol ol {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    padding-left: 2rem; }
+  .dnb-ol li,
+  .dnb-ol--outside li {
+    position: relative; }
+    .dnb-ol li::before,
+    .dnb-ol--outside li::before {
+      position: absolute;
+      left: -10rem;
+      width: 10rem;
+      padding-right: 0.25rem;
+      text-align: right; }
+  .dnb-ol--inside li::before {
+    position: relative;
+    left: 0;
+    width: auto;
+    padding-right: 0;
+    text-align: left;
+    text-align: initial; }
+  .dnb-ol .dnb-anchor {
+    font-size: inherit; }
+  .dnb-ol li {
+    list-style-type: decimal; }
+  .dnb-ol--nested,
+  .dnb-ol--nested ol {
+    counter-reset: item; }
+  .dnb-ol--nested li {
+    display: block; }
+    .dnb-ol--nested li::before {
+      content: counters(item, ".") ". ";
+      counter-increment: item; }
+    .dnb-ol--nested li li::before {
+      content: counters(item, ".") " ";
+      counter-increment: item; }
+  .dnb-ol[type] li {
+    display: list-item;
+    list-style-type: inherit; }
+    .dnb-ol[type] li::before,
+    .dnb-ol[type] li li::before {
+      content: none; }
+
+.dnb-dl {
+  padding: 0;
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: currentColor;
+  color: var(--theme-color-black-80, currentColor); }
+  .dnb-dl:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-dl > dt {
+    padding: 0;
+    font-weight: 500;
+    font-weight: var(--font-weight-medium); }
+  .dnb-dl dt {
+    margin-top: 1rem; }
+  .dnb-dl dd ~ dt {
+    margin-top: 1.5rem; }
+  .dnb-dl > dd {
+    padding: 0;
+    margin: 0.5rem 0 1rem; }
+  .dnb-dl > dl,
+  .dnb-dl:not([class*='dnb-space']) > dl {
+    margin-top: 1.5rem;
+    margin-left: 2rem; }
+
+.dnb-spacing .dnb-ul:not([class*='dnb-space']),
+.dnb-spacing .dnb-ol:not([class*='dnb-space']) {
+  margin-top: 0;
+  margin-bottom: 1.5rem; }
+
+.dnb-spacing .dnb-ul > li,
+.dnb-spacing .dnb-ol > li {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  /* stylelint-disable-next-line */ }
+  .dnb-spacing .dnb-ul > li > p,
+  .dnb-spacing .dnb-ol > li > p {
+    margin-top: 1rem; }
+
+.dnb-spacing .dnb-ul li > ul,
+.dnb-spacing .dnb-ul:not([class*='dnb-space']) li > ul,
+.dnb-spacing .dnb-ul li > ol,
+.dnb-spacing .dnb-ul:not([class*='dnb-space']) li > ol,
+.dnb-spacing .dnb-ol li > ul,
+.dnb-spacing .dnb-ol:not([class*='dnb-space']) li > ul,
+.dnb-spacing .dnb-ol li > ol,
+.dnb-spacing .dnb-ol:not([class*='dnb-space']) li > ol {
+  margin-top: -0.5rem; }
+
+.dnb-spacing .dnb-dl:not([class*='dnb-space']) {
+  margin-top: 0;
+  margin-bottom: 1.5rem; }
+
+.dnb-unstyled-list {
+  list-style-type: none; }
+  .dnb-unstyled-list:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-unstyled-list:not([class*='dnb-space__left']) {
+    padding-left: 0; }
+  .dnb-unstyled-list > li {
+    list-style-type: none; }
+    .dnb-unstyled-list > li::before {
+      content: none; }
+  .dnb-unstyled-list > dl,
+  .dnb-unstyled-list > dd {
+    margin-left: 0; }
+
+/*
+ * Table
+ *
+ */
+/*
+* Button mixins
+*
+*/
+.dnb-table {
+  display: table;
+  table-layout: auto;
+  width: 100%;
+  overflow: auto;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-small);
+  border-spacing: 0;
+  border-collapse: collapse;
+  /* stylelint-disable-next-line */
+  /* stylelint-disable-next-line */
+  /* stylelint-disable-next-line */
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-table--fixed {
+    table-layout: fixed; }
+  .dnb-table__sticky-helper > td {
+    display: block;
+    overflow: hidden;
+    padding: 0 !important;
+    height: 0; }
+  .dnb-table > tr > th,
+  .dnb-table > tr > td,
+  .dnb-table > thead > tr > th,
+  .dnb-table > tbody > tr > td,
+  .dnb-table .dnb-table__th,
+  .dnb-table .dnb-table__td {
+    border-bottom: 1px solid transparent;
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+    word-break: keep-all; }
+  .dnb-table > tr > th,
+  .dnb-table > thead > tr > th,
+  .dnb-table .dnb-table__th {
+    padding: 3rem 1rem 0.5rem;
+    padding: var(--spacing-x-large) var(--spacing-small) var(--spacing-x-small);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium);
+    color: #14555a;
+    color: var(--color-emerald-green);
+    vertical-align: bottom;
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50);
+    border-bottom: 1px solid #a5e1d2;
+    border-bottom: 1px solid var(--color-mint-green); }
+    .dnb-table > tr > th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),
+    .dnb-table > thead > tr > th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center),
+    .dnb-table .dnb-table__th:not([align]):not(.dnb-table--left):not(.dnb-table--right):not(.dnb-table--center) {
+      text-align: inherit; }
+    @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
+      .dnb-table > tr > th,
+      .dnb-table > thead > tr > th,
+      .dnb-table .dnb-table__th {
+        padding-bottom: calc(0.5rem - 0.5px);
+        padding-bottom: calc(var(--spacing-x-small) - 0.5px); } }
+  .dnb-table > thead > tr > th.dnb-table--sortable,
+  .dnb-table .dnb-table__th.dnb-table--sortable {
+    color: #14555a;
+    color: var(--color-emerald-green); }
+    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor,
+    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button {
+      position: relative;
+      z-index: 1;
+      -webkit-box-align: end;
+          -ms-flex-align: end;
+              align-items: flex-end;
+      -webkit-box-shadow: none;
+              box-shadow: none;
+      line-height: 1.5rem;
+      line-height: var(--line-height-basis);
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+      color: inherit;
+      font-weight: 500;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
+        opacity: 0;
+        -webkit-transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
+        transition: opacity 200ms ease-out, -webkit-transform 500ms ease-out;
+        transition: opacity 200ms ease-out, transform 500ms ease-out;
+        transition: opacity 200ms ease-out, transform 500ms ease-out, -webkit-transform 500ms ease-out; }
+        [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
+          -webkit-transition: none;
+          transition: none; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text {
+        margin: 0;
+        font-size: inherit; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text::after {
+          right: 1rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__icon {
+        -ms-flex-item-align: end;
+            align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: #14555a;
+        color: var(--color-emerald-green); }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover[disabled] {
+        cursor: not-allowed; }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) {
+        color: #007272;
+        color: var(--color-sea-green); }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
+          opacity: 1; }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after {
+          opacity: 0; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
+        content: '';
+        position: absolute;
+        top: -0.5rem;
+        bottom: -0.5rem;
+        left: -1rem;
+        right: 0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
+        right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon {
+        opacity: 1; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]) {
+        color: #14555a;
+        color: var(--color-emerald-green); }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: -0.5rem;
+          bottom: 0;
+          right: -0.5rem;
+          height: inherit;
+          border-radius: inherit;
+          outline: none; }
+          html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+            --border-color: var(--color-emerald-green);
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: none) {
+              html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                        box-shadow: 0 0 0 0.125rem #14555a;
+                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: -0.5rem;
+          bottom: 0;
+          right: -0.5rem;
+          height: inherit;
+          border-radius: inherit;
+          outline: none; }
+          html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+            --border-color: var(--color-emerald-green);
+            -webkit-box-shadow: 0 0 0 0.125rem var(--border-color);
+                    box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: none) {
+              html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+                -webkit-box-shadow: 0 0 0 0.125rem #14555a;
+                        box-shadow: 0 0 0 0.125rem #14555a;
+                -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
+                        box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          top: -0.5rem;
+          bottom: -0.5rem;
+          left: -1rem;
+          right: 0.5rem; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
+          right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after {
+    opacity: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor .dnb-icon,
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button .dnb-icon {
+    opacity: 1; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after {
+    color: #007272;
+    color: var(--color-sea-green);
+    opacity: 1; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+    visibility: visible; }
+  html[data-whatinput='keyboard']
+.dnb-table >
+thead > tr > th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table >
+thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after {
+    visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-anchor .dnb-icon,
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-anchor .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-button .dnb-icon {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg);
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%; }
+  .dnb-table > thead > tr > th.dnb-table--no-wrap,
+  .dnb-table > tbody > tr > th.dnb-table--no-wrap,
+  .dnb-table .dnb-table__th.dnb-table--no-wrap {
+    white-space: nowrap; }
+  .dnb-table > tr > td,
+  .dnb-table > tbody > tr > td,
+  .dnb-table .dnb-table__td,
+  .dnb-table > tr > th[scope='row'] {
+    padding: 1rem;
+    padding: var(--spacing-small);
+    padding-top: 1.25rem;
+    padding-top: calc(1rem * 1.25);
+    padding-top: calc(var(--spacing-small)*1.25);
+    padding-top: calc(var(--spacing-small) * 1.25);
+    padding-bottom: 1.188rem;
+    padding-bottom: calc(1rem * 1.188);
+    padding-bottom: calc(var(--spacing-small)*1.188);
+    padding-bottom: calc(var(--spacing-small) * 1.188);
+    /* 19/16 */
+    color: currentColor;
+    color: var(--theme-color-black-80, currentColor); }
+  .dnb-table > tbody > tr:not(.dnb-table--ignore),
+  .dnb-table .dnb-table__tr:not(.dnb-table--ignore),
+  .dnb-table .dnb-table--odd:not(.dnb-table--ignore) {
+    background-color: #fff;
+    background-color: var(--color-white); }
+  .dnb-table > tbody > tr:not(.dnb-table--odd):nth-of-type(2n):not(.dnb-table--ignore),
+  .dnb-table .dnb-table__tr:not(.dnb-table--odd):nth-of-type(2n):not(.dnb-table--ignore),
+  .dnb-table .dnb-table--even:not(.dnb-table--ignore) {
+    background-color: #f4fbf9;
+    background-color: var(--color-mint-green-12); }
+  .dnb-table > tbody > tr:last-of-type > td,
+  .dnb-table .dnb-table__tr:last-of-type .dnb-table__td {
+    border-bottom: 1px solid #d2f0e9;
+    border-bottom: 1px solid var(--color-mint-green-50); }
+  .dnb-table, .dnb-table--left {
+    text-align: left; }
+  .dnb-table--right {
+    text-align: right; }
+  .dnb-table--center {
+    text-align: center; }
+  .dnb-table > caption {
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    margin-top: 0.5rem;
+    margin-top: var(--spacing-x-small);
+    caption-side: bottom; }
+  .dnb-table tr.sticky {
+    top: 0; }
+  .dnb-table tr.sticky th {
+    position: sticky;
+    top: inherit;
+    z-index: 2; }
+    .dnb-table tr.sticky th::after {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 6px;
+      -webkit-box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+              box-shadow: 0 -2px 12px 8px rgba(51, 51, 51, 0.08);
+      -webkit-box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+              box-shadow: var(--shadow-default-x) -2px 12px 8px var(--shadow-default-color);
+      -webkit-clip-path: inset(6px 0 -48px 0);
+              clip-path: inset(6px 0 -48px 0);
+      -webkit-transition: opacity 300ms ease-out;
+      transition: opacity 300ms ease-out; }
+      [data-visual-test-wrapper] .dnb-table tr.sticky th::after {
+        -webkit-transition: none;
+        transition: none; }
+  .dnb-table tr.sticky.show-shadow th::after {
+    opacity: 1; }
+  .dnb-table--small,
+  .dnb-table--small > tr > th,
+  .dnb-table--small > tr > td,
+  .dnb-table--small > thead > tr > th,
+  .dnb-table--small > tbody > tr > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr.dnb-table--small > th,
+  .dnb-table > tr.dnb-table--small > td,
+  .dnb-table > thead > tr.dnb-table--small > th,
+  .dnb-table > tbody > tr.dnb-table--small > td {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table > tr > th.dnb-table--small,
+  .dnb-table > tr > td.dnb-table--small,
+  .dnb-table > thead > tr > th.dnb-table--small,
+  .dnb-table > tbody > tr > td.dnb-table--small, .dnb-table__th.dnb-table--small, .dnb-table__td.dnb-table--small {
+    font-size: 1rem;
+    font-size: var(--font-size-small); }
+  .dnb-table--x-small,
+  .dnb-table--x-small > tr > th,
+  .dnb-table--x-small > tr > td,
+  .dnb-table--x-small > thead > tr > th,
+  .dnb-table--x-small > tbody > tr > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr.dnb-table--x-small > th,
+  .dnb-table > tr.dnb-table--x-small > td,
+  .dnb-table > thead > tr.dnb-table--x-small > th,
+  .dnb-table > tbody > tr.dnb-table--x-small > td {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table > tr > th.dnb-table--x-small,
+  .dnb-table > tr > td.dnb-table--x-small,
+  .dnb-table > thead > tr > th.dnb-table--x-small,
+  .dnb-table > tbody > tr > td.dnb-table--x-small, .dnb-table__th.dnb-table--x-small, .dnb-table__td.dnb-table--x-small {
+    font-size: 0.875rem;
+    font-size: var(--font-size-x-small); }
+  .dnb-table.dnb-skeleton > * {
+    -webkit-text-fill-color: #ebebeb;
+    -webkit-text-fill-color: var(--skeleton-color); }
+
+.dnb-spacing .dnb-table p,
+.dnb-spacing .dnb-table ul,
+.dnb-spacing .dnb-table ol,
+.dnb-spacing .dnb-table dl,
+.dnb-spacing .dnb-table pre {
+  margin-top: 0;
+  margin-bottom: 0; }
+
+/*
+ * Label
+ *
+ */
+.dnb-label {
+  cursor: pointer;
+  color: #333;
+  color: var(--color-black-80);
+  word-wrap: break-word; }
+  .dnb-label[disabled] {
+    cursor: not-allowed; }
+
+/*
+ * Forms
+ *
+ */
+.dnb-form {
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis); }
+
+/*
+ * Code / Pre
+ *
+ */
+.dnb-code {
+  display: inline-block;
+  margin: -0.25em 0;
+  padding: 0.25em 0.25em;
+  /* 2px 4px */
+  font-size: inherit;
+  text-decoration: inherit;
+  line-height: 1em;
+  line-height: var(--line-height-xx-small--em);
+  color: inherit;
+  background-color: #e9f8f4;
+  background-color: var(--color-mint-green-25);
+  border-radius: 0.1875em; }
+  del .dnb-code {
+    text-decoration: line-through; }
+
+.dnb-pre {
+  display: block;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  color: #f4fbf9;
+  color: var(--color-mint-green-12);
+  background-color: #222;
+  white-space: pre;
+  vertical-align: baseline;
+  outline: none;
+  text-shadow: none;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  word-wrap: normal;
+  word-break: normal;
+  text-align: left;
+  word-spacing: normal;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
+  font-size: inherit;
+  font-family: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
+    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
+    monospace;
+  font-family: var(--font-family-monospace); }
+  .dnb-pre:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-pre pre {
+    padding: 1rem; }
+  .dnb-pre .dnb-spacing pre:not([class*='dnb-space']) {
+    margin-top: 0;
+    margin-bottom: 1.5rem; }
+  .dnb-pre.dnb-pre--focus {
+    --border-color: var(--color-sea-green);
+    -webkit-box-shadow: 0 0 0 0.25rem var(--border-color);
+            box-shadow: 0 0 0 0.25rem var(--border-color);
+    border-color: transparent; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-pre.dnb-pre--focus {
+        -webkit-box-shadow: 0 0 0 0.25rem #007272;
+                box-shadow: 0 0 0 0.25rem #007272;
+        -webkit-box-shadow: 0 0 0 0.25rem var(--color-sea-green);
+                box-shadow: 0 0 0 0.25rem var(--color-sea-green); } }
+
+.dnb-spacing .dnb-pre:not([class*='dnb-space']) {
+  margin-top: 0;
+  margin-bottom: 1.5rem; }
+
+.dnb-skeleton > .dnb-code {
+  background-color: transparent; }
+
+/*
+ * Image
+ *
+ */
+.dnb-img {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  padding: 0;
+  text-align: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center; }
+  .dnb-img:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-img img,
+  .dnb-img figcaption {
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis); }
+  .dnb-img img {
+    position: relative;
+    z-index: 2;
+    -webkit-box-sizing: content-box;
+            box-sizing: content-box;
+    max-width: 100%;
+    border-style: none;
+    border-radius: inherit; }
+    .dnb-img img[alt]::after {
+      content: attr(alt);
+      position: absolute;
+      z-index: 3;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+          -ms-flex-align: center;
+              align-items: center;
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center;
+      border-radius: inherit;
+      color: #333;
+      color: var(--color-black-80);
+      background-color: #ebebeb;
+      background-color: var(--color-black-8); }
+  .dnb-img figcaption {
+    margin-top: 0.5rem; }
+  .dnb-img__img--error {
+    color: #333;
+    color: var(--color-black-80);
+    background-color: #ebebeb;
+    background-color: var(--color-black-8); }
+
+/*
+ * Hr tag / line
+ *
+ */
+.dnb-hr {
+  position: relative;
+  padding: 0;
+  height: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  border: 0;
+  color: #333;
+  color: var(--color-black-80); }
+  .dnb-hr:not([class*='dnb-space']) {
+    margin: 0; }
+  .dnb-hr::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    color: inherit;
+    background-color: currentColor;
+    border-radius: 0.5px; }
+  .dnb-hr--fullscreen::after {
+    left: -50vw;
+    right: -50vw;
+    width: 200vw; }
+  .dnb-hr--light::after {
+    border-radius: 0.25px;
+    /* 
+    * 60% and 65% for best result on low res screens, like on Chromebook (Acer)
+    * Else the line will dissapear!
+    */
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, currentColor), color-stop(65%, transparent));
+    background-image: linear-gradient(to bottom, currentColor 60%, transparent 65%);
+    background-size: 100% 1px;
+    background-color: transparent; }
+  .dnb-hr--medium::after {
+    height: 2px;
+    border-radius: 0.75px;
+    /* Revert the hairline halv */
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(51%, currentColor), color-stop(51%, transparent));
+    background-image: linear-gradient(to bottom, currentColor 51%, transparent 51%);
+    background-size: 100% 3px;
+    background-color: transparent; }
+
+.dnb-spacing .dnb-hr:not([class*='dnb-space']) {
+  margin-top: 0;
+  margin-bottom: 1.5rem; }