@dnb/eufemia 9.22.0 → 9.23.0-beta.1

package/style/dnb-ui-components.css

@@ -2114,6 +2114,649 @@ button.dnb-button::-moz-focus-inner {
   to {
     opacity: 0; } }
 
+/*
+ * 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 {
+  --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; }
+
+/*
+* 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
 *
@@ -3433,272 +4076,100 @@ html[data-visual-test] .dnb-global-status__shell {
   .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); } }
+            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); } }
 
-@-webkit-keyframes hide-modal-overlay {
-  from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
-  to {
-    opacity: 0; } }
+/*
+* 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); }
 
-@keyframes hide-modal-overlay {
-  from {
-    opacity: 0.32;
-    opacity: var(--modal-overlay-opacity); }
-  to {
-    opacity: 0; } }
+/*
+ * 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-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; }
 
@@ -3731,374 +4202,33 @@ html[data-dnb-modal-active] {
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
+    max-width: 100vw;
     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 */ }
+    -webkit-user-select: none; }
     @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;
-      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 {
+    .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--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 {
+    .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--drawer.dnb-modal__content--bottom {
+    .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; } }
-  @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-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; }