/* Properties */

@property --loader-progress {
	syntax: '<integer>';
	inherits: false;
	initial-value: 0;
}

/* Waiting for better color-mix support: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix */

/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vmin, 1rem)) {
	:root {
		--app-font-size-xxs: clamp(0.84rem, 0.13vmin + 0.7rem, 0.91rem);
		--app-font-size-xs: clamp(0.99rem, 0.17vmin + 0.8rem, 1.09rem);
		--app-font-size-base: clamp(1.13rem, 0.23vmin + 1.07rem, 1.25rem);
		--app-font-size-xl: clamp(1.5rem, 0.3vmin + 1.42rem, 1.66rem);
		--app-font-size-xxl: clamp(1.99rem, 0.4vmin + 1.89rem, 2.21rem);
	}
}
/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vmin, 1rem)) {
	:root {
		--app-font-size-xxs: 0.84rem;
		--app-font-size-xs: 0.99rem;
		--app-font-size-base: 1.13rem;
		--app-font-size-xl: 1.5rem;
		--app-font-size-xxl: 1.99rem;
	}
	@media screen and (min-width: 1280px) {
		:root {
			--app-font-size-xxs: 0.91rem;
			--app-font-size-xs: 1.09rem;
			--app-font-size-base: 1.25rem;
			--app-font-size-xl: 1.66rem;
			--app-font-size-xxl: 2.21rem;
		}
	}
}

