.dialog-container {
	transform-style: preserve-3d;
	perspective: 60rem;
}
.dialog-container.fixed {
	position: fixed;
	bottom: 50%;
	box-sizing: border-box;
	padding: 1rem 1rem;
	z-index: 2;
	max-width: 30rem;
}

.dialog-container.bottom {
	bottom: 0;
}

.dialog-container.fixed.capped-height,
.dialog-container.fixed.full-height {
	height: 100%;
}
.dialog-container.fixed.full-height {
	max-height: 36rem;
}

.dialog-container.fixed.full-width {
	width: 100%;
}
.dialog-container.fixed.limited-width {
	max-width: 28rem;
}

.dialog-container.hidden {
	display: none;
}
.dialog-container.fixed + .dialog-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.3);
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 1;
}
.dialog-container.shown + .dialog-overlay {
	opacity: 1;
}
	
.dialog {
	background: #ffe;
	border: 1px solid #369;
	box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.25), 0 0 3rem rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	transition: top 0.5s, box-shadow 0.5s;
	top: 0;
}
.dialog.flipping {
	box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.125), 0 0 3rem rgba(0, 0, 0, 0.15);
}
.dialog-container:not(.minimized) .dialog, .dialog-container:not(.minimized) .dialog[style] {
	top: 0 !important;
}
.dialog.correct {
	background-color: #efe;
}
.dialog.incorrect {
	background-color: #fee;
}
.dialog.hidden {
	display: none;
}
.dialog-content {
	padding: 1rem;
	box-sizing: border-box;
}
.dialog-instructions {
	font-style: italic;
	padding-bottom: 0.5rem;
}
.dialog-content {
	overflow-y: auto;
}
.dialog-content audio {
	width: 100%;
}
.dialog-instructions:empty {
	display: none;
}
.dialog-instructions.content-text,
.dialog-body.content-text {
	white-space: pre-line;
}

.dialog-caption {
	font-size: 1.25rem;
	font-weight: bold;
	background: #369;
	padding: 0.25em 1rem;
	color: white;
	position: relative;
	z-index: 1;
	-webkit-user-select: none;
	user-select: none;
}
.dialog-caption span {
	display: inline-block;
}
.dialog-caption span.title {
	margin-right: 1em;
}
.dialog-caption-button {
	float: right;
	cursor: pointer;
	font-variant-emoji: text;
	color: transparent;
	text-shadow: 0 0 0 white;
}
.dialog-caption-button + .dialog-caption-button {
	margin-right: 0.75em;
}


.dialog-container.minimized {
	z-index: 4;
	pointer-events: none;
}
.dialog-container.minimized + .dialog-overlay {
	display: none;
}
@supports (pointer-events: none) {
	.dialog-container.minimized + .dialog-overlay {
		display: block;
		opacity: 0;
		pointer-events: none;
	}
}
.dialog-container.minimized .dialog {
	top: 10rem;
	pointer-events: all;
}
.dialog-container.minimized .dialog-caption {
	cursor: pointer;
}
.dialog-form-container {
	padding: 1rem;
	background: white;
	border-top: 1px solid #cc9;
}
.dialog.correct .dialog-form-container {
	border-top-color: #9c9;
}
.dialog.incorrect .dialog-form-container {
	border-top-color: #c99;
}
.dialog-container.fixed.full-height .dialog-form-container,
.dialog-container.fixed.capped-height .dialog-form-container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.dialog-form {
	margin-top: 0;
}

.dialog-form-container.hidden,
.dialog-form.hidden {
	display: none;
}
.dialog-form label {
	display: block;
	margin-bottom: 1em;
}
.dialog-form label:last-child {
	margin-bottom: 0;
}
.dialog-form input[type="text"],
.dialog-form textarea {
	width: 100%;
	outline: none;
	border: none;
	border-bottom: 1px dotted black;
	padding: 0 0 0.5em 0;
}
.dialog-form textarea {
	resize: none;
}
.dialog-body .dialog-form input[type="text"],
.dialog-body .dialog-form textarea {
	border: 2px solid #369;
	padding: 0.25em 0.5em;
}
.dialog-form input[type="button"].hidden {
	display: none;
}
.dialog-form input[type="button"]:not(.hidden) {
	margin-right: 0.5em;
}
.dialog-form input[type="button"]:last-child {
	margin-right: 0;
}
.dialog-form label.checkbox {
	
}
.dialog-form label span.checkbox {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 1em;
}
.dialog-form span.checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: white;
	margin: 0;
	outline: none;;
}
.dialog-form span.checkbox input[type="checkbox"]::before {
	cursor: pointer;
	content: '_';
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	background: white;
	border: 2px solid #369;
	text-align: center;
	font-weight: bold;
	color: transparent;
}
.dialog-form span.checkbox input[type="checkbox"]:checked::before {
	content: '\2713';
	color: #369;
}

.dialog-buttons {
	display: flex;
	width: 100%;
}
.dialog-buttons input[type="button"] {
	width: 100%;
	margin-bottom: 0;
	padding-left: 0.5em;
	padding-right: 0.5em;
}
.dialog-buttons input[type="button"].outline {
	width: 40%;
}

.dialog-buttons.button-list {
	display: block;
}
.dialog-buttons.button-list input[type="button"] {
	width: 100%;
}
.dialog-body.content-audio .audio-player {
	float: left;
	margin: 0.3rem 0.5rem 0.5rem -3.5rem;
}
.dialog-body.content-audio {
	padding-left: 3.5rem;
}
.dialog-body.content-audio .audio-player + * {
	margin-top: 0;
}