div.pop-up.overlay {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;

	background: #000000AA;

	display: flex;
	justify-content: center;
	align-items: center;

	opacity: 0;
	pointer-events: none;

	transition: opacity 250ms ease 125ms;
}

div.pop-up.overlay.enabled {
	opacity: 1;
	pointer-events: unset;
	transition: opacity 250ms ease 0s;
}

div.pop-up section.dialog {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: stretch;

	box-shadow: 0 0 var(--spacing) #00000077;

	width: 100%;
	height: 100%;
	max-width: 520px;
	max-height: 600px;
	padding: var(--spacing);

	opacity: 0;
	transform: translate(0, 75vh);
	transition:
		opacity 250ms ease 0ms,
		transform 250ms ease 0ms;
}

div.pop-up.overlay.enabled section.dialog {
	opacity:1;
	transform: translate(0, 0);
	transition:
		opacity 250ms ease 250ms,
		transform 250ms ease 250ms;
}

div.pop-up section.dialog header,
div.pop-up section.dialog footer {
	flex: 0 0 auto;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
}

div.pop-up section.dialog form {
	flex: 3 1 100%;
}

div.pop-up section.dialog header button {
	font-size: 1.25rem !important;
	padding:
		calc(1.5 * var(--spacing-small))
		var(--spacing-small)
		var(--spacing-small)
		!important;
	height: calc(var(--spacing-small) * 4);
}

div.pop-up section.dialog header button.exit:hover {
	background: #efbcbc !important;
}

div.pop-up section.dialog footer {
	gap: var(--spacing);
}

div.pop-up section.dialog footer button {
	font-size: 1.5rem !important;
	transition: opacity 125ms ease 0s;
}

div.pop-up section.dialog footer button.disabled {
	pointer-events: none;
	opacity: 0.25;
}

div.pop-up section.dialog form.wizard {
	--index: 0;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;

	overflow: hidden;
}

div.pop-up section.dialog form.wizard fieldset {
	counter-increment: wizard-view;
	flex: 1 0 100%;

	border: none;
	width: 100%;
	margin: 0 0 var(--spacing);
	padding: 0 var(--spacing-small) 0 0;

	overflow-y: scroll;

	transform: translate(
		calc(-1 * var(--index) * 100% + 1px), /* <-- +1px fixes a weird anomoly. I HATE that this works. */
		0
	);
	transition: transform 375ms ease 0s;
}

div.pop-up section.dialog form.wizard label {
	display: block;
}

div.pop-up section.dialog form.wizard input,
div.pop-up section.dialog form.wizard textarea,
div.pop-up section.dialog form.wizard select {
	margin: var(--spacing-small) 0 var(--spacing);
}

div.pop-up section.dialog form.wizard input[type="checkbox"] {
	margin: var(--spacing-small) auto var(--spacing) var(--spacing-small);
}

div.pop-up section.dialog form.wizard textarea {
	height: 180px;
}

ol.paginator {
	flex:1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;

	gap: var(--spacing-small);

	list-style: none;
	padding: 0;
	margin: 0;
}

ol.paginator li {
	flex: 0 0 10px;
	background: var(--grey-lite);
	border-radius: 50%;
	height: 10px;
	width: 10px;
	aspect-ratio: 1;
}

ol.paginator li.active {
	background: var(--interactive);
}

fieldset.initial > p {
	font-size: 1.25em;
}

fieldset.initial > p > a {
	color: var(--interactive);
	text-decoration: underline;
}

fieldset.submit > div.loader {
	display: flex;
	flex-flow: row nowrap;
	justify-content: stretch;
	align-items: stretch;

	max-width: 320px;
	margin: 0 auto;
	aspect-ratio: 1;
}

fieldset.submit > div.loader > div.spinner {
	border: 5px solid var(--grey-lite);
	border-left: 5px solid;
	border-radius: 50%;
	animation: spin 2s linear infinite;
}

fieldset.submit > div.loader > div.spinner,
fieldset.submit > div.loader > div.loaded {
	position: relative;
	margin: 20%;
	flex-basis: 100%;
}

fieldset.submit > div.loader > div.loaded {
	display:none;
}

fieldset.submit > div.loader > div.loaded::after {
	content: "✓";
	display: block;

	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	color: var(--green-hilite);
	text-align: center;
	font-size: 15vw;
}

fieldset.submit.done > div.loader > div.spinner {
	display: none;
}

fieldset.submit.done > div.loader > div.loaded {
	display: block;
}

@keyframes spin {
from {
	transform: rotate(0deg);
}
to {
	transform: rotate(359deg);
}
}