:root {
	/* App */
	--app-border-radius: 0.5rem; /* 8px */
	--app-color-background: #fff;
	--app-color-correct: #00ff00;
	--app-color-danger: #ffaa00;
	--app-color-disabled: #b0b0b0;
	--app-color-error: #ff4d4d;
	--app-color-face-detected: var(--app-color-correct);
	--app-color-face-detected-invalid: var(--app-color-danger);
	--app-color-face-undetected: rgba(255, 255, 255, 0.8);
	--app-color-frame: #fff;
	--app-color-frame-detected: var(--app-color-primary);
	--app-color-frame-detecting: var(--app-color-primary);
	--app-color-frame-qadetected-not-centered: var(--app-color-danger);
	--app-color-frame-qadetected-review: var(--app-color-primary);
	--app-color-frame-qadetected-too-close: var(--app-color-danger);
	--app-color-frame-qadetected-too-far: var(--app-color-danger);
	--app-color-frame-qadetected: var(--app-color-correct);
	--app-color-frame-qadetecting: var(--app-color-correct);
	--app-color-link: rgb(21, 0, 255);
	--app-color-overlay: rgba(255, 255, 255, 0.8);
	--app-color-primary: #52a5ff;
	--app-color-text: #000;
	--app-color-text-disabled: #b0b0b0;
	--app-color-text-inverse: #fff;
	--app-font-family: Helvetica, Arial, sans-serif;
	--app-font-weight: 400;
	--app-font-weight-bold: 700;
	--app-icon-size: 1.3;

	--aspect-ratio-id-card: 1.59/1;
	--aspect-ratio-passport: 1.42/1;

	--background-color-inverse: #000;
	--background-color-transparent: #00000000;

	--box-shadow:
		0.1px 0.1px 0.2px hsl(var(--shadow-color) / 0.76), 1.4px 1.7px 2.5px -1.2px hsl(var(--shadow-color) / 0.76),
		6.1px 7.5px 10.9px -2.5px hsl(var(--shadow-color) / 0.76);
	--box-shadow-disabled:
		0.1px 0.1px 0.2px hsl(var(--shadow-color-disabled) / 0.76),
		1.4px 1.7px 2.5px -1.2px hsl(var(--shadow-color-disabled) / 0.76),
		6.1px 7.5px 10.9px -2.5px hsl(var(--shadow-color-disabled) / 0.76);
	--box-shadow-error:
		0.1px 0.1px 0.2px hsl(var(--app-color-error) / 0.76), 1.4px 1.7px 2.5px -1.2px hsl(var(--app-color-error) / 0.76),
		6.1px 7.5px 10.9px -2.5px hsl(var(--app-color-error) / 0.76);
	--box-shadow-inverse:
		0.1px 0.1px 0.2px hsl(var(--shadow-color-inverse) / 0.76),
		1.4px 1.7px 2.5px -1.2px hsl(var(--shadow-color-inverse) / 0.76),
		6.1px 7.5px 10.9px -2.5px hsl(var(--shadow-color-inverse) / 0.76);
	--box-shadow-primary:
		0.1px 0.1px 0.2px hsl(var(--shadow-color-primary) / 0.76),
		1.4px 1.7px 2.5px -1.2px hsl(var(--shadow-color-primary) / 0.76),
		6.1px 7.5px 10.9px -2.5px hsl(var(--shadow-color-primary) / 0.76);

	/* Button */
	--button-animation-duration: 15000ms;
	--button-color-background-hover: unset;
	--button-border-radius: var(--app-border-radius);
	--button-color-shadow: var(--box-shadow-primary);
	--button-color-background: var(--app-color-primary);
	--button-color-border: var(--app-color-primary);
	--button-color-hover: unset;
	--button-color-text: #fff;
	--button-corner-width: 25px;
	--button-border-width: medium;
	--button-font-case: none;
	--button-transition-duration: 0.66s;
	--button-font-size: var(--app-font-size-base);

	/* Camera */
	--camera-color-background: var(--app-color-background);
	--camera-color-overlay: var(--app-color-overlay);
	--camera-color-text: var(--app-color-text);

	/* Select Document Card */
	--card-border-radius: var(--app-border-radius);
	--card-border-width: 0.125rem;
	--card-color-background: #fff;
	--card-color-backgroundselected: var(--card-color-background);
	--card-color-border: none;
	--card-color-borderSelected: var(--app-color-primary);
	--card-color-shadow: var(--shadow-elevation-low);
	--card-color-text: var(--app-color-text);

	/* Head */
	--head-color-background: var(--app-color-primary);

	/* Loader */
	--loader-color-background: var(--app-color-primary);
	--loader-color-overlay: var(--app-color-overlay);
	--loader-color-text: var(--app-color-text);
	--loader-progress: 0;

	/* --shadow-color: 0deg 0% 50%; */
	--shadow-color: 0deg 0% 0%;
	--shadow-color-disabled: 0deg 0% 25%;
	--shadow-color-inverse: 0deg 0% 100%;
	--shadow-color-primary: 0deg 0% 43%; /* 212deg 76% 43% */
	--shadow-elevation-high:
		0.3px 0.3px 0.6px hsl(var(--shadow-color) / 0.11), 3.2px 3.3px 6.4px -0.1px hsl(var(--shadow-color) / 0.16),
		5.8px 5.8px 11.4px -0.2px hsl(var(--shadow-color) / 0.21),
		8.4px 8.4px 16.5px -0.2px hsl(var(--shadow-color) / 0.26),
		11.4px 11.5px 22.5px -0.3px hsl(var(--shadow-color) / 0.31),
		15.2px 15.3px 29.9px -0.4px hsl(var(--shadow-color) / 0.36),
		20.1px 20.2px 39.5px -0.5px hsl(var(--shadow-color) / 0.42),
		26.5px 26.7px 52.2px -0.6px hsl(var(--shadow-color) / 0.47),
		34.8px 35.1px 68.6px -0.7px hsl(var(--shadow-color) / 0.52),
		45.4px 45.7px 89.4px -0.7px hsl(var(--shadow-color) / 0.57);
	--shadow-elevation-low:
		0.3px 0.3px 0.6px hsl(var(--shadow-color) / 0.14), 0.7px 0.7px 1.4px -0.4px hsl(var(--shadow-color) / 0.36),
		1.6px 1.6px 3.1px -0.7px hsl(var(--shadow-color) / 0.58);
	--shadow-elevation-medium:
		0.3px 0.3px 0.6px hsl(var(--shadow-color) / 0.12), 1.4px 1.4px 2.7px -0.2px hsl(var(--shadow-color) / 0.23),
		2.5px 2.5px 4.9px -0.4px hsl(var(--shadow-color) / 0.34), 4.4px 4.5px 8.7px -0.6px hsl(var(--shadow-color) / 0.45),
		7.9px 8px 15.6px -0.7px hsl(var(--shadow-color) / 0.56);

	--space-base: max(1vh, 0.5rem); /* 8px */
	--space-base-x2: max(2.5vh, 1rem); /* 16px */
	--space-base-x5: max(5vh, 2rem); /* 32px */
	--space-base-x10: max(10vh, 4rem); /* 64px */
	--space-base-x20: max(20vh, 8rem); /* 128px */
	--space-base-x25: max(20vh, 10rem); /* 160px */
	--space-base-x30: max(30vh, 12rem); /* 192px */
	--space-base-x40: max(40vh, 16rem); /* 256px */

	/* Title */
	--title-color-text: var(--app-color-primary);
	--title-font-family: var(--app-font-family);
	--title-font-size: var(--app-font-size-xl);
	--title-font-weight: var(--app-font-weight);

	--view-width: 85vmin;
	--view-mobile-width: 100vmin;
}

/* Components */

/* Dialog */
dialog,
dialog::backdrop {
	--dialog-color-background: var(--app-color-background);
	--dialog-color-overlay: rgba(0, 0, 0, 0.8);
	--dialog-color-text: var(--app-color-text);
}

