html,
body {
	/* Prevent scrolling while maintaining accessibility */
	overflow: hidden;
	position: fixed;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, sans-serif;
	-webkit-overflow-scrolling: touch;
}



.icon-container {
	display: flex;
	align-items: center;
}

.icon-container > a {
	width: 32px;
	height: 32px;
	background-size: contain; /* Ensures the image fits inside the box */
	background-repeat: no-repeat; /* Prevents the image from repeating */
	background-position: center; /* Centers the image within the div */
	margin-left: 8px; /* Space between the icons */
	display: inline-block;
}


@media (max-width: 600px) {
	.icon-container > a {
		width: 28px;
		height: 28px;
		margin-right: 6px;
	}
	#actBar {
		height: 28px;
	}
}



/* end of status bar */

.mc-ctrl {
	position: absolute;
	background-color: #eef;
	color: white;
	box-sizing: border-box;
	padding: 0.02em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: transform 0.3s ease-in-out;
	transform: scale(1);
	overflow: hidden;
	/* Add gap between elements */
	gap: 0.1em;
	z-index: 2;
}

.mc-ctrl.hidden {
	transform: scale(0);
}
/* button */

.mc-button button,
dialog button {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		to bottom,
		#6db3f2 0%,
		#54a3ee 50%,
		#3690f0 51%,
		#1e69de 100%
	);
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 0.1em;
	line-height: 1;
	font-size: 1em;
	transition:
		filter 0.3s ease,
		transform 0.1s ease,
		background 0.3s ease;
	position: relative;
	/* Remove overflow hidden from button */
	padding: 0;
	margin: 0;
	/* Fix iOS button rendering */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Ensure proper flex behavior */
	display: flex;
	justify-content: center;
	align-items: center;
}

.mc-button button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, #1e69de 0%, #3690f0 50%, #54a3ee 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mc-button button:hover {
	filter: brightness(1.1);
}

.mc-button button:active {
	transform: scale(0.95);
}

.mc-button button:active::before {
	opacity: 1;
}

.mc-button button > .mc-icon {
	width: 90%;
	height: 90%;
	object-fit: contain;
	position: relative;
	z-index: 1;
	/* Prevent image from expanding beyond bounds */
	max-width: 100%;
	max-height: 100%;
}

/* Slider control */
.mc-ctrl.mc-slider {
	padding: 0.1em 2px; /* Reduced padding */
}

.slider-label {
	color: #000;
	width: 100%;
	text-align: center;
	font-size: 0.35em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: -0.4em; /* Negative margin to pull elements closer */
}

input[type='number'] {
	width: auto;
	text-align: left;
	border: 1px solid #ccc;
	font-size: 0.9em;
	height: 90%;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 0.2em;
	box-sizing: border-box;
}

input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 1em;
	background: #ddd;
	border-radius: 0.5em;
	outline: none;
	margin: 0; /* Remove default margins */
	padding: 0;
	font-size: 0.5em;
	position: relative;
}

/* Rest of the styles remain the same */
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	height: 1em;
	width: 1em;
	border-radius: 0.55em;
	box-shadow: inset -0.05em -0.06em 0.3em 0.1em #666;
	border: none;
	cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
	background: #fff;
	border-radius: 0.5em;
	box-shadow: inset 0 0 0.05em rgba(0, 0, 0, 0.5);
	height: 1em;
}

input[type='range']::-moz-range-thumb {
	background-color: #fff;
	height: 1em;
	width: 1em;
	border-radius: 0.5em;
	box-shadow: inset -0.05em -0.06em 0.3em 0.1em #666;
	border: none;
	cursor: pointer;
}

input[type='range']::-moz-range-track {
	background: #ddd;
	border-radius: 0.5em;
	height: 1em;
}

input[type='range']::-ms-thumb {
	background-color: #fff;
	height: 1em;
	width: 1em;
	border-radius: 0.5em;
	box-shadow: inset -0.05em -0.06em 0.3em 0.1em #666;
	border: none;
	cursor: pointer;
}

input[type='range']::-ms-track {
	background: #ddd;
	border-radius: 0.5em;
	border: none;
	height: 1em;
}

/* Select control */

/* Label styling */
/* Parent container for the select and label */
.mc-select {
	display: flex;
	flex-direction: row; /* Align label and select horizontally */
	justify-content: space-between;
	align-items: center; /* Vertically align label and select */
	width: 100%; /* Ensure it takes full width inside the parent */
	height: 100%; /* Ensure it takes full height */
}

