@incodetech/web 2.0.0-rc.0 → 2.0.0

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 (178) hide show
  1. package/package.json +3 -3
  2. package/dist/ae-signature/ae-signature.es.js +0 -15
  3. package/dist/ae-signature/styles.css +0 -348
  4. package/dist/ae-signature/styles2.css +0 -107
  5. package/dist/aligndevicelottie-DoV8xKjh.js +0 -12757
  6. package/dist/antifraud/antifraud.es.js +0 -18
  7. package/dist/antifraud/styles.css +0 -2
  8. package/dist/authentication/authentication.es.js +0 -29
  9. package/dist/autoFocusTitle-QexamZ4i.js +0 -16
  10. package/dist/back-horizontal-hint-B8Brxh3U.js +0 -137
  11. package/dist/back-tutorial-1NOQobGO.js +0 -14585
  12. package/dist/back-vertical-hint-BBo36dxn.js +0 -128
  13. package/dist/backdevicelottie-C_ceuqY7.js +0 -16678
  14. package/dist/base.css +0 -5818
  15. package/dist/blurdevicelottie-UO14Y0WC.js +0 -15939
  16. package/dist/bottomSheet-DE_8TFEC.js +0 -31
  17. package/dist/browser-ponyfill-jOkuz57z.js +0 -299
  18. package/dist/button-DcCUEn2n.js +0 -24
  19. package/dist/checkbox-Cl57ltq_.js +0 -85
  20. package/dist/consent/consent.es.js +0 -90
  21. package/dist/consent/styles.css +0 -116
  22. package/dist/countrySelector-CE-JgIsv.js +0 -58
  23. package/dist/cpf-ocr/styles.css +0 -45
  24. package/dist/cpfOcr-D_tbwbvh.js +0 -78
  25. package/dist/cross-document-data-match/cross-document-data-match.es.js +0 -18
  26. package/dist/curp-validation/curp-validation.es.js +0 -279
  27. package/dist/curp-validation/styles.css +0 -82
  28. package/dist/custom-fields/styles.css +0 -22
  29. package/dist/customFields-CW38fQUv.js +0 -127
  30. package/dist/customWatchlist-D9_yjEQd.js +0 -33
  31. package/dist/dateInputComposed-BpAGsjN6.js +0 -55
  32. package/dist/dateInputComposed-DU3o6PAV.js +0 -1
  33. package/dist/defineProperty-Dh8nSJpJ.js +0 -39
  34. package/dist/document-capture/styles.css +0 -367
  35. package/dist/documentCapture-xX-JT7ZY.js +0 -763
  36. package/dist/dropdownComposed-DFRBG22E.js +0 -284
  37. package/dist/dropdownComposed-DwTzc2YU.js +0 -1
  38. package/dist/dynamic-forms/styles.css +0 -36
  39. package/dist/dynamicForms-CJP1Ia6Q.js +0 -262
  40. package/dist/ekyb/ekyb.es.js +0 -2
  41. package/dist/ekyb/styles.css +0 -137
  42. package/dist/ekybModule-BSs7mndb.js +0 -280
  43. package/dist/ekybModule-D9M3E2Gm.js +0 -2
  44. package/dist/ekyc/ekyc.es.js +0 -2
  45. package/dist/ekyc/styles.css +0 -106
  46. package/dist/ekycModule-CU9pt5YN.js +0 -246
  47. package/dist/ekycModule-CZw9cLno.js +0 -2
  48. package/dist/electronic-signature/electronic-signature.es.js +0 -2
  49. package/dist/electronic-signature-COYXjGdd.js +0 -410
  50. package/dist/email/email.es.js +0 -87
  51. package/dist/email/styles.css +0 -12
  52. package/dist/emailInput-DppGf9pv.js +0 -37
  53. package/dist/expiredId-BnmzE8T3.js +0 -70
  54. package/dist/extensibility-CzEJfRwo.js +0 -2586
  55. package/dist/extensibility.es.js +0 -25
  56. package/dist/face-match/face-match.es.js +0 -2
  57. package/dist/face-match/styles.css +0 -910
  58. package/dist/faceMatch-B8j0g0Yo.js +0 -2
  59. package/dist/faceMatch-BV8UD7tj.js +0 -201
  60. package/dist/flip-animation-CgwRsEmK.js +0 -6983
  61. package/dist/flow/flow.es.js +0 -661
  62. package/dist/flow/styles.css +0 -5205
  63. package/dist/front-horizontal-hint-DGGGi8e1.js +0 -380
  64. package/dist/front-vertical-hint-CNr5mE6Q.js +0 -420
  65. package/dist/frontdevicelottie-Bu6f9fDE.js +0 -17302
  66. package/dist/geolocation/geolocation.es.js +0 -857
  67. package/dist/geolocation/styles.css +0 -158
  68. package/dist/glaredevicelottie-B10axYs_.js +0 -14466
  69. package/dist/governmentValidation/governmentValidation.es.js +0 -98
  70. package/dist/governmentValidation/styles.css +0 -58
  71. package/dist/homeScreen-DnP1jw9A.js +0 -227
  72. package/dist/hooks-BVnGysT7.js +0 -80
  73. package/dist/i18n-9s4OSqwi.js +0 -2010
  74. package/dist/icons-Cc7zwchP.js +0 -310
  75. package/dist/id/id.es.js +0 -832
  76. package/dist/id/styles.css +0 -1287
  77. package/dist/id-laser-h-mBAzHVOK.js +0 -467
  78. package/dist/id-laser-v-CrFg4bcJ.js +0 -483
  79. package/dist/id-ocr/styles.css +0 -46
  80. package/dist/id-tutorial-BCr42Pnn.js +0 -13153
  81. package/dist/id-verification/id-verification.es.js +0 -20
  82. package/dist/idOcr-CCjfWQvH.js +0 -94
  83. package/dist/identity-reuse/identity-reuse.es.js +0 -198
  84. package/dist/identity-reuse/styles.css +0 -163
  85. package/dist/incode-logo-DX016usY.js +0 -4
  86. package/dist/incodeComponent-C1o4M0ZK.js +0 -50
  87. package/dist/incodeModule-BqCjVgEI.js +0 -18
  88. package/dist/index.es.js +0 -16
  89. package/dist/inputComposed-APSw8C7o.js +0 -89
  90. package/dist/inputComposed-XYrarFxS.js +0 -1
  91. package/dist/loadingIcon-BN5YRQUb.js +0 -104
  92. package/dist/mandatoryConsent-DssKMC3v.js +0 -100
  93. package/dist/modal-NMxsQHAO.js +0 -135
  94. package/dist/modal.hooks-CAjcIFZK.js +0 -126
  95. package/dist/numberedStep-CT-alrK5.js +0 -11
  96. package/dist/optionAccessibleLabel-CzEeX3Q4.js +0 -140
  97. package/dist/otpInput-DqRA_egd.js +0 -145
  98. package/dist/page-C1yT4DLb.js +0 -69
  99. package/dist/passport-horizontal-hint-Bgquwtac.js +0 -293
  100. package/dist/passport-tutorial-DwRwtPVX.js +0 -11689
  101. package/dist/passport-vertical-hint-BT1D5BrW.js +0 -267
  102. package/dist/pdf-BurGZ08w.js +0 -14967
  103. package/dist/pdfViewer-BGBNL1Ea.js +0 -63
  104. package/dist/phone/phone.es.js +0 -98
  105. package/dist/phone/styles.css +0 -11
  106. package/dist/phoneInputComposed-bvWhGLFZ.js +0 -11206
  107. package/dist/processing-G_y3o32b.js +0 -6
  108. package/dist/qe-signature/qe-signature.es.js +0 -15
  109. package/dist/radioGroupComposed-BbmvxmD2.js +0 -177
  110. package/dist/redirect-to-mobile/styles.css +0 -588
  111. package/dist/redirectToMobile-C3k1gloW.js +0 -1514
  112. package/dist/requiredLabelHint-BLwgqozE.js +0 -13
  113. package/dist/richText-DbJ5sl2n.js +0 -1973
  114. package/dist/rolldown-runtime-CYMK-g2i.js +0 -20
  115. package/dist/selfie/selfie.es.js +0 -43
  116. package/dist/selfie/styles.css +0 -706
  117. package/dist/selfieTutorial-BgrlUMXP.js +0 -2677
  118. package/dist/signature/signature.es.js +0 -546
  119. package/dist/snackbar-BDp8x7Cv.js +0 -14
  120. package/dist/spinner-B4dcie2T.js +0 -1
  121. package/dist/spinner-CKnjVHxw.js +0 -39
  122. package/dist/statusPage-CUI7ApcU.js +0 -28
  123. package/dist/successIcon-DbILeIz_.js +0 -28
  124. package/dist/tabs-DaPyP71c.js +0 -78
  125. package/dist/themes/dark.css +0 -1347
  126. package/dist/themes/light.css +0 -1225
  127. package/dist/transitionSpinner-PIEPU2Vx.js +0 -17
  128. package/dist/tutorial-9vHAHvMK.js +0 -2587
  129. package/dist/types/ae-signature.d.ts +0 -40
  130. package/dist/types/antifraud.d.ts +0 -40
  131. package/dist/types/authentication.d.ts +0 -45
  132. package/dist/types/base.d.ts +0 -1
  133. package/dist/types/consent.d.ts +0 -41
  134. package/dist/types/cpf-ocr/styles.d.ts +0 -1
  135. package/dist/types/cross-document-data-match.d.ts +0 -34
  136. package/dist/types/curp-validation.d.ts +0 -40
  137. package/dist/types/custom-fields/styles.d.ts +0 -1
  138. package/dist/types/dark.d.ts +0 -1
  139. package/dist/types/document-capture/styles.d.ts +0 -1
  140. package/dist/types/dynamic-forms/styles.d.ts +0 -1
  141. package/dist/types/ekyb.d.ts +0 -34
  142. package/dist/types/ekyc.d.ts +0 -34
  143. package/dist/types/electronic-signature.d.ts +0 -43
  144. package/dist/types/email.d.ts +0 -67
  145. package/dist/types/extensibility.d.ts +0 -981
  146. package/dist/types/face-match.d.ts +0 -59
  147. package/dist/types/flow.d.ts +0 -137
  148. package/dist/types/geolocation.d.ts +0 -41
  149. package/dist/types/governmentValidation.d.ts +0 -34
  150. package/dist/types/id-ocr/styles.d.ts +0 -1
  151. package/dist/types/id-verification.d.ts +0 -40
  152. package/dist/types/id.d.ts +0 -41
  153. package/dist/types/identity-reuse.d.ts +0 -43
  154. package/dist/types/index.d.ts +0 -32
  155. package/dist/types/light.d.ts +0 -1
  156. package/dist/types/mandatory-consent/styles.d.ts +0 -1
  157. package/dist/types/phone.d.ts +0 -68
  158. package/dist/types/qe-signature.d.ts +0 -40
  159. package/dist/types/redirect-to-mobile/styles.d.ts +0 -1
  160. package/dist/types/selfie.d.ts +0 -41
  161. package/dist/types/signature.d.ts +0 -40
  162. package/dist/types/styles.d.ts +0 -1
  163. package/dist/types/themes/dark.d.ts +0 -1
  164. package/dist/types/themes/light.d.ts +0 -1
  165. package/dist/types/watchlist-for-business/styles.d.ts +0 -1
  166. package/dist/types/watchlist.d.ts +0 -40
  167. package/dist/types/workflow.d.ts +0 -91
  168. package/dist/typography-CxjaknHN.js +0 -28
  169. package/dist/uiConfig-CwpQ-IM6.js +0 -20
  170. package/dist/useModuleLoader-BFiVA41N.js +0 -432
  171. package/dist/vendor-preact-D6SntenC.js +0 -958
  172. package/dist/verificationResult-BrVbUJ4U.js +0 -97
  173. package/dist/verifiedByIncode-ChZBpqNy.js +0 -101
  174. package/dist/watchlist/watchlist.es.js +0 -33
  175. package/dist/watchlist-for-business/styles.css +0 -18
  176. package/dist/watchlistForBusiness-BcSNtHCV.js +0 -77
  177. package/dist/workflow/styles.css +0 -4612
  178. package/dist/workflow/workflow.es.js +0 -244