/*
 * 1. Animations
 * 2. Elements, Attributes
 * 3. Classes
 * 4. IDs
 * 5. Media Queries
 */

/* Animations */

@keyframes fade-blink {
	from {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
	to {
		opacity: 1;
	}
}

@keyframes fillButton {
	0% {
		background-position: right bottom;
		border-color: var(--button-color-text);
		color: var(--button-color-text);
	}
	100% {
		background-position: left bottom;
		border-color: var(--button-color-border);
		color: var(--button-color-background);
	}
}

@keyframes loading {
	0% {
		height: 0;
		left: 36px;
		opacity: 0;
		top: 36px;
		width: 0;
	}
	4.9% {
		height: 0;
		left: 36px;
		opacity: 0;
		top: 36px;
		width: 0;
	}
	5% {
		height: 0;
		left: 36px;
		opacity: 1;
		top: 36px;
		width: 0;
	}
	100% {
		height: 72px;
		left: 0;
		opacity: 0;
		top: 0;
		width: 72px;
	}
}

@keyframes progress-to-25 {
	100% {
		--loader-progress: 25;
	}
}

@keyframes progress-to-50 {
	100% {
		--loader-progress: 50;
	}
}

@keyframes progress-to-75 {
	100% {
		--loader-progress: 75;
	}
}

@keyframes progress-to-100 {
	100% {
		--loader-progress: 100;
	}
}

@keyframes showBackgroundColor {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes spikeRoll {
	0% {
		background-size: 10px 3px;
	}
	16% {
		background-size:
			10px 50px,
			10px 3px,
			10px 3px,
			10px 3px,
			10px 3px,
			10px 3px;
	}
	33% {
		background-size:
			10px 30px,
			10px 50px,
			10px 3px,
			10px 3px,
			10px 3px,
			10px 3px;
	}
	50% {
		background-size:
			10px 10px,
			10px 30px,
			10px 50px,
			10px 3px,
			10px 3px,
			10px 3px;
	}
	66% {
		background-size:
			10px 3px,
			10px 10px,
			10px 30px,
			10px 50px,
			10px 3px,
			10px 3px;
	}
	83% {
		background-size:
			10px 3px,
			10px 3px,
			10px 10px,
			10px 30px,
			10px 50px,
			10px 3px;
	}
	100% {
		background-size:
			10px 3px,
			10px 3px,
			10px 3px,
			10px 10px,
			10px 30px,
			10px 50px;
	}
}

/* Elements, Attributes */

html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}

[hidden] {
	display: none !important;
}

:host {
	display: block;
}

:not(:defined) {
	display: block;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

a {
	color: var(--app-color-link);
	cursor: pointer;
	text-decoration: none;
}
a[role='button'][aria-disabled='true'],
button[aria-disabled='true'] {
	pointer-events: none;
}
/* a[role='button'].animated {
	box-sizing: border-box;
	line-height: inherit;
} */
a[role='button'].legacy,
button.legacy,
a[role='button'].animated,
button.animated {
	align-items: center;
	border-width: 0px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font-size: var(--button-font-size);
	justify-content: center;
	min-height: calc(2 * 1rem + 0.9em);
	padding: var(--space-base);

	text-transform: var(--button-font-case);
	width: 100%;
}
a[role='button'].legacy,
button.legacy {
	border-radius: var(--button-border-radius);
	color: var(--button-color-text);
}
a[role='button'].legacy.primary,
button.legacy.primary {
	background: var(--button-color-background);
	box-shadow: var(--button-color-shadow);
	text-align: center;
}
a[role='button'].legacy.primary.with-animation.forwarding,
button.legacy.primary.with-animation.forwarding {
	animation: fillButton var(--button-animation-duration) linear forwards;
	background: linear-gradient(to right, var(--button-color-text) 50%, var(--button-color-background) 50%);
	background-position: left bottom;
	background-size: 200% 100%;
	border-style: solid;
	border-width: medium;
	position: relative; /* Make sure the button has a relative or absolute position for the pseudo-element to work correctly. */
}
a[role='button'].legacy.primary.with-animation.forwarding::before,
button.legacy.primary.with-animation.forwarding::before {
	animation: showBackgroundColor var(--button-animation-duration) linear forwards;
	background-color: #fff;
	border: medium solid var(--button-color-background);
	border-radius: var(--button-border-radius);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: -1;
}

a[role='button'].legacy.secondary,
button.legacy.secondary {
	background: transparent;
	border: var(--button-border-width) solid var(--button-color-border);
	color: var(--app-color-primary);
	text-align: center;
	transition: all var(--button-transition-duration) ease-in-out;
}
a[role='button'].legacy.secondary:hover,
button.legacy.secondary:hover {
	background-color: var(--button-color-background-hover, inherit);
	border-color: var(--button-color-hover, var(--button-color-border));
	color: var(--button-color-hover, var(--app-color-primary));
}
a[role='button'].legacy.secondary.white,
button.legacy.secondary.white {
	color: #fff;
}
a[role='button'][aria-disabled='true'].legacy.primary,
a[role='button'][aria-disabled='true'].legacy.secondary,
button[aria-disabled='true'].legacy.primary,
button[aria-disabled='true'].legacy.secondary {
	background: var(--app-color-disabled);
	box-shadow: var(--box-shadow-disabled);
}
a[role='button'].animated,
button.animated {
	background: var(--background-color-transparent);
	overflow: hidden;
	position: relative;
	transition: var(--button-transition-duration);
}
a[role='button'].animated.primary,
button.animated.primary {
	color: var(--button-color-background);
}
a[role='button'].animated.secondary,
button.animated.secondary {
	color: var(--app-color-text-inverse);
}
a[role='button'].animated.error,
button.animated.error {
	color: var(--app-color-error);
}
a[role='button'][aria-disabled='true'].animated.primary,
a[role='button'][aria-disabled='true'].animated.secondary,
button[aria-disabled='true'].animated.primary,
button[aria-disabled='true'].animated.secondary {
	color: var(--app-color-text-disabled);
}
a[role='button'].animated:hover,
button.animated:hover {
	border-radius: var(--button-border-radius);
	color: var(--app-color-text-inverse);
	transition: var(--button-transition-duration);
}
a[role='button'].animated.primary:hover,
button.animated.primary:hover {
	background: var(--button-color-background);
	box-shadow: var(--button-color-shadow);
}
a[role='button'].animated.secondary:hover,
button.animated.secondary:hover {
	background: var(--background-color-transparent);
	box-shadow: var(--box-shadow-inverse);
}
a[role='button'].animated.error:hover,
button.animated.error:hover {
	background: var(--app-color-error);
	box-shadow: var(--box-shadow-error);
}
a[role='button'].animated::before,
button.animated::before {
	content: '';
	display: inline-block;
	height: var(--button-corner-width);
	left: 0;
	position: absolute;
	top: 0;
	transition: var(--button-transition-duration);
	width: var(--button-corner-width);
}
a[role='button'].animated.primary::before,
button.animated.primary::before {
	border-left: var(--button-color-background) solid medium;
	border-top: var(--button-color-background) solid medium;
}
a[role='button'].animated.secondary::before,
button.animated.secondary::before {
	border-left: var(--app-color-text-inverse) solid thin;
	border-top: var(--app-color-text-inverse) solid thin;
}
a[role='button'].animated.error::before,
button.animated.error::before {
	border-left: var(--app-color-error) solid thin;
	border-top: var(--app-color-error) solid thin;
}
a[role='button'].animated:hover::before,
button.animated:hover::before {
	height: 100%;
	transition: var(--button-transition-duration);
	width: 100%;
}
a[role='button'][aria-disabled='true'].animated.primary::before,
a[role='button'][aria-disabled='true'].animated.secondary::before,
button[aria-disabled='true'].animated.primary::before,
button[aria-disabled='true'].animated.secondary::before {
	border-left-color: var(--app-color-text-disabled);
	border-top-color: var(--app-color-text-disabled);
}
a[role='button'].animated::after,
button.animated::after {
	bottom: 0;
	content: '';
	display: inline-block;
	height: var(--button-corner-width);
	position: absolute;
	right: 0;
	transition: var(--button-transition-duration);
	width: var(--button-corner-width);
}
a[role='button'].animated.primary::after,
button.animated.primary::after {
	border-bottom: var(--button-color-background) solid medium;
	border-right: var(--button-color-background) solid medium;
}
a[role='button'].animated.secondary::after,
button.animated.secondary::after {
	border-bottom: var(--app-color-text-inverse) solid thin;
	border-right: var(--app-color-text-inverse) solid thin;
}
a[role='button'].animated.error::after,
button.animated.error::after {
	border-bottom: var(--app-color-error) solid thin;
	border-right: var(--app-color-error) solid thin;
}
a[role='button'].animated:hover::after,
button.animated:hover::after {
	height: 100%;
	transition: var(--button-transition-duration);
	width: 100%;
}
a[role='button'][aria-disabled='true'].animated.primary::after,
a[role='button'][aria-disabled='true'].animated.secondary::after,
button[aria-disabled='true'].animated.primary::after,
button[aria-disabled='true'].animated.secondary::after {
	border-bottom-color: var(--app-color-text-disabled);
	border-right-color: var(--app-color-text-disabled);
}

b,
strong {
	font-weight: var(--app-font-weight-bold);
}

canvas {
	max-width: 100%;
}

details[open] > summary span {
	transform: rotate(180deg) scale(var(--app-icon-size, 1));
}

dialog {
	background: var(--dialog-color-background);
	border: none;
	border-radius: var(--app-border-radius);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	color: var(--dialog-color-text);
	font-size: var(--app-font-size-base);
	max-width: var(--view-width);
	outline: none;
	width: 100%;
}
dialog::backdrop {
	background: var(--dialog-color-overlay);
}
dialog .dialog-actions {
	padding-top: 1rem;
	text-align: right;
}
dialog .dialog-actions button {
	background-color: transparent;
	border: none;
	color: var(--app-color-primary);
	cursor: pointer;
	font-size: var(--app-font-size-base);
	outline: none;
	text-transform: var(--button-font-case);
}

dialog .dialog-link {
	color: var(--app-color-primary);
	cursor: pointer;
}

dialog .dialog-title {
	color: var(--app-color-primary);
	margin-bottom: 1rem;
	margin-top: 0;
	padding: 0;
}

img {
	height: auto;
	max-width: 100%;
}

input[type='checkbox'] {
	accent-color: var(--app-color-primary);
}

label {
	color: var(--app-color-primary);
	font-size: var(--app-font-size-base);
}

summary {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	color: var(--app-color-primary);
	cursor: pointer;
	display: flex;
	font-size: var(--app-font-size-base);
	font-weight: var(--app-font-weight-bold);
	justify-content: space-between;
	outline: none;
	padding: 0.8rem 0.25rem;
	position: relative;
	text-transform: var(--button-font-case);
}
summary::marker {
	content: none;
}
summary::-webkit-details-marker {
	display: none; /* Fix iOS: https://bugs.webkit.org/show_bug.cgi?id=204163 */
}
summary span {
	transition: transform 0.2s ease-in-out;
}

/* Classes */

.color-error {
	color: var(--app-color-error);
}

.component-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-base-x5);
	justify-content: space-between;
	margin: 0 auto;
	max-width: 90vw;
	min-height: 100vh;
	min-height: 100dvh;
	padding: calc(var(--space-base-x5) - var(--space-base-x2)) 0 var(--space-base-x5) 0;
	position: relative;
	width: var(--view-width);
}
.component-container.within-modal {
	min-height: 100vh;
	min-height: 100dvh;
	min-width: auto;
	width: auto;
}
/* The pseudo-class :not with a list of selectors as argument has little browser support for now:
   https://developer.mozilla.org/en-US/docs/Web/CSS/:not#browser_compatibility */
