#imagePreviewDialog {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; 
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.dialog-content {
	position: relative;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: auto; /* Could be auto, if you want it to be the size of the image */
	max-width: 993px; /* Maximum width */
	overflow: visible; 
	animation-name: animatetop;
	animation-duration: 0.8s
}

.dialog-content-zoomed {
	max-width: none !important;
}

.zoomed {
	transform: scale(2); /* Adjust scale as needed for zoom level */
	transform-origin: top left; /* Adjust as needed to prevent clipping */
	transition: transform 0.2s ease-in-out; /* Smooth transition for zoom */
}

/* Add Animation */
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
}

.close-button {
	color: #aaa;
	position: absolute;
	top: 25px;
	right: 45px;
	font-size: 35px;
	font-weight: bold;
}

.close-button:hover,
.close-button:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.dialog-content img:hover {
	cursor: zoom-in; /* Changes the cursor to a zoom-in icon on hover */
}

.dialog-content-zoomed img.zoomed {
	cursor: zoom-out; /* Changes the cursor to a zoom-out icon when the image is zoomed */
}

img {
	display: block; /* Remove inline-block spaces */
	margin-left: auto;
	margin-right: auto;
	width: 100%; /* Responsive image */
}