@incodetech/web 0.0.0-dev-20260930-413fa2cd → 0.0.0-dev-20260930-24018c33

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 (57) hide show
  1. package/dist/antifraud/styles.css +0 -1
  2. package/dist/base.css +1 -7417
  3. package/dist/certificate-issuance/styles.css +1 -72
  4. package/dist/certificate-issuance/styles.css.js +1 -1
  5. package/dist/consent/styles.css +1 -129
  6. package/dist/consent/styles.css.js +1 -1
  7. package/dist/curp-validation/styles.css +1 -128
  8. package/dist/curp-validation/styles.css.js +1 -1
  9. package/dist/custom-fields/styles.css +1 -21
  10. package/dist/custom-fields/styles.css.js +1 -1
  11. package/dist/document-capture/styles.css +1 -378
  12. package/dist/document-capture/styles.css.js +1 -1
  13. package/dist/dynamic-forms/styles.css +1 -104
  14. package/dist/dynamic-forms/styles.css.js +1 -1
  15. package/dist/ekyb/styles.css +1 -113
  16. package/dist/ekyb/styles.css.js +1 -1
  17. package/dist/ekyc/styles.css +1 -108
  18. package/dist/ekyc/styles.css.js +1 -1
  19. package/dist/electronic-signature/styles.css +1 -407
  20. package/dist/electronic-signature/styles.css.js +1 -1
  21. package/dist/email/styles.css +1 -11
  22. package/dist/email/styles.css.js +1 -1
  23. package/dist/face-match/styles.css +1 -535
  24. package/dist/face-match/styles.css.js +1 -1
  25. package/dist/field-comparison/styles.css +1 -27
  26. package/dist/field-comparison/styles.css.js +1 -1
  27. package/dist/fiscal-qr/styles.css +1 -82
  28. package/dist/fiscal-qr/styles.css.js +1 -1
  29. package/dist/flow/shell/styles.css +1 -401
  30. package/dist/flow/shell/styles.css.js +1 -1
  31. package/dist/flow/styles.css +1 -5487
  32. package/dist/geolocation/styles.css +1 -165
  33. package/dist/geolocation/styles.css.js +1 -1
  34. package/dist/government-validation/styles.css +1 -4
  35. package/dist/government-validation/styles.css.js +1 -1
  36. package/dist/id/styles.css +1 -1640
  37. package/dist/id/styles.css.js +1 -1
  38. package/dist/id-ocr/styles.css +1 -55
  39. package/dist/id-ocr/styles.css.js +1 -1
  40. package/dist/id-selfie-flow/styles.css +1 -806
  41. package/dist/identity-reuse/styles.css +1 -258
  42. package/dist/phone/styles.css +1 -10
  43. package/dist/phone/styles.css.js +1 -1
  44. package/dist/redirect-to-mobile/styles.css +1 -323
  45. package/dist/redirect-to-mobile/styles.css.js +1 -1
  46. package/dist/selfie/styles.css +1 -316
  47. package/dist/selfie/styles.css.js +1 -1
  48. package/dist/signature/styles.css +1 -116
  49. package/dist/signature/styles.css.js +1 -1
  50. package/dist/themes/dark.css +1 -1565
  51. package/dist/themes/light.css +1 -1441
  52. package/dist/video-selfie/styles.css +1 -890
  53. package/dist/video-selfie/styles.css.js +1 -1
  54. package/dist/watchlist-for-business/styles.css +1 -17
  55. package/dist/watchlist-for-business/styles.css.js +1 -1
  56. package/dist/workflow/styles.css +1 -5042
  57. package/package.json +3 -2