/* .component-container > *:not(.backdrop, .document-detect-container, .full-width, .header-container, .menu-container, .modal) { */
.component-container
	> :not(.backdrop):not(.document-detect-container):not(.full-width):not(.header-container):not(.menu-container):not(
		.modal
	) {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-base-x5);
	justify-content: center;
	width: 100%;
}
.component-container > .full-width {
	margin-left: -50vw;
	margin-right: -50vw;
	text-align: center;
	width: 100vw;
}

.component-container .footer-container .text-container,
.component-container .header-container .text-container {
	text-align: center;
	width: 100%;
}
.component-container .footer-container #info-container {
	margin-bottom: var(--space-base);
}
.component-container .header-container #info-container {
	margin-top: var(--space-base-x2);
}

.icon-check {
	border: 2px solid transparent;
	border-radius: 100px;
	box-sizing: border-box;
	display: inline-block;
	height: 22px;
	position: relative;
	transform: scale(var(--app-icon-size, 1));
	width: 22px;
}
.icon-check::after {
	border-style: solid;
	border-width: 0 2px 2px 0;
	box-sizing: border-box;
	content: '';
	display: block;
	height: 10px;
	left: 3px;
	position: absolute;
	top: -1px;
	transform: rotate(45deg);
	transform-origin: bottom left;
	width: 6px;
}

