#codeControlOverlay {
	position: absolute;
	width: calc(100% - 60px);
	left: 30px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 15px;
	user-select: none;
	opacity: 0;
	transform: translateY(5%);
	overflow: hidden;
	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
	color: var(--white);
}


#codeControlOverlay.fadeIn {
	transform: translateY(0);
	opacity: 1;
}

#codeControlOverlay .codeControlContainer {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 30px;
	align-items: stretch;
	height: 280px;
	overflow: auto;
	align-content: flex-start;
	justify-content: flex-start;
	box-shadow: -1px 0px 5px 0px  #333 inset;
}

#codeControlOverlay .codeControlClose {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 1;
	padding: 14px;
	background-color: var(--black);
	background-size: 21px;
	border-radius: 20px;
}

#codeControlOverlay .codeControlIntro {
	background: #262626;
	padding: 30px 30px 15.5px 30px;
	border-radius: 15px 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 100%;
	position: relative;
	flex: 1 0 260px;
	border-radius: 10px;
	scroll-snap-align: start;
	justify-content: space-between;
}

#codeControlOverlay .codeControlTitle {
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 50px;
	font-weight: 700;
	line-height: 1;
	color: #333333;
	margin-bottom: 0;
	letter-spacing: -3px;
	position: relative;
}

#codeControlOverlay .codeControlColumns {
	display: flex;
	flex-direction: row;
	gap: 30px;
	flex: 1;
	padding: 0px 30px 0 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 30px;
}

#codeControlOverlay .codeControlColumn {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 0 330px;
	padding: 30px 0 0 0;
	flex-shrink: 0;
	scroll-snap-align: start;
}

#codeControlOverlay .codeControlShortcut {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#codeControlOverlay .codeControlKey {
	border: 2px solid #666666;
	border-radius: 5px;
	height: 25px;
	width: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7.5px 6px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-top: -2px;
	margin-right: 5px;
}
#codeControlOverlay .codeControlSubDescription {
	font-family: 'Dosis', sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: normal;
	color: white;
	margin: 0;
	width: 209px;
}

#codeControlOverlay .codeControlVideoContainer {
	border-radius: 15px 15px 0 0;
	overflow: hidden;
	position: relative;
}
#codeControlOverlay .codeControlVideoOverlay {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: filter 200ms;
	filter: opacity(0.5);
}
#codeControlOverlay .codeControlVideoContainer:hover .codeControlVideoOverlay {
	filter: opacity(0);
}
#codeControlOverlay .codeControlVideoContainer:hover video {
	padding: 0;
	filter: opacity(1);
}

#codeControlOverlay video {
	width: 100%;
	object-fit: cover;
	cursor: pointer;
	height: auto;
	padding: 15px 15px 0 15px;
	background: linear-gradient(162deg, var(--Accents-Teal, #00C3D0) 0%, #99AA41 50%, var(--Accents-Orange, #FF8D28) 100%);
	transition: padding 200ms, filter 200ms;
	z-index: -1;
	position: relative;
}

.cm-content .highlighted-code,
.cm-highlight {
	background-color: #f9e6004f;
	padding: 0.4em 0px;
}

/* CodeControl color highlight variants (20-40% opacity for visibility) */
.cm-cc-highlight-amber {
	background-color: #ffd54f44 !important;
}

.cm-cc-highlight-green {
	background-color: #81c78444 !important;
}

.cm-cc-highlight-blue {
	background-color: #64b5f644 !important;
}

.cm-cc-highlight-purple {
	background-color: #9575cd44 !important;
}

.cm-cc-highlight-pink {
	background-color: #f0629244 !important;
}

.cm-cc-highlight-orange {
	background-color: #ff8a6544 !important;
}


.cm-emphasizeHighlight {
	background-color: #f8e61ca6;
}


/* Mobile styles */
@media (max-width: 767px) {
	#codeControlOverlay {width: calc(100% - 30px);left: 15px;}
	.codeControlContainer {
		flex-direction: column;
		padding: 0;
		gap: 20px;
		max-width: 100vw;
		max-height: 95vh;
	}

	.codeControlIntro {
		border-radius: 15px 15px 0 0;
		min-width: auto;
		width: 100%;
		padding: 20px;
		font-size: 1.2em;
	}

	.codeControlTitle {
		font-size: 36px;
		height: auto;
		line-height: 1.1;
	}

	.codeControlColumns {
		flex-direction: column;
		padding: 15px;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.codeControlColumn {
		width: 100%;
	}

	.codeControlSubDescription {
		width: 100%;
	}
}

#codePanel {
	position: relative;
}

#codeControlActions {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%) translateY(30%);
	z-index: 5;
	display: flex;
	gap: 6px;
	padding: 10px;
	background: rgba(30,30,30,0.95);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 36px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	opacity: 0;
	transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}

#codeControlActions.fadeIn {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	visibility: visible;
}

#codeControlActions button {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.7);
	padding: 0;
	cursor: pointer;
}