@dnb/eufemia 10.33.0 → 10.34.0

package/es/style/themes/theme-sbanken/sbanken-theme-components.css

@@ -783,6 +783,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   .dnb-forms-field-block__contents__composition--horizontal {
     align-items: flex-end;
   }
+  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+    align-items: center;
+  }
 }
 @media screen and (max-width: 25em) {
   .dnb-forms-field-block__contents__composition--horizontal {
@@ -965,7 +968,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block--variant-basic .dnb-forms-iterate-block__inner, .dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
@@ -1107,7 +1110,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   justify-content: stretch;
   align-items: stretch;
 }
-.dnb-forms-wizard-layout__sidebar {
+.dnb-forms-wizard-layout__indicator {
   flex: 0;
   margin-bottom: 2rem;
 }
@@ -1745,7 +1748,6 @@ a.dnb-button {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--color-sea-green);
 }
 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
   display: flex;
@@ -2520,6 +2522,9 @@ button.dnb-button::-moz-focus-inner {
 .dnb-card > .dnb-flex-container > .dnb-space:has(> .dnb-scroll-view) {
   width: 100%;
 }
+.dnb-card > .dnb-flex-container--align-stretch > .dnb-button {
+  align-self: flex-start;
+}
 
 /*
 * Checkbox component
@@ -2542,14 +2547,14 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-gfx-width__indeterminate: 0.625rem;
   --checkbox-gfx-height__indeterminate--large: 0.875rem;
   --checkbox-gfx-width__indeterminate--large: 0.875rem;
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
+  --checkbox-border-width: 0.09375rem;
   --checkbox-color-gfx-on: black;
   --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
   --checkbox-color-background-off: white;
   --checkbox-color-border-on: black;
   --checkbox-color-border-off: black;
+  --checkbox-border-width--disabled: 0.125rem;
   --checkbox-color-gfx--disabled: grey;
   --checkbox-color-background-on--disabled: lightgrey;
   --checkbox-color-background-off--disabled: lightgrey;
@@ -2558,12 +2563,14 @@ button.dnb-button::-moz-focus-inner {
   --checkbox-color-gfx__indeterminate--disabled: grey;
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: grey;
   --checkbox-color-background--hover: white;
   --checkbox-color-border-on--hover: grey;
   --checkbox-color-border-off--hover: grey;
   --checkbox-color-gfx--focus: grey;
   --checkbox-color-background--focus: lightgrey;
+  --checkbox-border-width--error: 0.125rem;
   --checkbox-color-gfx--error: lavenderblush;
   --checkbox-color-gfx--error-contrast: red;
   --checkbox-color-background-on--error: red;
@@ -2756,6 +2763,9 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   width: var(--checkbox-gfx-width__indeterminate--large);
   height: var(--checkbox-gfx-height__indeterminate--large);
 }
+.dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button {
+  border-width: var(--checkbox-border-width--disabled);
+}
 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--disabled);
   border-color: var(--checkbox-color-border-on--disabled);
@@ -2790,6 +2800,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__button {
   border-color: var(--checkbox-color-border-off--hover);
   background-color: var(--checkbox-color-background--hover);
+  border-width: var(--checkbox-border-width--hover);
 }
 .dnb-checkbox__input:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
@@ -2816,7 +2827,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
   --border-color: var(--checkbox-color-border--error);
-  --border-width: var(--checkbox-border-width);
+  --border-width: var(--checkbox-border-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -6157,14 +6168,17 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
 }
 
 .dnb-radio {
+  --radio-dot--medium: 0.75rem;
+  --radio-dot--large: 1.125rem;
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
-  --radio-border-width: 0.125rem;
+  --radio-border-width: 0.09375rem;
   --radio-color-dot-on: black;
   --radio-color-background-on: white;
   --radio-color-border-on: black;
   --radio-color-background-off: white;
   --radio-color-border-off: black;
+  --radio-border-width--disabled: 0.125rem;
   --radio-color-dot-on--disabled: lightgrey;
   --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
@@ -6173,9 +6187,12 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-color-border-on--active: lightgrey;
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
+  --radio-border-width--hover: 0.125rem;
+  --radio-border-width-on--hover: 0.125rem;
   --radio-color-dot-on--hover: lightgrey;
   --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
+  --radio-border-width--focus: 0.125rem;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   --radio-color-dot-on--error: red;
@@ -6240,19 +6257,19 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   border-radius: 50%;
 }
 .dnb-radio--large .dnb-radio__focus, .dnb-radio--large .dnb-radio__button {
-  width: calc(var(--radio-width--large) - 0.125rem);
-  height: calc(var(--radio-height--large) - 0.125rem);
+  width: var(--radio-width--large);
+  height: var(--radio-height--large);
 }
 .dnb-radio__dot {
-  width: calc(var(--radio-width--medium) - 0.75rem);
-  height: calc(var(--radio-height--medium) - 0.75rem);
+  width: var(--radio-dot--medium);
+  height: var(--radio-dot--medium);
   border-radius: 50%;
   background-color: var(--radio-color-dot-on);
   transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
-  width: calc(var(--radio-width--large) - 0.875rem);
-  height: calc(var(--radio-height--large) - 0.875rem);
+  width: var(--radio-dot--large);
+  height: var(--radio-dot--large);
 }
 .dnb-radio__input {
   opacity: 0;
@@ -6386,6 +6403,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   background-color: var(--radio-color-background-off);
   border-color: var(--radio-color-border-off);
 }
+.dnb-radio__input[disabled] ~ .dnb-radio__button {
+  border-width: var(--radio-border-width--disabled);
+}
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
   background-color: var(--radio-color-background--disabled);
@@ -6418,11 +6438,14 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on--hover);
+  border-width: var(--radio-border-width-on--hover);
 }
 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--hover);
+  border-width: var(--radio-border-width--hover);
 }
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border-width: var(--radio-border-width--focus);
   border: none;
 }
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
@@ -8534,6 +8557,9 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 .dnb-modal__content .dnb-table__container .dnb-table__scroll-view {
   overflow: visible;
 }
+.dnb-card .dnb-table__container {
+  width: 100%;
+}
 
 /*
 * Table component
@@ -10290,6 +10316,48 @@ html:not([data-whatintent=touch]) .dnb-accordion--expanded > .dnb-accordion__hea
   text-decoration-color: currentcolor;
 }
 
+/*
+* Autocomplete theme for sbanken
+* TODO: this theme is just a prelimenary fix to avoid dnb colors
+*/
+/*
+ * Utilities
+ */
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
+  color: var(--sb-color-violet);
+}
+.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
+  --border-color: var(--sb-color-violet);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
+  color: transparent;
+}
+.dnb-autocomplete__shell, .dnb-autocomplete__input {
+  border-radius: var(--autocomplete-border-radius);
+}
+.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
+  --border-color: var(--sb-color-red);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-autocomplete__root .dnb-drawer-list__option--focus, .dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
+  font-weight: var(--font-weight-basis);
+}
+.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+  color: var(--sb-color-gray-dark-2);
+}
+.dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n + 2), .dnb-autocomplete__root .dnb-drawer-list__option--selected:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__item:nth-of-type(n + 2) .dnb-anchor {
+  color: var(--sb-color-white);
+}
+.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
+  font-weight: var(--font-weight-bold);
+}
+
 /*
 * Avatar theme
 *
@@ -10800,14 +10868,14 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
 *
 */
 .dnb-checkbox {
-  --checkbox-border-width: 0.125rem;
-  --checkbox-border-width--hover: 0.125rem;
+  --checkbox-border-width: 0.0625rem;
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
   --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
+  --checkbox-border-width--disabled: 0.0625rem;
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
@@ -10816,12 +10884,14 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   --checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx--hover: var(--sb-color-violet-light);
   --checkbox-color-background--hover: var(--sb-color-violet-light-3);
   --checkbox-color-border-on--hover: var(--sb-color-violet);
   --checkbox-color-border-off--hover: var(--sb-color-violet);
   --checkbox-color-gfx--focus: var(--focus-ring-color);
   --checkbox-color-background--focus: var(--sb-color-blue-light-3);
+  --checkbox-border-width--error: 0.0625rem;
   --checkbox-color-gfx--error: var(--sb-color-magenta);
   --checkbox-color-gfx--error-contrast: var(--sb-color-magenta);
   --checkbox-color-background-on--error: var(--sb-color-white);
@@ -10844,7 +10914,7 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disab
   --checkbox-gfx-height__indeterminate: 0.125rem;
   --checkbox-gfx-height__indeterminate--large: 0.25rem;
   --checkbox-gfx-width__indeterminate--large: 1.5rem;
-  --checkbox-border-radius: 0.125rem;
+  --checkbox-border-radius: 0;
   --checkbox-gfx-border-radius__indeterminate: 0rem;
 }
 