[class^='icon-chevron-'] {
	border: medium solid transparent;
	border-radius: 100px;
	height: 22px;
	position: relative;
	transform: scale(var(--app-icon-size, 1));
	width: 22px;
}
[class^='icon-chevron-']::after {
	content: '';
	height: 10px;
	position: absolute;
	width: 10px;
}
.icon-chevron-down::after {
	border-bottom: medium solid;
	border-right: medium solid;
	left: 4px;
	top: 2px;
	transform: rotate(45deg);
}
.icon-chevron-left::after {
	border-bottom: medium solid;
	border-left: medium solid;
	left: 5px;
	top: 3px;
	transform: rotate(45deg);
}
.icon-chevron-right::after {
	border-bottom: medium solid;
	border-right: medium solid;
	right: 5px;
	top: 3px;
	transform: rotate(-45deg);
}
.icon-chevron-up::after {
	border-right: medium solid;
	border-top: medium solid;
	bottom: 2px;
	left: 4px;
	transform: rotate(45deg);
}

.icon-danger {
	border: 2px solid;
	border-radius: 40px;
	box-sizing: border-box;
	display: inline-block;
	height: 20px;
	position: relative;
	transform: scale(var(--app-icon-size, 1));
	width: 20px;
}
.icon-danger::after,
.icon-danger::before {
	background: currentColor;
	border-radius: 3px;
	box-sizing: border-box;
	content: '';
	display: block;
	left: 7px;
	position: absolute;
	width: 2px;
}
.icon-danger::after {
	height: 8px;
	top: 2px;
}
.icon-danger::before {
	bottom: 2px;
	height: 2px;
}

