@dnb/eufemia 9.22.0 → 9.23.0-beta.1

package/es/components/modal/style/dnb-modal.css

@@ -650,9 +650,9 @@ button.dnb-button::-moz-focus-inner {
     /* 2 */ }
 
 /*
- * Modal component
- *
- */
+* Drawer component
+*
+*/
 /*
  * Modal component
  *
@@ -817,356 +817,236 @@ button.dnb-button::-moz-focus-inner {
     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; }
+  --drawer-width: 40vw;
+  --drawer-min-width: 25rem;
+  --drawer-max-width: 40rem;
+  --drawer-header-min-height: 6rem;
+  --drawer-spacing: 2rem;
+  --drawer-spacing-minus: -2rem; }
 
-#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);
+.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;
-    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; } }
+            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) {
-      @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;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-orient: vertical;
-      -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 {
+      .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; }
-    @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 {
+              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-modal__content .dnb-modal__header [class*='dnb-h--']:not([class*='__top']),
-    .dnb-modal__content .dnb-modal__header .dnb-modal__title:not([class*='__top']) {
+    .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-modal__content .dnb-modal__header [class*='dnb-h--']:not([class*='__bottom']),
-    .dnb-modal__content .dnb-modal__header .dnb-modal__title:not([class*='__bottom']) {
+    .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-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 {
+  .dnb-drawer .dnb-drawer__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 {
+  .dnb-drawer--spacing .dnb-drawer__header {
     min-height: 6rem;
-    min-height: var(--modal-drawer-header-min-height); }
-  .dnb-modal__wrapper__inner {
+    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(--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 {
+    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(--modal-spacing-minus)*2);
-    margin-bottom: calc(var(--modal-spacing-minus) * 2); }
+    margin-bottom: calc(var(--drawer-spacing-minus)*2);
+    margin-bottom: calc(var(--drawer-spacing-minus) * 2); }
     @supports (-webkit-touch-callout: none) {
-      .dnb-modal__content--drawer .dnb-modal__wrapper__inner {
+      .dnb-drawer__body {
         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 {
+        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;
@@ -1177,44 +1057,21 @@ html[data-dnb-modal-active] {
     -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; } }
-  .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 {
+  .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(--modal-spacing)*1.75) 0;
-    margin: calc(var(--modal-spacing) * 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-modal__content--spacing.dnb-modal__content--drawer .dnb-modal__header__bar.dnb-section {
+      .dnb-drawer--spacing .dnb-drawer__navigation.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 {
+        margin: var(--drawer-spacing) 0; } }
+  .dnb-drawer--spacing .dnb-drawer__navigation.dnb-section.dnb-drawer__navigation--sticky {
     z-index: 2999; }
-  .dnb-modal__content--drawer .dnb-modal__header__bar--sticky::before {
+  .dnb-drawer .dnb-drawer__navigation--sticky::before {
     content: '';
     position: absolute;
     z-index: -1;
@@ -1226,8 +1083,449 @@ html[data-dnb-modal-active] {
             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 {
+  .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; }
+
+/*
+ * Dialog component
+ *
+ */
+/*
+ * Modal component
+ *
+ */
+@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 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 show-drawer {
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@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-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-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-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 show-modal-overlay {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
+
+@keyframes hide-modal-overlay {
+  from {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); }
+  to {
+    opacity: 0; } }
+
+:root {
+  --dialog-min-width: 320px;
+  --dialog-avg-width: 60vw;
+  --dialog-max-width: 60rem;
+  --dialog-spacing: 2rem;
+  --dialog-spacing-minus: -2rem; }
+
+.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;
+    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;
+    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; }
+
+/*
+ * Modal component
+ *
+ */
+/*
+ * Modal component
+ *
+ */
+@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 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 show-drawer {
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@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-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-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-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 show-modal-overlay {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.32;
+    opacity: var(--modal-overlay-opacity); } }
+
+@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-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;
@@ -1258,12 +1556,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;
@@ -1285,6 +1577,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; }