@adyen/kyc-components 3.28.1 → 3.30.0

package/dist/style.css

@@ -199,6 +199,13 @@
   min-width: 100%;
 }
 
+.adyen-kyc-button--critical {
+  background-color: var(--adyen-sdk-color-background-critical-strong, #e22d2d);
+}
+.adyen-kyc-button--critical:hover {
+  background-color: var(--adyen-sdk-color-background-critical-strong-hover, #c72727);
+}
+
 .adyen-kyc-button--icon-left {
   flex-direction: row-reverse;
 }
@@ -868,73 +875,6 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-tag {
-  color: var(--adyen-sdk-color-label-primary, #00112c);
-  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-size: var(--adyen-sdk-text-body-font-size, 14px);
-  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
-  line-height: var(--adyen-sdk-text-body-line-height, 20px);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
-  font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
-  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
-  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
-  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
-  border-radius: var(--adyen-sdk-border-radius-s, 4px);
-  text-decoration: none;
-  vertical-align: baseline;
-  white-space: nowrap;
-  border: none;
-}
-.adyen-kyc-tag *,
-.adyen-kyc-tag *::before,
-.adyen-kyc-tag *::after {
-  box-sizing: border-box;
-}
-
-.adyen-kyc-tag--grey {
-  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-}
-
-.adyen-kyc-tag--blue {
-  background: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
-  color: var(--adyen-sdk-color-label-on-background-highlight-weak, #0063d7);
-}
-
-.adyen-kyc-tag--orange {
-  background: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
-  color: var(--adyen-sdk-color-label-on-background-warning-weak, #9b5700);
-}
-
-.adyen-kyc-tag--red {
-  background: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
-  color: var(--adyen-sdk-color-label-on-background-critical-weak, #c72727);
-}
-
-.adyen-kyc-tag--teal {
-  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
-  color: #065e79;
-}
-
-.adyen-kyc-tag--green {
-  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
-  color: var(--adyen-sdk-color-label-on-background-success-weak, #067934);
-}
-
-.adyen-kyc-tag--basic {
-  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
-  color: var(--adyen-sdk-color-label-secondary, #5c687c);
-}/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
 .adyen-kyc-dropdown {
   position: relative;
 }
@@ -1012,6 +952,73 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
+.adyen-kyc-tag {
+  color: var(--adyen-sdk-color-label-primary, #00112c);
+  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-size: var(--adyen-sdk-text-body-font-size, 14px);
+  font-weight: var(--adyen-sdk-text-body-font-weight, 400);
+  line-height: var(--adyen-sdk-text-body-line-height, 20px);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
+  font-family: var(--adyen-sdk-text-caption-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
+  font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
+  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
+  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
+  border-radius: var(--adyen-sdk-border-radius-s, 4px);
+  text-decoration: none;
+  vertical-align: baseline;
+  white-space: nowrap;
+  border: none;
+}
+.adyen-kyc-tag *,
+.adyen-kyc-tag *::before,
+.adyen-kyc-tag *::after {
+  box-sizing: border-box;
+}
+
+.adyen-kyc-tag--grey {
+  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+}
+
+.adyen-kyc-tag--blue {
+  background: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
+  color: var(--adyen-sdk-color-label-on-background-highlight-weak, #0063d7);
+}
+
+.adyen-kyc-tag--orange {
+  background: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
+  color: var(--adyen-sdk-color-label-on-background-warning-weak, #9b5700);
+}
+
+.adyen-kyc-tag--red {
+  background: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
+  color: var(--adyen-sdk-color-label-on-background-critical-weak, #c72727);
+}
+
+.adyen-kyc-tag--teal {
+  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
+  color: #065e79;
+}
+
+.adyen-kyc-tag--green {
+  background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
+  color: var(--adyen-sdk-color-label-on-background-success-weak, #067934);
+}
+
+.adyen-kyc-tag--basic {
+  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
+  color: var(--adyen-sdk-color-label-secondary, #5c687c);
+}/* #region Borders */
+/* #endregion */
+/* #region Z-index */
+/* #endregion */
+/* #region Timing functions */
+/* #endregion */
+/* #region Inline components */
+/* #endregion */
 .adyen-kyc-typography {
   color: var(--adyen-sdk-color-label-primary, #00112c);
   font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -1140,6 +1147,7 @@ button[disabled]:hover {
   padding-left: var(--adyen-sdk-spacer-090, 24px);
   position: relative;
   user-select: none;
+  width: calc(100% - 32px); /* leaves space for the error icon */
 }
 .adyen-kyc-checkbox__helper-text {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
@@ -1852,7 +1860,13 @@ button[disabled]:hover {
 
 .adyen-kyc-list--ordered {
   list-style-type: decimal;
-}.adyen-kyc-search-address {
+}fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.adyen-kyc-search-address {
   display: flex;
   flex-direction: column;
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
@@ -1943,43 +1957,7 @@ button[disabled]:hover {
   height: auto !important;
 }
 
-/* stylelint-enable selector-class-pattern */.adyen-kyc-loading-input__form {
-  opacity: 1;
-}
-.adyen-kyc-loading-input__form--loading-opacity0 {
-  opacity: 0;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-1 {
-  opacity: 0.1;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-2 {
-  opacity: 0.2;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-3 {
-  opacity: 0.3;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-4 {
-  opacity: 0.4;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-5 {
-  opacity: 0.5;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-6 {
-  opacity: 0.6;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-7 {
-  opacity: 0.7;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-8 {
-  opacity: 0.8;
-}
-.adyen-kyc-loading-input__form--loading-opacity0-9 {
-  opacity: 0.9;
-}
-.adyen-kyc-loading-input__form--loading-opacity1 {
-  opacity: 1;
-}
-.adyen-kyc-loading-input__loader {
+/* stylelint-enable selector-class-pattern */.adyen-kyc-loader-wrapper-loader {
   display: none;
   height: 100%;
   left: 0;
@@ -1988,7 +1966,8 @@ button[disabled]:hover {
   width: 100%;
   z-index: 1;
 }
-.adyen-kyc-loading-input__loader--active {
+
+.adyen-kyc-loader-wrapper-loader-active {
   display: block;
 }.adyen-kyc-id-verification-method__guidance {
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
@@ -2151,6 +2130,22 @@ button[disabled]:hover {
   to {
     opacity: 1;
   }
+}.adyen-kyc-check-guidance {
+  margin: var(--adyen-sdk-spacer-090, 24px) 0 var(--adyen-sdk-spacer-030, 6px);
+}
+.adyen-kyc-check-guidance__image {
+  width: 100%;
+}
+.adyen-kyc-check-guidance__image--annotated {
+  position: absolute;
+}
+.adyen-kyc-check-guidance__image--inactive {
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.adyen-kyc-check-guidance .adyen-kyc-us-check-account-number,
+.adyen-kyc-check-guidance .adyen-kyc-us-check-routing-number {
+  fill: var(--adyen-sdk-color-label-highlight, #0070f5);
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */
@@ -2267,7 +2262,6 @@ button[disabled]:hover {
 }.adyen-kyc-verified-business-card {
   display: flex;
   flex-direction: column;
-  gap: var(--adyen-sdk-spacer-080, 20px);
   background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
   padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
@@ -2279,7 +2273,24 @@ button[disabled]:hover {
 .adyen-kyc-verified-business-card__address a {
   color: var(--adyen-sdk-color-label-primary, #00112c);
 }
-.adyen-kyc-verified-business-card__button {
+.adyen-kyc-verified-business-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--adyen-sdk-spacer-080, 20px);
+  margin-bottom: var(--adyen-sdk-spacer-080, 20px);
+  transition: max-height 0.5s ease, padding-left 0.35s ease, opacity 0.35s ease;
+}
+.adyen-kyc-verified-business-card__content--collapsed {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  margin: 0;
+  padding-left: var(--adyen-sdk-spacer-080, 20px);
+}
+.adyen-kyc-verified-business-card__content--expanded {
+  max-height: 480px;
+}
+.adyen-kyc-verified-business-card__expand-button {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
@@ -2298,28 +2309,33 @@ button[disabled]:hover {
   font-weight: var(--adyen-sdk-text-body-font-weight, 400);
   margin: var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-kyc-structured-list__list-item {
+
+.adyen-kyc-structured-list-list-item {
   display: flex;
   flex-direction: column;
 }
-.adyen-layout-md .adyen-kyc-structured-list__list-item {
+.adyen-layout-md .adyen-kyc-structured-list-list-item {
   flex-direction: row;
   align-items: center;
 }
-.adyen-kyc-structured-list__list-item:not(:last-of-type) {
+
+.adyen-kyc-structured-list-list-item:not(:last-of-type) {
   margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }
-.adyen-kyc-structured-list__label {
+
+.adyen-kyc-structured-list-label {
   flex: 1;
   color: var(--adyen-sdk-color-label-secondary, #5c687c);
+  margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
 }
-.adyen-kyc-structured-list__value {
+
+.adyen-kyc-structured-list-value {
   flex: 1;
   color: var(--adyen-sdk-color-label-primary, #00112c);
   margin: var(--adyen-sdk-spacer-020, 4px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
   overflow-x: auto;
 }
-.adyen-layout-md .adyen-kyc-structured-list__value {
+.adyen-layout-md .adyen-kyc-structured-list-value {
   margin: var(--adyen-sdk-spacer-000, 0px);
 }.adyen-kyc-basic-information {
   display: flex;
@@ -2580,7 +2596,7 @@ button[disabled]:hover {
   max-height: 640px;
 }
 @media screen and (max-width: 480px) {
-  .adyen-kyc-modal {
+  .adyen-kyc-modal:not(.adyen-kyc-modal--small) {
     width: 100%;
     height: 100%;
     max-width: 100%;
@@ -2588,6 +2604,10 @@ button[disabled]:hover {
     margin: 0;
     border-radius: 0;
   }
+  .adyen-kyc-modal:not(.adyen-kyc-modal--small) > .adyen-kyc-modal__wrapper {
+    --adyen-kyc-modal-internal-margin: 0px;
+    border-radius: 0;
+  }
 }
 
 .adyen-kyc-modal__wrapper {
@@ -2601,12 +2621,6 @@ button[disabled]:hover {
   height: calc(100% - var(--adyen-kyc-modal-internal-margin) * 2);
   --adyen-kyc-modal-footer-height: 62px;
 }
-@media screen and (max-width: 480px) {
-  .adyen-kyc-modal__wrapper {
-    --adyen-kyc-modal-internal-margin: 0px;
-    border-radius: 0;
-  }
-}
 
 .adyen-kyc-modal__main {
   display: inline-grid;
@@ -2683,7 +2697,8 @@ button[disabled]:hover {
   padding-left: var(--adyen-sdk-spacer-140, 64px);
 }
 
-.adyen-kyc-modal-button-blur {
+.adyen-kyc-modal-button {
+  z-index: 100;
   backdrop-filter: blur(2px);
 }/* #region Borders */
 /* #endregion */
@@ -2760,6 +2775,7 @@ button[disabled]:hover {
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  padding: var(--adyen-sdk-spacer-100, 32px);
   background: var(--adyen-sdk-color-background-primary, #ffffff);
   display: flex;
   flex-direction: column;
@@ -2773,6 +2789,9 @@ button[disabled]:hover {
 .adyen-kyc-dropin *::after {
   box-sizing: border-box;
 }
+.adyen-layout-xs-only .adyen-kyc-dropin {
+  padding: var(--adyen-sdk-spacer-040, 8px);
+}
 .adyen-kyc-dropin-container {
   position: relative;
   min-height: 480px;
@@ -2808,6 +2827,10 @@ button[disabled]:hover {
 .adyen-kyc-dropin__main {
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
   width: 100%;
+}
+
+.adyen-kyc-modal-content {
+  height: 100%;
 }.adyen-kyc-embedded-action-bar {
   display: flex;
   justify-content: space-between;
@@ -2831,12 +2854,8 @@ button[disabled]:hover {
 /* #endregion */
 /* #region Inline components */
 /* #endregion */
-.adyen-kyc-loading-input__form .adyen-kyc-form-navigation {
-  width: 100%;
-}
-
 .adyen-kyc-form-navigation {
-  width: 27%;
+  width: 100%;
 }
 .adyen-layout-xs-only .adyen-kyc-form-navigation .adyen-kyc-form-navigation__item {
   display: none;
@@ -3934,24 +3953,47 @@ button[disabled]:hover {
 }
 .adyen-kyc-signer-card__name {
   flex-grow: 1;
+}.adyen-kyc-splashscreen {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--adyen-sdk-spacer-080, 20px);
+}
+
+.adyen-kyc-splashscreen > * {
+  max-width: 65%;
+  text-align: center;
+}.adyen-kyc-outlined-icon {
+  width: 1.75em;
+  height: 1.75em;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  color: var(--adyen-sdk-color-label-on-color, #ffffff);
+  background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
+  outline: 0.5em solid var(--adyen-sdk-color-background-success-weak, #edfaf3);
 }.adyen-kyc-skeleton {
   width: 100%;
   height: 100%;
   background-color: var(--adyen-sdk-color-outline-secondary, #c9cdd3);
   border-radius: var(--adyen-sdk-border-radius-m, 8px);
-  animation: 2s ease-in-out 0.5s infinite normal none running skeleton;
+  animation: 2s ease-in-out 0.5s infinite normal none running adyen-kyc-skeleton;
 }
 
-.adyen-kyc-skeleton__circle {
+.adyen-kyc-skeleton-circle {
   border-radius: 50%;
 }
 
-.adyen-kyc-skeleton__text {
+.adyen-kyc-skeleton-text {
   height: 1em !important;
   margin: 0.2em 0 !important;
 }
 
-@keyframes skeleton {
+@keyframes adyen-kyc-skeleton {
   0% {
     opacity: 1;
   }
@@ -3986,23 +4028,27 @@ button[disabled]:hover {
   text-align: left;
   padding: var(--adyen-sdk-spacer-040, 8px);
 }
-.adyen-kyc-embedded-status--loading {
+
+.adyen-kyc-embedded-status-loading {
   cursor: default;
 }
-.adyen-kyc-embedded-status--loading .adyen-kyc-embedded-status__avatar {
+
+.adyen-kyc-embedded-status-loading .adyen-kyc-embedded-status-avatar {
   background-color: var(--adyen-sdk-color-background-primary, #ffffff);
   border: none;
 }
-.adyen-kyc-embedded-status--light .adyen-kyc-embedded-status__avatar {
+
+.adyen-kyc-embedded-status-light .adyen-kyc-embedded-status-avatar {
   background-color: var(--adyen-sdk-color-background-primary, #ffffff);
   border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
   color: var(--adyen-sdk-color-label-primary, #00112c);
 }
-.adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status--loading) {
+
+.adyen-kyc-embedded-status:hover:not(.adyen-kyc-embedded-status-loading) {
   background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
 }
 
-.adyen-kyc-embedded-status__avatar {
+.adyen-kyc-embedded-status-avatar {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -4012,11 +4058,11 @@ button[disabled]:hover {
   color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
   background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
 }
-.adyen-kyc-embedded-status__avatar .adyen-kyc-embedded-status__icon svg {
+.adyen-kyc-embedded-status-avatar .adyen-kyc-embedded-status-icon svg {
   height: 100%;
 }
 
-.adyen-kyc-embedded-status__info {
+.adyen-kyc-embedded-status-info {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -4046,14 +4092,18 @@ button[disabled]:hover {
   flex-direction: column;
   align-items: center;
   width: 100%;
-}.adyen-kyc-manage-ti-overview-item-summary__error {
+}.adyen-kyc-manage-ti-overview-item-summary {
+  margin: var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-manage-ti-overview-item-summary__header {
+  margin-left: var(--adyen-sdk-spacer-060, 12px);
+}
+.adyen-kyc-manage-ti-overview-item-summary__error {
   margin-bottom: var(--adyen-sdk-spacer-070, 16px);
 }
-
 .adyen-kyc-manage-ti-overview-item-summary__card:not(:last-of-type) {
   margin-bottom: var(--adyen-sdk-spacer-060, 12px);
 }
-
 .adyen-kyc-manage-ti-overview-item-summary__error-button {
   padding-left: 0;
 }.adyen-kyc__high-exposure-company .adyen-kyc-typography--title-l,
@@ -4109,571 +4159,8 @@ button[disabled]:hover {
 .adyen-view-verification-status__button {
   font-size: var(--adyen-sdk-text-body-font-size, 14px);
   line-height: var(--adyen-sdk-text-body-line-height, 20px);
-}/* #region Borders */
-/* #endregion */
-/* #region Z-index */
-/* #endregion */
-/* #region Timing functions */
-/* #endregion */
-/* #region Inline components */
-/* #endregion */
-.adyen-kyc-u-display-flex {
-  display: flex !important;
-}
-
-.adyen-kyc-u-display-inline-flex {
-  display: inline-flex !important;
-}
-
-.adyen-kyc-u-flex-direction-row {
-  flex-direction: row !important;
-}
-
-.adyen-kyc-u-flex-direction-row-reverse {
-  flex-direction: row-reverse !important;
-}
-
-.adyen-kyc-u-flex-direction-column {
-  flex-direction: column !important;
-}
-
-.adyen-kyc-u-flex-direction-column-reverse {
-  flex-direction: column-reverse !important;
-}
-
-.adyen-kyc-u-flex-wrap-wrap {
-  flex-wrap: wrap !important;
-}
-
-.adyen-kyc-u-flex-wrap-nowrap {
-  flex-wrap: nowrap !important;
-}
-
-.adyen-kyc-u-align-items-start {
-  align-items: start !important;
-}
-
-.adyen-kyc-u-align-items-flex-start {
-  align-items: flex-start !important;
-}
-
-.adyen-kyc-u-align-items-flex-end {
-  align-items: flex-end !important;
-}
-
-.adyen-kyc-u-align-items-center {
-  align-items: center !important;
-}
-
-.adyen-kyc-u-align-items-stretch {
-  align-items: stretch !important;
-}
-
-.adyen-kyc-u-align-items-baseline {
-  align-items: baseline !important;
-}
-
-.adyen-kyc-u-align-items-end {
-  align-items: end !important;
-}
-
-.adyen-kyc-u-justify-content-center {
-  justify-content: center !important;
-}
-
-.adyen-kyc-u-justify-content-flex-start {
-  justify-content: flex-start !important;
-}
-
-.adyen-kyc-u-justify-content-flex-end {
-  justify-content: flex-end !important;
-}
-
-.adyen-kyc-u-justify-content-start {
-  justify-content: start !important;
-}
-
-.adyen-kyc-u-justify-content-end {
-  justify-content: end !important;
-}
-
-.adyen-kyc-u-justify-content-left {
-  justify-content: left !important;
-}
-
-.adyen-kyc-u-justify-content-right {
-  justify-content: right !important;
-}
-
-.adyen-kyc-u-justify-content-space-between {
-  justify-content: space-between !important;
-}
-
-.adyen-kyc-u-justify-content-space-around {
-  justify-content: space-around !important;
-}
-
-.adyen-kyc-u-justify-content-space-evenly {
-  justify-content: space-evenly !important;
-}
-
-.adyen-kyc-u-justify-content-stretch {
-  justify-content: stretch !important;
-}
-
-.adyen-kyc-u-flex-1 {
-  flex: 1 !important;
-}
-
-.adyen-kyc-u-flex-2 {
-  flex: 2 !important;
-}
-
-.adyen-kyc-u-flex-3 {
-  flex: 3 !important;
-}
-
-.adyen-kyc-u-flex-4 {
-  flex: 4 !important;
-}
-
-.adyen-kyc-u-width-full {
-  width: 100% !important;
-}
-
-.adyen-kyc-u-margin-auto {
-  margin: auto !important;
-}
-
-.adyen-kyc-u-margin-bottom-auto {
-  margin-bottom: auto !important;
-}
-
-.adyen-kyc-u-margin-left-auto {
-  margin-left: auto !important;
-}
-
-.adyen-kyc-u-margin-right-auto {
-  margin-right: auto !important;
-}
-
-.adyen-kyc-u-margin-top-auto {
-  margin-top: auto !important;
-}
-
-.adyen-kyc-u-margin-x-auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
-}
-
-.adyen-kyc-u-margin-y-auto {
-  margin-bottom: auto !important;
-  margin-top: auto !important;
-}
-
-.adyen-kyc-u-margin-0 {
-  margin: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-0 {
-  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-left-0 {
-  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-right-0 {
-  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-top-0 {
-  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-x-0 {
-  margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
-  margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-y-0 {
-  margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
-  margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
-}
-
-.adyen-kyc-u-margin-2 {
-  margin: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-2 {
-  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-left-2 {
-  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-right-2 {
-  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-top-2 {
-  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-x-2 {
-  margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
-  margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-y-2 {
-  margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
-  margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
-}
-
-.adyen-kyc-u-margin-4 {
-  margin: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-4 {
-  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-left-4 {
-  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-right-4 {
-  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-top-4 {
-  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-x-4 {
-  margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
-  margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-y-4 {
-  margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
-  margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
-}
-
-.adyen-kyc-u-margin-6 {
-  margin: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-6 {
-  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-left-6 {
-  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-right-6 {
-  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-top-6 {
-  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-x-6 {
-  margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
-  margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-y-6 {
-  margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
-  margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
-}
-
-.adyen-kyc-u-margin-8 {
-  margin: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-8 {
-  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-left-8 {
-  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-right-8 {
-  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-top-8 {
-  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-x-8 {
-  margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
-  margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-y-8 {
-  margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
-  margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
-}
-
-.adyen-kyc-u-margin-10 {
-  margin: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-10 {
-  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-left-10 {
-  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-right-10 {
-  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-top-10 {
-  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-x-10 {
-  margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
-  margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-y-10 {
-  margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
-  margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
-}
-
-.adyen-kyc-u-margin-12 {
-  margin: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-12 {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-left-12 {
-  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-right-12 {
-  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-top-12 {
-  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-x-12 {
-  margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
-  margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-y-12 {
-  margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
-  margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
-}
-
-.adyen-kyc-u-margin-16 {
-  margin: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-16 {
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-left-16 {
-  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-right-16 {
-  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-top-16 {
-  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-x-16 {
-  margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
-  margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-y-16 {
-  margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
-  margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
-}
-
-.adyen-kyc-u-margin-20 {
-  margin: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-20 {
-  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-left-20 {
-  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-right-20 {
-  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-top-20 {
-  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-x-20 {
-  margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
-  margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-y-20 {
-  margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
-  margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
-}
-
-.adyen-kyc-u-margin-24 {
-  margin: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-24 {
-  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-left-24 {
-  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-right-24 {
-  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-top-24 {
-  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-x-24 {
-  margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
-  margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-y-24 {
-  margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
-  margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
-}
-
-.adyen-kyc-u-margin-32 {
-  margin: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-32 {
-  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-left-32 {
-  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-right-32 {
-  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-top-32 {
-  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-x-32 {
-  margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
-  margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-y-32 {
-  margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
-  margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
-}
-
-.adyen-kyc-u-margin-40 {
-  margin: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-40 {
-  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-left-40 {
-  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-right-40 {
-  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-top-40 {
-  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-x-40 {
-  margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
-  margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-y-40 {
-  margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
-  margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
-}
-
-.adyen-kyc-u-margin-48 {
-  margin: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-u-margin-bottom-48 {
-  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-u-margin-left-48 {
-  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-u-margin-right-48 {
-  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-u-margin-top-48 {
-  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-u-margin-x-48 {
-  margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
-  margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-u-margin-y-48 {
-  margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
-  margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
-}
-
-.adyen-kyc-ui-element-container-wrapper {
-  width: 100%;
-}
-
-.adyen-kyc-ui-element-container {
-  box-sizing: border-box;
-  background-color: var(--adyen-sdk-color-background-primary, #ffffff);
+}.adyen-kyc-ui-element-container {
   position: relative;
-  padding: var(--adyen-sdk-spacer-100, 32px);
-  border-radius: var(--adyen-sdk-border-radius-m, 8px);
-}
-.adyen-layout-xs-only .adyen-kyc-ui-element-container {
-  padding: var(--adyen-sdk-spacer-040, 8px);
 }/* #region Borders */
 /* #endregion */
 /* #region Z-index */