.inline-center {
	align-items: center;
	display: inline-flex;
}

.list {
	list-style-type: none;
	padding: 0 0 0 0.5rem;
}
.list li {
	padding: 0 0 4.5vmin 1.5rem;
	position: relative;
}
.list li:last-child {
	padding-bottom: 0;
}
.list.checkmark li {
	padding-left: 2rem;
}
.list.condensed li {
	padding: 0 0 1.5vmin 1.5rem;
}
.list li::before {
	background-color: var(--app-color-primary);
	color: #fff;
	content: '';
	height: 0.6rem;
	left: 0;
	position: absolute;
	text-align: center;
	top: 0.5rem;
	width: 0.6rem;
}
.list.checkmark li::before {
	background-color: transparent;
	border: solid var(--app-color-primary);
	border-width: 0 0.2rem 0.2rem 0;
	height: 1.1rem;
	top: 0;
	transform: rotate(45deg);
	width: 0.5rem;
}
.list.close {
	padding-left: 0;
}
.list.close li::after,
.list.close li::before {
	background-color: var(--app-color-primary);
	content: '';
	height: 0.2rem;
	left: 0;
	position: absolute;
	top: 0.575rem;
	width: 1.1rem;
}
.list.close li::after {
	transform: rotate(45deg);
}
.list.close li::before {
	transform: rotate(-45deg);
}
.list.close.error li::after,
.list.close.error li::before {
	background-color: var(--app-color-error);
}
.list.rounded li::before {
	border-radius: 50%;
}

ol.list {
	counter-reset: list;
	padding-left: 0;
}
ol.list li {
	padding-left: 4rem;
}
ol.list li::before {
	content: counters(list, '.') ' ';
	counter-increment: list;
	height: 2.5rem;
	line-height: 2.5rem;
	top: -0.5rem;
	width: 2.5rem;
}

.loader {
	animation: spikeRoll 0.95s linear infinite alternate;
	background-image:
		linear-gradient(var(--app-color-primary) 30px, transparent 0),
		linear-gradient(var(--app-color-primary) 30px, transparent 0),
		linear-gradient(var(--app-color-primary) 30px, transparent 0),
		linear-gradient(var(--app-color-primary) 30px, transparent 0),
		linear-gradient(var(--app-color-primary) 30px, transparent 0),
		linear-gradient(var(--app-color-primary) 30px, transparent 0);
	background-position:
		0px center,
		15px center,
		30px center,
		45px center,
		60px center,
		75px center,
		90px center;
	background-repeat: no-repeat;
	height: 30px;
	position: relative;
	width: 85px;
}

.loading-image {
	display: inline-block;
	height: 80px;
	position: relative;
	width: 70px;
}
.loading-image div {
	animation: loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
	border: 4px solid var(--loader-color-background);
	border-radius: 50%;
	opacity: 1;
	position: absolute;
}
.loading-image div:nth-child(2) {
	animation-delay: -0.5s;
}

.loading-text-container {
	font-size: var(--app-font-size-base);
	margin: 0 auto;
	max-width: 75ch;
	padding: var(--space-base-x2);
}

.menu-container {
	background-color: var(--app-color-background);
	box-shadow: 0 5px 25px 10px var(--app-color-background);
	display: flex;
	flex-direction: column;
	gap: var(--space-base-x2);
	padding: var(--space-base) 0;
	position: sticky;
	top: 0;
	width: 100%;
}
.menu-container span {
	flex-grow: 1;
	text-align: center;
}
.menu-container span#title-container {
	color: var(--title-color-text);
	font-family: var(--title-font-family);
	font-size: var(--title-font-size);
	font-weight: var(--title-font-weight);
}
.menu-container.white span {
	color: #fff;
}

.primary-color {
	color: var(--app-color-primary);
}

.select-container {
	align-items: center;
	display: flex;
	font-size: var(--app-font-size-xs);
	gap: 1rem;
	justify-content: center;
	max-width: inherit;
}
.select-container img {
	filter: invert(50%);
	height: 2.1rem;
	width: 2.1rem;
}
.select-container select {
	background: none;
	color: var(--color-inverse);
	padding: 4px 10px;
}