@@ -10991,7 +11061,7 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
   background-color: var(--sb-color-magenta-light-2);
 }
 .dnb-form-status--info .dnb-form-status__shell, .dnb-form-status--marketing .dnb-form-status__shell {
-  background-color: var(--sb-color-gray-light-2);
+  background-color: var(--sb-color-violet-light-4);
 }
 .dnb-form-status--warn .dnb-form-status__shell {
   background-color: var(--sb-color-yellow-light-3);
@@ -11009,7 +11079,7 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
   border-color: transparent;
 }
 .dnb-form-status__variant--outlined.dnb-form-status--info .dnb-form-status__shell, .dnb-form-status__variant--outlined.dnb-form-status--marketing .dnb-form-status__shell {
-  --border-color: var(--sb-color-gray-dark-2);
+  --border-color: var(--sb-color-violet-light);
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
@@ -11034,7 +11104,7 @@ html:not([data-whatintent=touch]) .dnb-dropdown__status--error:not(.dnb-dropdown
   --hr-color: var(--sb-color-red);
 }
 .dnb-global-status--info .dnb-global-status__content .dnb-hr {
-  --hr-color: var(--sb-color-gray-dark-2);
+  --hr-color: var(--sb-color-violet-light);
 }
 .dnb-global-status--warning .dnb-global-status__content .dnb-hr {
   --hr-color: var(--sb-color-yellow-dark);
@@ -11204,11 +11274,15 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 *
 */
 .dnb-radio {
+  --radio-dot--medium: 0.875rem;
+  --radio-dot--large: 1.5rem;
+  --radio-border-width: 0.0625rem;
   --radio-color-dot-on: var(--sb-color-violet);
   --radio-color-background-on: var(--sb-color-white);
   --radio-color-border-on: var(--sb-color-violet);
   --radio-color-background-off: var(--sb-color-white);
   --radio-color-border-off: var(--sb-color-violet);
+  --radio-border-width--disabled: 0.0625rem;
   --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
   --radio-color-background--disabled: var(--sb-color-gray-light);
   --radio-color-border-on--disabled: var(--sb-color-gray-dark);
@@ -11218,8 +11292,10 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
   --radio-color-background-off--active: var(--sb-color-white);
   --radio-color-border-off--active: var(--sb-color-gray);
   --radio-color-dot-on--hover: var(--sb-color-violet);
+  --radio-border-width-on--hover: 0.0625rem;
   --radio-color-background-on--hover: var(--sb-color-violet-light-3);
   --radio-color-background-off--hover: var(--sb-color-violet-light-3);
+  --radio-border-width--focus: 0.1875rem;
   --radio-color-background-on--focus: var(--sb-color-blue-light-3);
   --radio-color-background-off--focus: var(--sb-color-blue-light-3);
   --radio-color-dot-on--error: var(--sb-color-magenta);
@@ -11259,7 +11335,7 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 }
 .dnb-section--info {
   --text-color: var(--sb-color-text);
-  --background-color: var(--sb-color-gray-light-2);
+  --background-color: var(--sb-color-violet-light-4);
 }
 .dnb-section--warning {
   --text-color: var(--sb-color-text);
@@ -11345,7 +11421,7 @@ html[data-whatinput=keyboard] .dnb-input:not([data-input-state=disabled])[data-i
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status--info.dnb-button--secondary {
   color: var(--sb-color-text);
-  background-color: var(--sb-color-gray-light-2);
+  background-color: var(--sb-color-violet-light-4);
 }
 .dnb-step-indicator-wrapper .dnb-step-indicator__button__status .dnb-button__icon {
   align-self: flex-start;
@@ -11969,7 +12045,7 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
 }
 .dnb-drawer-list__option__inner {
   overflow: visible;
-  background-color: transparent;
+  background-color: inherit;
   padding: 1rem 0.75rem;
 }
 .dnb-drawer-list__option__inner::before {
@@ -12000,6 +12076,9 @@ html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__bu
   background-color: transparent;
   z-index: 0;
 }
+.dnb-drawer-list__option__item.item-nr-1 {
+  font-weight: var(--font-weight-medium);
+}
 html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover[disabled] {
   cursor: not-allowed;
 }
@@ -12042,6 +12121,12 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
   background-size: cover;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
 }
+@media screen and (min-width: 40em) {
+  .dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix {
+    z-index: 2;
+    background-color: inherit;
+  }
+}
 .dnb-drawer-list__option.last-of-type {
   border-radius: var(--drawer-list-options-border-radius);
 }
@@ -12092,56 +12177,6 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled])
   color: var(--sb-color-red);
 }
 
