@dnb/eufemia 9.22.0 → 9.23.0-beta.4

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

@@ -2115,61 +2115,704 @@ button.dnb-button::-moz-focus-inner {
     opacity: 0; } }
 
 /*
-* Dropdown component
-*
-*/
+ * Dialog component
+ *
+ */
+/*
+ * Modal component
+ *
+ */
+@-webkit-keyframes show-modal {
+  from {
+    opacity: 0.1;
+    -webkit-transform: translate3d(0, -1rem, 0);
+            transform: translate3d(0, -1rem, 0); }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+@keyframes show-modal {
+  from {
+    opacity: 0.1;
+    -webkit-transform: translate3d(0, -1rem, 0);
+            transform: translate3d(0, -1rem, 0); }
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes hide-modal {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 1rem, 0);
+            transform: translate3d(0, 1rem, 0);
+    opacity: 0; } }
+
+@keyframes hide-modal {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 1rem, 0);
+            transform: translate3d(0, 1rem, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes show-drawer {
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@keyframes show-drawer {
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes hide-drawer-left {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(-20rem, 0, 0);
+            transform: translate3d(-20rem, 0, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-left {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(-20rem, 0, 0);
+            transform: translate3d(-20rem, 0, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes hide-drawer-top {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, -20rem, 0);
+            transform: translate3d(0, -20rem, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-top {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, -20rem, 0);
+            transform: translate3d(0, -20rem, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes hide-drawer-bottom {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 20rem, 0);
+            transform: translate3d(0, 20rem, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-bottom {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(0, 20rem, 0);
+            transform: translate3d(0, 20rem, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes hide-drawer-right {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(20rem, 0, 0);
+            transform: translate3d(20rem, 0, 0);
+    opacity: 0; } }
+
+@keyframes hide-drawer-right {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; }
+  to {
+    -webkit-transform: translate3d(20rem, 0, 0);
+            transform: translate3d(20rem, 0, 0);
+    opacity: 0; } }
+
+@-webkit-keyframes show-modal-overlay {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
+
+@keyframes show-modal-overlay {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
+
+@-webkit-keyframes hide-modal-overlay {
+  from {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
+  to {
+    opacity: 0; } }
+
+@keyframes hide-modal-overlay {
+  from {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
+  to {
+    opacity: 0; } }
+
 :root {
-  --dropdown-width: 16rem;
-  --dropdown-height: 2rem;
-  --dropdown-height--small: 1.5rem;
-  --dropdown-height--medium: 2.5rem;
-  --dropdown-height--large: 3rem;
-  --dropdown-padding-horizontal: 1rem;
-  --dropdown-focus-border-width: 0.125rem;
-  --dropdown-text-padding: 0.5rem;
-  --dropdown-border-radius: 0.25rem; }
+  --dialog-min-width: 320px;
+  --dialog-avg-width: 60vw;
+  --dialog-max-width: 60rem;
+  --dialog-spacing: 2rem;
+  --dialog-spacing-minus: -2rem; }
 
-.dnb-dropdown {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  font-size: 1rem;
-  font-size: var(--font-size-small);
-  line-height: 2rem;
-  line-height: var(--dropdown-height); }
-  .dnb-dropdown__inner {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
+.dnb-dialog {
+  position: relative;
+  width: 60vw;
+  width: var(--dialog-avg-width);
+  min-width: 320px;
+  min-width: var(--dialog-min-width);
+  max-width: 60rem;
+  max-width: var(--dialog-max-width);
+  max-height: 100vh;
+  -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);
+  border-radius: 0.5rem;
+  -moz-user-select: text;
+   -ms-user-select: text;
+       user-select: text;
+  -webkit-user-select: text;
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  @media screen and (max-width: 40em) {
+    .dnb-dialog--auto-fullscreen {
+      width: 100%;
+      height: 100vh;
+      max-width: 100%;
+      border-radius: 0;
+      -webkit-box-shadow: none;
+              box-shadow: none; } }
+  .dnb-dialog--fullscreen {
+    width: 100%;
+    height: 100vh;
+    max-width: 100%;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  @supports (-webkit-touch-callout: none) {
+    @media (max-height: 40em) and (orientation: landscape) {
+      .dnb-dialog:not(.dnb-dialog--fullscreen) {
+        max-height: 80vh; } } }
+  .dnb-dialog__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
-    margin: 0;
-    padding: 0;
-    width: auto;
-    color: inherit; }
-  .dnb-dropdown__shell {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden; }
+    .dnb-dialog__inner::after {
+      content: '';
+      position: absolute;
+      z-index: -4;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      height: 100%; }
+  .dnb-dialog--spacing .dnb-dialog__inner {
+    padding: 0 2rem 0;
+    padding: 0 var(--dialog-spacing) 0; }
+    @media screen and (min-width: 72em) {
+      .dnb-dialog--spacing .dnb-dialog__inner {
+        padding: 0 3.5rem 0;
+        padding: 0 calc(2rem * 1.75) 0;
+        padding: 0 calc(var(--dialog-spacing)*1.75) 0;
+        padding: 0 calc(var(--dialog-spacing) * 1.75) 0; } }
+    @media screen and (max-width: 50em) {
+      .dnb-dialog--spacing .dnb-dialog__inner {
+        padding: 0 1.5rem 0;
+        padding: 0 calc(2rem / 1.333333) 0;
+        padding: 0 calc(var(--dialog-spacing)/1.33333) 0;
+        padding: 0 calc(var(--dialog-spacing) / 1.333333) 0; } }
+    @media screen and (max-width: 40em) {
+      .dnb-dialog--spacing .dnb-dialog__inner {
+        padding: 0 1rem 0;
+        padding: 0 calc(2rem / 2) 0;
+        padding: 0 calc(var(--dialog-spacing)/2) 0;
+        padding: 0 calc(var(--dialog-spacing) / 2) 0; } }
+  .dnb-dialog__align--centered .dnb-dialog__inner {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+  html:not([data-visual-test]) .dnb-dialog {
+    -webkit-animation: show-modal 300ms ease-out forwards;
+            animation: show-modal 300ms ease-out forwards;
+    -webkit-animation: show-modal var(--modal-animation-duration) ease-out forwards;
+            animation: show-modal var(--modal-animation-duration) ease-out forwards; }
+  html:not([data-visual-test]) .dnb-dialog--hide {
+    -webkit-animation: hide-modal 220ms ease-in-out forwards;
+            animation: hide-modal 220ms ease-in-out forwards; }
+  .dnb-dialog--no-animation {
+    -webkit-animation-duration: 0ms !important;
+            animation-duration: 0ms !important; }
+  @media screen and (max-width: 40em) {
+    .dnb-dialog--no-animation-on-mobile {
+      -webkit-animation-delay: 0ms !important;
+              animation-delay: 0ms !important;
+      -webkit-animation-duration: 0ms !important;
+              animation-duration: 0ms !important; } }
+  .dnb-dialog__content {
     position: relative;
-    width: 16rem;
-    width: var(--dropdown-width);
-    height: 2rem;
-    height: var(--dropdown-height);
-    margin: 0;
-    padding: 0;
-    color: inherit; }
-  .dnb-dropdown__row {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex; }
-  .dnb-dropdown--large .dnb-drawer-list__triangle {
-    margin-left: 0.75rem;
+    z-index: 1; }
+  .dnb-dialog--spacing .dnb-dialog__content {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--dialog-spacing)*2);
+    padding-bottom: calc(var(--dialog-spacing) * 2); }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-dialog--spacing .dnb-dialog__content {
+        padding-bottom: 16rem;
+        padding-bottom: calc(2rem * 8);
+        padding-bottom: calc(var(--dialog-spacing)*8);
+        padding-bottom: calc(var(--dialog-spacing) * 8); } }
+  .dnb-dialog__align--center .dnb-dialog__content {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center; }
+  .dnb-dialog__align--right .dnb-dialog__content {
+    -webkit-box-align: end;
+        -ms-flex-align: end;
+            align-items: flex-end;
+    text-align: right; }
+  .dnb-dialog__title ~ .dnb-dialog__content {
+    padding-top: 1rem;
+    padding-top: calc(2rem / 2);
+    padding-top: calc(var(--dialog-spacing)/2);
+    padding-top: calc(var(--dialog-spacing) / 2); }
+  .dnb-dialog .dnb-dialog__header [class*='dnb-h--'],
+  .dnb-dialog .dnb-dialog__header .dnb-modal__title {
+    padding: 0; }
+    .dnb-dialog .dnb-dialog__header [class*='dnb-h--']:not([class*='__top']),
+    .dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*='__top']) {
+      margin-top: 0; }
+    .dnb-dialog .dnb-dialog__header [class*='dnb-h--']:not([class*='__bottom']),
+    .dnb-dialog .dnb-dialog__header .dnb-modal__title:not([class*='__bottom']) {
+      margin-bottom: 0; }
+  .dnb-dialog .dnb-dialog__header::after {
+    top: -500%;
+    height: 600%; }
+  .dnb-dialog--spacing .dnb-dialog__header .dnb-tabs {
+    margin-top: 3.5rem; }
+  .dnb-dialog__body {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--dialog-spacing)*2);
+    padding-bottom: calc(var(--dialog-spacing) * 2);
+    margin-bottom: -4rem;
+    margin-bottom: calc(-2rem * 2);
+    margin-bottom: calc(var(--dialog-spacing-minus)*2);
+    margin-bottom: calc(var(--dialog-spacing-minus) * 2); }
+  .dnb-dialog__navigation.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+  .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
+    margin-top: 3.5rem;
+    margin-top: calc(2rem * 1.75);
+    margin-top: calc(var(--dialog-spacing)*1.75);
+    margin-top: calc(var(--dialog-spacing) * 1.75);
+    margin-bottom: 1rem;
+    margin-bottom: calc(2rem / 2);
+    margin-bottom: calc(var(--dialog-spacing)/2);
+    margin-bottom: calc(var(--dialog-spacing) / 2); }
+    @media screen and (max-width: 50em) {
+      .dnb-dialog--spacing .dnb-dialog__navigation.dnb-section {
+        margin-top: 1rem;
+        margin-top: calc(2rem / 2);
+        margin-top: calc(var(--dialog-spacing)/2);
+        margin-top: calc(var(--dialog-spacing) / 2); } }
+
+[data-visual-test].hide-page-content #___gatsby {
+  opacity: 0; }
+
+/*
+* Drawer component
+*
+*/
+:root {
+  --drawer-width: 40vw;
+  --drawer-min-width: 25rem;
+  --drawer-max-width: 40rem;
+  --drawer-header-min-height: 6rem;
+  --drawer-spacing: 2rem;
+  --drawer-spacing-minus: -2rem; }
+
+.dnb-drawer {
+  position: relative;
+  max-height: 100vh;
+  width: 100%;
+  height: 100vh;
+  max-width: 100%;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  width: 40vw;
+  width: var(--drawer-width);
+  min-width: 25rem;
+  min-width: var(--drawer-min-width);
+  max-width: 40rem;
+  max-width: var(--drawer-max-width);
+  -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);
+  -moz-user-select: text;
+   -ms-user-select: text;
+       user-select: text;
+  -webkit-user-select: text;
+  border: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  @media screen and (max-width: 40em) {
+    .dnb-drawer {
+      width: 100vw;
+      min-width: auto;
+      max-width: auto; } }
+  @media screen and (max-width: 40em) {
+    .dnb-drawer--auto-fullscreen {
+      width: 100%;
+      height: 100vh;
+      max-width: 100%;
+      border-radius: 0;
+      -webkit-box-shadow: none;
+              box-shadow: none; } }
+  .dnb-drawer__inner {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    z-index: 10;
+    background-color: transparent;
+    background-color: var(--modal-background-color, transparent);
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden; }
+    .dnb-drawer__inner::after {
+      content: '';
+      position: absolute;
+      z-index: -4;
+      left: 0;
+      top: 0;
+      width: 100vw;
+      height: 100%; }
+  .dnb-drawer--spacing .dnb-drawer__inner {
+    padding: 0 2rem 0;
+    padding: 0 var(--drawer-spacing) 0; }
+    @media screen and (min-width: 72em) {
+      .dnb-drawer--spacing .dnb-drawer__inner {
+        padding: 0 3.5rem 0;
+        padding: 0 calc(2rem * 1.75) 0;
+        padding: 0 calc(var(--drawer-spacing)*1.75) 0;
+        padding: 0 calc(var(--drawer-spacing) * 1.75) 0; } }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__inner {
+        padding: 0 1.5rem 0;
+        padding: 0 calc(2rem / 1.333333) 0;
+        padding: 0 calc(var(--drawer-spacing)/1.33333) 0;
+        padding: 0 calc(var(--drawer-spacing) / 1.333333) 0; } }
+    @media screen and (max-width: 40em) {
+      .dnb-drawer--spacing .dnb-drawer__inner {
+        padding: 0 1rem 0;
+        padding: 0 calc(2rem / 2) 0;
+        padding: 0 calc(var(--drawer-spacing)/2) 0;
+        padding: 0 calc(var(--drawer-spacing) / 2) 0; } }
+  .dnb-drawer__align--centered .dnb-drawer__inner {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+  .dnb-drawer__content {
+    position: relative;
+    z-index: 1;
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--drawer-spacing)*2);
+    padding-bottom: calc(var(--drawer-spacing) * 2); }
+  .dnb-drawer--spacing .dnb-drawer__content {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--drawer-spacing)*2);
+    padding-bottom: calc(var(--drawer-spacing) * 2); }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-drawer--spacing .dnb-drawer__content {
+        padding-bottom: 16rem;
+        padding-bottom: calc(2rem * 8);
+        padding-bottom: calc(var(--drawer-spacing)*8);
+        padding-bottom: calc(var(--drawer-spacing) * 8); } }
+  .dnb-drawer__align--center .dnb-drawer__content {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: center; }
+  .dnb-drawer__align--right .dnb-drawer__content {
+    -webkit-box-align: end;
+        -ms-flex-align: end;
+            align-items: flex-end;
+    text-align: right; }
+  .dnb-drawer--top, .dnb-drawer--bottom {
+    max-width: 100%;
+    width: 100vw;
+    height: 40vh; }
+    @media screen and (max-height: 40em) {
+      .dnb-drawer--top, .dnb-drawer--bottom {
+        height: 100vw;
+        min-height: auto;
+        max-height: auto; } }
+  .dnb-drawer--fullscreen {
+    width: 100%;
+    height: 100vh;
+    max-width: 100%;
+    border-radius: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none; }
+  html:not([data-visual-test]) .dnb-drawer {
+    opacity: 0.1;
+    -webkit-animation: show-drawer 300ms ease-out forwards;
+            animation: show-drawer 300ms ease-out forwards;
+    -webkit-animation: show-drawer var(--modal-animation-duration) ease-out forwards;
+            animation: show-drawer var(--modal-animation-duration) ease-out forwards; }
+  html:not([data-visual-test]) .dnb-drawer--left {
+    -webkit-transform: translate3d(-20rem, 0, 0);
+            transform: translate3d(-20rem, 0, 0); }
+  html:not([data-visual-test]) .dnb-drawer--right {
+    -webkit-transform: translate3d(20rem, 0, 0);
+            transform: translate3d(20rem, 0, 0); }
+  html:not([data-visual-test]) .dnb-drawer--top {
+    -webkit-transform: translate3d(0, -20rem, 0);
+            transform: translate3d(0, -20rem, 0); }
+  html:not([data-visual-test]) .dnb-drawer--bottom {
+    -webkit-transform: translate3d(0, 20rem, 0);
+            transform: translate3d(0, 20rem, 0); }
+  html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--left {
+    -webkit-animation: hide-drawer-left 300ms ease-in-out forwards;
+            animation: hide-drawer-left 300ms ease-in-out forwards;
+    -webkit-animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards; }
+  html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--right {
+    -webkit-animation: hide-drawer-right 300ms ease-in-out forwards;
+            animation: hide-drawer-right 300ms ease-in-out forwards;
+    -webkit-animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards; }
+  html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--top {
+    -webkit-animation: hide-drawer-top 300ms ease-in-out forwards;
+            animation: hide-drawer-top 300ms ease-in-out forwards;
+    -webkit-animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards; }
+  html:not([data-visual-test]) .dnb-drawer--hide.dnb-drawer--bottom {
+    -webkit-animation: hide-drawer-bottom 300ms ease-in-out forwards;
+            animation: hide-drawer-bottom 300ms ease-in-out forwards;
+    -webkit-animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards;
+            animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards; }
+  .dnb-drawer--no-animation {
+    -webkit-animation-duration: 0ms !important;
+            animation-duration: 0ms !important; }
+  @media screen and (max-width: 40em) {
+    .dnb-drawer--no-animation-on-mobile {
+      -webkit-animation-duration: 0ms !important;
+              animation-duration: 0ms !important; } }
+  .dnb-drawer__root {
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start; }
+  .dnb-drawer__title ~ .dnb-drawer__content {
+    padding-top: 1.5rem;
+    padding-top: calc(2rem / 1.333333);
+    padding-top: calc(var(--drawer-spacing)/1.33333);
+    padding-top: calc(var(--drawer-spacing) / 1.333333); }
+  .dnb-drawer .dnb-drawer__header [class*='dnb-h--'],
+  .dnb-drawer .dnb-drawer__header .dnb-drawer__title {
+    padding: 0; }
+    .dnb-drawer .dnb-drawer__header [class*='dnb-h--']:not([class*='__top']),
+    .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*='__top']) {
+      margin-top: 0; }
+    .dnb-drawer .dnb-drawer__header [class*='dnb-h--']:not([class*='__bottom']),
+    .dnb-drawer .dnb-drawer__header .dnb-drawer__title:not([class*='__bottom']) {
+      margin-bottom: 0; }
+  .dnb-drawer .dnb-drawer__header::after {
+    top: -500%;
+    height: 600%; }
+  .dnb-drawer--spacing .dnb-drawer__header {
+    min-height: 6rem;
+    min-height: var(--drawer-header-min-height); }
+    .dnb-drawer--spacing .dnb-drawer__header .dnb-tabs {
+      margin-top: 3.5rem; }
+  .dnb-drawer__body {
+    padding-bottom: 4rem;
+    padding-bottom: calc(2rem * 2);
+    padding-bottom: calc(var(--drawer-spacing)*2);
+    padding-bottom: calc(var(--drawer-spacing) * 2);
+    margin-bottom: -4rem;
+    margin-bottom: calc(-2rem * 2);
+    margin-bottom: calc(var(--drawer-spacing-minus)*2);
+    margin-bottom: calc(var(--drawer-spacing-minus) * 2); }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-drawer__body {
+        padding-bottom: -16rem;
+        padding-bottom: calc(-2rem * 8);
+        padding-bottom: calc(var(--drawer-spacing-minus)*8);
+        padding-bottom: calc(var(--drawer-spacing-minus) * 8); } }
+  .dnb-drawer__navigation.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+  .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+    margin: 3.5rem 0;
+    margin: calc(2rem * 1.75) 0;
+    margin: calc(var(--drawer-spacing)*1.75) 0;
+    margin: calc(var(--drawer-spacing) * 1.75) 0; }
+    @media screen and (max-width: 50em) {
+      .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section {
+        margin: 2rem 0;
+        margin: var(--drawer-spacing) 0; } }
+  .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
+    z-index: 2999; }
+  .dnb-drawer .dnb-drawer__navigation--sticky::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    left: -50%;
+    right: -50%;
+    bottom: 0;
+    height: 300%;
+    -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-drawer .dnb-drawer__navigation:not(.dnb-drawer__navigation--sticky)::after {
+    color: transparent; }
+  @media screen and (max-width: 40em) {
+    .dnb-drawer--no-animation-on-mobile {
+      -webkit-animation-delay: 0ms !important;
+              animation-delay: 0ms !important;
+      -webkit-animation-duration: 0ms !important;
+              animation-duration: 0ms !important; } }
+
+[data-visual-test].hide-page-content #___gatsby {
+  opacity: 0; }
+
+/*
+* Dropdown component
+*
+*/
+:root {
+  --dropdown-width: 16rem;
+  --dropdown-height: 2rem;
+  --dropdown-height--small: 1.5rem;
+  --dropdown-height--medium: 2.5rem;
+  --dropdown-height--large: 3rem;
+  --dropdown-padding-horizontal: 1rem;
+  --dropdown-focus-border-width: 0.125rem;
+  --dropdown-text-padding: 0.5rem;
+  --dropdown-border-radius: 0.25rem; }
+
+.dnb-dropdown {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 1rem;
+  font-size: var(--font-size-small);
+  line-height: 2rem;
+  line-height: var(--dropdown-height); }
+  .dnb-dropdown__inner {
+    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;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    margin: 0;
+    padding: 0;
+    width: auto;
+    color: inherit; }
+  .dnb-dropdown__shell {
+    position: relative;
+    width: 16rem;
+    width: var(--dropdown-width);
+    height: 2rem;
+    height: var(--dropdown-height);
+    margin: 0;
+    padding: 0;
+    color: inherit; }
+  .dnb-dropdown__row {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex; }
+  .dnb-dropdown--large .dnb-drawer-list__triangle {
+    margin-left: 0.75rem;
     margin-left: calc(1rem - 0.25rem);
     margin-left: calc(var(--dropdown-padding-horizontal) - 0.25rem); }
   .dnb-dropdown--icon-position-left.dnb-dropdown--large .dnb-drawer-list__triangle {
@@ -3405,377 +4048,54 @@ html[data-visual-test] .dnb-global-status__shell {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1; }
-  .dnb-input--stretch .dnb-input__inner {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1; }
-  .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell {
-    width: 100%; }
-  .dnb-input--stretch .dnb-form-label + .dnb-input__inner {
-    width: auto; }
-  .dnb-input--vertical.dnb-input--stretch .dnb-input__inner {
-    width: 100%; }
-  .dnb-form-row--horizontal .dnb-input--stretch {
-    width: 100%; }
-  .dnb-input__icon {
-    -webkit-box-ordinal-group: 1;
-        -ms-flex-order: 0;
-            order: 0;
-    position: absolute;
-    left: 1rem;
-    right: auto;
-    top: 0;
-    bottom: 0;
-    margin: auto; }
-  .dnb-input--icon-position-right .dnb-input__icon {
-    -webkit-box-ordinal-group: 2;
-        -ms-flex-order: 1;
-            order: 1;
-    left: auto;
-    right: 1rem; }
-  .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,
-  .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
-    padding-left: 2.5rem; }
-  .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
-  .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
-    padding-right: 2.5rem; }
-  .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,
-  .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
-    padding-left: 3rem; }
-  .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
-  .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
-    padding-right: 3rem; }
-  html[data-visual-test] .dnb-input__input {
-    caret-color: #fff;
-    caret-color: var(--color-white); }
-  @media screen and (max-width: 40em) {
-    .dnb-responsive-component .dnb-input {
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-orient: vertical;
-      -webkit-box-direction: normal;
-          -ms-flex-direction: column;
-              flex-direction: column;
-      -webkit-box-align: start;
-          -ms-flex-align: start;
-              align-items: flex-start;
-      margin-bottom: 0.5rem; }
-      .dnb-responsive-component .dnb-input__row {
-        -webkit-box-align: start;
-            -ms-flex-align: start;
-                align-items: flex-start; }
-      .dnb-responsive-component .dnb-input > .dnb-form-label {
-        margin-bottom: 0.5rem; } }
-  @media screen and (-ms-high-contrast: none) {
-    .dnb-input {
-      vertical-align: baseline; }
-      .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) {
-        -webkit-box-flex: 0;
-            -ms-flex: none;
-                flex: none; }
-      .dnb-input__inner {
-        width: 100%; }
-      .dnb-input__input, .dnb-input__placeholder {
-        -webkit-transform: translateY(-0.0625rem);
-                transform: translateY(-0.0625rem); } }
-
-/*
-* InputMasked component
-*
-*/
-.dnb-input-masked--guide {
-  font-family: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
-    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
-    monospace;
-  font-family: var(--font-family-monospace); }
-
-/*
- * Logo Component
- *
- */
-.dnb-logo {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  vertical-align: baseline;
-  font-size: inherit;
-  line-height: 1em;
-  line-height: var(--line-height-xx-small--em);
-  color: #007272;
-  color: var(--color-sea-green);
-  height: 1em; }
-  .dnb-logo svg {
-    fill: currentColor;
-    shape-rendering: geometricPrecision; }
-  .dnb-logo--has-size {
-    width: auto;
-    height: auto; }
-  .dnb-logo--inherit-size {
-    height: inherit; }
-  .dnb-logo svg:not([width]):not([height]) {
-    width: inherit;
-    height: inherit; }
-
-/*
- * Modal component
- *
- */
-/*
- * Modal component
- *
- */
-@-webkit-keyframes show-modal {
-  from {
-    opacity: 0.1;
-    -webkit-transform: translate3d(0, -1rem, 0);
-            transform: translate3d(0, -1rem, 0); }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; } }
-@keyframes show-modal {
-  from {
-    opacity: 0.1;
-    -webkit-transform: translate3d(0, -1rem, 0);
-            transform: translate3d(0, -1rem, 0); }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; } }
-
-@-webkit-keyframes hide-modal {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(0, 1rem, 0);
-            transform: translate3d(0, 1rem, 0);
-    opacity: 0; } }
-
-@keyframes hide-modal {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(0, 1rem, 0);
-            transform: translate3d(0, 1rem, 0);
-    opacity: 0; } }
-
-@-webkit-keyframes show-drawer {
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; } }
-
-@keyframes show-drawer {
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; } }
-
-@-webkit-keyframes hide-drawer-left {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(-20rem, 0, 0);
-            transform: translate3d(-20rem, 0, 0);
-    opacity: 0; } }
-
-@keyframes hide-drawer-left {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(-20rem, 0, 0);
-            transform: translate3d(-20rem, 0, 0);
-    opacity: 0; } }
-
-@-webkit-keyframes hide-drawer-top {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(0, -20rem, 0);
-            transform: translate3d(0, -20rem, 0);
-    opacity: 0; } }
-
-@keyframes hide-drawer-top {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(0, -20rem, 0);
-            transform: translate3d(0, -20rem, 0);
-    opacity: 0; } }
-
-@-webkit-keyframes hide-drawer-bottom {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(0, 20rem, 0);
-            transform: translate3d(0, 20rem, 0);
-    opacity: 0; } }
-
-@keyframes hide-drawer-bottom {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(0, 20rem, 0);
-            transform: translate3d(0, 20rem, 0);
-    opacity: 0; } }
-
-@-webkit-keyframes hide-drawer-right {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(20rem, 0, 0);
-            transform: translate3d(20rem, 0, 0);
-    opacity: 0; } }
-
-@keyframes hide-drawer-right {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-    opacity: 1; }
-  to {
-    -webkit-transform: translate3d(20rem, 0, 0);
-            transform: translate3d(20rem, 0, 0);
-    opacity: 0; } }
-
-@-webkit-keyframes show-modal-overlay {
-  from {
-    opacity: 0; }
-  to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
-
-@keyframes show-modal-overlay {
-  from {
-    opacity: 0; }
-  to {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); } }
-
-@-webkit-keyframes hide-modal-overlay {
-  from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
-  to {
-    opacity: 0; } }
-
-@keyframes hide-modal-overlay {
-  from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
-  to {
-    opacity: 0; } }
-
-:root {
-  --modal-z-index: 3000;
-  --modal-animation-duration: 300ms;
-  --modal-spacing: 2rem;
-  --modal-spacing-minus: -2rem;
-  --modal-min-width: 320px;
-  --modal-avg-width: 60vw;
-  --modal-max-width: 60rem;
-  --modal-drawer-width: 40vw;
-  --modal-drawer-min-width: 25rem;
-  --modal-drawer-max-width: 40rem;
-  --modal-drawer-header-min-height: 6rem;
-  --modal-overlay-bg: black;
-  --modal-overlay-opacity: 0.32; }
-
-html[data-dnb-modal-active] {
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none; }
-
-#dnb-modal-root {
-  position: absolute;
-  top: 0;
-  left: 0; }
-
-.dnb-modal {
-  /* stylelint-disable-next-line */ }
-  .dnb-modal__content {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 3001;
-    z-index: calc(3000 + 1);
-    z-index: calc(var(--modal-z-index) + 1);
-    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;
-    width: 100%;
-    height: 100%;
-    max-width: 100vw;
-    -moz-user-select: none;
-     -ms-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    /* stylelint-disable-next-line */ }
-    @media screen and (max-width: 40em) {
-      .dnb-modal__content--auto-fullscreen {
-        height: auto; } }
-    .dnb-modal__content__inner {
-      position: relative;
-      width: 60vw;
-      width: var(--modal-avg-width);
-      min-width: 320px;
-      min-width: var(--modal-min-width);
-      max-width: 60rem;
-      max-width: var(--modal-max-width);
-      max-height: 100vh;
-      -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);
-      border-radius: 0.5rem;
-      -moz-user-select: text;
-       -ms-user-select: text;
-           user-select: text;
-      -webkit-user-select: text;
-      border: none;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-    @media screen and (max-width: 40em) {
-      .dnb-modal__content--auto-fullscreen .dnb-modal__content__inner {
-        width: 100%;
-        height: 100vh;
-        max-width: 100%;
-        border-radius: 0;
-        -webkit-box-shadow: none;
-                box-shadow: none; } }
-    @supports (-webkit-touch-callout: none) {
-      @media (max-height: 40em) and (orientation: landscape) {
-        .dnb-modal__content--modal.dnb-modal__content:not(.dnb-modal__content--fullscreen) .dnb-modal__content__inner {
-          max-height: 80vh; } } }
-    .dnb-modal__content__spacing {
-      position: relative;
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1; }
+  .dnb-input--stretch .dnb-input__inner {
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1; }
+  .dnb-input--stretch .dnb-input__inner, .dnb-input--stretch .dnb-input__shell {
+    width: 100%; }
+  .dnb-input--stretch .dnb-form-label + .dnb-input__inner {
+    width: auto; }
+  .dnb-input--vertical.dnb-input--stretch .dnb-input__inner {
+    width: 100%; }
+  .dnb-form-row--horizontal .dnb-input--stretch {
+    width: 100%; }
+  .dnb-input__icon {
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    position: absolute;
+    left: 1rem;
+    right: auto;
+    top: 0;
+    bottom: 0;
+    margin: auto; }
+  .dnb-input--icon-position-right .dnb-input__icon {
+    -webkit-box-ordinal-group: 2;
+        -ms-flex-order: 1;
+            order: 1;
+    left: auto;
+    right: 1rem; }
+  .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,
+  .dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
+    padding-left: 2.5rem; }
+  .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
+  .dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
+    padding-right: 2.5rem; }
+  .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__input,
+  .dnb-input--icon-size-medium.dnb-input--icon-position-left.dnb-input--has-icon .dnb-input__placeholder {
+    padding-left: 3rem; }
+  .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__input,
+  .dnb-input--icon-size-medium.dnb-input--icon-position-right.dnb-input--has-icon .dnb-input__placeholder {
+    padding-right: 3rem; }
+  html[data-visual-test] .dnb-input__input {
+    caret-color: #fff;
+    caret-color: var(--color-white); }
+  @media screen and (max-width: 40em) {
+    .dnb-responsive-component .dnb-input {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
@@ -3783,322 +4103,132 @@ html[data-dnb-modal-active] {
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
-      width: 100%;
-      height: 100%;
-      overflow-x: hidden; }
-      .dnb-modal__content__spacing::after {
-        content: '';
-        position: absolute;
-        z-index: -4;
-        left: 0;
-        top: 0;
-        width: 100vw;
-        height: 100%; }
-    .dnb-modal__content--spacing .dnb-modal__content__spacing {
-      padding: 0 2rem 0;
-      padding: 0 var(--modal-spacing) 0; }
-      @media screen and (min-width: 72em) {
-        .dnb-modal__content--spacing .dnb-modal__content__spacing {
-          padding: 0 3.5rem 0;
-          padding: 0 calc(2rem * 1.75) 0;
-          padding: 0 calc(var(--modal-spacing)*1.75) 0;
-          padding: 0 calc(var(--modal-spacing) * 1.75) 0; } }
-      @media screen and (max-width: 50em) {
-        .dnb-modal__content--spacing .dnb-modal__content__spacing {
-          padding: 0 1.5rem 0;
-          padding: 0 calc(2rem / 1.333333) 0;
-          padding: 0 calc(var(--modal-spacing)/1.33333) 0;
-          padding: 0 calc(var(--modal-spacing) / 1.333333) 0; } }
-      @media screen and (max-width: 40em) {
-        .dnb-modal__content--spacing .dnb-modal__content__spacing {
-          padding: 0 1rem 0;
-          padding: 0 calc(2rem / 2) 0;
-          padding: 0 calc(var(--modal-spacing)/2) 0;
-          padding: 0 calc(var(--modal-spacing) / 2) 0; } }
-    .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__content__spacing {
-      padding: 0 2rem 0;
-      padding: 0 var(--modal-spacing) 0; }
-      @media screen and (min-width: 72em) {
-        .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__content__spacing {
-          padding: 0 3.5rem 0;
-          padding: 0 calc(2rem * 1.75) 0;
-          padding: 0 calc(var(--modal-spacing)*1.75) 0;
-          padding: 0 calc(var(--modal-spacing) * 1.75) 0; } }
-      @media screen and (max-width: 50em) {
-        .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__content__spacing {
-          padding: 0 1.5rem 0;
-          padding: 0 calc(2rem / 1.333333) 0;
-          padding: 0 calc(var(--modal-spacing)/1.33333) 0;
-          padding: 0 calc(var(--modal-spacing) / 1.333333) 0; } }
-      @media screen and (max-width: 40em) {
-        .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__content__spacing {
-          padding: 0 1rem 0;
-          padding: 0 calc(2rem / 2) 0;
-          padding: 0 calc(var(--modal-spacing)/2) 0;
-          padding: 0 calc(var(--modal-spacing) / 2) 0; } }
-    .dnb-modal__content__align--centered .dnb-modal__content__spacing {
-      -webkit-box-align: center;
-          -ms-flex-align: center;
-              align-items: center;
-      -webkit-box-pack: center;
-          -ms-flex-pack: center;
-              justify-content: center; }
-    .dnb-modal__content--drawer {
-      -webkit-box-align: start;
-          -ms-flex-align: start;
-              align-items: flex-start;
-      -webkit-box-pack: start;
-          -ms-flex-pack: start;
-              justify-content: flex-start; }
-    .dnb-modal__content--drawer .dnb-modal__content__inner {
-      width: 100%;
-      height: 100vh;
-      max-width: 100%;
-      border-radius: 0;
-      -webkit-box-shadow: none;
-              box-shadow: none;
-      width: 40vw;
-      width: var(--modal-drawer-width);
-      min-width: 25rem;
-      min-width: var(--modal-drawer-min-width);
-      max-width: 40rem;
-      max-width: var(--modal-drawer-max-width); }
-      @media screen and (max-width: 40em) {
-        .dnb-modal__content--drawer .dnb-modal__content__inner {
-          width: 100vw;
-          min-width: auto;
-          max-width: auto; } }
-    .dnb-modal__content--drawer.dnb-modal__content--top .dnb-modal__content__inner,
-    .dnb-modal__content--drawer.dnb-modal__content--bottom .dnb-modal__content__inner {
-      max-width: 100%;
-      width: 100vw;
-      height: 40vh; }
-      @media screen and (max-height: 40em) {
-        .dnb-modal__content--drawer.dnb-modal__content--top .dnb-modal__content__inner,
-        .dnb-modal__content--drawer.dnb-modal__content--bottom .dnb-modal__content__inner {
-          height: 100vw;
-          min-height: auto;
-          max-height: auto; } }
-    .dnb-modal__content--drawer.dnb-modal__content--right {
-      -webkit-box-pack: end;
-          -ms-flex-pack: end;
-              justify-content: flex-end; }
-    .dnb-modal__content--drawer.dnb-modal__content--bottom {
-      -webkit-box-align: end;
-          -ms-flex-align: end;
-              align-items: flex-end; }
-    .dnb-modal__content--fullscreen {
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: flex-start;
-      -webkit-box-pack: start;
-          -ms-flex-pack: start;
-              justify-content: flex-start; }
-    .dnb-modal__content--fullscreen .dnb-modal__content__inner {
-      width: 100%;
-      height: 100vh;
-      max-width: 100%;
-      border-radius: 0;
-      -webkit-box-shadow: none;
-              box-shadow: none; }
-    .dnb-modal__content--fullscreen .dnb-modal__content__content {
-      height: auto; }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--left .dnb-modal__content__inner {
-      -webkit-transform: translate3d(-20rem, 0, 0);
-              transform: translate3d(-20rem, 0, 0); }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--right .dnb-modal__content__inner {
-      -webkit-transform: translate3d(20rem, 0, 0);
-              transform: translate3d(20rem, 0, 0); }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--top .dnb-modal__content__inner {
-      -webkit-transform: translate3d(0, -20rem, 0);
-              transform: translate3d(0, -20rem, 0); }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--bottom .dnb-modal__content__inner {
-      -webkit-transform: translate3d(0, 20rem, 0);
-              transform: translate3d(0, 20rem, 0); }
-    html:not([data-visual-test]) .dnb-modal__content--drawer .dnb-modal__content__inner {
-      opacity: 0.1;
-      -webkit-animation: show-drawer 300ms ease-out forwards;
-              animation: show-drawer 300ms ease-out forwards;
-      -webkit-animation: show-drawer var(--modal-animation-duration) ease-out forwards;
-              animation: show-drawer var(--modal-animation-duration) ease-out forwards; }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--hide.dnb-modal__content--left .dnb-modal__content__inner {
-      -webkit-animation: hide-drawer-left 300ms ease-in-out forwards;
-              animation: hide-drawer-left 300ms ease-in-out forwards;
-      -webkit-animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-drawer-left var(--modal-animation-duration) ease-in-out forwards; }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--hide.dnb-modal__content--right .dnb-modal__content__inner {
-      -webkit-animation: hide-drawer-right 300ms ease-in-out forwards;
-              animation: hide-drawer-right 300ms ease-in-out forwards;
-      -webkit-animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-drawer-right var(--modal-animation-duration) ease-in-out forwards; }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--hide.dnb-modal__content--top .dnb-modal__content__inner {
-      -webkit-animation: hide-drawer-top 300ms ease-in-out forwards;
-              animation: hide-drawer-top 300ms ease-in-out forwards;
-      -webkit-animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-drawer-top var(--modal-animation-duration) ease-in-out forwards; }
-    html:not([data-visual-test]) .dnb-modal__content--drawer.dnb-modal__content--hide.dnb-modal__content--bottom .dnb-modal__content__inner {
-      -webkit-animation: hide-drawer-bottom 300ms ease-in-out forwards;
-              animation: hide-drawer-bottom 300ms ease-in-out forwards;
-      -webkit-animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards;
-              animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards; }
-    html:not([data-visual-test]) .dnb-modal__content--modal .dnb-modal__content__inner {
-      -webkit-animation: show-modal 300ms ease-out forwards;
-              animation: show-modal 300ms ease-out forwards;
-      -webkit-animation: show-modal var(--modal-animation-duration) ease-out forwards;
-              animation: show-modal var(--modal-animation-duration) ease-out forwards; }
-    html:not([data-visual-test]) .dnb-modal__content--modal.dnb-modal__content--hide .dnb-modal__content__inner {
-      -webkit-animation: hide-modal 220ms ease-in-out forwards;
-              animation: hide-modal 220ms ease-in-out forwards; }
-    .dnb-modal__content--no-animation .dnb-modal__content__inner {
-      -webkit-animation-duration: 0ms !important;
-              animation-duration: 0ms !important; }
-    @media screen and (max-width: 40em) {
-      .dnb-modal__content--no-animation-on-mobile .dnb-modal__content__inner {
-        -webkit-animation-duration: 0ms !important;
-                animation-duration: 0ms !important; } }
-    .dnb-modal__content__wrapper {
-      position: relative;
-      z-index: 1; }
-    .dnb-modal__content--drawer .dnb-modal__content__wrapper {
-      padding-bottom: 4rem;
-      padding-bottom: calc(2rem * 2);
-      padding-bottom: calc(var(--modal-spacing)*2);
-      padding-bottom: calc(var(--modal-spacing) * 2); }
-    .dnb-modal__content--spacing .dnb-modal__content__wrapper {
-      padding-bottom: 4rem;
-      padding-bottom: calc(2rem * 2);
-      padding-bottom: calc(var(--modal-spacing)*2);
-      padding-bottom: calc(var(--modal-spacing) * 2); }
-      @supports (-webkit-touch-callout: none) {
-        .dnb-modal__content--spacing .dnb-modal__content__wrapper {
-          padding-bottom: 16rem;
-          padding-bottom: calc(2rem * 8);
-          padding-bottom: calc(var(--modal-spacing)*8);
-          padding-bottom: calc(var(--modal-spacing) * 8); } }
-    .dnb-modal__content__title ~ .dnb-modal__content__wrapper {
-      padding-top: 1rem;
-      padding-top: calc(2rem / 2);
-      padding-top: calc(var(--modal-spacing)/2);
-      padding-top: calc(var(--modal-spacing) / 2); }
-    .dnb-modal__content__align--center .dnb-modal__content__wrapper {
-      -webkit-box-align: center;
-          -ms-flex-align: center;
-              align-items: center;
-      text-align: center; }
-    .dnb-modal__content__align--right .dnb-modal__content__wrapper {
-      -webkit-box-align: end;
-          -ms-flex-align: end;
-              align-items: flex-end;
-      text-align: right; }
-    .dnb-modal__content--drawer .dnb-modal__content__title ~ .dnb-modal__content__wrapper {
-      padding-top: 1.5rem;
-      padding-top: calc(2rem / 1.333333);
-      padding-top: calc(var(--modal-spacing)/1.33333);
-      padding-top: calc(var(--modal-spacing) / 1.333333); }
-  .dnb-modal__content .dnb-modal__header [class*='dnb-h--'],
-  .dnb-modal__content .dnb-modal__header .dnb-modal__title {
-    padding: 0; }
-    .dnb-modal__content .dnb-modal__header [class*='dnb-h--']:not([class*='__top']),
-    .dnb-modal__content .dnb-modal__header .dnb-modal__title:not([class*='__top']) {
-      margin-top: 0; }
-    .dnb-modal__content .dnb-modal__header [class*='dnb-h--']:not([class*='__bottom']),
-    .dnb-modal__content .dnb-modal__header .dnb-modal__title:not([class*='__bottom']) {
-      margin-bottom: 0; }
-  .dnb-modal__content--drawer .dnb-modal__content__spacing {
-    position: relative;
-    z-index: 10;
-    background-color: transparent;
-    background-color: var(--modal-background-color, transparent); }
-  .dnb-modal__content .dnb-modal__header::after {
-    top: -500%;
-    height: 600%; }
-  .dnb-modal__content--spacing .dnb-modal__header .dnb-tabs {
-    margin-top: 3.5rem; }
-  .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__header {
-    min-height: 6rem;
-    min-height: var(--modal-drawer-header-min-height); }
-  .dnb-modal__wrapper__inner {
-    padding-bottom: 4rem;
-    padding-bottom: calc(2rem * 2);
-    padding-bottom: calc(var(--modal-spacing)*2);
-    padding-bottom: calc(var(--modal-spacing) * 2);
-    margin-bottom: -4rem;
-    margin-bottom: calc(-2rem * 2);
-    margin-bottom: calc(var(--modal-spacing-minus)*2);
-    margin-bottom: calc(var(--modal-spacing-minus) * 2); }
-  .dnb-modal__content--drawer .dnb-modal__wrapper__inner {
-    margin-bottom: -4rem;
-    margin-bottom: calc(-2rem * 2);
-    margin-bottom: calc(var(--modal-spacing-minus)*2);
-    margin-bottom: calc(var(--modal-spacing-minus) * 2); }
-    @supports (-webkit-touch-callout: none) {
-      .dnb-modal__content--drawer .dnb-modal__wrapper__inner {
-        padding-bottom: -16rem;
-        padding-bottom: calc(-2rem * 8);
-        padding-bottom: calc(var(--modal-spacing-minus)*8);
-        padding-bottom: calc(var(--modal-spacing-minus) * 8); } }
-  .dnb-modal__header__bar.dnb-section {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: row;
-            flex-direction: row;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between; }
-    @media screen and (-ms-high-contrast: none) {
-      .dnb-modal__header__bar.dnb-section {
-        -webkit-box-align: center;
-            -ms-flex-align: center;
-                align-items: center; } }
+      margin-bottom: 0.5rem; }
+      .dnb-responsive-component .dnb-input__row {
+        -webkit-box-align: start;
+            -ms-flex-align: start;
+                align-items: flex-start; }
+      .dnb-responsive-component .dnb-input > .dnb-form-label {
+        margin-bottom: 0.5rem; } }
   @media screen and (-ms-high-contrast: none) {
-    .dnb-core-style .dnb-modal__header__bar__close {
-      margin-left: auto; } }
-  .dnb-modal__content--spacing .dnb-modal__header__bar.dnb-section {
-    margin-top: 3.5rem;
-    margin-top: calc(2rem * 1.75);
-    margin-top: calc(var(--modal-spacing)*1.75);
-    margin-top: calc(var(--modal-spacing) * 1.75);
-    margin-bottom: 1rem;
-    margin-bottom: calc(2rem / 2);
-    margin-bottom: calc(var(--modal-spacing)/2);
-    margin-bottom: calc(var(--modal-spacing) / 2); }
-    @media screen and (max-width: 50em) {
-      .dnb-modal__content--spacing .dnb-modal__header__bar.dnb-section {
-        margin-top: 1rem;
-        margin-top: calc(2rem / 2);
-        margin-top: calc(var(--modal-spacing)/2);
-        margin-top: calc(var(--modal-spacing) / 2); } }
-  .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__header__bar.dnb-section {
-    position: sticky;
-    top: 0;
-    z-index: 99;
-    margin: 3.5rem 0;
-    margin: calc(2rem * 1.75) 0;
-    margin: calc(var(--modal-spacing)*1.75) 0;
-    margin: calc(var(--modal-spacing) * 1.75) 0; }
-    @media screen and (max-width: 50em) {
-      .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__header__bar.dnb-section {
-        margin: 2rem 0;
-        margin: var(--modal-spacing) 0; } }
-  .dnb-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__header__bar.dnb-section.dnb-modal__header__bar--sticky {
-    z-index: 2999; }
-  .dnb-modal__content--drawer .dnb-modal__header__bar--sticky::before {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    left: -50%;
-    right: -50%;
-    bottom: 0;
-    height: 300%;
-    -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-modal__content--drawer .dnb-modal__header__bar:not(.dnb-modal__header__bar--sticky)::after {
-    color: transparent; }
+    .dnb-input {
+      vertical-align: baseline; }
+      .dnb-form-row--horizontal .dnb-input, .dnb-input:not(.dnb-input--stretch) {
+        -webkit-box-flex: 0;
+            -ms-flex: none;
+                flex: none; }
+      .dnb-input__inner {
+        width: 100%; }
+      .dnb-input__input, .dnb-input__placeholder {
+        -webkit-transform: translateY(-0.0625rem);
+                transform: translateY(-0.0625rem); } }
+
+/*
+* InputMasked component
+*
+*/
+.dnb-input-masked--guide {
+  font-family: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
+    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
+    monospace;
+  font-family: var(--font-family-monospace); }
+
+/*
+ * Logo Component
+ *
+ */
+.dnb-logo {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: baseline;
+  font-size: inherit;
+  line-height: 1em;
+  line-height: var(--line-height-xx-small--em);
+  color: #007272;
+  color: var(--color-sea-green);
+  height: 1em; }
+  .dnb-logo svg {
+    fill: currentColor;
+    shape-rendering: geometricPrecision; }
+  .dnb-logo--has-size {
+    width: auto;
+    height: auto; }
+  .dnb-logo--inherit-size {
+    height: inherit; }
+  .dnb-logo svg:not([width]):not([height]) {
+    width: inherit;
+    height: inherit; }
+
+/*
+ * Modal component
+ *
+ */
+:root {
+  --modal-z-index: 3000;
+  --modal-animation-duration: 300ms;
+  --modal-overlay-bg: black;
+  --modal-overlay-opacity: 0.32; }
+
+html[data-dnb-modal-active] {
+  -moz-user-select: none;
+   -ms-user-select: none;
+       user-select: none;
+  -webkit-user-select: none; }
+
+#dnb-modal-root {
+  position: absolute;
+  top: 0;
+  left: 0; }
+
+.dnb-modal {
+  /* stylelint-disable-next-line */ }
+  .dnb-modal__content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 3001;
+    z-index: calc(3000 + 1);
+    z-index: calc(var(--modal-z-index) + 1);
+    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;
+    max-width: 100vw;
+    width: 100%;
+    height: 100%;
+    -moz-user-select: none;
+     -ms-user-select: none;
+         user-select: none;
+    -webkit-user-select: none; }
+    @media screen and (max-width: 40em) {
+      .dnb-modal__content--auto-fullscreen {
+        height: auto; } }
+    .dnb-modal__content--fullscreen {
+      -webkit-box-align: start;
+          -ms-flex-align: start;
+              align-items: flex-start;
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
+    .dnb-modal__content--fullscreen .dnb-modal__content__content {
+      height: auto; }
+    .dnb-modal__content--right {
+      -webkit-box-pack: end;
+          -ms-flex-pack: end;
+              justify-content: flex-end; }
+    .dnb-modal__content--bottom {
+      -webkit-box-align: end;
+          -ms-flex-align: end;
+              align-items: flex-end; }
   .dnb-modal__overlay {
     position: fixed;
     z-index: 3000;
@@ -4129,12 +4259,6 @@ html[data-dnb-modal-active] {
             animation-delay: 0ms !important;
     -webkit-animation-duration: 0ms !important;
             animation-duration: 0ms !important; }
-  @media screen and (max-width: 40em) {
-    .dnb-modal--no-animation-on-mobile {
-      -webkit-animation-delay: 0ms !important;
-              animation-delay: 0ms !important;
-      -webkit-animation-duration: 0ms !important;
-              animation-duration: 0ms !important; } }
   .dnb-modal-root__inner {
     position: relative;
     z-index: 3001;
@@ -4156,6 +4280,25 @@ html[data-dnb-modal-active] {
     z-index: 3001;
     z-index: calc(3000 + 1);
     z-index: calc(var(--modal-z-index) + 1); }
+  .dnb-modal__header__bar.dnb-section {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between; }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-modal__header__bar.dnb-section {
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center; } }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-core-style .dnb-modal__header__bar__close {
+      margin-left: auto; } }
 
 [data-visual-test].hide-page-content #___gatsby {
   opacity: 0; }
