@incodetech/web 2.2.0 → 2.3.0-rc.0

package/dist/id/styles.css

@@ -5,7 +5,6 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-font-weight: initial;
       --tw-border-style: solid;
       --tw-outline-style: solid;
       --tw-duration: initial;
@@ -187,8 +186,8 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {
+  max-width: var(--id-capture-flip-card-subtitle-max-w);
   text-align: center;
-  max-width: 300px;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
   font-weight: var(--typography-headline-h5-weight);
@@ -202,7 +201,7 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {
@@ -273,7 +272,7 @@
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {
   z-index: 10;
   width: 100%;
-  max-width: 384px;
+  max-width: var(--id-capture-bottom-area-max-w);
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
   flex-direction: column;
   flex: 1;
@@ -371,9 +370,9 @@
 }
 
 .IncodeCommonIssuesContent .IncodeCommonIssuesCards {
-  gap: var(--spacing-32, var(--spacing-32, 32px));
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-32, var(--spacing-32, 32px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   display: flex;
@@ -430,7 +429,7 @@
 }
 
 .IncodeChooserPage .IncodePageTitle {
-  max-width: 15.625rem;
+  max-width: var(--incode-form-max);
 }
 
 .IncodeChooserPage .IncodeChooserContainer {
@@ -444,7 +443,7 @@
 .IncodeCaptureFrame {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   --frame-border-color: var(--border-neutral-100);
-  border: 4px solid var(--frame-border-color);
+  border: var(--id-capture-frame-border-width) solid var(--frame-border-color);
   justify-content: center;
   align-self: center;
   align-items: center;
@@ -454,15 +453,15 @@
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameHorizontal {
-  aspect-ratio: 35 / 22;
   width: 100%;
-  max-width: 640px;
+  max-width: var(--id-capture-frame-horizontal-max-width);
+  aspect-ratio: 35 / 22;
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  aspect-ratio: 22 / 35;
   width: 100%;
-  max-width: 274px;
+  max-width: var(--id-capture-frame-vertical-max-width);
+  aspect-ratio: 22 / 35;
 }
 
 .IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {
@@ -528,7 +527,7 @@
 
 @media (min-width: 48rem) {
   .IncodeIdCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -665,8 +664,8 @@
   width: max-content;
   left: 50%;
   bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));
+  animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;
   justify-content: center;
-  animation: .35s ease-in 3.5s forwards manualCaptureTooltipExit;
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -699,6 +698,27 @@
   color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  animation: none;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {
+  animation: none;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {
+  animation-name: manualCaptureTooltipExitAutoDismiss;
+}
+
 .IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {
   aspect-ratio: 42 / 30;
 }
@@ -719,6 +739,18 @@
   }
 }
 
+@keyframes manualCaptureTooltipExitAutoDismiss {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+
+  to {
+    opacity: .5;
+    transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);
+  }
+}
+
 .IncodeIdManualCaptureButton {
   bottom: var(--spacing-24, var(--spacing-24, 24px));
   z-index: 100;
@@ -824,10 +856,10 @@
 }
 
 .IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {
-  width: 800px;
-  min-width: 800px;
-  height: 800px;
-  min-height: 800px;
+  width: var(--id-capture-hint-svg-size);
+  height: var(--id-capture-hint-svg-size);
+  min-width: var(--id-capture-hint-svg-size);
+  min-height: var(--id-capture-hint-svg-size);
 }
 
 .IncodeIdProcessingPage .IncodePageInner {
@@ -871,7 +903,7 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
@@ -880,7 +912,8 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
-  object-fit: cover;
+  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
+  object-fit: fill;
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -905,7 +938,7 @@
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {
   width: 100%;
-  max-width: 384px;
+  max-width: var(--id-capture-bottom-area-max-w);
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
   z-index: 10;
   flex-direction: column;
@@ -983,9 +1016,10 @@
   }
 }
 
-.IncodeIdProcessingLayout .IncodeIdProcessingResultContent {
+.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {
   flex-direction: column;
   align-items: center;
+  width: 100%;
   display: flex;
 }
 
@@ -1007,7 +1041,7 @@
   letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
-  max-width: 300px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {
@@ -1062,47 +1096,51 @@
   position: fixed;
 }
 
-.IncodeIdErrorMessage {
+.IncodeIdError .IncodeIdErrorMessage {
   text-align: center;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
   color: var(--color-text-body-0, var(--text-body-0-static));
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
 .IncodeIdNoAttemptsContent {
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  max-height: var(--id-no-attempts-content-max-h);
+  max-width: var(--id-no-attempts-content-max-w);
   flex-direction: column;
   flex: 1;
   justify-content: center;
   align-items: center;
-  max-width: 800px;
-  max-height: 840px;
   margin: auto;
   display: flex;
 }
 
-.IncodeIdNoAttemptsIcon {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-.IncodeIdNoAttemptsTitle {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {
   text-align: center;
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeIdNoAttemptsSubtitle {
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-normal, 400);
-  font-weight: var(--font-weight-normal, 400);
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
 }
 
-.IncodeIdNoAttemptsButtonContainer {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {
   bottom: var(--spacing-32, var(--spacing-32, 32px));
   right: var(--spacing-0, var(--spacing-none, 0px));
   left: var(--spacing-0, var(--spacing-none, 0px));
@@ -1112,6 +1150,42 @@
   position: absolute;
 }
 
+.IncodeUnacceptedIdDocuments {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {
+  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
+}
+
+.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  display: inline-flex;
+}
+
 .IncodeIdCaptureNotification {
   top: var(--spacing-24, var(--spacing-24, 24px));
   right: var(--spacing-24, var(--spacing-24, 24px));
@@ -1134,9 +1208,9 @@
   background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));
   width: 100%;
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  box-shadow: var(--id-capture-notification-content-shadow);
   display: flex;
   overflow: hidden;
-  box-shadow: 0 2.079px 36.379px #00000059;
 }
 
 .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {
@@ -1245,7 +1319,7 @@
 }
 
 .IncodeManualUploadPage .IncodeManualUploadTabTrigger:focus-visible {
-  border-radius: var(--radius-xs, .125rem);
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
   outline-style: var(--tw-outline-style);
   outline-offset: 2px;
   outline-width: 2px;
@@ -1600,11 +1674,6 @@
   initial-value: 0;
 }
 
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
-}
-
 @property --tw-border-style {
   syntax: "*";
   inherits: false;

package/dist/id/styles.css.js

@@ -0,0 +1 @@
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-border-style: solid;\n      --tw-outline-style: solid;\n      --tw-duration: initial;\n    }\n  }\n}\n\n.IncodeSrOnly {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.IncodeAgeVerificationPage .IncodePageInner {\n  padding-top: var(--spacing-8, var(--spacing-8, 8px));\n  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeAgeVerificationPage .IncodePageHeader {\n  height: var(--page-header-height);\n  min-height: var(--page-header-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageLogo {\n  height: var(--age-verification-logo-height);\n}\n\n.IncodeAgeVerificationPage .IncodePageTitleContainer {\n  max-width: none;\n}\n\n.IncodeAgeVerificationPage .IncodePageContent {\n  justify-content: center;\n}\n\n.IncodeAgeVerificationPage .IncodePageFooter {\n  padding-top: var(--spacing-12, var(--spacing-12, 12px));\n  padding-bottom: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationContent {\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationList {\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  justify-content: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  flex-direction: column;\n  flex: 1;\n  margin-inline: auto;\n  list-style-type: none;\n  display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationItem {\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon {\n  height: var(--spacing-64, var(--spacing-64, 64px));\n  width: var(--spacing-96, var(--spacing-96, 96px));\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationIcon img {\n  width: 100%;\n  height: 100%;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationText {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  flex: 1;\n}\n\n.IncodeAgeVerificationPage .IncodeAgeVerificationButton {\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  margin-inline: auto;\n}\n\n.IncodeIdTutorial .IncodePageTitleContainer {\n  padding-block: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialContainer {\n  margin: calc(var(--spacing-24, var(--spacing-24, 24px)) * -1);\n}\n\n.IncodeIdTutorial .IncodeBaseTutorialAnimationContainer {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeFlipAnimation {\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  height: 100%;\n  padding: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdFlipCardPage .IncodePageInner {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdFlipCardLayout {\n  width: 100%;\n  height: 100%;\n  padding: var(--spacing-24, var(--spacing-24, 24px));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent {\n  z-index: 10;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTopArea {\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-24, var(--spacing-24, 24px));\n  padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n  z-index: 10;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCopy {\n  opacity: 0;\n  flex-direction: column;\n  align-items: center;\n  animation: .3s ease-out forwards incodeIdFlipCardFadeIn;\n  display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardTitle {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {\n  max-width: var(--id-capture-flip-card-subtitle-max-w);\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame {\n  overflow: hidden;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n  width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {\n  --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardScene {\n  perspective: 1200px;\n  width: 100%;\n  height: 100%;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n  width: 100%;\n  height: 100%;\n  transform-style: preserve-3d;\n  animation: 1s ease-in-out .6s forwards incodeIdFlipCardRotate;\n  position: relative;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardCard {\n    animation: none;\n  }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  backface-visibility: hidden;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n  transform: rotateY(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardFace.IncodeIdFlipCardFaceBack {\n    opacity: 0;\n    animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeIn;\n    transform: none;\n  }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  animation: 1s ease-in-out .6s forwards incodeIdFlipCardFrontFade;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardImage {\n    animation: 1s ease-in-out .6s forwards incodeIdFlipCardReducedMotionFadeOut;\n  }\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardAsset {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  padding: var(--spacing-4, var(--spacing-4, 4px));\n  display: block;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {\n  z-index: 10;\n  width: 100%;\n  max-width: var(--id-capture-bottom-area-max-w);\n  padding-top: var(--spacing-8, var(--spacing-8, 8px));\n  flex-direction: column;\n  flex: 1;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea .IncodeCaptureEncryptionLabel {\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  white-space: nowrap;\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  display: flex;\n}\n\n@keyframes incodeIdFlipCardFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes incodeIdFlipCardRotate {\n  from {\n    transform: rotateY(0);\n  }\n\n  to {\n    transform: rotateY(180deg);\n  }\n}\n\n@keyframes incodeIdFlipCardFrontFade {\n  0%, 20% {\n    opacity: 1;\n  }\n\n  50%, 100% {\n    opacity: 0;\n  }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes incodeIdFlipCardReducedMotionFadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalDialog {\n  max-width: none;\n  height: 100%;\n  max-height: none;\n}\n\n.IncodeCommonIssuesFullScreen .IncodeModalContent {\n  border-radius: var(--radius-none, var(--border-radius-none));\n  max-width: none;\n  height: 100%;\n  margin: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesQuestionIcon {\n  flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCards {\n  width: 100%;\n  max-width: var(--incode-form-max-w);\n  gap: var(--spacing-32, var(--spacing-32, 32px));\n  padding-block: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCard {\n  align-items: flex-start;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  flex-shrink: 0;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardText {\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesButtons {\n  margin-top: auto;\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {\n  width: 100%;\n}\n\n.IncodeChooserPage .IncodePageContent {\n  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeChooserPage .IncodePageTitle {\n  max-width: var(--incode-form-max);\n}\n\n.IncodeChooserPage .IncodeChooserContainer {\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  margin-top: auto;\n  display: flex;\n}\n\n.IncodeCaptureFrame {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  --frame-border-color: var(--border-neutral-100);\n  border: var(--id-capture-frame-border-width) solid var(--frame-border-color);\n  justify-content: center;\n  align-self: center;\n  align-items: center;\n  transition: max-width .3s ease-out, border-color .3s ease-out;\n  display: flex;\n  position: relative;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameHorizontal {\n  width: 100%;\n  max-width: var(--id-capture-frame-horizontal-max-width);\n  aspect-ratio: 35 / 22;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameVertical {\n  width: 100%;\n  max-width: var(--id-capture-frame-vertical-max-width);\n  aspect-ratio: 22 / 35;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {\n  aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameVertical {\n  aspect-ratio: 30 / 42;\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameIdle {\n  --frame-border-color: var(--border-neutral-100);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {\n  --frame-border-color: var(--border-brand-500);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {\n  --frame-border-color: var(--border-status-positive-static);\n}\n\n.IncodeCaptureFrame.IncodeCaptureFrameError {\n  --frame-border-color: var(--border-status-negative);\n}\n\n.IncodeIdCaptureStage {\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.IncodeIdCaptureStage > * {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  position: absolute;\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n  animation: incodeIdCaptureResultCrossfadeOut var(--id-capture-result-crossfade-duration) linear forwards;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdCaptureStage > .IncodeIdCaptureStageResultExiting {\n    animation-duration: 1ms;\n  }\n}\n\n.IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n  animation: incodeIdCaptureResultCrossfadeIn var(--id-capture-result-crossfade-duration) linear forwards;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdCaptureStage > .IncodeIdCaptureStageResultEntering {\n    animation-duration: 1ms;\n  }\n}\n\n.IncodeIdCapturePage {\n  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n}\n\n@media (min-width: 48rem) {\n  .IncodeIdCapturePage {\n    background-color: var(--capture-page-backdrop-color);\n  }\n}\n\n.IncodeIdCapturePage .IncodePageInner {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdCapturePage .IncodePageContent {\n  flex: 1;\n  position: relative;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing {\n  height: 100%;\n  color: var(--color-text-body-0, var(--text-body-0-static));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo {\n  pointer-events: none;\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo.IncodeCaptureVideoLoading {\n  opacity: 0;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureVideo .IncodeCaptureVideoElement {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  object-fit: cover;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureOverlay {\n  pointer-events: none;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureButton {\n  border-radius: var(--radius-button-primary, var(--button-primary-border-radius));\n  padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n  padding-block: var(--spacing-12, var(--spacing-12, 12px));\n  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n  color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing {\n  height: 100%;\n  color: var(--color-text-body-0, var(--text-body-0-static));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureInitializing .IncodeCaptureInitializingText {\n  margin-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdCapturePage .IncodeCaptureInitializing .IncodeCaptureUploading, .IncodeIdCapturePage .IncodeCaptureUploading {\n  height: 100%;\n  color: var(--color-text-body-0, var(--text-body-0-static));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n@keyframes incodeIdCaptureResultCrossfadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes incodeIdCaptureResultCrossfadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n.IncodeCaptureOverlayId {\n  padding: var(--spacing-24, var(--spacing-24, 24px));\n  align-items: center;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection {\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-24, var(--spacing-24, 24px));\n  padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n  z-index: 10;\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureTopSection .IncodeCameraOverlayHeader {\n  padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n  padding-top: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter {\n  flex: 1;\n  justify-content: space-between;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {\n  position: relative;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {\n  pointer-events: none;\n  z-index: 1000;\n  --manual-capture-tooltip-button-gap: var(--spacing-4);\n  --manual-capture-tooltip-button-top-offset: var(--spacing-12);\n  --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));\n  width: max-content;\n  left: 50%;\n  bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));\n  animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;\n  justify-content: center;\n  display: flex;\n  position: absolute;\n  transform: translateX(-50%);\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n  padding: var(--spacing-16, var(--spacing-16, 16px));\n  animation: .5s ease-out forwards slideUp;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  flex-direction: column;\n  align-items: center;\n  list-style-type: none;\n  display: flex;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  font-family: var(--typography-tooltip-family);\n  font-size: var(--typography-tooltip-m-size);\n  font-weight: var(--typography-tooltip-m-weight);\n  line-height: var(--typography-tooltip-m-line-height);\n  letter-spacing: var(--typography-tooltip-m-letter-spacing);\n  text-wrap: nowrap;\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  animation: none;\n  position: absolute;\n  overflow: hidden;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {\n  animation: none;\n}\n\n.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {\n  animation-name: manualCaptureTooltipExitAutoDismiss;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {\n  aspect-ratio: 42 / 30;\n}\n\n.IncodeCaptureOverlayId .IncodeCameraFrameVertical.IncodeCaptureFramePassport {\n  aspect-ratio: 30 / 42;\n}\n\n@keyframes manualCaptureTooltipExit {\n  from {\n    opacity: 1;\n    transform: translateX(-50%);\n  }\n\n  to {\n    opacity: 0;\n    transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));\n  }\n}\n\n@keyframes manualCaptureTooltipExitAutoDismiss {\n  from {\n    opacity: 1;\n    transform: translateX(-50%) scale(1);\n  }\n\n  to {\n    opacity: .5;\n    transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);\n  }\n}\n\n.IncodeIdManualCaptureButton {\n  bottom: var(--spacing-24, var(--spacing-24, 24px));\n  z-index: 100;\n  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n  width: 100%;\n  translate: var(--tw-translate-x) var(--tw-translate-y);\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  flex-direction: column;\n  animation: .5s ease-out forwards slideUp;\n  display: flex;\n  position: absolute;\n  left: 50%;\n}\n\n.IncodeIdManualCaptureButton .IncodeButtonLink {\n  height: 100%;\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n  padding: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  flex-direction: column;\n  align-items: center;\n  list-style-type: none;\n  display: flex;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  font-family: var(--typography-tooltip-family);\n  font-size: var(--typography-tooltip-m-size);\n  font-weight: var(--typography-tooltip-m-weight);\n  line-height: var(--typography-tooltip-m-line-height);\n  letter-spacing: var(--typography-tooltip-m-letter-spacing);\n  text-wrap: nowrap;\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {\n  transition: filter .2s, transform .2s;\n}\n\n.IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent:active svg {\n  filter: brightness(.8);\n  transform: scale(.95);\n}\n\n@keyframes slideUpAndDown {\n  0%, 12% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  24% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  76% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  88%, 100% {\n    opacity: 0;\n    transform: translateY(100%);\n  }\n}\n\n.IncodeIdHint {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  z-index: 10;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated {\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  animation: 3s ease-in-out forwards slideUpAndDown;\n  display: flex;\n  position: relative;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {\n  width: var(--id-capture-hint-svg-size);\n  height: var(--id-capture-hint-svg-size);\n  min-width: var(--id-capture-hint-svg-size);\n  min-height: var(--id-capture-hint-svg-size);\n}\n\n.IncodeIdProcessingPage .IncodePageInner {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeIdProcessingLayout {\n  width: 100%;\n  height: 100%;\n  padding: var(--spacing-24, var(--spacing-24, 24px));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent {\n  z-index: 10;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingTopArea {\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-24, var(--spacing-24, 24px));\n  padding-bottom: var(--spacing-40, var(--spacing-40, 40px));\n  z-index: 10;\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame {\n  overflow: hidden;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {\n  width: var(--id-capture-frame-vertical-width);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {\n  left: -25%;\n  right: -25%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {\n  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));\n  object-fit: fill;\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage.IncodeIdProcessingImageBlurred {\n  filter: blur(var(--id-processing-image-blur-radius));\n  -webkit-backdrop-filter: blur(var(--id-processing-image-blur-radius));\n  backdrop-filter: blur(var(--id-processing-image-blur-radius));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingOverlay {\n  pointer-events: none;\n  z-index: 10;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: absolute;\n  inset: 0 -10%;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {\n  width: 100%;\n  max-width: var(--id-capture-bottom-area-max-w);\n  padding-top: var(--spacing-8, var(--spacing-8, 8px));\n  z-index: 10;\n  flex-direction: column;\n  flex: 1;\n  justify-content: space-between;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea .IncodeCaptureEncryptionLabel {\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  white-space: nowrap;\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  display: flex;\n}\n\n.IncodeIdProcessingLayout.IncodeIdProcessingLayoutNoImage .IncodeIdProcessingBottomArea {\n  justify-content: flex-end;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent {\n  flex-direction: column;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeProgressBarContainer {\n  margin-bottom: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  text-align: center;\n  min-height: var(--typography-headline-h2-line-height);\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n  animation: IncodeAnalyzingTitleFade var(--id-capture-analyzing-title-fade-duration) ease-out both;\n  display: inline-block;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle .IncodeAnalyzingTitleText {\n    animation-duration: 1ms;\n  }\n}\n\n.IncodeIdProcessingLayout .IncodeAnalyzingLottie {\n  width: 100%;\n  max-width: none;\n}\n\n@keyframes IncodeAnalyzingTitleFade {\n  from {\n    opacity: 0;\n    transform: translateY(var(--id-capture-analyzing-title-fade-offset));\n  }\n\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h2-size);\n  font-weight: var(--typography-headline-h2-weight);\n  line-height: var(--typography-headline-h2-line-height);\n  letter-spacing: var(--typography-headline-h2-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  text-align: center;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n  text-align: center;\n  max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {\n  padding-block: var(--spacing-12, var(--spacing-12, 12px));\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h4-size);\n  font-weight: var(--typography-headline-h4-weight);\n  line-height: var(--typography-headline-h4-line-height);\n  letter-spacing: var(--typography-headline-h4-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n  animation: .3s ease-out forwards incodeIdProcessingResultFadeOut;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeIdProcessingLayout .IncodeIdProcessingResultContentExiting, .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainerExiting {\n    animation-duration: 1ms;\n  }\n}\n\n@keyframes incodeIdProcessingResultFadeOut {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n.IncodeIdError {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  z-index: 1000;\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: fixed;\n}\n\n.IncodeIdError .IncodeIdErrorMessage {\n  text-align: center;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h4-size);\n  font-weight: var(--typography-headline-h4-weight);\n  line-height: var(--typography-headline-h4-line-height);\n  letter-spacing: var(--typography-headline-h4-letter-spacing);\n  color: var(--color-text-body-0, var(--text-body-0-static));\n  max-width: var(--incode-form-max-w);\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent {\n  padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n  max-height: var(--id-no-attempts-content-max-h);\n  max-width: var(--id-no-attempts-content-max-w);\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  display: flex;\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {\n  text-align: center;\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n  text-align: center;\n  max-width: var(--incode-form-max-w);\n}\n\n.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {\n  bottom: var(--spacing-32, var(--spacing-32, 32px));\n  right: var(--spacing-0, var(--spacing-none, 0px));\n  left: var(--spacing-0, var(--spacing-none, 0px));\n  padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n  justify-content: center;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeUnacceptedIdDocuments {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {\n  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n  align-items: center;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h4-size);\n  font-weight: var(--typography-headline-h4-weight);\n  line-height: var(--typography-headline-h4-line-height);\n  letter-spacing: var(--typography-headline-h4-letter-spacing);\n}\n\n.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {\n  align-items: center;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h3-size);\n  font-weight: var(--typography-headline-h3-weight);\n  line-height: var(--typography-headline-h3-line-height);\n  letter-spacing: var(--typography-headline-h3-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  display: inline-flex;\n}\n\n.IncodeIdCaptureNotification {\n  top: var(--spacing-24, var(--spacing-24, 24px));\n  right: var(--spacing-24, var(--spacing-24, 24px));\n  left: var(--spacing-24, var(--spacing-24, 24px));\n  z-index: 100;\n  max-width: var(--incode-form-max-w);\n  padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n  align-items: flex-end;\n  margin: auto;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n  z-index: 100;\n  border-radius: var(--radius-large, var(--border-radius-large));\n  border-style: var(--tw-border-style);\n  border-width: 2px;\n  border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n  background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n  width: 100%;\n  padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n  box-shadow: var(--id-capture-notification-content-shadow);\n  display: flex;\n  overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n  justify-content: center;\n  gap: var(--spacing-8, var(--spacing-8, 8px));\n  padding-top: var(--spacing-16, var(--spacing-16, 16px));\n  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n  text-align: center;\n  color: var(--color-text-body-0-static, var(--text-body-0-static));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h3-size);\n  font-weight: var(--typography-headline-h3-weight);\n  line-height: var(--typography-headline-h3-line-height);\n  letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n  height: var(--id-capture-notification-animation-height);\n  justify-content: center;\n  align-items: center;\n  width: auto;\n  display: flex;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadContainer {\n  width: 100%;\n  padding-block: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadFooter {\n  margin-top: auto;\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  row-gap: var(--spacing-24, var(--spacing-24, 24px));\n  width: 100%;\n  padding-top: var(--spacing-24, var(--spacing-24, 24px));\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadHintCard {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  border-radius: var(--radius-x-small, var(--border-radius-x-small));\n  background-color: var(--color-surface-brand-50, var(--surface-brand-50));\n  width: 100%;\n  padding-block: var(--spacing-16, var(--spacing-16, 16px));\n  padding-right: var(--spacing-12, var(--spacing-12, 12px));\n  padding-left: var(--spacing-32, var(--spacing-32, 32px));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  list-style-type: disc;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadHintCard li {\n  font-family: var(--typography-button-family);\n  font-size: var(--typography-button-s-size);\n  font-weight: var(--typography-button-s-weight);\n  line-height: var(--typography-button-s-line-height);\n  letter-spacing: var(--typography-button-s-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeManualUploadPage .IncodeManualUploadHintCard li + li {\n  margin-top: var(--spacing-4, var(--spacing-4, 4px));\n}\n\n.IncodeManualUploadPage .IncodeManualUploadTabsList {\n  width: 100%;\n  padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n  align-self: center;\n  display: flex;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadTabTrigger {\n  cursor: pointer;\n  border-bottom-style: var(--tw-border-style);\n  border-bottom-width: var(--border-width-bold, var(--primitive-border-width-2));\n  --tw-border-style: solid;\n  padding-inline: var(--spacing-12, var(--spacing-12, 12px));\n  padding-block: var(--spacing-16, var(--spacing-16, 16px));\n  text-align: center;\n  font-family: var(--typography-checkbox-radio-family);\n  font-size: var(--typography-checkbox-radio-m-size);\n  font-weight: var(--typography-checkbox-radio-m-weight);\n  line-height: var(--typography-checkbox-radio-m-line-height);\n  letter-spacing: var(--typography-checkbox-radio-m-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n  background-color: #0000;\n  border-style: solid;\n  border-color: #0000;\n  flex: 1;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadTabTrigger:focus-visible {\n  border-radius: var(--radius-x-small, var(--border-radius-x-small));\n  outline-style: var(--tw-outline-style);\n  outline-offset: 2px;\n  outline-width: 2px;\n  outline-color: var(--color-border-status-focus, var(--border-status-focus));\n}\n\n.IncodeManualUploadPage .IncodeManualUploadTabTrigger--active {\n  border-bottom-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeManualUploadPage .IncodeManualUploadError {\n  align-items: flex-start;\n  gap: var(--spacing-4, var(--spacing-4, 4px));\n  width: 100%;\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));\n  display: flex;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadError p {\n  margin: var(--spacing-0, var(--spacing-none, 0px));\n  flex: 1;\n}\n\n.IncodeManualUploadPage .IncodeManualUploadTab {\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeManualUploadSlot {\n  cursor: pointer;\n  align-items: center;\n  gap: var(--spacing-12, var(--spacing-12, 12px));\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  border-width: var(--border-width-regular, var(--primitive-border-width-1));\n  --tw-border-style: solid;\n  border-style: solid;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));\n  width: 100%;\n  padding-block: var(--spacing-24, var(--spacing-24, 24px));\n  padding-right: var(--spacing-24, var(--spacing-24, 24px));\n  padding-left: var(--spacing-20, var(--spacing-20, 20px));\n  text-align: left;\n  display: flex;\n}\n\n.IncodeManualUploadSlot .IncodeManualUploadSlotIcon {\n  width: var(--spacing-24, var(--spacing-24, 24px));\n  height: var(--spacing-24, var(--spacing-24, 24px));\n  flex-shrink: 0;\n  justify-content: center;\n  display: flex;\n}\n\n.IncodeManualUploadSlot .IncodeManualUploadSlotIconHighlight {\n  fill: var(--color-icon-neutral-500, var(--icon-neutral-500));\n}\n\n.IncodeManualUploadSlot .IncodeManualUploadSlotLabel {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n  font-family: var(--typography-headline-family);\n  font-size: var(--typography-headline-h5-size);\n  font-weight: var(--typography-headline-h5-weight);\n  line-height: var(--typography-headline-h5-line-height);\n  letter-spacing: var(--typography-headline-h5-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  flex: 1;\n  overflow: hidden;\n}\n\n.IncodeManualUploadSlot .IncodeManualUploadSlotAction {\n  border-radius: var(--radius-full, var(--border-radius-full));\n  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));\n  padding: var(--spacing-8, var(--spacing-8, 8px));\n  color: var(--color-button-primary-text-default, var(--button-primary-text-default));\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));\n  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));\n  --tw-duration: .2s;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  transition-duration: .2s;\n  display: inline-flex;\n}\n\n.IncodeManualUploadSlot:focus-visible {\n  outline-style: var(--tw-outline-style);\n  outline-offset: 2px;\n  outline-width: 2px;\n  outline-color: var(--color-border-status-focus, var(--border-status-focus));\n}\n\n.IncodeManualUploadSlot:hover:not(:disabled) .IncodeManualUploadSlotAction {\n  background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));\n}\n\n.IncodeManualUploadSlot:disabled {\n  cursor: not-allowed;\n  opacity: .5;\n}\n\n.IncodeManualUploadSlot:disabled .IncodeManualUploadSlotAction {\n  background-color: var(--color-button-primary-surface-disabled, var(--button-primary-surface-disabled));\n  color: var(--color-button-primary-text-disabled, var(--button-primary-text-disabled));\n}\n\n.IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction, .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded:hover:not(:disabled) .IncodeManualUploadSlotAction {\n  padding: var(--spacing-0, var(--spacing-none, 0px));\n  color: var(--color-surface-status-positive-500, var(--surface-status-positive-500));\n  background-color: #0000;\n}\n\n.IncodeManualUploadSlot + .IncodeManualUploadSlotInput {\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border-width: 0;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage {\n  height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadBody {\n  justify-content: center;\n  align-items: center;\n  row-gap: var(--spacing-16, var(--spacing-16, 16px));\n  width: 100%;\n  height: 100%;\n  max-width: var(--digital-id-content-max-w);\n  flex-direction: column;\n  margin-inline: auto;\n  display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewBody {\n  row-gap: var(--spacing-16, var(--spacing-16, 16px));\n  grid-template-columns: 1fr;\n  grid-template-rows: var(--spacing-24) var(--digital-id-preview-h) var(--spacing-24);\n  width: 100%;\n  height: 100%;\n  max-width: var(--digital-id-content-max-w);\n  align-content: center;\n  justify-items: center;\n  margin-inline: auto;\n  display: grid;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreStatusZone {\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPostCaptionZone {\n  justify-content: center;\n  align-items: flex-start;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFooter {\n  width: 100%;\n  margin-inline: auto;\n  margin-top: var(--spacing-24, var(--spacing-24, 24px));\n  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n  justify-content: flex-end;\n  row-gap: var(--spacing-16, var(--spacing-16, 16px));\n  max-width: var(--digital-id-content-max-w);\n  min-height: var(--digital-id-footer-min-h);\n  flex-direction: column;\n  display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadHiddenInput {\n  display: none;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadTutorialIllustration {\n  width: 100%;\n  max-height: var(--digital-id-tutorial-illustration-max-h);\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeUploadIdScreenImage {\n  height: var(--digital-id-illustration-max-h);\n  aspect-ratio: 191 / 266;\n  width: auto;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewCard {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  --tw-border-style: solid;\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n  width: var(--digital-id-preview-w);\n  height: var(--digital-id-preview-h);\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreview {\n  width: var(--digital-id-preview-w);\n  height: var(--digital-id-preview-h);\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  position: relative;\n  overflow: visible;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadDocumentPreviewPdf {\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  border-width: var(--border-width-bold, var(--primitive-border-width-2));\n  --tw-border-style: solid;\n  border-style: solid;\n  border-color: var(--color-border-status-positive, var(--border-status-positive-static));\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadPreviewPdf {\n  object-fit: contain;\n  width: 100%;\n  height: 100%;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadFileName {\n  text-align: center;\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-m-regular-size);\n  font-weight: var(--typography-body-m-regular-weight);\n  line-height: var(--typography-body-m-regular-line-height);\n  letter-spacing: var(--typography-body-m-regular-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  max-width: var(--digital-id-file-name-max-w);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {\n  border-radius: var(--radius-full, var(--border-radius-full));\n  background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n  width: var(--digital-id-progress-bar-w);\n  height: var(--digital-id-progress-bar-h);\n  overflow: hidden;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {\n  border-radius: var(--radius-full, var(--border-radius-full));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n  pointer-events: none;\n  width: var(--digital-id-preview-w);\n  height: var(--digital-id-laser-h);\n  transform: translateX(-50%) scale(var(--digital-id-laser-scale));\n  position: absolute;\n  top: -2px;\n  left: 50%;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {\n    display: none;\n  }\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadSuccessIcon {\n  color: var(--color-icon-status-positive, var(--icon-status-positive));\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorIcon {\n  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));\n  color: var(--color-icon-status-negative, var(--icon-status-negative));\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadErrorPreview {\n  margin-top: var(--spacing-8, var(--spacing-8, 8px));\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  --tw-border-style: solid;\n  border-style: solid;\n  border-width: 1px;\n  border-color: var(--color-border-status-negative, var(--border-status-negative));\n  padding: var(--spacing-4);\n}\n\n.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadAttempts {\n  margin-top: var(--spacing-8, var(--spacing-8, 8px));\n  font-family: var(--typography-body-family);\n  font-size: var(--typography-body-s-regular-size);\n  font-weight: var(--typography-body-s-regular-weight);\n  line-height: var(--typography-body-s-regular-line-height);\n  letter-spacing: var(--typography-body-s-regular-letter-spacing);\n  color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-outline-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false\n}\n";