@adyen/kyc-components 2.47.2 → 2.48.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/es/adyen-kyc-components.es.js +1730 -931
  2. package/dist/es/{arrow-right-DF4Qe-8E.js → arrow-right-C4o8oS1C.js} +1 -1
  3. package/dist/es/{chevron-down-BzENwYSf.js → chevron-down-C8-1xmDI.js} +1 -1
  4. package/dist/es/chevron-left-DSyI3arz.js +11 -0
  5. package/dist/es/{chevron-right-DczMHcvL.js → chevron-right-BDZzxAre.js} +1 -1
  6. package/dist/es/{cross-BadGfrgB.js → cross-D-SQig6J.js} +1 -1
  7. package/dist/es/{download-DGC5_Bxe.js → download-COfxdarq.js} +1 -1
  8. package/dist/style.css +382 -2127
  9. package/dist/types/components/AdditionalInformation/VerifiedBusinessCard.d.ts +7 -0
  10. package/dist/types/components/AdditionalInformation/component/AdditionalInformationComponent.d.ts +1 -1
  11. package/dist/types/components/AdditionalInformation/types.d.ts +4 -0
  12. package/dist/types/components/BasicInformation/component/BasicInformationComponent.d.ts +1 -1
  13. package/dist/types/components/BasicInformation/types.d.ts +2 -8
  14. package/dist/types/components/BusinessDetails/component/BusinessDetailsComponent.d.ts +1 -0
  15. package/dist/types/components/BusinessDetails/forms.d.ts +1 -2
  16. package/dist/types/components/BusinessDetails/types.d.ts +15 -0
  17. package/dist/types/components/BusinessSelection/BusinessInformationCard.d.ts +16 -0
  18. package/dist/types/components/BusinessSelection/component/BusinessSelectionComponent.d.ts +3 -0
  19. package/dist/types/components/BusinessSelection/index.d.ts +1 -0
  20. package/dist/types/components/BusinessSelection/types.d.ts +25 -0
  21. package/dist/types/components/CompanyStructure/component/CompanyStructureComponent.d.ts +1 -1
  22. package/dist/types/components/CompanyStructure/types.d.ts +3 -0
  23. package/dist/types/components/Dropins/BusinessDetailsDropin/types.d.ts +2 -1
  24. package/dist/types/components/Dropins/DropinLayout/ActionBar/ActionBar.d.ts +1 -1
  25. package/dist/types/components/Dropins/DropinLayout/ActionBar/type.d.ts +1 -0
  26. package/dist/types/components/Dropins/FormNavigation/FormNavigation.d.ts +1 -2
  27. package/dist/types/components/Dropins/FormNavigation/index.d.ts +1 -1
  28. package/dist/types/components/Dropins/FormWrapper/FormWrapper.d.ts +3 -1
  29. package/dist/types/components/Individual/validators.d.ts +1 -2
  30. package/dist/types/components/RegistrationAddress/types.d.ts +2 -0
  31. package/dist/types/components/UIElement/UIElement.d.ts +22 -0
  32. package/dist/types/components/internal/Address/components/FieldContainer.d.ts +1 -0
  33. package/dist/types/components/internal/Address/components/SearchAddress.d.ts +1 -1
  34. package/dist/types/components/internal/Address/types.d.ts +3 -0
  35. package/dist/types/components/internal/Alert/Alert.d.ts +1 -1
  36. package/dist/types/components/internal/Alert/types.d.ts +4 -7
  37. package/dist/types/components/internal/Card/Card.d.ts +1 -1
  38. package/dist/types/components/internal/Card/CardGroup.d.ts +1 -1
  39. package/dist/types/components/internal/Card/index.d.ts +2 -0
  40. package/dist/types/components/internal/Card/types.d.ts +2 -0
  41. package/dist/types/components/internal/DBANameField/DBANameField.d.ts +1 -1
  42. package/dist/types/components/internal/DBANameField/fieldConfig.d.ts +1 -0
  43. package/dist/types/components/internal/DBANameField/types.d.ts +1 -1
  44. package/dist/types/components/internal/Icon/Icon.d.ts +1 -0
  45. package/dist/types/components/internal/Link/Link.d.ts +1 -1
  46. package/dist/types/components/internal/Link/types.d.ts +0 -3
  47. package/dist/types/components/internal/Loader/Loader.d.ts +7 -9
  48. package/dist/types/components/internal/LoaderWrapper/LoaderWrapper.d.ts +1 -2
  49. package/dist/types/core/core.d.ts +1 -1
  50. package/dist/types/core/hooks/useBankConfigurationHandlers.d.ts +3 -1
  51. package/dist/types/core/hooks/useForm/reducer.d.ts +4 -2
  52. package/dist/types/core/hooks/useForm/types.d.ts +11 -0
  53. package/dist/types/core/hooks/useForm/useForm.d.ts +2 -1
  54. package/dist/types/core/hooks/useUnifyLoadingStatus.d.ts +2 -0
  55. package/dist/types/core/models/api/company-search.d.ts +1 -0
  56. package/dist/types/core/models/api/organization.d.ts +1 -0
  57. package/dist/types/core/models/country-code.d.ts +1 -0
  58. package/dist/types/core/process-field-configurations.d.ts +3 -2
  59. package/dist/types/utils/birth-date-utils.d.ts +11 -0
  60. package/dist/types/utils/mapping/componentApiMapping.d.ts +2 -1
  61. package/dist/types/utils/regex/patternValidators.d.ts +1 -1
  62. package/dist/types/utils/testing/IgnoreLocalStorage.d.ts +5 -0
  63. package/package.json +13 -2
  64. package/dist/types/components/UIElement.d.ts +0 -22
  65. package/dist/types/components/internal/Loader/index.d.ts +0 -2
  66. package/dist/types/components/internal/Spinner/Spinner.d.ts +0 -16
package/dist/style.css CHANGED
@@ -2,14 +2,8 @@
2
2
  /* #endregion */
3
3
  /* #region Borders */
4
4
  /* #endregion */
5
- /* #region Box-shadow */
6
- /* #endregion */
7
- /* #region Shadows */
8
- /* #endregion */
9
5
  /* #region Z-index */
10
6
  /* #endregion */
11
- /* #region Transition */
12
- /* #endregion */
13
7
  /* #region Timing functions */
14
8
  /* #endregion */
15
9
  /* #region Focus ring */
@@ -89,14 +83,8 @@
89
83
  /* #endregion */
90
84
  /* #region Borders */
91
85
  /* #endregion */
92
- /* #region Box-shadow */
93
- /* #endregion */
94
- /* #region Shadows */
95
- /* #endregion */
96
86
  /* #region Z-index */
97
87
  /* #endregion */
98
- /* #region Transition */
99
- /* #endregion */
100
88
  /* #region Timing functions */
101
89
  /* #endregion */
102
90
  /* #region Focus ring */
@@ -136,6 +124,7 @@
136
124
  height: fit-content;
137
125
  padding: var(--adyen-sdk-spacer-050, 10px) var(--adyen-sdk-spacer-060, 12px);
138
126
  position: relative;
127
+ transition: var(--adyen-sdk-animation-duration-fast, 100ms) var(--adyen-sdk-animation-easing-linear, linear);
139
128
  transition-property: color, background-color, box-shadow;
140
129
  }
141
130
  .adyen-kyc-button *,