@@ -1,4612 +0,0 @@
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
- *, :before, :after, ::backdrop {
5
- --tw-rotate-x: initial;
6
- --tw-rotate-y: initial;
7
- --tw-rotate-z: initial;
8
- --tw-skew-x: initial;
9
- --tw-skew-y: initial;
10
- --tw-border-style: solid;
11
- --tw-shadow: 0 0 #0000;
12
- --tw-shadow-color: initial;
13
- --tw-shadow-alpha: 100%;
14
- --tw-inset-shadow: 0 0 #0000;
15
- --tw-inset-shadow-color: initial;
16
- --tw-inset-shadow-alpha: 100%;
17
- --tw-ring-color: initial;
18
- --tw-ring-shadow: 0 0 #0000;
19
- --tw-inset-ring-color: initial;
20
- --tw-inset-ring-shadow: 0 0 #0000;
21
- --tw-ring-inset: initial;
22
- --tw-ring-offset-width: 0px;
23
- --tw-ring-offset-color: #fff;
24
- --tw-ring-offset-shadow: 0 0 #0000;
25
- --tw-outline-style: solid;
26
- --tw-blur: initial;
27
- --tw-brightness: initial;
28
- --tw-contrast: initial;
29
- --tw-grayscale: initial;
30
- --tw-hue-rotate: initial;
31
- --tw-invert: initial;
32
- --tw-opacity: initial;
33
- --tw-saturate: initial;
34
- --tw-sepia: initial;
35
- --tw-drop-shadow: initial;
36
- --tw-drop-shadow-color: initial;
37
- --tw-drop-shadow-alpha: 100%;
38
- --tw-drop-shadow-size: initial;
39
- --tw-translate-x: 0;
40
- --tw-translate-y: 0;
41
- --tw-translate-z: 0;
42
- --tw-leading: initial;
43
- --tw-font-weight: initial;
44
- --tw-tracking: initial;
45
- --tw-duration: initial;
46
- }
47
- }
48
- }
49
-
50
- @layer incode-theme;
51
-
52
- @layer incode-utilities {
53
- .\!visible {
54
- visibility: visible !important;
55
- }
56
-
57
- .invisible {
58
- visibility: hidden;
59
- }
60
-
61
- .visible {
62
- visibility: visible;
63
- }
64
-
65
- .sr-only {
66
- clip-path: inset(50%);
67
- white-space: nowrap;
68
- border-width: 0;
69
- width: 1px;
70
- height: 1px;
71
- margin: -1px;
72
- padding: 0;
73
- position: absolute;
74
- overflow: hidden;
75
- }
76
-
77
- .absolute {
78
- position: absolute;
79
- }
80
-
81
- .relative {
82
- position: relative;
83
- }
84
-
85
- .static {
86
- position: static;
87
- }
88
-
89
- .container {
90
- width: 100%;
91
- }
92
-
93
- @media (min-width: 40rem) {
94
- .container {
95
- max-width: 40rem;
96
- }
97
- }
98
-
99
- @media (min-width: 48rem) {
100
- .container {
101
- max-width: 48rem;
102
- }
103
- }
104
-
105
- @media (min-width: 64rem) {
106
- .container {
107
- max-width: 64rem;
108
- }
109
- }
110
-
111
- @media (min-width: 80rem) {
112
- .container {
113
- max-width: 80rem;
114
- }
115
- }
116
-
117
- @media (min-width: 96rem) {
118
- .container {
119
- max-width: 96rem;
120
- }
121
- }
122
-
123
- .m-auto {
124
- margin: auto;
125
- }
126
-
127
- .block {
128
- display: block;
129
- }
130
-
131
- .flex {
132
- display: flex;
133
- }
134
-
135
- .grid {
136
- display: grid;
137
- }
138
-
139
- .hidden {
140
- display: none;
141
- }
142
-
143
- .inline {
144
- display: inline;
145
- }
146
-
147
- .inline-flex {
148
- display: inline-flex;
149
- }
150
-
151
- .max-w-\[420px\] {
152
- max-width: 420px;
153
- }
154
-
155
- .flex-1 {
156
- flex: 1;
157
- }
158
-
159
- .transform {
160
- transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
161
- }
162
-
163
- .resize {
164
- resize: both;
165
- }
166
-
167
- .flex-col {
168
- flex-direction: column;
169
- }
170
-
171
- .items-center {
172
- align-items: center;
173
- }
174
-
175
- .justify-between {
176
- justify-content: space-between;
177
- }
178
-
179
- .border {
180
- border-style: var(--tw-border-style);
181
- border-width: 1px;
182
- }
183
-
184
- .bg-white {
185
- background-color: var(--color-white, #fff);
186
- }
187
-
188
- .text-button-m-underlined {
189
- font-family: var(--typography-button-family);
190
- font-size: var(--typography-button-m-underlined-size);
191
- font-weight: var(--typography-button-m-underlined-weight);
192
- line-height: var(--typography-button-m-underlined-line-height);
193
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
194
- -webkit-text-decoration-skip-ink: none;
195
- text-decoration-skip-ink: none;
196
- font-family: var(--typography-button-family);
197
- font-size: var(--typography-button-m-underlined-size);
198
- font-weight: var(--typography-button-m-underlined-weight);
199
- line-height: var(--typography-button-m-underlined-line-height);
200
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
201
- font-family: var(--typography-button-family);
202
- font-size: var(--typography-button-m-underlined-size);
203
- font-weight: var(--typography-button-m-underlined-weight);
204
- line-height: var(--typography-button-m-underlined-line-height);
205
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
206
- font-family: var(--typography-button-family);
207
- font-size: var(--typography-button-m-underlined-size);
208
- font-weight: var(--typography-button-m-underlined-weight);
209
- line-height: var(--typography-button-m-underlined-line-height);
210
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
211
- font-family: var(--typography-button-family);
212
- font-size: var(--typography-button-m-underlined-size);
213
- font-weight: var(--typography-button-m-underlined-weight);
214
- line-height: var(--typography-button-m-underlined-line-height);
215
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
216
- font-family: var(--typography-button-family);
217
- font-size: var(--typography-button-m-underlined-size);
218
- font-weight: var(--typography-button-m-underlined-weight);
219
- line-height: var(--typography-button-m-underlined-line-height);
220
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
221
- font-family: var(--typography-button-family);
222
- font-size: var(--typography-button-m-underlined-size);
223
- font-weight: var(--typography-button-m-underlined-weight);
224
- line-height: var(--typography-button-m-underlined-line-height);
225
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
226
- font-family: var(--typography-button-family);
227
- font-size: var(--typography-button-m-underlined-size);
228
- font-weight: var(--typography-button-m-underlined-weight);
229
- line-height: var(--typography-button-m-underlined-line-height);
230
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
231
- font-family: var(--typography-button-family);
232
- font-size: var(--typography-button-m-underlined-size);
233
- font-weight: var(--typography-button-m-underlined-weight);
234
- line-height: var(--typography-button-m-underlined-line-height);
235
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
236
- font-family: var(--typography-button-family);
237
- font-size: var(--typography-button-m-underlined-size);
238
- font-weight: var(--typography-button-m-underlined-weight);
239
- line-height: var(--typography-button-m-underlined-line-height);
240
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
241
- font-family: var(--typography-button-family);
242
- font-size: var(--typography-button-m-underlined-size);
243
- font-weight: var(--typography-button-m-underlined-weight);
244
- line-height: var(--typography-button-m-underlined-line-height);
245
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
246
- font-family: var(--typography-button-family);
247
- font-size: var(--typography-button-m-underlined-size);
248
- font-weight: var(--typography-button-m-underlined-weight);
249
- line-height: var(--typography-button-m-underlined-line-height);
250
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
251
- font-family: var(--typography-button-family);
252
- font-size: var(--typography-button-m-underlined-size);
253
- font-weight: var(--typography-button-m-underlined-weight);
254
- line-height: var(--typography-button-m-underlined-line-height);
255
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
256
- font-family: var(--typography-button-family);
257
- font-size: var(--typography-button-m-underlined-size);
258
- font-weight: var(--typography-button-m-underlined-weight);
259
- line-height: var(--typography-button-m-underlined-line-height);
260
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
261
- font-family: var(--typography-button-family);
262
- font-size: var(--typography-button-m-underlined-size);
263
- font-weight: var(--typography-button-m-underlined-weight);
264
- line-height: var(--typography-button-m-underlined-line-height);
265
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
266
- font-family: var(--typography-button-family);
267
- font-size: var(--typography-button-m-underlined-size);
268
- font-weight: var(--typography-button-m-underlined-weight);
269
- line-height: var(--typography-button-m-underlined-line-height);
270
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
271
- font-family: var(--typography-button-family);
272
- font-size: var(--typography-button-m-underlined-size);
273
- font-weight: var(--typography-button-m-underlined-weight);
274
- line-height: var(--typography-button-m-underlined-line-height);
275
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
276
- font-family: var(--typography-button-family);
277
- font-size: var(--typography-button-m-underlined-size);
278
- font-weight: var(--typography-button-m-underlined-weight);
279
- line-height: var(--typography-button-m-underlined-line-height);
280
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
281
- font-family: var(--typography-button-family);
282
- font-size: var(--typography-button-m-underlined-size);
283
- font-weight: var(--typography-button-m-underlined-weight);
284
- line-height: var(--typography-button-m-underlined-line-height);
285
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
286
- font-family: var(--typography-button-family);
287
- font-size: var(--typography-button-m-underlined-size);
288
- font-weight: var(--typography-button-m-underlined-weight);
289
- line-height: var(--typography-button-m-underlined-line-height);
290
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
291
- font-family: var(--typography-button-family);
292
- font-size: var(--typography-button-m-underlined-size);
293
- font-weight: var(--typography-button-m-underlined-weight);
294
- line-height: var(--typography-button-m-underlined-line-height);
295
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
296
- font-family: var(--typography-button-family);
297
- font-size: var(--typography-button-m-underlined-size);
298
- font-weight: var(--typography-button-m-underlined-weight);
299
- line-height: var(--typography-button-m-underlined-line-height);
300
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
301
- font-family: var(--typography-button-family);
302
- font-size: var(--typography-button-m-underlined-size);
303
- font-weight: var(--typography-button-m-underlined-weight);
304
- line-height: var(--typography-button-m-underlined-line-height);
305
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
306
- font-family: var(--typography-button-family);
307
- font-size: var(--typography-button-m-underlined-size);
308
- font-weight: var(--typography-button-m-underlined-weight);
309
- line-height: var(--typography-button-m-underlined-line-height);
310
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
311
- font-family: var(--typography-button-family);
312
- font-size: var(--typography-button-m-underlined-size);
313
- font-weight: var(--typography-button-m-underlined-weight);
314
- line-height: var(--typography-button-m-underlined-line-height);
315
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
316
- font-family: var(--typography-button-family);
317
- font-size: var(--typography-button-m-underlined-size);
318
- font-weight: var(--typography-button-m-underlined-weight);
319
- line-height: var(--typography-button-m-underlined-line-height);
320
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
321
- font-family: var(--typography-button-family);
322
- font-size: var(--typography-button-m-underlined-size);
323
- font-weight: var(--typography-button-m-underlined-weight);
324
- line-height: var(--typography-button-m-underlined-line-height);
325
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
326
- font-family: var(--typography-button-family);
327
- font-size: var(--typography-button-m-underlined-size);
328
- font-weight: var(--typography-button-m-underlined-weight);
329
- line-height: var(--typography-button-m-underlined-line-height);
330
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
331
- font-family: var(--typography-button-family);
332
- font-size: var(--typography-button-m-underlined-size);
333
- font-weight: var(--typography-button-m-underlined-weight);
334
- line-height: var(--typography-button-m-underlined-line-height);
335
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
336
- font-family: var(--typography-button-family);
337
- font-size: var(--typography-button-m-underlined-size);
338
- font-weight: var(--typography-button-m-underlined-weight);
339
- line-height: var(--typography-button-m-underlined-line-height);
340
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
341
- font-family: var(--typography-button-family);
342
- font-size: var(--typography-button-m-underlined-size);
343
- font-weight: var(--typography-button-m-underlined-weight);
344
- line-height: var(--typography-button-m-underlined-line-height);
345
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
346
- font-family: var(--typography-button-family);
347
- font-size: var(--typography-button-m-underlined-size);
348
- font-weight: var(--typography-button-m-underlined-weight);
349
- line-height: var(--typography-button-m-underlined-line-height);
350
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
351
- font-family: var(--typography-button-family);
352
- font-size: var(--typography-button-m-underlined-size);
353
- font-weight: var(--typography-button-m-underlined-weight);
354
- line-height: var(--typography-button-m-underlined-line-height);
355
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
356
- font-family: var(--typography-button-family);
357
- font-size: var(--typography-button-m-underlined-size);
358
- font-weight: var(--typography-button-m-underlined-weight);
359
- line-height: var(--typography-button-m-underlined-line-height);
360
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
361
- font-family: var(--typography-button-family);
362
- font-size: var(--typography-button-m-underlined-size);
363
- font-weight: var(--typography-button-m-underlined-weight);
364
- line-height: var(--typography-button-m-underlined-line-height);
365
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
366
- font-family: var(--typography-button-family);
367
- font-size: var(--typography-button-m-underlined-size);
368
- font-weight: var(--typography-button-m-underlined-weight);
369
- line-height: var(--typography-button-m-underlined-line-height);
370
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
371
- font-family: var(--typography-button-family);
372
- font-size: var(--typography-button-m-underlined-size);
373
- font-weight: var(--typography-button-m-underlined-weight);
374
- line-height: var(--typography-button-m-underlined-line-height);
375
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
376
- font-family: var(--typography-button-family);
377
- font-size: var(--typography-button-m-underlined-size);
378
- font-weight: var(--typography-button-m-underlined-weight);
379
- line-height: var(--typography-button-m-underlined-line-height);
380
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
381
- font-family: var(--typography-button-family);
382
- font-size: var(--typography-button-m-underlined-size);
383
- font-weight: var(--typography-button-m-underlined-weight);
384
- line-height: var(--typography-button-m-underlined-line-height);
385
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
386
- font-family: var(--typography-button-family);
387
- font-size: var(--typography-button-m-underlined-size);
388
- font-weight: var(--typography-button-m-underlined-weight);
389
- line-height: var(--typography-button-m-underlined-line-height);
390
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
391
- font-family: var(--typography-button-family);
392
- font-size: var(--typography-button-m-underlined-size);
393
- font-weight: var(--typography-button-m-underlined-weight);
394
- line-height: var(--typography-button-m-underlined-line-height);
395
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
396
- font-family: var(--typography-button-family);
397
- font-size: var(--typography-button-m-underlined-size);
398
- font-weight: var(--typography-button-m-underlined-weight);
399
- line-height: var(--typography-button-m-underlined-line-height);
400
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
401
- font-family: var(--typography-button-family);
402
- font-size: var(--typography-button-m-underlined-size);
403
- font-weight: var(--typography-button-m-underlined-weight);
404
- line-height: var(--typography-button-m-underlined-line-height);
405
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
406
- font-family: var(--typography-button-family);
407
- font-size: var(--typography-button-m-underlined-size);
408
- font-weight: var(--typography-button-m-underlined-weight);
409
- line-height: var(--typography-button-m-underlined-line-height);
410
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
411
- font-family: var(--typography-button-family);
412
- font-size: var(--typography-button-m-underlined-size);
413
- font-weight: var(--typography-button-m-underlined-weight);
414
- line-height: var(--typography-button-m-underlined-line-height);
415
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
416
- font-family: var(--typography-button-family);
417
- font-size: var(--typography-button-m-underlined-size);
418
- font-weight: var(--typography-button-m-underlined-weight);
419
- line-height: var(--typography-button-m-underlined-line-height);
420
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
421
- font-family: var(--typography-button-family);
422
- font-size: var(--typography-button-m-underlined-size);
423
- font-weight: var(--typography-button-m-underlined-weight);
424
- line-height: var(--typography-button-m-underlined-line-height);
425
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
426
- font-family: var(--typography-button-family);
427
- font-size: var(--typography-button-m-underlined-size);
428
- font-weight: var(--typography-button-m-underlined-weight);
429
- line-height: var(--typography-button-m-underlined-line-height);
430
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
431
- font-family: var(--typography-button-family);
432
- font-size: var(--typography-button-m-underlined-size);
433
- font-weight: var(--typography-button-m-underlined-weight);
434
- line-height: var(--typography-button-m-underlined-line-height);
435
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
436
- font-family: var(--typography-button-family);
437
- font-size: var(--typography-button-m-underlined-size);
438
- font-weight: var(--typography-button-m-underlined-weight);
439
- line-height: var(--typography-button-m-underlined-line-height);
440
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
441
- font-family: var(--typography-button-family);
442
- font-size: var(--typography-button-m-underlined-size);
443
- font-weight: var(--typography-button-m-underlined-weight);
444
- line-height: var(--typography-button-m-underlined-line-height);
445
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
446
- font-family: var(--typography-button-family);
447
- font-size: var(--typography-button-m-underlined-size);
448
- font-weight: var(--typography-button-m-underlined-weight);
449
- line-height: var(--typography-button-m-underlined-line-height);
450
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
451
- font-family: var(--typography-button-family);
452
- font-size: var(--typography-button-m-underlined-size);
453
- font-weight: var(--typography-button-m-underlined-weight);
454
- line-height: var(--typography-button-m-underlined-line-height);
455
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
456
- font-family: var(--typography-button-family);
457
- font-size: var(--typography-button-m-underlined-size);
458
- font-weight: var(--typography-button-m-underlined-weight);
459
- line-height: var(--typography-button-m-underlined-line-height);
460
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
461
- font-family: var(--typography-button-family);
462
- font-size: var(--typography-button-m-underlined-size);
463
- font-weight: var(--typography-button-m-underlined-weight);
464
- line-height: var(--typography-button-m-underlined-line-height);
465
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
466
- font-family: var(--typography-button-family);
467
- font-size: var(--typography-button-m-underlined-size);
468
- font-weight: var(--typography-button-m-underlined-weight);
469
- line-height: var(--typography-button-m-underlined-line-height);
470
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
471
- font-family: var(--typography-button-family);
472
- font-size: var(--typography-button-m-underlined-size);
473
- font-weight: var(--typography-button-m-underlined-weight);
474
- line-height: var(--typography-button-m-underlined-line-height);
475
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
476
- font-family: var(--typography-button-family);
477
- font-size: var(--typography-button-m-underlined-size);
478
- font-weight: var(--typography-button-m-underlined-weight);
479
- line-height: var(--typography-button-m-underlined-line-height);
480
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
481
- font-family: var(--typography-button-family);
482
- font-size: var(--typography-button-m-underlined-size);
483
- font-weight: var(--typography-button-m-underlined-weight);
484
- line-height: var(--typography-button-m-underlined-line-height);
485
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
486
- font-family: var(--typography-button-family);
487
- font-size: var(--typography-button-m-underlined-size);
488
- font-weight: var(--typography-button-m-underlined-weight);
489
- line-height: var(--typography-button-m-underlined-line-height);
490
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
491
- font-family: var(--typography-button-family);
492
- font-size: var(--typography-button-m-underlined-size);
493
- font-weight: var(--typography-button-m-underlined-weight);
494
- line-height: var(--typography-button-m-underlined-line-height);
495
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
496
- font-family: var(--typography-button-family);
497
- font-size: var(--typography-button-m-underlined-size);
498
- font-weight: var(--typography-button-m-underlined-weight);
499
- line-height: var(--typography-button-m-underlined-line-height);
500
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
501
- font-family: var(--typography-button-family);
502
- font-size: var(--typography-button-m-underlined-size);
503
- font-weight: var(--typography-button-m-underlined-weight);
504
- line-height: var(--typography-button-m-underlined-line-height);
505
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
506
- text-decoration-line: underline;
507
- text-decoration-style: solid;
508
- text-decoration-thickness: auto;
509
- }
510
-
511
- .lowercase {
512
- text-transform: lowercase;
513
- }
514
-
515
- .uppercase {
516
- text-transform: uppercase;
517
- }
518
-
519
- .shadow {
520
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
521
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
522
- }
523
-
524
- .ring {
525
- --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
526
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
527
- }
528
-
529
- .outline {
530
- outline-style: var(--tw-outline-style);
531
- outline-width: 1px;
532
- }
533
-
534
- .blur {
535
- --tw-blur: blur(8px);
536
- filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
537
- }
538
-
539
- .filter {
540
- filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
541
- }
542
-
543
- .transition {
544
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
545
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
546
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
547
- }
548
- }
549
-
550
- @layer incode-base, incode-components;
551
-
552
- @keyframes slideUp {
553
- from {
554
- transform: translateY(100%);
555
- }
556
-
557
- to {
558
- transform: translateY(0);
559
- }
560
- }
561
-
562
- @keyframes fadeIn {
563
- from {
564
- opacity: 0;
565
- transform: translateY(8px);
566
- }
567
-
568
- to {
569
- opacity: 1;
570
- transform: translateY(0);
571
- }
572
- }
573
-
574
- .IncodeCameraButton {
575
- justify-content: center;
576
- align-items: center;
577
- display: flex;
578
- }
579
-
580
- .IncodeCameraButton .IncodeCameraButtonBackground {
581
- fill: var(--color-icon-neutral-800-static, var(--icon-neutral-800-static));
582
- }
583
-
584
- .IncodeCameraButton .IncodeCameraButtonRing, .IncodeCameraButton .IncodeCameraButtonPath {
585
- fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
586
- }
587
-
588
- .IncodeCaptureContainer {
589
- flex-direction: column;
590
- flex: 1;
591
- justify-content: flex-start;
592
- align-items: center;
593
- width: 100%;
594
- height: 100%;
595
- display: flex;
596
- position: relative;
597
- overflow: hidden;
598
- }
599
-
600
- .IncodeCaptureContainer .IncodeCaptureFrame {
601
- aspect-ratio: 1;
602
- border-radius: var(--radius-full, var(--border-radius-full));
603
- border-style: var(--tw-border-style);
604
- border-width: 12px;
605
- border-color: #0000;
606
- width: 100%;
607
- max-width: 335px;
608
- position: relative;
609
- }
610
-
611
- .IncodeCaptureContainer .IncodeCaptureVideoWrapper {
612
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
613
- --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
614
- width: calc(100% - 24px);
615
- height: calc(100% - 24px);
616
- translate: var(--tw-translate-x) var(--tw-translate-y);
617
- transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
618
- border-radius: var(--radius-full, var(--border-radius-full));
619
- background-color: var(--color-white, #fff);
620
- justify-content: center;
621
- align-items: center;
622
- display: flex;
623
- position: absolute;
624
- top: 50%;
625
- left: 50%;
626
- overflow: hidden;
627
- }
628
-
629
- .IncodeCaptureContainer .IncodeCaptureVideo {
630
- z-index: 50;
631
- width: 100%;
632
- height: 100%;
633
- position: absolute;
634
- }
635
-
636
- .IncodeCaptureContainer .IncodeCaptureVideoElement {
637
- object-fit: cover;
638
- width: 100%;
639
- height: 100%;
640
- position: absolute;
641
- }
642
-
643
- .IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
644
- transform: scaleX(-1);
645
- }
646
-
647
- .IncodeCaptureCapturingPage .IncodeCaptureCapturingActions {
648
- justify-content: center;
649
- margin-top: auto;
650
- display: flex;
651
- }
652
-
653
- .IncodeCaptureVisuallyHidden {
654
- clip-path: inset(50%);
655
- white-space: nowrap;
656
- border-width: 0;
657
- width: 1px;
658
- height: 1px;
659
- margin: -1px;
660
- padding: 0;
661
- position: absolute;
662
- overflow: hidden;
663
- }
664
-
665
- .IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
666
- flex-direction: column;
667
- flex: 1;
668
- align-items: center;
669
- display: flex;
670
- }
671
-
672
- .IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
673
- text-align: center;
674
- font-size: var(--text-2xl, 1.5rem);
675
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
676
- --tw-leading: 125%;
677
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
678
- line-height: 125%;
679
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
680
- --tw-tracking: -1px;
681
- letter-spacing: -1px;
682
- color: var(--color-text-body-primary, var(--text-body-800-primary));
683
- }
684
-
685
- .IncodeFaceOutline {
686
- width: 100%;
687
- height: 100%;
688
- }
689
-
690
- .IncodeLoadingBorder {
691
- aspect-ratio: 1;
692
- width: 100%;
693
- max-width: 335px;
694
- position: absolute;
695
- }
696
-
697
- .IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {
698
- inset: var(--spacing-0, var(--spacing-none, 0px));
699
- position: absolute;
700
- }
701
-
702
- .IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {
703
- animation: var(--animate-spin, spin 1s linear infinite);
704
- }
705
-
706
- .IncodeLoadingBorder .IncodeLoadingBorderPath {
707
- transition: all 1s ease-in-out;
708
- }
709
-
710
- .IncodeSelfieManualCapture {
711
- flex-direction: column;
712
- align-items: center;
713
- max-width: 275px;
714
- display: flex;
715
- }
716
-
717
- .IncodeSelfieManualCaptureText {
718
- text-align: center;
719
- font-family: var(--typography-headline-family);
720
- font-size: var(--typography-headline-h5-size);
721
- font-weight: var(--typography-headline-h5-weight);
722
- line-height: var(--typography-headline-h5-line-height);
723
- letter-spacing: var(--typography-headline-h5-letter-spacing);
724
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
725
- }
726
-
727
- .IncodeSelfieManualCaptureButton {
728
- padding: var(--spacing-0, var(--spacing-none, 0px));
729
- color: var(--color-text-body-primary, var(--text-body-800-primary));
730
- }
731
-
732
- .IncodeNotification {
733
- flex-direction: column;
734
- align-items: center;
735
- display: flex;
736
- }
737
-
738
- .IncodeNotification .IncodeNotificationText {
739
- text-align: center;
740
- font-family: var(--typography-feedback-family);
741
- font-size: var(--typography-feedback-l-size);
742
- font-weight: var(--typography-feedback-l-weight);
743
- line-height: var(--typography-feedback-l-line-height);
744
- letter-spacing: var(--typography-feedback-l-letter-spacing);
745
- color: var(--color-text-body-primary, var(--text-body-800-primary));
746
- }
747
-
748
- .IncodeSelfieTutorial {
749
- --brand-color: var(--surface-brand-500);
750
- }
751
-
752
- .IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg linearGradient#__lottie_element_29 stop {
753
- stop-color: var(--brand-color);
754
- }
755
-
756
- .IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g:first-child > g > g > g:nth-child(2) > g:nth-child(3) > g > path, .IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g:first-child > g > g > g:nth-child(2) > g:first-child > g > path {
757
- fill: var(--brand-color);
758
- }
759
-
760
- .IncodePhonePage .IncodePageContent {
761
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
762
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
763
- align-items: center;
764
- }
765
-
766
- .IncodePhoneInputContainer {
767
- width: 100%;
768
- max-width: 420px;
769
- }
770
-
771
- .IncodeEmailInput, .IncodeEmailInputContainer {
772
- flex-direction: column;
773
- align-items: center;
774
- width: 100%;
775
- display: flex;
776
- }
777
-
778
- .IncodeEmailPage .IncodePageContent {
779
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
780
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
781
- }
782
-
783
- .IncodeFaceMatchPage {
784
- flex-direction: column;
785
- width: 100%;
786
- height: 100%;
787
- display: flex;
788
- }
789
-
790
- .IncodeFaceMatchPage .IncodeFaceMatchContent {
791
- margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
792
- flex-direction: column;
793
- flex: 1;
794
- align-items: center;
795
- width: 100%;
796
- height: 100%;
797
- display: flex;
798
- position: relative;
799
- }
800
-
801
- .IncodeFaceMatchAnimationContainer {
802
- flex: 1;
803
- width: 100%;
804
- min-height: 250px;
805
- display: flex;
806
- position: relative;
807
- }
808
-
809
- .IncodeFaceMatchContainer {
810
- flex: 1;
811
- width: 100%;
812
- height: 100%;
813
- min-height: 225px;
814
- position: relative;
815
- }
816
-
817
- .IncodeFaceMatchResultContainer {
818
- flex-direction: column;
819
- justify-content: center;
820
- align-items: center;
821
- gap: 16px;
822
- display: flex;
823
- position: absolute;
824
- inset: 0;
825
- }
826
-
827
- .IncodeFaceMatchHeader {
828
- flex-direction: column;
829
- align-items: center;
830
- transition: opacity .3s ease-out;
831
- display: flex;
832
- }
833
-
834
- .IncodeFaceMatchHeaderHidden {
835
- opacity: 0;
836
- height: 0;
837
- overflow: hidden;
838
- }
839
-
840
- .IncodeFaceMatchPhotoWrapper {
841
- inset: var(--spacing-0, var(--spacing-none, 0px));
842
- transition: opacity .3s ease-out;
843
- position: absolute;
844
- }
845
-
846
- .IncodeFaceMatchPhotoWrapperHidden {
847
- opacity: 0;
848
- pointer-events: none;
849
- }
850
-
851
- .IncodeFaceMatchResultVisible {
852
- flex-direction: column;
853
- flex: 1;
854
- justify-content: center;
855
- align-items: center;
856
- width: 100%;
857
- height: 100%;
858
- animation: .4s ease-out forwards resultFadeIn;
859
- display: flex;
860
- position: static;
861
- }
862
-
863
- .IncodeFaceMatchResultVisible .IncodeFaceMatchAnimatedIcon, .IncodeFaceMatchResultVisible .IncodeFaceMatchAnimatedResultTitle {
864
- opacity: 1;
865
- animation: none;
866
- }
867
-
868
- @keyframes resultFadeIn {
869
- from {
870
- opacity: 0;
871
- }
872
-
873
- to {
874
- opacity: 1;
875
- }
876
- }
877
-
878
- .IncodeFaceMatchResultContent {
879
- flex-direction: column;
880
- justify-content: center;
881
- align-items: center;
882
- gap: 16px;
883
- width: 100%;
884
- display: flex;
885
- }
886
-
887
- .IncodeFaceMatchShowResult {
888
- flex: 1;
889
- min-height: auto;
890
- }
891
-
892
- .IncodeFaceMatchLivenessContainer {
893
- margin-bottom: var(--spacing-32, var(--spacing-32, 32px));
894
- opacity: 0;
895
- pointer-events: none;
896
- justify-content: center;
897
- width: 100%;
898
- transition: opacity .4s ease-out, transform .4s ease-out;
899
- display: flex;
900
- transform: translateY(8px);
901
- }
902
-
903
- .IncodeFaceMatchLivenessVisible {
904
- opacity: 1;
905
- pointer-events: auto;
906
- animation: .4s ease-out fadeIn;
907
- transform: translateY(0);
908
- }
909
-
910
- .IncodeFaceMatchButtonContainer {
911
- opacity: 0;
912
- pointer-events: none;
913
- width: 100%;
914
- transition: opacity .4s ease-out, transform .4s ease-out;
915
- transform: translateY(8px);
916
- }
917
-
918
- .IncodeFaceMatchButtonVisible {
919
- opacity: 1;
920
- pointer-events: auto;
921
- animation: .4s ease-out fadeIn;
922
- transform: translateY(0);
923
- }
924
-
925
- .IncodeFaceMatchTooltip {
926
- background: var(--surface-neutral-50);
927
- border: 1px solid var(--border-neutral-100);
928
- border-radius: var(--border-radius-medium);
929
- letter-spacing: -.192px;
930
- height: 44px;
931
- color: var(--text-body-800-primary);
932
- text-align: center;
933
- padding: 0 20px;
934
- font-size: 16px;
935
- font-weight: 500;
936
- line-height: 44px;
937
- display: inline-block;
938
- position: relative;
939
- }
940
-
941
- .IncodeFaceMatchTooltip:after {
942
- content: "";
943
- border-left: 9px solid #0000;
944
- border-right: 9px solid #0000;
945
- border-top: 9px solid var(--surface-neutral-50);
946
- width: 0;
947
- height: 0;
948
- position: absolute;
949
- bottom: -9px;
950
- left: 50%;
951
- transform: translateX(-50%);
952
- }
953
-
954
- .IncodeFaceMatchTooltip:before {
955
- content: "";
956
- border-left: 9px solid #0000;
957
- border-right: 9px solid #0000;
958
- border-top: 9px solid var(--border-neutral-100);
959
- width: 0;
960
- height: 0;
961
- position: absolute;
962
- bottom: -10px;
963
- left: 50%;
964
- transform: translateX(-50%);
965
- }
966
-
967
- .IncodeFaceMatchAnimatedTitle {
968
- text-align: center;
969
- font-size: var(--text-2xl, 1.5rem);
970
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
971
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
972
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
973
- color: var(--text-body-800-primary);
974
- line-height: 125%;
975
- }
976
-
977
- :root {
978
- --animation-duration: .8s;
979
- --transition-delay: .2s;
980
- --transition-duration: .25s;
981
- --entrance-duration: .8s;
982
- --entrance-delay: .45s;
983
- --tooltip-duration: 1.6s;
984
- --tooltip-show-delay: 1.25s;
985
- --animation-delay: 2.85s;
986
- }
987
-
988
- @keyframes leftEntrance {
989
- from {
990
- opacity: 0;
991
- transform: translateX(-200px);
992
- }
993
-
994
- to {
995
- opacity: 1;
996
- transform: translateX(0);
997
- }
998
- }
999
-
1000
- @keyframes rightEntrance {
1001
- from {
1002
- opacity: 0;
1003
- transform: translateX(200px);
1004
- }
1005
-
1006
- to {
1007
- opacity: 1;
1008
- transform: translateX(0);
1009
- }
1010
- }
1011
-
1012
- @keyframes bottomEntrance {
1013
- from {
1014
- opacity: 0;
1015
- transform: translate(-50%, 200px);
1016
- }
1017
-
1018
- to {
1019
- opacity: 1;
1020
- transform: translate(-50%);
1021
- }
1022
- }
1023
-
1024
- @keyframes leftIn {
1025
- from {
1026
- opacity: 1;
1027
- left: 0;
1028
- transform: translateX(0);
1029
- }
1030
-
1031
- to {
1032
- opacity: 0;
1033
- left: 50%;
1034
- transform: translateX(-50%);
1035
- }
1036
- }
1037
-
1038
- @keyframes rightIn {
1039
- from {
1040
- opacity: 1;
1041
- right: 0;
1042
- transform: translateX(0);
1043
- }
1044
-
1045
- to {
1046
- opacity: 0;
1047
- right: 50%;
1048
- transform: translateX(50%);
1049
- }
1050
- }
1051
-
1052
- @keyframes bottomUp {
1053
- from {
1054
- opacity: 1;
1055
- transform: translate(-50%);
1056
- }
1057
-
1058
- to {
1059
- opacity: 0;
1060
- transform: translate(-50%, -225px);
1061
- }
1062
- }
1063
-
1064
- @keyframes tooltipShowHide {
1065
- 0% {
1066
- opacity: 0;
1067
- }
1068
-
1069
- 50% {
1070
- opacity: 1;
1071
- }
1072
-
1073
- 100% {
1074
- opacity: 0;
1075
- }
1076
- }
1077
-
1078
- @keyframes fadeInTitle {
1079
- from {
1080
- opacity: 0;
1081
- visibility: hidden;
1082
- }
1083
-
1084
- to {
1085
- opacity: 1;
1086
- visibility: visible;
1087
- }
1088
- }
1089
-
1090
- @keyframes fadeOutTitle {
1091
- from {
1092
- opacity: 1;
1093
- visibility: visible;
1094
- }
1095
-
1096
- to {
1097
- opacity: 0;
1098
- visibility: hidden;
1099
- }
1100
- }
1101
-
1102
- @keyframes simpleFadeInTitle {
1103
- from {
1104
- opacity: 0;
1105
- }
1106
-
1107
- to {
1108
- opacity: 1;
1109
- }
1110
- }
1111
-
1112
- @keyframes fadeInIcon {
1113
- from {
1114
- opacity: 0;
1115
- visibility: hidden;
1116
- }
1117
-
1118
- to {
1119
- opacity: 1;
1120
- visibility: visible;
1121
- }
1122
- }
1123
-
1124
- @keyframes slideUpButton {
1125
- from {
1126
- opacity: 0;
1127
- transform: translateY(20px);
1128
- }
1129
-
1130
- to {
1131
- opacity: 1;
1132
- transform: translateY(0);
1133
- }
1134
- }
1135
-
1136
- .IncodeFaceMatchPhotoContainer {
1137
- flex-direction: column;
1138
- align-items: center;
1139
- gap: 21px;
1140
- display: flex;
1141
- position: absolute;
1142
- top: 0;
1143
- }
1144
-
1145
- .IncodeFaceMatchPhotoContainerHidden {
1146
- visibility: hidden;
1147
- }
1148
-
1149
- .IncodeFaceMatchPhotoContainer > .IncodeFaceMatchTooltip {
1150
- opacity: 0;
1151
- animation: tooltipShowHide var(--tooltip-duration, 1.6s) linear forwards;
1152
- animation-delay: var(--tooltip-show-delay, 1.25s);
1153
- }
1154
-
1155
- .IncodeFaceMatchLeftPhoto {
1156
- z-index: 2;
1157
- opacity: 0;
1158
- will-change: transform, opacity;
1159
- animation: leftEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, leftIn var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
1160
- animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
1161
- left: 0;
1162
- transform: translateX(-200px) translateZ(0);
1163
- }
1164
-
1165
- .IncodeFaceMatchRightPhoto {
1166
- z-index: 1;
1167
- opacity: 0;
1168
- will-change: transform, opacity;
1169
- animation: rightEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, rightIn var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
1170
- animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
1171
- right: 0;
1172
- transform: translateX(200px) translateZ(0);
1173
- }
1174
-
1175
- .IncodeFaceMatchBottomPhotoContainer {
1176
- opacity: 0;
1177
- z-index: 3;
1178
- will-change: transform, opacity;
1179
- animation: bottomEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, bottomUp var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
1180
- animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
1181
- flex-direction: column;
1182
- align-items: center;
1183
- gap: 21px;
1184
- display: flex;
1185
- position: absolute;
1186
- top: 225px;
1187
- left: 50%;
1188
- transform: translate(-50%, 200px) translateZ(0);
1189
- }
1190
-
1191
- .IncodeFaceMatchBottomPhotoContainerHidden {
1192
- visibility: hidden;
1193
- }
1194
-
1195
- .IncodeFaceMatchBottomPhotoContainer > .IncodeFaceMatchTooltip {
1196
- opacity: 0;
1197
- animation: tooltipShowHide var(--tooltip-duration, 1.6s) linear forwards;
1198
- animation-delay: var(--tooltip-show-delay, 1.25s);
1199
- }
1200
-
1201
- .IncodeFaceMatchCircularImage {
1202
- object-fit: cover;
1203
- background-color: #ddd;
1204
- border-radius: 50%;
1205
- width: 160px;
1206
- height: 160px;
1207
- }
1208
-
1209
- .IncodeFaceMatchAnimatedTitle {
1210
- animation: simpleFadeInTitle var(--transition-duration, .25s) ease-out forwards, fadeOutTitle var(--transition-duration, .25s) linear forwards;
1211
- animation-delay: 0s, calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));
1212
- opacity: 0;
1213
- }
1214
-
1215
- .IncodeFaceMatchAnimatedResultTitle {
1216
- text-align: center;
1217
- font-size: var(--text-2xl, 1.5rem);
1218
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
1219
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
1220
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
1221
- color: var(--text-body-800-primary);
1222
- animation: fadeInTitle var(--transition-duration, .25s) linear forwards;
1223
- animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));
1224
- opacity: 0;
1225
- line-height: 125%;
1226
- }
1227
-
1228
- .IncodeFaceMatchAnimatedIcon {
1229
- animation: fadeInIcon var(--transition-duration, .25s) linear forwards;
1230
- animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));
1231
- opacity: 0;
1232
- }
1233
-
1234
- .IncodeFaceMatchAnimatedButton {
1235
- animation: slideUpButton var(--transition-duration, .25s) cubic-bezier(.25, .46, .45, .94) forwards;
1236
- animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));
1237
- opacity: 0;
1238
- }
1239
-
1240
- .IncodeGovtValidation {
1241
- flex-direction: column;
1242
- justify-content: center;
1243
- align-items: center;
1244
- width: 100%;
1245
- height: 100%;
1246
- display: flex;
1247
- }
1248
-
1249
- .IncodeGovtValidation .IncodeGovtValidationPage {
1250
- width: 100%;
1251
- height: 100%;
1252
- }
1253
-
1254
- .IncodeGovtValidation .IncodeGovtValidationPage .IncodePageContent {
1255
- flex-direction: column;
1256
- flex: 1;
1257
- justify-content: center;
1258
- align-items: center;
1259
- display: flex;
1260
- }
1261
-
1262
- .IncodeGovtValidation .IncodeGovtValidationStatus {
1263
- text-align: center;
1264
- flex-direction: column;
1265
- justify-content: center;
1266
- align-items: center;
1267
- display: flex;
1268
- }
1269
-
1270
- .IncodeGovtValidation .IncodeGovtValidationText {
1271
- margin-top: var(--spacing-12, var(--spacing-12, 12px));
1272
- font-family: var(--typography-headline-family);
1273
- font-size: var(--typography-headline-h2-size);
1274
- font-weight: var(--typography-headline-h2-weight);
1275
- line-height: var(--typography-headline-h2-line-height);
1276
- letter-spacing: var(--typography-headline-h2-letter-spacing);
1277
- }
1278
-
1279
- .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodePageContent {
1280
- flex-direction: column;
1281
- align-items: center;
1282
- display: flex;
1283
- }
1284
-
1285
- .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions {
1286
- margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
1287
- }
1288
-
1289
- .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions p, .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions h2 {
1290
- font-family: var(--typography-input-dropdown-family);
1291
- font-size: var(--typography-input-dropdown-m-size);
1292
- font-weight: var(--typography-input-dropdown-m-weight);
1293
- line-height: var(--typography-input-dropdown-m-line-height);
1294
- letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
1295
- text-wrap: nowrap;
1296
- }
1297
-
1298
- .IncodeSrOnly {
1299
- clip-path: inset(50%);
1300
- white-space: nowrap;
1301
- border-width: 0;
1302
- width: 1px;
1303
- height: 1px;
1304
- margin: -1px;
1305
- padding: 0;
1306
- position: absolute;
1307
- overflow: hidden;
1308
- }
1309
-
1310
- .IncodeAgeVerificationPage .IncodePageInner {
1311
- padding-top: var(--spacing-8, var(--spacing-8, 8px));
1312
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
1313
- }
1314
-
1315
- .IncodeAgeVerificationPage .IncodePageHeader {
1316
- height: var(--page-header-height);
1317
- min-height: var(--page-header-height);
1318
- }
1319
-
1320
- .IncodeAgeVerificationPage .IncodePageLogo {
1321
- height: var(--age-verification-logo-height);
1322
- }
1323
-
1324
- .IncodeAgeVerificationPage .IncodePageTitleContainer {
1325
- max-width: none;
1326
- }
1327
-
1328
- .IncodeAgeVerificationPage .IncodePageContent {
1329
- justify-content: center;
1330
- }
1331
-
1332
- .IncodeAgeVerificationPage .IncodePageFooter {
1333
- padding-top: var(--spacing-12, var(--spacing-12, 12px));
1334
- padding-bottom: var(--spacing-0, var(--spacing-none, 0px));
1335
- }
1336
-
1337
- .IncodeAgeVerificationPage .IncodeAgeVerificationContent {
1338
- justify-content: space-between;
1339
- align-items: center;
1340
- gap: var(--spacing-16, var(--spacing-16, 16px));
1341
- flex-direction: column;
1342
- flex: 1;
1343
- display: flex;
1344
- }
1345
-
1346
- .IncodeAgeVerificationPage .IncodeAgeVerificationList {
1347
- width: 100%;
1348
- max-width: var(--incode-form-max-w);
1349
- justify-content: center;
1350
- gap: var(--spacing-16, var(--spacing-16, 16px));
1351
- padding: var(--spacing-0, var(--spacing-none, 0px));
1352
- flex-direction: column;
1353
- flex: 1;
1354
- margin-inline: auto;
1355
- list-style-type: none;
1356
- display: flex;
1357
- }
1358
-
1359
- .IncodeAgeVerificationPage .IncodeAgeVerificationItem {
1360
- align-items: center;
1361
- gap: var(--spacing-16, var(--spacing-16, 16px));
1362
- display: flex;
1363
- }
1364
-
1365
- .IncodeAgeVerificationPage .IncodeAgeVerificationIcon {
1366
- height: var(--spacing-64, var(--spacing-64, 64px));
1367
- width: var(--spacing-96, var(--spacing-96, 96px));
1368
- flex-shrink: 0;
1369
- justify-content: center;
1370
- align-items: center;
1371
- display: flex;
1372
- }
1373
-
1374
- .IncodeAgeVerificationPage .IncodeAgeVerificationIcon img {
1375
- width: 100%;
1376
- height: 100%;
1377
- }
1378
-
1379
- .IncodeAgeVerificationPage .IncodeAgeVerificationText {
1380
- font-family: var(--typography-headline-family);
1381
- font-size: var(--typography-headline-h5-size);
1382
- font-weight: var(--typography-headline-h5-weight);
1383
- line-height: var(--typography-headline-h5-line-height);
1384
- letter-spacing: var(--typography-headline-h5-letter-spacing);
1385
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1386
- flex: 1;
1387
- }
1388
-
1389
- .IncodeAgeVerificationPage .IncodeAgeVerificationButton {
1390
- width: 100%;
1391
- max-width: var(--incode-form-max-w);
1392
- margin-inline: auto;
1393
- }
1394
-
1395
- .IncodeIdTutorial {
1396
- --brand-color: var(--surface-brand-500);
1397
- }
1398
-
1399
- .IncodeIdTutorial .IncodePageTitleContainer {
1400
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
1401
- }
1402
-
1403
- .IncodeIdTutorial .IncodeBaseTutorialContainer {
1404
- margin: calc(var(--spacing-24, var(--spacing-24, 24px)) * -1);
1405
- }
1406
-
1407
- .IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {
1408
- padding: var(--spacing-0, var(--spacing-none, 0px));
1409
- }
1410
-
1411
- .IncodeIdTutorial.IncodeIdTutorialId .IncodeBaseTutorialAnimation svg > g > g > g:nth-child(2) > g:nth-child(5) > g > g > g:nth-child(3) > g > path, .IncodeIdTutorial.IncodeIdTutorialId .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g > path, .IncodeIdTutorial.IncodeIdTutorialPassport .IncodeBaseTutorialAnimation svg > g > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > g:nth-child(2) > g > g > g > g:nth-child(4) > g > path, .IncodeIdTutorial.IncodeIdTutorialPassport .IncodeBaseTutorialAnimation svg > g > g:first-child > g > path {
1412
- fill: var(--brand-color);
1413
- }
1414
-
1415
- .IncodeFlipAnimation {
1416
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
1417
- height: 100%;
1418
- padding: var(--spacing-24, var(--spacing-24, 24px));
1419
- flex-direction: column;
1420
- justify-content: center;
1421
- align-items: center;
1422
- display: flex;
1423
- }
1424
-
1425
- .IncodeCommonIssuesFullScreen .IncodeModalDialog {
1426
- max-width: none;
1427
- height: 100%;
1428
- max-height: none;
1429
- }
1430
-
1431
- .IncodeCommonIssuesFullScreen .IncodeModalContent {
1432
- border-radius: var(--radius-none, var(--border-radius-none));
1433
- max-width: none;
1434
- height: 100%;
1435
- margin: auto;
1436
- }
1437
-
1438
- .IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {
1439
- flex-shrink: 0;
1440
- }
1441
-
1442
- .IncodeCommonIssuesContent .IncodeCommonIssuesTitle {
1443
- font-family: var(--typography-headline-family);
1444
- font-size: var(--typography-headline-h2-size);
1445
- font-weight: var(--typography-headline-h2-weight);
1446
- line-height: var(--typography-headline-h2-line-height);
1447
- letter-spacing: var(--typography-headline-h2-letter-spacing);
1448
- }
1449
-
1450
- .IncodeCommonIssuesContent .IncodeCommonIssuesCards {
1451
- gap: var(--spacing-32, var(--spacing-32, 32px));
1452
- width: 100%;
1453
- max-width: 420px;
1454
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
1455
- flex-direction: column;
1456
- display: flex;
1457
- }
1458
-
1459
- .IncodeCommonIssuesContent .IncodeCommonIssuesCard {
1460
- align-items: flex-start;
1461
- gap: var(--spacing-16, var(--spacing-16, 16px));
1462
- display: flex;
1463
- }
1464
-
1465
- .IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {
1466
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1467
- flex-shrink: 0;
1468
- }
1469
-
1470
- .IncodeCommonIssuesContent .IncodeCommonIssuesCardText {
1471
- gap: var(--spacing-4, var(--spacing-4, 4px));
1472
- flex-direction: column;
1473
- display: flex;
1474
- }
1475
-
1476
- .IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {
1477
- font-family: var(--typography-headline-family);
1478
- font-size: var(--typography-headline-h5-size);
1479
- font-weight: var(--typography-headline-h5-weight);
1480
- line-height: var(--typography-headline-h5-line-height);
1481
- letter-spacing: var(--typography-headline-h5-letter-spacing);
1482
- }
1483
-
1484
- .IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {
1485
- font-family: var(--typography-body-family);
1486
- font-size: var(--typography-body-m-regular-size);
1487
- font-weight: var(--typography-body-m-regular-weight);
1488
- line-height: var(--typography-body-m-regular-line-height);
1489
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
1490
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
1491
- }
1492
-
1493
- .IncodeCommonIssuesContent .IncodeCommonIssuesButtons {
1494
- margin-top: auto;
1495
- }
1496
-
1497
- .IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {
1498
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1499
- }
1500
-
1501
- .IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {
1502
- width: 100%;
1503
- }
1504
-
1505
- .IncodeChooserPage .IncodePageContent {
1506
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
1507
- }
1508
-
1509
- .IncodeChooserPage .IncodePageTitle {
1510
- max-width: 15.625rem;
1511
- }
1512
-
1513
- .IncodeChooserPage .IncodeChooserContainer {
1514
- flex-direction: column;
1515
- align-items: center;
1516
- width: 100%;
1517
- margin-top: auto;
1518
- display: flex;
1519
- }
1520
-
1521
- .IncodeCaptureFrame {
1522
- border-radius: var(--radius-medium, var(--border-radius-medium));
1523
- --frame-border-color: var(--border-neutral-100);
1524
- border: 4px solid var(--frame-border-color);
1525
- justify-content: center;
1526
- align-self: center;
1527
- align-items: center;
1528
- transition: max-width .3s ease-out, border-color .3s ease-out;
1529
- display: flex;
1530
- position: relative;
1531
- }
1532
-
1533
- .IncodeCaptureFrame.IncodeCaptureFrameHorizontal {
1534
- aspect-ratio: 35 / 22;
1535
- width: 100%;
1536
- max-width: 640px;
1537
- }
1538
-
1539
- .IncodeCaptureFrame.IncodeCaptureFrameVertical {
1540
- aspect-ratio: 22 / 35;
1541
- width: 100%;
1542
- max-width: 274px;
1543
- }
1544
-
1545
- .IncodeCaptureFrame.IncodeCaptureFramePassport {
1546
- aspect-ratio: 42 / 30;
1547
- }
1548
-
1549
- .IncodeCaptureFrame.IncodeCaptureFrameIdle {
1550
- --frame-border-color: var(--border-neutral-100);
1551
- }
1552
-
1553
- .IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {
1554
- --frame-border-color: var(--border-status-focus);
1555
- }
1556
-
1557
- .IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {
1558
- --frame-border-color: var(--border-status-positive-static);
1559
- }
1560
-
1561
- .IncodeCaptureFrame.IncodeCaptureFrameError {
1562
- --frame-border-color: var(--border-status-negative);
1563
- }
1564
-
1565
- .IncodeIdCapturePage {
1566
- background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
1567
- }
1568
-
1569
- @media (min-width: 48rem) {
1570
- .IncodeIdCapturePage {
1571
- background-color: var(--color-black, #000);
1572
- }
1573
- }
1574
-
1575
- .IncodeIdCapturePage .IncodePageInner {
1576
- padding: var(--spacing-0, var(--spacing-none, 0px));
1577
- }
1578
-
1579
- .IncodeIdCapturePage .IncodePageContent {
1580
- flex: 1;
1581
- position: relative;
1582
- }
1583
-
1584
- .IncodeIdCapturePage .IncodeCaptureInitializing {
1585
- height: 100%;
1586
- color: var(--color-text-body-0, var(--text-body-0-static));
1587
- flex-direction: column;
1588
- justify-content: center;
1589
- align-items: center;
1590
- display: flex;
1591
- }
1592
-
1593
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo {
1594
- pointer-events: none;
1595
- inset: var(--spacing-0, var(--spacing-none, 0px));
1596
- position: absolute;
1597
- }
1598
-
1599
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo.IncodeCaptureVideoLoading {
1600
- opacity: 0;
1601
- }
1602
-
1603
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo .IncodeCaptureVideoElement {
1604
- inset: var(--spacing-0, var(--spacing-none, 0px));
1605
- object-fit: cover;
1606
- width: 100%;
1607
- max-width: 100%;
1608
- height: 100%;
1609
- position: absolute;
1610
- }
1611
-
1612
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureOverlay {
1613
- pointer-events: none;
1614
- justify-content: center;
1615
- align-items: center;
1616
- display: flex;
1617
- }
1618
-
1619
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureButton {
1620
- border-radius: var(--radius-button-primary, var(--button-primary-border-radius));
1621
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
1622
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
1623
- background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
1624
- color: var(--color-button-primary-text-default, var(--button-primary-text-default));
1625
- }
1626
-
1627
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing {
1628
- height: 100%;
1629
- color: var(--color-text-body-0, var(--text-body-0-static));
1630
- flex-direction: column;
1631
- justify-content: center;
1632
- align-items: center;
1633
- display: flex;
1634
- }
1635
-
1636
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing .IncodeCaptureInitializingText {
1637
- margin-top: var(--spacing-16, var(--spacing-16, 16px));
1638
- }
1639
-
1640
- .IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureUploading, .IncodeIdCapturePage .IncodeCaptureUploading {
1641
- height: 100%;
1642
- color: var(--color-text-body-0, var(--text-body-0-static));
1643
- flex-direction: column;
1644
- justify-content: center;
1645
- align-items: center;
1646
- display: flex;
1647
- }
1648
-
1649
- .IncodeCaptureOverlayId {
1650
- padding: var(--spacing-24, var(--spacing-24, 24px));
1651
- align-items: center;
1652
- }
1653
-
1654
- .IncodeCaptureOverlayId .IncodeCaptureTopSection {
1655
- justify-content: flex-end;
1656
- align-items: center;
1657
- gap: var(--spacing-24, var(--spacing-24, 24px));
1658
- padding-bottom: var(--spacing-40, var(--spacing-40, 40px));
1659
- z-index: 10;
1660
- flex-direction: column;
1661
- flex: 1;
1662
- display: flex;
1663
- }
1664
-
1665
- .IncodeCaptureOverlayId .IncodeCaptureTopSection .IncodeCameraOverlayHeader {
1666
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
1667
- padding-top: var(--spacing-16, var(--spacing-16, 16px));
1668
- }
1669
-
1670
- .IncodeCaptureOverlayId .IncodeCaptureFooter {
1671
- flex: 1;
1672
- justify-content: space-between;
1673
- }
1674
-
1675
- .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {
1676
- animation: .5s ease-out forwards slideUp;
1677
- }
1678
-
1679
- .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {
1680
- border-radius: var(--radius-medium, var(--border-radius-medium));
1681
- background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
1682
- padding: var(--spacing-16, var(--spacing-16, 16px));
1683
- }
1684
-
1685
- .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {
1686
- margin: var(--spacing-0, var(--spacing-none, 0px));
1687
- padding: var(--spacing-0, var(--spacing-none, 0px));
1688
- flex-direction: column;
1689
- align-items: center;
1690
- list-style-type: none;
1691
- display: flex;
1692
- }
1693
-
1694
- .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {
1695
- margin: var(--spacing-0, var(--spacing-none, 0px));
1696
- font-family: var(--typography-tooltip-family);
1697
- font-size: var(--typography-tooltip-m-size);
1698
- font-weight: var(--typography-tooltip-m-weight);
1699
- line-height: var(--typography-tooltip-m-line-height);
1700
- letter-spacing: var(--typography-tooltip-m-letter-spacing);
1701
- text-wrap: nowrap;
1702
- color: var(--color-text-body-0-static, var(--text-body-0-static));
1703
- }
1704
-
1705
- .IncodeCaptureFramePassport {
1706
- aspect-ratio: 42 / 30;
1707
- }
1708
-
1709
- .IncodeIdManualCaptureButton {
1710
- bottom: var(--spacing-24, var(--spacing-24, 24px));
1711
- z-index: 100;
1712
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
1713
- width: 100%;
1714
- translate: var(--tw-translate-x) var(--tw-translate-y);
1715
- justify-content: center;
1716
- align-items: center;
1717
- gap: var(--spacing-4, var(--spacing-4, 4px));
1718
- flex-direction: column;
1719
- animation: .5s ease-out forwards slideUp;
1720
- display: flex;
1721
- position: absolute;
1722
- left: 50%;
1723
- }
1724
-
1725
- .IncodeIdManualCaptureButton .IncodeButtonLink {
1726
- height: 100%;
1727
- padding: var(--spacing-0, var(--spacing-none, 0px));
1728
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1729
- }
1730
-
1731
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {
1732
- border-radius: var(--radius-medium, var(--border-radius-medium));
1733
- background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
1734
- padding: var(--spacing-16, var(--spacing-16, 16px));
1735
- }
1736
-
1737
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {
1738
- margin: var(--spacing-0, var(--spacing-none, 0px));
1739
- padding: var(--spacing-0, var(--spacing-none, 0px));
1740
- flex-direction: column;
1741
- align-items: center;
1742
- list-style-type: none;
1743
- display: flex;
1744
- }
1745
-
1746
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {
1747
- margin: var(--spacing-0, var(--spacing-none, 0px));
1748
- font-family: var(--typography-tooltip-family);
1749
- font-size: var(--typography-tooltip-m-size);
1750
- font-weight: var(--typography-tooltip-m-weight);
1751
- line-height: var(--typography-tooltip-m-line-height);
1752
- letter-spacing: var(--typography-tooltip-m-letter-spacing);
1753
- text-wrap: nowrap;
1754
- color: var(--color-text-body-0-static, var(--text-body-0-static));
1755
- }
1756
-
1757
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {
1758
- transition: filter .2s, transform .2s;
1759
- }
1760
-
1761
- .IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {
1762
- filter: brightness(.8);
1763
- transform: scale(.95);
1764
- }
1765
-
1766
- @keyframes slideUpAndDown {
1767
- 0%, 12% {
1768
- opacity: 0;
1769
- transform: translateY(100%);
1770
- }
1771
-
1772
- 24% {
1773
- opacity: 1;
1774
- transform: translateY(0);
1775
- }
1776
-
1777
- 76% {
1778
- opacity: 1;
1779
- transform: translateY(0);
1780
- }
1781
-
1782
- 88%, 100% {
1783
- opacity: 0;
1784
- transform: translateY(100%);
1785
- }
1786
- }
1787
-
1788
- .IncodeIdHint {
1789
- inset: var(--spacing-0, var(--spacing-none, 0px));
1790
- z-index: 10;
1791
- justify-content: center;
1792
- align-items: center;
1793
- display: flex;
1794
- position: absolute;
1795
- }
1796
-
1797
- .IncodeIdHint .IncodeIdHintAnimated {
1798
- justify-content: center;
1799
- align-items: center;
1800
- width: 100%;
1801
- height: 100%;
1802
- animation: 3s ease-in-out forwards slideUpAndDown;
1803
- display: flex;
1804
- position: relative;
1805
- }
1806
-
1807
- .IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {
1808
- justify-content: center;
1809
- align-items: center;
1810
- display: flex;
1811
- }
1812
-
1813
- .IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {
1814
- width: 800px;
1815
- min-width: 800px;
1816
- height: 800px;
1817
- min-height: 800px;
1818
- }
1819
-
1820
- .IncodeIdProcessingLayout {
1821
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
1822
- flex-direction: column;
1823
- justify-content: center;
1824
- align-items: center;
1825
- width: 100%;
1826
- height: 100%;
1827
- display: flex;
1828
- }
1829
-
1830
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {
1831
- z-index: 10;
1832
- flex-direction: column;
1833
- align-items: center;
1834
- width: 100%;
1835
- height: 100%;
1836
- display: flex;
1837
- }
1838
-
1839
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {
1840
- justify-content: flex-end;
1841
- align-items: center;
1842
- gap: var(--spacing-24, var(--spacing-24, 24px));
1843
- padding-bottom: var(--spacing-40, var(--spacing-40, 40px));
1844
- z-index: 10;
1845
- flex-direction: column;
1846
- flex: 1;
1847
- width: 100%;
1848
- display: flex;
1849
- }
1850
-
1851
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {
1852
- overflow: hidden;
1853
- }
1854
-
1855
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
1856
- width: clamp(180px, 30vh, 274px);
1857
- }
1858
-
1859
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
1860
- left: -25%;
1861
- right: -25%;
1862
- }
1863
-
1864
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
1865
- object-fit: cover;
1866
- width: 100%;
1867
- max-width: 100%;
1868
- height: 100%;
1869
- max-height: 100%;
1870
- }
1871
-
1872
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage.IncodeIdProcessingImageBlurred {
1873
- filter: blur(var(--id-processing-image-blur-radius));
1874
- -webkit-backdrop-filter: blur(var(--id-processing-image-blur-radius));
1875
- backdrop-filter: blur(var(--id-processing-image-blur-radius));
1876
- }
1877
-
1878
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {
1879
- pointer-events: none;
1880
- z-index: 10;
1881
- justify-content: center;
1882
- align-items: center;
1883
- display: flex;
1884
- position: absolute;
1885
- inset: 0 -10%;
1886
- }
1887
-
1888
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {
1889
- width: 100%;
1890
- max-width: 384px;
1891
- padding-top: var(--spacing-8, var(--spacing-8, 8px));
1892
- z-index: 10;
1893
- flex-direction: column;
1894
- flex: 1;
1895
- justify-content: space-between;
1896
- align-items: center;
1897
- display: flex;
1898
- }
1899
-
1900
- .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {
1901
- justify-content: center;
1902
- align-items: center;
1903
- gap: var(--spacing-4, var(--spacing-4, 4px));
1904
- padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
1905
- font-family: var(--typography-body-family);
1906
- font-size: var(--typography-body-m-regular-size);
1907
- font-weight: var(--typography-body-m-regular-weight);
1908
- line-height: var(--typography-body-m-regular-line-height);
1909
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
1910
- white-space: nowrap;
1911
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1912
- display: flex;
1913
- }
1914
-
1915
- .IncodeIdProcessingLayout .IncodeAnalyzingContent {
1916
- flex-direction: column;
1917
- align-items: center;
1918
- display: flex;
1919
- }
1920
-
1921
- .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeProgressBarContainer {
1922
- margin-bottom: var(--spacing-24, var(--spacing-24, 24px));
1923
- }
1924
-
1925
- .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {
1926
- font-family: var(--typography-headline-family);
1927
- font-size: var(--typography-headline-h2-size);
1928
- font-weight: var(--typography-headline-h2-weight);
1929
- line-height: var(--typography-headline-h2-line-height);
1930
- letter-spacing: var(--typography-headline-h2-letter-spacing);
1931
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1932
- text-align: center;
1933
- }
1934
-
1935
- .IncodeIdProcessingLayout .IncodeAnalyzingLottie {
1936
- width: 100%;
1937
- max-width: none;
1938
- }
1939
-
1940
- .IncodeIdProcessingLayout .IncodeIdProcessingResultContent {
1941
- flex-direction: column;
1942
- align-items: center;
1943
- display: flex;
1944
- }
1945
-
1946
- .IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {
1947
- font-family: var(--typography-headline-family);
1948
- font-size: var(--typography-headline-h2-size);
1949
- font-weight: var(--typography-headline-h2-weight);
1950
- line-height: var(--typography-headline-h2-line-height);
1951
- letter-spacing: var(--typography-headline-h2-letter-spacing);
1952
- color: var(--color-text-body-primary, var(--text-body-800-primary));
1953
- text-align: center;
1954
- }
1955
-
1956
- .IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {
1957
- font-family: var(--typography-headline-family);
1958
- font-size: var(--typography-headline-h5-size);
1959
- font-weight: var(--typography-headline-h5-weight);
1960
- line-height: var(--typography-headline-h5-line-height);
1961
- letter-spacing: var(--typography-headline-h5-letter-spacing);
1962
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
1963
- text-align: center;
1964
- max-width: 300px;
1965
- }
1966
-
1967
- .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {
1968
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
1969
- gap: var(--spacing-16, var(--spacing-16, 16px));
1970
- flex-direction: column;
1971
- width: 100%;
1972
- display: flex;
1973
- }
1974
-
1975
- .IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {
1976
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
1977
- text-align: center;
1978
- font-family: var(--typography-headline-family);
1979
- font-size: var(--typography-headline-h4-size);
1980
- font-weight: var(--typography-headline-h4-weight);
1981
- line-height: var(--typography-headline-h4-line-height);
1982
- letter-spacing: var(--typography-headline-h4-letter-spacing);
1983
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
1984
- }
1985
-
1986
- .IncodeIdError {
1987
- inset: var(--spacing-0, var(--spacing-none, 0px));
1988
- z-index: 1000;
1989
- justify-content: center;
1990
- align-items: center;
1991
- gap: var(--spacing-16, var(--spacing-16, 16px));
1992
- flex-direction: column;
1993
- width: 100%;
1994
- height: 100%;
1995
- display: flex;
1996
- position: fixed;
1997
- }
1998
-
1999
- .IncodeIdErrorMessage {
2000
- text-align: center;
2001
- font-size: var(--text-18, var(--primitive-typography-size-18));
2002
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2003
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2004
- color: var(--color-text-body-0, var(--text-body-0-static));
2005
- max-width: 350px;
2006
- margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
2007
- }
2008
-
2009
- .IncodeIdNoAttemptsContent {
2010
- padding-inline: var(--spacing-20, var(--spacing-20, 20px));
2011
- flex-direction: column;
2012
- flex: 1;
2013
- justify-content: center;
2014
- align-items: center;
2015
- max-width: 800px;
2016
- max-height: 840px;
2017
- margin: auto;
2018
- display: flex;
2019
- }
2020
-
2021
- .IncodeIdNoAttemptsIcon {
2022
- margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
2023
- }
2024
-
2025
- .IncodeIdNoAttemptsTitle {
2026
- text-align: center;
2027
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2028
- }
2029
-
2030
- .IncodeIdNoAttemptsSubtitle {
2031
- font-size: var(--text-14, var(--primitive-typography-size-14));
2032
- --tw-font-weight: var(--font-weight-normal, 400);
2033
- font-weight: var(--font-weight-normal, 400);
2034
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
2035
- text-align: center;
2036
- max-width: 350px;
2037
- }
2038
-
2039
- .IncodeIdNoAttemptsButtonContainer {
2040
- bottom: var(--spacing-32, var(--spacing-32, 32px));
2041
- right: var(--spacing-0, var(--spacing-none, 0px));
2042
- left: var(--spacing-0, var(--spacing-none, 0px));
2043
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
2044
- justify-content: center;
2045
- display: flex;
2046
- position: absolute;
2047
- }
2048
-
2049
- .IncodeIdCaptureNotification {
2050
- top: var(--spacing-24, var(--spacing-24, 24px));
2051
- right: var(--spacing-24, var(--spacing-24, 24px));
2052
- left: var(--spacing-24, var(--spacing-24, 24px));
2053
- z-index: 100;
2054
- max-width: 420px;
2055
- padding-bottom: var(--spacing-32, var(--spacing-32, 32px));
2056
- align-items: flex-end;
2057
- margin: auto;
2058
- display: flex;
2059
- position: absolute;
2060
- }
2061
-
2062
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {
2063
- z-index: 100;
2064
- border-radius: var(--radius-large, var(--border-radius-large));
2065
- border-style: var(--tw-border-style);
2066
- border-width: 2px;
2067
- border-color: var(--color-border-neutral-300, var(--border-neutral-300));
2068
- background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));
2069
- width: 100%;
2070
- padding-inline: var(--spacing-20, var(--spacing-20, 20px));
2071
- display: flex;
2072
- overflow: hidden;
2073
- box-shadow: 0 2.079px 36.379px #00000059;
2074
- }
2075
-
2076
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {
2077
- justify-content: center;
2078
- gap: var(--spacing-8, var(--spacing-8, 8px));
2079
- padding-top: var(--spacing-16, var(--spacing-16, 16px));
2080
- padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
2081
- text-align: center;
2082
- color: var(--color-white, #fff);
2083
- flex-direction: column;
2084
- display: flex;
2085
- }
2086
-
2087
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {
2088
- font-family: var(--typography-headline-family);
2089
- font-size: var(--typography-headline-h3-size);
2090
- font-weight: var(--typography-headline-h3-weight);
2091
- line-height: var(--typography-headline-h3-line-height);
2092
- letter-spacing: var(--typography-headline-h3-letter-spacing);
2093
- }
2094
-
2095
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {
2096
- font-family: var(--typography-headline-family);
2097
- font-size: var(--typography-headline-h5-size);
2098
- font-weight: var(--typography-headline-h5-weight);
2099
- line-height: var(--typography-headline-h5-line-height);
2100
- letter-spacing: var(--typography-headline-h5-letter-spacing);
2101
- color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
2102
- }
2103
-
2104
- .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {
2105
- justify-content: center;
2106
- align-items: center;
2107
- width: auto;
2108
- height: 130px;
2109
- display: flex;
2110
- }
2111
-
2112
- .IncodeManualUploadPage .IncodeManualUploadContainer {
2113
- width: 100%;
2114
- padding-block: var(--spacing-24, var(--spacing-24, 24px));
2115
- flex-direction: column;
2116
- display: flex;
2117
- }
2118
-
2119
- .IncodeManualUploadPage .IncodeManualUploadFooter {
2120
- margin-top: auto;
2121
- margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
2122
- row-gap: var(--spacing-24, var(--spacing-24, 24px));
2123
- width: 100%;
2124
- padding-top: var(--spacing-24, var(--spacing-24, 24px));
2125
- flex-direction: column;
2126
- display: flex;
2127
- }
2128
-
2129
- .IncodeManualUploadPage .IncodeManualUploadHintCard {
2130
- margin: var(--spacing-0, var(--spacing-none, 0px));
2131
- border-radius: var(--radius-x-small, var(--border-radius-x-small));
2132
- background-color: var(--color-surface-brand-50, var(--surface-brand-50));
2133
- width: 100%;
2134
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
2135
- padding-right: var(--spacing-12, var(--spacing-12, 12px));
2136
- padding-left: var(--spacing-32, var(--spacing-32, 32px));
2137
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2138
- list-style-type: disc;
2139
- }
2140
-
2141
- .IncodeManualUploadPage .IncodeManualUploadHintCard li {
2142
- font-family: var(--font-family-dm-sans, var(--primitive-typography-family-dm-sans));
2143
- font-size: var(--text-14, var(--primitive-typography-size-14));
2144
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2145
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2146
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2147
- }
2148
-
2149
- .IncodeManualUploadPage .IncodeManualUploadHintCard li + li {
2150
- margin-top: var(--spacing-4, var(--spacing-4, 4px));
2151
- }
2152
-
2153
- .IncodeManualUploadPage .IncodeManualUploadTabsList {
2154
- width: 100%;
2155
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
2156
- align-self: center;
2157
- display: flex;
2158
- }
2159
-
2160
- .IncodeManualUploadPage .IncodeManualUploadTabTrigger {
2161
- cursor: pointer;
2162
- border-bottom-style: var(--tw-border-style);
2163
- border-bottom-width: var(--border-width-bold, var(--primitive-border-width-2));
2164
- --tw-border-style: solid;
2165
- padding-inline: var(--spacing-12, var(--spacing-12, 12px));
2166
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
2167
- text-align: center;
2168
- font-family: var(--font-family-dm-sans, var(--primitive-typography-family-dm-sans));
2169
- font-size: var(--text-16, var(--primitive-typography-size-16));
2170
- --tw-leading: var(--spacing-16, var(--spacing-16, 16px));
2171
- line-height: var(--spacing-16, var(--spacing-16, 16px));
2172
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2173
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2174
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
2175
- background-color: #0000;
2176
- border-style: solid;
2177
- border-color: #0000;
2178
- flex: 1;
2179
- }
2180
-
2181
- .IncodeManualUploadPage .IncodeManualUploadTabTrigger:focus-visible {
2182
- border-radius: var(--radius-xs, .125rem);
2183
- outline-style: var(--tw-outline-style);
2184
- outline-offset: 2px;
2185
- outline-width: 2px;
2186
- outline-color: var(--color-border-status-focus, var(--border-status-focus));
2187
- }
2188
-
2189
- .IncodeManualUploadPage .IncodeManualUploadTabTrigger--active {
2190
- border-bottom-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
2191
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
2192
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
2193
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2194
- }
2195
-
2196
- .IncodeManualUploadPage .IncodeManualUploadError {
2197
- align-items: flex-start;
2198
- gap: var(--spacing-4, var(--spacing-4, 4px));
2199
- width: 100%;
2200
- font-family: var(--typography-body-family);
2201
- font-size: var(--typography-body-m-regular-size);
2202
- font-weight: var(--typography-body-m-regular-weight);
2203
- line-height: var(--typography-body-m-regular-line-height);
2204
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
2205
- color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
2206
- display: flex;
2207
- }
2208
-
2209
- .IncodeManualUploadPage .IncodeManualUploadError p {
2210
- margin: var(--spacing-0, var(--spacing-none, 0px));
2211
- flex: 1;
2212
- }
2213
-
2214
- .IncodeManualUploadPage .IncodeManualUploadTab {
2215
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
2216
- margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
2217
- gap: var(--spacing-16, var(--spacing-16, 16px));
2218
- flex-direction: column;
2219
- width: 100%;
2220
- display: flex;
2221
- }
2222
-
2223
- .IncodeManualUploadSlot {
2224
- align-items: center;
2225
- gap: var(--spacing-12, var(--spacing-12, 12px));
2226
- border-radius: var(--radius-medium, var(--border-radius-medium));
2227
- border-style: var(--tw-border-style);
2228
- border-width: var(--border-width-regular, var(--primitive-border-width-1));
2229
- --tw-border-style: solid;
2230
- border-style: solid;
2231
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
2232
- background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
2233
- width: 100%;
2234
- padding-block: var(--spacing-24, var(--spacing-24, 24px));
2235
- padding-right: var(--spacing-24, var(--spacing-24, 24px));
2236
- padding-left: var(--spacing-20, var(--spacing-20, 20px));
2237
- display: flex;
2238
- }
2239
-
2240
- .IncodeManualUploadSlot .IncodeManualUploadSlotIcon {
2241
- width: var(--spacing-24, var(--spacing-24, 24px));
2242
- height: var(--spacing-24, var(--spacing-24, 24px));
2243
- flex-shrink: 0;
2244
- justify-content: center;
2245
- display: flex;
2246
- }
2247
-
2248
- .IncodeManualUploadSlot .IncodeManualUploadSlotIconHighlight {
2249
- fill: var(--color-icon-neutral-500, var(--icon-neutral-500));
2250
- }
2251
-
2252
- .IncodeManualUploadSlot .IncodeManualUploadSlotLabel {
2253
- text-overflow: ellipsis;
2254
- white-space: nowrap;
2255
- text-align: left;
2256
- font-family: var(--typography-headline-family);
2257
- font-size: var(--typography-headline-h5-size);
2258
- font-weight: var(--typography-headline-h5-weight);
2259
- line-height: var(--typography-headline-h5-line-height);
2260
- letter-spacing: var(--typography-headline-h5-letter-spacing);
2261
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2262
- flex: 1;
2263
- overflow: hidden;
2264
- }
2265
-
2266
- .IncodeManualUploadSlot .IncodeManualUploadSlotAction {
2267
- cursor: pointer;
2268
- border-radius: var(--radius-full, var(--border-radius-full));
2269
- border-style: var(--tw-border-style);
2270
- border-width: var(--border-width-none, var(--primitive-border-width-0));
2271
- --tw-border-style: none;
2272
- background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
2273
- padding: var(--spacing-8, var(--spacing-8, 8px));
2274
- color: var(--color-button-primary-text-default, var(--button-primary-text-default));
2275
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
2276
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
2277
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
2278
- --tw-duration: .2s;
2279
- border-style: none;
2280
- flex-shrink: 0;
2281
- justify-content: center;
2282
- align-items: center;
2283
- transition-duration: .2s;
2284
- display: inline-flex;
2285
- }
2286
-
2287
- .IncodeManualUploadSlot .IncodeManualUploadSlotAction:hover:not(:disabled) {
2288
- background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));
2289
- }
2290
-
2291
- .IncodeManualUploadSlot .IncodeManualUploadSlotAction:disabled {
2292
- cursor: not-allowed;
2293
- background-color: var(--color-button-primary-surface-disabled, var(--button-primary-surface-disabled));
2294
- color: var(--color-button-primary-text-disabled, var(--button-primary-text-disabled));
2295
- }
2296
-
2297
- .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction, .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction:hover:not(:disabled) {
2298
- padding: var(--spacing-0, var(--spacing-none, 0px));
2299
- color: var(--color-surface-status-positive-500, var(--surface-status-positive-500));
2300
- background-color: #0000;
2301
- }
2302
-
2303
- .IncodeManualUploadSlot.IncodeManualUploadSlot--disabled {
2304
- opacity: .5;
2305
- }
2306
-
2307
- .IncodeManualUploadSlot .IncodeManualUploadSlotInput {
2308
- clip-path: inset(50%);
2309
- white-space: nowrap;
2310
- border-width: 0;
2311
- width: 1px;
2312
- height: 1px;
2313
- margin: -1px;
2314
- padding: 0;
2315
- position: absolute;
2316
- overflow: hidden;
2317
- }
2318
-
2319
- .IncodeDigitalIdUploadPage {
2320
- height: 100%;
2321
- }
2322
-
2323
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadBody {
2324
- justify-content: center;
2325
- align-items: center;
2326
- row-gap: var(--spacing-16, var(--spacing-16, 16px));
2327
- width: 100%;
2328
- height: 100%;
2329
- max-width: var(--digital-id-content-max-w);
2330
- flex-direction: column;
2331
- margin-inline: auto;
2332
- display: flex;
2333
- }
2334
-
2335
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewBody {
2336
- row-gap: var(--spacing-16, var(--spacing-16, 16px));
2337
- grid-template-columns: 1fr;
2338
- grid-template-rows: var(--spacing-24) var(--digital-id-preview-h) var(--spacing-24);
2339
- width: 100%;
2340
- height: 100%;
2341
- max-width: var(--digital-id-content-max-w);
2342
- align-content: center;
2343
- justify-items: center;
2344
- margin-inline: auto;
2345
- display: grid;
2346
- }
2347
-
2348
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreStatusZone {
2349
- justify-content: center;
2350
- align-items: center;
2351
- width: 100%;
2352
- height: 100%;
2353
- display: flex;
2354
- }
2355
-
2356
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPostCaptionZone {
2357
- justify-content: center;
2358
- align-items: flex-start;
2359
- width: 100%;
2360
- height: 100%;
2361
- display: flex;
2362
- }
2363
-
2364
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFooter {
2365
- width: 100%;
2366
- margin-inline: auto;
2367
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
2368
- margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
2369
- justify-content: flex-end;
2370
- row-gap: var(--spacing-16, var(--spacing-16, 16px));
2371
- max-width: var(--digital-id-content-max-w);
2372
- min-height: var(--digital-id-footer-min-h);
2373
- flex-direction: column;
2374
- display: flex;
2375
- }
2376
-
2377
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadHiddenInput {
2378
- display: none;
2379
- }
2380
-
2381
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadTutorialIllustration {
2382
- width: 100%;
2383
- max-height: var(--digital-id-tutorial-illustration-max-h);
2384
- flex: 1;
2385
- justify-content: center;
2386
- align-items: center;
2387
- display: flex;
2388
- overflow: hidden;
2389
- }
2390
-
2391
- .IncodeDigitalIdUploadPage .IncodeUploadIdScreenImage {
2392
- max-height: var(--digital-id-illustration-max-h);
2393
- width: auto;
2394
- }
2395
-
2396
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewCard {
2397
- border-radius: var(--radius-medium, var(--border-radius-medium));
2398
- border-style: var(--tw-border-style);
2399
- --tw-border-style: solid;
2400
- border-style: solid;
2401
- border-width: 1px;
2402
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
2403
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
2404
- width: var(--digital-id-preview-w);
2405
- height: var(--digital-id-preview-h);
2406
- justify-content: center;
2407
- align-items: center;
2408
- display: flex;
2409
- overflow: hidden;
2410
- }
2411
-
2412
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreview {
2413
- width: var(--digital-id-preview-w);
2414
- height: var(--digital-id-preview-h);
2415
- justify-content: center;
2416
- align-items: center;
2417
- display: flex;
2418
- position: relative;
2419
- overflow: visible;
2420
- }
2421
-
2422
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreviewPdf {
2423
- border-radius: var(--radius-medium, var(--border-radius-medium));
2424
- border-style: var(--tw-border-style);
2425
- border-width: var(--border-width-bold, var(--primitive-border-width-2));
2426
- --tw-border-style: solid;
2427
- border-style: solid;
2428
- border-color: var(--color-border-status-positive, var(--border-status-positive-static));
2429
- object-fit: contain;
2430
- width: 100%;
2431
- height: 100%;
2432
- overflow: hidden;
2433
- }
2434
-
2435
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewPdf {
2436
- object-fit: contain;
2437
- width: 100%;
2438
- height: 100%;
2439
- }
2440
-
2441
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFileName {
2442
- text-align: center;
2443
- font-family: var(--typography-body-family);
2444
- font-size: var(--typography-body-m-regular-size);
2445
- font-weight: var(--typography-body-m-regular-weight);
2446
- line-height: var(--typography-body-m-regular-line-height);
2447
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
2448
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2449
- max-width: var(--digital-id-file-name-max-w);
2450
- text-overflow: ellipsis;
2451
- white-space: nowrap;
2452
- overflow: hidden;
2453
- }
2454
-
2455
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar {
2456
- border-radius: var(--radius-full, var(--border-radius-full));
2457
- background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
2458
- width: var(--digital-id-progress-bar-w);
2459
- height: var(--digital-id-progress-bar-h);
2460
- position: relative;
2461
- overflow: hidden;
2462
- }
2463
-
2464
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar > span {
2465
- top: var(--spacing-0, var(--spacing-none, 0px));
2466
- left: var(--spacing-0, var(--spacing-none, 0px));
2467
- border-radius: var(--radius-full, var(--border-radius-full));
2468
- height: 100%;
2469
- transition-property: all;
2470
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
2471
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
2472
- background-color: var(--color-icon-status-positive, var(--icon-status-positive));
2473
- position: absolute;
2474
- }
2475
-
2476
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {
2477
- pointer-events: none;
2478
- width: var(--digital-id-preview-w);
2479
- height: var(--digital-id-laser-h);
2480
- transform: translateX(-50%) scale(var(--digital-id-laser-scale));
2481
- position: absolute;
2482
- top: -2px;
2483
- left: 50%;
2484
- }
2485
-
2486
- @media (prefers-reduced-motion: reduce) {
2487
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {
2488
- display: none;
2489
- }
2490
- }
2491
-
2492
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadSuccessIcon {
2493
- color: var(--color-icon-status-positive, var(--icon-status-positive));
2494
- justify-content: center;
2495
- align-items: center;
2496
- display: flex;
2497
- }
2498
-
2499
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorIcon {
2500
- margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
2501
- color: var(--color-icon-status-negative, var(--icon-status-negative));
2502
- }
2503
-
2504
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorPreview {
2505
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
2506
- border-radius: var(--radius-medium, var(--border-radius-medium));
2507
- border-style: var(--tw-border-style);
2508
- --tw-border-style: solid;
2509
- border-style: solid;
2510
- border-width: 1px;
2511
- border-color: var(--color-border-status-negative, var(--border-status-negative));
2512
- padding: var(--spacing-4);
2513
- }
2514
-
2515
- .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadAttempts {
2516
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
2517
- font-family: var(--typography-body-family);
2518
- font-size: var(--typography-body-s-regular-size);
2519
- font-weight: var(--typography-body-s-regular-weight);
2520
- line-height: var(--typography-body-s-regular-line-height);
2521
- letter-spacing: var(--typography-body-s-regular-letter-spacing);
2522
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
2523
- }
2524
-
2525
- .IncodeIdOcrPage {
2526
- width: 100%;
2527
- height: 100%;
2528
- animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
2529
- margin-inline: auto;
2530
- animation-fill-mode: both;
2531
- }
2532
-
2533
- @media (min-width: 48rem) {
2534
- .IncodeIdOcrPage.IncodePageContainer {
2535
- align-items: stretch;
2536
- }
2537
- }
2538
-
2539
- .IncodeIdOcrPage .IncodePageInner {
2540
- height: 100%;
2541
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2542
- }
2543
-
2544
- .IncodeIdOcrPage .IncodePageContent {
2545
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2546
- }
2547
-
2548
- .IncodeIdOcrPage .IncodeIdOcrForm {
2549
- margin-top: var(--spacing-32, var(--spacing-32, 32px));
2550
- height: 100%;
2551
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2552
- justify-content: flex-start;
2553
- align-items: center;
2554
- gap: var(--spacing-16, var(--spacing-16, 16px));
2555
- flex-direction: column;
2556
- width: 100%;
2557
- display: flex;
2558
- overflow-y: auto;
2559
- }
2560
-
2561
- .IncodeIdOcrPage .IncodeIdOcrButton {
2562
- bottom: var(--spacing-0, var(--spacing-none, 0px));
2563
- width: 100%;
2564
- position: sticky;
2565
- }
2566
-
2567
- .IncodeIdOcrPage .IncodeIdOcrRadioGroup {
2568
- max-width: var(--incode-form-max-w);
2569
- }
2570
-
2571
- .IncodeDocumentUploadPage {
2572
- background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
2573
- }
2574
-
2575
- .IncodeDocumentUploadInitializing {
2576
- height: 100%;
2577
- color: var(--color-text-body-0, var(--text-body-0-static));
2578
- flex-direction: column;
2579
- justify-content: center;
2580
- align-items: center;
2581
- display: flex;
2582
- }
2583
-
2584
- .IncodeDocumentUploadInitializingText {
2585
- margin-top: var(--spacing-16, var(--spacing-16, 16px));
2586
- }
2587
-
2588
- .IncodeDocumentUploadUploading {
2589
- flex-direction: column;
2590
- justify-content: center;
2591
- align-items: center;
2592
- height: 100%;
2593
- display: flex;
2594
- }
2595
-
2596
- .IncodeDocumentUploadError {
2597
- justify-content: center;
2598
- align-items: center;
2599
- gap: var(--spacing-16, var(--spacing-16, 16px));
2600
- padding: var(--spacing-24, var(--spacing-24, 24px));
2601
- color: var(--color-text-body-0, var(--text-body-0-static));
2602
- flex-direction: column;
2603
- display: flex;
2604
- }
2605
-
2606
- .IncodeDocumentUploadErrorMessage {
2607
- text-align: center;
2608
- }
2609
-
2610
- .IncodeDocumentUploadRetryButton {
2611
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
2612
- }
2613
-
2614
- .IncodeDocumentCaptureFileInput {
2615
- pointer-events: none;
2616
- border-style: var(--tw-border-style);
2617
- padding: var(--spacing-0, var(--spacing-none, 0px));
2618
- opacity: 0;
2619
- clip: rect(0, 0, 0, 0);
2620
- clip-path: inset(50%);
2621
- white-space: nowrap;
2622
- border-width: 0;
2623
- position: absolute;
2624
- overflow: hidden;
2625
- width: 0 !important;
2626
- height: 0 !important;
2627
- margin: 0 !important;
2628
- }
2629
-
2630
- .IncodeDocumentCaptureFileInput::file-selector-button {
2631
- display: none;
2632
- }
2633
-
2634
- .IncodeDocumentCapturePageTutorial .IncodePageContent {
2635
- flex-direction: column;
2636
- flex: 1;
2637
- display: flex;
2638
- }
2639
-
2640
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent {
2641
- margin-block: var(--spacing-16, var(--spacing-16, 16px));
2642
- flex-direction: column;
2643
- flex: 1;
2644
- justify-content: center;
2645
- align-items: center;
2646
- display: flex;
2647
- }
2648
-
2649
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent .IncodeDocumentCaptureTutorialIllustration {
2650
- flex: 1;
2651
- justify-content: center;
2652
- align-items: center;
2653
- width: 292px;
2654
- margin-inline: auto;
2655
- display: flex;
2656
- }
2657
-
2658
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent .IncodeDocumentCaptureTutorialIllustration .IncodeDocumentCaptureTutorialImage {
2659
- width: 100%;
2660
- }
2661
-
2662
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureError {
2663
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
2664
- text-align: center;
2665
- font-size: var(--text-14, var(--primitive-typography-size-14));
2666
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2667
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
2668
- color: var(--input-text-helper-negative, #e53e3e);
2669
- }
2670
-
2671
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureActions {
2672
- gap: var(--spacing-8, var(--spacing-8, 8px));
2673
- padding-inline: var(--spacing-8, var(--spacing-8, 8px));
2674
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
2675
- flex-direction: column;
2676
- display: flex;
2677
- }
2678
-
2679
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureActions .IncodeDocumentCaptureSkipWrapper {
2680
- padding-top: var(--spacing-8, var(--spacing-8, 8px));
2681
- justify-content: center;
2682
- display: flex;
2683
- }
2684
-
2685
- .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureCentered {
2686
- justify-content: center;
2687
- align-items: center;
2688
- gap: var(--spacing-16, var(--spacing-16, 16px));
2689
- flex-direction: column;
2690
- flex: 1;
2691
- display: flex;
2692
- }
2693
-
2694
- .IncodeDocumentCaptureBottomSheetOptions {
2695
- width: 100%;
2696
- padding-top: var(--spacing-8, var(--spacing-8, 8px));
2697
- padding-bottom: var(--spacing-20, var(--spacing-20, 20px));
2698
- flex-direction: column;
2699
- align-items: flex-start;
2700
- display: flex;
2701
- }
2702
-
2703
- .IncodeDocumentCaptureBottomSheetOptions .IncodeDocumentCaptureBottomSheetOption {
2704
- align-items: center;
2705
- gap: var(--spacing-16, var(--spacing-16, 16px));
2706
- border-style: var(--tw-border-style);
2707
- border-width: var(--border-width-none, var(--primitive-border-width-0));
2708
- --tw-border-style: none;
2709
- width: 100%;
2710
- padding-inline: var(--spacing-12, var(--spacing-12, 12px));
2711
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
2712
- font-family: var(--typography-headline-family);
2713
- font-size: var(--typography-headline-h5-size);
2714
- font-weight: var(--typography-headline-h5-weight);
2715
- line-height: var(--typography-headline-h5-line-height);
2716
- letter-spacing: var(--typography-headline-h5-letter-spacing);
2717
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2718
- background-color: #0000;
2719
- border-style: none;
2720
- display: flex;
2721
- }
2722
-
2723
- .IncodeDocumentCaptureBottomSheetOptions .IncodeDocumentCaptureBottomSheetOption svg {
2724
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2725
- flex-shrink: 0;
2726
- }
2727
-
2728
- .IncodeDocumentCaptureReviewPage .IncodePageContent {
2729
- padding: var(--spacing-0, var(--spacing-none, 0px));
2730
- flex-direction: column;
2731
- flex: 1;
2732
- display: flex;
2733
- overflow: hidden;
2734
- }
2735
-
2736
- @media (min-width: 48rem) {
2737
- .IncodeDocumentCaptureReviewPage .IncodePageInner {
2738
- padding: var(--spacing-24, var(--spacing-24, 24px));
2739
- }
2740
- }
2741
-
2742
- .IncodeDocumentCaptureReviewLayout {
2743
- flex-direction: column;
2744
- flex: 1;
2745
- display: flex;
2746
- overflow: hidden;
2747
- }
2748
-
2749
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader {
2750
- flex-direction: column;
2751
- justify-content: center;
2752
- align-items: center;
2753
- height: 100px;
2754
- display: flex;
2755
- }
2756
-
2757
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewTitle {
2758
- text-align: center;
2759
- font-family: var(--typography-headline-family);
2760
- font-size: var(--typography-headline-h2-size);
2761
- font-weight: var(--typography-headline-h2-weight);
2762
- line-height: var(--typography-headline-h2-line-height);
2763
- letter-spacing: var(--typography-headline-h2-letter-spacing);
2764
- }
2765
-
2766
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewSubtitle {
2767
- max-width: var(--incode-form-max-w);
2768
- text-align: center;
2769
- font-family: var(--typography-headline-family);
2770
- font-size: var(--typography-headline-h5-size);
2771
- font-weight: var(--typography-headline-h5-weight);
2772
- line-height: var(--typography-headline-h5-line-height);
2773
- letter-spacing: var(--typography-headline-h5-letter-spacing);
2774
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
2775
- }
2776
-
2777
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview {
2778
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2779
- flex-direction: column;
2780
- flex: 1;
2781
- justify-content: center;
2782
- align-items: center;
2783
- display: flex;
2784
- overflow: hidden;
2785
- }
2786
-
2787
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview.IncodeDocumentCaptureReviewPreviewPdf {
2788
- padding-inline: var(--spacing-48, var(--spacing-48, 48px));
2789
- }
2790
-
2791
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImageContainer {
2792
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2793
- border-radius: var(--radius-medium, var(--border-radius-medium));
2794
- background-color: var(--color-neutral-50, oklch(98.5% 0 0));
2795
- flex: 1;
2796
- display: flex;
2797
- }
2798
-
2799
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImage {
2800
- border-radius: var(--radius-medium, var(--border-radius-medium));
2801
- object-fit: cover;
2802
- border-style: var(--tw-border-style);
2803
- border-width: 4px;
2804
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
2805
- width: 100%;
2806
- max-height: 100%;
2807
- }
2808
-
2809
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImage.IncodeDocumentCaptureSuccessBorder {
2810
- border-color: var(--color-border-status-positive, var(--border-status-positive-static));
2811
- }
2812
-
2813
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeCaptureEncryptionLabel {
2814
- justify-content: center;
2815
- align-items: center;
2816
- gap: var(--spacing-4, var(--spacing-4, 4px));
2817
- display: flex;
2818
- }
2819
-
2820
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter {
2821
- width: 100%;
2822
- max-width: var(--incode-form-max-w);
2823
- justify-content: center;
2824
- align-self: center;
2825
- align-items: center;
2826
- display: flex;
2827
- }
2828
-
2829
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter.IncodeDocumentCaptureReviewFooterEmpty {
2830
- visibility: hidden;
2831
- height: 56px;
2832
- }
2833
-
2834
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter .IncodeDocumentCaptureActionRow {
2835
- gap: var(--spacing-12, var(--spacing-12, 12px));
2836
- width: 100%;
2837
- display: flex;
2838
- }
2839
-
2840
- .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter .IncodeDocumentCaptureActionRow .IncodeButton {
2841
- flex: 1;
2842
- }
2843
-
2844
- .IncodeDocumentCaptureReviewCentered {
2845
- flex-direction: column;
2846
- flex: 1;
2847
- justify-content: center;
2848
- align-items: center;
2849
- display: flex;
2850
- }
2851
-
2852
- .IncodeDocumentCapturePdfCard {
2853
- justify-content: center;
2854
- align-items: center;
2855
- gap: var(--spacing-24, var(--spacing-24, 24px));
2856
- border-radius: var(--radius-large, var(--border-radius-large));
2857
- border-style: var(--tw-border-style);
2858
- border-width: 1px;
2859
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
2860
- background-color: var(--color-neutral-50, oklch(98.5% 0 0));
2861
- width: 100%;
2862
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
2863
- padding-block: var(--spacing-32, var(--spacing-32, 32px));
2864
- flex-direction: column;
2865
- display: flex;
2866
- overflow: hidden;
2867
- }
2868
-
2869
- .IncodeDocumentCapturePdfCard .ImageDocumentCapturePdfPreviewContainer {
2870
- width: var(--spacing-120, var(--spacing-120, 120px));
2871
- border-radius: var(--radius-lg, .5rem);
2872
- border-style: var(--tw-border-style);
2873
- border-width: 2px;
2874
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
2875
- background-color: var(--color-neutral-50, oklch(98.5% 0 0));
2876
- height: var(--document-capture-pdf-preview-height);
2877
- overflow: hidden;
2878
- }
2879
-
2880
- .IncodeDocumentCapturePdfCard .ImageDocumentCapturePdfPreviewContainer .ImageDocumentCapturePdfPreview {
2881
- border-style: var(--tw-border-style);
2882
- border-width: 0;
2883
- width: calc(100% + 4px);
2884
- height: calc(100% + 4px);
2885
- margin: -2px;
2886
- }
2887
-
2888
- .IncodeDocumentCapturePdfCard .IncodeDocumentCapturePdfFileName {
2889
- text-align: center;
2890
- font-family: var(--typography-headline-family);
2891
- font-size: var(--typography-headline-h5-size);
2892
- font-weight: var(--typography-headline-h5-weight);
2893
- line-height: var(--typography-headline-h5-line-height);
2894
- letter-spacing: var(--typography-headline-h5-letter-spacing);
2895
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2896
- overflow-wrap: break-word;
2897
- }
2898
-
2899
- .IncodeOverlay .IncodeDocumentCommonIssuesTitle {
2900
- font-family: var(--typography-headline-family);
2901
- font-size: var(--typography-headline-h2-size);
2902
- font-weight: var(--typography-headline-h2-weight);
2903
- line-height: var(--typography-headline-h2-line-height);
2904
- letter-spacing: var(--typography-headline-h2-letter-spacing);
2905
- }
2906
-
2907
- .IncodeOverlay .IncodeDocumentCommonIssuesCards {
2908
- gap: var(--spacing-32, var(--spacing-32, 32px));
2909
- width: 100%;
2910
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
2911
- flex-direction: column;
2912
- display: flex;
2913
- }
2914
-
2915
- .IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard {
2916
- align-items: flex-start;
2917
- gap: var(--spacing-16, var(--spacing-16, 16px));
2918
- background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
2919
- padding: var(--spacing-16, var(--spacing-16, 16px));
2920
- border-radius: 12px;
2921
- display: flex;
2922
- }
2923
-
2924
- .IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardIcon {
2925
- color: var(--color-text-body-primary, var(--text-body-800-primary));
2926
- flex-shrink: 0;
2927
- }
2928
-
2929
- .IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText {
2930
- gap: var(--spacing-4, var(--spacing-4, 4px));
2931
- flex-direction: column;
2932
- display: flex;
2933
- }
2934
-
2935
- .IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText .IncodeDocumentCommonIssuesCardTitle {
2936
- font-family: var(--typography-headline-family);
2937
- font-size: var(--typography-headline-h5-size);
2938
- font-weight: var(--typography-headline-h5-weight);
2939
- line-height: var(--typography-headline-h5-line-height);
2940
- letter-spacing: var(--typography-headline-h5-letter-spacing);
2941
- }
2942
-
2943
- .IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText .IncodeDocumentCommonIssuesCardBody {
2944
- font-family: var(--typography-body-family);
2945
- font-size: var(--typography-body-m-regular-size);
2946
- font-weight: var(--typography-body-m-regular-weight);
2947
- line-height: var(--typography-body-m-regular-line-height);
2948
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
2949
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
2950
- }
2951
-
2952
- .IncodeOverlay .IncodeDocumentCommonIssuesButtons {
2953
- gap: var(--spacing-12, var(--spacing-12, 12px));
2954
- width: 100%;
2955
- padding-top: var(--spacing-24, var(--spacing-24, 24px));
2956
- flex-direction: column;
2957
- margin-top: auto;
2958
- display: flex;
2959
- }
2960
-
2961
- .IncodeCurpValidationPage .IncodePageContent {
2962
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
2963
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
2964
- flex-direction: column;
2965
- align-items: center;
2966
- display: flex;
2967
- }
2968
-
2969
- .IncodeCurpValidationPage .IncodeCurpValidation {
2970
- flex-direction: column;
2971
- align-items: center;
2972
- width: 100%;
2973
- height: 100%;
2974
- display: flex;
2975
- }
2976
-
2977
- .IncodeCurpValidationPage .IncodeCurpInput {
2978
- min-height: var(--spacing-0, var(--spacing-none, 0px));
2979
- width: 100%;
2980
- max-width: var(--incode-form-max-w);
2981
- gap: var(--spacing-12, var(--spacing-12, 12px));
2982
- flex-direction: column;
2983
- flex: 1;
2984
- display: flex;
2985
- }
2986
-
2987
- .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:focus {
2988
- text-decoration: none;
2989
- }
2990
-
2991
- .IncodeCurpValidationPage .IncodeCurpInput .IncodeButtonSecondary:active {
2992
- color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
2993
- }
2994
-
2995
- .IncodeCurpValidationPage .IncodeGenerateCurpForm {
2996
- width: 100%;
2997
- max-width: var(--incode-form-max-w);
2998
- gap: var(--spacing-8, var(--spacing-8, 8px));
2999
- flex-direction: column;
3000
- display: flex;
3001
- }
3002
-
3003
- .IncodeCurpValidationPage .IncodeCurpConfirm {
3004
- width: 100%;
3005
- max-width: var(--incode-curp-confirm-max-w);
3006
- flex-direction: column;
3007
- align-items: center;
3008
- display: flex;
3009
- }
3010
-
3011
- .IncodeCurpValidationPage .IncodeCurpConfirm .IncodeInput {
3012
- text-align: center;
3013
- font-family: var(--typography-input-dropdown-family);
3014
- font-size: var(--typography-input-dropdown-m-size);
3015
- font-weight: var(--typography-input-dropdown-m-weight);
3016
- line-height: var(--typography-input-dropdown-m-line-height);
3017
- letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
3018
- }
3019
-
3020
- .IncodeCurpValidationPage .IncodeCurpSuccess, .IncodeCurpValidationPage .IncodeCurpFailure {
3021
- flex-direction: column;
3022
- justify-content: center;
3023
- align-items: center;
3024
- display: flex;
3025
- }
3026
-
3027
- .IncodeCurpValidationPage .IncodeCurpSuccessTitle, .IncodeCurpValidationPage .IncodeCurpFailureTitle {
3028
- margin: var(--spacing-0, var(--spacing-none, 0px));
3029
- padding: var(--spacing-0, var(--spacing-none, 0px));
3030
- }
3031
-
3032
- .IncodeCurpValidationPage .IncodeCurpFailureHint {
3033
- margin: var(--spacing-0, var(--spacing-none, 0px));
3034
- text-align: center;
3035
- font-family: var(--typography-headline-family);
3036
- font-size: var(--typography-headline-h5-size);
3037
- font-weight: var(--typography-headline-h5-weight);
3038
- line-height: var(--typography-headline-h5-line-height);
3039
- letter-spacing: var(--typography-headline-h5-letter-spacing);
3040
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3041
- }
3042
-
3043
- .IncodeGeolocationPage {
3044
- animation: .4s ease-out fadeIn;
3045
- }
3046
-
3047
- @media (prefers-reduced-motion: reduce) {
3048
- .IncodeGeolocationPage {
3049
- animation: none;
3050
- }
3051
- }
3052
-
3053
- .IncodeGeolocationPage .IncodeGeolocationIconWrapper {
3054
- margin-top: var(--spacing-16, var(--spacing-16, 16px));
3055
- padding-block: var(--spacing-24, var(--spacing-24, 24px));
3056
- flex: 1;
3057
- justify-content: center;
3058
- align-items: center;
3059
- display: flex;
3060
- }
3061
-
3062
- .IncodeGeolocationPage .IncodeGeolocationButtonWrapper {
3063
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
3064
- }
3065
-
3066
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageTitleContainer {
3067
- margin: var(--spacing-0, var(--spacing-none, 0px));
3068
- }
3069
-
3070
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionSections {
3071
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
3072
- gap: var(--spacing-24, var(--spacing-24, 24px));
3073
- flex-direction: column;
3074
- align-self: center;
3075
- width: 100%;
3076
- max-width: 420px;
3077
- display: flex;
3078
- }
3079
-
3080
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionSection {
3081
- gap: var(--spacing-16, var(--spacing-16, 16px));
3082
- flex-direction: column;
3083
- display: flex;
3084
- }
3085
-
3086
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionSectionTitle {
3087
- margin: var(--spacing-0, var(--spacing-none, 0px));
3088
- font-family: var(--typography-headline-family);
3089
- font-size: var(--typography-headline-h4-size);
3090
- font-weight: var(--typography-headline-h4-weight);
3091
- line-height: var(--typography-headline-h4-line-height);
3092
- letter-spacing: var(--typography-headline-h4-letter-spacing);
3093
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3094
- }
3095
-
3096
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepsList {
3097
- margin: var(--spacing-0, var(--spacing-none, 0px));
3098
- gap: var(--spacing-12, var(--spacing-12, 12px));
3099
- padding: var(--spacing-0, var(--spacing-none, 0px));
3100
- flex-direction: column;
3101
- list-style-type: none;
3102
- display: flex;
3103
- }
3104
-
3105
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStep {
3106
- align-items: center;
3107
- gap: var(--spacing-16, var(--spacing-16, 16px));
3108
- display: flex;
3109
- }
3110
-
3111
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepIcon {
3112
- aspect-ratio: 1;
3113
- height: var(--spacing-40, var(--spacing-40, 40px));
3114
- min-height: var(--spacing-40, var(--spacing-40, 40px));
3115
- width: var(--spacing-40, var(--spacing-40, 40px));
3116
- min-width: var(--spacing-40, var(--spacing-40, 40px));
3117
- border-radius: var(--radius-small, var(--border-radius-small));
3118
- background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
3119
- justify-content: center;
3120
- align-items: center;
3121
- display: flex;
3122
- }
3123
-
3124
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImg {
3125
- object-fit: contain;
3126
- width: 100%;
3127
- height: 100%;
3128
- }
3129
-
3130
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImgPaddedSettings {
3131
- padding: var(--spacing-8, var(--spacing-8, 8px));
3132
- }
3133
-
3134
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImgPaddedBrowser {
3135
- padding: 5px;
3136
- }
3137
-
3138
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepText {
3139
- font-size: var(--text-16, var(--primitive-typography-size-16));
3140
- --tw-leading: var(--leading-snug, 1.375);
3141
- line-height: var(--leading-snug, 1.375);
3142
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3143
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3144
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3145
- }
3146
-
3147
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepTextBold {
3148
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3149
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3150
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3151
- }
3152
-
3153
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionArrow {
3154
- vertical-align: middle;
3155
- display: inline-block;
3156
- }
3157
-
3158
- .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationSrOnly {
3159
- clip-path: inset(50%);
3160
- white-space: nowrap;
3161
- border-width: 0;
3162
- width: 1px;
3163
- height: 1px;
3164
- margin: -1px;
3165
- padding: 0;
3166
- position: absolute;
3167
- overflow: hidden;
3168
- }
3169
-
3170
- .IncodeEkycPage {
3171
- max-width: 480px;
3172
- margin-inline: auto;
3173
- }
3174
-
3175
- @media (min-width: 48rem) {
3176
- .IncodeEkycPage .IncodePageInner {
3177
- padding-inline: var(--spacing-0, var(--spacing-none, 0px));
3178
- padding-block: var(--spacing-0, var(--spacing-none, 0px));
3179
- }
3180
- }
3181
-
3182
- .IncodeEkycPage .IncodeEkycSpinner {
3183
- flex: 1;
3184
- }
3185
-
3186
- .IncodeEkycPage .IncodeEkycForm {
3187
- margin-top: var(--spacing-32, var(--spacing-32, 32px));
3188
- gap: var(--spacing-16, var(--spacing-16, 16px));
3189
- flex-direction: column;
3190
- width: 100%;
3191
- display: flex;
3192
- }
3193
-
3194
- .IncodeEkycPage .IncodeEkycForm .IncodeInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodePhoneInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeAddressAutocomplete {
3195
- margin-inline: auto;
3196
- }
3197
-
3198
- .IncodeEkycPage .IncodeEkycForm .IncodeFormField {
3199
- margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
3200
- }
3201
-
3202
- .IncodeEkycPage .IncodeEkycSectionHeader {
3203
- font-family: var(--typography-headline-family);
3204
- font-size: var(--typography-headline-h3-size);
3205
- font-weight: var(--typography-headline-h3-weight);
3206
- line-height: var(--typography-headline-h3-line-height);
3207
- letter-spacing: var(--typography-headline-h3-letter-spacing);
3208
- color: var(--color-input-text-label-default, var(--input-text-label-default));
3209
- margin-inline: auto;
3210
- margin-top: var(--spacing-16, var(--spacing-16, 16px));
3211
- width: 100%;
3212
- max-width: 420px;
3213
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
3214
- }
3215
-
3216
- .IncodeEkycPage .IncodeEkycRadioGroup {
3217
- width: 100%;
3218
- max-width: 420px;
3219
- margin-inline: auto;
3220
- }
3221
-
3222
- .IncodeEkycPage .IncodeEkycFooter {
3223
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
3224
- align-items: center;
3225
- gap: var(--spacing-12, var(--spacing-12, 12px));
3226
- flex-direction: column;
3227
- display: flex;
3228
- }
3229
-
3230
- .IncodeEkycPage .IncodeEkycFooter .IncodeEkycSubmitError {
3231
- margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
3232
- text-align: center;
3233
- font-family: var(--typography-headline-family);
3234
- font-size: var(--typography-headline-h5-size);
3235
- font-weight: var(--typography-headline-h5-weight);
3236
- line-height: var(--typography-headline-h5-line-height);
3237
- letter-spacing: var(--typography-headline-h5-letter-spacing);
3238
- color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
3239
- margin-top: 0;
3240
- }
3241
-
3242
- @media (min-width: 768px) {
3243
- .IncodeEkycPage.IncodePageContainer {
3244
- height: 100dvh;
3245
- max-height: none;
3246
- margin-top: var(--spacing-0, var(--spacing-none, 0px));
3247
- }
3248
-
3249
- .IncodeEkycPage .IncodePageInner {
3250
- height: 100%;
3251
- }
3252
-
3253
- .IncodeEkycPage.IncodeEkycPageScrollable {
3254
- max-width: 500px;
3255
- }
3256
-
3257
- .IncodeEkycPage .IncodePageContent {
3258
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3259
- }
3260
-
3261
- .IncodeEkycPage .IncodeEkycForm {
3262
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3263
- padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
3264
- overflow-y: auto;
3265
- }
3266
-
3267
- .IncodeEkycPage.IncodeEkycPageScrollable .IncodeEkycForm {
3268
- margin-left: var(--spacing-8, var(--spacing-8, 8px));
3269
- }
3270
-
3271
- .IncodeEkycPage .IncodeEkycFooter {
3272
- flex-shrink: 0;
3273
- }
3274
- }
3275
-
3276
- .IncodeEkybPage {
3277
- margin-inline: auto;
3278
- }
3279
-
3280
- .IncodeEkybPage .IncodeEkybSpinner {
3281
- flex: 1;
3282
- }
3283
-
3284
- .IncodeEkybPage .IncodeEkybForm {
3285
- margin-top: var(--spacing-32, var(--spacing-32, 32px));
3286
- gap: var(--spacing-16, var(--spacing-16, 16px));
3287
- flex-direction: column;
3288
- width: 100%;
3289
- display: flex;
3290
- }
3291
-
3292
- .IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeCountrySelector, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
3293
- margin-inline: auto;
3294
- }
3295
-
3296
- .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
3297
- margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
3298
- }
3299
-
3300
- .IncodeEkybPage .IncodeEkybForm .IncodeAddressAutocomplete {
3301
- margin-inline: auto;
3302
- }
3303
-
3304
- .IncodeEkybPage .IncodeEkybCountrySelector {
3305
- width: 100%;
3306
- }
3307
-
3308
- .IncodeEkybPage .IncodeEkybUbos, .IncodeEkybPage .IncodeEkybUboEntry {
3309
- gap: var(--spacing-16, var(--spacing-16, 16px));
3310
- flex-direction: column;
3311
- display: flex;
3312
- }
3313
-
3314
- .IncodeEkybPage .IncodeEkybRemoveUbo {
3315
- cursor: pointer;
3316
- border-style: var(--tw-border-style);
3317
- border-width: var(--border-width-none, var(--primitive-border-width-0));
3318
- --tw-border-style: none;
3319
- padding: var(--spacing-0, var(--spacing-none, 0px));
3320
- font-family: var(--typography-body-family);
3321
- font-size: var(--typography-body-s-regular-size);
3322
- font-weight: var(--typography-body-s-regular-weight);
3323
- line-height: var(--typography-body-s-regular-line-height);
3324
- letter-spacing: var(--typography-body-s-regular-letter-spacing);
3325
- color: var(--color-text-status-negative, var(--text-status-negative));
3326
- background-color: #0000;
3327
- border-style: none;
3328
- }
3329
-
3330
- .IncodeEkybPage .IncodeEkybAddUbo {
3331
- cursor: pointer;
3332
- border-style: var(--tw-border-style);
3333
- border-width: var(--border-width-none, var(--primitive-border-width-0));
3334
- --tw-border-style: none;
3335
- padding-block: var(--spacing-8, var(--spacing-8, 8px));
3336
- text-align: center;
3337
- font-family: var(--typography-button-family);
3338
- font-size: var(--typography-button-m-underlined-size);
3339
- font-weight: var(--typography-button-m-underlined-weight);
3340
- line-height: var(--typography-button-m-underlined-line-height);
3341
- letter-spacing: var(--typography-button-m-underlined-letter-spacing);
3342
- -webkit-text-decoration-skip-ink: none;
3343
- text-decoration-skip-ink: none;
3344
- color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
3345
- background-color: #0000;
3346
- border-style: none;
3347
- text-decoration-line: underline;
3348
- text-decoration-style: solid;
3349
- text-decoration-thickness: auto;
3350
- }
3351
-
3352
- .IncodeEkybPage .IncodeEkybAddUbo:hover {
3353
- opacity: .8;
3354
- }
3355
-
3356
- .IncodeEkybPage .IncodeEkybSectionHeader {
3357
- font-family: var(--typography-headline-family);
3358
- font-size: var(--typography-headline-h3-size);
3359
- font-weight: var(--typography-headline-h3-weight);
3360
- line-height: var(--typography-headline-h3-line-height);
3361
- letter-spacing: var(--typography-headline-h3-letter-spacing);
3362
- color: var(--color-input-text-label-default, var(--input-text-label-default));
3363
- margin-inline: auto;
3364
- margin-top: var(--spacing-16, var(--spacing-16, 16px));
3365
- width: 100%;
3366
- max-width: 420px;
3367
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
3368
- }
3369
-
3370
- .IncodeEkybPage .IncodeEkybFooter {
3371
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
3372
- }
3373
-
3374
- @media (min-width: 768px) {
3375
- .IncodeEkybPage.IncodePageContainer {
3376
- margin-top: var(--spacing-0, var(--spacing-none, 0px));
3377
- max-height: none;
3378
- }
3379
-
3380
- .IncodeEkybPage.IncodeEkybPageScrollable {
3381
- max-width: 500px;
3382
- }
3383
-
3384
- .IncodeEkybPage .IncodePageContent {
3385
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3386
- }
3387
-
3388
- .IncodeEkybPage .IncodeEkybForm {
3389
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3390
- padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
3391
- overflow-y: auto;
3392
- }
3393
-
3394
- .IncodeEkybPage .IncodeEkybFooter {
3395
- flex-shrink: 0;
3396
- }
3397
- }
3398
-
3399
- .IncodeRedirectRoot {
3400
- width: 100%;
3401
- height: 100%;
3402
- }
3403
-
3404
- .IncodeRedirectRoot .IncodeRedirectLogo {
3405
- max-width: 100%;
3406
- max-height: 100%;
3407
- }
3408
-
3409
- .IncodeRedirectRoot .IncodeRedirectContainer {
3410
- background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
3411
- justify-content: center;
3412
- align-items: safe center;
3413
- width: 100%;
3414
- height: 100%;
3415
- display: flex;
3416
- position: relative;
3417
- overflow-y: auto;
3418
- }
3419
-
3420
- .IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard {
3421
- border-radius: var(--radius-medium, var(--border-radius-medium));
3422
- border-style: var(--tw-border-style);
3423
- border-width: 1px;
3424
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
3425
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
3426
- width: 100%;
3427
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
3428
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
3429
- padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
3430
- max-width: var(--redirect-card-max-width);
3431
- min-height: min(var(--redirect-card-max-width), var(--redirect-card-min-height));
3432
- flex-direction: column;
3433
- justify-content: space-between;
3434
- align-items: center;
3435
- display: flex;
3436
- overflow-x: clip;
3437
- }
3438
-
3439
- .IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTopGroup {
3440
- align-items: center;
3441
- gap: var(--spacing-32, var(--spacing-32, 32px));
3442
- flex-direction: column;
3443
- width: 100%;
3444
- display: flex;
3445
- }
3446
-
3447
- .IncodeRedirectRoot .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions {
3448
- align-items: center;
3449
- gap: var(--spacing-32, var(--spacing-32, 32px));
3450
- width: 100%;
3451
- max-width: var(--redirect-options-max-width);
3452
- flex-direction: column;
3453
- display: flex;
3454
- }
3455
-
3456
- .IncodeRedirectContainer .IncodeRedirectToast {
3457
- top: var(--spacing-16, var(--spacing-16, 16px));
3458
- z-index: 50;
3459
- animation: 3s ease-in-out forwards fadeInOut;
3460
- position: absolute;
3461
- left: 50%;
3462
- }
3463
-
3464
- @keyframes fadeInOut {
3465
- 0% {
3466
- opacity: 0;
3467
- transform: translate(-50%, -20px);
3468
- }
3469
-
3470
- 15% {
3471
- opacity: 1;
3472
- transform: translate(-50%);
3473
- }
3474
-
3475
- 85% {
3476
- opacity: 1;
3477
- transform: translate(-50%);
3478
- }
3479
-
3480
- 100% {
3481
- opacity: 0;
3482
- transform: translate(-50%, -20px);
3483
- }
3484
- }
3485
-
3486
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader {
3487
- flex-direction: column;
3488
- align-items: center;
3489
- width: 100%;
3490
- display: flex;
3491
- }
3492
-
3493
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {
3494
- --min-height-logo-wrapper: 44px;
3495
- width: 100%;
3496
- min-height: var(--min-height-logo-wrapper);
3497
- justify-content: center;
3498
- align-items: center;
3499
- display: flex;
3500
- }
3501
-
3502
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogo {
3503
- max-height: var(--logo-height, 44px);
3504
- }
3505
-
3506
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectTitle {
3507
- text-align: center;
3508
- font-family: var(--typography-headline-family);
3509
- font-size: var(--typography-headline-h2-size);
3510
- font-weight: var(--typography-headline-h2-weight);
3511
- line-height: var(--typography-headline-h2-line-height);
3512
- letter-spacing: var(--typography-headline-h2-letter-spacing);
3513
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3514
- }
3515
-
3516
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectSubtitle {
3517
- text-align: center;
3518
- font-family: var(--typography-headline-family);
3519
- font-size: var(--typography-headline-h5-size);
3520
- font-weight: var(--typography-headline-h5-weight);
3521
- line-height: var(--typography-headline-h5-line-height);
3522
- letter-spacing: var(--typography-headline-h5-letter-spacing);
3523
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3524
- }
3525
-
3526
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav {
3527
- --max-width-bottom-nav: 390px;
3528
- align-items: center;
3529
- gap: var(--spacing-40, var(--spacing-40, 40px));
3530
- width: 100%;
3531
- max-width: var(--max-width-bottom-nav);
3532
- flex-direction: column;
3533
- display: flex;
3534
- }
3535
-
3536
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectVerifiedBy {
3537
- justify-content: center;
3538
- align-items: center;
3539
- gap: var(--spacing-4, var(--spacing-4, 4px));
3540
- padding-top: var(--spacing-8, var(--spacing-8, 8px));
3541
- padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
3542
- display: flex;
3543
- }
3544
-
3545
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs {
3546
- justify-content: center;
3547
- align-items: flex-end;
3548
- gap: var(--spacing-12, var(--spacing-12, 12px));
3549
- border-bottom-style: var(--tw-border-style);
3550
- border-bottom-width: 1px;
3551
- border-color: var(--color-border-neutral-300, var(--border-neutral-300));
3552
- width: 100%;
3553
- max-width: var(--redirect-tabs-max-width);
3554
- display: flex;
3555
- }
3556
-
3557
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab {
3558
- cursor: pointer;
3559
- border-bottom-style: var(--tw-border-style);
3560
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
3561
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
3562
- font-family: var(--typography-headline-family);
3563
- font-size: var(--typography-headline-h5-size);
3564
- font-weight: var(--typography-headline-h5-weight);
3565
- line-height: var(--typography-headline-h5-line-height);
3566
- letter-spacing: var(--typography-headline-h5-letter-spacing);
3567
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3568
- background-color: #0000;
3569
- border-color: #0000;
3570
- border-bottom-width: 2px;
3571
- }
3572
-
3573
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab:focus-visible {
3574
- border-radius: var(--radius-xs, .125rem);
3575
- outline-style: var(--tw-outline-style);
3576
- outline-offset: 2px;
3577
- outline-width: 2px;
3578
- outline-color: var(--color-border-status-focus, var(--border-status-focus));
3579
- }
3580
-
3581
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab.IncodeRedirectTabActive {
3582
- border-color: var(--color-text-link-default, var(--text-link-default));
3583
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3584
- }
3585
-
3586
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions > [role="tabpanel"] {
3587
- align-items: center;
3588
- gap: var(--spacing-32, var(--spacing-32, 32px));
3589
- flex-direction: column;
3590
- width: 100%;
3591
- display: flex;
3592
- }
3593
-
3594
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabDescription {
3595
- text-align: center;
3596
- font-family: var(--typography-headline-family);
3597
- font-size: var(--typography-headline-h5-size);
3598
- font-weight: var(--typography-headline-h5-weight);
3599
- line-height: var(--typography-headline-h5-line-height);
3600
- letter-spacing: var(--typography-headline-h5-letter-spacing);
3601
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3602
- max-width: var(--redirect-tab-description-max-width);
3603
- }
3604
-
3605
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectQrWrapper {
3606
- border-style: var(--tw-border-style);
3607
- border-width: 1px;
3608
- border-color: var(--color-border-neutral-100, var(--border-neutral-100));
3609
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
3610
- padding: var(--spacing-12, var(--spacing-12, 12px));
3611
- border-radius: var(--redirect-qr-wrapper-border-radius);
3612
- justify-content: center;
3613
- align-items: center;
3614
- display: flex;
3615
- }
3616
-
3617
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInput, .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputContainer {
3618
- flex-direction: column;
3619
- align-items: center;
3620
- width: 100%;
3621
- display: flex;
3622
- }
3623
-
3624
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputRow {
3625
- --max-width-phone-input-row: 340px;
3626
- align-items: stretch;
3627
- gap: var(--spacing-8, var(--spacing-8, 8px));
3628
- width: 100%;
3629
- max-width: var(--max-width-phone-input-row);
3630
- display: flex;
3631
- position: relative;
3632
- }
3633
-
3634
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper {
3635
- border-radius: var(--radius-small, var(--border-radius-small));
3636
- border-style: var(--tw-border-style);
3637
- border-width: 1px;
3638
- border-color: var(--color-input-border-default, var(--input-border-default));
3639
- background-color: var(--color-input-surface-default, var(--input-surface-default));
3640
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3641
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
3642
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
3643
- --tw-duration: .2s;
3644
- flex: 1;
3645
- align-items: center;
3646
- transition-duration: .2s;
3647
- display: flex;
3648
- }
3649
-
3650
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper:focus-within {
3651
- border-color: var(--color-input-border-focused, var(--input-border-focused));
3652
- }
3653
-
3654
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper.IncodePhoneInputWrapperError {
3655
- border-color: var(--color-input-border-negative, var(--input-border-negative));
3656
- }
3657
-
3658
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper.IncodePhoneInputWrapperDisabled {
3659
- border-color: var(--color-input-border-disabled, var(--input-border-disabled));
3660
- background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
3661
- }
3662
-
3663
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector {
3664
- --width-country-selector: 124px;
3665
- border-radius: var(--radius-small, var(--border-radius-small));
3666
- border-style: var(--tw-border-style);
3667
- border-width: 1px;
3668
- border-color: var(--color-input-border-default, var(--input-border-default));
3669
- background-color: var(--color-input-surface-default, var(--input-surface-default));
3670
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
3671
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
3672
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
3673
- --tw-duration: .2s;
3674
- width: var(--width-country-selector);
3675
- flex-shrink: 0;
3676
- transition-duration: .2s;
3677
- position: static;
3678
- }
3679
-
3680
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector.IncodePhoneCountrySelectorOpen {
3681
- border-color: var(--color-input-border-focused, var(--input-border-focused));
3682
- }
3683
-
3684
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector.IncodePhoneCountrySelectorDisabled {
3685
- border-color: var(--color-input-border-disabled, var(--input-border-disabled));
3686
- background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
3687
- }
3688
-
3689
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton {
3690
- width: 100%;
3691
- height: 100%;
3692
- padding: var(--spacing-8, var(--spacing-8, 8px));
3693
- padding-left: var(--spacing-16, var(--spacing-16, 16px));
3694
- cursor: pointer;
3695
- border-style: var(--tw-border-style);
3696
- border-width: var(--border-width-none, var(--primitive-border-width-0));
3697
- --tw-border-style: none;
3698
- font-size: var(--text-18, var(--primitive-typography-size-18));
3699
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3700
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3701
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3702
- border-radius: var(--radius-small, var(--border-radius-small));
3703
- background-color: #0000;
3704
- border-style: none;
3705
- justify-content: center;
3706
- align-items: center;
3707
- font-family: inherit;
3708
- display: flex;
3709
- }
3710
-
3711
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:disabled {
3712
- cursor: not-allowed;
3713
- color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
3714
- }
3715
-
3716
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:focus {
3717
- --tw-outline-style: none;
3718
- outline-style: none;
3719
- }
3720
-
3721
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryFlag {
3722
- font-size: var(--text-24, var(--primitive-typography-size-24));
3723
- --tw-leading: 1;
3724
- line-height: 1;
3725
- }
3726
-
3727
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryCode {
3728
- margin-left: var(--spacing-4, var(--spacing-4, 4px));
3729
- font-size: var(--text-18, var(--primitive-typography-size-18));
3730
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3731
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3732
- white-space: nowrap;
3733
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3734
- }
3735
-
3736
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryArrow {
3737
- margin-left: var(--spacing-8, var(--spacing-8, 8px));
3738
- height: var(--spacing-24, var(--spacing-24, 24px));
3739
- width: var(--spacing-24, var(--spacing-24, 24px));
3740
- color: var(--color-icon-neutral-500, var(--icon-neutral-500));
3741
- transition-property: transform, translate, scale, rotate;
3742
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
3743
- transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
3744
- --tw-duration: .2s;
3745
- transition-duration: .2s;
3746
- }
3747
-
3748
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryArrowUp {
3749
- rotate: 180deg;
3750
- }
3751
-
3752
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:disabled .IncodePhoneCountryArrow {
3753
- color: var(--color-icon-neutral-300, var(--icon-neutral-300));
3754
- }
3755
-
3756
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryDropdown {
3757
- --max-height-country-dropdown: 320px;
3758
- top: 100%;
3759
- right: var(--spacing-0, var(--spacing-none, 0px));
3760
- left: var(--spacing-0, var(--spacing-none, 0px));
3761
- z-index: 50;
3762
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
3763
- border-radius: var(--radius-small, var(--border-radius-small));
3764
- border-style: var(--tw-border-style);
3765
- border-width: 1px;
3766
- border-color: var(--color-input-border-default, var(--input-border-default));
3767
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
3768
- padding: var(--spacing-8, var(--spacing-8, 8px));
3769
- max-height: var(--max-height-country-dropdown);
3770
- position: absolute;
3771
- overflow-y: auto;
3772
- box-shadow: 0 4px 16px #0000001f;
3773
- }
3774
-
3775
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption {
3776
- cursor: pointer;
3777
- align-items: center;
3778
- gap: var(--spacing-12, var(--spacing-12, 12px));
3779
- border-radius: var(--radius-small, var(--border-radius-small));
3780
- width: 100%;
3781
- padding-inline: var(--spacing-12, var(--spacing-12, 12px));
3782
- padding-block: var(--spacing-12, var(--spacing-12, 12px));
3783
- font-size: var(--text-16, var(--primitive-typography-size-16));
3784
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3785
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3786
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3787
- border-style: var(--tw-border-style);
3788
- border-width: var(--border-width-none, var(--primitive-border-width-0));
3789
- --tw-border-style: none;
3790
- text-align: left;
3791
- background-color: #0000;
3792
- border-style: none;
3793
- font-family: inherit;
3794
- display: flex;
3795
- }
3796
-
3797
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption:hover {
3798
- background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
3799
- }
3800
-
3801
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption:focus {
3802
- background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
3803
- --tw-outline-style: none;
3804
- outline-style: none;
3805
- }
3806
-
3807
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionSelected, .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionSelected:hover {
3808
- background-color: var(--color-surface-brand-50, var(--surface-brand-50));
3809
- }
3810
-
3811
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionCode {
3812
- --min-width-country-code: 52px;
3813
- font-size: var(--text-16, var(--primitive-typography-size-16));
3814
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3815
- min-width: var(--min-width-country-code);
3816
- }
3817
-
3818
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionName {
3819
- text-overflow: ellipsis;
3820
- white-space: nowrap;
3821
- font-size: var(--text-16, var(--primitive-typography-size-16));
3822
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3823
- flex: 1;
3824
- overflow: hidden;
3825
- }
3826
-
3827
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField {
3828
- border-style: var(--tw-border-style);
3829
- border-width: var(--border-width-none, var(--primitive-border-width-0));
3830
- --tw-border-style: none;
3831
- width: 100%;
3832
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
3833
- padding-block: var(--spacing-16, var(--spacing-16, 16px));
3834
- font-size: var(--text-18, var(--primitive-typography-size-18));
3835
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3836
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3837
- color: var(--color-input-text-field-default, var(--input-text-field-default));
3838
- --tw-outline-style: none;
3839
- border-radius: var(--radius-small, var(--border-radius-small));
3840
- background-color: #0000;
3841
- border-style: none;
3842
- outline-style: none;
3843
- }
3844
-
3845
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField::placeholder {
3846
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3847
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3848
- color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
3849
- }
3850
-
3851
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField:disabled {
3852
- cursor: not-allowed;
3853
- color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
3854
- }
3855
-
3856
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputError {
3857
- margin: var(--spacing-0, var(--spacing-none, 0px));
3858
- text-align: center;
3859
- font-size: var(--text-14, var(--primitive-typography-size-14));
3860
- --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3861
- font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
3862
- color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
3863
- }
3864
-
3865
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectSmsSendButton {
3866
- --max-width-sms-button: 335px;
3867
- width: 100%;
3868
- max-width: var(--max-width-sms-button);
3869
- }
3870
-
3871
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {
3872
- flex-direction: column;
3873
- align-items: center;
3874
- display: flex;
3875
- }
3876
-
3877
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentTitle {
3878
- text-align: center;
3879
- font-family: var(--typography-headline-family);
3880
- font-size: var(--typography-headline-h2-size);
3881
- font-weight: var(--typography-headline-h2-weight);
3882
- line-height: var(--typography-headline-h2-line-height);
3883
- letter-spacing: var(--typography-headline-h2-letter-spacing);
3884
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3885
- }
3886
-
3887
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentPhone {
3888
- text-align: center;
3889
- font-family: var(--typography-headline-family);
3890
- font-size: var(--typography-headline-h5-size);
3891
- font-weight: var(--typography-headline-h5-weight);
3892
- line-height: var(--typography-headline-h5-line-height);
3893
- letter-spacing: var(--typography-headline-h5-letter-spacing);
3894
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
3895
- }
3896
-
3897
- .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {
3898
- --width-link-sent-actions: 335px;
3899
- justify-content: center;
3900
- align-items: center;
3901
- gap: var(--spacing-4, var(--spacing-4, 4px));
3902
- font-family: var(--Button-family, "DM Sans");
3903
- letter-spacing: 0;
3904
- width: var(--width-link-sent-actions);
3905
- flex-wrap: wrap;
3906
- font-size: 18px;
3907
- font-weight: 500;
3908
- line-height: 100%;
3909
- display: flex;
3910
- }
3911
-
3912
- .IncodeRedirectFinishedContainer {
3913
- flex-direction: column;
3914
- justify-content: center;
3915
- align-items: center;
3916
- width: 100%;
3917
- height: 100%;
3918
- display: flex;
3919
- }
3920
-
3921
- .IncodeRedirectFinishedContainer .IncodeRedirectLogo {
3922
- max-height: var(--logo-height, 44px);
3923
- }
3924
-
3925
- .IncodeRedirectFinishedContainer .IncodeRedirectFinishedTitle {
3926
- --width-finished-title: 500px;
3927
- margin-block: var(--spacing-20, var(--spacing-20, 20px));
3928
- text-align: center;
3929
- font-size: var(--text-3xl, 1.875rem);
3930
- line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
3931
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3932
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3933
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3934
- width: var(--width-finished-title);
3935
- }
3936
-
3937
- .IncodeRedirectFinishedContainer .IncodeRedirectFinishedSubtitle {
3938
- --width-finished-subtitle: 400px;
3939
- text-align: center;
3940
- font-size: var(--text-2xl, 1.5rem);
3941
- line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
3942
- --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3943
- font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
3944
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3945
- width: var(--width-finished-subtitle);
3946
- }
3947
-
3948
- .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
3949
- display: inline;
3950
- }
3951
-
3952
- .IncodeConsentPage {
3953
- height: 100%;
3954
- }
3955
-
3956
- .IncodeConsentPage .IncodePageInner {
3957
- padding: var(--spacing-24, var(--spacing-24, 24px));
3958
- }
3959
-
3960
- .IncodeConsentPage .IncodePageContent {
3961
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3962
- }
3963
-
3964
- .IncodeConsentPage .IncodeConsentContent {
3965
- height: 100%;
3966
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3967
- justify-content: space-between;
3968
- gap: var(--spacing-24, var(--spacing-24, 24px));
3969
- flex-direction: column;
3970
- display: flex;
3971
- }
3972
-
3973
- .IncodeConsentPage .IncodeConsentBody {
3974
- min-height: var(--spacing-0, var(--spacing-none, 0px));
3975
- gap: var(--spacing-16, var(--spacing-16, 16px));
3976
- flex-direction: column;
3977
- flex: 1;
3978
- display: flex;
3979
- overflow-y: auto;
3980
- }
3981
-
3982
- .IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
3983
- margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
3984
- font-family: var(--typography-headline-family);
3985
- font-size: var(--typography-headline-h2-size);
3986
- font-weight: var(--typography-headline-h2-weight);
3987
- line-height: var(--typography-headline-h2-line-height);
3988
- letter-spacing: var(--typography-headline-h2-letter-spacing);
3989
- }
3990
-
3991
- .IncodeConsentPage .IncodeConsentTitle {
3992
- font-family: var(--typography-headline-family);
3993
- font-size: var(--typography-headline-h1-size);
3994
- font-weight: var(--typography-headline-h1-weight);
3995
- line-height: var(--typography-headline-h1-line-height);
3996
- letter-spacing: var(--typography-headline-h1-letter-spacing);
3997
- color: var(--color-text-body-primary, var(--text-body-800-primary));
3998
- }
3999
-
4000
- .IncodeConsentPage .IncodeConsentSubtitle {
4001
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4002
- }
4003
-
4004
- .IncodeConsentPage .IncodeConsentCheckboxList {
4005
- gap: var(--spacing-12, var(--spacing-12, 12px));
4006
- flex-direction: column;
4007
- display: flex;
4008
- }
4009
-
4010
- .IncodeConsentPage .IncodeConsentCheckbox {
4011
- border-radius: var(--radius-medium, var(--border-radius-medium));
4012
- background-color: var(--color-surface-brand-50, var(--surface-brand-50));
4013
- width: 100%;
4014
- padding: var(--spacing-16, var(--spacing-16, 16px));
4015
- }
4016
-
4017
- .IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxLabel {
4018
- align-items: flex-start;
4019
- }
4020
-
4021
- .IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxText {
4022
- font-family: var(--typography-checkbox-radio-family);
4023
- font-size: var(--typography-checkbox-radio-s-size);
4024
- font-weight: var(--typography-checkbox-radio-s-weight);
4025
- line-height: var(--typography-checkbox-radio-s-line-height);
4026
- letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
4027
- }
4028
-
4029
- .IncodeConsentPage .IncodeConsentCheckboxLabel {
4030
- font-family: var(--typography-checkbox-radio-family);
4031
- font-size: var(--typography-checkbox-radio-s-size);
4032
- font-weight: var(--typography-checkbox-radio-s-weight);
4033
- line-height: var(--typography-checkbox-radio-s-line-height);
4034
- letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
4035
- color: var(--color-text-body-primary, var(--text-body-800-primary));
4036
- }
4037
-
4038
- .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
4039
- display: inline;
4040
- }
4041
-
4042
- .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup p, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText p {
4043
- margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
4044
- font-family: var(--typography-checkbox-radio-family);
4045
- font-size: var(--typography-checkbox-radio-s-size);
4046
- font-weight: var(--typography-checkbox-radio-s-weight);
4047
- line-height: var(--typography-checkbox-radio-s-line-height);
4048
- letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
4049
- display: inline;
4050
- }
4051
-
4052
- .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup a, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText a {
4053
- color: var(--color-surface-brand-600, var(--surface-brand-600-static));
4054
- }
4055
-
4056
- .IncodeConsentPage .IncodeConsentButton {
4057
- width: 100%;
4058
- }
4059
-
4060
- .IncodeConsentPage .IncodeConsentActions {
4061
- align-items: center;
4062
- gap: var(--spacing-8, var(--spacing-8, 8px));
4063
- flex-direction: column;
4064
- width: 100%;
4065
- display: flex;
4066
- }
4067
-
4068
- .IncodeSignature .IncodeSignatureContent {
4069
- width: 100%;
4070
- height: 100%;
4071
- padding-top: var(--spacing-32, var(--spacing-32, 32px));
4072
- flex-direction: column;
4073
- flex: 1;
4074
- display: flex;
4075
- }
4076
-
4077
- .IncodeSignature .IncodeSignatureButtonContainer {
4078
- margin-block: var(--spacing-16, var(--spacing-16, 16px));
4079
- }
4080
-
4081
- .IncodeSignature.IncodeSignatureFadeIn {
4082
- animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
4083
- animation-fill-mode: both;
4084
- }
4085
-
4086
- .IncodeSignature .IncodeSignatureButtonContainer .IncodeButton.IncodeButtonPrimary {
4087
- transition: background-color .35s ease-out, color .35s ease-out, border-color .35s ease-out, opacity .35s ease-out, box-shadow .35s ease-out;
4088
- }
4089
-
4090
- .IncodeSignature .SignatureCanvasContainer {
4091
- width: 100%;
4092
- padding-inline: var(--spacing-16, var(--spacing-16, 16px));
4093
- padding-block: var(--spacing-8, var(--spacing-8, 8px));
4094
- border-radius: var(--radius-small, var(--border-radius-small));
4095
- border-style: var(--tw-border-style);
4096
- border-width: 1px;
4097
- border-color: var(--color-input-border-default, var(--input-border-default));
4098
- background-color: var(--color-input-surface-default, var(--input-surface-default));
4099
- height: var(--signature-canvas-height);
4100
- max-width: var(--signature-canvas-max-width);
4101
- align-self: center;
4102
- position: relative;
4103
- }
4104
-
4105
- .IncodeSignature .SignatureCanvas {
4106
- width: 100%;
4107
- height: 100%;
4108
- padding-block: var(--spacing-8, var(--spacing-8, 8px));
4109
- }
4110
-
4111
- .IncodeSignature .SignatureCanvasPlaceholder {
4112
- font-family: var(--typography-input-dropdown-family);
4113
- font-size: var(--typography-input-dropdown-m-size);
4114
- font-weight: var(--typography-input-dropdown-m-weight);
4115
- line-height: var(--typography-input-dropdown-m-line-height);
4116
- letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
4117
- color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
4118
- --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
4119
- --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
4120
- translate: var(--tw-translate-x) var(--tw-translate-y);
4121
- pointer-events: none;
4122
- text-align: center;
4123
- -webkit-user-select: none;
4124
- user-select: none;
4125
- width: 100%;
4126
- animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
4127
- animation-fill-mode: both;
4128
- position: absolute;
4129
- top: 50%;
4130
- left: 50%;
4131
- }
4132
-
4133
- .IncodeSignature .IncodeSignatureSuccess {
4134
- flex-direction: column;
4135
- justify-content: center;
4136
- align-items: center;
4137
- display: flex;
4138
- }
4139
-
4140
- .IncodeHome {
4141
- background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
4142
- width: 100%;
4143
- height: 100%;
4144
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
4145
- padding-top: var(--spacing-20, var(--spacing-20, 20px));
4146
- padding-bottom: var(--spacing-32, var(--spacing-32, 32px));
4147
- flex-direction: column;
4148
- display: flex;
4149
- }
4150
-
4151
- .IncodeHome .IncodeHomeContent {
4152
- flex-direction: column;
4153
- width: 100%;
4154
- height: 100%;
4155
- display: flex;
4156
- }
4157
-
4158
- .IncodeHome .IncodeHomeHeader {
4159
- justify-content: space-between;
4160
- align-items: flex-start;
4161
- gap: var(--spacing-16, var(--spacing-16, 16px));
4162
- display: flex;
4163
- }
4164
-
4165
- .IncodeHome .IncodeHomeLanguage {
4166
- flex-direction: column;
4167
- display: flex;
4168
- }
4169
-
4170
- .IncodeHome .IncodeHomeLanguageLabel {
4171
- margin: var(--spacing-0, var(--spacing-none, 0px));
4172
- font-family: var(--typography-label-family);
4173
- font-size: var(--typography-label-m-size);
4174
- font-weight: var(--typography-label-m-weight);
4175
- line-height: var(--typography-label-m-line-height);
4176
- letter-spacing: var(--typography-label-m-letter-spacing);
4177
- color: var(--color-text-body-primary, var(--text-body-800-primary));
4178
- }
4179
-
4180
- .IncodeHome .IncodeHomeLanguageValue {
4181
- margin: var(--spacing-0, var(--spacing-none, 0px));
4182
- font-family: var(--typography-body-family);
4183
- font-size: var(--typography-body-m-regular-size);
4184
- font-weight: var(--typography-body-m-regular-weight);
4185
- line-height: var(--typography-body-m-regular-line-height);
4186
- letter-spacing: var(--typography-body-m-regular-letter-spacing);
4187
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4188
- }
4189
-
4190
- .IncodeHome .IncodeHomeSettingsButton {
4191
- border-style: var(--tw-border-style);
4192
- border-width: var(--border-width-none, var(--primitive-border-width-0));
4193
- --tw-border-style: none;
4194
- padding: var(--spacing-0, var(--spacing-none, 0px));
4195
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4196
- background-color: #0000;
4197
- border-style: none;
4198
- justify-content: center;
4199
- align-items: center;
4200
- display: flex;
4201
- }
4202
-
4203
- .IncodeHome .IncodeHomeSettingsButton:focus-visible {
4204
- outline: var(--focus-outline-width) solid var(--border-status-focus);
4205
- outline-offset: var(--focus-outline-offset);
4206
- }
4207
-
4208
- .IncodeHome .IncodeHomeCenterSection {
4209
- text-align: center;
4210
- flex-direction: column;
4211
- flex: 1;
4212
- justify-content: center;
4213
- align-items: center;
4214
- display: flex;
4215
- }
4216
-
4217
- .IncodeHome .IncodeHomeLogoContainer {
4218
- width: 100%;
4219
- max-width: var(--home-logo-container-max-width);
4220
- justify-content: center;
4221
- align-items: center;
4222
- display: flex;
4223
- }
4224
-
4225
- .IncodeHome .IncodeHomeLogo {
4226
- object-fit: contain;
4227
- width: 100%;
4228
- max-width: 100%;
4229
- height: auto;
4230
- max-height: var(--home-logo-max-height);
4231
- }
4232
-
4233
- .IncodeHome .IncodeHomeSubtitle {
4234
- margin-top: var(--spacing-12, var(--spacing-12, 12px));
4235
- font-family: var(--typography-headline-family);
4236
- font-size: var(--typography-headline-h4-size);
4237
- font-weight: var(--typography-headline-h4-weight);
4238
- line-height: var(--typography-headline-h4-line-height);
4239
- letter-spacing: var(--typography-headline-h4-letter-spacing);
4240
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4241
- --tw-outline-style: none;
4242
- outline-style: none;
4243
- }
4244
-
4245
- .IncodeHome .IncodeHomeStartButton {
4246
- margin-top: auto;
4247
- }
4248
-
4249
- .IncodeHomeSettingsModal.IncodeModalRoot .IncodeModalDialog {
4250
- max-width: none;
4251
- height: 100%;
4252
- max-height: 100%;
4253
- }
4254
-
4255
- .IncodeHomeSettingsModal.IncodeModalRoot .IncodeModalContent {
4256
- border-radius: var(--radius-none, var(--border-radius-none));
4257
- max-width: none;
4258
- height: 100%;
4259
- padding-inline: var(--spacing-24, var(--spacing-24, 24px));
4260
- padding-block: var(--spacing-32, var(--spacing-32, 32px));
4261
- align-items: stretch;
4262
- }
4263
-
4264
- .IncodeHomeSettingsModal .IncodeHomeSettingsContainer {
4265
- flex-direction: column;
4266
- flex: 1;
4267
- width: 100%;
4268
- display: flex;
4269
- }
4270
-
4271
- .IncodeHomeSettingsModal .IncodeHomeSettingsBody {
4272
- flex-direction: column;
4273
- flex: 1;
4274
- display: flex;
4275
- }
4276
-
4277
- .IncodeHomeSettingsModal .IncodeHomeSettingsTitle {
4278
- margin: var(--spacing-0, var(--spacing-none, 0px));
4279
- font-family: var(--typography-headline-family);
4280
- font-size: var(--typography-headline-h2-size);
4281
- font-weight: var(--typography-headline-h2-weight);
4282
- line-height: var(--typography-headline-h2-line-height);
4283
- letter-spacing: var(--typography-headline-h2-letter-spacing);
4284
- color: var(--color-text-body-primary, var(--text-body-800-primary));
4285
- --tw-outline-style: none;
4286
- outline-style: none;
4287
- }
4288
-
4289
- .IncodeHomeSettingsModal .IncodeHomeSettingsFooter {
4290
- margin-top: var(--spacing-24, var(--spacing-24, 24px));
4291
- }
4292
-
4293
- .IncodeHomeSettingsModal .IncodeHomeSettingsBodyContent {
4294
- flex-direction: row;
4295
- justify-content: center;
4296
- align-items: center;
4297
- display: flex;
4298
- }
4299
-
4300
- .IncodeVerificationResult .IncodePageContent {
4301
- gap: var(--spacing-16, var(--spacing-16, 16px));
4302
- padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
4303
- animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
4304
- animation-fill-mode: both;
4305
- }
4306
-
4307
- .IncodeVerificationResult__center {
4308
- justify-content: center;
4309
- align-items: center;
4310
- gap: var(--spacing-16, var(--spacing-16, 16px));
4311
- flex-direction: column;
4312
- flex: 1;
4313
- width: 100%;
4314
- max-width: 420px;
4315
- margin-inline: auto;
4316
- display: flex;
4317
- }
4318
-
4319
- .IncodeVerificationResult__title {
4320
- text-align: center;
4321
- font-family: var(--typography-headline-family);
4322
- font-size: var(--typography-headline-h2-size);
4323
- font-weight: var(--typography-headline-h2-weight);
4324
- line-height: var(--typography-headline-h2-line-height);
4325
- letter-spacing: var(--typography-headline-h2-letter-spacing);
4326
- color: var(--color-text-body-primary, var(--text-body-800-primary));
4327
- }
4328
-
4329
- .IncodeVerificationResult__actions {
4330
- gap: var(--spacing-12, var(--spacing-12, 12px));
4331
- flex-direction: column;
4332
- width: 100%;
4333
- max-width: 420px;
4334
- margin-inline: auto;
4335
- display: flex;
4336
- }
4337
-
4338
- .IncodeFormField {
4339
- width: 100%;
4340
- margin-bottom: .75rem;
4341
- }
4342
-
4343
- .IncodeUnsupportedModule {
4344
- min-height: 100vh;
4345
- padding: var(--spacing-16, var(--spacing-16, 16px));
4346
- flex-direction: column;
4347
- justify-content: center;
4348
- align-items: center;
4349
- display: flex;
4350
- }
4351
-
4352
- .IncodeUnsupportedModule .IncodeUnsupportedModuleContent, .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleContent {
4353
- max-width: var(--container-md, 28rem);
4354
- align-items: center;
4355
- gap: var(--spacing-16, var(--spacing-16, 16px));
4356
- text-align: center;
4357
- flex-direction: column;
4358
- display: flex;
4359
- }
4360
-
4361
- .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleTitle {
4362
- font-family: var(--typography-headline-family);
4363
- font-size: var(--typography-headline-h2-size);
4364
- font-weight: var(--typography-headline-h2-weight);
4365
- line-height: var(--typography-headline-h2-line-height);
4366
- letter-spacing: var(--typography-headline-h2-letter-spacing);
4367
- color: var(--color-text-body-primary, var(--text-body-800-primary));
4368
- }
4369
-
4370
- .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleMessage {
4371
- font-family: var(--typography-headline-family);
4372
- font-size: var(--typography-headline-h5-size);
4373
- font-weight: var(--typography-headline-h5-weight);
4374
- line-height: var(--typography-headline-h5-line-height);
4375
- letter-spacing: var(--typography-headline-h5-letter-spacing);
4376
- color: var(--color-text-body-secondary, var(--text-body-500-secondary));
4377
- }
4378
-
4379
- .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleButton {
4380
- margin-top: var(--spacing-8, var(--spacing-8, 8px));
4381
- }
4382
-
4383
- .IncodeWorkflow {
4384
- width: 100%;
4385
- height: 100%;
4386
- }
4387
-
4388
- @property --tw-rotate-x {
4389
- syntax: "*";
4390
- inherits: false
4391
- }
4392
-
4393
- @property --tw-rotate-y {
4394
- syntax: "*";
4395
- inherits: false
4396
- }
4397
-
4398
- @property --tw-rotate-z {
4399
- syntax: "*";
4400
- inherits: false
4401
- }
4402
-
4403
- @property --tw-skew-x {
4404
- syntax: "*";
4405
- inherits: false
4406
- }
4407
-
4408
- @property --tw-skew-y {
4409
- syntax: "*";
4410
- inherits: false
4411
- }
4412
-
4413
- @property --tw-border-style {
4414
- syntax: "*";
4415
- inherits: false;
4416
- initial-value: solid;
4417
- }
4418
-
4419
- @property --tw-shadow {
4420
- syntax: "*";
4421
- inherits: false;
4422
- initial-value: 0 0 #0000;
4423
- }
4424
-
4425
- @property --tw-shadow-color {
4426
- syntax: "*";
4427
- inherits: false
4428
- }
4429
-
4430
- @property --tw-shadow-alpha {
4431
- syntax: "<percentage>";
4432
- inherits: false;
4433
- initial-value: 100%;
4434
- }
4435
-
4436
- @property --tw-inset-shadow {
4437
- syntax: "*";
4438
- inherits: false;
4439
- initial-value: 0 0 #0000;
4440
- }
4441
-
4442
- @property --tw-inset-shadow-color {
4443
- syntax: "*";
4444
- inherits: false
4445
- }
4446
-
4447
- @property --tw-inset-shadow-alpha {
4448
- syntax: "<percentage>";
4449
- inherits: false;
4450
- initial-value: 100%;
4451
- }
4452
-
4453
- @property --tw-ring-color {
4454
- syntax: "*";
4455
- inherits: false
4456
- }
4457
-
4458
- @property --tw-ring-shadow {
4459
- syntax: "*";
4460
- inherits: false;
4461
- initial-value: 0 0 #0000;
4462
- }
4463
-
4464
- @property --tw-inset-ring-color {
4465
- syntax: "*";
4466
- inherits: false
4467
- }
4468
-
4469
- @property --tw-inset-ring-shadow {
4470
- syntax: "*";
4471
- inherits: false;
4472
- initial-value: 0 0 #0000;
4473
- }
4474
-
4475
- @property --tw-ring-inset {
4476
- syntax: "*";
4477
- inherits: false
4478
- }
4479
-
4480
- @property --tw-ring-offset-width {
4481
- syntax: "<length>";
4482
- inherits: false;
4483
- initial-value: 0;
4484
- }
4485
-
4486
- @property --tw-ring-offset-color {
4487
- syntax: "*";
4488
- inherits: false;
4489
- initial-value: #fff;
4490
- }
4491
-
4492
- @property --tw-ring-offset-shadow {
4493
- syntax: "*";
4494
- inherits: false;
4495
- initial-value: 0 0 #0000;
4496
- }
4497
-
4498
- @property --tw-outline-style {
4499
- syntax: "*";
4500
- inherits: false;
4501
- initial-value: solid;
4502
- }
4503
-
4504
- @property --tw-blur {
4505
- syntax: "*";
4506
- inherits: false
4507
- }
4508
-
4509
- @property --tw-brightness {
4510
- syntax: "*";
4511
- inherits: false
4512
- }
4513
-
4514
- @property --tw-contrast {
4515
- syntax: "*";
4516
- inherits: false
4517
- }
4518
-
4519
- @property --tw-grayscale {
4520
- syntax: "*";
4521
- inherits: false
4522
- }
4523
-
4524
- @property --tw-hue-rotate {
4525
- syntax: "*";
4526
- inherits: false
4527
- }
4528
-
4529
- @property --tw-invert {
4530
- syntax: "*";
4531
- inherits: false
4532
- }
4533
-
4534
- @property --tw-opacity {
4535
- syntax: "*";
4536
- inherits: false
4537
- }
4538
-
4539
- @property --tw-saturate {
4540
- syntax: "*";
4541
- inherits: false
4542
- }
4543
-
4544
- @property --tw-sepia {
4545
- syntax: "*";
4546
- inherits: false
4547
- }
4548
-
4549
- @property --tw-drop-shadow {
4550
- syntax: "*";
4551
- inherits: false
4552
- }
4553
-
4554
- @property --tw-drop-shadow-color {
4555
- syntax: "*";
4556
- inherits: false
4557
- }
4558
-
4559
- @property --tw-drop-shadow-alpha {
4560
- syntax: "<percentage>";
4561
- inherits: false;
4562
- initial-value: 100%;
4563
- }
4564
-
4565
- @property --tw-drop-shadow-size {
4566
- syntax: "*";
4567
- inherits: false
4568
- }
4569
-
4570
- @property --tw-translate-x {
4571
- syntax: "*";
4572
- inherits: false;
4573
- initial-value: 0;
4574
- }
4575
-
4576
- @property --tw-translate-y {
4577
- syntax: "*";
4578
- inherits: false;
4579
- initial-value: 0;
4580
- }
4581
-
4582
- @property --tw-translate-z {
4583
- syntax: "*";
4584
- inherits: false;
4585
- initial-value: 0;
4586
- }
4587
-
4588
- @property --tw-leading {
4589
- syntax: "*";
4590
- inherits: false
4591
- }
4592
-
4593
- @property --tw-font-weight {
4594
- syntax: "*";
4595
- inherits: false
4596
- }
4597
-
4598
- @property --tw-tracking {
4599
- syntax: "*";
4600
- inherits: false
4601
- }
4602
-
4603
- @property --tw-duration {
4604
- syntax: "*";
4605
- inherits: false
4606
- }
4607
-
4608
- @keyframes spin {
4609
- to {
4610
- transform: rotate(360deg);
4611
- }
4612
- }