@@ -1,807 +1,2 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
- @layer properties {
3
- @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
4
- .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
5
- --tw-border-style: solid;
6
- --tw-translate-x: 0;
7
- --tw-translate-y: 0;
8
- --tw-translate-z: 0;
9
- --tw-rotate-x: initial;
10
- --tw-rotate-y: initial;
11
- --tw-rotate-z: initial;
12
- --tw-skew-x: initial;
13
- --tw-skew-y: initial;
14
- }
15
- }
16
- }
17
-
18
- @layer incode-theme, incode-utilities, incode-base, incode-components;
19
-
20
- @keyframes slideUp {
21
- from {
22
- transform: translateY(100%);
23
- }
24
-
25
- to {
26
- transform: translateY(0);
27
- }
28
- }
29
-
30
- @keyframes fadeIn {
31
- from {
32
- opacity: 0;
33
- }
34
-
35
- to {
36
- opacity: 1;
37
- }
38
- }
39
-
40
- @keyframes incodeToastFadeInOut {
41
- 0% {
42
- opacity: 0;
43
- transform: translate(-50%, -20px);
44
- }
45
-
46
- 15% {
47
- opacity: 1;
48
- transform: translate(-50%);
49
- }
50
-
51
- 85% {
52
- opacity: 1;
53
- transform: translate(-50%);
54
- }
55
-
56
- 100% {
57
- opacity: 0;
58
- transform: translate(-50%, -20px);
59
- }
60
- }
61
-
62
- .IncodeCaptureContainer {
63
- flex-direction: column;
64
- flex: 1;
65
- justify-content: flex-start;
66
- align-items: center;
67
- width: 100%;
68
- height: 100%;
69
- display: flex;
70
- position: relative;
71
- overflow: hidden;
72
- }
73
-
74
- .IncodeCaptureContainer .IncodeCaptureFrame {
75
- aspect-ratio: 1;
76
- width: 100%;
77
- max-width: var(--face-capture-frame-max-w);
78
- border-radius: var(--radius-full, var(--border-radius-full));
79
- border-style: var(--tw-border-style);
80
- border-width: 12px;
81
- border-color: #0000;
82
- position: relative;
83
- }
84
-
85
- .IncodeCaptureContainer .IncodeCaptureVideoWrapper {
86
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
87
- --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
88
- width: calc(100% - 24px);
89
- height: calc(100% - 24px);
90
- translate: var(--tw-translate-x) var(--tw-translate-y);
91
- transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
92
- border-radius: var(--radius-full, var(--border-radius-full));
93
- background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));
94
- justify-content: center;
95
- align-items: center;
96
- display: flex;
97
- position: absolute;
98
- top: 50%;
99
- left: 50%;
100
- overflow: hidden;
101
- }
102
-
103
- .IncodeCaptureContainer .IncodeCaptureVideo {
104
- z-index: 50;
105
- width: 100%;
106
- height: 100%;
107
- position: absolute;
108
- }
109
-
110
- .IncodeCaptureContainer .IncodeCaptureVideoElement {
111
- inset: var(--spacing-0, var(--spacing-none, 0px));
112
- object-fit: cover;
113
- width: 100%;
114
- height: 100%;
115
- position: absolute;
116
- }
117
-
118
- .IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {
119
- opacity: 0;
120
- }
121
-
122
- .IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
123
- transform: scaleX(-1);
124
- }
125
-
126
- .IncodeCaptureContainer .IncodeCaptureAvatarHost {
127
- width: 100%;
128
- height: 100%;
129
- position: absolute;
130
- }
131
-
132
- .IncodeCaptureContainer .IncodeCaptureAvatarElement {
133
- inset: var(--spacing-0, var(--spacing-none, 0px));
134
- object-fit: cover;
135
- width: 100%;
136
- height: 100%;
137
- position: absolute;
138
- }
139
-
140
- .IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {
141
- opacity: 0;
142
- }
143
-
144
- .IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {
145
- transform: scaleX(-1);
146
- }
147
-
148
- .IncodeCaptureVisuallyHidden {
149
- clip-path: inset(50%);
150
- white-space: nowrap;
151
- border-width: 0;
152
- width: 1px;
153
- height: 1px;
154
- margin: -1px;
155
- padding: 0;
156
- position: absolute;
157
- overflow: hidden;
158
- }
159
-
160
- .IncodeFaceOutline {
161
- width: 100%;
162
- height: 100%;
163
- }
164
-
165
- .IncodeLoadingBorder {
166
- aspect-ratio: 1;
167
- width: 100%;
168
- max-width: var(--face-capture-frame-max-w);
169
- position: absolute;
170
- }
171
-
172
- .IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {
173
- inset: var(--spacing-0, var(--spacing-none, 0px));
174
- position: absolute;
175
- }
176
-
177
- .IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {
178
- animation: var(--animate-spin, spin 1s linear infinite);
179
- }
180
-
181
- .IncodeLoadingBorder .IncodeLoadingBorderPath {
182
- transition: all 1s ease-in-out;
183
- }
184
-
185
- .IncodeNotification {
186
- flex-direction: column;
187
- align-items: center;
188
- display: flex;
189
- }
190
-
191
- .IncodeNotification .IncodeNotificationText {
192
- text-align: center;
193
- font-family: var(--typography-feedback-family);
194
- font-size: var(--typography-feedback-l-size);
195
- font-weight: var(--typography-feedback-l-weight);
196
- line-height: var(--typography-feedback-l-line-height);
197
- letter-spacing: var(--typography-feedback-l-letter-spacing);
198
- color: var(--color-text-body-primary, var(--text-body-800-primary));
199
- }
200
-
201
- .IncodeIdCaptureNotification {
202
- right: var(--spacing-24, var(--spacing-24, 24px));
203
- left: var(--spacing-24, var(--spacing-24, 24px));
204
- z-index: 100;
205
- max-width: var(--incode-form-max-w);
206
- padding-bottom: var(--spacing-32, var(--spacing-32, 32px));
207
- top: var(--incode-overlay-top-inset, var(--spacing-24));
208
- align-items: flex-end;
209
- margin: auto;
210
- display: flex;
211
- position: absolute;
212
- }
213
-
214
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {
215
- z-index: 100;
216
- border-radius: var(--radius-large, var(--border-radius-large));
217
- border-style: var(--tw-border-style);
218
- border-width: 2px;
219
- border-color: var(--color-border-neutral-300, var(--border-neutral-300));
220
- background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));
221
- width: 100%;
222
- padding-inline: var(--spacing-20, var(--spacing-20, 20px));
223
- box-shadow: var(--id-capture-notification-content-shadow);
224
- display: flex;
225
- overflow: hidden;
226
- }
227
-
228
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal {
229
- justify-content: center;
230
- }
231
-
232
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {
233
- justify-content: center;
234
- gap: var(--spacing-8, var(--spacing-8, 8px));
235
- padding-top: var(--spacing-16, var(--spacing-16, 16px));
236
- padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
237
- text-align: center;
238
- color: var(--color-text-body-0-static, var(--text-body-0-static));
239
- flex-direction: column;
240
- display: flex;
241
- }
242
-
243
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {
244
- font-family: var(--typography-headline-family);
245
- font-size: var(--typography-headline-h3-size);
246
- font-weight: var(--typography-headline-h3-weight);
247
- line-height: var(--typography-headline-h3-line-height);
248
- letter-spacing: var(--typography-headline-h3-letter-spacing);
249
- }
250
-
251
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {
252
- font-family: var(--typography-headline-family);
253
- font-size: var(--typography-headline-h5-size);
254
- font-weight: var(--typography-headline-h5-weight);
255
- line-height: var(--typography-headline-h5-line-height);
256
- letter-spacing: var(--typography-headline-h5-letter-spacing);
257
- color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));
258
- }
259
-
260
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText {
261
- gap: var(--spacing-4, var(--spacing-4, 4px));
262
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
263
- }
264
-
265
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {
266
- font-family: var(--typography-headline-family);
267
- font-size: var(--typography-headline-h5-size);
268
- font-weight: var(--typography-headline-h5-weight);
269
- line-height: var(--typography-headline-h5-line-height);
270
- letter-spacing: var(--typography-headline-h5-letter-spacing);
271
- }
272
-
273
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {
274
- font-family: var(--typography-body-family);
275
- font-size: var(--typography-body-m-regular-size);
276
- font-weight: var(--typography-body-m-regular-weight);
277
- line-height: var(--typography-body-m-regular-line-height);
278
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
279
- }
280
-
281
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {
282
- height: var(--id-capture-notification-animation-height);
283
- justify-content: center;
284
- align-items: center;
285
- width: auto;
286
- display: flex;
287
- }
288
-
289
- .IncodeIdManualCaptureButton {
290
- bottom: var(--spacing-24, var(--spacing-24, 24px));
291
- z-index: 100;
292
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
293
- width: 100%;
294
- translate: var(--tw-translate-x) var(--tw-translate-y);
295
- justify-content: center;
296
- align-items: center;
297
- gap: var(--spacing-4, var(--spacing-4, 4px));
298
- flex-direction: column;
299
- animation: .5s ease-out forwards slideUp;
300
- display: flex;
301
- position: absolute;
302
- left: 50%;
303
- }
304
-
305
- .IncodeIdManualCaptureButton .IncodeButtonLink {
306
- height: 100%;
307
- padding: var(--spacing-0, var(--spacing-none, 0px));
308
- color: var(--color-text-body-primary, var(--text-body-800-primary));
309
- }
310
-
311
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {
312
- border-radius: var(--radius-medium, var(--border-radius-medium));
313
- background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
314
- padding: var(--spacing-16, var(--spacing-16, 16px));
315
- }
316
-
317
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {
318
- margin: var(--spacing-0, var(--spacing-none, 0px));
319
- padding: var(--spacing-0, var(--spacing-none, 0px));
320
- flex-direction: column;
321
- align-items: center;
322
- list-style-type: none;
323
- display: flex;
324
- }
325
-
326
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {
327
- margin: var(--spacing-0, var(--spacing-none, 0px));
328
- font-family: var(--typography-tooltip-family);
329
- font-size: var(--typography-tooltip-m-size);
330
- font-weight: var(--typography-tooltip-m-weight);
331
- line-height: var(--typography-tooltip-m-line-height);
332
- letter-spacing: var(--typography-tooltip-m-letter-spacing);
333
- text-wrap: nowrap;
334
- color: var(--color-text-body-0-static, var(--text-body-0-static));
335
- }
336
-
337
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {
338
- transition: filter .2s, transform .2s;
339
- }
340
-
341
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {
342
- filter: brightness(.8);
343
- transform: scale(.95);
344
- }
345
-
346
- .IncodeSelfieManualCapture {
347
- max-width: var(--manual-face-capture-max-w);
348
- flex-direction: column;
349
- align-items: center;
350
- display: flex;
351
- }
352
-
353
- .IncodeSelfieManualCaptureText {
354
- text-align: center;
355
- font-family: var(--typography-headline-family);
356
- font-size: var(--typography-headline-h5-size);
357
- font-weight: var(--typography-headline-h5-weight);
358
- line-height: var(--typography-headline-h5-line-height);
359
- letter-spacing: var(--typography-headline-h5-letter-spacing);
360
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
361
- }
362
-
363
- .IncodeSelfieManualCaptureButton {
364
- padding: var(--spacing-0, var(--spacing-none, 0px));
365
- color: var(--color-text-body-primary, var(--text-body-800-primary));
366
- }
367
-
368
- .IncodeVideoSelfieCapturePage {
369
- background-color: var(--capture-page-backdrop-color);
370
- }
371
-
372
- .IncodeVideoSelfieCapturePage .IncodePageInner {
373
- padding: var(--spacing-0, var(--spacing-none, 0px));
374
- max-height: none;
375
- }
376
-
377
- .IncodeVideoSelfieCapturePage .IncodePageContent {
378
- flex: 1;
379
- position: relative;
380
- }
381
-
382
- .IncodeVideoSelfieOverlay {
383
- pointer-events: none;
384
- inset: var(--spacing-0, var(--spacing-none, 0px));
385
- z-index: 10;
386
- flex-direction: column;
387
- align-items: center;
388
- display: flex;
389
- position: absolute;
390
- container-type: inline-size;
391
- }
392
-
393
- .IncodeVideoSelfieTutorialPage .IncodePageContent {
394
- min-height: var(--spacing-0, var(--spacing-none, 0px));
395
- }
396
-
397
- .IncodeVideoSelfieTutorialBody {
398
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
399
- min-height: var(--spacing-0, var(--spacing-none, 0px));
400
- flex: 1;
401
- overflow-y: auto;
402
- }
403
-
404
- .IncodeVideoSelfieTutorialSteps {
405
- width: 100%;
406
- max-width: var(--incode-form-max-w);
407
- gap: var(--spacing-8, var(--spacing-8, 8px));
408
- flex-direction: column;
409
- margin-inline: auto;
410
- display: flex;
411
- }
412
-
413
- .IncodeVideoSelfieTutorialStep {
414
- align-items: center;
415
- gap: var(--spacing-12, var(--spacing-12, 12px));
416
- display: flex;
417
- }
418
-
419
- .IncodeVideoSelfieTutorialStepIcon {
420
- width: var(--spacing-40, var(--spacing-40, 40px));
421
- height: var(--spacing-40, var(--spacing-40, 40px));
422
- border-radius: var(--radius-small, var(--border-radius-small));
423
- border-style: var(--tw-border-style);
424
- border-width: 2px;
425
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
426
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
427
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
428
- flex-shrink: 0;
429
- justify-content: center;
430
- align-items: center;
431
- display: flex;
432
- position: relative;
433
- }
434
-
435
- .IncodeVideoSelfieTutorialStepIcon svg {
436
- height: var(--spacing-24, var(--spacing-24, 24px));
437
- width: var(--spacing-24, var(--spacing-24, 24px));
438
- }
439
-
440
- .IncodeVideoSelfieTutorialStep:not(:last-child) .IncodeVideoSelfieTutorialStepIcon:after {
441
- content: "";
442
- height: var(--spacing-8, var(--spacing-8, 8px));
443
- width: var(--spacing-2, var(--spacing-2, 2px));
444
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
445
- translate: var(--tw-translate-x) var(--tw-translate-y);
446
- background-color: var(--color-border-neutral-100, var(--border-neutral-100));
447
- position: absolute;
448
- top: 100%;
449
- left: 50%;
450
- }
451
-
452
- .IncodeVideoSelfieTutorialStepLabel {
453
- text-align: left;
454
- font-family: var(--typography-headline-family);
455
- font-size: var(--typography-headline-h4-size);
456
- font-weight: var(--typography-headline-h4-weight);
457
- line-height: var(--typography-headline-h4-line-height);
458
- letter-spacing: var(--typography-headline-h4-letter-spacing);
459
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
460
- }
461
-
462
- .IncodeVideoSelfieTutorialActions {
463
- bottom: var(--spacing-0, var(--spacing-none, 0px));
464
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
465
- width: 100%;
466
- padding-top: var(--spacing-24, var(--spacing-24, 24px));
467
- padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
468
- flex-shrink: 0;
469
- display: flex;
470
- position: sticky;
471
- }
472
-
473
- .IncodeVideoSelfieTutorialStartButton {
474
- max-width: var(--incode-form-max-w);
475
- margin: auto;
476
- }
477
-
478
- .IncodeVideoSelfieSwitchingCameraPage {
479
- background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));
480
- }
481
-
482
- .IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {
483
- padding: var(--spacing-0, var(--spacing-none, 0px));
484
- }
485
-
486
- .IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {
487
- flex: 1;
488
- position: relative;
489
- }
490
-
491
- .IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {
492
- width: 100%;
493
- height: 100%;
494
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
495
- flex-direction: column;
496
- justify-content: center;
497
- align-items: center;
498
- display: flex;
499
- position: relative;
500
- }
501
-
502
- .IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {
503
- align-items: center;
504
- gap: var(--spacing-16, var(--spacing-16, 16px));
505
- text-align: center;
506
- flex-direction: column;
507
- display: flex;
508
- }
509
-
510
- .IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {
511
- width: var(--spacing-40, var(--spacing-40, 40px));
512
- height: var(--spacing-40, var(--spacing-40, 40px));
513
- }
514
-
515
- .IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {
516
- font-family: var(--typography-headline-family);
517
- font-size: var(--typography-headline-h2-size);
518
- font-weight: var(--typography-headline-h2-weight);
519
- line-height: var(--typography-headline-h2-line-height);
520
- letter-spacing: var(--typography-headline-h2-letter-spacing);
521
- color: var(--color-text-body-0-static, var(--text-body-0-static));
522
- }
523
-
524
- .IncodeVsStepsHeader {
525
- inset-inline: var(--spacing-0, var(--spacing-none, 0px));
526
- top: var(--spacing-0, var(--spacing-none, 0px));
527
- gap: var(--spacing-2, var(--spacing-2, 2px));
528
- width: 100%;
529
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
530
- padding-top: var(--spacing-24, var(--spacing-24, 24px));
531
- color: var(--color-text-body-0-static, var(--text-body-0-static));
532
- z-index: var(--video-selfie-chrome-z-index);
533
- background-color: #0000;
534
- list-style-type: none;
535
- display: flex;
536
- position: absolute;
537
- }
538
-
539
- .IncodeVsStepsHeader .IncodeVsStepsHeaderStep {
540
- align-items: center;
541
- gap: var(--spacing-8, var(--spacing-8, 8px));
542
- width: 100%;
543
- height: var(--video-selfie-stepper-height);
544
- flex-direction: column;
545
- flex: 1;
546
- display: flex;
547
- position: relative;
548
- }
549
-
550
- .IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {
551
- width: var(--spacing-32, var(--spacing-32, 32px));
552
- height: var(--spacing-32, var(--spacing-32, 32px));
553
- }
554
-
555
- .IncodeVsStepsHeader .IncodeVsStepsHeaderPill {
556
- border-radius: var(--radius-full, var(--border-radius-full));
557
- background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
558
- width: 100%;
559
- height: var(--video-selfie-stepper-pill-height);
560
- opacity: .25;
561
- transition: opacity .3s ease-in-out;
562
- }
563
-
564
- .IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {
565
- opacity: .5;
566
- }
567
-
568
- .IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {
569
- opacity: 1;
570
- }
571
-
572
- .IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {
573
- background-color: var(--border-status-positive-static);
574
- opacity: 1;
575
- }
576
-
577
- .IncodeVsSelfieManualCapture {
578
- pointer-events: auto;
579
- }
580
-
581
- .IncodeVideoSelfieOverlay .IncodeVsSelfieMask {
582
- border-radius: var(--radius-full, var(--border-radius-full));
583
- z-index: var(--video-selfie-mask-z-index);
584
- width: 86cqw;
585
- height: 86cqw;
586
- box-shadow: var(--video-selfie-mask-vignette-shadow);
587
- position: absolute;
588
- top: calc(50% - 7cqw);
589
- left: 50%;
590
- transform: translate(-50%, -50%);
591
- }
592
-
593
- .IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {
594
- inset: var(--spacing-0, var(--spacing-none, 0px));
595
- width: 100%;
596
- height: 100%;
597
- position: absolute;
598
- overflow: visible;
599
- }
600
-
601
- .IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {
602
- inset-inline: var(--spacing-0, var(--spacing-none, 0px));
603
- align-items: center;
604
- gap: var(--spacing-16, var(--spacing-16, 16px));
605
- text-align: center;
606
- width: 100%;
607
- z-index: var(--video-selfie-chrome-z-index);
608
- max-width: var(--video-selfie-feedback-max-width);
609
- flex-direction: column;
610
- margin-inline: auto;
611
- display: flex;
612
- position: absolute;
613
- top: calc(50% + 36cqw + 40px);
614
- }
615
-
616
- .IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {
617
- width: var(--spacing-32, var(--spacing-32, 32px));
618
- height: var(--spacing-32, var(--spacing-32, 32px));
619
- }
620
-
621
- .IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {
622
- margin: var(--spacing-0, var(--spacing-none, 0px));
623
- font-family: var(--typography-headline-family);
624
- font-size: var(--typography-headline-h2-size);
625
- font-weight: var(--typography-headline-h2-weight);
626
- line-height: var(--typography-headline-h2-line-height);
627
- letter-spacing: var(--typography-headline-h2-letter-spacing);
628
- color: var(--color-text-body-0-static, var(--text-body-0-static));
629
- }
630
-
631
- .IncodeVsIdMask {
632
- z-index: 50;
633
- padding-inline: var(--spacing-24);
634
- justify-content: center;
635
- align-items: center;
636
- display: flex;
637
- position: absolute;
638
- inset: 0;
639
- }
640
-
641
- .IncodeVsIdMask .IncodeVsIdManualCapture {
642
- bottom: var(--spacing-32);
643
- z-index: 60;
644
- pointer-events: auto;
645
- position: absolute;
646
- left: 50%;
647
- transform: translateX(-50%);
648
- }
649
-
650
- .IncodeVsIdMask .IncodeIdCaptureNotification {
651
- top: calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16));
652
- }
653
-
654
- .IncodeVsIdMask .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {
655
- background-color: var(--surface-neutral-900-static);
656
- }
657
-
658
- .IncodeVsIdMask .IncodeVsIdFeedback {
659
- z-index: 100;
660
- justify-content: center;
661
- align-items: center;
662
- gap: var(--spacing-12, var(--spacing-12, 12px));
663
- border-radius: var(--radius-medium, var(--border-radius-medium));
664
- padding: var(--spacing-32, var(--spacing-32, 32px));
665
- text-align: center;
666
- font-family: var(--typography-headline-family);
667
- font-size: var(--typography-headline-h2-size);
668
- font-weight: var(--typography-headline-h2-weight);
669
- line-height: var(--typography-headline-h2-line-height);
670
- letter-spacing: var(--typography-headline-h2-letter-spacing);
671
- color: var(--color-text-body-0-static, var(--text-body-0-static));
672
- background-color: var(--surface-neutral-900-static);
673
- border: var(--border-width-regular) solid var(--border-neutral-100-static);
674
- width: max-content;
675
- max-width: var(--video-selfie-id-feedback-max-width);
676
- flex-direction: column;
677
- display: flex;
678
- position: absolute;
679
- top: 50%;
680
- left: 50%;
681
- overflow: hidden;
682
- transform: translate(-50%, -50%);
683
- }
684
-
685
- .IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackError {
686
- width: var(--video-selfie-id-feedback-width);
687
- }
688
-
689
- .IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing {
690
- gap: var(--spacing-16);
691
- color: var(--text-body-50-static);
692
- width: var(--video-selfie-id-processing-feedback-width);
693
- height: var(--video-selfie-id-processing-feedback-height);
694
- }
695
-
696
- .IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing p {
697
- white-space: nowrap;
698
- }
699
-
700
- .IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerPrimary {
701
- fill: var(--spinner-surface-primary);
702
- }
703
-
704
- .IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerSecondary {
705
- fill: var(--surface-brand-900-static);
706
- }
707
-
708
- .IncodeVsIdFlipModal .IncodeModalDialog {
709
- max-width: none;
710
- height: 100%;
711
- }
712
-
713
- .IncodeVsIdFlipModal .IncodeModalContent {
714
- border-radius: var(--radius-none, var(--border-radius-none));
715
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
716
- max-width: none;
717
- height: 100%;
718
- padding: var(--spacing-24, var(--spacing-24, 24px));
719
- justify-content: center;
720
- gap: var(--video-selfie-id-flip-gap);
721
- }
722
-
723
- .IncodeVsIdFlipModal .IncodeModalTitleSectionCenter {
724
- margin: var(--spacing-0, var(--spacing-none, 0px));
725
- }
726
-
727
- .IncodeVsIdFlipModal .IncodeVsIdFlipAnimation {
728
- height: var(--video-selfie-id-flip-animation-height);
729
- width: var(--video-selfie-id-flip-animation-width);
730
- overflow: hidden;
731
- }
732
-
733
- .IncodeVsFinalSuccess {
734
- justify-content: center;
735
- align-items: center;
736
- gap: var(--spacing-12, var(--spacing-12, 12px));
737
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
738
- flex-direction: column;
739
- flex: 1;
740
- display: flex;
741
- }
742
-
743
- .IncodeVsFinalSuccess .IncodeVsFinalSuccessTitle {
744
- margin: var(--spacing-0, var(--spacing-none, 0px));
745
- text-align: center;
746
- font-family: var(--typography-headline-family);
747
- font-size: var(--typography-headline-h2-size);
748
- font-weight: var(--typography-headline-h2-weight);
749
- line-height: var(--typography-headline-h2-line-height);
750
- letter-spacing: var(--typography-headline-h2-letter-spacing);
751
- color: var(--color-text-body-primary, var(--text-body-800-primary));
752
- }
753
-
754
- @property --tw-border-style {
755
- syntax: "*";
756
- inherits: false;
757
- initial-value: solid;
758
- }
759
-
760
- @property --tw-translate-x {
761
- syntax: "*";
762
- inherits: false;
763
- initial-value: 0;
764
- }
765
-
766
- @property --tw-translate-y {
767
- syntax: "*";
768
- inherits: false;
769
- initial-value: 0;
770
- }
771
-
772
- @property --tw-translate-z {
773
- syntax: "*";
774
- inherits: false;
775
- initial-value: 0;
776
- }
777
-
778
- @property --tw-rotate-x {
779
- syntax: "*";
780
- inherits: false
781
- }
782
-
783
- @property --tw-rotate-y {
784
- syntax: "*";
785
- inherits: false
786
- }
787
-
788
- @property --tw-rotate-z {
789
- syntax: "*";
790
- inherits: false
791
- }
792
-
793
- @property --tw-skew-x {
794
- syntax: "*";
795
- inherits: false
796
- }
797
-
798
- @property --tw-skew-y {
799
- syntax: "*";
800
- inherits: false
801
- }
802
-
803
- @keyframes spin {
804
- to {
805
- transform: rotate(360deg);
806
- }
807
- }
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.IncodeComponent,.IncodeComponent *,.IncodeComponent :before,.IncodeComponent :after,.IncodeComponent ::backdrop{--tw-border-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer incode-theme,incode-utilities,incode-base,incode-components;@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes incodeToastFadeInOut{0%{opacity:0;transform:translate(-50%,-20px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}.IncodeCaptureContainer{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.IncodeCaptureContainer .IncodeCaptureFrame{aspect-ratio:1;width:100%;max-width:var(--face-capture-frame-max-w);border-radius:var(--radius-full,var(--border-radius-full));border-style:var(--tw-border-style);border-width:12px;border-color:#0000;position:relative}.IncodeCaptureContainer .IncodeCaptureVideoWrapper{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);width:calc(100% - 24px);height:calc(100% - 24px);translate:var(--tw-translate-x) var(--tw-translate-y);transform:var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );border-radius:var(--radius-full,var(--border-radius-full));background-color:var(--color-surface-neutral-100-static,var(--surface-neutral-100-static));justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;overflow:hidden}.IncodeCaptureContainer .IncodeCaptureVideo{z-index:50;width:100%;height:100%;position:absolute}.IncodeCaptureContainer .IncodeCaptureVideoElement{inset:var(--spacing-0,var(--spacing-none,0px));object-fit:cover;width:100%;height:100%;position:absolute}.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending{opacity:0}.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored{transform:scaleX(-1)}.IncodeCaptureContainer .IncodeCaptureAvatarHost{width:100%;height:100%;position:absolute}.IncodeCaptureContainer .IncodeCaptureAvatarElement{inset:var(--spacing-0,var(--spacing-none,0px));object-fit:cover;width:100%;height:100%;position:absolute}.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending{opacity:0}.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored{transform:scaleX(-1)}.IncodeCaptureVisuallyHidden{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.IncodeFaceOutline{width:100%;height:100%}.IncodeLoadingBorder{aspect-ratio:1;width:100%;max-width:var(--face-capture-frame-max-w);position:absolute}.IncodeLoadingBorder .IncodeLoadingBorderBase,.IncodeLoadingBorder .IncodeLoadingBorderForeground{inset:var(--spacing-0,var(--spacing-none,0px));position:absolute}.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning{animation:var(--animate-spin,spin 1s linear infinite)}.IncodeLoadingBorder .IncodeLoadingBorderPath{transition:all 1s ease-in-out}.IncodeNotification{flex-direction:column;align-items:center;display:flex}.IncodeNotification .IncodeNotificationText{text-align:center;font-family:var(--typography-feedback-family);font-size:var(--typography-feedback-l-size);font-weight:var(--typography-feedback-l-weight);line-height:var(--typography-feedback-l-line-height);letter-spacing:var(--typography-feedback-l-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary))}.IncodeIdCaptureNotification{right:var(--spacing-24,var(--spacing-24,24px));left:var(--spacing-24,var(--spacing-24,24px));z-index:100;max-width:var(--incode-form-max-w);padding-bottom:var(--spacing-32,var(--spacing-32,32px));top:var(--incode-overlay-top-inset,var(--spacing-24));align-items:flex-end;margin:auto;display:flex;position:absolute}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent{z-index:100;border-radius:var(--radius-large,var(--border-radius-large));border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-neutral-300,var(--border-neutral-300));background-color:var(--color-surface-neutral-900-80,var(--surface-neutral-900-80));width:100%;padding-inline:var(--spacing-20,var(--spacing-20,20px));box-shadow:var(--id-capture-notification-content-shadow);display:flex;overflow:hidden}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal{justify-content:center}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText{justify-content:center;gap:var(--spacing-8,var(--spacing-8,8px));padding-top:var(--spacing-16,var(--spacing-16,16px));padding-bottom:var(--spacing-12,var(--spacing-12,12px));text-align:center;color:var(--color-text-body-0-static,var(--text-body-0-static));flex-direction:column;display:flex}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle{font-family:var(--typography-headline-family);font-size:var(--typography-headline-h3-size);font-weight:var(--typography-headline-h3-weight);line-height:var(--typography-headline-h3-line-height);letter-spacing:var(--typography-headline-h3-letter-spacing)}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription{font-family:var(--typography-headline-family);font-size:var(--typography-headline-h5-size);font-weight:var(--typography-headline-h5-weight);line-height:var(--typography-headline-h5-line-height);letter-spacing:var(--typography-headline-h5-letter-spacing);color:var(--color-text-body-tertiary-static,var(--text-body-300-tertiary-static))}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText{gap:var(--spacing-4,var(--spacing-4,4px));padding-block:var(--spacing-16,var(--spacing-16,16px))}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle{font-family:var(--typography-headline-family);font-size:var(--typography-headline-h5-size);font-weight:var(--typography-headline-h5-weight);line-height:var(--typography-headline-h5-line-height);letter-spacing:var(--typography-headline-h5-letter-spacing)}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent.IncodeIdCaptureNotificationContent--minimal .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription{font-family:var(--typography-body-family);font-size:var(--typography-body-m-regular-size);font-weight:var(--typography-body-m-regular-weight);line-height:var(--typography-body-m-regular-line-height);letter-spacing:var(--typography-body-m-regular-letter-spacing)}.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation{height:var(--id-capture-notification-animation-height);justify-content:center;align-items:center;width:auto;display:flex}.IncodeIdManualCaptureButton{bottom:var(--spacing-24,var(--spacing-24,24px));z-index:100;--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);width:100%;translate:var(--tw-translate-x) var(--tw-translate-y);justify-content:center;align-items:center;gap:var(--spacing-4,var(--spacing-4,4px));flex-direction:column;animation:.5s ease-out forwards slideUp;display:flex;position:absolute;left:50%}.IncodeIdManualCaptureButton .IncodeButtonLink{height:100%;padding:var(--spacing-0,var(--spacing-none,0px));color:var(--color-text-body-primary,var(--text-body-800-primary))}.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip{border-radius:var(--radius-medium,var(--border-radius-medium));background-color:var(--color-surface-neutral-900,var(--surface-neutral-900));padding:var(--spacing-16,var(--spacing-16,16px))}.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList{margin:var(--spacing-0,var(--spacing-none,0px));padding:var(--spacing-0,var(--spacing-none,0px));flex-direction:column;align-items:center;list-style-type:none;display:flex}.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li{margin:var(--spacing-0,var(--spacing-none,0px));font-family:var(--typography-tooltip-family);font-size:var(--typography-tooltip-m-size);font-weight:var(--typography-tooltip-m-weight);line-height:var(--typography-tooltip-m-line-height);letter-spacing:var(--typography-tooltip-m-letter-spacing);text-wrap:nowrap;color:var(--color-text-body-0-static,var(--text-body-0-static))}.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg{transition:filter .2s,transform .2s}.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg{filter:brightness(.8);transform:scale(.95)}.IncodeSelfieManualCapture{max-width:var(--manual-face-capture-max-w);flex-direction:column;align-items:center;display:flex}.IncodeSelfieManualCaptureText{text-align:center;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h5-size);font-weight:var(--typography-headline-h5-weight);line-height:var(--typography-headline-h5-line-height);letter-spacing:var(--typography-headline-h5-letter-spacing);color:var(--color-text-body-secondary,var(--text-body-500-secondary))}.IncodeSelfieManualCaptureButton{padding:var(--spacing-0,var(--spacing-none,0px));color:var(--color-text-body-primary,var(--text-body-800-primary))}.IncodeVideoSelfieCapturePage{background-color:var(--capture-page-backdrop-color)}.IncodeVideoSelfieCapturePage .IncodePageInner{padding:var(--spacing-0,var(--spacing-none,0px));max-height:none}.IncodeVideoSelfieCapturePage .IncodePageContent{flex:1;position:relative}.IncodeVideoSelfieOverlay{pointer-events:none;inset:var(--spacing-0,var(--spacing-none,0px));z-index:10;flex-direction:column;align-items:center;display:flex;position:absolute;container-type:inline-size}.IncodeVideoSelfieTutorialPage .IncodePageContent{min-height:var(--spacing-0,var(--spacing-none,0px))}.IncodeVideoSelfieTutorialBody{margin-top:var(--spacing-24,var(--spacing-24,24px));min-height:var(--spacing-0,var(--spacing-none,0px));flex:1;overflow-y:auto}.IncodeVideoSelfieTutorialSteps{width:100%;max-width:var(--incode-form-max-w);gap:var(--spacing-8,var(--spacing-8,8px));flex-direction:column;margin-inline:auto;display:flex}.IncodeVideoSelfieTutorialStep{align-items:center;gap:var(--spacing-12,var(--spacing-12,12px));display:flex}.IncodeVideoSelfieTutorialStepIcon{width:var(--spacing-40,var(--spacing-40,40px));height:var(--spacing-40,var(--spacing-40,40px));border-radius:var(--radius-small,var(--border-radius-small));border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-neutral-100,var(--border-neutral-100));background-color:var(--color-surface-neutral-0,var(--surface-neutral-0));color:var(--color-text-body-secondary,var(--text-body-500-secondary));flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.IncodeVideoSelfieTutorialStepIcon svg{height:var(--spacing-24,var(--spacing-24,24px));width:var(--spacing-24,var(--spacing-24,24px))}.IncodeVideoSelfieTutorialStep:not(:last-child) .IncodeVideoSelfieTutorialStepIcon:after{content:"";height:var(--spacing-8,var(--spacing-8,8px));width:var(--spacing-2,var(--spacing-2,2px));--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);background-color:var(--color-border-neutral-100,var(--border-neutral-100));position:absolute;top:100%;left:50%}.IncodeVideoSelfieTutorialStepLabel{text-align:left;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h4-size);font-weight:var(--typography-headline-h4-weight);line-height:var(--typography-headline-h4-line-height);letter-spacing:var(--typography-headline-h4-letter-spacing);color:var(--color-text-body-secondary,var(--text-body-500-secondary))}.IncodeVideoSelfieTutorialActions{bottom:var(--spacing-0,var(--spacing-none,0px));background-color:var(--color-surface-neutral-0,var(--surface-neutral-0));width:100%;padding-top:var(--spacing-24,var(--spacing-24,24px));padding-bottom:var(--spacing-24,var(--spacing-24,24px));flex-shrink:0;display:flex;position:sticky}.IncodeVideoSelfieTutorialStartButton{max-width:var(--incode-form-max-w);margin:auto}.IncodeVideoSelfieSwitchingCameraPage{background-color:var(--color-surface-neutral-900-static,var(--surface-neutral-900-static))}.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner{padding:var(--spacing-0,var(--spacing-none,0px))}.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent{flex:1;position:relative}.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera{width:100%;height:100%;padding-inline:var(--spacing-24,var(--spacing-24,24px));flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent{align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));text-align:center;flex-direction:column;display:flex}.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon{width:var(--spacing-40,var(--spacing-40,40px));height:var(--spacing-40,var(--spacing-40,40px))}.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle{font-family:var(--typography-headline-family);font-size:var(--typography-headline-h2-size);font-weight:var(--typography-headline-h2-weight);line-height:var(--typography-headline-h2-line-height);letter-spacing:var(--typography-headline-h2-letter-spacing);color:var(--color-text-body-0-static,var(--text-body-0-static))}.IncodeVsStepsHeader{inset-inline:var(--spacing-0,var(--spacing-none,0px));top:var(--spacing-0,var(--spacing-none,0px));gap:var(--spacing-2,var(--spacing-2,2px));width:100%;padding-inline:var(--spacing-24,var(--spacing-24,24px));padding-top:var(--spacing-24,var(--spacing-24,24px));color:var(--color-text-body-0-static,var(--text-body-0-static));z-index:var(--video-selfie-chrome-z-index);background-color:#0000;list-style-type:none;display:flex;position:absolute}.IncodeVsStepsHeader .IncodeVsStepsHeaderStep{align-items:center;gap:var(--spacing-8,var(--spacing-8,8px));width:100%;height:var(--video-selfie-stepper-height);flex-direction:column;flex:1;display:flex;position:relative}.IncodeVsStepsHeader .IncodeVsStepsHeaderStep img{width:var(--spacing-32,var(--spacing-32,32px));height:var(--spacing-32,var(--spacing-32,32px))}.IncodeVsStepsHeader .IncodeVsStepsHeaderPill{border-radius:var(--radius-full,var(--border-radius-full));background-color:var(--color-surface-neutral-200,var(--surface-neutral-200));width:100%;height:var(--video-selfie-stepper-pill-height);opacity:.25;transition:opacity .3s ease-in-out}.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill{opacity:.5}.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill{opacity:1}.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill{background-color:var(--border-status-positive-static);opacity:1}.IncodeVsSelfieManualCapture{pointer-events:auto}.IncodeVideoSelfieOverlay .IncodeVsSelfieMask{border-radius:var(--radius-full,var(--border-radius-full));z-index:var(--video-selfie-mask-z-index);width:86cqw;height:86cqw;box-shadow:var(--video-selfie-mask-vignette-shadow);position:absolute;top:calc(50% - 7cqw);left:50%;transform:translate(-50%,-50%)}.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing{inset:var(--spacing-0,var(--spacing-none,0px));width:100%;height:100%;position:absolute;overflow:visible}.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback{inset-inline:var(--spacing-0,var(--spacing-none,0px));align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));text-align:center;width:100%;z-index:var(--video-selfie-chrome-z-index);max-width:var(--video-selfie-feedback-max-width);flex-direction:column;margin-inline:auto;display:flex;position:absolute;top:calc(50% + 36cqw + 40px)}.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon{width:var(--spacing-32,var(--spacing-32,32px));height:var(--spacing-32,var(--spacing-32,32px))}.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText{margin:var(--spacing-0,var(--spacing-none,0px));font-family:var(--typography-headline-family);font-size:var(--typography-headline-h2-size);font-weight:var(--typography-headline-h2-weight);line-height:var(--typography-headline-h2-line-height);letter-spacing:var(--typography-headline-h2-letter-spacing);color:var(--color-text-body-0-static,var(--text-body-0-static))}.IncodeVsIdMask{z-index:50;padding-inline:var(--spacing-24);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.IncodeVsIdMask .IncodeVsIdManualCapture{bottom:var(--spacing-32);z-index:60;pointer-events:auto;position:absolute;left:50%;transform:translate(-50%)}.IncodeVsIdMask .IncodeIdCaptureNotification{top:calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16))}.IncodeVsIdMask .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent{background-color:var(--surface-neutral-900-static)}.IncodeVsIdMask .IncodeVsIdFeedback{z-index:100;justify-content:center;align-items:center;gap:var(--spacing-12,var(--spacing-12,12px));border-radius:var(--radius-medium,var(--border-radius-medium));padding:var(--spacing-32,var(--spacing-32,32px));text-align:center;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h2-size);font-weight:var(--typography-headline-h2-weight);line-height:var(--typography-headline-h2-line-height);letter-spacing:var(--typography-headline-h2-letter-spacing);color:var(--color-text-body-0-static,var(--text-body-0-static));background-color:var(--surface-neutral-900-static);border:var(--border-width-regular) solid var(--border-neutral-100-static);width:max-content;max-width:var(--video-selfie-id-feedback-max-width);flex-direction:column;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackError{width:var(--video-selfie-id-feedback-width)}.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing{gap:var(--spacing-16);color:var(--text-body-50-static);width:var(--video-selfie-id-processing-feedback-width);height:var(--video-selfie-id-processing-feedback-height)}.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing p{white-space:nowrap}.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerPrimary{fill:var(--spinner-surface-primary)}.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerSecondary{fill:var(--surface-brand-900-static)}.IncodeVsIdFlipModal .IncodeModalDialog{max-width:none;height:100%}.IncodeVsIdFlipModal .IncodeModalContent{border-radius:var(--radius-none,var(--border-radius-none));background-color:var(--color-surface-neutral-0,var(--surface-neutral-0));max-width:none;height:100%;padding:var(--spacing-24,var(--spacing-24,24px));justify-content:center;gap:var(--video-selfie-id-flip-gap)}.IncodeVsIdFlipModal .IncodeModalTitleSectionCenter{margin:var(--spacing-0,var(--spacing-none,0px))}.IncodeVsIdFlipModal .IncodeVsIdFlipAnimation{height:var(--video-selfie-id-flip-animation-height);width:var(--video-selfie-id-flip-animation-width);overflow:hidden}.IncodeVsFinalSuccess{justify-content:center;align-items:center;gap:var(--spacing-12,var(--spacing-12,12px));padding-block:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;flex:1;display:flex}.IncodeVsFinalSuccess .IncodeVsFinalSuccessTitle{margin:var(--spacing-0,var(--spacing-none,0px));text-align:center;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h2-size);font-weight:var(--typography-headline-h2-weight);line-height:var(--typography-headline-h2-line-height);letter-spacing:var(--typography-headline-h2-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}