/* Label styling */
.mc-select label {
	height: 100%; /* Ensure label takes full available height */
	display: flex;
	align-items: center; /* Vertically center label text */
	padding-right: 0.5rem; /* Space between label and select */
	color: black; /* Ensure label text is visible */
	flex-shrink: 0; /* Prevent label from shrinking */
	font-size: 0.5em;
}

/* Select styling */
.mc-select select {
	flex-grow: 1; /* Allow the select to take up the remaining horizontal space */
	height: 100%; /* Ensure it takes full available height */
	width: 100%;
	background: url('/img/gui/select-arrows.svg') no-repeat center; /* Custom arrow icon */
	background-size: auto 100%; /* Ensure icon uses full height */
	appearance: none; /* Remove browser default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	font-size: 0.5em;
	color: black; /* Ensure text inside select is visible */
}

select > option {
	text-align: center;
}
/* end select */

/* Base styles for the toggle checkbox */

.mc-bool {
	/* probably would be better to make this a child of mc-ctrl for consistency */
	border-radius: 0.125em;
	overflow: hidden;
	background-image:
		url("data:image/svg+xml,%3Csvg version='1.0' viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m38 135 123-92 64 87 112-89 75 98-93 88 93 87-124 95-63-78-94 78-94-95 113-82' fill='%23faa'/%3E%3C/svg%3E"),
		/* Default icon */
			linear-gradient(
				to bottom,
				#6db3f2 0%,
				#54a3ee 50%,
				#3690f0 51%,
				#1e69de 100%
			); /* Gradient */
	background-position: center right;
	background-size: auto 100%; /* Control the size of the icon */
	background-repeat: no-repeat;
	transition:
		filter 0.3s ease,
		transform 0.1s ease; /* Added transform for click effect */
}

.mc-bool:active {
	transform: scale(0.9); /* Add a slight shrinking effect when clicked */
}

.mc-bool:has(input[type='checkbox']:checked) {
	background-image:
		url("data:image/svg+xml,%3Csvg version='1.0' viewBox='0 0 450 450' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m43 226 88-98 28 145L367 47l41 109-268 247' fill='%23f88017'/%3E%3C/svg%3E"),
		linear-gradient(
			to bottom,
			#95c365 0%,
			#95c365 50%,
			#80b646 51%,
			#6fac2e 100%
		);
}

.mc-bool input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.mc-bool > label {
	user-select: none;
	display: block; /* Change inline-block to block to take full width */

	color: #333;
	cursor: pointer;
	height: 100%; /* Ensure the label takes the full height of the parent as clicking on the label doesn't need js to change checkbox */
	width: 100%; /* Ensure the label takes the full width of the parent */
	box-sizing: border-box; /* Ensure padding is included in the width calculation */
	transition:
		filter 0.3s ease,
		transform 0.1s ease;
	font-size: 0.5em;
}

.mc-bool:hover {
	filter: brightness(1.1); /* Lighten the gradient on hover */
}

.mc-bool input[type='checkbox']:checked ~ label {
	color: white;
}

.mc-bool input[type='checkbox']:focus > .mc-bool {
	outline: 2px solid #3498db;
	outline-offset: 2px;
}
/* end of check box */

/* ColorPicker control */
.mc-colorpicker {
	display: flex;
	flex-direction: row; /* Match the select's horizontal layout */
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* Label styling - matches mc-select label */
.mc-colorpicker label {
	height: 100%;
	display: flex;
	align-items: center;
	padding-right: 0.5rem;
	color: black;
	flex-shrink: 0;
	font-size: 0.5em;
}

/* Color input styling */
.mc-colorpicker input[type='color'] {
	flex-grow: 1;
	height: 100%;
	width: 100%;
	padding: 0;
	border: none;
	background: linear-gradient(
		to bottom,
		#6db3f2 0%,
		#54a3ee 50%,
		#3690f0 51%,
		#1e69de 100%
	);
	border-radius: 0.1em;
	cursor: pointer;
	transition:
		filter 0.3s ease,
		transform 0.1s ease;
}

.mc-colorpicker input[type='color']::-webkit-color-swatch-wrapper {
	padding: 1px;
	border-radius: 0.1em;
}

.mc-colorpicker input[type='color']::-webkit-color-swatch {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.1em;
}

.mc-colorpicker input[type='color']::-moz-color-swatch {
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.1em;
}

/* Hover and active states to match other controls */
.mc-colorpicker input[type='color']:hover {
	filter: brightness(1.1);
}

.mc-colorpicker input[type='color']:active {
	transform: scale(0.95);
}

svg {
	background-color: ghostwhite;
}