@dnb/eufemia 9.15.2 → 9.16.3

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

@@ -0,0 +1,942 @@
+/*
+* This package includes the DNB core styles
+*
+*/
+/*
+ * 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); }
+
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+/*
+ * Typography
+ *
+ * The font-family properties are defined in the properties.scss file, like:
+ * --font-family-default:
+ *
+ */
+.dnb-typo-regular {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-style: normal; }
+
+.dnb-typo-medium {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-style: normal; }
+
+.dnb-typo-bold {
+  font-family: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: 600;
+  font-weight: var(--font-weight-bold);
+  font-style: normal; }
+
+.dnb-typo-mono-regular {
+  font-family: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
+    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
+    monospace;
+  font-family: var(--font-family-monospace);
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: DNB;
+  src: url("../assets/fonts/DNB-Regular.woff2") format("woff2"), url("../assets/fonts/DNB-Regular.woff") format("woff"), url("../assets/fonts/DNB-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: DNB;
+  src: url("../assets/fonts/DNB-Medium.woff2") format("woff2"), url("../assets/fonts/DNB-Medium.woff") format("woff"), url("../assets/fonts/DNB-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: DNB;
+  src: url("../assets/fonts/DNB-Bold.woff2") format("woff2"), url("../assets/fonts/DNB-Bold.woff") format("woff"), url("../assets/fonts/DNB-Bold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: fallback; }
+
+@font-face {
+  font-family: DNBMono;
+  src: url("../assets/fonts/DNBMono-Regular.woff2") format("woff2"), url("../assets/fonts/DNBMono-Regular.woff") format("woff"), url("../assets/fonts/DNBMono-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback; }
+
+/*
+ * Helper Classes
+ *
+ */
+.dnb-no-focus {
+  outline: none; }
+
+.dnb-tab-focus {
+  outline: none; }
+  .dnb-tab-focus:focus {
+    outline: none; }
+    html[data-whatinput='keyboard'] .dnb-tab-focus: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-tab-focus: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-mouse-focus {
+  outline: none; }
+  .dnb-mouse-focus:focus {
+    outline: none; }
+    html[data-whatinput='mouse'] .dnb-mouse-focus: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-mouse-focus: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-focus-ring {
+  --border-color: var(--color-emerald-green);
+  -webkit-box-shadow: 0 0 0 0.125rem var(--border-color) !important;
+          box-shadow: 0 0 0 0.125rem var(--border-color) !important;
+  border-color: transparent; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-focus-ring {
+      -webkit-box-shadow: 0 0 0 0.125rem #14555a !important;
+              box-shadow: 0 0 0 0.125rem #14555a !important;
+      -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green) !important;
+              box-shadow: 0 0 0 0.125rem var(--color-emerald-green) !important; } }
+
+.dnb-scrollbar-appearance {
+  -ms-scroll-chaining: none;
+      overscroll-behavior: contain;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: auto;
+  scrollbar-color: #14555a transparent;
+  scrollbar-color: var(--color-emerald-green) transparent; }
+
+.dnb-skip-link {
+  position: absolute;
+  z-index: 0;
+  top: -100vh;
+  opacity: 0.3;
+  -webkit-transition: opacity 0.3s ease-out;
+  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: 1.125rem;
+  font-size: var(--font-size-basis);
+  color: #007272;
+  color: var(--color-sea-green);
+  text-decoration: none;
+  text-align: center;
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  outline: none;
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+  -webkit-box-shadow: 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);
+    -webkit-box-shadow: 150vw 150vh 0 0 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: #fff;
+    background-color: var(--color-white);
+    outline: none; }
+    html[data-whatinput='mouse'] .dnb-skip-link--active::before, html[data-whatinput='mouse']
+    .dnb-skip-link:focus::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-skip-link--active::before, html[data-whatinput='mouse']
+        .dnb-skip-link:focus::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-skip-link--active:hover::before,
+  .dnb-skip-link:focus:hover::before {
+    background-color: #d2f0e9;
+    background-color: var(--color-mint-green-50); }
+  .dnb-skip-link--active:active::before,
+  .dnb-skip-link:focus:active::before {
+    background-color: #14555a;
+    background-color: var(--color-emerald-green); }
+  .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(--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-skip-link--active:focus:not(:active)::before, html[data-whatinput='keyboard']
+        .dnb-skip-link:focus:focus:not(:active)::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-skip-link--active:focus,
+  .dnb-skip-link:focus:focus {
+    opacity: 1; }
+  .dnb-skip-link--active:hover, .dnb-skip-link--active:focus:not(:hover):not(:active),
+  .dnb-skip-link:focus:hover,
+  .dnb-skip-link:focus:focus:not(:hover):not(:active) {
+    color: #007272;
+    color: var(--color-sea-green);
+    background-color: transparent;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  .dnb-skip-link--active:active,
+  .dnb-skip-link:focus:active {
+    color: #fff;
+    color: var(--color-white);
+    background-color: transparent; }
+
+html[data-whatintent='touch'] .dnb-skip-link {
+  display: none; }
+
+.dnb-alignment-helper {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  speak: none; }
+  .dnb-alignment-helper::before {
+    content: '\200C';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    font-size: 1rem;
+    font-size: var(--font-size-small);
+    speak: none; }
+
+.dnb-drop-shadow {
+  -webkit-box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+          box-shadow: 0 8px 16px rgba(51, 51, 51, 0.08);
+  -webkit-box-shadow: var(--shadow-default);
+          box-shadow: var(--shadow-default); }
+
+.dnb-sr-only {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+  pointer-events: none;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1px;
+  width: 1px;
+  margin: -1px 0 0 -1px;
+  padding: 0;
+  border: 0; }
+
+.dnb-sr-only--inline {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-touch-callout: none;
+  pointer-events: none;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1px;
+  width: 1px;
+  margin: -1px 0 0 -1px;
+  padding: 0;
+  border: 0;
+  position: static;
+  display: inline-block;
+  visibility: visible;
+  opacity: 0;
+  font-size: 0;
+  line-height: 0; }
+
+.dnb-not-sr-only {
+  position: static;
+  position: initial;
+  height: auto;
+  width: auto;
+  overflow: auto;
+  opacity: 1;
+  font-size: medium;
+  line-height: normal;
+  white-space: normal; }
+
+.dnb-suffix {
+  padding-left: 0.5rem;
+  font-size: 1.125rem;
+  font-size: var(--font-size-basis);
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  word-break: normal; }
+
+/**
+   * 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, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 2 */
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  /* 3 */
+  -moz-tab-size: 4;
+  /* 4 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 4 */
+  -ms-text-size-adjust: 100%;
+  /* 5 */
+  -webkit-text-size-adjust: 100%;
+  /* 5 */
+  word-break: break-word;
+  /* 6 */ }
+
+/**
+   * Remove the margin in all browsers (opinionated).
+   */
+body {
+  margin: 0; }
+
+html {
+  scroll-behavior: smooth;
+  font-size: 100%; }
+  @supports (-webkit-touch-callout: none) and (font: -apple-system-body) {
+      html {
+        font: -apple-system-body;
+        /* stylelint-disable-line */ } }
+
+a:hover {
+  text-decoration: none; }
+
+.dnb-anchor--active {
+  color: #a5e1d2 !important;
+  color: var(--color-mint-green) !important; }
+
+.dnb-anchor--contrast:not(:hover) {
+  color: #fff !important;
+  color: var(--color-white) !important; }
+
+a.dnb-button--primary {
+  color: #fff;
+  color: var(--color-white); }
+
+ul {
+  list-style: disc outside none;
+  list-style: initial; }
+
+p {
+  overflow: visible;
+  overflow: initial;
+  text-align: inherit;
+  background-color: transparent;
+  background-color: initial; }
+
+i {
+  font-style: italic; }
+
+#column_left,
+#root {
+  width: 100%; }
+
+body#dnbLayoutDefault #wrapper,
+body#dnbLayoutDefaultStartPage #wrapper {
+  width: 100%;
+  max-width: 60rem; }
+
+#column_content {
+  -webkit-box-shadow: none;
+          box-shadow: none; }
+
+body,
+.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).
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  /*
+   * 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 browers (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.
+   */
+  /**
+   * Correct the padding in Firefox.
+   */
+  /**
+   * 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: 'DNB', sans-serif;
+  font-family: var(--font-family-default);
+  font-weight: normal;
+  font-weight: var(--font-weight-basis);
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-style: normal;
+  line-height: 1.5rem;
+  line-height: var(--line-height-basis);
+  color: #333;
+  color: var(--color-black-80, #333);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  /**
+  * Ensure consistency and use the same as HTML reset -> html {...}
+  * between base and code package
+  */
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-break: break-word; }
+  body *,
+  body ::before,
+  body ::after,
+  .dnb-core-style *,
+  .dnb-core-style ::before,
+  .dnb-core-style ::after {
+    background-repeat: no-repeat;
+    /* 1 */
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    /* 2 */ }
+  body ::before,
+  body ::after,
+  .dnb-core-style ::before,
+  .dnb-core-style ::after {
+    text-decoration: inherit;
+    /* 1 */
+    vertical-align: inherit;
+    /* 2 */ }
+  body hr,
+  .dnb-core-style hr {
+    height: 0;
+    /* 1 */
+    overflow: visible;
+    /* 2 */ }
+  body main,
+  .dnb-core-style main {
+    display: block; }
+  body nav ol,
+  body nav ul,
+  .dnb-core-style nav ol,
+  .dnb-core-style nav ul {
+    list-style: none; }
+  body abbr[title],
+  .dnb-core-style abbr[title] {
+    text-decoration: underline;
+    -webkit-text-decoration: underline dotted;
+            text-decoration: underline dotted; }
+  body b,
+  body strong,
+  .dnb-core-style b,
+  .dnb-core-style strong {
+    font-weight: bolder; }
+  body pre,
+  body code,
+  body kbd,
+  body samp,
+  .dnb-core-style pre,
+  .dnb-core-style code,
+  .dnb-core-style kbd,
+  .dnb-core-style samp {
+    font-family: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
+    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
+    monospace;
+    font-family: var(--font-family-monospace);
+    /* 1 */
+    font-size: 1em;
+    font-size: var(--font-size-basis--em);
+    /* 2 */ }
+  body ::-moz-selection,
+  .dnb-core-style ::-moz-selection {
+    background-color: #b3d4fc;
+    /* 1 */
+    color: #000;
+    /* 1 */
+    text-shadow: none; }
+  body audio,
+  body canvas,
+  body iframe,
+  body img,
+  body svg,
+  body video,
+  .dnb-core-style audio,
+  .dnb-core-style canvas,
+  .dnb-core-style iframe,
+  .dnb-core-style img,
+  .dnb-core-style svg,
+  .dnb-core-style video {
+    vertical-align: middle; }
+  body audio,
+  body video,
+  .dnb-core-style audio,
+  .dnb-core-style video {
+    display: inline-block; }
+  body audio:not([controls]),
+  .dnb-core-style audio:not([controls]) {
+    display: none;
+    height: 0; }
+  body img,
+  .dnb-core-style img {
+    border-style: none; }
+  body svg:not([fill]),
+  .dnb-core-style svg:not([fill]) {
+    fill: currentColor; }
+  body svg:not(:root),
+  .dnb-core-style svg:not(:root) {
+    overflow: hidden; }
+  body table,
+  .dnb-core-style table {
+    border-collapse: collapse; }
+  body button,
+  body input,
+  body select,
+  body textarea,
+  .dnb-core-style button,
+  .dnb-core-style input,
+  .dnb-core-style select,
+  .dnb-core-style textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit; }
+  body figure,
+  body button,
+  body input,
+  body select,
+  .dnb-core-style figure,
+  .dnb-core-style button,
+  .dnb-core-style input,
+  .dnb-core-style select {
+    margin: 0; }
+  body button,
+  .dnb-core-style button {
+    overflow: visible;
+    /* 1 */
+    text-transform: none;
+    /* 2 */ }
+  body fieldset,
+  .dnb-core-style fieldset {
+    padding: 0.35rem 0.75rem 0.625rem; }
+  body input,
+  .dnb-core-style input {
+    overflow: visible;
+    word-break: normal;
+    /* 1 */ }
+  body legend,
+  .dnb-core-style legend {
+    color: inherit;
+    /* 2 */
+    display: table;
+    /* 1 */
+    max-width: 100%;
+    /* 1 */
+    white-space: normal;
+    /* 1 */ }
+  body progress,
+  .dnb-core-style progress {
+    display: inline-block;
+    /* 1 */
+    vertical-align: baseline;
+    /* 2 */ }
+  body select,
+  .dnb-core-style select {
+    text-transform: none; }
+  body textarea,
+  .dnb-core-style textarea {
+    overflow: auto;
+    /* 2 */
+    resize: vertical;
+    /* 3 */ }
+  body [type='checkbox'],
+  body [type='radio'],
+  .dnb-core-style [type='checkbox'],
+  .dnb-core-style [type='radio'] {
+    padding: 0; }
+  body input[type='search'],
+  .dnb-core-style input[type='search'] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    outline-offset: -2px;
+    /* 2 */ }
+  body ::-webkit-inner-spin-button,
+  body ::-webkit-outer-spin-button,
+  .dnb-core-style ::-webkit-inner-spin-button,
+  .dnb-core-style ::-webkit-outer-spin-button {
+    height: auto; }
+  body ::-webkit-input-placeholder,
+  .dnb-core-style ::-webkit-input-placeholder {
+    color: inherit;
+    opacity: 0.54; }
+  body ::-webkit-search-decoration,
+  .dnb-core-style ::-webkit-search-decoration {
+    -webkit-appearance: none; }
+  body ::-webkit-file-upload-button,
+  .dnb-core-style ::-webkit-file-upload-button {
+    font: inherit;
+    /* 1 */
+    background-color: transparent;
+    border: none; }
+  body ::-moz-focus-inner,
+  .dnb-core-style ::-moz-focus-inner {
+    border-style: none;
+    padding: 0; }
+  body details,
+  .dnb-core-style details {
+    display: block; }
+  body summary,
+  .dnb-core-style summary {
+    display: list-item; }
+  body canvas,
+  .dnb-core-style canvas {
+    display: inline-block; }
+  body template,
+  .dnb-core-style template {
+    display: none; }
+  body a,
+  body area,
+  body button,
+  body input,
+  body label,
+  body select,
+  body summary,
+  body textarea,
+  body [tabindex],
+  .dnb-core-style a,
+  .dnb-core-style area,
+  .dnb-core-style button,
+  .dnb-core-style input,
+  .dnb-core-style label,
+  .dnb-core-style select,
+  .dnb-core-style summary,
+  .dnb-core-style textarea,
+  .dnb-core-style [tabindex] {
+    -ms-touch-action: manipulation;
+    /* 1 */
+    touch-action: manipulation;
+    /* 2 */ }
+  body [hidden],
+  .dnb-core-style [hidden] {
+    display: none; }
+  body [aria-busy='true'],
+  .dnb-core-style [aria-busy='true'] {
+    cursor: progress; }
+  body [aria-controls]:not(input),
+  .dnb-core-style [aria-controls]:not(input) {
+    cursor: pointer; }
+  body [aria-disabled='true'],
+  body [disabled],
+  .dnb-core-style [aria-disabled='true'],
+  .dnb-core-style [disabled] {
+    cursor: not-allowed; }
+  body [aria-hidden='false'][hidden]:not(:focus),
+  .dnb-core-style [aria-hidden='false'][hidden]:not(:focus) {
+    clip: rect(0, 0, 0, 0);
+    display: inherit;
+    position: absolute; }
+  @media print {
+    body,
+    .dnb-core-style {
+      background-color: white;
+      color: black; } }