/*
 * Style dialogs.
 */

#dialog_wrapper {
	position: fixed;
	z-index: 100;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: var(--main-wrapper-haze);
	display:flex; justify-content: center; align-items: center;
}

#dialog_box {
	color: var(--main-text-color);
	background-color: var(--main-text-bg-color);
	border-radius: 8px;
	border: 4px solid var(--main-dialog-border-color);
	max-height: 100%;
	min-width: 320px;
}

#dialog_text {
	overflow: auto;
	max-width: 600px;
	min-width: 200px;
	max-height: 600px;
	font-weight: normal;
	padding: 6px;
	text-align: left;
}

@media screen and (max-height: 680px) {
	#dialog_text {
		max-height: 480px;
	}
}
@media screen and (max-height: 580px) {
	#dialog_text {
		max-height: 380px;
	}
}
@media screen and (max-height: 480px) {
	#dialog_text {
		max-height: 280px;
	}
}
@media screen and (max-height: 380px) {
	#dialog_text {
		max-height: 200px;
	}
}

#dialog_text h2 {
	font-size: 110%;
	font-weight: bold;
}

#dialog_text p {
	margin-bottom: .5em;
}

#dialog_text ul {
	margin-top: .5em;
}

#dialog_buttons {
	display:flex;
	justify-content: space-around;
	padding: 4px;
}

.dialog_button {
	font-size: 100%;
	font-weight: bold;
	min-width: 65px;
	min-height: 44px;
	margin: 15px 6px 6px 6px;
	text-align: center;
	display: block;
}

.dialog_box-small {
	transform: scale(.3, .3);
}

.dialog_box-large {
	transform: scale(1, 1);
	transition: transform 150ms linear;
}