/* modal_styles.css */
.btn-close-custom {
	background-color: red;
	border: 2px solid white; /* White frame around the button */
	border-radius: 50%; /* Rounded frame for aesthetic */
	color: white; /* Color of the 'X' */
	width: 32px; /* Size of the button */
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.btn-close-custom:hover {
	background-color: rgba(
		255,
		255,
		255,
		0.2
	); /* Optional: Slight hover effect */
	color: white; /* Keep the 'X' white on hover */
}

#modalDialog {
	max-width: none; /* Allow dialog to expand based on image size */
}

#modalImage {
	max-width: 100%; /* Ensure the image fits within the screen */
	height: auto; /* Maintain aspect ratio */
	display: block;
	margin: 0 auto;
}

.modal-content {
	border: 10px solid white; /* White frame around the image */
	border-radius: 8px; /* Optional: Adds rounded corners to the frame */
}