@adyen/adyen-platform-experience-web
Version:
1 lines • 253 kB
Source Map (JSON)
{"version":3,"file":"styles-CLV89_hH-Cf2_rK0x.cjs","sources":["../node_modules/.pnpm/@adyen+kyc-components@4.0.0-compact.9_react@19.2.0_typescript@5.8.3/node_modules/@adyen/kyc-components/dist/styles-CLV89_hH.js"],"sourcesContent":[";\n{\n try {\n let e = \"undefined\" != typeof window ? window : \"undefined\" != typeof global ? global : \"undefined\" != typeof globalThis ? globalThis : \"undefined\" != typeof self ? self : {}, n = new e.Error().stack;\n n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = \"497cb2d7-cb22-4b41-a75b-d9e7a79a8d97\", e._sentryDebugIdIdentifier = \"sentry-dbid-497cb2d7-cb22-4b41-a75b-d9e7a79a8d97\");\n } catch (e) {\n }\n}\n;\nconst css = `/* for container queries */\n.adyen-kyc-typography {\n color: var(--adyen-internal-color-label-primary, #001222);\n font-family: var(--adyen-internal-text-body-font-family);\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-weight: var(--adyen-internal-text-body-font-weight, 400);\n line-height: var(--adyen-internal-text-body-line-height, 20px);\n margin: var(--adyen-internal-spacer-000, 0px);\n}\n.adyen-kyc-typography--body {\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-family: var(--adyen-internal-text-body-font-family);\n line-height: var(--adyen-internal-text-body-line-height, 20px);\n letter-spacing: var(--adyen-internal-text-body-letter-spacing, 0);\n font-weight: var(--adyen-internal-text-body-font-weight, 400);\n}\n.adyen-kyc-typography--body-stronger {\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-family: var(--adyen-internal-text-body-font-family);\n line-height: var(--adyen-internal-text-body-line-height, 20px);\n letter-spacing: var(--adyen-internal-text-body-letter-spacing, 0);\n font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);\n}\n.adyen-kyc-typography--body-strongest {\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-family: var(--adyen-internal-text-body-font-family);\n line-height: var(--adyen-internal-text-body-line-height, 20px);\n letter-spacing: var(--adyen-internal-text-body-letter-spacing, 0);\n font-weight: var(--adyen-internal-text-body-strongest-font-weight, 600);\n}\n.adyen-kyc-typography--caption {\n font-size: var(--adyen-internal-text-caption-font-size, 12px);\n font-family: var(--adyen-internal-text-caption-font-family);\n font-weight: var(--adyen-internal-text-caption-font-weight, 400);\n line-height: var(--adyen-internal-text-caption-line-height, 18px);\n letter-spacing: var(--adyen-internal-text-caption-letter-spacing, 0);\n font-weight: var(--adyen-internal-text-caption-font-weight, 400);\n}\n.adyen-kyc-typography--caption-stronger {\n font-size: var(--adyen-internal-text-caption-font-size, 12px);\n font-family: var(--adyen-internal-text-caption-font-family);\n font-weight: var(--adyen-internal-text-caption-font-weight, 400);\n line-height: var(--adyen-internal-text-caption-line-height, 18px);\n letter-spacing: var(--adyen-internal-text-caption-letter-spacing, 0);\n font-weight: var(--adyen-internal-text-caption-stronger-font-weight, 500);\n}\n.adyen-kyc-typography--title {\n font-size: var(--adyen-internal-text-title-font-size, 16px);\n font-family: var(--adyen-internal-text-title-font-family);\n font-weight: var(--adyen-internal-text-title-font-weight, 600);\n line-height: var(--adyen-internal-text-title-line-height, 26px);\n letter-spacing: var(--adyen-internal-text-title-letter-spacing, 0);\n}\n@container main (max-width: 680px) {\n .adyen-kyc-typography--title {\n font-size: var(--adyen-internal-text-title-mobile-font-size, 16px);\n line-height: var(--adyen-internal-text-title-mobile-line-height, 26px);\n }\n}\n.adyen-kyc-typography--title-m {\n font-size: var(--adyen-internal-text-title-m-font-size, 20px);\n font-family: var(--adyen-internal-text-title-m-font-family);\n font-weight: var(--adyen-internal-text-title-m-font-weight, 600);\n line-height: var(--adyen-internal-text-title-m-line-height, 30px);\n letter-spacing: var(--adyen-internal-text-title-m-letter-spacing, 0);\n}\n@container main (max-width: 680px) {\n .adyen-kyc-typography--title-m {\n font-size: var(--adyen-internal-text-title-m-mobile-font-size, 18px);\n line-height: var(--adyen-internal-text-title-m-mobile-line-height, 28px);\n }\n}\n.adyen-kyc-typography--title-l {\n font-size: var(--adyen-internal-text-title-l-font-size, 24px);\n font-family: var(--adyen-internal-text-title-l-font-family);\n font-weight: var(--adyen-internal-text-title-l-font-weight, 600);\n line-height: var(--adyen-internal-text-title-l-line-height, 34px);\n letter-spacing: var(--adyen-internal-text-title-l-letter-spacing, 0);\n}\n@container main (max-width: 680px) {\n .adyen-kyc-typography--title-l {\n font-size: var(--adyen-internal-text-title-l-mobile-font-size, 20px);\n line-height: var(--adyen-internal-text-title-l-mobile-line-height, 30px);\n }\n}\n.adyen-kyc-typography--primary {\n color: var(--adyen-internal-color-label-primary, #001222);\n}\n.adyen-kyc-typography--secondary {\n color: var(--adyen-internal-color-label-secondary, #5c6874);\n}\n.adyen-kyc-typography--tertiary {\n color: var(--adyen-internal-color-label-tertiary, #8c959d);\n}\n.adyen-kyc-typography--disabled {\n color: var(--adyen-internal-color-label-disabled, #8c959d);\n}\n.adyen-kyc-typography--success {\n color: var(--adyen-internal-color-label-success, #008845);\n}\n.adyen-kyc-typography--warning {\n color: var(--adyen-internal-color-label-warning, #ab6600);\n}\n.adyen-kyc-typography--critical {\n color: var(--adyen-internal-color-label-critical, #dc3801);\n}\n.adyen-kyc-typography--highlight {\n color: var(--adyen-internal-color-label-highlight, #0f75dc);\n}\n.adyen-kyc-typography--inverse-primary {\n color: var(--adyen-internal-color-label-inverse-primary, #ffffff);\n}\n.adyen-kyc-typography--inverse-secondary {\n color: var(--adyen-internal-color-label-inverse-secondary, #9da5ac);\n}.adyen-kyc-loader-wrapper {\n align-items: center;\n display: flex;\n flex-direction: column;\n gap: var(--adyen-internal-spacer-040);\n height: 100%;\n justify-content: center;\n}\n\n.adyen-kyc-loader-text {\n opacity: 0;\n transform: translateY(-4px);\n transition:\n opacity 0.3s ease-in-out,\n transform 0.3s ease-in-out;\n}\n\n.adyen-kyc-loader-text-visible {\n opacity: 1;\n transform: translateY(0);\n}\n\n@keyframes adyen-kyc-fadeInText {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.adyen-kyc-loader {\n animation: adyen-kyc-rotateLoader 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;\n border-radius: 50%;\n border: var(--adyen-internal-border-default-l);\n border-top-color: var(--adyen-internal-color-outline-inverse-primary);\n height: 43px;\n width: 43px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.adyen-kyc-loader-large {\n height: 43px;\n width: 43px;\n max-width: 43px;\n}\n\n.adyen-kyc-loader-small {\n border-width: 2px;\n height: 16px;\n width: 16px;\n max-width: 16px;\n}\n\n.adyen-kyc-loader-medium {\n height: 28px;\n width: 28px;\n max-width: 28px;\n}\n\n.adyen-kyc-loader-xsmall {\n border-width: 2px;\n height: 12px;\n width: 12px;\n max-width: 12px;\n}\n\n@keyframes adyen-kyc-rotateLoader {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n.adyen-kyc-svg-icon {\n color: inherit;\n display: inline-flex;\n vertical-align: baseline;\n min-height: 16px;\n min-width: 16px;\n}\n\n.adyen-kyc-svg-icon svg {\n /* for safari */\n height: 100%;\n}\n\n.adyen-kyc-svg-icon svg path {\n fill: currentColor;\n}\n\n.adyen-kyc-svg-image {\n display: inline-block;\n}\n.adyen-kyc-button {\n border: 1px solid transparent;\n box-sizing: border-box;\n cursor: pointer;\n font-family: var(--adyen-internal-text-body-font-family);\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-weight: var(--adyen-internal-text-body-stronger-font-weight, 500);\n line-height: 1;\n min-height: var(--adyen-internal-tap-target);\n min-width: var(--adyen-internal-tap-target);\n outline-offset: var(--adyen-internal-focus-ring-spacer, 1px);\n outline: var(--adyen-internal-focus-ring-outline, 3px) solid transparent;\n overflow: hidden;\n padding: var(--adyen-internal-spacer-000, 0px);\n position: relative;\n transition: var(--adyen-internal-animation-duration-slow, 250ms);\n white-space: nowrap;\n}\n.adyen-kyc-button:active {\n transform: scale(0.95);\n}\n.adyen-kyc-button:focus-visible {\n outline-color: var(--adyen-internal-focus-ring-color, rgba(15, 117, 220, 0.8));\n}\n.adyen-kyc-button[disabled] {\n pointer-events: none;\n}\n\n.adyen-kyc-button-full-width {\n width: 100%;\n}\n\n.adyen-kyc-button-label {\n align-items: center;\n display: flex;\n gap: var(--adyen-internal-spacer-040, 8px);\n justify-content: center;\n}\n\n.adyen-kyc-button-label-padding {\n padding: var(--adyen-internal-spacer-040, 8px) var(--adyen-internal-spacer-070, 16px);\n}\n\n.adyen-kyc-button-shape-rectangle {\n border-radius: var(--adyen-internal-border-radius-m, 8px);\n}\n\n.adyen-kyc-button-shape-circle {\n border-radius: 50%;\n}\n\n.adyen-kyc-button-variant-primary {\n background-color: var(--adyen-internal-color-background-inverse-primary, #001222);\n color: var(--adyen-internal-color-label-inverse-primary, #ffffff);\n fill: var(--adyen-internal-color-label-inverse-primary, #ffffff);\n}\n@media (hover: hover) {\n .adyen-kyc-button-variant-primary:hover {\n background-color: var(--adyen-internal-color-background-inverse-primary-hover, #5c6874);\n color: var(--adyen-internal-color-label-inverse-primary-hover, #f4f5f6);\n fill: var(--adyen-internal-color-label-inverse-primary-hover, #f4f5f6);\n }\n}\n.adyen-kyc-button-variant-primary[disabled] {\n background-color: var(--adyen-internal-color-background-disabled, #ecedef);\n color: var(--adyen-internal-color-label-disabled, #8c959d);\n fill: var(--adyen-internal-color-label-disabled, #8c959d);\n}\n\n.adyen-kyc-button-variant-secondary {\n background-color: var(--adyen-internal-color-background-primary, #ffffff);\n color: var(--adyen-internal-color-label-primary, #001222);\n fill: var(--adyen-internal-color-label-primary, #001222);\n border: 1px solid var(--adyen-internal-color-outline-primary, #dadddf);\n}\n@media (hover: hover) {\n .adyen-kyc-button-variant-secondary:hover {\n background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);\n border-color: var(--adyen-internal-color-outline-primary-hover, #c8ccd0);\n color: var(--adyen-internal-color-label-primary-hover, #5c6874);\n fill: var(--adyen-internal-color-label-primary-hover, #5c6874);\n }\n}\n.adyen-kyc-button-variant-secondary[disabled] {\n color: var(--adyen-internal-color-label-disabled, #8c959d);\n fill: var(--adyen-internal-color-label-disabled, #8c959d);\n}\n\n.adyen-kyc-button-variant-tertiary {\n background-color: transparent;\n color: var(--adyen-internal-color-label-primary, #001222);\n fill: var(--adyen-internal-color-label-primary, #001222);\n}\n@media (hover: hover) {\n .adyen-kyc-button-variant-tertiary:hover {\n background-color: var(--adyen-internal-color-background-primary-hover, #f4f5f6);\n color: var(--adyen-internal-color-label-primary-hover, #5c6874);\n fill: var(--adyen-internal-color-label-primary-hover, #5c6874);\n }\n}\n.adyen-kyc-button-variant-tertiary[disabled] {\n background-color: var(--adyen-internal-color-background-disabled, #ecedef);\n color: var(--adyen-internal-color-label-disabled, #8c959d);\n fill: var(--adyen-internal-color-label-disabled, #8c959d);\n}\n\n.adyen-kyc-button-variant-critical {\n background-color: var(--adyen-internal-color-background-critical-strong, #dc3801);\n color: var(--adyen-internal-color-label-on-color, #ffffff);\n fill: var(--adyen-internal-color-label-on-color, #ffffff);\n}\n@media (hover: hover) {\n .adyen-kyc-button-variant-critical:hover {\n background-color: var(--adyen-internal-color-background-critical-strong-hover, #c13101);\n }\n}\n.adyen-kyc-button-variant-critical[disabled] {\n background-color: var(--adyen-internal-color-background-disabled, #ecedef);\n color: var(--adyen-internal-color-label-disabled, #8c959d);\n fill: var(--adyen-internal-color-label-disabled, #8c959d);\n}\n\n.adyen-kyc-button-variant-link {\n background-color: transparent;\n color: var(--adyen-internal-color-label-primary, #001222);\n fill: var(--adyen-internal-color-label-primary, #001222);\n padding: var(--adyen-internal-spacer-000, 0px);\n text-decoration: underline;\n}\n@media (hover: hover) {\n .adyen-kyc-button-variant-link:hover {\n color: var(--adyen-internal-color-label-primary-hover, #5c6874);\n fill: var(--adyen-internal-color-label-primary-hover, #5c6874);\n text-decoration: none;\n }\n}\n\n.adyen-kyc-button-variant-surface {\n background-color: var(--adyen-internal-color-background-secondary);\n color: var(--adyen-internal-color-label-primary, #001222);\n fill: var(--adyen-internal-color-label-primary, #001222);\n}\n@supports (backdrop-filter: blur(10px)) {\n .adyen-kyc-button-variant-surface {\n backdrop-filter: blur(10px);\n background-color: rgb(from var(--adyen-internal-color-background-secondary) r g b/0.7);\n }\n}\n@media (hover: hover) {\n .adyen-kyc-button-variant-surface:hover {\n background-color: var(--adyen-internal-color-background-secondary-hover);\n color: var(--adyen-internal-color-label-primary-hover, #5c6874);\n fill: var(--adyen-internal-color-label-primary-hover, #5c6874);\n }\n @supports (backdrop-filter: blur(10px)) {\n .adyen-kyc-button-variant-surface:hover {\n background-color: rgb(from var(--adyen-internal-color-background-secondary-hover) r g b/0.7);\n }\n }\n}\n.adyen-kyc-button-variant-surface[disabled] {\n background-color: var(--adyen-internal-color-background-secondary);\n color: var(--adyen-internal-color-label-disabled, #8c959d);\n fill: var(--adyen-internal-color-label-disabled, #8c959d);\n}\n\n.adyen-kyc-button-spinner {\n animation: adyen-kyc-present-spinner 400ms var(--adyen-internal-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));\n background-color: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n@keyframes adyen-kyc-present-spinner {\n 0% {\n opacity: 0;\n transform: scale(0);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}.adyen-kyc-toast {\n align-items: center;\n animation: adyen-kyc-present-toast 400ms var(--adyen-internal-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));\n background-color: var(--adyen-internal-color-background-inverse-primary, #001222);\n border-radius: var(--adyen-internal-border-radius-l, 12px);\n border-top: 1px solid var(--adyen-internal-color-outline-inverse-primary, #2f3e4d);\n bottom: var(--adyen-internal-spacer-070, 16px);\n box-shadow: var(--adyen-internal-shadow-high, 0px 18px 36px rgba(0, 18, 34, 0.12), 0px 4px 8px rgba(0, 18, 34, 0.06));\n display: flex;\n fill: var(--adyen-internal-color-label-inverse-secondary, #9da5ac);\n gap: var(--adyen-internal-spacer-040, 8px);\n justify-content: flex-start;\n left: 50%;\n max-width: 420px;\n padding: var(--adyen-internal-spacer-040, 8px);\n position: fixed;\n transform: translateX(-50%);\n width: 90vw;\n z-index: 1000;\n}\n\n.adyen-kyc-toast-image {\n align-items: center;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n max-height: 32px;\n max-width: 32px;\n padding: var(--adyen-internal-spacer-040, 8px);\n}\n\n.adyen-kyc-toast-image-success {\n color: var(--adyen-internal-color-decorative-green, #00d16a);\n fill: var(--adyen-internal-color-decorative-green, #00d16a);\n}\n\n.adyen-kyc-toast-image-error {\n color: var(--adyen-internal-color-label-critical, #dc3801);\n fill: var(--adyen-internal-color-label-critical, #dc3801);\n}\n\n.adyen-kyc-toast-label {\n align-items: center;\n color: var(--adyen-internal-color-label-inverse-primary, #ffffff);\n display: flex;\n flex-grow: 1;\n font-family: var(--adyen-internal-text-body-font-family);\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-weight: var(--adyen-internal-text-body-font-weight, 400);\n gap: var(--adyen-internal-spacer-040, 8px);\n line-height: var(--adyen-internal-text-body-line-height, 20px);\n padding: var(--adyen-internal-spacer-040, 8px);\n}\n\n.adyen-kyc-toast-actions {\n display: flex;\n gap: var(--adyen-internal-spacer-040, 8px);\n}\n.adyen-kyc-toast-actions button:focus-visible {\n outline-color: var(--adyen-internal-color-outline-inverse-primary-active, #9da5ac);\n}\n\n.adyen-kyc-toast-action-close {\n border-left: 1px solid var(--adyen-internal-color-outline-inverse-primary, #2f3e4d);\n padding-left: var(--adyen-internal-spacer-040, 8px);\n}\n\n@keyframes adyen-kyc-present-toast {\n 0% {\n opacity: 0;\n transform: translate(-50%, 32px);\n }\n 100% {\n opacity: 1;\n transform: translate(-50%, 0);\n }\n}.adyen-kyc-skeleton {\n width: 100%;\n height: 100%;\n background-color: var(--adyen-internal-color-outline-secondary);\n border-radius: var(--adyen-internal-border-radius-m);\n /* hidden for by 0.4 seconds to prevent quick flash of skeleton (to content) */\n opacity: 0;\n animation: 2s ease-in-out 0.4s infinite normal none running adyen-kyc-skeleton;\n}\n\n.adyen-kyc-skeleton-circle {\n border-radius: 50%;\n}\n.adyen-kyc-skeleton-text {\n height: 1em !important;\n margin: 0.2em 0 !important;\n}\n\n@keyframes adyen-kyc-skeleton {\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n 100% {\n opacity: 1;\n }\n}\n.adyen-kyc-accordion,\n.adyen-kyc-accordion-summary {\n color: var(--adyen-internal-color-label-primary);\n font-size: var(--adyen-internal-text-body-font-size);\n font-family: var(--adyen-internal-text-body-font-family);\n line-height: var(--adyen-internal-text-body-line-height);\n cursor: pointer;\n}\n\n.adyen-kyc-accordion {\n background: none;\n border-radius: var(--adyen-internal-border-radius-l);\n margin-bottom: var(--adyen-internal-spacer-050);\n}\n\n.adyen-kyc-accordion-basic {\n background-color: var(--adyen-internal-color-background-secondary);\n}\n.adyen-kyc-accordion-info {\n background-color: var(--adyen-internal-color-background-highlight-weak);\n}\n.adyen-kyc-accordion-error {\n background-color: var(--adyen-internal-color-background-critical-weak);\n}\n.adyen-kyc-accordion-warning {\n background-color: var(--adyen-internal-color-background-warning-weak);\n}\n.adyen-kyc-accordion-success {\n background-color: var(--adyen-internal-color-background-success-weak);\n}\n.adyen-kyc-accordion-narrow .adyen-kyc-accordion-summary {\n padding: var(--adyen-internal-spacer-060) var(--adyen-internal-spacer-070);\n}\n.adyen-kyc-accordion-narrow .adyen-kyc-accordion-content {\n padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-070)\n var(--adyen-internal-spacer-060);\n}\n.adyen-kyc-accordion-with-icon .adyen-kyc-accordion-content {\n margin-left: var(--adyen-internal-spacer-080);\n}\n\n.adyen-kyc-accordion-summary {\n display: flex;\n align-items: center;\n gap: var(--adyen-internal-spacer-050);\n padding: var(--adyen-internal-spacer-080);\n font-weight: var(--adyen-internal-text-title-font-weight);\n transition: margin 150ms ease-out;\n margin-bottom: var(--adyen-internal-spacer-000);\n border-radius: var(--adyen-internal-border-radius-l);\n}\n\n.adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow {\n cursor: pointer;\n user-select: none;\n height: 1em;\n}\n\n.adyen-kyc-accordion-summary > .adyen-kyc-accordion-arrow-right {\n margin-left: auto;\n margin-right: var(--adyen-internal-spacer-050);\n}\n\n.adyen-kyc-accordion[open] .adyen-kyc-accordion-arrow {\n transform: rotate(-180deg);\n}\n.adyen-kyc-accordion summary::-webkit-details-marker {\n display: none;\n}\n\n.adyen-kyc-accordion-content {\n cursor: auto;\n padding: var(--adyen-internal-spacer-000) var(--adyen-internal-spacer-080)\n var(--adyen-internal-spacer-080);\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: var(--adyen-internal-spacer-040);\n}\n\n.adyen-kyc-accordion[open] summary {\n margin-bottom: var(--adyen-internal-spacer-020);\n user-select: auto;\n}\n.adyen-kyc-alert {\n border-radius: var(--adyen-internal-border-radius-m);\n padding: var(--adyen-internal-spacer-070);\n word-break: break-word;\n display: flex;\n flex-direction: column;\n gap: var(--adyen-internal-spacer-040);\n text-align: left;\n}\n.adyen-kyc-alert-without-icon .adyen-kyc-alert-explanation,\n.adyen-kyc-alert-without-icon .adyen-kyc-alert-actions {\n margin: 0 var(--adyen-internal-spacer-070);\n}\n\n.adyen-kyc-alert-basic {\n background-color: var(--adyen-internal-color-background-secondary);\n}\n\n.adyen-kyc-alert-info {\n background-color: var(--adyen-internal-color-background-highlight-weak);\n}\n\n.adyen-kyc-alert-error {\n background-color: var(--adyen-internal-color-background-critical-weak);\n}\n\n.adyen-kyc-alert-warning {\n background-color: var(--adyen-internal-color-background-warning-weak);\n}\n\n.adyen-kyc-alert-success {\n background-color: var(--adyen-internal-color-background-success-weak);\n}\n\n.adyen-kyc-alert-header {\n align-items: flex-start;\n display: flex;\n}\n\n.adyen-kyc-alert-header-without-children {\n align-items: center;\n}\n\n.adyen-kyc-alert-icon {\n line-height: var(--adyen-internal-text-body-line-height);\n margin-top: var(--adyen-internal-spacer-010);\n}\n.adyen-kyc-alert-icon-info {\n color: var(--adyen-internal-color-background-highlight-strong);\n}\n\n.adyen-kyc-alert-icon-error {\n color: var(--adyen-internal-color-background-critical-strong);\n}\n\n.adyen-kyc-alert-icon-warning {\n color: var(--adyen-internal-color-background-warning-strong);\n}\n\n.adyen-kyc-alert-icon-success {\n color: var(--adyen-internal-color-background-success-strong);\n}\n\n.adyen-kyc-alert-title {\n flex-grow: 1;\n margin-left: var(--adyen-internal-spacer-070);\n}\n\n.adyen-kyc-alert-explanation {\n color: var(--adyen-internal-color-label-primary);\n font-size: var(--adyen-internal-text-body-font-size);\n margin: 0 var(--adyen-internal-spacer-100);\n}\n\n.adyen-kyc-alert-actions {\n display: flex;\n gap: var(--adyen-internal-spacer-070);\n text-align: left;\n}\n/* for container queries */\n.adyen-kyc-stack-layout {\n display: flex;\n flex-direction: column;\n}\n\n.adyen-kyc-stack-layout-gap-xs {\n gap: var(--adyen-internal-spacer-020);\n}\n\n.adyen-kyc-stack-layout-gap-s {\n gap: var(--adyen-internal-spacer-040);\n}\n\n.adyen-kyc-stack-layout-gap-m {\n gap: var(--adyen-internal-spacer-070);\n}\n\n.adyen-kyc-stack-layout-gap-l {\n gap: var(--adyen-internal-spacer-100);\n}\n\n.adyen-kyc-stack-layout-gap-xl {\n gap: var(--adyen-internal-spacer-140);\n}\n\n.adyen-kyc-stack-layout-left {\n align-items: flex-start;\n}\n\n.adyen-kyc-stack-layout-center {\n align-items: center;\n}\n\n.adyen-kyc-stack-layout-right {\n align-items: flex-end;\n}\n\n.adyen-kyc-stack-layout-item {\n flex-grow: 1;\n width: 100%;\n}\n\n@container main (min-width: 480px) {\n .adyen-kyc-stack-layout-horizontal {\n align-items: flex-start;\n flex-direction: row;\n }\n .adyen-kyc-stack-layout-left-horizontal {\n justify-content: flex-start;\n }\n .adyen-kyc-stack-layout-center-horizontal {\n justify-content: center;\n }\n .adyen-kyc-stack-layout-right-horizontal {\n justify-content: flex-end;\n }\n}/* for container queries */\n.adyen-kyc-status {\n align-items: center;\n border-radius: var(--adyen-internal-border-radius-xl);\n display: inline-flex;\n padding: var(--adyen-internal-spacer-020);\n}\n\n.adyen-kyc-status-icon {\n height: 18px;\n width: 18px;\n padding: 1px;\n}\n\n.adyen-kyc-status-icon svg {\n height: 16px;\n width: 16px;\n}\n\n.adyen-kyc-status-text {\n font-size: var(--adyen-internal-text-caption-font-size);\n font-weight: var(--adyen-internal-text-caption-stronger-font-weight);\n line-height: var(--adyen-internal-text-caption-line-height);\n padding-left: var(--adyen-internal-spacer-020);\n padding-right: var(--adyen-internal-spacer-020);\n}\n\n@container main (max-width: 480px) {\n .adyen-kyc-status-text-responsive {\n display: none;\n }\n}\n\n.adyen-kyc-status-neutral {\n background-color: var(--adyen-internal-color-background-secondary);\n color: var(--adyen-internal-color-label-disabled);\n fill: var(--adyen-internal-color-label-disabled);\n}\n\n.adyen-kyc-status-neutral .adyen-kyc-status-text {\n color: var(--adyen-internal-color-label-secondary);\n}\n\n.adyen-kyc-status-error {\n background-color: var(--adyen-internal-color-background-secondary);\n color: var(--adyen-internal-color-label-critical);\n fill: var(--adyen-internal-color-label-critical);\n}\n\n.adyen-kyc-status-warning {\n background-color: var(--adyen-internal-color-background-warning-weak);\n color: var(--adyen-internal-color-label-warning);\n fill: var(--adyen-internal-color-label-warning);\n}\n\n.adyen-kyc-status-success {\n background-color: var(--adyen-internal-color-background-success-weak);\n}\n\n.adyen-kyc-status-success .adyen-kyc-status-text {\n color: var(--adyen-internal-color-label-primary);\n}\n\n.adyen-kyc-status-success .adyen-kyc-status-icon {\n color: var(--adyen-internal-color-label-success);\n fill: var(--adyen-internal-color-label-success);\n}.adyen-kyc-header {\n display: flex;\n flex-direction: column;\n gap: var(--adyen-internal-spacer-070);\n}\n\n.adyen-kyc-header-margin {\n margin-bottom: var(--adyen-internal-spacer-140);\n}\n\n.adyen-kyc-header-margin-secondary {\n margin-bottom: var(--adyen-internal-spacer-100);\n}\n\n.adyen-kyc-header-left {\n align-items: flex-start;\n text-align: left;\n}\n\n.adyen-kyc-header-center {\n align-items: center;\n text-align: center;\n}\n\n.adyen-kyc-header-right {\n align-items: flex-end;\n text-align: right;\n}\n\n.adyen-kyc-header-content {\n display: flex;\n flex-direction: column;\n gap: var(--adyen-internal-spacer-040);\n}\n\n.adyen-kyc-header-actions {\n max-width: 300px;\n}\n\n.adyen-kyc-header-title {\n color: var(--adyen-internal-color-label-primary);\n margin: 0;\n}\n\n.adyen-kyc-header-title-primary {\n font-size: var(--adyen-internal-text-title-l-font-size);\n font-family: var(--adyen-internal-text-title-l-font-family);\n font-weight: var(--adyen-internal-text-title-l-font-weight);\n line-height: var(--adyen-internal-text-title-l-line-height);\n}\n\n.adyen-kyc-header-title-secondary {\n font-size: var(--adyen-internal-text-title-font-size);\n font-family: var(--adyen-internal-text-title-font-family);\n font-weight: var(--adyen-internal-text-title-font-weight);\n}\n\n.adyen-kyc-header-description {\n font-size: var(--adyen-internal-text-body-font-size);\n font-family: var(--adyen-internal-text-body-font-family);\n font-weight: var(--adyen-internal-text-body-font-weight);\n line-height: var(--adyen-internal-text-body-line-height);\n}\n\n.adyen-kyc-header-description-primary {\n color: var(--adyen-internal-color-label-primary);\n}\n\n.adyen-kyc-header-description-secondary {\n color: var(--adyen-internal-color-label-secondary);\n}\n.adyen-kyc-u-display-flex {\n display: flex !important;\n}\n\n.adyen-kyc-u-display-inline-flex {\n display: inline-flex !important;\n}\n\n.adyen-kyc-u-flex-direction-row {\n flex-direction: row !important;\n}\n\n.adyen-kyc-u-flex-direction-row-reverse {\n flex-direction: row-reverse !important;\n}\n\n.adyen-kyc-u-flex-direction-column {\n flex-direction: column !important;\n}\n\n.adyen-kyc-u-flex-direction-column-reverse {\n flex-direction: column-reverse !important;\n}\n\n.adyen-kyc-u-flex-wrap-wrap {\n flex-wrap: wrap !important;\n}\n\n.adyen-kyc-u-flex-wrap-nowrap {\n flex-wrap: nowrap !important;\n}\n\n.adyen-kyc-u-align-items-start {\n align-items: start !important;\n}\n\n.adyen-kyc-u-align-items-flex-start {\n align-items: flex-start !important;\n}\n\n.adyen-kyc-u-align-items-flex-end {\n align-items: flex-end !important;\n}\n\n.adyen-kyc-u-align-items-center {\n align-items: center !important;\n}\n\n.adyen-kyc-u-align-items-stretch {\n align-items: stretch !important;\n}\n\n.adyen-kyc-u-align-items-baseline {\n align-items: baseline !important;\n}\n\n.adyen-kyc-u-align-items-end {\n align-items: end !important;\n}\n\n.adyen-kyc-u-justify-content-center {\n justify-content: center !important;\n}\n\n.adyen-kyc-u-justify-content-flex-start {\n justify-content: flex-start !important;\n}\n\n.adyen-kyc-u-justify-content-flex-end {\n justify-content: flex-end !important;\n}\n\n.adyen-kyc-u-justify-content-start {\n justify-content: start !important;\n}\n\n.adyen-kyc-u-justify-content-end {\n justify-content: end !important;\n}\n\n.adyen-kyc-u-justify-content-left {\n justify-content: left !important;\n}\n\n.adyen-kyc-u-justify-content-right {\n justify-content: right !important;\n}\n\n.adyen-kyc-u-justify-content-space-between {\n justify-content: space-between !important;\n}\n\n.adyen-kyc-u-justify-content-space-around {\n justify-content: space-around !important;\n}\n\n.adyen-kyc-u-justify-content-space-evenly {\n justify-content: space-evenly !important;\n}\n\n.adyen-kyc-u-justify-content-stretch {\n justify-content: stretch !important;\n}\n\n.adyen-kyc-u-flex-1 {\n flex: 1 !important;\n}\n\n.adyen-kyc-u-flex-2 {\n flex: 2 !important;\n}\n\n.adyen-kyc-u-flex-3 {\n flex: 3 !important;\n}\n\n.adyen-kyc-u-flex-4 {\n flex: 4 !important;\n}\n\n.adyen-kyc-u-margin-auto {\n margin: auto !important;\n}\n\n.adyen-kyc-u-margin-bottom-auto {\n margin-bottom: auto !important;\n}\n\n.adyen-kyc-u-margin-left-auto {\n margin-left: auto !important;\n}\n\n.adyen-kyc-u-margin-right-auto {\n margin-right: auto !important;\n}\n\n.adyen-kyc-u-margin-top-auto {\n margin-top: auto !important;\n}\n\n.adyen-kyc-u-margin-x-auto {\n margin-left: auto !important;\n margin-right: auto !important;\n}\n\n.adyen-kyc-u-margin-y-auto {\n margin-bottom: auto !important;\n margin-top: auto !important;\n}\n\n.adyen-kyc-u-margin-0 {\n margin: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-0 {\n margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-left-0 {\n margin-left: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-right-0 {\n margin-right: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-top-0 {\n margin-top: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-x-0 {\n margin-left: var(--adyen-internal-spacer-000, 0px) !important;\n margin-right: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-y-0 {\n margin-bottom: var(--adyen-internal-spacer-000, 0px) !important;\n margin-top: var(--adyen-internal-spacer-000, 0px) !important;\n}\n\n.adyen-kyc-u-margin-2 {\n margin: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-2 {\n margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-left-2 {\n margin-left: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-right-2 {\n margin-right: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-top-2 {\n margin-top: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-x-2 {\n margin-left: var(--adyen-internal-spacer-010, 2px) !important;\n margin-right: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-y-2 {\n margin-bottom: var(--adyen-internal-spacer-010, 2px) !important;\n margin-top: var(--adyen-internal-spacer-010, 2px) !important;\n}\n\n.adyen-kyc-u-margin-4 {\n margin: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-4 {\n margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-left-4 {\n margin-left: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-right-4 {\n margin-right: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-top-4 {\n margin-top: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-x-4 {\n margin-left: var(--adyen-internal-spacer-020, 4px) !important;\n margin-right: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-y-4 {\n margin-bottom: var(--adyen-internal-spacer-020, 4px) !important;\n margin-top: var(--adyen-internal-spacer-020, 4px) !important;\n}\n\n.adyen-kyc-u-margin-6 {\n margin: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-6 {\n margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-left-6 {\n margin-left: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-right-6 {\n margin-right: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-top-6 {\n margin-top: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-x-6 {\n margin-left: var(--adyen-internal-spacer-030, 6px) !important;\n margin-right: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-y-6 {\n margin-bottom: var(--adyen-internal-spacer-030, 6px) !important;\n margin-top: var(--adyen-internal-spacer-030, 6px) !important;\n}\n\n.adyen-kyc-u-margin-8 {\n margin: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-8 {\n margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-left-8 {\n margin-left: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-right-8 {\n margin-right: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-top-8 {\n margin-top: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-x-8 {\n margin-left: var(--adyen-internal-spacer-040, 8px) !important;\n margin-right: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-y-8 {\n margin-bottom: var(--adyen-internal-spacer-040, 8px) !important;\n margin-top: var(--adyen-internal-spacer-040, 8px) !important;\n}\n\n.adyen-kyc-u-margin-10 {\n margin: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-10 {\n margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-left-10 {\n margin-left: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-right-10 {\n margin-right: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-top-10 {\n margin-top: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-x-10 {\n margin-left: var(--adyen-internal-spacer-050, 10px) !important;\n margin-right: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-y-10 {\n margin-bottom: var(--adyen-internal-spacer-050, 10px) !important;\n margin-top: var(--adyen-internal-spacer-050, 10px) !important;\n}\n\n.adyen-kyc-u-margin-12 {\n margin: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-12 {\n margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-left-12 {\n margin-left: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-right-12 {\n margin-right: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-top-12 {\n margin-top: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-x-12 {\n margin-left: var(--adyen-internal-spacer-060, 12px) !important;\n margin-right: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-y-12 {\n margin-bottom: var(--adyen-internal-spacer-060, 12px) !important;\n margin-top: var(--adyen-internal-spacer-060, 12px) !important;\n}\n\n.adyen-kyc-u-margin-16 {\n margin: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-16 {\n margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-left-16 {\n margin-left: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-right-16 {\n margin-right: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-top-16 {\n margin-top: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-x-16 {\n margin-left: var(--adyen-internal-spacer-070, 16px) !important;\n margin-right: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-y-16 {\n margin-bottom: var(--adyen-internal-spacer-070, 16px) !important;\n margin-top: var(--adyen-internal-spacer-070, 16px) !important;\n}\n\n.adyen-kyc-u-margin-20 {\n margin: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-20 {\n margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-left-20 {\n margin-left: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-right-20 {\n margin-right: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-top-20 {\n margin-top: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-x-20 {\n margin-left: var(--adyen-internal-spacer-080, 20px) !important;\n margin-right: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-y-20 {\n margin-bottom: var(--adyen-internal-spacer-080, 20px) !important;\n margin-top: var(--adyen-internal-spacer-080, 20px) !important;\n}\n\n.adyen-kyc-u-margin-24 {\n margin: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-24 {\n margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-left-24 {\n margin-left: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-right-24 {\n margin-right: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-top-24 {\n margin-top: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-x-24 {\n margin-left: var(--adyen-internal-spacer-090, 24px) !important;\n margin-right: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-y-24 {\n margin-bottom: var(--adyen-internal-spacer-090, 24px) !important;\n margin-top: var(--adyen-internal-spacer-090, 24px) !important;\n}\n\n.adyen-kyc-u-margin-32 {\n margin: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-32 {\n margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-left-32 {\n margin-left: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-right-32 {\n margin-right: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-top-32 {\n margin-top: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-x-32 {\n margin-left: var(--adyen-internal-spacer-100, 32px) !important;\n margin-right: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-y-32 {\n margin-bottom: var(--adyen-internal-spacer-100, 32px) !important;\n margin-top: var(--adyen-internal-spacer-100, 32px) !important;\n}\n\n.adyen-kyc-u-margin-40 {\n margin: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-40 {\n margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-left-40 {\n margin-left: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-right-40 {\n margin-right: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-top-40 {\n margin-top: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-x-40 {\n margin-left: var(--adyen-internal-spacer-110, 40px) !important;\n margin-right: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-y-40 {\n margin-bottom: var(--adyen-internal-spacer-110, 40px) !important;\n margin-top: var(--adyen-internal-spacer-110, 40px) !important;\n}\n\n.adyen-kyc-u-margin-48 {\n margin: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n.adyen-kyc-u-margin-bottom-48 {\n margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n.adyen-kyc-u-margin-left-48 {\n margin-left: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n.adyen-kyc-u-margin-right-48 {\n margin-right: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n.adyen-kyc-u-margin-top-48 {\n margin-top: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n.adyen-kyc-u-margin-x-48 {\n margin-left: var(--adyen-internal-spacer-120, 48px) !important;\n margin-right: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n.adyen-kyc-u-margin-y-48 {\n margin-bottom: var(--adyen-internal-spacer-120, 48px) !important;\n margin-top: var(--adyen-internal-spacer-120, 48px) !important;\n}\n\n/* for container queries */\n.adyen-kyc-u-width-full {\n width: 100% !important;\n}\n\n.adyen-kyc-u-width-half {\n width: 50% !important;\n}\n\n/* Topmost/root container class */\n.adyen-kyc-ui-element-container-wrapper {\n width: 100%;\n overflow: auto;\n /**\n * main container query, used similarly to a @media query\n * considering our Component can be embedded in a container of arbitrary size\n * that does not necessarily match the whole window/screen size.\n * Uses s and l breakpoints defined in variables.\n */\n container-type: inline-size;\n container-name: main;\n}\n\n.adyen-kyc-ui-element-container-wrapper *,\n.adyen-kyc-ui-element-container-wrapper *::after,\n.adyen-kyc-ui-element-container-wrapper *::before {\n box-sizing: border-box;\n}\n\n.adyen-kyc-ui-element-container {\n background-color: var(--adyen-internal-color-background-primary, #ffffff);\n position: relative;\n padding: var(--adyen-internal-spacer-100, 32px);\n border-radius: var(--adyen-internal-border-radius-m, 8px);\n font-family: var(--adyen-internal-text-body-font-family);\n font-size: var(--adyen-internal-text-body-font-size, 14px);\n font-weight: var(--adyen-internal-text-body-font-weight, 400);\n line-height: var(--adyen-internal-text-body-line-height, 20px);\n color: var(--adyen-internal-color-label-primary, #001222);\n}\n.adyen-kyc-ui-element-container p,\n.adyen-kyc-ui-element-container ol,\n.adyen-kyc-ui-element-container ul {\n margin-bottom: 0;\n margin-top: 0;\n}\n.adyen-kyc-ui-element-container ul,\n.adyen-kyc-ui-element-container ol {\n padding-left: 1.5em;\n}\n@container main (max-width: 680px) {\n .adyen-kyc-ui-element-container {\n padding: var(--adyen-internal-spacer-070, 16px);\n }\n}\n\n/*\n* Compatibility later to ensure components do NOT receive extra padding\n* as is the case with dropins, without breaking dropins.\n* Once the Component Layout has been done \\`.adyen-kyc-externalComponent\\`\n* can be safely removed everywere.\n*/\n.adyen-kyc-ui-element-container:has(.adyen-kyc-externalComponent) {\n padding: 0;\n}\n\n/**\n * :root is needed for non-web components, while :host for web components (TODO: change on v4)\n * \n * This produces css like:\n * --adyen-internal-text-color: var(--adyen-sdk-text-color, #000);\n *\n * The \\`internal\\` part matches how we use css variables in the code\n * The \\`sdk\\` part is how consumers customize it from outside our code\n * The $value is the fallback bare value, used when the variable was not customized\n *\n * The reason we have \\`internal\\` and \\`sdk\\` is because doing something like:\n * --color: var(--color, #0f0) would create a loop, and the browser ignores it.\n *\n */\n:root,\n:host {\n --adyen-internal-animation-easing-standard: var(--adyen-sdk-animation-easing-standard, cubic-bezier(0.2, 0, 0.4, 0.9));\n --adyen-internal-animation-easing-enter: var(--adyen-sdk-animation-easing-enter, cubic-bezier(0.12, 0.6, 0.4, 0.95));\n --adyen-internal-animation-easing-exit: var(--adyen-sdk-animation-easing-exit, cubic-bezier(0.4, 0, 1, 1));\n --adyen-internal-animation-easing-linear: var(--adyen-sdk-animation-easing-linear, linear);\n --adyen-internal-animation-duration-fast: var(--adyen-sdk-animation-duration-fast, 100ms);\n --adyen-internal-animation-duration-moderate: var(--adyen-sdk-animation-duration-moderate, 150ms);\n --adyen-internal-animation-duration-slow: var(--adyen-sdk-animation-duration-slow, 250ms);\n --adyen-internal-color-background-primary: var(--adyen-sdk-color-background-primary, #ffffff);\n --adyen-internal-color-background-primary-hover: var(--adyen-sdk-color-background-primary-hover, #f4f5f6);\n --adyen-internal-color-background-primary-active: var(--adyen-sdk-color-background-primary-active, #ecedef);\n --adyen-internal-color-background-secondary: var(--adyen-sdk-color-background-secondary, #f4f5f6);\n --adyen-internal-color-background-secondary-hover: var(--adyen-sdk-color-background-secondary-hover, #ecedef);\n --adyen-internal-color-background-secondary-active: var(--adyen-sdk-color-background-secondary-active, #e2e5e7);\n --adyen-internal-color-background-tertiary: var(--adyen-sdk-color-background-tertiary, #ecedef);\n --adyen-internal-color-background-tertiary-hover: var(--adyen-sdk-color-background-tertiary-hover, #e2e5e7);\n --adyen-internal-color-background-tertiary-active: var(--adyen-sdk-color-background-tertiary-active, #dadddf);\n --adyen-internal-color-background-quaternary: var(--adyen-sdk-color-background-quaternary, #c0c5ca);\n --adyen-internal-color-background-quaternary-hover: var(--adyen-sdk-color-background-quaternary-hover, #b7bdc2);\n --adyen-internal-color-background-quaternary-active: var(--adyen-sdk-color-background-quaternary-active, #aeb5ba);\n --adyen-internal-color-background-modal: var(--adyen-sdk-color-background-modal, #ffffff);\n --adyen-internal-color-background-modal-hover: var(--adyen-sdk-color-background-modal-hover, #f4f5f6);\n --adyen-internal-color-background-modal-active: var(--adyen-sdk-color-background-modal-active, #ecedef);\n --adyen-internal-color-background-disabled: var(--adyen-sdk-color-background-disabled, #ecedef);\n --adyen-internal-color-background-selected: var(--adyen-sdk-color-background-selected, #e3effb);\n --adyen-internal-color-background-selected-hover: var(--adyen-sdk-color-background-selected-hover, #d4e6f9);\n --adyen-internal-color-background-selected-active: var(--adyen-sdk-color-background-selected-active, #c8dff7);\n --adyen-internal-color-background-spotlight: var(--adyen-sdk-color-background-spotlight, #ffe379);\n --adyen-internal-color-background-critical-weak: var(--adyen-sdk-color-background-critical-weak, #fff3ef);\n --adyen-internal-color-background-critical-strong: var(--adyen-sdk-color-background-critical-strong, #dc3801);\n --adyen-internal-color-background-critical-strong-hover: var(--adyen-sdk-color-background-critical-strong-hover, #c13101);\n --adyen-internal-color-background-critical-strong-active: var(--adyen-sdk-color-background-critical-strong-active, #751e00);\n --adyen-internal-color-background-warning-weak: var(--adyen-sdk-color-background-warning-weak, #fff4e5);\n --adyen-internal-color-background-warning-weak-hover: var(--adyen-sdk-color-background-warning-weak-hover, #ffecd0);\n --adyen-internal-color-background-warning-weak-active: var(--adyen-sdk-color-background-warning-weak-active, #ffe0b3);\n --adyen-internal-color-background-warning-strong: var(--adyen-sdk-color-background-warning-strong, #d77f00);\n --adyen-internal-color-background-success-weak: var(--adyen-sdk-color-background-success-weak, #e4faef);\n --adyen-internal-color-background-success-strong: var(--adyen-sdk-color-background-success-strong, #008845);\n --adyen-internal-color-background-highlight-weak: var(--adyen-sdk-color-background-highlight-weak, #f0f6fd);\n --adyen-internal-color-background-highlight-strong: var(--adyen-sdk-color-background-highlight-strong, #0f75dc);\n --adyen-internal-color-background-inverse-primary: var(--adyen-sdk-color-background-inverse-primary, #001222);\n --adyen-internal-color-background-inverse-primary-hover: var(--adyen-sdk-color-background-inverse-primary-hover, #5c6874);\n --adyen-internal-color-background-inverse-primary-active: var(--adyen-sdk-color-background-inverse-primary-active, #6c7782);\n --adyen-internal-color-background-inverse-secondary: var(--adyen-sdk-color-background-inverse-secondary, #1a2b3b);\n --adyen-internal-color-background-inverse-secondary-hover: var(--adyen-sdk-color-background-inverse-secondary-hover, #273746);\n --adyen-internal-color-background-inverse-secondary-active: var(--adyen-sdk-color-background-inverse-secondary-active, #364553);\n --adyen-internal-color-background-inverse-disabled: var(--adyen-sdk-color-background-inverse-disabled, #273746);\n --adyen-internal-color-background-inverse-critical-weak: var(--adyen-sdk-color-background-inverse-critical-weak, #5c1800);\n --adyen-internal-color-background-inverse-critical-strong: var(--adyen-sdk-color-background-inverse-critical-strong, #ff9a78);\n --adyen-internal-color-background-inverse-critical-strong-hover: var(--adyen-sdk-color-background-inverse-critical-strong-hover, #ffbda6);\n --adyen-internal-color-background-inverse-critical-strong-active: var(--adyen-sdk-color-background-inverse-critical-strong-active, #ffded3);\n --adyen-internal-color-background-always-light: var(--adyen-sdk-color-background-always-light, #ffffff);\n --adyen-internal-color-background-always-light-hover: var(--adyen-sdk-color-background-always-light-hover, #f4f5f6);\n --adyen-internal-color-background-always-light-active: var(--adyen-sdk-color-background-always-light-active, #ecedef);\n --adyen-in