.td1 {
	aspect-ratio: var(--aspect-ratio-id-card);
}

.td2,
.td3 {
	aspect-ratio: var(--aspect-ratio-passport);
}

.text-center {
	text-align: center;
}

.text-container {
	font-size: var(--app-font-size-base);
	margin: 0 auto;
	max-width: 75ch;
	padding: var(--space-base) 0;
	text-align: left;
}

.watermark-image {
	height: 2rem; /* 32px */
	opacity: 0.7;
}

/* IDs */

#counter {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0;
	color: var(--app-color-text-inverse);
	display: flex;
	font-size: 5em;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	text-shadow: -1px 4px 7px rgba(0, 0, 0, 0.5);
	top: 0;
	z-index: 1;
}

#debug-container {
	background-color: rgba(0, 0, 0, 0.5);
	color: var(--app-color-text-inverse);
	text-align: center;
}

#debug-container img {
	height: auto;
	width: 100%;
}

#element-dialog {
	background-color: var(--app-color-background);
	border-radius: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	margin: 0 auto;
	max-height: none;
	max-width: none;
	overflow-y: auto;
	padding: 0 2rem;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 9;
}

#footer-area {
	display: flex;
	flex-direction: column;
	gap: var(--space-base);
}

#loading-container {
	align-items: center;
	background-color: var(--loader-color-overlay);
	bottom: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1;
}

#loading-text {
	color: var(--loader-color-text);
	margin-bottom: var(--space-base-x2);
}

/* Progress bar loader */
#loading-container.progress-bar .loading-image {
	align-items: center;
	background:
		radial-gradient(closest-side, white 79%, transparent 85% 105%, white 0),
		conic-gradient(var(--loader-color-background) calc(var(--loader-progress) * 1%), #eee 0);
	border-radius: 50%;
	display: flex;
	height: 90px;
	justify-content: center;
	width: 90px;
}
#loading-container.progress-bar.progress-to-25 .loading-image,
#loading-container.progress-bar.progress-to-25 .loading-image::before {
	--loader-progress: 0;
	animation: progress-to-25 2s 1 forwards;
}
#loading-container.progress-bar.progress-to-50 .loading-image,
#loading-container.progress-bar.progress-to-50 .loading-image::before {
	--loader-progress: 25;
	animation: progress-to-50 2s 1 forwards;
}
#loading-container.progress-bar.progress-to-75 .loading-image,
#loading-container.progress-bar.progress-to-75 .loading-image::before {
	--loader-progress: 50;
	animation: progress-to-75 2s 1 forwards;
}
#loading-container.progress-bar.progress-to-100 .loading-image,
#loading-container.progress-bar.progress-to-100 .loading-image::before {
	--loader-progress: 75;
	animation: progress-to-100 2s 1 forwards;
}
#loading-container.progress-bar .loading-image::before {
	content: counter(percentage) '%';
	counter-reset: percentage var(--loader-progress);
}
#loading-container.progress-bar .loading-image div {
	display: none;
}

#main-image,
#repeat-step-image {
	max-height: max(17rem, 30vh);
}

#video-container {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#video-container .camera {
	height: auto;
	max-height: 100%;
	min-width: var(--camera-min-width);
	object-fit: contain;
	transform: scaleX(-1);
	width: var(--camera-width);
}
#video-container .camera-overlay {
	align-items: center;
	background-color: var(--camera-color-overlay);
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	mix-blend-mode: hard-light;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
#video-container .camera-overlay.otp-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	mix-blend-mode: normal;
}
#video-container .camera-overlay #camera-mask {
	background-color: rgb(128, 128, 128);
	border: medium solid var(--app-color-frame);
	border-radius: var(--app-border-radius);
	height: auto;
	min-width: calc(var(--camera-min-width) * var(--camera-mask-size));
	width: calc(var(--camera-width) * var(--camera-mask-size));
}
#video-container.video-container--detected .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-detected);
}
.qa-enabled #video-container.video-container--detected .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-qadetected);
}
#video-container.video-container--detecting .camera-overlay #camera-mask,
#video-container.video-container--detected-too-close .camera-overlay #camera-mask,
#video-container.video-container--detected-too-far .camera-overlay #camera-mask,
#video-container.video-container--detected-not-centered .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-detecting);
}
.qa-enabled #video-container.video-container--detecting .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-qadetecting);
}