-/*
-* Autocomplete theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
-  --border-color: var(--color-sea-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__submit-button__button, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button {
-  border-radius: 0;
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-  box-shadow: none;
-}
-.dnb-autocomplete--show-indicator .dnb-autocomplete__input .dnb-input__icon {
-  color: transparent;
-}
-.dnb-autocomplete__shell, .dnb-autocomplete__input {
-  border-radius: var(--autocomplete-border-radius);
-}
-.dnb-autocomplete__status--error:not(.dnb-autocomplete--opened) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
-  --border-color: var(--color-fire-red);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(1) {
-  font-weight: var(--font-weight-basis);
-}
-.dnb-autocomplete__root .dnb-drawer-list__option__item:nth-of-type(n + 2) {
-  color: var(--color-black-55);
-}
-.dnb-autocomplete__root .dnb-drawer-list__option__item--highlight {
-  font-weight: var(--font-weight-bold);
-}
-
-.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n + 2) {
-  color: var(--color-white);
-}
-
-.dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor {
-  color: var(--color-white);
-}
-
 /*
 * Badge theme
 *
@@ -12765,6 +12800,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   .dnb-forms-field-block__contents__composition--horizontal {
     align-items: flex-end;
   }
+  .dnb-forms-field-block__contents__composition--horizontal[class*=align-center] {
+    align-items: center;
+  }
 }
 @media screen and (max-width: 25em) {
   .dnb-forms-field-block__contents__composition--horizontal {
@@ -12947,7 +12985,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block--variant-basic .dnb-forms-iterate-block__inner, .dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
 .dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
@@ -13089,7 +13127,7 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
   justify-content: stretch;
   align-items: stretch;
 }
-.dnb-forms-wizard-layout__sidebar {
+.dnb-forms-wizard-layout__indicator {
   flex: 0;
   margin-bottom: 2rem;
 }