/*
	@modCssClasses
	@customTag qr-box
	@cssMod: mod_fullWidth
	--theme-transitionDuration 			0.15s
	--theme-highlightedBackgroundColor 	rgba(0, 0, 0, 0.1)
	--theme-mainFont 					rgba(0, 0, 0, 1)
	--theme-inputBackgroundColor 		rgba(0, 0, 0, 0)
*/




qr-box {
	display: block;
	background-color: var(--theme-highlightedBackgroundColor, rgba(0, 0, 0, 0.1));
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 4rem;
	margin-bottom: 0;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	max-width: 25rem;
	padding-top: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	transition-property: background-color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

qr-box.mod_fullWidth {
	max-width: unset;
}

qr-box .header {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 23rem;
	margin-left: auto;
	margin-right: auto;
}

qr-box .header .title {
	font-size: 1rem;
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	font-weight: 600;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	text-align: center;
}

qr-box .header .subtitle {
	font-size: 0.8rem;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	text-align: center;
	color: var(--theme-secondaryFont, rgba(255, 255, 255, 1));
}

qr-box .header .subtitle a {
	color: var(--theme-linkColor, rgba(68, 68, 255, 1));
	text-decoration: underline;
	text-underline-offset: 0.25rem;
	text-decoration-style: dashed;
	font-weight: 600;
	transition-property: color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

qr-box .wrapper {
	aspect-ratio: 1 / 1;
	width: 100%;
	position: relative;
	max-width: 23rem;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

qr-box .wrapper .background {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

qr-box .wrapper .background svg {
	width: 3rem;
	height: 3rem;
	color: var(--theme-mainFont, rgba(0, 0, 0, 1));
	opacity: 0.6;
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

qr-box .wrapper .foreground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

qr-box .wrapper .foreground .section {
	display: flex;
	justify-content: center;
}

qr-box .wrapper .foreground .section canvas {
	max-width: 23rem;
	width: 100%;
	padding-top: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	background-color: rgb(255, 255, 255);
	border: medium none;
}

qr-box .controls {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 0;
	margin-top: 2rem;
}

qr-box .controls .button {
	min-height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 4rem;
	min-width: 4rem;
	width: 4rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	transition-property: opacity;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	cursor: pointer;
	background-color: var(--theme-inputBackgroundColor, rgba(0, 0, 0, 0));
}

qr-box .controls .button svg {
	width: 2rem;
	max-width: 2rem;
	min-width: 2rem;
	height: 2rem;
	fill: var(--theme-secondaryFont, rgba(0, 0, 0, 0.6));
	transition-property: fill;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}

qr-box .controls .button:hover svg {
	fill: var(--theme-mainFont, rgba(0, 0, 0, 1));
}

qr-box .controls .button .input {
	min-width: 2rem;
	max-width: 2rem;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	border: none;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	overflow: hidden;
	border-style: solid;
	border-width: 3px;
	border-color: var(--theme-secondaryFont, rgba(0, 0, 0, 0.6));
	transition-property: border-color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
	background-color: var(--theme-inputBackgroundColor, rgba(0, 0, 0, 0));
}

qr-box .controls .button:hover .input {
	border-color: var(--theme-mainFont, rgba(0, 0, 0, 1));
}

qr-box .controls .button .input[type="color"]::-webkit-color-swatch {
	border: none;
}

qr-box .controls .button .input[type="color"]::-moz-color-swatch {
	border: none;
}

qr-box .controls .button .input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

qr-box .footer {
	font-size: 0.8rem;
	color: var(--theme-mainFont, rgb(0, 0, 0));
	opacity: 0.6;
	line-height: 1.25;
	margin-top: 2rem;
	text-align: justify;
	border-top-style: dashed;
	border-top-width: 1px;
	border-top-color: var(--theme-secondaryFont, rgba(0, 0, 0, 0.6));
	padding-top: 0.5rem;
	transition-property: color, border-top-color;
	transition-duration: var(--theme-transitionDuration, 0.15s);
}