/* =============================================================================
 * bigimage.css — styles the full-screen image lightbox (showBigImage in
 * demo-data.js) opened by clicking a preview image. Loads on /map/.
 * ============================================================================= */

.aimodal {
	align-items: center;
	background-color: rgb(0 0 0 / 1); /* Black with opacity */
	display: none; /* Hidden by default */
	flex-direction: column;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 300000;
}

/* demo-data.js showBigImage() adds .is-open to reveal the lightbox (issue #31). */
.aimodal.is-open {
	display: flex;
}

.aimodal img {
	border: 2px solid white;
	border-radius: 5px;
	max-height: 90%;
	max-width: 90%;
}

.aimodal .close {
	color: white;
	cursor: pointer;
	font-size: 50px;
	position: absolute;
	right: 20px;
	top: 20px;
}

.aimodal .label {
	color: white;
	font-size: 20px;
	margin-bottom: 10px;
	padding: 10px 20px;
}