@dnb/eufemia 10.76.1 → 10.77.0

package/cjs/style/dnb-ui-core--isolated.css

@@ -0,0 +1,776 @@
+@charset "UTF-8";
+/*
+* This package includes the DNB core styles
+*
+*/
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+/**
+ * 1. Use the default cursor in all browsers (opinionated).
+ * 2. Use the default user interface font in all browsers (opinionated).
+ * 3. Correct the line height in all browsers.
+ * 4. Use a 4-space tab width in all browsers (opinionated).
+ * 5. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ * 6. Breaks words to prevent overflow in all browsers (opinionated).
+ */
+html {
+  cursor: default; /* 1 */
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 2 */
+  line-height: var(--line-height-basis); /* 3 */ /* 4 */
+  tab-size: 4; /* 4 */ /* 5 */
+  -webkit-text-size-adjust: 100%;
+          text-size-adjust: 100%; /* 5 */
+  word-break: break-word; /* 6 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+body {
+  margin: 0;
+}
+
+html {
+  font-size: 100%;
+}
+html:not([data-visual-test]) .eufemia-scope--10_77_0 {
+  scroll-behavior: smooth;
+}
+@supports (-webkit-touch-callout: none) {
+  @supports (font: -apple-system-body) {
+    html {
+      font: -apple-system-body; /* stylelint-disable-line */
+    }
+  }
+}
+
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 .dnb-anchor--active {
+  color: var(--color-mint-green) !important;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 .dnb-anchor--contrast:not(:hover) {
+  color: var(--color-white) !important;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 a.dnb-button--primary {
+  color: var(--color-white);
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 .dnb-ul {
+  list-style: initial;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 .dnb-p {
+  overflow: initial;
+  text-align: inherit;
+  background-color: initial;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 i {
+  font-style: italic;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 #column_left,
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 #root {
+  width: 100%;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] body .eufemia-scope--10_77_0 #dnbLayoutDefault #wrapper,
+html[xmlns="http://www.w3.org/1999/xhtml"] body .eufemia-scope--10_77_0 #dnbLayoutDefaultStartPage #wrapper {
+  width: 100%;
+  padding: 0;
+}
+html[xmlns="http://www.w3.org/1999/xhtml"] .eufemia-scope--10_77_0 #column_content {
+  box-shadow: none;
+}
+
+body,
+.eufemia-scope--10_77_0 .dnb-core-style {
+  /**
+  * 1. Remove repeating backgrounds in all browsers (opinionated).
+  * 2. Add border box sizing in all browsers (opinionated).
+  */
+  /**
+  * 1. Add text decoration inheritance in all browsers (opinionated).
+  * 2. Add vertical alignment inheritance in all browsers (opinionated).
+  */
+  /* Grouping content
+   */
+  /**
+   * 1. Add the correct sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  /**
+   * Add the correct display in IE.
+   */
+  /**
+   * Remove the list style on navigation lists in all browsers (opinionated).
+   */
+  /* Text-level semantics
+   */
+  /**
+   * Add the correct text decoration in Edge, IE, Opera, and Safari.
+   */
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  /**
+   * 1. Use the default monospace user interface font
+   *    in all browsers (opinionated).
+   */
+  /*
+   * Remove the text shadow on text selections in Firefox 61- (opinionated).
+   * 1. Restore the coloring undone by defining the text shadow
+   *    in all browsers (opinionated).
+   */
+  /* Embedded content
+   */
+  /*
+   * Change the alignment on media elements in all browsers (opinionated).
+   */
+  /**
+   * Add the correct display in IE 9-.
+   */
+  /**
+   * Add the correct display in iOS 4-7.
+   */
+  /**
+   * Remove the border on images inside links in IE 10-.
+   */
+  /**
+   * Change the fill color to match the text color in all browsers (opinionated).
+   */
+  /**
+   * Hide the overflow in IE.
+   */
+  /* Tabular data
+   */
+  /**
+   * Collapse border spacing in all browsers (opinionated).
+   */
+  /* Forms
+   */
+  /**
+   * Inherit styling in all browsers (opinionated).
+   */
+  /**
+   * Remove the margin in Safari.
+   */
+  /**
+   * 1. Show the overflow in IE.
+   * 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
+   */
+  /**
+   * Show the overflow in Edge and IE.
+   * 1. Safari did inherit the break-word from html root
+   */
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   */
+  /**
+   * 1. Add the correct display in Edge and IE.
+   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  /**
+   * Remove the inheritance of text transform in Firefox.
+   */
+  /**
+   * 2. Remove the default vertical scrollbar in IE.
+   * 3. Change the resize direction on textareas in all browsers (opinionated).
+   */
+  /**
+   * Remove the padding in IE 10-.
+   */
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  /**
+   * Correct the cursor style of increment and decrement buttons in Safari.
+   */
+  /**
+   * Correct the text style of placeholders in Chrome, Edge, and Safari.
+   */
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  /**
+   * 1. Change font properties to `inherit` in Safari.
+   */
+  /**
+   * Remove the inner border and padding of focus outlines in Firefox.
+   */
+  /* Interactive
+   */
+  /*
+   * Add the correct display in Edge and IE.
+   */
+  /*
+   * Add the correct display in all browsers.
+   */
+  /* Scripting
+   */
+  /**
+   * Add the correct display in IE 9-.
+   */
+  /**
+   * Add the correct display in IE.
+   */
+  /* User interaction
+   */
+  /*
+   * 1. Remove the tapping delay in IE 10.
+   * 2. Remove the tapping delay on clickable elements
+        in all browsers (opinionated).
+   */
+  /**
+   * Add the correct display in IE 10-.
+   */
+  /* Accessibility
+   */
+  /**
+   * Change the cursor on busy elements in all browsers (opinionated).
+   */
+  /*
+   * Change the cursor on control elements in all browsers (opinionated).
+   */
+  /*
+   * Change the cursor on disabled, not-editable, or otherwise
+   * inoperable elements in all browsers (opinionated).
+   */
+  /*
+   * Change the display on visually hidden accessible elements
+   * in all browsers (opinionated).
+   */
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-basis);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: var(--line-height-basis);
+  color: var(--theme-color-body, var(--color-black-80, #333));
+  /* stylelint-disable-next-line */
+  -moz-osx-font-smoothing: grayscale;
+  /* stylelint-disable-next-line */
+  -webkit-font-smoothing: antialiased;
+  /* stylelint-disable-next-line */
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  tab-size: 4;
+  /* stylelint-disable-next-line */
+  -moz-tab-size: 4;
+  /* stylelint-disable-next-line */
+  -ms-text-size-adjust: 100%;
+  /* stylelint-disable-next-line */
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word;
+  --eufemia-version: "10.77.0";
+}
+body .eufemia-scope--10_77_0 *,
+body .eufemia-scope--10_77_0 ::before,
+body .eufemia-scope--10_77_0 ::after,
+.eufemia-scope--10_77_0 .dnb-core-style *,
+.eufemia-scope--10_77_0 .dnb-core-style ::before,
+.eufemia-scope--10_77_0 .dnb-core-style ::after {
+  background-repeat: no-repeat; /* 1 */
+  box-sizing: border-box; /* 2 */
+}
+body .eufemia-scope--10_77_0 ::before,
+body .eufemia-scope--10_77_0 ::after,
+.eufemia-scope--10_77_0 .dnb-core-style ::before,
+.eufemia-scope--10_77_0 .dnb-core-style ::after {
+  text-decoration: inherit; /* 1 */
+  vertical-align: inherit; /* 2 */
+}
+body .eufemia-scope--10_77_0 hr,
+.eufemia-scope--10_77_0 .dnb-core-style hr {
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+body .eufemia-scope--10_77_0 main,
+.eufemia-scope--10_77_0 .dnb-core-style main {
+  display: block;
+}
+body .eufemia-scope--10_77_0 nav ol,
+body .eufemia-scope--10_77_0 nav ul,
+.eufemia-scope--10_77_0 .dnb-core-style nav ol,
+.eufemia-scope--10_77_0 .dnb-core-style nav ul {
+  list-style: none;
+}
+body .eufemia-scope--10_77_0 abbr[title],
+.eufemia-scope--10_77_0 .dnb-core-style abbr[title] {
+  text-decoration: underline;
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+body .eufemia-scope--10_77_0 b,
+body .eufemia-scope--10_77_0 strong,
+.eufemia-scope--10_77_0 .dnb-core-style b,
+.eufemia-scope--10_77_0 .dnb-core-style strong {
+  font-weight: bolder;
+}
+body .eufemia-scope--10_77_0 pre,
+body .eufemia-scope--10_77_0 code,
+body .eufemia-scope--10_77_0 kbd,
+body .eufemia-scope--10_77_0 samp,
+.eufemia-scope--10_77_0 .dnb-core-style pre,
+.eufemia-scope--10_77_0 .dnb-core-style code,
+.eufemia-scope--10_77_0 .dnb-core-style kbd,
+.eufemia-scope--10_77_0 .dnb-core-style samp {
+  font-family: var(--font-family-monospace); /* 1 */
+}
+body .eufemia-scope--10_77_0 ::selection,
+.eufemia-scope--10_77_0 .dnb-core-style ::selection {
+  background-color: #b3d4fc; /* 1 */
+  color: #000; /* 1 */
+  text-shadow: none;
+}
+body .eufemia-scope--10_77_0 audio,
+body .eufemia-scope--10_77_0 canvas,
+body .eufemia-scope--10_77_0 iframe,
+body .eufemia-scope--10_77_0 img,
+body .eufemia-scope--10_77_0 svg,
+body .eufemia-scope--10_77_0 video,
+.eufemia-scope--10_77_0 .dnb-core-style audio,
+.eufemia-scope--10_77_0 .dnb-core-style canvas,
+.eufemia-scope--10_77_0 .dnb-core-style iframe,
+.eufemia-scope--10_77_0 .dnb-core-style img,
+.eufemia-scope--10_77_0 .dnb-core-style svg,
+.eufemia-scope--10_77_0 .dnb-core-style video {
+  vertical-align: middle;
+}
+body .eufemia-scope--10_77_0 audio,
+body .eufemia-scope--10_77_0 video,
+.eufemia-scope--10_77_0 .dnb-core-style audio,
+.eufemia-scope--10_77_0 .dnb-core-style video {
+  display: inline-block;
+}
+body .eufemia-scope--10_77_0 audio:not([controls]),
+.eufemia-scope--10_77_0 .dnb-core-style audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+body .eufemia-scope--10_77_0 img,
+.eufemia-scope--10_77_0 .dnb-core-style img {
+  border-style: none;
+}
+body .eufemia-scope--10_77_0 svg:not([fill]),
+.eufemia-scope--10_77_0 .dnb-core-style svg:not([fill]) {
+  fill: currentcolor;
+}
+body .eufemia-scope--10_77_0 svg:not(:root),
+.eufemia-scope--10_77_0 .dnb-core-style svg:not(:root) {
+  overflow: hidden;
+}
+body .eufemia-scope--10_77_0 table,
+.eufemia-scope--10_77_0 .dnb-core-style table {
+  border-collapse: collapse;
+}
+body .eufemia-scope--10_77_0 button,
+body .eufemia-scope--10_77_0 input,
+body .eufemia-scope--10_77_0 select,
+body .eufemia-scope--10_77_0 textarea,
+.eufemia-scope--10_77_0 .dnb-core-style button,
+.eufemia-scope--10_77_0 .dnb-core-style input,
+.eufemia-scope--10_77_0 .dnb-core-style select,
+.eufemia-scope--10_77_0 .dnb-core-style textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+body .eufemia-scope--10_77_0 figure,
+body .eufemia-scope--10_77_0 button,
+body .eufemia-scope--10_77_0 input,
+body .eufemia-scope--10_77_0 select,
+.eufemia-scope--10_77_0 .dnb-core-style figure,
+.eufemia-scope--10_77_0 .dnb-core-style button,
+.eufemia-scope--10_77_0 .dnb-core-style input,
+.eufemia-scope--10_77_0 .dnb-core-style select {
+  margin: 0;
+}
+body .eufemia-scope--10_77_0 button,
+.eufemia-scope--10_77_0 .dnb-core-style button {
+  overflow: visible; /* 1 */
+  text-transform: none; /* 2 */
+}
+body .eufemia-scope--10_77_0 input,
+.eufemia-scope--10_77_0 .dnb-core-style input {
+  overflow: visible;
+  word-break: normal; /* 1 */
+}
+body .eufemia-scope--10_77_0 legend,
+.eufemia-scope--10_77_0 .dnb-core-style legend {
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  white-space: normal; /* 1 */
+}
+body .eufemia-scope--10_77_0 progress,
+.eufemia-scope--10_77_0 .dnb-core-style progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+body .eufemia-scope--10_77_0 select,
+.eufemia-scope--10_77_0 .dnb-core-style select {
+  text-transform: none;
+}
+body .eufemia-scope--10_77_0 textarea,
+.eufemia-scope--10_77_0 .dnb-core-style textarea {
+  overflow: auto; /* 2 */
+  resize: vertical; /* 3 */
+}
+body .eufemia-scope--10_77_0 [type=checkbox],
+body .eufemia-scope--10_77_0 [type=radio],
+.eufemia-scope--10_77_0 .dnb-core-style [type=checkbox],
+.eufemia-scope--10_77_0 .dnb-core-style [type=radio] {
+  padding: 0;
+}
+body .eufemia-scope--10_77_0 input[type=search],
+.eufemia-scope--10_77_0 .dnb-core-style input[type=search] {
+  -webkit-appearance: textfield;
+          appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+body .eufemia-scope--10_77_0 ::-webkit-inner-spin-button,
+body .eufemia-scope--10_77_0 ::-webkit-outer-spin-button,
+.eufemia-scope--10_77_0 .dnb-core-style ::-webkit-inner-spin-button,
+.eufemia-scope--10_77_0 .dnb-core-style ::-webkit-outer-spin-button {
+  height: auto;
+}
+body .eufemia-scope--10_77_0 ::input-placeholder,
+.eufemia-scope--10_77_0 .dnb-core-style ::input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+body .eufemia-scope--10_77_0 ::-webkit-search-decoration,
+.eufemia-scope--10_77_0 .dnb-core-style ::-webkit-search-decoration {
+  -webkit-appearance: none;
+          appearance: none;
+}
+body .eufemia-scope--10_77_0 ::-webkit-file-upload-button,
+.eufemia-scope--10_77_0 .dnb-core-style ::-webkit-file-upload-button {
+  font: inherit; /* 1 */
+  background-color: transparent;
+  border: none;
+}
+body .eufemia-scope--10_77_0 ::-moz-focus-inner,
+.eufemia-scope--10_77_0 .dnb-core-style ::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+body .eufemia-scope--10_77_0 details,
+.eufemia-scope--10_77_0 .dnb-core-style details {
+  display: block;
+}
+body .eufemia-scope--10_77_0 summary,
+.eufemia-scope--10_77_0 .dnb-core-style summary {
+  display: list-item;
+}
+body .eufemia-scope--10_77_0 canvas,
+.eufemia-scope--10_77_0 .dnb-core-style canvas {
+  display: inline-block;
+}
+body .eufemia-scope--10_77_0 template,
+.eufemia-scope--10_77_0 .dnb-core-style template {
+  display: none;
+}
+body .eufemia-scope--10_77_0 a,
+body .eufemia-scope--10_77_0 area,
+body .eufemia-scope--10_77_0 button,
+body .eufemia-scope--10_77_0 input,
+body .eufemia-scope--10_77_0 label,
+body .eufemia-scope--10_77_0 select,
+body .eufemia-scope--10_77_0 summary,
+body .eufemia-scope--10_77_0 textarea,
+body .eufemia-scope--10_77_0 [tabindex],
+.eufemia-scope--10_77_0 .dnb-core-style a,
+.eufemia-scope--10_77_0 .dnb-core-style area,
+.eufemia-scope--10_77_0 .dnb-core-style button,
+.eufemia-scope--10_77_0 .dnb-core-style input,
+.eufemia-scope--10_77_0 .dnb-core-style label,
+.eufemia-scope--10_77_0 .dnb-core-style select,
+.eufemia-scope--10_77_0 .dnb-core-style summary,
+.eufemia-scope--10_77_0 .dnb-core-style textarea,
+.eufemia-scope--10_77_0 .dnb-core-style [tabindex] {
+  /* 1 */
+  touch-action: manipulation; /* 2 */
+}
+body .eufemia-scope--10_77_0 [hidden],
+.eufemia-scope--10_77_0 .dnb-core-style [hidden] {
+  display: none;
+}
+body .eufemia-scope--10_77_0 [aria-busy=true],
+.eufemia-scope--10_77_0 .dnb-core-style [aria-busy=true] {
+  cursor: progress;
+}
+body .eufemia-scope--10_77_0 [aria-controls]:not(input),
+.eufemia-scope--10_77_0 .dnb-core-style [aria-controls]:not(input) {
+  cursor: pointer;
+}
+body .eufemia-scope--10_77_0 [aria-disabled=true],
+body .eufemia-scope--10_77_0 [disabled],
+.eufemia-scope--10_77_0 .dnb-core-style [aria-disabled=true],
+.eufemia-scope--10_77_0 .dnb-core-style [disabled] {
+  cursor: not-allowed;
+}
+body .eufemia-scope--10_77_0 [aria-hidden=false][hidden]:not(:focus),
+.eufemia-scope--10_77_0 .dnb-core-style [aria-hidden=false][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  display: inherit;
+  position: absolute;
+}
+@media print {
+  body,
+  .eufemia-scope--10_77_0 .dnb-core-style {
+    background-color: white;
+    color: black;
+  }
+}
+body .eufemia-scope--10_77_0 .eufemia-theme,
+.eufemia-scope--10_77_0 .dnb-core-style .eufemia-theme {
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-basis);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: var(--line-height-basis);
+  color: var(--theme-color-body, var(--color-black-80, #333));
+}
+
+/*
+ * Helper Classes
+ *
+ */
+/*
+ * Utilities
+ */
+.eufemia-scope--10_77_0 .dnb-no-focus {
+  outline: none;
+}
+
+.eufemia-scope--10_77_0 .dnb-tab-focus {
+  outline: none;
+}
+.eufemia-scope--10_77_0 .dnb-tab-focus:focus {
+  outline: none;
+}
+html[data-whatinput=keyboard] .eufemia-scope--10_77_0 .dnb-tab-focus:focus {
+  --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-mouse-focus {
+  outline: none;
+}
+.eufemia-scope--10_77_0 .dnb-mouse-focus:focus {
+  outline: none;
+}
+html[data-whatinput=mouse] .eufemia-scope--10_77_0 .dnb-mouse-focus:focus {
+  --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-focus-ring {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color) !important;
+  border-color: transparent;
+}
+
+.eufemia-scope--10_77_0 .dnb-scrollbar-appearance {
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: auto;
+  scrollbar-color: var(--scrollbar-thumb-color, #888) transparent;
+}
+@supports not (scrollbar-color: auto) {
+  .eufemia-scope--10_77_0 .dnb-scrollbar-appearance::-webkit-scrollbar {
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+    background-color: var(--scrollbar-track-color, #eee);
+  }
+  .eufemia-scope--10_77_0 .dnb-scrollbar-appearance::-webkit-scrollbar:vertical {
+    width: var(--scrollbar-track-width, 0.5rem);
+  }
+  .eufemia-scope--10_77_0 .dnb-scrollbar-appearance::-webkit-scrollbar:horizontal {
+    height: var(--scrollbar-track-width, 0.5rem);
+  }
+  .eufemia-scope--10_77_0 .dnb-scrollbar-appearance::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-color, #888);
+    border-radius: var(--scrollbar-thumb-width, 0.5rem);
+  }
+  .eufemia-scope--10_77_0 .dnb-scrollbar-appearance::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover-color, #666);
+  }
+}
+
+.dnb-skip-link {
+  position: absolute;
+  z-index: 0;
+  top: -100vh;
+  opacity: 0.3;
+  transition: opacity 0.3s ease-out;
+}
+
+.dnb-skip-link--active,
+.dnb-skip-link:focus {
+  position: fixed;
+  z-index: 9999;
+  top: 5%;
+  left: 40%;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  white-space: nowrap;
+  font-size: var(--font-size-basis);
+  color: var(--skip-link-color);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  user-select: none;
+  /* stylelint-disable-next-line */
+  -webkit-user-select: none;
+  outline: none;
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+.dnb-skip-link--active::after,
+.dnb-skip-link:focus::after {
+  content: "";
+  position: absolute;
+  z-index: -2;
+  left: -200vw;
+  top: -200vh;
+  width: 150vw;
+  height: 150vh;
+  background-color: rgba(255, 255, 255, 0.85);
+  box-shadow: 150vw 150vh 0 0 rgba(255, 255, 255, 0.85);
+}
+.dnb-skip-link--active::before,
+.dnb-skip-link:focus::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 1.5rem;
+  background-color: var(--skip-link-background);
+  outline: none;
+}
+html[data-whatinput=mouse] .dnb-skip-link--active::before,
+html[data-whatinput=mouse] .dnb-skip-link:focus::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-skip-link--active:hover::before,
+.dnb-skip-link:focus:hover::before {
+  background-color: var(--skip-link-background--hover);
+}
+.dnb-skip-link--active:active::before,
+.dnb-skip-link:focus:active::before {
+  background-color: var(--skip-link-background--active);
+}
+.dnb-skip-link--active:focus:not(:active)::before,
+.dnb-skip-link:focus:focus:not(:active)::before {
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-skip-link--active:focus:not(:active)::before,
+html[data-whatinput=keyboard] .dnb-skip-link:focus:focus:not(:active)::before {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-skip-link--active:focus,
+.dnb-skip-link:focus:focus {
+  opacity: 1;
+}
+.dnb-skip-link--active:hover,
+.dnb-skip-link:focus:hover {
+  color: var(--skip-link-color--hover);
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-skip-link--active:focus:not(:hover):not(:active),
+.dnb-skip-link:focus:focus:not(:hover):not(:active) {
+  color: var(--skip-link-color);
+  background-color: transparent;
+  box-shadow: none;
+}
+.dnb-skip-link--active:active,
+.dnb-skip-link:focus:active {
+  color: var(--skip-link-color--active);
+  background-color: transparent;
+}
+
+html[data-whatintent=touch] .dnb-skip-link {
+  display: none;
+}
+
+.eufemia-scope--10_77_0 .dnb-alignment-helper {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  font-size: var(--font-size-small);
+  speak: none;
+}
+.eufemia-scope--10_77_0 .dnb-alignment-helper::before {
+  content: "⁠";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  font-size: var(--font-size-small);
+  speak: none;
+  height: 100%;
+  vertical-align: top;
+  opacity: 0;
+}
+
+.eufemia-scope--10_77_0 .dnb-alignment-helper--pseudo-element-only::before {
+  content: "⁠";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  font-size: var(--font-size-small);
+  speak: none;
+  height: 100%;
+  vertical-align: top;
+  opacity: 0;
+}
+
+.eufemia-scope--10_77_0 .dnb-drop-shadow {
+  box-shadow: var(--shadow-default);
+}
+
+.eufemia-scope--10_77_0 .dnb-sr-only {
+  -webkit-user-select: none !important;
+          user-select: none !important;
+  -webkit-touch-callout: none !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  clip-path: inset(50%) !important;
+  max-width: 1px !important;
+  max-height: 1px !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border: 0 !important;
+}
+
+.eufemia-scope--10_77_0 .dnb-suffix {
+  padding-left: 0.5rem;
+  font-size: var(--font-size-basis);
+  line-height: var(--line-height-basis);
+  word-break: normal;
+}