.qa-enabled #video-container.video-container--detected-too-close .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-qadetected-too-close);
}
.qa-enabled #video-container.video-container--detected-too-far .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-qadetected-too-far);
}
.qa-enabled #video-container.video-container--detected-not-centered .camera-overlay #camera-mask {
	border-color: var(--app-color-frame-qadetected-not-centered);
}
#video-container.video-container--not-detected .camera-overlay #camera-mask {
	border-color: var(--app-color-frame);
}
#video-container .camera-overlay #camera-mask.qr {
	height: 20rem;
	min-width: 20rem;
	width: 20rem;
}
#video-container .camera-overlay #camera-mask.td1 {
	height: calc(var(--camera-width) * var(--camera-mask-size) / var(--aspect-ratio-id-card));
}
#video-container .camera-overlay #camera-mask.qr,
#video-container .camera-overlay #camera-mask.td1.back,
#video-container .camera-overlay #camera-mask.td1.front {
	background-position: center center;
	background-repeat: no-repeat;
	transform: scaleX(-1);
}
/* #video-container .camera-overlay #camera-mask.td1.back {
	background-image: url(./media/placeholder-document-back.svg);
}
#video-container .camera-overlay #camera-mask.td1.front {
	background-image: url(./media/placeholder-document-front.svg);
} */
#video-container .camera-overlay #camera-mask.td2,
#video-container .camera-overlay #camera-mask.td3 {
	background-position: bottom center;
	height: calc(var(--camera-width) * var(--camera-mask-size) / var(--aspect-ratio-passport));
}

#video-wrapper {
	line-height: 0;
	z-index: 0;
}

/* Media Queries */

@media (min-width: 48rem) /* 768px */ {
	.text-container {
		text-align: left;
	}

	#debug-container {
		bottom: 0;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		width: min(20vw, 240px);
	}
}

@media (min-aspect-ratio: 14/5), (max-aspect-ratio: 3/1) and (max-height: 34.375rem) /* 550px */ {
	[class^='icon-chevron-'] {
		transform: none;
	}

	a[role='button'].legacy,
	button.legacy,
	a[role='button'].animated,
	button.animated {
		font-size: var(--app-font-size-xs);
	}

	dialog .dialog-actions button,
	dialog .dialog-body,
	dialog .dialog-title {
		font-size: var(--app-font-size-xs);
	}

	.component-container {
		height: inherit;
		padding-bottom: var(--space-base-x5);
		width: var(--view-mobile-width);
	}
	/* The pseudo-class :not with a list of selectors as argument has little browser support for now: https://developer.mozilla.org/en-US/docs/Web/CSS/:not#browser_compatibility */
	/* .component-container > *:not(.backdrop, .full-width, .header-container, .menu-container, .modal) { */
	.component-container > :not(.backdrop):not(.full-width):not(.header-container):not(.menu-container):not(.modal) {
		gap: var(--space-base-x2);
	}
	.component-container .menu-container {
		font-size: var(--app-font-size-base);
	}
	.component-container .text-container {
		font-size: var(--app-font-size-xs);
	}

	#main-image {
		max-height: max(15rem, 30vh);
	}
}

/* Size mobile */
@media (max-device-width: 61.9375rem) /* 991px */ {
	.component-container .footer-container #info-container {
		margin-bottom: var(--space-base-x5);
	}
}

/* Size mobile - landscape */
@media (orientation: landscape) and (max-device-width: 61.9375rem) /* 991px */ {
	.component-container {
		height: inherit;
		padding-bottom: var(--space-base-x5);
		width: var(--view-mobile-width);
	}
	.component-container > :nth-child(2) {
		margin-top: 0;
	}

	dialog {
		max-width: var(--view-mobile-width);
	}
}

/* Size mobile - portrait */
@media (orientation: portrait) and (max-device-width: 61.9375rem) /* 991px */ {
	.component-container {
		gap: 0;
		height: inherit;
	}
}

/* Size mobile - landscape, portrait */
@media (max-device-height: 47.9375rem) /* 767px */ {
	.component-container .footer-container #info-container {
		margin-bottom: 0;
	}

	.component-container .header-container #info-container {
		margin-top: 0;
	}
}

/* Touch screen */
@media (pointer: coarse) {
	a[role='button'].animated,
	button.animated {
		border-radius: var(--app-border-radius);
	}
	a[role='button'].animated.primary,
	button.animated.primary {
		background: var(--app-color-primary);
		box-shadow: var(--button-color-shadow);
		color: var(--app-color-text-inverse);
	}
	a[role='button'].animated.secondary,
	button.animated.secondary {
		background: transparent;
		border: medium solid var(--app-color-text);
		box-shadow: 0 0 0 0 transparent;
		color: var(--app-color-text-inverse);
	}
	a[role='button'].animated.secondary::after,
	button.animated.secondary::after {
		border-bottom: none !important;
		border-right: none !important;
		box-shadow: none;
	}
	a[role='button'].animated.secondary::before,
	button.animated.secondary::before {
		border-left: none !important;
		border-top: none !important;
	}
}

@media (max-width: 47.9375rem) {
	.loading-text-container {
		max-width: 20rem;
	}
}