:root {
	/* Default values */
	--dlg-width: auto;
	--dlg-height: auto;
	--dlg-top: auto;
	--dlg-left: auto;
	--dlg-right: auto;
	--dlg-bottom: auto;
	--dlg-opacity: 1;
}

.maxBodyWidth {
	max-width: 430px;
}

.page {
	margin-top: 20vh;
	margin-bottom: 20vh;
}

.title {
	margin-top: 10vh;
	color: darkgray;
}

.episode {
	color: darkgray;
}

/* .panel10zoom:hover {
	transition: transform 0.5s ease-in-out;
	transform: scale(2.5);
} */

.mask {
	overflow: hidden;
}

.dialogue {
	position: absolute;
	/* width: var(--dlg-width);
	height: var(--dlg-height);
	top: var(--dlg-top);
	left: var(--dlg-left);
	right: var(--dlg-right);
	bottom: var(--dlg-bottom);
	opacity: var(--dlg-opacity);
	border: 2px solid black;
	text-wrap-mode: wrap;
	font-size: x-small;
	border-radius: 20px;
	background-color: white; */
}

.hasDialogue {
	position: relative;
}

.scene {
	position: absolute;
	top: var(--dlg-top);
	left: var(--dlg-left);
	right: var(--dlg-right);
	bottom: var(--dlg-bottom);
}

.row {
	margin-bottom: 0px;
}

#panel1Pano {
	height: 30vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.pagination {
	--bs-pagination-color: #fff;
	--bs-pagination-bg: #999;
	--bs-pagination-border-color: #666;
	--bs-pagination-hover-color: #666;
	--bs-pagination-hover-border-color: #666;
	--bs-pagination-active-bg: #444;
	--bs-pagination-active-border-color: #333;
	--bs-pagination-disabled-color: #ccc;
	--bs-pagination-disabled-bg: darkgray;
	--bs-pagination-disabled-border-color: #999;
}

.pause {
	margin-top: 20vh;
	margin-bottom: 20vh;
}

.smallPause {
	margin-top: 10vh;
	margin-bottom: 10vh;
}

.mediumPause {
	margin-top: 30vh;
	margin-bottom: 30vh;
}

.largePause {
	margin-top: 50vh;
	margin-bottom: 50vh;
}

.image180 {
	align-self: anchor-center;
	width: 100px;
}