* { 
	box-sizing: border-box; 
}

html, body { 
	height: 100%; 
	overflow: hidden; 
	margin: 0; 
}

.main-canvas { 
	height: 100%; 
	width: 100%; 
}

.auto-hide-menu {
	display: flex; 
	align-items: center; 
	background: #222; 
	color: #fff;
	width: 100%; 
	height: 50px; 
	position: fixed; 
	padding: 10px; 
	z-index: 1000;
}

.auto-hide-menu input, .auto-hide-menu button { 
	margin-left: 20px; 
}

.button {
	font-weight: 900; 
	background: transparent; 
	border: 1px solid transparent; 
	padding: 4px 6px;
	cursor: pointer;
}

.button:hover { 
	border-color: #555 black black #555; 
}

.icon {
	height: 16px; 
	border-color: transparent transparent transparent white;
	transition: 100ms all ease; 
	cursor: pointer;
}

.icon.play { 
	border-style: solid; 
	border-width: 8px 0px 8px 16px; 
}

.icon.pause { 
	border-style: double; 
	border-width: 0px 0 0px 16px; 
}

.icon.frequency {
	overflow: hidden; 
	margin: 5px 0 0 1px; 
	width: 28px; 
	height: 20px;
}

.icon.frequency::before {
	display: block; 
	width: 0; 
	height: 20px; 
	content: '';
	box-shadow: 2px 17px 0 2px #eee, 8px 13px 0 2px #eee, 14px 9px 0 2px #eee, 20px 5px 0 2px #eee, 26px 1px 0 2px #eee;
}

.icon.frequency:hover::before {
	box-shadow: 2px 17px 0 2px #4183c4, 8px 13px 0 2px #4183c4, 14px 9px 0 2px #4183c4, 20px 5px 0 2px #4183c4, 26px 1px 0 2px #4183c4;
}

/* Custom File Input Styling */
.file-input-wrapper {
	position: relative;
	display: inline-block;
	margin-left: 20px;
}

.file-input-wrapper input[type="file"] {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	z-index: 2;
}

.file-input-display {
	display: inline-flex;
	align-items: center;
	background: #333;
	border: 1px solid #555;
	padding: 6px 12px;
	border-radius: 4px;
	color: #fff;
	font-size: 12px;
	min-width: 120px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.file-input-display:hover {
	background: #444;
	border-color: #666;
}

.file-input-display.has-file {
	background: #1a4a1a;
	border-color: #4CAF50;
	color: #4CAF50;
}

.file-input-display.auto-loaded {
	background: #2a3a4a;
	border-color: #4183c4;
	color: #4183c4;
}

.file-status-icon {
	margin-right: 6px;
	font-size: 10px;
}

.file-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 150px;
}

.audio-status {
	margin-left: 10px;
	padding: 2px 6px;
	font-size: 10px;
	border-radius: 2px;
	background: #444;
	color: #ccc;
}

.audio-status.ready { 
	background: #1a4a1a; 
	color: #4CAF50; 
}

.audio-status.suspended { 
	background: #4a3a1a; 
	color: #FFA500; 
}

.audio-status.error { 
	background: #4a1a1a; 
	color: #FF4444; 
}

/* Responsive Design */
@media (max-width: 1000px) { 
	.auto-hide-menu { 
		display: block; 
		height: auto; 
	}
	.auto-hide-menu input, .auto-hide-menu button, .file-input-wrapper { 
		float: left; 
		padding: 10px; 
	}
}

@media (max-width: 700px) { 
	.auto-hide-menu input, .auto-hide-menu button { 
		zoom: 1.4; 
	}
	.auto-hide-menu input { 
		width: calc(100% - 20px); 
		margin: 0 10px; 
	}
	.file-input-wrapper { 
		zoom: 1.4; 
	}
}

/* Utility Classes */
.hidden { 
	display: none; 
}

.invisible { 
	visibility: hidden; 
}

.black-bg { 
	background: black; 
}

.white-bg { 
	background: white; 
}

.black-btn { 
	background: transparent; 
	color: white; 
}

.white-btn { 
	background: white; 
	color: black; 
}

/* Color Classes */
.red { 
	color: red; 
}

.green { 
	color: lime; 
}

.blue { 
	color: dodgerblue; 
}

.cyan { 
	color: cyan; 
}

.yellow { 
	color: goldenrod; 
}

.magenta { 
	color: magenta; 
}

/* Invert Button Icon */
.invert-icon {
	width: 24px;
	height: 24px;
	background: linear-gradient(to right, black 50%, white 50%);
	border-radius: 4px;
	border: 1px solid #888;
	display: flex;
	align-items: center;
	justify-content: center;
}

.invert-icon::before {
	content: '';
	width: 12px;
	height: 12px;
	background: linear-gradient(to right, white 50%, black 50%);
	border-radius: 50%;
	border: 1px solid #888;
}

.invert-active .invert-icon {
	background: linear-gradient(to right, white 50%, black 50%);
}

.invert-active .invert-icon::before {
	background: linear-gradient(to right, black 50%, white 50%);
}