@@ -6783,194 +6926,202 @@ span.dnb-space--no-collapse > span {
  * Tabs component
  *
  */
-.dnb-tabs__tabs {
-  position: relative;
-  z-index: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center; }
-  .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing {
-    padding-bottom: 0; }
-  .dnb-tabs__tabs__tablist {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-flex: 0;
-        -ms-flex: 0 1 auto;
-            flex: 0 1 auto;
-    padding: 0 0.5rem;
-    margin: 0 -0.5rem;
-    overflow-x: auto;
-    -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;
-    /* Hide scrollbar for Chrome, Safari */
-    /* stylelint-disable-next-line */
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */ }
-    .dnb-tabs__tabs__tablist:focus {
-      outline: none; }
-      html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist: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-tabs__tabs__tablist: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); } }
-    html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
-      scroll-behavior: smooth; }
-    html[data-visual-test] .dnb-tabs__tabs__tablist {
-      scroll-behavior: auto !important; }
-    .dnb-tabs__tabs__tablist::-webkit-scrollbar {
-      display: none; }
-  .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start; }
-  .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end; }
-  .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center; }
-  .dnb-tabs__tabs::before {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    left: -100vw;
-    bottom: 0;
-    width: 100vw;
-    height: 1px; }
-  .dnb-tabs__tabs--no-border::before {
-    content: none; }
-
-.dnb-tabs:not(.dnb-tabs--has-scrollbar) .dnb-tabs__tabs__tablist {
-  margin-left: -0.5rem;
-  padding-left: 0.5rem; }
-
-.dnb-tabs__scroll-nav-button {
-  position: absolute;
-  z-index: 2;
-  display: none;
-  opacity: 0;
-  -webkit-transition: opacity 600ms ease-out;
-  transition: opacity 600ms ease-out; }
-  .dnb-tabs__scroll-nav-button.dnb-button--primary {
-    background-color: #14555a;
-    background-color: var(--color-emerald-green); }
-  .dnb-tabs__scroll-nav-button:first-of-type {
-    left: -2.5rem; }
-  .dnb-tabs__scroll-nav-button:last-of-type {
-    right: -2.5rem; }
-  .dnb-tabs__scroll-nav-button--visible {
+.dnb-tabs {
+  /* stylelint-disable */
+  /* stylelint-enable */ }
+  .dnb-tabs__tabs {
+    position: relative;
+    z-index: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    opacity: 1; }
-  .dnb-tabs__scroll-nav-button--hide {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
+    .dnb-tabs__tabs, .dnb-tabs__tabs.dnb-section--spacing {
+      padding-bottom: 0; }
+    .dnb-tabs__tabs__tablist {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-flex: 0;
+          -ms-flex: 0 1 auto;
+              flex: 0 1 auto;
+      overflow-x: auto;
+      -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;
+      /* Hide scrollbar for Chrome, Safari */
+      /* stylelint-disable-next-line */
+      -ms-overflow-style: none;
+      /* IE and Edge */
+      scrollbar-width: none;
+      /* Firefox */ }
+      .dnb-tabs__tabs__tablist:focus {
+        outline: none; }
+        html[data-whatinput='keyboard'] .dnb-tabs__tabs__tablist: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-tabs__tabs__tablist: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); } }
+      html:not([data-visual-test]) .dnb-tabs__tabs__tablist {
+        scroll-behavior: smooth; }
+      html[data-visual-test] .dnb-tabs__tabs__tablist {
+        scroll-behavior: auto !important; }
+      .dnb-tabs__tabs__tablist::-webkit-scrollbar {
+        display: none; }
+    .dnb-tabs__tabs--left .dnb-tabs__tabs__tablist {
+      -webkit-box-pack: start;
+          -ms-flex-pack: start;
+              justify-content: flex-start; }
+    .dnb-tabs__tabs--right .dnb-tabs__tabs__tablist {
+      -webkit-box-flex: 1;
+          -ms-flex: 1;
+              flex: 1;
+      -webkit-box-pack: end;
+          -ms-flex-pack: end;
+              justify-content: flex-end; }
+    .dnb-tabs__tabs--center .dnb-tabs__tabs__tablist {
+      -webkit-box-pack: center;
+          -ms-flex-pack: center;
+              justify-content: center; }
+    .dnb-tabs__tabs::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: -100vw;
+      bottom: 0;
+      width: 100vw;
+      height: 1px; }
+    .dnb-tabs__tabs--no-border::before {
+      content: none; }
+  .dnb-tabs__scroll-nav-button {
+    position: relative;
+    z-index: 2;
+    display: none;
+    opacity: 0;
     pointer-events: none;
-    opacity: 0 !important; }
-
-.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:first-of-type {
-  left: 0; }
-
-.dnb-tabs--at-edge .dnb-tabs__scroll-nav-button:last-of-type {
-  right: 0; }
-
-html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
-  -webkit-transition: none;
-  transition: none; }
-
-.dnb-tabs__button__snap {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 0 1rem 0 1.5rem; }
-  @media screen and (max-width: 40em) {
-    .dnb-tabs__button__snap {
-      padding: 0 1rem; } }
-  .dnb-tabs__button__snap:first-of-type {
-    padding-left: 0; }
-  .dnb-tabs__button__snap:last-of-type {
-    padding-right: 0.5rem; }
-
-.dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
-  padding-right: 1.5rem; }
-
-.dnb-tabs__button,
-.dnb-core-style .dnb-tabs .dnb-tabs__button {
-  position: relative;
-  z-index: 1;
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-  margin: 0;
-  padding: 0 0.125rem;
-  /* 1/16*4 */
-  background-color: transparent;
-  border-bottom: 1px solid transparent;
-  cursor: pointer;
-  outline: none;
-  border: none;
-  font-size: 1.125rem;
-  font-size: var(--font-size-basis);
-  line-height: 1.5rem;
-  line-height: var(--line-height-basis);
-  text-decoration: none;
-  white-space: nowrap; }
-  .dnb-tabs__button__title .dnb-icon,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
-    font-size: 1rem;
-    font-size: var(--font-size-small);
-    -webkit-transform: translateY(-0.125rem);
-            transform: translateY(-0.125rem); }
-  .dnb-tabs__button .dnb-dummy,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+    -webkit-transition: opacity 600ms ease-out;
+    transition: opacity 600ms ease-out; }
+    .dnb-tabs__scroll-nav-button.dnb-button--primary {
+      background-color: #14555a;
+      background-color: var(--color-emerald-green); }
+    .dnb-tabs__scroll-nav-button--visible {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      pointer-events: initial;
+      opacity: 1; }
+    .dnb-tabs__scroll-nav-button--hide {
+      pointer-events: none;
+      opacity: 0 !important; }
+  .dnb-tabs__button,
+  .dnb-core-style .dnb-tabs .dnb-tabs__button {
+    position: relative;
+    z-index: 1;
+    -moz-user-select: none;
+     -ms-user-select: none;
+         user-select: none;
+    -webkit-user-select: none;
+    margin: 0;
+    padding: 0 0.125rem;
+    /* 1/16*4 */
+    background-color: transparent;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    outline: none;
+    border: none;
+    font-size: 1.125rem;
+    font-size: var(--font-size-basis);
+    line-height: 1.5rem;
+    line-height: var(--line-height-basis);
+    text-decoration: none;
+    white-space: nowrap;
+    -webkit-transition: margin 400ms ease-out;
+    transition: margin 400ms ease-out; }
+    .dnb-tabs__button__title .dnb-icon,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button__title .dnb-icon {
+      font-size: 1rem;
+      font-size: var(--font-size-small);
+      -webkit-transform: translateY(-0.125rem);
+              transform: translateY(-0.125rem); }
+    .dnb-tabs__button .dnb-dummy,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+              flex-direction: column;
+      height: 0;
+      visibility: hidden;
+      overflow: hidden; }
+    .dnb-tabs__button .dnb-dummy,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
+      margin-top: 0.25rem; }
+    .dnb-tabs__button::after,
+    .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px; }
+  .dnb-tabs__button__snap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    height: 0;
-    visibility: hidden;
-    overflow: hidden; }
-  .dnb-tabs__button .dnb-dummy,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button .dnb-dummy {
-    margin-top: 0.25rem; }
-  .dnb-tabs__button::after,
-  .dnb-core-style .dnb-tabs .dnb-tabs__button::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px; }
-
-.dnb-tabs__content--spacing {
-  padding-top: 2rem; }
+    padding: 0 1rem 0 1.5rem; }
+    @media screen and (max-width: 40em) {
+      .dnb-tabs__button__snap {
+        padding: 0 1rem; } }
+    .dnb-tabs__button__snap:first-of-type {
+      padding-left: 0; }
+    .dnb-tabs__button__snap:last-of-type {
+      padding-right: 0.5rem; }
+    .dnb-tabs__button__snap:first-of-type.selected.focus, .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs__button__snap:last-of-type.selected {
+      -webkit-transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms;
+      transition: padding 1s cubic-bezier(0.42, 0, 0, 1) 10ms; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type {
+    margin-left: -3rem;
+    padding-left: 3rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type {
+    margin-right: -3rem;
+    padding-right: 3rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus {
+    padding-left: 0; }
+    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:first-of-type.selected.focus .dnb-tabs__button:focus {
+      margin-left: 0.5rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus {
+    padding-right: 0;
+    /* stylelint-disable */
+    /* stylelint-enable */ }
+    .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.focus .dnb-tabs__button:focus, .dnb-tabs--has-scrollbar .dnb-tabs__button__snap:last-of-type.selected.focus .dnb-tabs__button:focus {
+      margin-right: 0.5rem; }
+  .dnb-tabs--has-scrollbar .dnb-tabs__tabs__tablist {
+    margin: 0 -2rem;
+    padding-left: 3rem;
+    padding-right: 3rem; }
+  html[data-visual-test] .dnb-tabs .dnb-tabs__button,
+  html[data-visual-test] .dnb-tabs .dnb-tabs__button__snap,
+  html[data-visual-test] .dnb-tabs .dnb-tabs__scroll-nav-button {
+    -webkit-transition: none !important;
+    transition: none !important; }
+  .dnb-tabs__content--spacing {
+    padding-top: 2rem; }
 
 /*
 * Tag component