@@ -233,14 +222,8 @@ button[disabled]:hover {
233
222
  /* #endregion */
234
223
  /* #region Borders */
235
224
  /* #endregion */
236
- /* #region Box-shadow */
237
- /* #endregion */
238
- /* #region Shadows */
239
- /* #endregion */
240
225
  /* #region Z-index */
241
226
  /* #endregion */
242
- /* #region Transition */
243
- /* #endregion */
244
227
  /* #region Timing functions */
245
228
  /* #endregion */
246
229
  /* #region Focus ring */
@@ -283,37 +266,12 @@ button[disabled]:hover {
283
266
  .adyen-kyc-link:visited {
284
267
  color: var(--adyen-sdk-color-link-primary, #00112c);
285
268
  }
286
- .adyen-kyc-link--inherit, .adyen-kyc-link--inherit:hover, .adyen-kyc-link--inherit:active, .adyen-kyc-link--inherit:visited {
287
- color: inherit;
288
- font-size: inherit;
289
- font-weight: inherit;
290
- }
291
- .adyen-kyc-link--underline {
292
- text-decoration: underline;
293
- }
294
- .adyen-kyc-link--underline, .adyen-kyc-link--underline:active, .adyen-kyc-link--underline:visited {
295
- color: inherit;
296
- }
297
- .adyen-kyc-link--underline:hover {
298
- color: var(--adyen-sdk-color-label-primary, #00112c);
299
- }
300
- .adyen-kyc-link--with-icon, .adyen-kyc-link--with-icon:hover {
301
- text-decoration: none;
269
+ .adyen-kyc-link--with-icon .adyen-kyc-link__text {
270
+ margin-right: var(--adyen-sdk-spacer-020, 4px);
302
271
  }
303
- .adyen-kyc-link--with-icon:hover > .adyen-kyc-link__text {
272
+ .adyen-kyc-link--with-icon:hover {
304
273
  text-decoration: underline;
305
- }
306
- .adyen-kyc-link--with-icon > .adyen-kyc-link__icon {
307
- margin-left: var(--adyen-sdk-spacer-020, 4px);
308
274
  margin-right: var(--adyen-sdk-spacer-000, 0px);
309
- text-decoration: none;
310
- }
311
- .adyen-kyc-link--icon-left {
312
- flex-direction: row-reverse;
313
- }
314
- .adyen-kyc-link--icon-left > .adyen-kyc-link__icon {
315
- margin-left: var(--adyen-sdk-spacer-000, 0px);
316
- margin-right: var(--adyen-sdk-spacer-020, 4px);
317
275
  }
318
276
  .adyen-kyc-link--icon-right {
319
277
  flex-direction: row-reverse;
@@ -326,11 +284,6 @@ button[disabled]:hover {
326
284
  display: inline;
327
285
  vertical-align: baseline;
328
286
  }
329
- .adyen-kyc-link__text, .adyen-kyc-link__text:hover, .adyen-kyc-link__text:active, .adyen-kyc-link__text:visited {
330
- color: inherit;
331
- font-size: inherit;
332
- font-weight: inherit;
333
- }
334
287
  .adyen-kyc-link__icon {
335
288
  display: inline;
336
289
  font-size: inherit;
@@ -346,51 +299,68 @@ button[disabled]:hover {
346
299
  }
347
300
  .adyen-kyc-icon svg {
348
301
  height: 1em;
349
- }.adyen-kyc-spinner__wrapper {
302
+ }.adyen-kyc-loader__wrapper {
350
303
  align-items: center;
351
304
  display: flex;
352
305
  height: 100%;
353
306
  justify-content: center;
354
307
  }
355
308
 
356
- .adyen-kyc-spinner__wrapper--inline {
309
+ .adyen-kyc-loader__wrapper--inline {
357
310
  display: inline-block;
358
311
  height: auto;
359
312
  margin-right: var(--adyen-sdk-spacer-040, 8px);
360
313
  }
361
314
 
362
- .adyen-kyc-spinner {
363
- animation: rotateSpinner 1.5s infinite linear;
364
- border: var(--adyen-sdk-border-width-l, 3px) solid var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
315
+ .adyen-kyc-loader {
316
+ animation: rotateLoader 1.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
365
317
  border-radius: 50%;
366
- border-top-color: transparent;
318
+ border: 3px solid var(--adyen-sdk-color-outline-primary, #dbdee2);
319
+ border-top-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
367
320
  height: 43px;
368
321
  width: 43px;
322
+ display: flex;
323
+ align-items: center;
324
+ justify-content: center;
369
325
  }
370
326
 
371
- .adyen-kyc-spinner--large {
327
+ .adyen-kyc-loader--large {
372
328
  height: 43px;
373
329
  width: 43px;
374
330
  }
375
331
 
376
- .adyen-kyc-spinner--small {
377
- border-width: var(--adyen-sdk-border-width-m, 2px);
332
+ .adyen-kyc-loader--small {
333
+ border-width: 2px;
378
334
  height: 16px;
379
335
  width: 16px;
380
336
  }
381
337
 
382
- .adyen-kyc-spinner--medium {
338
+ .adyen-kyc-loader--medium {
383
339
  height: 28px;
384
340
  width: 28px;
385
341
  }
386
342
 
387
- @keyframes rotateSpinner {
343
+ .adyen-kyc-loader--xsmall {
344
+ border-width: 2px;
345
+ height: 12px;
346
+ width: 12px;
347
+ }
348
+
349
+ @keyframes rotateLoader {
388
350
  0% {
389
351
  transform: rotate(0deg);
390
352
  }
391
353
  100% {
392
354
  transform: rotate(360deg);
393
355
  }
356
+ }
357
+ .adyen-kyc-loader--dot::before {
358
+ background: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
359
+ border-radius: 50%;
360
+ content: "";
361
+ min-height: 6px;
362
+ min-width: 6px;
363
+ position: absolute;
394
364
  }.adyen-kyc-divider {
395
365
  background-color: var(--adyen-sdk-color-separator-primary, #dbdee2);
396
366
  border: none;
@@ -404,21 +374,14 @@ button[disabled]:hover {
404
374
  /* #endregion */
405
375
  /* #region Borders */
406
376
  /* #endregion */
407
- /* #region Box-shadow */
408
- /* #endregion */
409
- /* #region Shadows */
410
- /* #endregion */
411
377
  /* #region Z-index */
412
378
  /* #endregion */
413
- /* #region Transition */
414
- /* #endregion */
415
379
  /* #region Timing functions */
416
380
  /* #endregion */
417
381
  /* #region Focus ring */
418
382
  /* #endregion */
419
383
  /* #region Inline components */
420
384
  /* #endregion */
421
- /* Base button */
422
385
  .adyen-kyc-alert {
423
386
  color: var(--adyen-sdk-color-label-primary, #00112c);
424
387
  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -441,32 +404,35 @@ button[disabled]:hover {
441
404
  }
442
405
 
443
406
  .adyen-kyc-alert--basic {
444
- background-color: #f3f6f9;
445
- color: var(--adyen-sdk-color-label-primary, #00112c);
407
+ background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
446
408
  }
447
409
 
448
410
  .adyen-kyc-alert--information {
449
- background-color: #cce0ff;
450
- color: var(--adyen-sdk-color-label-highlight, #0070f5);
411
+ background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
451
412
  }
452
-
453
- .adyen-kyc-alert--without-explanation .adyen-kyc-alert__title {
454
- font-weight: var(--adyen-sdk-text-caption-font-weight, 400);
413
+ .adyen-kyc-alert--information .adyen-kyc-alert__icon {
414
+ color: var(--adyen-sdk-color-background-highlight-strong, #0070f5);
455
415
  }
456
416
 
457
417
  .adyen-kyc-alert--error {
458
- background-color: #fce5e5;
459
- color: var(--adyen-sdk-color-label-critical, #e22d2d);
418
+ background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
419
+ }
420
+ .adyen-kyc-alert--error .adyen-kyc-alert__icon {
421
+ color: var(--adyen-sdk-color-background-critical-strong, #e22d2d);
460
422
  }
461
423
 
462
424
  .adyen-kyc-alert--warning {
463
- background-color: #ffeacc;
464
- color: var(--adyen-sdk-color-label-warning, #b06300);
425
+ background-color: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
426
+ }
427
+ .adyen-kyc-alert--warning .adyen-kyc-alert__icon {
428
+ color: var(--adyen-sdk-color-background-warning-strong, #dd7d00);
465
429
  }
466
430
 
467
431
  .adyen-kyc-alert--success {
468
- background-color: #cef2dd;
469
- color: var(--adyen-sdk-color-label-success, #07893c);
432
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
433
+ }
434
+ .adyen-kyc-alert--success .adyen-kyc-alert__icon {
435
+ color: var(--adyen-sdk-color-background-success-strong, #07893c);
470
436
  }
471
437
 
472
438
  .adyen-kyc-alert__header {
@@ -475,266 +441,39 @@ button[disabled]:hover {
475
441
  }
476
442
 
477
443
  .adyen-kyc-alert__icon {
478
- height: var(--adyen-sdk-text-body-font-size, 14px);
479
444
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
445
+ padding-top: var(--adyen-sdk-spacer-010, 2px);
446
+ }
447
+
448
+ .adyen-kyc-close-button {
449
+ padding: 0 !important;
480
450
  }
481
451
 
482
452
  .adyen-kyc-alert__title {
483
- color: var(--adyen-sdk-color-label-secondary, #5c687c);
453
+ color: var(--adyen-sdk-color-label-primary, #00112c);
484
454
  flex-grow: 1;
485
455
  font-size: var(--adyen-sdk-text-body-font-size, 14px);
486
456
  font-weight: var(--adyen-sdk-text-body-strongest-font-weight, 600);
487
457
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
488
458
  margin-left: var(--adyen-sdk-spacer-070, 16px);
489
459
  }
490
- .adyen-kyc-alert__title:first-child {
491
- margin-left: var(--adyen-sdk-spacer-000, 0px);
492
- }
493
- .adyen-kyc-alert__title--no-content {
494
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
495
- }
496
-
497
- .adyen-kyc-alert__action {
498
- color: var(--adyen-sdk-color-label-primary, #00112c);
499
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
500
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
501
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
502
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
503
- -webkit-font-smoothing: antialiased;
504
- -moz-osx-font-smoothing: grayscale;
505
- align-items: center;
506
- background: none;
507
- border: none;
508
- cursor: pointer;
509
- display: inline-flex;
510
- justify-content: center;
511
- line-height: calc(var(--adyen-sdk-text-body-line-height, 20px) * 1.4);
512
- margin: var(--adyen-sdk-spacer-000, 0px);
513
- outline: none;
514
- padding: var(--adyen-sdk-spacer-000, 0px);
515
- text-decoration: none;
516
- user-select: none;
517
- vertical-align: baseline;
518
- white-space: nowrap;
519
- color: inherit;
520
- font-size: var(--adyen-sdk-text-caption-font-size, 12px);
521
- font-weight: var(--adyen-sdk-text-caption-stronger-font-weight, 500);
522
- line-height: var(--adyen-sdk-text-caption-line-height, 18px);
523
- margin-left: var(--adyen-sdk-spacer-090, 24px);
524
- text-transform: uppercase;
525
- white-space: nowrap;
526
- }
527
- .adyen-kyc-alert__action *,
528
- .adyen-kyc-alert__action *::before,
529
- .adyen-kyc-alert__action *::after {
530
- box-sizing: border-box;
531
- }
532
- .adyen-kyc-alert__action::-moz-focus-inner {
533
- border: none;
534
- padding: var(--adyen-sdk-spacer-000, 0px);
535
- }
536
- .adyen-kyc-alert__action:hover {
537
- color: var(--adyen-sdk-color-label-primary, #00112c);
538
- text-decoration: underline;
539
- }
540
-
541
- .adyen-kyc-alert__dismiss {
542
- color: var(--adyen-sdk-color-label-primary, #00112c);
543
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
544
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
545
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
546
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
547
- -webkit-font-smoothing: antialiased;
548
- -moz-osx-font-smoothing: grayscale;
549
- align-items: center;
550
- background: none;
551
- border: none;
552
- cursor: pointer;
553
- display: inline-flex;
554
- justify-content: center;
555
- line-height: calc(var(--adyen-sdk-text-body-line-height, 20px) * 1.4);
556
- margin: var(--adyen-sdk-spacer-000, 0px);
557
- outline: none;
558
- padding: var(--adyen-sdk-spacer-000, 0px);
559
- text-decoration: none;
560
- user-select: none;
561
- vertical-align: baseline;
562
- white-space: nowrap;
563
- color: inherit;
564
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
565
- height: var(--adyen-sdk-text-body-font-size, 14px);
566
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
567
- margin-left: var(--adyen-sdk-spacer-120, 48px);
568
- }
569
- .adyen-kyc-alert__dismiss *,
570
- .adyen-kyc-alert__dismiss *::before,
571
- .adyen-kyc-alert__dismiss *::after {
572
- box-sizing: border-box;
573
- }
574
- .adyen-kyc-alert__dismiss::-moz-focus-inner {
575
- border: none;
576
- padding: var(--adyen-sdk-spacer-000, 0px);
577
- }
578
- .adyen-kyc-alert__dismiss:hover {
579
- background: transparent;
580
- color: var(--adyen-sdk-color-label-primary, #00112c);
581
- }
582
460
 
583
461
  .adyen-kyc-alert__explanation {
584
462
  color: var(--adyen-sdk-color-label-secondary, #5c687c);
585
463
  font-size: var(--adyen-sdk-text-body-font-size, 14px);
586
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
587
464
  padding-left: var(--adyen-sdk-spacer-100, 32px);
588
465
  }
589
- .adyen-kyc-alert__explanation .adyen-kyc-link {
590
- color: var(--adyen-sdk-color-label-primary, #00112c);
591
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
592
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
593
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
594
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
595
- -webkit-font-smoothing: antialiased;
596
- -moz-osx-font-smoothing: grayscale;
597
- background-color: transparent;
598
- border: 0;
599
- color: var(--adyen-sdk-color-link-primary, #00112c);
600
- cursor: pointer;
601
- display: inline;
602
- padding: var(--adyen-sdk-spacer-000, 0px);
603
- text-decoration: none;
604
- vertical-align: baseline;
605
- color: var(--adyen-sdk-color-link-primary, #00112c);
606
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
607
- text-decoration: underline;
608
- }
609
- .adyen-kyc-alert__explanation .adyen-kyc-link *,
610
- .adyen-kyc-alert__explanation .adyen-kyc-link *::before,
611
- .adyen-kyc-alert__explanation .adyen-kyc-link *::after {
612
- box-sizing: border-box;
613
- }
614
- .adyen-kyc-alert__explanation .adyen-kyc-link:hover {
615
- color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
616
- text-decoration: underline;
617
- }
618
- .adyen-kyc-alert__explanation .adyen-kyc-link:active {
619
- color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
620
- }
621
- .adyen-kyc-alert__explanation .adyen-kyc-link:focus {
622
- outline: none;
623
- text-decoration: underline;
624
- }
625
- .adyen-kyc-alert__explanation .adyen-kyc-link:visited {
626
- color: var(--adyen-sdk-color-link-primary, #00112c);
627
- }
628
- .adyen-kyc-alert__explanation .adyen-kyc-link, .adyen-kyc-alert__explanation .adyen-kyc-link:hover, .adyen-kyc-alert__explanation .adyen-kyc-link:active, .adyen-kyc-alert__explanation .adyen-kyc-link:visited {
629
- color: inherit;
630
- font-size: inherit;
631
- font-weight: inherit;
632
- }
633
- .adyen-kyc-alert__explanation .adyen-kyc-link:hover {
634
- color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
635
- }
636
- .adyen-kyc-alert__explanation .adyen-kyc-link:active {
637
- color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
638
- }
639
- .adyen-kyc-alert__explanation .adyen-kyc-link:focus {
640
- border: var(--adyen-sdk-border-width-s, 1px) dotted;
641
- }
642
-
643
- .adyen-kyc-alert__list {
644
- color: var(--adyen-sdk-color-label-primary, #00112c);
645
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
646
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
647
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
648
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
649
- -webkit-font-smoothing: antialiased;
650
- -moz-osx-font-smoothing: grayscale;
651
- display: block;
652
- list-style-position: outside;
653
- list-style-type: disc;
654
- margin: var(--adyen-sdk-spacer-000, 0px);
655
- padding-left: var(--adyen-sdk-spacer-070, 16px);
656
- color: inherit;
657
- padding-left: var(--adyen-sdk-spacer-070, 16px);
658
- }
659
- .adyen-kyc-alert__list *,
660
- .adyen-kyc-alert__list *::before,
661
- .adyen-kyc-alert__list *::after {
662
- box-sizing: border-box;
663
- }
664
-
665
- .adyen-kyc-alert__link {
666
- color: var(--adyen-sdk-color-label-primary, #00112c);
667
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
668
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
669
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
670
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
671
- -webkit-font-smoothing: antialiased;
672
- -moz-osx-font-smoothing: grayscale;
673
- background-color: transparent;
674
- border: 0;
675
- color: var(--adyen-sdk-color-link-primary, #00112c);
676
- cursor: pointer;
677
- display: inline;
678
- padding: var(--adyen-sdk-spacer-000, 0px);
679
- text-decoration: none;
680
- vertical-align: baseline;
681
- color: var(--adyen-sdk-color-link-primary, #00112c);
682
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
683
- text-decoration: underline;
684
- }
685
- .adyen-kyc-alert__link *,
686
- .adyen-kyc-alert__link *::before,
687
- .adyen-kyc-alert__link *::after {
688
- box-sizing: border-box;
689
- }
690
- .adyen-kyc-alert__link:hover {
691
- color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
692
- text-decoration: underline;
693
- }
694
- .adyen-kyc-alert__link:active {
695
- color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
696
- }
697
- .adyen-kyc-alert__link:focus {
698
- outline: none;
699
- text-decoration: underline;
700
- }
701
- .adyen-kyc-alert__link:visited {
702
- color: var(--adyen-sdk-color-link-primary, #00112c);
703
- }
704
- .adyen-kyc-alert__link, .adyen-kyc-alert__link:hover, .adyen-kyc-alert__link:active, .adyen-kyc-alert__link:visited {
705
- color: inherit;
706
- font-size: inherit;
707
- font-weight: inherit;
708
- }
709
- .adyen-kyc-alert__link:hover {
710
- color: var(--adyen-sdk-color-link-primary-hover, #5c687c);
711
- }
712
- .adyen-kyc-alert__link:active {
713
- color: var(--adyen-sdk-color-link-primary-active, #8d95a3);
714
- }
715
466
 
716
467
  .adyen-kyc-review-alert {
717
468
  width: 100%;
718
- }
719
-
720
- .adyen-kyc-icon.adyen-kyc-alert-error-icon::before {
721
- display: inline-block;
722
- color: var(--adyen-sdk-color-label-critical, #e22d2d);
723
- transform: scale(1.6);
724
469
  }.adyen-kyc-individual .adyen-kyc-form {
725
470
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
726
471
  }/* #region Colors */
727
472
  /* #endregion */
728
473
  /* #region Borders */
729
474
  /* #endregion */
730
- /* #region Box-shadow */
731
- /* #endregion */
732
- /* #region Shadows */
733
- /* #endregion */
734
475
  /* #region Z-index */
735
476
  /* #endregion */
736
- /* #region Transition */
737
- /* #endregion */
738
477
  /* #region Timing functions */
739
478
  /* #endregion */
740
479
  /* #region Focus ring */
@@ -818,14 +557,8 @@ button[disabled]:hover {
818
557
  /* #endregion */
819
558
  /* #region Borders */
820
559
  /* #endregion */
821
- /* #region Box-shadow */
822
- /* #endregion */
823
- /* #region Shadows */
824
- /* #endregion */
825
560
  /* #region Z-index */
826
561
  /* #endregion */
827
- /* #region Transition */
828
- /* #endregion */
829
562
  /* #region Timing functions */
830
563
  /* #endregion */
831
564
  /* #region Focus ring */
@@ -1047,131 +780,16 @@ button[disabled]:hover {
1047
780
  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
1048
781
  }
1049
782
  .adyen-kyc-dropdown-selected-items__tag--teal {
1050
- background-color: #eef9f9;
783
+ background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
1051
784
  }
1052
785
  .adyen-kyc-dropdown-selected-items__tag--blue {
1053
- background-color: #e6f0ff;
786
+ background-color: var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
1054
787
  }/* #region Colors */
1055
788
  /* #endregion */
1056
789
  /* #region Borders */
1057
790
  /* #endregion */
1058
- /* #region Box-shadow */
1059
- /* #endregion */
1060
- /* #region Shadows */
1061
- /* #endregion */
1062
791
  /* #region Z-index */
1063
792
  /* #endregion */
1064
- /* #region Transition */
1065
- /* #endregion */
1066
- /* #region Timing functions */
1067
- /* #endregion */
1068
- /* #region Focus ring */
1069
- /* #endregion */
1070
- /* #region Inline components */
1071
- /* #endregion */
1072
- .adyen-kyc-loader__wrapper {
1073
- align-items: center;
1074
- display: flex;
1075
- height: 100%;
1076
- justify-content: center;
1077
- }
1078
-
1079
- .adyen-kyc-loader__wrapper--inline {
1080
- display: inline-block;
1081
- height: auto;
1082
- margin-right: var(--adyen-sdk-spacer-040, 8px);
1083
- }
1084
-
1085
- .adyen-kyc-loading-indicator {
1086
- color: var(--adyen-sdk-color-label-primary, #00112c);
1087
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
1088
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
1089
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
1090
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
1091
- -webkit-font-smoothing: antialiased;
1092
- -moz-osx-font-smoothing: grayscale;
1093
- box-sizing: border-box;
1094
- display: inline-block;
1095
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
1096
- font-weight: 100;
1097
- min-height: 24px;
1098
- min-width: 24px;
1099
- position: relative;
1100
- }
1101
- .adyen-kyc-loading-indicator *,
1102
- .adyen-kyc-loading-indicator *::before,
1103
- .adyen-kyc-loading-indicator *::after {
1104
- box-sizing: border-box;
1105
- }
1106
- .adyen-kyc-loading-indicator::after {
1107
- animation: adyen-kyc-progress-circular-rotate 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
1108
- border: var(--adyen-sdk-border-width-l, 3px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
1109
- border-radius: 50%;
1110
- border-top-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
1111
- box-sizing: border-box;
1112
- content: "";
1113
- display: block;
1114
- height: 100%;
1115
- left: 0;
1116
- min-height: 24px;
1117
- min-width: 24px;
1118
- position: absolute;
1119
- top: 0;
1120
- width: 100%;
1121
- }
1122
- .adyen-kyc-loading-indicator::before {
1123
- box-sizing: border-box;
1124
- }
1125
- .adyen-kyc-loading-indicator--xsmall {
1126
- min-height: 14px;
1127
- min-width: 14px;
1128
- padding: var(--adyen-sdk-spacer-040, 8px);
1129
- }
1130
- .adyen-kyc-loading-indicator--xsmall::after {
1131
- border-width: var(--adyen-sdk-border-width-m, 2px);
1132
- min-height: 14px;
1133
- min-width: 14px;
1134
- }
1135
- .adyen-kyc-loading-indicator--dot::before {
1136
- background: var(--adyen-sdk-color-background-inverse-primary, #00112c);
1137
- border-radius: 50%;
1138
- content: "";
1139
- display: block;
1140
- left: 5px;
1141
- min-height: 6px;
1142
- min-width: 6px;
1143
- position: absolute;
1144
- top: 5px;
1145
- }
1146
- .adyen-kyc-loading-indicator--small {
1147
- padding: var(--adyen-sdk-spacer-060, 12px);
1148
- }
1149
- .adyen-kyc-loading-indicator--medium {
1150
- padding: var(--adyen-sdk-spacer-070, 16px);
1151
- }
1152
- .adyen-kyc-loading-indicator--large {
1153
- padding: var(--adyen-sdk-spacer-090, 24px);
1154
- }
1155
-
1156
- @keyframes adyen-kyc-progress-circular-rotate {
1157
- 0% {
1158
- transform: rotate(0deg);
1159
- }
1160
- 100% {
1161
- transform: rotate(360deg);
1162
- }
1163
- }/* #region Colors */
1164
- /* #endregion */
1165
- /* #region Borders */
1166
- /* #endregion */
1167
- /* #region Box-shadow */
1168
- /* #endregion */
1169
- /* #region Shadows */
1170
- /* #endregion */
1171
- /* #region Z-index */
1172
- /* #endregion */
1173
- /* #region Transition */
1174
- /* #endregion */
1175
793
  /* #region Timing functions */
1176
794
  /* #endregion */
1177
795
  /* #region Focus ring */
@@ -1192,7 +810,7 @@ button[disabled]:hover {
1192
810
  line-height: var(--adyen-sdk-text-caption-line-height, 18px);
1193
811
  padding: var(--adyen-sdk-spacer-010, 2px) var(--adyen-sdk-spacer-040, 8px);
1194
812
  text-decoration: none;
1195
- vertical-align: "baseline";
813
+ vertical-align: baseline;
1196
814
  white-space: nowrap;
1197
815
  border: none;
1198
816
  }
@@ -1239,14 +857,8 @@ button[disabled]:hover {
1239
857
  /* #endregion */
1240
858
  /* #region Borders */
1241
859
  /* #endregion */
1242
- /* #region Box-shadow */
1243
- /* #endregion */
1244
- /* #region Shadows */
1245
- /* #endregion */
1246
860
  /* #region Z-index */
1247
861
  /* #endregion */
1248
- /* #region Transition */
1249
- /* #endregion */
1250
862
  /* #region Timing functions */
1251
863
  /* #endregion */
1252
864
  /* #region Focus ring */
@@ -1321,14 +933,8 @@ button[disabled]:hover {
1321
933
  /* #endregion */
1322
934
  /* #region Borders */
1323
935
  /* #endregion */
1324
- /* #region Box-shadow */
1325
- /* #endregion */
1326
- /* #region Shadows */
1327
- /* #endregion */
1328
936
  /* #region Z-index */
1329
937
  /* #endregion */
1330
- /* #region Transition */
1331
- /* #endregion */
1332
938
  /* #region Timing functions */
1333
939
  /* #endregion */
1334
940
  /* #region Focus ring */
@@ -1444,14 +1050,8 @@ button[disabled]:hover {
1444
1050
  /* #endregion */
1445
1051
  /* #region Borders */
1446
1052
  /* #endregion */
1447
- /* #region Box-shadow */
1448
- /* #endregion */
1449
- /* #region Shadows */
1450
- /* #endregion */
1451
1053
  /* #region Z-index */
1452
1054
  /* #endregion */
1453
- /* #region Transition */
1454
- /* #endregion */
1455
1055
  /* #region Timing functions */
1456
1056
  /* #endregion */
1457
1057
  /* #region Focus ring */
@@ -1500,7 +1100,7 @@ button[disabled]:hover {
1500
1100
  }
1501
1101
  .adyen-kyc-checkbox__input:focus + .adyen-kyc-checkbox__label::after {
1502
1102
  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-background-inverse-primary, #00112c);
1503
- box-shadow: 0 0 0 2px #80b2ff;
1103
+ box-shadow: 0 0 0 2px var(--adyen-sdk-color-background-highlight-strong, #0070f5);
1504
1104
  }
1505
1105
  .adyen-kyc-checkbox__input:hover:not(:focus) + .adyen-kyc-checkbox__label::after {
1506
1106
  box-shadow: 0 0 0 2px #dce0e5;
@@ -1536,14 +1136,8 @@ button[disabled]:hover {
1536
1136
  /* #endregion */
1537
1137
  /* #region Borders */
1538
1138
  /* #endregion */
1539
- /* #region Box-shadow */
1540
- /* #endregion */
1541
- /* #region Shadows */
1542
- /* #endregion */
1543
1139
  /* #region Z-index */
1544
1140
  /* #endregion */
1545
- /* #region Transition */
1546
- /* #endregion */
1547
1141
  /* #region Timing functions */
1548
1142
  /* #endregion */
1549
1143
  /* #region Focus ring */
@@ -1565,14 +1159,8 @@ button[disabled]:hover {
1565
1159
  /* #endregion */
1566
1160
  /* #region Borders */
1567
1161
  /* #endregion */
1568
- /* #region Box-shadow */
1569
- /* #endregion */
1570
- /* #region Shadows */
1571
- /* #endregion */
1572
1162
  /* #region Z-index */
1573
1163
  /* #endregion */
1574
- /* #region Transition */
1575
- /* #endregion */
1576
1164
  /* #region Timing functions */
1577
1165
  /* #endregion */
1578
1166
  /* #region Focus ring */
@@ -1779,14 +1367,8 @@ button[disabled]:hover {
1779
1367
  /* #endregion */
1780
1368
  /* #region Borders */
1781
1369
  /* #endregion */
1782
- /* #region Box-shadow */
1783
- /* #endregion */
1784
- /* #region Shadows */
1785
- /* #endregion */
1786
1370
  /* #region Z-index */
1787
1371
  /* #endregion */
1788
- /* #region Transition */
1789
- /* #endregion */
1790
1372
  /* #region Timing functions */
1791
1373
  /* #endregion */
1792
1374
  /* #region Focus ring */
@@ -1867,7 +1449,7 @@ button[disabled]:hover {
1867
1449
  border-color: var(--adyen-sdk-color-outline-inverse-primary-hover, #6d7789);
1868
1450
  }
1869
1451
  .adyen-kyc-input-radio__input:focus {
1870
- box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 102, 255, 0.4);
1452
+ box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 0, 250, 0.4);
1871
1453
  transition: 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
1872
1454
  transition-property: box-shadow;
1873
1455
  border-color: var(--adyen-sdk-color-outline-inverse-primary, #2f3e56);
@@ -1889,27 +1471,9 @@ button[disabled]:hover {
1889
1471
  .adyen-kyc-input-radio__label--disabled {
1890
1472
  color: var(--adyen-sdk-color-label-disabled, #8d95a3);
1891
1473
  cursor: not-allowed;
1892
- }/* #region Colors */
1893
- /* #endregion */
1894
- /* #region Borders */
1895
- /* #endregion */
1896
- /* #region Box-shadow */
1897
- /* #endregion */
1898
- /* #region Shadows */
1899
- /* #endregion */
1900
- /* #region Z-index */
1901
- /* #endregion */
1902
- /* #region Transition */
1903
- /* #endregion */
1904
- /* #region Timing functions */
1905
- /* #endregion */
1906
- /* #region Focus ring */
1907
- /* #endregion */
1908
- /* #region Inline components */
1909
- /* #endregion */
1910
- .adyen-kyc-accordion__details,
1474
+ }.adyen-kyc-accordion__details,
1911
1475
  .adyen-kyc-accordion__summary {
1912
- background-color: #f3f6f9;
1476
+ background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
1913
1477
  color: var(--adyen-sdk-color-label-primary, #00112c);
1914
1478
  --adyen-kyc-accordion-animation-space: var(--adyen-sdk-spacer-080, 20px);
1915
1479
  }
@@ -1994,14 +1558,8 @@ button[disabled]:hover {
1994
1558
  /* #endregion */
1995
1559
  /* #region Borders */
1996
1560
  /* #endregion */
1997
- /* #region Box-shadow */
1998
- /* #endregion */
1999
- /* #region Shadows */
2000
- /* #endregion */
2001
1561
  /* #region Z-index */
2002
1562
  /* #endregion */
2003
- /* #region Transition */
2004
- /* #endregion */
2005
1563
  /* #region Timing functions */
2006
1564
  /* #endregion */
2007
1565
  /* #region Focus ring */
@@ -2060,14 +1618,8 @@ button[disabled]:hover {
2060
1618
  /* #endregion */
2061
1619
  /* #region Borders */
2062
1620
  /* #endregion */
2063
- /* #region Box-shadow */
2064
- /* #endregion */
2065
- /* #region Shadows */
2066
- /* #endregion */
2067
1621
  /* #region Z-index */
2068
1622
  /* #endregion */
2069
- /* #region Transition */
2070
- /* #endregion */
2071
1623
  /* #region Timing functions */
2072
1624
  /* #endregion */
2073
1625
  /* #region Focus ring */
@@ -2116,14 +1668,8 @@ button[disabled]:hover {
2116
1668
  /* #endregion */
2117
1669
  /* #region Borders */
2118
1670
  /* #endregion */
2119
- /* #region Box-shadow */
2120
- /* #endregion */
2121
- /* #region Shadows */
2122
- /* #endregion */
2123
1671
  /* #region Z-index */
2124
1672
  /* #endregion */
2125
- /* #region Transition */
2126
- /* #endregion */
2127
1673
  /* #region Timing functions */
2128
1674
  /* #endregion */
2129
1675
  /* #region Focus ring */
@@ -2160,14 +1706,8 @@ button[disabled]:hover {
2160
1706
  /* #endregion */
2161
1707
  /* #region Borders */
2162
1708
  /* #endregion */
2163
- /* #region Box-shadow */
2164
- /* #endregion */
2165
- /* #region Shadows */
2166
- /* #endregion */
2167
1709
  /* #region Z-index */
2168
1710
  /* #endregion */
2169
- /* #region Transition */
2170
- /* #endregion */
2171
1711
  /* #region Timing functions */
2172
1712
  /* #endregion */
2173
1713
  /* #region Focus ring */
@@ -2185,7 +1725,7 @@ button[disabled]:hover {
2185
1725
  }
2186
1726
  .adyen-kyc-dropzone--dragged {
2187
1727
  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-secondary-active, #00112c);
2188
- box-shadow: 0 0 0 3px #cce0ff;
1728
+ box-shadow: 0 0 0 3px var(--adyen-sdk-color-background-highlight-weak, #f2f8ff);
2189
1729
  }
2190
1730
  .adyen-kyc-dropzone--error {
2191
1731
  border: var(--adyen-sdk-border-width-s, 1px) dashed var(--adyen-sdk-color-outline-critical, #e22d2d);
@@ -2234,14 +1774,8 @@ button[disabled]:hover {
2234
1774
  /* #endregion */
2235
1775
  /* #region Borders */
2236
1776
  /* #endregion */
2237
- /* #region Box-shadow */
2238
- /* #endregion */
2239
- /* #region Shadows */
2240
- /* #endregion */
2241
1777
  /* #region Z-index */
2242
1778
  /* #endregion */
2243
- /* #region Transition */
2244
- /* #endregion */
2245
1779
  /* #region Timing functions */
2246
1780
  /* #endregion */
2247
1781
  /* #region Focus ring */
@@ -2310,14 +1844,8 @@ button[disabled]:hover {
2310
1844
  /* #endregion */
2311
1845
  /* #region Borders */
2312
1846
  /* #endregion */
2313
- /* #region Box-shadow */
2314
- /* #endregion */
2315
- /* #region Shadows */
2316
- /* #endregion */
2317
1847
  /* #region Z-index */
2318
1848
  /* #endregion */
2319
- /* #region Transition */
2320
- /* #endregion */
2321
1849
  /* #region Timing functions */
2322
1850
  /* #endregion */
2323
1851
  /* #region Focus ring */
@@ -2367,25 +1895,7 @@ button[disabled]:hover {
2367
1895
 
2368
1896
  .adyen-kyc-list--ordered {
2369
1897
  list-style-type: decimal;
2370
- }/* #region Colors */
2371
- /* #endregion */
2372
- /* #region Borders */
2373
- /* #endregion */
2374
- /* #region Box-shadow */
2375
- /* #endregion */
2376
- /* #region Shadows */
2377
- /* #endregion */
2378
- /* #region Z-index */
2379
- /* #endregion */
2380
- /* #region Transition */
2381
- /* #endregion */
2382
- /* #region Timing functions */
2383
- /* #endregion */
2384
- /* #region Focus ring */
2385
- /* #endregion */
2386
- /* #region Inline components */
2387
- /* #endregion */
2388
- .adyen-kyc-search-address {
1898
+ }.adyen-kyc-search-address {
2389
1899
  display: flex;
2390
1900
  flex-direction: column;
2391
1901
  }
@@ -2409,27 +1919,11 @@ button[disabled]:hover {
2409
1919
  }
2410
1920
  .adyen-kyc-search-address--below-location .adyen-kyc-icon svg {
2411
1921
  height: 14px;
1922
+ }.adyen-kyc-search-fieldcontainer-hide {
1923
+ display: none;
2412
1924
  }.adyen-kyc-individual .adyen-kyc-form {
2413
1925
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
2414
- }/* #region Colors */
2415
- /* #endregion */
2416
- /* #region Borders */
2417
- /* #endregion */
2418
- /* #region Box-shadow */
2419
- /* #endregion */
2420
- /* #region Shadows */
2421
- /* #endregion */
2422
- /* #region Z-index */
2423
- /* #endregion */
2424
- /* #region Transition */
2425
- /* #endregion */
2426
- /* #region Timing functions */
2427
- /* #endregion */
2428
- /* #region Focus ring */
2429
- /* #endregion */
2430
- /* #region Inline components */
2431
- /* #endregion */
2432
- .adyen-kyc-document-upload__subtitle {
1926
+ }.adyen-kyc-document-upload__subtitle {
2433
1927
  margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-040, 8px) var(--adyen-sdk-spacer-000, 0px);
2434
1928
  }
2435
1929
  .adyen-kyc-document-upload__requirements {
@@ -2444,14 +1938,8 @@ button[disabled]:hover {
2444
1938
  /* #endregion */
2445
1939
  /* #region Borders */
2446
1940
  /* #endregion */
2447
- /* #region Box-shadow */
2448
- /* #endregion */
2449
- /* #region Shadows */
2450
- /* #endregion */
2451
1941
  /* #region Z-index */
2452
1942
  /* #endregion */
2453
- /* #region Transition */
2454
- /* #endregion */
2455
1943
  /* #region Timing functions */
2456
1944
  /* #endregion */
2457
1945
  /* #region Focus ring */
@@ -2479,14 +1967,14 @@ button[disabled]:hover {
2479
1967
  box-shadow: 0 0 0 1px var(--adyen-sdk-color-outline-inverse-primary, #2f3e56) !important;
2480
1968
  }
2481
1969
  .adyen-kyc-id-verification .onfido-sdk-ui-CountrySelector-custom__option:hover {
2482
- background-color: #20304c !important;
1970
+ background-color: var(--adyen-sdk-color-background-inverse-secondary-hover, #283750) !important;
2483
1971
  }
2484
1972
  .adyen-kyc-id-verification .onfido-sdk-ui-Button-button {
2485
- background-color: #20304c;
1973
+ background-color: var(--adyen-sdk-color-background-inverse-primary, #00112c);
2486
1974
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
2487
1975
  }
2488
1976
  .adyen-kyc-id-verification .onfido-sdk-ui-Button-button:hover:not([disabled]) {
2489
- background-color: #394962 !important;
1977
+ background-color: var(--adyen-sdk-color-background-inverse-primary-hover, #5c687c) !important;
2490
1978
  }
2491
1979
  .adyen-kyc-id-verification .onfido-sdk-ui-Theme-link {
2492
1980
  border-bottom-style: none !important;
@@ -2551,25 +2039,7 @@ button[disabled]:hover {
2551
2039
  }
2552
2040
  .adyen-kyc-loading-input__loader--active {
2553
2041
  display: block;
2554
- }/* #region Colors */
2555
- /* #endregion */
2556
- /* #region Borders */
2557
- /* #endregion */
2558
- /* #region Box-shadow */
2559
- /* #endregion */
2560
- /* #region Shadows */
2561
- /* #endregion */
2562
- /* #region Z-index */
2563
- /* #endregion */
2564
- /* #region Transition */
2565
- /* #endregion */
2566
- /* #region Timing functions */
2567
- /* #endregion */
2568
- /* #region Focus ring */
2569
- /* #endregion */
2570
- /* #region Inline components */
2571
- /* #endregion */
2572
- .adyen-kyc-id-verification-method__guidance {
2042
+ }.adyen-kyc-id-verification-method__guidance {
2573
2043
  color: var(--adyen-sdk-color-label-secondary, #5c687c);
2574
2044
  font-size: var(--adyen-sdk-text-body-font-size, 14px);
2575
2045
  }.adyen-kyc-field--idNumberWithExempt .adyen-kyc-input--text {
@@ -2623,14 +2093,8 @@ button[disabled]:hover {
2623
2093
  /* #endregion */
2624
2094
  /* #region Borders */
2625
2095
  /* #endregion */
2626
- /* #region Box-shadow */
2627
- /* #endregion */
2628
- /* #region Shadows */
2629
- /* #endregion */
2630
2096
  /* #region Z-index */
2631
2097
  /* #endregion */
2632
- /* #region Transition */
2633
- /* #endregion */
2634
2098
  /* #region Timing functions */
2635
2099
  /* #endregion */
2636
2100
  /* #region Focus ring */
@@ -2679,14 +2143,8 @@ button[disabled]:hover {
2679
2143
  /* #endregion */
2680
2144
  /* #region Borders */
2681
2145
  /* #endregion */
2682
- /* #region Box-shadow */
2683
- /* #endregion */
2684
- /* #region Shadows */
2685
- /* #endregion */
2686
2146
  /* #region Z-index */
2687
2147
  /* #endregion */
2688
- /* #region Transition */
2689
- /* #endregion */
2690
2148
  /* #region Timing functions */
2691
2149
  /* #endregion */
2692
2150
  /* #region Focus ring */
@@ -2694,10 +2152,10 @@ button[disabled]:hover {
2694
2152
  /* #region Inline components */
2695
2153
  /* #endregion */
2696
2154
  .adyen-action-bar {
2697
- background-color: #fff;
2155
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
2698
2156
  display: flex;
2699
2157
  align-items: center;
2700
- margin: var(--adyen-sdk-spacer-090, 24px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
2158
+ margin: var(--adyen-sdk-spacer-120, 48px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px);
2701
2159
  }
2702
2160
  .adyen-layout-xs-only .adyen-action-bar {
2703
2161
  flex-direction: column;
@@ -2746,14 +2204,8 @@ button[disabled]:hover {
2746
2204
  /* #endregion */
2747
2205
  /* #region Borders */
2748
2206
  /* #endregion */
2749
- /* #region Box-shadow */
2750
- /* #endregion */
2751
- /* #region Shadows */
2752
- /* #endregion */
2753
2207
  /* #region Z-index */
2754
2208
  /* #endregion */
2755
- /* #region Transition */
2756
- /* #endregion */
2757
2209
  /* #region Timing functions */
2758
2210
  /* #endregion */
2759
2211
  /* #region Focus ring */
@@ -2843,25 +2295,7 @@ button[disabled]:hover {
2843
2295
  position: absolute;
2844
2296
  }.adyen-kyc-individual .adyen-kyc-form {
2845
2297
  margin-bottom: var(--adyen-sdk-spacer-070, 16px);
2846
- }/* #region Colors */
2847
- /* #endregion */
2848
- /* #region Borders */
2849
- /* #endregion */
2850
- /* #region Box-shadow */
2851
- /* #endregion */
2852
- /* #region Shadows */
2853
- /* #endregion */
2854
- /* #region Z-index */
2855
- /* #endregion */
2856
- /* #region Transition */
2857
- /* #endregion */
2858
- /* #region Timing functions */
2859
- /* #endregion */
2860
- /* #region Focus ring */
2861
- /* #endregion */
2862
- /* #region Inline components */
2863
- /* #endregion */
2864
- .adyen-kyc-context-helper {
2298
+ }.adyen-kyc-context-helper {
2865
2299
  background-color: var(--adyen-sdk-color-background-selected, #e3f0ff);
2866
2300
  border-radius: var(--adyen-sdk-border-radius-s, 4px);
2867
2301
  margin: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-000, 0px);
@@ -2876,83 +2310,289 @@ button[disabled]:hover {
2876
2310
  }.adyen-kyc-additional-information {
2877
2311
  display: flex;
2878
2312
  flex-direction: column;
2313
+ gap: var(--adyen-sdk-spacer-120, 48px);
2879
2314
  }
2880
- .adyen-kyc-additional-information__verified-information {
2881
- padding-bottom: var(--adyen-sdk-spacer-090, 24px);
2315
+ .adyen-kyc-additional-information h3 {
2316
+ margin: 0 0 var(--adyen-sdk-spacer-090, 24px);
2317
+ font-size: var(--adyen-sdk-text-title-font-size, 16px);
2318
+ font-weight: 700;
2319
+ line-height: var(--adyen-sdk-text-title-line-height, 26px);
2882
2320
  }
2883
- .adyen-kyc-additional-information__verified-information .adyen-kyc-verified-information-card {
2321
+ .adyen-kyc-additional-information .adyen-kyc-field-wrapper {
2322
+ flex-direction: column;
2323
+ }.adyen-kyc-field--dbaName {
2324
+ margin-left: 0 !important;
2325
+ }.adyen-kyc-verified-business-card {
2326
+ display: flex;
2327
+ flex-direction: column;
2328
+ gap: var(--adyen-sdk-spacer-080, 20px);
2884
2329
  background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
2885
2330
  padding: var(--adyen-sdk-spacer-080, 20px) var(--adyen-sdk-spacer-090, 24px);
2886
- border-radius: var(--adyen-sdk-border-radius-l, 12px);
2331
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
2887
2332
  }
2888
- .adyen-kyc-additional-information__other-business-information {
2889
- padding-bottom: var(--adyen-sdk-spacer-090, 24px);
2333
+ .adyen-kyc-verified-business-card__data-title {
2334
+ width: 180px;
2335
+ color: var(--adyen-sdk-color-label-secondary, #5c687c);
2890
2336
  }
2891
- .adyen-kyc-additional-information__stock-exchange-information {
2892
- padding-bottom: var(--adyen-sdk-spacer-090, 24px);
2337
+ .adyen-kyc-verified-business-card ul {
2338
+ display: flex;
2339
+ flex-direction: column;
2340
+ padding: 0;
2341
+ margin: 0;
2342
+ list-style: none;
2343
+ gap: var(--adyen-sdk-spacer-040, 8px);
2893
2344
  }
2894
- .adyen-kyc-additional-information .adyen-kyc-field-wrapper {
2345
+ .adyen-kyc-verified-business-card ul li {
2346
+ display: flex;
2347
+ }
2348
+ .adyen-kyc-verified-business-card__address {
2349
+ display: flex;
2895
2350
  flex-direction: column;
2896
- }.adyen-kyc-field--dbaName {
2897
- margin-left: 0 !important;
2898
- }.adyen-kyc-basic-information {
2351
+ }
2352
+ .adyen-kyc-verified-business-card__address a {
2353
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2354
+ }
2355
+ .adyen-kyc-verified-business-card__button {
2356
+ display: flex;
2357
+ flex-direction: row;
2358
+ justify-content: flex-start;
2359
+ text-decoration: underline;
2360
+ }.adyen-kyc-hide-form {
2361
+ display: none;
2362
+ }
2363
+
2364
+ .adyen-kyc-basic-information {
2899
2365
  display: flex;
2900
2366
  flex-direction: column;
2901
2367
  }
2902
2368
  .adyen-kyc-basic-information .adyen-kyc-field-wrapper {
2903
2369
  flex-direction: column;
2370
+ }
2371
+ .adyen-kyc-basic-information fieldset {
2372
+ border: none;
2373
+ padding: 0 0 var(--adyen-sdk-spacer-080, 20px);
2374
+ margin: 0;
2904
2375
  }.adyen-kyc-field--entityType {
2905
2376
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
2906
2377
  }
2907
2378
  .adyen-kyc-field--entityType .adyen-kyc-label__text {
2908
2379
  margin-bottom: var(--adyen-sdk-spacer-040, 8px);
2909
- }/* #region Colors */
2910
- /* #endregion */
2911
- /* #region Borders */
2912
- /* #endregion */
2913
- /* #region Box-shadow */
2914
- /* #endregion */
2915
- /* #region Shadows */
2916
- /* #endregion */
2917
- /* #region Z-index */
2918
- /* #endregion */
2919
- /* #region Transition */
2920
- /* #endregion */
2921
- /* #region Timing functions */
2922
- /* #endregion */
2923
- /* #region Focus ring */
2924
- /* #endregion */
2925
- /* #region Inline components */
2926
- /* #endregion */
2927
- .adyen-kyc-form-container {
2928
- width: 100%;
2380
+ }.adyen-kyc-business-details {
2381
+ min-height: 480px;
2929
2382
  }
2930
- .adyen-layout-md .adyen-kyc-form-container {
2931
- flex: 1;
2932
- width: auto;
2383
+ .adyen-kyc-business-details--hide {
2384
+ display: none;
2385
+ }
2386
+ .adyen-kyc-business-details .adyen-kyc-form-header {
2387
+ margin: 0 0 var(--adyen-sdk-spacer-120, 48px);
2388
+ }
2389
+ .adyen-kyc-business-details .adyen-kyc-form-header__heading {
2390
+ font-size: var(--adyen-sdk-text-title-m-font-size, 20px);
2391
+ font-weight: 700;
2392
+ line-height: var(--adyen-sdk-text-title-m-line-height, 30px);
2393
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2394
+ }
2395
+ .adyen-kyc-business-details .adyen-kyc-form-header__description {
2396
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2397
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2398
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
2399
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2400
+ }.adyen-kyc-business-selection__loader {
2401
+ min-height: 228px;
2402
+ display: flex;
2403
+ flex-direction: column;
2404
+ align-items: center;
2405
+ justify-content: center;
2406
+ gap: var(--adyen-sdk-spacer-090, 24px);
2407
+ }
2408
+ .adyen-kyc-business-selection__footer {
2409
+ display: flex;
2410
+ justify-content: center;
2411
+ padding: var(--adyen-sdk-spacer-090, 24px) 0;
2412
+ gap: var(--adyen-sdk-spacer-020, 4px);
2413
+ }
2414
+ .adyen-kyc-business-selection .adyen-kyc-link {
2415
+ text-decoration: underline;
2416
+ text-wrap: nowrap;
2417
+ }/* #region Colors */
2418
+ /* #endregion */
2419
+ /* #region Borders */
2420
+ /* #endregion */
2421
+ /* #region Z-index */
2422
+ /* #endregion */
2423
+ /* #region Timing functions */
2424
+ /* #endregion */
2425
+ /* #region Focus ring */
2426
+ /* #endregion */
2427
+ /* #region Inline components */
2428
+ /* #endregion */
2429
+ .adyen-kyc-card {
2430
+ color: var(--adyen-sdk-color-label-primary, #00112c);
2431
+ font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
2432
+ font-size: var(--adyen-sdk-text-body-font-size, 14px);
2433
+ font-weight: var(--adyen-sdk-text-body-font-weight, 400);
2434
+ line-height: var(--adyen-sdk-text-body-line-height, 20px);
2435
+ -webkit-font-smoothing: antialiased;
2436
+ -moz-osx-font-smoothing: grayscale;
2437
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
2438
+ border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2439
+ border-radius: var(--adyen-sdk-border-radius-l, 12px);
2440
+ display: block;
2441
+ outline: none;
2442
+ }
2443
+ .adyen-kyc-card *,
2444
+ .adyen-kyc-card *::before,
2445
+ .adyen-kyc-card *::after {
2446
+ box-sizing: border-box;
2933
2447
  }
2934
2448
 
2935
- .adyen-kyc-form-wrapper--hidden {
2936
- display: none;
2449
+ .adyen-kyc-card.adyen-kyc-card--stateful {
2450
+ border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
2451
+ cursor: pointer;
2452
+ transition-duration: 0.2s;
2453
+ transition-property: border-color, box-shadow;
2454
+ transition-timing-function: ease;
2455
+ position: relative;
2456
+ z-index: 0;
2457
+ }
2458
+ .adyen-kyc-card.adyen-kyc-card--stateful:hover {
2459
+ border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
2460
+ z-index: 1;
2461
+ }
2462
+ .adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
2463
+ z-index: 2;
2464
+ box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
2937
2465
  }
2938
2466
 
2939
- .adyen-kyc-dropin__sidebar-wrapper {
2940
- width: 27%;
2467
+ .adyen-kyc-card.adyen-kyc-card--active {
2468
+ border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
2469
+ cursor: pointer;
2470
+ transition-duration: 0.2s;
2471
+ transition-property: border-color, box-shadow;
2472
+ transition-timing-function: ease;
2473
+ }
2474
+ .adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
2475
+ border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
2476
+ }
2477
+ .adyen-kyc-card.adyen-kyc-card--active:focus, .adyen-kyc-card.adyen-kyc-card--active:active {
2478
+ box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
2941
2479
  }
2942
2480
 
2943
- .adyen-layout-xs-only .adyen-kyc-dropin__content-main {
2481
+ .adyen-kyc-card.adyen-kyc-card--disabled {
2482
+ background-color: var(--adyen-sdk-color-background-disabled, #eeeff1);
2483
+ color: var(--adyen-sdk-color-label-disabled, #8d95a3);
2484
+ cursor: not-allowed;
2485
+ }
2486
+
2487
+ .adyen-kyc-card__header {
2488
+ padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
2489
+ }
2490
+ .adyen-kyc-card__header--button {
2491
+ display: flex;
2492
+ justify-content: space-between;
2493
+ align-items: center;
2494
+ }
2495
+ .adyen-kyc-card__header .adyen-kyc-card-title {
2496
+ display: flex;
2944
2497
  flex-direction: column;
2498
+ }
2499
+
2500
+ .adyen-kyc-card__body {
2501
+ padding: var(--adyen-sdk-spacer-070, 16px);
2502
+ }
2503
+ .adyen-kyc-card__header + .adyen-kyc-card__body {
2504
+ padding-top: var(--adyen-sdk-spacer-000, 0px);
2505
+ }
2506
+
2507
+ .adyen-kyc-card__footer {
2508
+ padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
2509
+ }
2510
+ .adyen-kyc-card__body + .adyen-kyc-card__footer {
2511
+ margin-top: -var(--adyen-sdk-spacer-070, 16px);
2512
+ }
2513
+
2514
+ .adyen-kyc-card__warning {
2515
+ border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
2945
2516
  }/* #region Colors */
2946
2517
  /* #endregion */
2947
2518
  /* #region Borders */
2948
2519
  /* #endregion */
2949
- /* #region Box-shadow */
2520
+ /* #region Z-index */
2950
2521
  /* #endregion */
2951
- /* #region Shadows */
2522
+ /* #region Timing functions */
2952
2523
  /* #endregion */
2953
- /* #region Z-index */
2524
+ /* #region Focus ring */
2525
+ /* #endregion */
2526
+ /* #region Inline components */
2527
+ /* #endregion */
2528
+ .adyen-kyc-card-group > .adyen-kyc-card + .adyen-kyc-card {
2529
+ margin-top: -1px;
2530
+ border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
2531
+ }
2532
+ .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):first-of-type {
2533
+ border-bottom-left-radius: 0;
2534
+ border-bottom-right-radius: 0;
2535
+ }
2536
+ .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):not(:first-of-type):not(:last-of-type) {
2537
+ border-radius: 0;
2538
+ }
2539
+ .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):last-of-type {
2540
+ border-top-left-radius: 0;
2541
+ border-top-right-radius: 0;
2542
+ }
2543
+
2544
+ .adyen-kyc-card-group-spaced {
2545
+ display: flex;
2546
+ flex-direction: column;
2547
+ gap: var(--adyen-sdk-spacer-040, 8px);
2548
+ }
2549
+ .adyen-kyc-card-group-spaced .adyen-kyc-card {
2550
+ margin-top: -1px;
2551
+ }.adyen-kyc-business-information-card .adyen-kyc-alert__header {
2552
+ display: flex;
2553
+ align-items: center;
2554
+ }
2555
+ .adyen-kyc-business-information-card .adyen-kyc-alert__title {
2556
+ margin-left: var(--adyen-sdk-spacer-060, 12px);
2557
+ }
2558
+ .adyen-kyc-business-information-card .adyen-kyc-card {
2559
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
2560
+ }
2561
+ .adyen-kyc-business-information-card .adyen-kyc-card__body {
2562
+ display: flex;
2563
+ flex-direction: column;
2564
+ gap: var(--adyen-sdk-spacer-070, 16px);
2565
+ padding: 0 var(--adyen-sdk-spacer-090, 24px) var(--adyen-sdk-spacer-070, 16px);
2566
+ }
2567
+
2568
+ .adyen-kyc-business-information {
2569
+ display: flex;
2570
+ flex-direction: column;
2571
+ }
2572
+ .adyen-kyc-business-information--loading {
2573
+ flex-direction: row;
2574
+ min-height: 228px;
2575
+ justify-content: center;
2576
+ align-items: center;
2577
+ }
2578
+ .adyen-kyc-business-information__business-data {
2579
+ padding: 0;
2580
+ margin: 0;
2581
+ list-style: none;
2582
+ display: flex;
2583
+ flex-direction: column;
2584
+ gap: var(--adyen-sdk-spacer-040, 8px);
2585
+ }
2586
+ .adyen-kyc-business-information__business-data li {
2587
+ display: flex;
2588
+ }
2589
+ .adyen-kyc-business-information__business-data .adyen-kyc-business-data__key {
2590
+ width: 180px;
2591
+ }/* #region Colors */
2592
+ /* #endregion */
2593
+ /* #region Borders */
2954
2594
  /* #endregion */
2955
- /* #region Transition */
2595
+ /* #region Z-index */
2956
2596
  /* #endregion */
2957
2597
  /* #region Timing functions */
2958
2598
  /* #endregion */
@@ -2960,7 +2600,25 @@ button[disabled]:hover {
2960
2600
  /* #endregion */
2961
2601
  /* #region Inline components */
2962
2602
  /* #endregion */
2963
- .adyen-kyc-expiry-modal__header {
2603
+ .adyen-kyc-form-container {
2604
+ width: 100%;
2605
+ }
2606
+ .adyen-layout-md .adyen-kyc-form-container {
2607
+ flex: 1;
2608
+ width: auto;
2609
+ }
2610
+
2611
+ .adyen-kyc-form-wrapper--hidden {
2612
+ display: none;
2613
+ }
2614
+
2615
+ .adyen-kyc-dropin__sidebar-wrapper {
2616
+ width: 27%;
2617
+ }
2618
+
2619
+ .adyen-layout-xs-only .adyen-kyc-dropin__content-main {
2620
+ flex-direction: column;
2621
+ }.adyen-kyc-expiry-modal__header {
2964
2622
  font-size: var(--adyen-sdk-text-title-font-size, 16px);
2965
2623
  font-weight: var(--adyen-sdk-text-title-font-weight, 600);
2966
2624
  }
@@ -2973,21 +2631,14 @@ button[disabled]:hover {
2973
2631
  /* #endregion */
2974
2632
  /* #region Borders */
2975
2633
  /* #endregion */
2976
- /* #region Box-shadow */
2977
- /* #endregion */
2978
- /* #region Shadows */
2979
- /* #endregion */
2980
2634
  /* #region Z-index */
2981
2635
  /* #endregion */
2982
- /* #region Transition */
2983
- /* #endregion */
2984
2636
  /* #region Timing functions */
2985
2637
  /* #endregion */
2986
2638
  /* #region Focus ring */
2987
2639
  /* #endregion */
2988
2640
  /* #region Inline components */
2989
2641
  /* #endregion */
2990
- /* Base button */
2991
2642
  .adyen-kyc-modal {
2992
2643
  color: var(--adyen-sdk-color-label-primary, #00112c);
2993
2644
  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -2996,9 +2647,9 @@ button[disabled]:hover {
2996
2647
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
2997
2648
  -webkit-font-smoothing: antialiased;
2998
2649
  -moz-osx-font-smoothing: grayscale;
2999
- background-color: #fff;
2650
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
3000
2651
  border-radius: var(--adyen-sdk-border-radius-l, 12px);
3001
- box-shadow: 0 8px 8px rgba(0, 17, 44, 0.04), 0 2px 4px rgba(0, 17, 44, 0.08);
2652
+ box-shadow: var(--adyen-sdk-shadow-low, 0px 2px 4px rgba(0, 17, 44, 0.04), 0px 1px 2px rgba(0, 17, 44, 0.02));
3002
2653
  box-sizing: border-box;
3003
2654
  cursor: initial;
3004
2655
  display: flex;
@@ -3030,21 +2681,6 @@ button[disabled]:hover {
3030
2681
  border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3031
2682
  }
3032
2683
 
3033
- .adyen-kyc-modal--full-screen {
3034
- border-radius: 0;
3035
- cursor: initial;
3036
- height: 100%;
3037
- max-height: 100%;
3038
- max-width: 100%;
3039
- width: 100%;
3040
- }
3041
- .adyen-kyc-modal--full-screen .adyen-kyc-modal__header {
3042
- border-bottom: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3043
- }
3044
- .adyen-kyc-modal--full-screen .adyen-kyc-modal__footer {
3045
- border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3046
- }
3047
-
3048
2684
  .adyen-kyc-modal__close {
3049
2685
  position: absolute;
3050
2686
  top: var(--adyen-sdk-spacer-060, 12px);
@@ -3070,7 +2706,7 @@ button[disabled]:hover {
3070
2706
  }
3071
2707
 
3072
2708
  .adyen-kyc-modal__footer {
3073
- background-color: #fff;
2709
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
3074
2710
  border-radius: 0 0 var(--adyen-sdk-border-radius-l, 12px) var(--adyen-sdk-border-radius-l, 12px);
3075
2711
  }
3076
2712
 
@@ -3088,14 +2724,8 @@ button[disabled]:hover {
3088
2724
  /* #endregion */
3089
2725
  /* #region Borders */
3090
2726
  /* #endregion */
3091
- /* #region Box-shadow */
3092
- /* #endregion */
3093
- /* #region Shadows */
3094
- /* #endregion */
3095
2727
  /* #region Z-index */
3096
2728
  /* #endregion */
3097
- /* #region Transition */
3098
- /* #endregion */
3099
2729
  /* #region Timing functions */
3100
2730
  /* #endregion */
3101
2731
  /* #region Focus ring */
@@ -3104,7 +2734,7 @@ button[disabled]:hover {
3104
2734
  /* #endregion */
3105
2735
  .adyen-kyc-overlay {
3106
2736
  align-items: center;
3107
- background-color: rgba(0, 17, 44, 0.4);
2737
+ background-color: rgba(204, 204, 204, 0.8);
3108
2738
  bottom: 0;
3109
2739
  display: flex;
3110
2740
  height: 100%;
@@ -3130,22 +2760,14 @@ button[disabled]:hover {
3130
2760
  /* #endregion */
3131
2761
  /* #region Borders */
3132
2762
  /* #endregion */
3133
- /* #region Box-shadow */
3134
- /* #endregion */
3135
- /* #region Shadows */
3136
- /* #endregion */
3137
2763
  /* #region Z-index */
3138
2764
  /* #endregion */
3139
- /* #region Transition */
3140
- /* #endregion */
3141
2765
  /* #region Timing functions */
3142
2766
  /* #endregion */
3143
2767
  /* #region Focus ring */
3144
2768
  /* #endregion */
3145
2769
  /* #region Inline components */
3146
2770
  /* #endregion */
3147
- /* stylelint-disable scss/dollar-variable-default */
3148
- /* stylelint-enable scss/dollar-variable-default */
3149
2771
  .adyen-kyc-dropin {
3150
2772
  color: var(--adyen-sdk-color-label-primary, #00112c);
3151
2773
  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -3154,7 +2776,7 @@ button[disabled]:hover {
3154
2776
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
3155
2777
  -webkit-font-smoothing: antialiased;
3156
2778
  -moz-osx-font-smoothing: grayscale;
3157
- background: #fff;
2779
+ background: var(--adyen-sdk-color-background-primary, #ffffff);
3158
2780
  display: flex;
3159
2781
  flex-direction: column;
3160
2782
  height: 100%;
@@ -3205,14 +2827,8 @@ button[disabled]:hover {
3205
2827
  /* #endregion */
3206
2828
  /* #region Borders */
3207
2829
  /* #endregion */
3208
- /* #region Box-shadow */
3209
- /* #endregion */
3210
- /* #region Shadows */
3211
- /* #endregion */
3212
2830
  /* #region Z-index */
3213
2831
  /* #endregion */
3214
- /* #region Transition */
3215
- /* #endregion */
3216
2832
  /* #region Timing functions */
3217
2833
  /* #endregion */
3218
2834
  /* #region Focus ring */
@@ -3272,14 +2888,8 @@ button[disabled]:hover {
3272
2888
  /* #endregion */
3273
2889
  /* #region Borders */
3274
2890
  /* #endregion */
3275
- /* #region Box-shadow */
3276
- /* #endregion */
3277
- /* #region Shadows */
3278
- /* #endregion */
3279
2891
  /* #region Z-index */
3280
2892
  /* #endregion */
3281
- /* #region Transition */
3282
- /* #endregion */
3283
2893
  /* #region Timing functions */
3284
2894
  /* #endregion */
3285
2895
  /* #region Focus ring */
@@ -3332,14 +2942,8 @@ button[disabled]:hover {
3332
2942
  /* #endregion */
3333
2943
  /* #region Borders */
3334
2944
  /* #endregion */
3335
- /* #region Box-shadow */
3336
- /* #endregion */
3337
- /* #region Shadows */
3338
- /* #endregion */
3339
2945
  /* #region Z-index */
3340
2946
  /* #endregion */
3341
- /* #region Transition */
3342
- /* #endregion */
3343
2947
  /* #region Timing functions */
3344
2948
  /* #endregion */
3345
2949
  /* #region Focus ring */
@@ -3465,14 +3069,8 @@ button[disabled]:hover {
3465
3069
  /* #endregion */
3466
3070
  /* #region Borders */
3467
3071
  /* #endregion */
3468
- /* #region Box-shadow */
3469
- /* #endregion */
3470
- /* #region Shadows */
3471
- /* #endregion */
3472
3072
  /* #region Z-index */
3473
3073
  /* #endregion */
3474
- /* #region Transition */
3475
- /* #endregion */
3476
3074
  /* #region Timing functions */
3477
3075
  /* #endregion */
3478
3076
  /* #region Focus ring */
@@ -3502,13 +3100,13 @@ button[disabled]:hover {
3502
3100
  box-shadow: 0 1px 1px rgba(0, 17, 44, 0.12), 0 3px 6px rgba(0, 17, 44, 0.14);
3503
3101
  }
3504
3102
  .adyen-company-lookup-result__alert--error {
3505
- background-color: #fce5e5;
3103
+ background-color: var(--adyen-sdk-color-background-critical-weak, #fef4f4);
3506
3104
  }
3507
3105
  .adyen-company-lookup-result__alert--verified {
3508
- background-color: #e6f8ed;
3106
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
3509
3107
  }
3510
3108
  .adyen-company-lookup-result__alert--warning {
3511
- background-color: #fff4e5;
3109
+ background-color: var(--adyen-sdk-color-background-warning-weak, #fff5e9);
3512
3110
  }
3513
3111
  .adyen-company-lookup-result__icon {
3514
3112
  border-radius: 50%;
@@ -3527,7 +3125,7 @@ button[disabled]:hover {
3527
3125
  font-size: var(--adyen-sdk-text-title-font-size, 16px);
3528
3126
  }
3529
3127
  .adyen-company-lookup-result__icon--verified {
3530
- background-color: #07863a;
3128
+ background-color: var(--adyen-sdk-color-background-success-strong, #07893c);
3531
3129
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
3532
3130
  font-size: var(--adyen-sdk-text-caption-font-size, 12px);
3533
3131
  }
@@ -3589,14 +3187,8 @@ button[disabled]:hover {
3589
3187
  /* #endregion */
3590
3188
  /* #region Borders */
3591
3189
  /* #endregion */
3592
- /* #region Box-shadow */
3593
- /* #endregion */
3594
- /* #region Shadows */
3595
- /* #endregion */
3596
3190
  /* #region Z-index */
3597
3191
  /* #endregion */
3598
- /* #region Transition */
3599
- /* #endregion */
3600
3192
  /* #region Timing functions */
3601
3193
  /* #endregion */
3602
3194
  /* #region Focus ring */
@@ -3673,46 +3265,8 @@ button[disabled]:hover {
3673
3265
  /* #endregion */
3674
3266
  /* #region Borders */
3675
3267
  /* #endregion */
3676
- /* #region Box-shadow */
3677
- /* #endregion */
3678
- /* #region Shadows */
3679
- /* #endregion */
3680
3268
  /* #region Z-index */
3681
3269
  /* #endregion */
3682
- /* #region Transition */
3683
- /* #endregion */
3684
- /* #region Timing functions */
3685
- /* #endregion */
3686
- /* #region Focus ring */
3687
- /* #endregion */
3688
- /* #region Inline components */
3689
- /* #endregion */
3690
- .adyen-kyc-card-group > .adyen-kyc-card + .adyen-kyc-card {
3691
- margin-top: -1px;
3692
- border-top: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3693
- }
3694
- .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):first-of-type {
3695
- border-bottom-left-radius: 0;
3696
- border-bottom-right-radius: 0;
3697
- }
3698
- .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):not(:first-of-type):not(:last-of-type) {
3699
- border-radius: 0;
3700
- }
3701
- .adyen-kyc-card-group > .adyen-kyc-card:not(:only-of-type):last-of-type {
3702
- border-top-left-radius: 0;
3703
- border-top-right-radius: 0;
3704
- }/* #region Colors */
3705
- /* #endregion */
3706
- /* #region Borders */
3707
- /* #endregion */
3708
- /* #region Box-shadow */
3709
- /* #endregion */
3710
- /* #region Shadows */
3711
- /* #endregion */
3712
- /* #region Z-index */
3713
- /* #endregion */
3714
- /* #region Transition */
3715
- /* #endregion */
3716
3270
  /* #region Timing functions */
3717
3271
  /* #endregion */
3718
3272
  /* #region Focus ring */
@@ -3776,7 +3330,7 @@ button[disabled]:hover {
3776
3330
  margin: var(--adyen-sdk-spacer-000, 0px);
3777
3331
  }
3778
3332
  .adyen-kyc-entity-association__more-actions-toggle:hover {
3779
- background: #f3f6f9;
3333
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
3780
3334
  }
3781
3335
  .adyen-kyc-entity-association__remove {
3782
3336
  display: flex;
@@ -3794,14 +3348,8 @@ button[disabled]:hover {
3794
3348
  /* #endregion */
3795
3349
  /* #region Borders */
3796
3350
  /* #endregion */
3797
- /* #region Box-shadow */
3798
- /* #endregion */
3799
- /* #region Shadows */
3800
- /* #endregion */
3801
3351
  /* #region Z-index */
3802
3352
  /* #endregion */
3803
- /* #region Transition */
3804
- /* #endregion */
3805
3353
  /* #region Timing functions */
3806
3354
  /* #endregion */
3807
3355
  /* #region Focus ring */
@@ -3879,110 +3427,8 @@ button[disabled]:hover {
3879
3427
  /* #endregion */
3880
3428
  /* #region Borders */
3881
3429
  /* #endregion */
3882
- /* #region Box-shadow */
3883
- /* #endregion */
3884
- /* #region Shadows */
3885
- /* #endregion */
3886
- /* #region Z-index */
3887
- /* #endregion */
3888
- /* #region Transition */
3889
- /* #endregion */
3890
- /* #region Timing functions */
3891
- /* #endregion */
3892
- /* #region Focus ring */
3893
- /* #endregion */
3894
- /* #region Inline components */
3895
- /* #endregion */
3896
- .adyen-kyc-card {
3897
- color: var(--adyen-sdk-color-label-primary, #00112c);
3898
- font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
3899
- font-size: var(--adyen-sdk-text-body-font-size, 14px);
3900
- font-weight: var(--adyen-sdk-text-body-font-weight, 400);
3901
- line-height: var(--adyen-sdk-text-body-line-height, 20px);
3902
- -webkit-font-smoothing: antialiased;
3903
- -moz-osx-font-smoothing: grayscale;
3904
- background-color: #fff;
3905
- border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3906
- border-radius: var(--adyen-sdk-border-radius-l, 12px);
3907
- display: block;
3908
- outline: none;
3909
- }
3910
- .adyen-kyc-card *,
3911
- .adyen-kyc-card *::before,
3912
- .adyen-kyc-card *::after {
3913
- box-sizing: border-box;
3914
- }
3915
-
3916
- .adyen-kyc-card.adyen-kyc-card--stateful {
3917
- border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
3918
- cursor: pointer;
3919
- transition-duration: 0.2s;
3920
- transition-property: border-color, box-shadow;
3921
- transition-timing-function: ease;
3922
- position: relative;
3923
- z-index: 0;
3924
- }
3925
- .adyen-kyc-card.adyen-kyc-card--stateful:hover {
3926
- border-color: var(--adyen-sdk-color-outline-primary-hover, #c9cdd3);
3927
- z-index: 1;
3928
- }
3929
- .adyen-kyc-card.adyen-kyc-card--stateful:focus, .adyen-kyc-card.adyen-kyc-card--stateful:active {
3930
- box-shadow: 0 0 0 2px #a5afbd;
3931
- z-index: 2;
3932
- }
3933
-
3934
- .adyen-kyc-card.adyen-kyc-card--active {
3935
- border-color: var(--adyen-sdk-color-outline-primary, #dbdee2);
3936
- cursor: pointer;
3937
- transition-duration: 0.2s;
3938
- transition-property: border-color, box-shadow;
3939
- transition-timing-function: ease;
3940
- }
3941
- .adyen-kyc-card.adyen-kyc-card--active, .adyen-kyc-card.adyen-kyc-card--active:active, .adyen-kyc-card.adyen-kyc-card--active:hover {
3942
- border-color: var(--adyen-sdk-color-outline-primary-active, #00112c);
3943
- }
3944
- .adyen-kyc-card.adyen-kyc-card--active:focus, .adyen-kyc-card.adyen-kyc-card--active:active {
3945
- box-shadow: 0 0 0 2px #cce0ff;
3946
- }
3947
-
3948
- .adyen-kyc-card.adyen-kyc-card--disabled {
3949
- background-color: #f3f6f9;
3950
- color: var(--adyen-sdk-color-label-disabled, #8d95a3);
3951
- cursor: not-allowed;
3952
- }
3953
-
3954
- .adyen-kyc-card__header {
3955
- padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
3956
- }
3957
-
3958
- .adyen-kyc-card__body {
3959
- padding: var(--adyen-sdk-spacer-070, 16px);
3960
- }
3961
- .adyen-kyc-card__header + .adyen-kyc-card__body {
3962
- padding-top: var(--adyen-sdk-spacer-000, 0px);
3963
- }
3964
-
3965
- .adyen-kyc-card__footer {
3966
- padding: var(--adyen-sdk-spacer-070, 16px) var(--adyen-sdk-spacer-090, 24px);
3967
- }
3968
- .adyen-kyc-card__body + .adyen-kyc-card__footer {
3969
- margin-top: -var(--adyen-sdk-spacer-070, 16px);
3970
- }
3971
-
3972
- .adyen-kyc-card__warning {
3973
- border-radius: 0 0 var(--adyen-sdk-border-radius-s, 4px) var(--adyen-sdk-border-radius-s, 4px);
3974
- }/* #region Colors */
3975
- /* #endregion */
3976
- /* #region Borders */
3977
- /* #endregion */
3978
- /* #region Box-shadow */
3979
- /* #endregion */
3980
- /* #region Shadows */
3981
- /* #endregion */
3982
3430
  /* #region Z-index */
3983
3431
  /* #endregion */
3984
- /* #region Transition */
3985
- /* #endregion */
3986
3432
  /* #region Timing functions */
3987
3433
  /* #endregion */
3988
3434
  /* #region Focus ring */
@@ -3990,10 +3436,10 @@ button[disabled]:hover {
3990
3436
  /* #region Inline components */
3991
3437
  /* #endregion */
3992
3438
  .adyen-actions-menu {
3993
- background: #fff;
3439
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
3994
3440
  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
3995
3441
  border-radius: var(--adyen-sdk-border-radius-l, 12px);
3996
- box-shadow: 0 8px 8px rgba(0, 17, 44, 0.04), 0 2px 4px rgba(0, 17, 44, 0.08);
3442
+ box-shadow: var(--adyen-sdk-shadow-medium, 0px 6px 12px rgba(0, 17, 44, 0.08), 0px 2px 4px rgba(0, 17, 44, 0.04));
3997
3443
  display: flex;
3998
3444
  flex-direction: column;
3999
3445
  margin-top: var(--adyen-sdk-spacer-040, 8px);
@@ -4013,14 +3459,8 @@ button[disabled]:hover {
4013
3459
  /* #endregion */
4014
3460
  /* #region Borders */
4015
3461
  /* #endregion */
4016
- /* #region Box-shadow */
4017
- /* #endregion */
4018
- /* #region Shadows */
4019
- /* #endregion */
4020
3462
  /* #region Z-index */
4021
3463
  /* #endregion */
4022
- /* #region Transition */
4023
- /* #endregion */
4024
3464
  /* #region Timing functions */
4025
3465
  /* #endregion */
4026
3466
  /* #region Focus ring */
@@ -4062,15 +3502,15 @@ button[disabled]:hover {
4062
3502
  justify-content: center;
4063
3503
  }
4064
3504
  .adyen-kyc-entity-status__icon--obligatory {
4065
- background-color: #dce0e5;
3505
+ background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
4066
3506
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4067
3507
  }
4068
3508
  .adyen-kyc-entity-status__icon--obligatory-success {
4069
- background-color: #0abf53;
3509
+ background-color: var(--adyen-sdk-color-background-success-weak, #edfaf3);
4070
3510
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4071
3511
  }
4072
3512
  .adyen-kyc-entity-status__icon--conditional {
4073
- background-color: #fff;
3513
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
4074
3514
  border: var(--adyen-sdk-border-width-s, 1px) solid var(--adyen-sdk-color-outline-primary, #dbdee2);
4075
3515
  color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
4076
3516
  }
@@ -4121,25 +3561,7 @@ button[disabled]:hover {
4121
3561
  .adyen-kyc-shimmer--small {
4122
3562
  height: 24px;
4123
3563
  width: 40%;
4124
- }/* #region Colors */
4125
- /* #endregion */
4126
- /* #region Borders */
4127
- /* #endregion */
4128
- /* #region Box-shadow */
4129
- /* #endregion */
4130
- /* #region Shadows */
4131
- /* #endregion */
4132
- /* #region Z-index */
4133
- /* #endregion */
4134
- /* #region Transition */
4135
- /* #endregion */
4136
- /* #region Timing functions */
4137
- /* #endregion */
4138
- /* #region Focus ring */
4139
- /* #endregion */
4140
- /* #region Inline components */
4141
- /* #endregion */
4142
- .adyen-kyc-introduction {
3564
+ }.adyen-kyc-introduction {
4143
3565
  display: flex;
4144
3566
  flex-direction: column;
4145
3567
  font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
@@ -4195,14 +3617,8 @@ button[disabled]:hover {
4195
3617
  /* #endregion */
4196
3618
  /* #region Borders */
4197
3619
  /* #endregion */
4198
- /* #region Box-shadow */
4199
- /* #endregion */
4200
- /* #region Shadows */
4201
- /* #endregion */
4202
3620
  /* #region Z-index */
4203
3621
  /* #endregion */
4204
- /* #region Transition */
4205
- /* #endregion */
4206
3622
  /* #region Timing functions */
4207
3623
  /* #endregion */
4208
3624
  /* #region Focus ring */
@@ -4219,13 +3635,13 @@ button[disabled]:hover {
4219
3635
  margin: var(--adyen-sdk-spacer-000, 0px);
4220
3636
  }
4221
3637
  .adyen-kyc-progress__step {
4222
- background-color: #dce0e5;
3638
+ background-color: var(--adyen-sdk-color-background-secondary, #f7f7f8);
4223
3639
  display: flex;
4224
3640
  flex: 1;
4225
3641
  height: 4px;
4226
3642
  }
4227
3643
  .adyen-kyc-progress__step--active {
4228
- background-color: #06f;
3644
+ background-color: var(--adyen-sdk-color-background-highlight-strong, #0070f5);
4229
3645
  }
4230
3646
  .adyen-kyc-progress__step-label {
4231
3647
  border: 0;
@@ -4267,14 +3683,8 @@ button[disabled]:hover {
4267
3683
  /* #endregion */
4268
3684
  /* #region Borders */
4269
3685
  /* #endregion */
4270
- /* #region Box-shadow */
4271
- /* #endregion */
4272
- /* #region Shadows */
4273
- /* #endregion */
4274
3686
  /* #region Z-index */
4275
3687
  /* #endregion */
4276
- /* #region Transition */
4277
- /* #endregion */
4278
3688
  /* #region Timing functions */
4279
3689
  /* #endregion */
4280
3690
  /* #region Focus ring */
@@ -4304,6 +3714,11 @@ button[disabled]:hover {
4304
3714
  display: inline-flex;
4305
3715
  }
4306
3716
 
3717
+ .adyen-task-list__card-icon {
3718
+ padding-top: var(--adyen-sdk-spacer-010, 2px);
3719
+ margin-right: var(--adyen-sdk-spacer-040, 8px);
3720
+ }
3721
+
4307
3722
  .adyen-task-list__nav {
4308
3723
  text-align: right;
4309
3724
  padding: var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-000, 0px) var(--adyen-sdk-spacer-070, 16px);
@@ -4358,29 +3773,12 @@ button[disabled]:hover {
4358
3773
  .adyen-task-list__description {
4359
3774
  display: flex;
4360
3775
  align-items: center;
4361
- }
4362
-
4363
- .adyen-kyc-dropin-container {
4364
- box-sizing: border-box;
4365
- background-color: #fff;
4366
- position: relative;
4367
- padding: var(--adyen-sdk-spacer-100, 32px);
4368
- border-radius: var(--adyen-sdk-border-radius-m, 8px);
4369
- }
4370
- .adyen-layout-xs-only .adyen-kyc-dropin-container {
4371
- padding: var(--adyen-sdk-spacer-040, 8px);
4372
3776
  }/* #region Colors */
4373
3777
  /* #endregion */
4374
3778
  /* #region Borders */
4375
3779
  /* #endregion */
4376
- /* #region Box-shadow */
4377
- /* #endregion */
4378
- /* #region Shadows */
4379
- /* #endregion */
4380
3780
  /* #region Z-index */
4381
3781
  /* #endregion */
4382
- /* #region Transition */
4383
- /* #endregion */
4384
3782
  /* #region Timing functions */
4385
3783
  /* #endregion */
4386
3784
  /* #region Focus ring */
@@ -4424,7 +3822,7 @@ button[disabled]:hover {
4424
3822
  }
4425
3823
  .adyen-task-item__icon-wrapper {
4426
3824
  align-items: center;
4427
- background-color: #20304c;
3825
+ background-color: var(--adyen-sdk-color-label-primary, #00112c);
4428
3826
  border-radius: var(--adyen-sdk-border-radius-m, 8px);
4429
3827
  color: var(--adyen-sdk-color-label-inverse-primary, #ffffff);
4430
3828
  display: flex;
@@ -4472,7 +3870,7 @@ button[disabled]:hover {
4472
3870
  margin: var(--adyen-sdk-spacer-000, 0px);
4473
3871
  }
4474
3872
  .adyen-task-item-extra-actions__more-actions-toggle:hover {
4475
- background: #f3f6f9;
3873
+ background: var(--adyen-sdk-color-background-secondary, #f7f7f8);
4476
3874
  }
4477
3875
  .adyen-task-item-extra-actions__actions {
4478
3876
  position: relative;
@@ -4497,14 +3895,8 @@ button[disabled]:hover {
4497
3895
  /* #endregion */
4498
3896
  /* #region Borders */
4499
3897
  /* #endregion */
4500
- /* #region Box-shadow */
4501
- /* #endregion */
4502
- /* #region Shadows */
4503
- /* #endregion */
4504
3898
  /* #region Z-index */
4505
3899
  /* #endregion */
4506
- /* #region Transition */
4507
- /* #endregion */
4508
3900
  /* #region Timing functions */
4509
3901
  /* #endregion */
4510
3902
  /* #region Focus ring */
@@ -4520,7 +3912,7 @@ button[disabled]:hover {
4520
3912
  -webkit-font-smoothing: antialiased;
4521
3913
  -moz-osx-font-smoothing: grayscale;
4522
3914
  align-items: flex-start;
4523
- background: #fff;
3915
+ background: var(--adyen-sdk-color-background-primary, #ffffff);
4524
3916
  }
4525
3917
  .adyen-task-list-group *,
4526
3918
  .adyen-task-list-group *::before,
@@ -4545,14 +3937,8 @@ button[disabled]:hover {
4545
3937
  /* #endregion */
4546
3938
  /* #region Borders */
4547
3939
  /* #endregion */
4548
- /* #region Box-shadow */
4549
- /* #endregion */
4550
- /* #region Shadows */
4551
- /* #endregion */
4552
3940
  /* #region Z-index */
4553
3941
  /* #endregion */
4554
- /* #region Transition */
4555
- /* #endregion */
4556
3942
  /* #region Timing functions */
4557
3943
  /* #endregion */
4558
3944
  /* #region Focus ring */
@@ -4603,46 +3989,10 @@ button[disabled]:hover {
4603
3989
  }
4604
3990
  .adyen-kyc-trust-members .adyen-kyc-review-alert {
4605
3991
  margin-bottom: var(--adyen-sdk-spacer-090, 24px);
4606
- }/* #region Colors */
4607
- /* #endregion */
4608
- /* #region Borders */
4609
- /* #endregion */
4610
- /* #region Box-shadow */
4611
- /* #endregion */
4612
- /* #region Shadows */
4613
- /* #endregion */
4614
- /* #region Z-index */
4615
- /* #endregion */
4616
- /* #region Transition */
4617
- /* #endregion */
4618
- /* #region Timing functions */
4619
- /* #endregion */
4620
- /* #region Focus ring */
4621
- /* #endregion */
4622
- /* #region Inline components */
4623
- /* #endregion */
4624
- .adyen-contract-viewer .adyen-document-viewer {
3992
+ }.adyen-contract-viewer .adyen-document-viewer {
4625
3993
  --adv-text-font-family: var(--adyen-sdk-text-body-font-family, Inter, Roboto, Oxygen, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
4626
- --adv-background-color: #fff;
4627
- }/* #region Colors */
4628
- /* #endregion */
4629
- /* #region Borders */
4630
- /* #endregion */
4631
- /* #region Box-shadow */
4632
- /* #endregion */
4633
- /* #region Shadows */
4634
- /* #endregion */
4635
- /* #region Z-index */
4636
- /* #endregion */
4637
- /* #region Transition */
4638
- /* #endregion */
4639
- /* #region Timing functions */
4640
- /* #endregion */
4641
- /* #region Focus ring */
4642
- /* #endregion */
4643
- /* #region Inline components */
4644
- /* #endregion */
4645
- .adyen-kyc-signer-card {
3994
+ --adv-background-color: var(--adyen-sdk-color-background-primary, #ffffff);
3995
+ }.adyen-kyc-signer-card {
4646
3996
  display: flex;
4647
3997
  align-items: center;
4648
3998
  justify-content: flex-end;
@@ -4672,14 +4022,8 @@ button[disabled]:hover {
4672
4022
  /* #endregion */
4673
4023
  /* #region Borders */
4674
4024
  /* #endregion */
4675
- /* #region Box-shadow */
4676
- /* #endregion */
4677
- /* #region Shadows */
4678
- /* #endregion */
4679
4025
  /* #region Z-index */
4680
4026
  /* #endregion */
4681
- /* #region Transition */
4682
- /* #endregion */
4683
4027
  /* #region Timing functions */
4684
4028
  /* #endregion */
4685
4029
  /* #region Focus ring */
@@ -4712,1126 +4056,37 @@ button[disabled]:hover {
4712
4056
  .adyen-view-verification-status__button {
4713
4057
  font-size: var(--adyen-sdk-text-body-font-size, 14px);
4714
4058
  line-height: var(--adyen-sdk-text-body-line-height, 20px);
4715
- }.adyen-kyc-u-color-grey-40 {
4716
- color: var(--adyen-sdk-color-label-tertiary, #8d95a3);
4717
- }
4718
-
4719
- .adyen-kyc-u-color-grey-60 {
4720
- color: var(--adyen-sdk-color-label-secondary, #5c687c);
4721
- }
4722
-
4723
- /* #region Colors */
4059
+ }/* #region Colors */
4724
4060
  /* #endregion */
4725
4061
  /* #region Borders */
4726
4062
  /* #endregion */
4727
- /* #region Box-shadow */
4728
- /* #endregion */
4729
- /* #region Shadows */
4730
- /* #endregion */
4731
4063
  /* #region Z-index */
4732
4064
  /* #endregion */
4733
- /* #region Transition */
4734
- /* #endregion */
4735
4065
  /* #region Timing functions */
4736
4066
  /* #endregion */
4737
4067
  /* #region Focus ring */
4738
4068
  /* #endregion */
4739
4069
  /* #region Inline components */
4740
4070
  /* #endregion */
4741
- .adyen-kyc-u-font-weight-semi-bold {
4742
- font-weight: 600 !important;
4743
- }
4744
-
4745
- .adyen-kyc-u-display-none {
4746
- display: none;
4747
- }
4748
-
4749
- .adyen-kyc-u-display-flex {
4750
- display: flex !important;
4751
- }
4752
-
4753
- .adyen-kyc-u-display-inline-flex {
4754
- display: inline-flex !important;
4755
- }
4756
-
4757
- .adyen-kyc-u-flex-direction-row {
4758
- flex-direction: row !important;
4759
- }
4760
-
4761
- .adyen-kyc-u-flex-direction-row-reverse {
4762
- flex-direction: row-reverse !important;
4763
- }
4764
-
4765
- .adyen-kyc-u-flex-direction-column {
4766
- flex-direction: column !important;
4767
- }
4768
-
4769
- .adyen-kyc-u-flex-direction-column-reverse {
4770
- flex-direction: column-reverse !important;
4771
- }
4772
-
4773
- .adyen-kyc-u-flex-wrap-wrap {
4774
- flex-wrap: wrap !important;
4775
- }
4776
-
4777
- .adyen-kyc-u-flex-wrap-nowrap {
4778
- flex-wrap: nowrap !important;
4779
- }
4780
-
4781
- .adyen-kyc-u-align-items-start {
4782
- align-items: start !important;
4783
- }
4784
-
4785
- .adyen-kyc-u-align-items-flex-start {
4786
- align-items: flex-start !important;
4787
- }
4788
-
4789
- .adyen-kyc-u-align-items-flex-end {
4790
- align-items: flex-end !important;
4791
- }
4792
-
4793
- .adyen-kyc-u-align-items-center {
4794
- align-items: center !important;
4795
- }
4796
-
4797
- .adyen-kyc-u-align-items-stretch {
4798
- align-items: stretch !important;
4799
- }
4800
-
4801
- .adyen-kyc-u-align-items-baseline {
4802
- align-items: baseline !important;
4803
- }
4804
-
4805
- .adyen-kyc-u-align-items-end {
4806
- align-items: end !important;
4807
- }
4808
-
4809
- .adyen-kyc-u-justify-content-center {
4810
- justify-content: center !important;
4071
+ .adyen-kyc-ui-element-container-wrapper {
4072
+ width: 100%;
4811
4073
  }
4812
4074
 
4813
- .adyen-kyc-u-justify-content-flex-start {
4814
- justify-content: flex-start !important;
4075
+ .adyen-kyc-ui-element-container {
4076
+ box-sizing: border-box;
4077
+ background-color: var(--adyen-sdk-color-background-primary, #ffffff);
4078
+ position: relative;
4079
+ padding: var(--adyen-sdk-spacer-100, 32px);
4080
+ border-radius: var(--adyen-sdk-border-radius-m, 8px);
4815
4081
  }
4816
-
4817
- .adyen-kyc-u-justify-content-flex-end {
4818
- justify-content: flex-end !important;
4819
- }
4820
-
4821
- .adyen-kyc-u-justify-content-start {
4822
- justify-content: start !important;
4823
- }
4824
-
4825
- .adyen-kyc-u-justify-content-end {
4826
- justify-content: end !important;
4827
- }
4828
-
4829
- .adyen-kyc-u-justify-content-left {
4830
- justify-content: left !important;
4831
- }
4832
-
4833
- .adyen-kyc-u-justify-content-right {
4834
- justify-content: right !important;
4835
- }
4836
-
4837
- .adyen-kyc-u-justify-content-space-between {
4838
- justify-content: space-between !important;
4839
- }
4840
-
4841
- .adyen-kyc-u-justify-content-space-around {
4842
- justify-content: space-around !important;
4843
- }
4844
-
4845
- .adyen-kyc-u-justify-content-space-evenly {
4846
- justify-content: space-evenly !important;
4847
- }
4848
-
4849
- .adyen-kyc-u-justify-content-stretch {
4850
- justify-content: stretch !important;
4851
- }
4852
-
4853
- .adyen-kyc-u-flex-1 {
4854
- flex: 1 !important;
4855
- }
4856
-
4857
- .adyen-kyc-u-width-full {
4858
- width: 100% !important;
4859
- }
4860
-
4861
- .adyen-kyc-u-margin-auto {
4862
- margin: auto !important;
4863
- }
4864
-
4865
- .adyen-kyc-u-margin-bottom-auto {
4866
- margin-bottom: auto !important;
4867
- }
4868
-
4869
- .adyen-kyc-u-margin-left-auto {
4870
- margin-left: auto !important;
4871
- }
4872
-
4873
- .adyen-kyc-u-margin-right-auto {
4874
- margin-right: auto !important;
4875
- }
4876
-
4877
- .adyen-kyc-u-margin-top-auto {
4878
- margin-top: auto !important;
4879
- }
4880
-
4881
- .adyen-kyc-u-margin-x-auto {
4882
- margin-left: auto !important;
4883
- margin-right: auto !important;
4884
- }
4885
-
4886
- .adyen-kyc-u-margin-y-auto {
4887
- margin-bottom: auto !important;
4888
- margin-top: auto !important;
4889
- }
4890
-
4891
- .adyen-kyc-u-margin-0 {
4892
- margin: var(--adyen-sdk-spacer-000, 0px) !important;
4893
- }
4894
-
4895
- .adyen-kyc-u-margin-bottom-0 {
4896
- margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
4897
- }
4898
-
4899
- .adyen-kyc-u-margin-left-0 {
4900
- margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
4901
- }
4902
-
4903
- .adyen-kyc-u-margin-right-0 {
4904
- margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
4905
- }
4906
-
4907
- .adyen-kyc-u-margin-top-0 {
4908
- margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
4909
- }
4910
-
4911
- .adyen-kyc-u-margin-x-0 {
4912
- margin-left: var(--adyen-sdk-spacer-000, 0px) !important;
4913
- margin-right: var(--adyen-sdk-spacer-000, 0px) !important;
4914
- }
4915
-
4916
- .adyen-kyc-u-margin-y-0 {
4917
- margin-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
4918
- margin-top: var(--adyen-sdk-spacer-000, 0px) !important;
4919
- }
4920
-
4921
- .adyen-kyc-u-margin-2 {
4922
- margin: var(--adyen-sdk-spacer-010, 2px) !important;
4923
- }
4924
-
4925
- .adyen-kyc-u-margin-bottom-2 {
4926
- margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
4927
- }
4928
-
4929
- .adyen-kyc-u-margin-left-2 {
4930
- margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
4931
- }
4932
-
4933
- .adyen-kyc-u-margin-right-2 {
4934
- margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
4935
- }
4936
-
4937
- .adyen-kyc-u-margin-top-2 {
4938
- margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
4939
- }
4940
-
4941
- .adyen-kyc-u-margin-x-2 {
4942
- margin-left: var(--adyen-sdk-spacer-010, 2px) !important;
4943
- margin-right: var(--adyen-sdk-spacer-010, 2px) !important;
4944
- }
4945
-
4946
- .adyen-kyc-u-margin-y-2 {
4947
- margin-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
4948
- margin-top: var(--adyen-sdk-spacer-010, 2px) !important;
4949
- }
4950
-
4951
- .adyen-kyc-u-margin-4 {
4952
- margin: var(--adyen-sdk-spacer-020, 4px) !important;
4953
- }
4954
-
4955
- .adyen-kyc-u-margin-bottom-4 {
4956
- margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
4957
- }
4958
-
4959
- .adyen-kyc-u-margin-left-4 {
4960
- margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
4961
- }
4962
-
4963
- .adyen-kyc-u-margin-right-4 {
4964
- margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
4965
- }
4966
-
4967
- .adyen-kyc-u-margin-top-4 {
4968
- margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
4969
- }
4970
-
4971
- .adyen-kyc-u-margin-x-4 {
4972
- margin-left: var(--adyen-sdk-spacer-020, 4px) !important;
4973
- margin-right: var(--adyen-sdk-spacer-020, 4px) !important;
4974
- }
4975
-
4976
- .adyen-kyc-u-margin-y-4 {
4977
- margin-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
4978
- margin-top: var(--adyen-sdk-spacer-020, 4px) !important;
4979
- }
4980
-
4981
- .adyen-kyc-u-margin-6 {
4982
- margin: var(--adyen-sdk-spacer-030, 6px) !important;
4983
- }
4984
-
4985
- .adyen-kyc-u-margin-bottom-6 {
4986
- margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
4987
- }
4988
-
4989
- .adyen-kyc-u-margin-left-6 {
4990
- margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
4991
- }
4992
-
4993
- .adyen-kyc-u-margin-right-6 {
4994
- margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
4995
- }
4996
-
4997
- .adyen-kyc-u-margin-top-6 {
4998
- margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
4999
- }
5000
-
5001
- .adyen-kyc-u-margin-x-6 {
5002
- margin-left: var(--adyen-sdk-spacer-030, 6px) !important;
5003
- margin-right: var(--adyen-sdk-spacer-030, 6px) !important;
5004
- }
5005
-
5006
- .adyen-kyc-u-margin-y-6 {
5007
- margin-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
5008
- margin-top: var(--adyen-sdk-spacer-030, 6px) !important;
5009
- }
5010
-
5011
- .adyen-kyc-u-margin-8 {
5012
- margin: var(--adyen-sdk-spacer-040, 8px) !important;
5013
- }
5014
-
5015
- .adyen-kyc-u-margin-bottom-8 {
5016
- margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
5017
- }
5018
-
5019
- .adyen-kyc-u-margin-left-8 {
5020
- margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
5021
- }
5022
-
5023
- .adyen-kyc-u-margin-right-8 {
5024
- margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
5025
- }
5026
-
5027
- .adyen-kyc-u-margin-top-8 {
5028
- margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
5029
- }
5030
-
5031
- .adyen-kyc-u-margin-x-8 {
5032
- margin-left: var(--adyen-sdk-spacer-040, 8px) !important;
5033
- margin-right: var(--adyen-sdk-spacer-040, 8px) !important;
5034
- }
5035
-
5036
- .adyen-kyc-u-margin-y-8 {
5037
- margin-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
5038
- margin-top: var(--adyen-sdk-spacer-040, 8px) !important;
5039
- }
5040
-
5041
- .adyen-kyc-u-margin-10 {
5042
- margin: var(--adyen-sdk-spacer-050, 10px) !important;
5043
- }
5044
-
5045
- .adyen-kyc-u-margin-bottom-10 {
5046
- margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
5047
- }
5048
-
5049
- .adyen-kyc-u-margin-left-10 {
5050
- margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
5051
- }
5052
-
5053
- .adyen-kyc-u-margin-right-10 {
5054
- margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
5055
- }
5056
-
5057
- .adyen-kyc-u-margin-top-10 {
5058
- margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
5059
- }
5060
-
5061
- .adyen-kyc-u-margin-x-10 {
5062
- margin-left: var(--adyen-sdk-spacer-050, 10px) !important;
5063
- margin-right: var(--adyen-sdk-spacer-050, 10px) !important;
5064
- }
5065
-
5066
- .adyen-kyc-u-margin-y-10 {
5067
- margin-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
5068
- margin-top: var(--adyen-sdk-spacer-050, 10px) !important;
5069
- }
5070
-
5071
- .adyen-kyc-u-margin-12 {
5072
- margin: var(--adyen-sdk-spacer-060, 12px) !important;
5073
- }
5074
-
5075
- .adyen-kyc-u-margin-bottom-12 {
5076
- margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
5077
- }
5078
-
5079
- .adyen-kyc-u-margin-left-12 {
5080
- margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
5081
- }
5082
-
5083
- .adyen-kyc-u-margin-right-12 {
5084
- margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
5085
- }
5086
-
5087
- .adyen-kyc-u-margin-top-12 {
5088
- margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
5089
- }
5090
-
5091
- .adyen-kyc-u-margin-x-12 {
5092
- margin-left: var(--adyen-sdk-spacer-060, 12px) !important;
5093
- margin-right: var(--adyen-sdk-spacer-060, 12px) !important;
5094
- }
5095
-
5096
- .adyen-kyc-u-margin-y-12 {
5097
- margin-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
5098
- margin-top: var(--adyen-sdk-spacer-060, 12px) !important;
5099
- }
5100
-
5101
- .adyen-kyc-u-margin-16 {
5102
- margin: var(--adyen-sdk-spacer-070, 16px) !important;
5103
- }
5104
-
5105
- .adyen-kyc-u-margin-bottom-16 {
5106
- margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
5107
- }
5108
-
5109
- .adyen-kyc-u-margin-left-16 {
5110
- margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
5111
- }
5112
-
5113
- .adyen-kyc-u-margin-right-16 {
5114
- margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
5115
- }
5116
-
5117
- .adyen-kyc-u-margin-top-16 {
5118
- margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
5119
- }
5120
-
5121
- .adyen-kyc-u-margin-x-16 {
5122
- margin-left: var(--adyen-sdk-spacer-070, 16px) !important;
5123
- margin-right: var(--adyen-sdk-spacer-070, 16px) !important;
5124
- }
5125
-
5126
- .adyen-kyc-u-margin-y-16 {
5127
- margin-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
5128
- margin-top: var(--adyen-sdk-spacer-070, 16px) !important;
5129
- }
5130
-
5131
- .adyen-kyc-u-margin-20 {
5132
- margin: var(--adyen-sdk-spacer-080, 20px) !important;
5133
- }
5134
-
5135
- .adyen-kyc-u-margin-bottom-20 {
5136
- margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
5137
- }
5138
-
5139
- .adyen-kyc-u-margin-left-20 {
5140
- margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
5141
- }
5142
-
5143
- .adyen-kyc-u-margin-right-20 {
5144
- margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
5145
- }
5146
-
5147
- .adyen-kyc-u-margin-top-20 {
5148
- margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
5149
- }
5150
-
5151
- .adyen-kyc-u-margin-x-20 {
5152
- margin-left: var(--adyen-sdk-spacer-080, 20px) !important;
5153
- margin-right: var(--adyen-sdk-spacer-080, 20px) !important;
5154
- }
5155
-
5156
- .adyen-kyc-u-margin-y-20 {
5157
- margin-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
5158
- margin-top: var(--adyen-sdk-spacer-080, 20px) !important;
5159
- }
5160
-
5161
- .adyen-kyc-u-margin-24 {
5162
- margin: var(--adyen-sdk-spacer-090, 24px) !important;
5163
- }
5164
-
5165
- .adyen-kyc-u-margin-bottom-24 {
5166
- margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
5167
- }
5168
-
5169
- .adyen-kyc-u-margin-left-24 {
5170
- margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
5171
- }
5172
-
5173
- .adyen-kyc-u-margin-right-24 {
5174
- margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
5175
- }
5176
-
5177
- .adyen-kyc-u-margin-top-24 {
5178
- margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
5179
- }
5180
-
5181
- .adyen-kyc-u-margin-x-24 {
5182
- margin-left: var(--adyen-sdk-spacer-090, 24px) !important;
5183
- margin-right: var(--adyen-sdk-spacer-090, 24px) !important;
5184
- }
5185
-
5186
- .adyen-kyc-u-margin-y-24 {
5187
- margin-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
5188
- margin-top: var(--adyen-sdk-spacer-090, 24px) !important;
5189
- }
5190
-
5191
- .adyen-kyc-u-margin-32 {
5192
- margin: var(--adyen-sdk-spacer-100, 32px) !important;
5193
- }
5194
-
5195
- .adyen-kyc-u-margin-bottom-32 {
5196
- margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
5197
- }
5198
-
5199
- .adyen-kyc-u-margin-left-32 {
5200
- margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
5201
- }
5202
-
5203
- .adyen-kyc-u-margin-right-32 {
5204
- margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
5205
- }
5206
-
5207
- .adyen-kyc-u-margin-top-32 {
5208
- margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
5209
- }
5210
-
5211
- .adyen-kyc-u-margin-x-32 {
5212
- margin-left: var(--adyen-sdk-spacer-100, 32px) !important;
5213
- margin-right: var(--adyen-sdk-spacer-100, 32px) !important;
5214
- }
5215
-
5216
- .adyen-kyc-u-margin-y-32 {
5217
- margin-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
5218
- margin-top: var(--adyen-sdk-spacer-100, 32px) !important;
5219
- }
5220
-
5221
- .adyen-kyc-u-margin-40 {
5222
- margin: var(--adyen-sdk-spacer-110, 40px) !important;
5223
- }
5224
-
5225
- .adyen-kyc-u-margin-bottom-40 {
5226
- margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
5227
- }
5228
-
5229
- .adyen-kyc-u-margin-left-40 {
5230
- margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
5231
- }
5232
-
5233
- .adyen-kyc-u-margin-right-40 {
5234
- margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
5235
- }
5236
-
5237
- .adyen-kyc-u-margin-top-40 {
5238
- margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
5239
- }
5240
-
5241
- .adyen-kyc-u-margin-x-40 {
5242
- margin-left: var(--adyen-sdk-spacer-110, 40px) !important;
5243
- margin-right: var(--adyen-sdk-spacer-110, 40px) !important;
5244
- }
5245
-
5246
- .adyen-kyc-u-margin-y-40 {
5247
- margin-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
5248
- margin-top: var(--adyen-sdk-spacer-110, 40px) !important;
5249
- }
5250
-
5251
- .adyen-kyc-u-margin-48 {
5252
- margin: var(--adyen-sdk-spacer-120, 48px) !important;
5253
- }
5254
-
5255
- .adyen-kyc-u-margin-bottom-48 {
5256
- margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
5257
- }
5258
-
5259
- .adyen-kyc-u-margin-left-48 {
5260
- margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
5261
- }
5262
-
5263
- .adyen-kyc-u-margin-right-48 {
5264
- margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
5265
- }
5266
-
5267
- .adyen-kyc-u-margin-top-48 {
5268
- margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
5269
- }
5270
-
5271
- .adyen-kyc-u-margin-x-48 {
5272
- margin-left: var(--adyen-sdk-spacer-120, 48px) !important;
5273
- margin-right: var(--adyen-sdk-spacer-120, 48px) !important;
5274
- }
5275
-
5276
- .adyen-kyc-u-margin-y-48 {
5277
- margin-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
5278
- margin-top: var(--adyen-sdk-spacer-120, 48px) !important;
5279
- }
5280
-
5281
- .adyen-kyc-u-margin-56 {
5282
- margin: var(--adyen-sdk-spacer-130, 56px) !important;
5283
- }
5284
-
5285
- .adyen-kyc-u-margin-bottom-56 {
5286
- margin-bottom: var(--adyen-sdk-spacer-130, 56px) !important;
5287
- }
5288
-
5289
- .adyen-kyc-u-margin-left-56 {
5290
- margin-left: var(--adyen-sdk-spacer-130, 56px) !important;
5291
- }
5292
-
5293
- .adyen-kyc-u-margin-right-56 {
5294
- margin-right: var(--adyen-sdk-spacer-130, 56px) !important;
5295
- }
5296
-
5297
- .adyen-kyc-u-margin-top-56 {
5298
- margin-top: var(--adyen-sdk-spacer-130, 56px) !important;
5299
- }
5300
-
5301
- .adyen-kyc-u-margin-x-56 {
5302
- margin-left: var(--adyen-sdk-spacer-130, 56px) !important;
5303
- margin-right: var(--adyen-sdk-spacer-130, 56px) !important;
5304
- }
5305
-
5306
- .adyen-kyc-u-margin-y-56 {
5307
- margin-bottom: var(--adyen-sdk-spacer-130, 56px) !important;
5308
- margin-top: var(--adyen-sdk-spacer-130, 56px) !important;
5309
- }
5310
-
5311
- .adyen-kyc-u-margin-64 {
5312
- margin: var(--adyen-sdk-spacer-140, 64px) !important;
5313
- }
5314
-
5315
- .adyen-kyc-u-margin-bottom-64 {
5316
- margin-bottom: var(--adyen-sdk-spacer-140, 64px) !important;
5317
- }
5318
-
5319
- .adyen-kyc-u-margin-left-64 {
5320
- margin-left: var(--adyen-sdk-spacer-140, 64px) !important;
5321
- }
5322
-
5323
- .adyen-kyc-u-margin-right-64 {
5324
- margin-right: var(--adyen-sdk-spacer-140, 64px) !important;
5325
- }
5326
-
5327
- .adyen-kyc-u-margin-top-64 {
5328
- margin-top: var(--adyen-sdk-spacer-140, 64px) !important;
5329
- }
5330
-
5331
- .adyen-kyc-u-margin-x-64 {
5332
- margin-left: var(--adyen-sdk-spacer-140, 64px) !important;
5333
- margin-right: var(--adyen-sdk-spacer-140, 64px) !important;
5334
- }
5335
-
5336
- .adyen-kyc-u-margin-y-64 {
5337
- margin-bottom: var(--adyen-sdk-spacer-140, 64px) !important;
5338
- margin-top: var(--adyen-sdk-spacer-140, 64px) !important;
5339
- }
5340
-
5341
- .adyen-kyc-u-padding-auto {
5342
- padding: auto !important;
5343
- }
5344
-
5345
- .adyen-kyc-u-padding-bottom-auto {
5346
- padding-bottom: auto !important;
5347
- }
5348
-
5349
- .adyen-kyc-u-padding-left-auto {
5350
- padding-left: auto !important;
5351
- }
5352
-
5353
- .adyen-kyc-u-padding-right-auto {
5354
- padding-right: auto !important;
5355
- }
5356
-
5357
- .adyen-kyc-u-padding-top-auto {
5358
- padding-top: auto !important;
5359
- }
5360
-
5361
- .adyen-kyc-u-padding-x-auto {
5362
- padding-left: auto !important;
5363
- padding-right: auto !important;
5364
- }
5365
-
5366
- .adyen-kyc-u-padding-y-auto {
5367
- padding-bottom: auto !important;
5368
- padding-top: auto !important;
5369
- }
5370
-
5371
- .adyen-kyc-u-padding-0 {
5372
- padding: var(--adyen-sdk-spacer-000, 0px) !important;
5373
- }
5374
-
5375
- .adyen-kyc-u-padding-bottom-0 {
5376
- padding-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
5377
- }
5378
-
5379
- .adyen-kyc-u-padding-left-0 {
5380
- padding-left: var(--adyen-sdk-spacer-000, 0px) !important;
5381
- }
5382
-
5383
- .adyen-kyc-u-padding-right-0 {
5384
- padding-right: var(--adyen-sdk-spacer-000, 0px) !important;
5385
- }
5386
-
5387
- .adyen-kyc-u-padding-top-0 {
5388
- padding-top: var(--adyen-sdk-spacer-000, 0px) !important;
5389
- }
5390
-
5391
- .adyen-kyc-u-padding-x-0 {
5392
- padding-left: var(--adyen-sdk-spacer-000, 0px) !important;
5393
- padding-right: var(--adyen-sdk-spacer-000, 0px) !important;
5394
- }
5395
-
5396
- .adyen-kyc-u-padding-y-0 {
5397
- padding-bottom: var(--adyen-sdk-spacer-000, 0px) !important;
5398
- padding-top: var(--adyen-sdk-spacer-000, 0px) !important;
5399
- }
5400
-
5401
- .adyen-kyc-u-padding-2 {
5402
- padding: var(--adyen-sdk-spacer-010, 2px) !important;
5403
- }
5404
-
5405
- .adyen-kyc-u-padding-bottom-2 {
5406
- padding-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
5407
- }
5408
-
5409
- .adyen-kyc-u-padding-left-2 {
5410
- padding-left: var(--adyen-sdk-spacer-010, 2px) !important;
5411
- }
5412
-
5413
- .adyen-kyc-u-padding-right-2 {
5414
- padding-right: var(--adyen-sdk-spacer-010, 2px) !important;
5415
- }
5416
-
5417
- .adyen-kyc-u-padding-top-2 {
5418
- padding-top: var(--adyen-sdk-spacer-010, 2px) !important;
5419
- }
5420
-
5421
- .adyen-kyc-u-padding-x-2 {
5422
- padding-left: var(--adyen-sdk-spacer-010, 2px) !important;
5423
- padding-right: var(--adyen-sdk-spacer-010, 2px) !important;
5424
- }
5425
-
5426
- .adyen-kyc-u-padding-y-2 {
5427
- padding-bottom: var(--adyen-sdk-spacer-010, 2px) !important;
5428
- padding-top: var(--adyen-sdk-spacer-010, 2px) !important;
5429
- }
5430
-
5431
- .adyen-kyc-u-padding-4 {
5432
- padding: var(--adyen-sdk-spacer-020, 4px) !important;
5433
- }
5434
-
5435
- .adyen-kyc-u-padding-bottom-4 {
5436
- padding-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
5437
- }
5438
-
5439
- .adyen-kyc-u-padding-left-4 {
5440
- padding-left: var(--adyen-sdk-spacer-020, 4px) !important;
5441
- }
5442
-
5443
- .adyen-kyc-u-padding-right-4 {
5444
- padding-right: var(--adyen-sdk-spacer-020, 4px) !important;
5445
- }
5446
-
5447
- .adyen-kyc-u-padding-top-4 {
5448
- padding-top: var(--adyen-sdk-spacer-020, 4px) !important;
5449
- }
5450
-
5451
- .adyen-kyc-u-padding-x-4 {
5452
- padding-left: var(--adyen-sdk-spacer-020, 4px) !important;
5453
- padding-right: var(--adyen-sdk-spacer-020, 4px) !important;
5454
- }
5455
-
5456
- .adyen-kyc-u-padding-y-4 {
5457
- padding-bottom: var(--adyen-sdk-spacer-020, 4px) !important;
5458
- padding-top: var(--adyen-sdk-spacer-020, 4px) !important;
5459
- }
5460
-
5461
- .adyen-kyc-u-padding-6 {
5462
- padding: var(--adyen-sdk-spacer-030, 6px) !important;
5463
- }
5464
-
5465
- .adyen-kyc-u-padding-bottom-6 {
5466
- padding-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
5467
- }
5468
-
5469
- .adyen-kyc-u-padding-left-6 {
5470
- padding-left: var(--adyen-sdk-spacer-030, 6px) !important;
5471
- }
5472
-
5473
- .adyen-kyc-u-padding-right-6 {
5474
- padding-right: var(--adyen-sdk-spacer-030, 6px) !important;
5475
- }
5476
-
5477
- .adyen-kyc-u-padding-top-6 {
5478
- padding-top: var(--adyen-sdk-spacer-030, 6px) !important;
5479
- }
5480
-
5481
- .adyen-kyc-u-padding-x-6 {
5482
- padding-left: var(--adyen-sdk-spacer-030, 6px) !important;
5483
- padding-right: var(--adyen-sdk-spacer-030, 6px) !important;
5484
- }
5485
-
5486
- .adyen-kyc-u-padding-y-6 {
5487
- padding-bottom: var(--adyen-sdk-spacer-030, 6px) !important;
5488
- padding-top: var(--adyen-sdk-spacer-030, 6px) !important;
5489
- }
5490
-
5491
- .adyen-kyc-u-padding-8 {
5492
- padding: var(--adyen-sdk-spacer-040, 8px) !important;
5493
- }
5494
-
5495
- .adyen-kyc-u-padding-bottom-8 {
5496
- padding-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
5497
- }
5498
-
5499
- .adyen-kyc-u-padding-left-8 {
5500
- padding-left: var(--adyen-sdk-spacer-040, 8px) !important;
5501
- }
5502
-
5503
- .adyen-kyc-u-padding-right-8 {
5504
- padding-right: var(--adyen-sdk-spacer-040, 8px) !important;
5505
- }
5506
-
5507
- .adyen-kyc-u-padding-top-8 {
5508
- padding-top: var(--adyen-sdk-spacer-040, 8px) !important;
5509
- }
5510
-
5511
- .adyen-kyc-u-padding-x-8 {
5512
- padding-left: var(--adyen-sdk-spacer-040, 8px) !important;
5513
- padding-right: var(--adyen-sdk-spacer-040, 8px) !important;
5514
- }
5515
-
5516
- .adyen-kyc-u-padding-y-8 {
5517
- padding-bottom: var(--adyen-sdk-spacer-040, 8px) !important;
5518
- padding-top: var(--adyen-sdk-spacer-040, 8px) !important;
5519
- }
5520
-
5521
- .adyen-kyc-u-padding-10 {
5522
- padding: var(--adyen-sdk-spacer-050, 10px) !important;
5523
- }
5524
-
5525
- .adyen-kyc-u-padding-bottom-10 {
5526
- padding-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
5527
- }
5528
-
5529
- .adyen-kyc-u-padding-left-10 {
5530
- padding-left: var(--adyen-sdk-spacer-050, 10px) !important;
5531
- }
5532
-
5533
- .adyen-kyc-u-padding-right-10 {
5534
- padding-right: var(--adyen-sdk-spacer-050, 10px) !important;
5535
- }
5536
-
5537
- .adyen-kyc-u-padding-top-10 {
5538
- padding-top: var(--adyen-sdk-spacer-050, 10px) !important;
5539
- }
5540
-
5541
- .adyen-kyc-u-padding-x-10 {
5542
- padding-left: var(--adyen-sdk-spacer-050, 10px) !important;
5543
- padding-right: var(--adyen-sdk-spacer-050, 10px) !important;
5544
- }
5545
-
5546
- .adyen-kyc-u-padding-y-10 {
5547
- padding-bottom: var(--adyen-sdk-spacer-050, 10px) !important;
5548
- padding-top: var(--adyen-sdk-spacer-050, 10px) !important;
5549
- }
5550
-
5551
- .adyen-kyc-u-padding-12 {
5552
- padding: var(--adyen-sdk-spacer-060, 12px) !important;
5553
- }
5554
-
5555
- .adyen-kyc-u-padding-bottom-12 {
5556
- padding-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
5557
- }
5558
-
5559
- .adyen-kyc-u-padding-left-12 {
5560
- padding-left: var(--adyen-sdk-spacer-060, 12px) !important;
5561
- }
5562
-
5563
- .adyen-kyc-u-padding-right-12 {
5564
- padding-right: var(--adyen-sdk-spacer-060, 12px) !important;
5565
- }
5566
-
5567
- .adyen-kyc-u-padding-top-12 {
5568
- padding-top: var(--adyen-sdk-spacer-060, 12px) !important;
5569
- }
5570
-
5571
- .adyen-kyc-u-padding-x-12 {
5572
- padding-left: var(--adyen-sdk-spacer-060, 12px) !important;
5573
- padding-right: var(--adyen-sdk-spacer-060, 12px) !important;
5574
- }
5575
-
5576
- .adyen-kyc-u-padding-y-12 {
5577
- padding-bottom: var(--adyen-sdk-spacer-060, 12px) !important;
5578
- padding-top: var(--adyen-sdk-spacer-060, 12px) !important;
5579
- }
5580
-
5581
- .adyen-kyc-u-padding-16 {
5582
- padding: var(--adyen-sdk-spacer-070, 16px) !important;
5583
- }
5584
-
5585
- .adyen-kyc-u-padding-bottom-16 {
5586
- padding-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
5587
- }
5588
-
5589
- .adyen-kyc-u-padding-left-16 {
5590
- padding-left: var(--adyen-sdk-spacer-070, 16px) !important;
5591
- }
5592
-
5593
- .adyen-kyc-u-padding-right-16 {
5594
- padding-right: var(--adyen-sdk-spacer-070, 16px) !important;
5595
- }
5596
-
5597
- .adyen-kyc-u-padding-top-16 {
5598
- padding-top: var(--adyen-sdk-spacer-070, 16px) !important;
5599
- }
5600
-
5601
- .adyen-kyc-u-padding-x-16 {
5602
- padding-left: var(--adyen-sdk-spacer-070, 16px) !important;
5603
- padding-right: var(--adyen-sdk-spacer-070, 16px) !important;
5604
- }
5605
-
5606
- .adyen-kyc-u-padding-y-16 {
5607
- padding-bottom: var(--adyen-sdk-spacer-070, 16px) !important;
5608
- padding-top: var(--adyen-sdk-spacer-070, 16px) !important;
5609
- }
5610
-
5611
- .adyen-kyc-u-padding-20 {
5612
- padding: var(--adyen-sdk-spacer-080, 20px) !important;
5613
- }
5614
-
5615
- .adyen-kyc-u-padding-bottom-20 {
5616
- padding-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
5617
- }
5618
-
5619
- .adyen-kyc-u-padding-left-20 {
5620
- padding-left: var(--adyen-sdk-spacer-080, 20px) !important;
5621
- }
5622
-
5623
- .adyen-kyc-u-padding-right-20 {
5624
- padding-right: var(--adyen-sdk-spacer-080, 20px) !important;
5625
- }
5626
-
5627
- .adyen-kyc-u-padding-top-20 {
5628
- padding-top: var(--adyen-sdk-spacer-080, 20px) !important;
5629
- }
5630
-
5631
- .adyen-kyc-u-padding-x-20 {
5632
- padding-left: var(--adyen-sdk-spacer-080, 20px) !important;
5633
- padding-right: var(--adyen-sdk-spacer-080, 20px) !important;
5634
- }
5635
-
5636
- .adyen-kyc-u-padding-y-20 {
5637
- padding-bottom: var(--adyen-sdk-spacer-080, 20px) !important;
5638
- padding-top: var(--adyen-sdk-spacer-080, 20px) !important;
5639
- }
5640
-
5641
- .adyen-kyc-u-padding-24 {
5642
- padding: var(--adyen-sdk-spacer-090, 24px) !important;
5643
- }
5644
-
5645
- .adyen-kyc-u-padding-bottom-24 {
5646
- padding-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
5647
- }
5648
-
5649
- .adyen-kyc-u-padding-left-24 {
5650
- padding-left: var(--adyen-sdk-spacer-090, 24px) !important;
5651
- }
5652
-
5653
- .adyen-kyc-u-padding-right-24 {
5654
- padding-right: var(--adyen-sdk-spacer-090, 24px) !important;
5655
- }
5656
-
5657
- .adyen-kyc-u-padding-top-24 {
5658
- padding-top: var(--adyen-sdk-spacer-090, 24px) !important;
5659
- }
5660
-
5661
- .adyen-kyc-u-padding-x-24 {
5662
- padding-left: var(--adyen-sdk-spacer-090, 24px) !important;
5663
- padding-right: var(--adyen-sdk-spacer-090, 24px) !important;
5664
- }
5665
-
5666
- .adyen-kyc-u-padding-y-24 {
5667
- padding-bottom: var(--adyen-sdk-spacer-090, 24px) !important;
5668
- padding-top: var(--adyen-sdk-spacer-090, 24px) !important;
5669
- }
5670
-
5671
- .adyen-kyc-u-padding-32 {
5672
- padding: var(--adyen-sdk-spacer-100, 32px) !important;
5673
- }
5674
-
5675
- .adyen-kyc-u-padding-bottom-32 {
5676
- padding-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
5677
- }
5678
-
5679
- .adyen-kyc-u-padding-left-32 {
5680
- padding-left: var(--adyen-sdk-spacer-100, 32px) !important;
5681
- }
5682
-
5683
- .adyen-kyc-u-padding-right-32 {
5684
- padding-right: var(--adyen-sdk-spacer-100, 32px) !important;
5685
- }
5686
-
5687
- .adyen-kyc-u-padding-top-32 {
5688
- padding-top: var(--adyen-sdk-spacer-100, 32px) !important;
5689
- }
5690
-
5691
- .adyen-kyc-u-padding-x-32 {
5692
- padding-left: var(--adyen-sdk-spacer-100, 32px) !important;
5693
- padding-right: var(--adyen-sdk-spacer-100, 32px) !important;
5694
- }
5695
-
5696
- .adyen-kyc-u-padding-y-32 {
5697
- padding-bottom: var(--adyen-sdk-spacer-100, 32px) !important;
5698
- padding-top: var(--adyen-sdk-spacer-100, 32px) !important;
5699
- }
5700
-
5701
- .adyen-kyc-u-padding-40 {
5702
- padding: var(--adyen-sdk-spacer-110, 40px) !important;
5703
- }
5704
-
5705
- .adyen-kyc-u-padding-bottom-40 {
5706
- padding-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
5707
- }
5708
-
5709
- .adyen-kyc-u-padding-left-40 {
5710
- padding-left: var(--adyen-sdk-spacer-110, 40px) !important;
5711
- }
5712
-
5713
- .adyen-kyc-u-padding-right-40 {
5714
- padding-right: var(--adyen-sdk-spacer-110, 40px) !important;
5715
- }
5716
-
5717
- .adyen-kyc-u-padding-top-40 {
5718
- padding-top: var(--adyen-sdk-spacer-110, 40px) !important;
5719
- }
5720
-
5721
- .adyen-kyc-u-padding-x-40 {
5722
- padding-left: var(--adyen-sdk-spacer-110, 40px) !important;
5723
- padding-right: var(--adyen-sdk-spacer-110, 40px) !important;
5724
- }
5725
-
5726
- .adyen-kyc-u-padding-y-40 {
5727
- padding-bottom: var(--adyen-sdk-spacer-110, 40px) !important;
5728
- padding-top: var(--adyen-sdk-spacer-110, 40px) !important;
5729
- }
5730
-
5731
- .adyen-kyc-u-padding-48 {
5732
- padding: var(--adyen-sdk-spacer-120, 48px) !important;
5733
- }
5734
-
5735
- .adyen-kyc-u-padding-bottom-48 {
5736
- padding-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
5737
- }
5738
-
5739
- .adyen-kyc-u-padding-left-48 {
5740
- padding-left: var(--adyen-sdk-spacer-120, 48px) !important;
5741
- }
5742
-
5743
- .adyen-kyc-u-padding-right-48 {
5744
- padding-right: var(--adyen-sdk-spacer-120, 48px) !important;
5745
- }
5746
-
5747
- .adyen-kyc-u-padding-top-48 {
5748
- padding-top: var(--adyen-sdk-spacer-120, 48px) !important;
5749
- }
5750
-
5751
- .adyen-kyc-u-padding-x-48 {
5752
- padding-left: var(--adyen-sdk-spacer-120, 48px) !important;
5753
- padding-right: var(--adyen-sdk-spacer-120, 48px) !important;
5754
- }
5755
-
5756
- .adyen-kyc-u-padding-y-48 {
5757
- padding-bottom: var(--adyen-sdk-spacer-120, 48px) !important;
5758
- padding-top: var(--adyen-sdk-spacer-120, 48px) !important;
5759
- }
5760
-
5761
- .adyen-kyc-u-padding-56 {
5762
- padding: var(--adyen-sdk-spacer-130, 56px) !important;
5763
- }
5764
-
5765
- .adyen-kyc-u-padding-bottom-56 {
5766
- padding-bottom: var(--adyen-sdk-spacer-130, 56px) !important;
5767
- }
5768
-
5769
- .adyen-kyc-u-padding-left-56 {
5770
- padding-left: var(--adyen-sdk-spacer-130, 56px) !important;
5771
- }
5772
-
5773
- .adyen-kyc-u-padding-right-56 {
5774
- padding-right: var(--adyen-sdk-spacer-130, 56px) !important;
5775
- }
5776
-
5777
- .adyen-kyc-u-padding-top-56 {
5778
- padding-top: var(--adyen-sdk-spacer-130, 56px) !important;
5779
- }
5780
-
5781
- .adyen-kyc-u-padding-x-56 {
5782
- padding-left: var(--adyen-sdk-spacer-130, 56px) !important;
5783
- padding-right: var(--adyen-sdk-spacer-130, 56px) !important;
5784
- }
5785
-
5786
- .adyen-kyc-u-padding-y-56 {
5787
- padding-bottom: var(--adyen-sdk-spacer-130, 56px) !important;
5788
- padding-top: var(--adyen-sdk-spacer-130, 56px) !important;
5789
- }
5790
-
5791
- .adyen-kyc-u-padding-64 {
5792
- padding: var(--adyen-sdk-spacer-140, 64px) !important;
5793
- }
5794
-
5795
- .adyen-kyc-u-padding-bottom-64 {
5796
- padding-bottom: var(--adyen-sdk-spacer-140, 64px) !important;
5797
- }
5798
-
5799
- .adyen-kyc-u-padding-left-64 {
5800
- padding-left: var(--adyen-sdk-spacer-140, 64px) !important;
5801
- }
5802
-
5803
- .adyen-kyc-u-padding-right-64 {
5804
- padding-right: var(--adyen-sdk-spacer-140, 64px) !important;
5805
- }
5806
-
5807
- .adyen-kyc-u-padding-top-64 {
5808
- padding-top: var(--adyen-sdk-spacer-140, 64px) !important;
5809
- }
5810
-
5811
- .adyen-kyc-u-padding-x-64 {
5812
- padding-left: var(--adyen-sdk-spacer-140, 64px) !important;
5813
- padding-right: var(--adyen-sdk-spacer-140, 64px) !important;
5814
- }
5815
-
5816
- .adyen-kyc-u-padding-y-64 {
5817
- padding-bottom: var(--adyen-sdk-spacer-140, 64px) !important;
5818
- padding-top: var(--adyen-sdk-spacer-140, 64px) !important;
5819
- }
5820
-
5821
- .adyen-kyc-u-box-sizing-border-box {
5822
- box-sizing: border-box !important;
4082
+ .adyen-layout-xs-only .adyen-kyc-ui-element-container {
4083
+ padding: var(--adyen-sdk-spacer-040, 8px);
5823
4084
  }/* #region Colors */
5824
4085
  /* #endregion */
5825
4086
  /* #region Borders */
5826
4087
  /* #endregion */
5827
- /* #region Box-shadow */
5828
- /* #endregion */
5829
- /* #region Shadows */
5830
- /* #endregion */
5831
4088
  /* #region Z-index */
5832
4089
  /* #endregion */
5833
- /* #region Transition */
5834
- /* #endregion */
5835
4090
  /* #region Timing functions */
5836
4091
  /* #endregion */
5837
4092
  /* #region Focus ring */