@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ouw50eeq2n.bundle.scp.css';

/* /Shared/ImageSlideShow.razor.rz.scp.css */
.slideshow-container[b-1spnzs3vde] {
	max-width: 900px; /* Adjust max width as needed */
	margin: 2rem auto; /* Center the slideshow */
	padding: 15px;
	border: 1px solid #dee2e6; /* Light border */
	border-radius: 5px;
	background-color: #f8f9fa; /* Light background */
	box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.slideshow-image-wrapper[b-1spnzs3vde] {
	text-align: center; /* Center the image block */
	margin-bottom: 1rem;
	min-height: 300px; /* Ensure wrapper has height even if image loading is slow */
	display: flex;
	justify-content: center;
	align-items: center;
}

.slideshow-container img[b-1spnzs3vde] {
	max-width: 100%; /* Make image responsive */
	max-height: 70vh; /* Prevent image from getting too tall */
	height: auto; /* Maintain aspect ratio */
	display: block; /* Remove extra space below image */
	border-radius: 4px;
}

.slideshow-controls[b-1spnzs3vde] {
	display: flex;
	justify-content: space-between; /* Space out Prev button, counter, Next button */
	align-items: center; /* Vertically align */
	padding: 0 10px; /* Add some horizontal padding */
}

	.slideshow-controls span[b-1spnzs3vde] {
		font-size: 0.9rem;
		color: #6c757d; /* Secondary text color */
	}

	.slideshow-controls button[b-1spnzs3vde] {
		/* Using Bootstrap btn classes already, but can add specific overrides */
		min-width: 90px; /* Give buttons a minimum width */
	}

		.slideshow-controls button:disabled[b-1spnzs3vde] {
			cursor: not-allowed;
			opacity: 0.65;
		}