.form {
	margin-top: 15vh;
	margin-bottom: 2em;
	height: fit-content;
	width: min(100%, calc(375px + 0.5em*2));
	padding: 0 0.5em;
}
	.form-add {
		width: 100%;
		display: grid;
		grid-template-areas: ". button .";
		grid-template-columns: 1fr 8fr 1fr;
		gap: 0.5em;
	}
		.form-file {
			grid-area: button;
			text-align: center;
			grid-area: button;
		}
	.form-field, .form-upload, .form-message {
		margin-bottom: 0.25em;
		margin-left: calc((100% - 0.5rem/2)/10 + 0.5rem);
		width: calc((100% - 0.5rem/2)/10*8 - 0.5rem);
	}
	.form-upload {
		margin-top: 1em;
		width: fit-content;
	}
	.form-overlay {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
		z-index: 5;
	}
	.form-message {
		margin-top: 1em;
		word-wrap: break-word;
	}
		.form-error {
			color: red;
		}

.files {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-top: 2em;
	margin-bottom: 1em;
}

.file {
	display: flex;
	gap: 0.5em;
	align-items: center;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 8fr 1fr;
}
	.file-preview {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	} 
		.file-preview img {
			max-width: 100%;
			max-height: 2em;
			height: auto;
			border-radius: 2px;
		}
		.file-preview .icon {
			width: 1.2em;
		}
	.file-format {
		text-transform: uppercase;
		font-family: monospace;
		font-weight: 900;
		opacity: 0.75;
		font-size: 95%;
		color: #1c3d68;
		cursor: default;
	}
	.file-name {
		position: relative;
		z-index: 1;
	}
		.file-name input {
			width: 100%;
		}
	.file-remove {
		display: flex;
		align-items: center;
		cursor: pointer;
		color: var(--color-red);
		opacity: 0.1;
		font-size: 1.5em;
		user-select: none;
	}
		.file-remove:hover, .file-remove:focus-visible {
			opacity: 1;
		}
	.file-progress {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 2px;
		z-index: 2;
	}
		.file-progress-value {
			background-color: #0073ee;
			height: 100%;
			transition: width linear 0.06s, background-color linear 0.1s;
		}
	.file-qrcode {
		image-rendering: pixelated;
		transition: 0.08s transform, 0.1s opacity;
		transition-delay: 0.5s;
		z-index: 1;
	}
		.file-qrcode:hover {
			transform: scale(6);
			z-index: 2;
			opacity: 1 !important;
		}
	.files:has(.file-qrcode:hover) .file-qrcode {
		opacity: 0;
	}

input.disabled:not(:hover):not(:focus),
input.disabled:not(:hover):not(:focus)+label {
	opacity: 0.4;
}

input[type="radio"] {
	height: 1.1em;
	aspect-ratio: 1/1;
	margin-right: 0.5em;
	vertical-align: baseline;
	margin-left: calc(-1.1em - 0.5em);
}

.drag-n-drop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.1);
}

.noscript header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(253, 0, 0, 0.15);
	text-align: center;
	padding: 0.1em;
}

@media screen and (max-width: 962px) {
	.file-qrcode:hover {
		transform: none;
	}
	.file-remove {
		opacity: 0.2;
	}
}