/* @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'); */

@font-face {
	font-family: 'Sono';
	src: url('/files/assets/fonts/sono/Sono-ExtraLight.ttf') format('truetype');
}

@font-face {
	font-family: 'Icons';
	src: url('/files/assets/fonts/font_90_icons/Font_90_Icons.ttf') format('truetype');
}

/* Test database-driven background color */
body {
	/* background-color:  */
	margin: 0;
	padding: 0;
}

/* Centered mixtape page title */
main {
	position: relative;
}
.mixtape-page-title {
	position: absolute;
	top: 40px;
	left: 450px;
	width: 900px;
	text-align: center;
	letter-spacing: 0.05em;
	z-index: 10;
	pointer-events: none;
}
.mixtape-page-title * {
	pointer-events: auto;
}
.mixtape-page-title h3 {
		font-family: 'Aldrich', Arial, sans-serif;
		font-size: 2em;
		font-weight: bold;
		color: #f7f7f7;
		margin: 0 0 0.5em 0;
		letter-spacing: 0.05em;
		text-shadow:
			0 0 8px #00fff7,
			0 0 16px #00fff7,
			0 0 24px #00fff7,
			0 0 32px #ff00de,
			0 0 40px #ff00de,
			0 0 48px #ff00de;
}
.mixtape-page-title h6 {
	font-family: 'Aldrich', Arial, sans-serif;
	font-size: 1em;
	font-weight: normal;
	color: #aba0a0ff;
	margin: 0;
}
.mixtape-page-title p {
	margin: 0.2em 0;
}

/* Main container */
.vc-container {
	text-align: center;
	height: 500px;
	margin-bottom: 0px;
	position: fixed;
	margin-top: 402px;
	text-align: center;
	margin-right: 0px;
    margin-left: 620px;
	margin-left: 620px;
}

/* Tape elements */
.vc-tape-wrapper {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
}

.vc-tape {
	width: 570px;
	height: 379px;
	margin: -86px auto 0;
	position: relative;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.vc-loader {
	position: absolute;
	width: 31px;
	height: 31px;
	bottom: 50px;
	left: 50%;
	margin: -15px 0 0 -15px;
	background: transparent url(/files/assets/mixtapes/common/images/ajax-loader.gif) no-repeat center center;
	display: none;
}

.vc-tape-back {
	width: 100%;
	height: 100%;
	position: relative;
	background: transparent url('/files/assets/mixtapes/common/images/tape-images/back_blank.webp') no-repeat center center;
}

.vc-tape-wheel {
	width: 88px;
	height: 91px;
	position: absolute;
	top: 133px;
	background: transparent;
	border-radius: 50%;
}

.vc-tape-wheel-left {
	left: 156px;
	box-shadow: 0 0 0 60px #000;
}

.vc-tape-wheel-right {
	right: 158px;
}

@-webkit-keyframes rotateLeft {
	0% {
		-webkit-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-webkit-transform: rotate(-360deg) translateZ(-1px);
	}
}

@-webkit-keyframes rotateRight {
	0% {
		-webkit-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-webkit-transform: rotate(360deg) translateZ(-1px);
	}
}

@-moz-keyframes rotateLeft {
	0% {
		-moz-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-moz-transform: rotate(-360deg) translateZ(-1px);
	}
}

@-moz-keyframes rotateRight {
	0% {
		-moz-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-moz-transform: rotate(360deg) translateZ(-1px);
	}
}

@-o-keyframes rotateLeft {
	0% {
		-o-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-o-transform: rotate(-360deg) translateZ(-1px);
	}
}

@-o-keyframes rotateRight {
	0% {
		-o-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-o-transform: rotate(360deg) translateZ(-1px);
	}
}

@-ms-keyframes rotateLeft {
	0% {
		-ms-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-ms-transform: rotate(-360deg) translateZ(-1px);
	}
}

@-ms-keyframes rotateRight {
	0% {
		-ms-transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		-ms-transform: rotate(360deg) translateZ(-1px);
	}
}

@keyframes rotateLeft {
	0% {
		transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		transform: rotate(-360deg) translateZ(-1px);
	}
}

@keyframes rotateRight {
	0% {
		transform: rotate(0deg) translateZ(-1px);
	}

	100% {
		transform: rotate(360deg) translateZ(-1px);
	}
}

.vc-tape-wheel div {
	width: 100%;
	height: 100%;
	background: transparent url('/files/assets/mixtapes/common/images/tape-images/wheel_3dots-gold.webp') no-repeat center center;
}

.vc-tape-front {
	width: 100%;
	height: 100%;
	position: absolute;
	background: transparent url('/files/assets/mixtapes/common/images/tape-images/front_sonyOG-orange.webp') no-repeat center center;
	top: 2px;
	left: 0px;
}

/* Side A/B Label controls*/
.vc-tape-front span {
	/* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
	font-family: 'Sono', sans-serif;
	font-size: ;
	font-weight: ;
	color: ;
	top: 94px;
	left: 130px;
	position: absolute;
}

.vc-tape-side-b {
	display: none;
	-webkit-transform: rotate3d(0, 1, 0, 180deg);
	-moz-transform: rotate3d(0, 1, 0, 180deg);
	-o-transform: rotate3d(0, 1, 0, 180deg);
	-ms-transform: rotate3d(0, 1, 0, 180deg);
	transform: rotate3d(0, 1, 0, 180deg);
}

/* Controls list */
ul.vc-controls {
	list-style: none;
	padding: 0;
	width: 520px;
	position: absolute;
	bottom: 360px;
	left: -87%;
	/* margin: top right bottom left in px;  Play Bar Position */
	margin: 0 0 0 0;
	background: -moz-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(170, 170, 170, 0.35)), color-stop(50%, rgba(255, 255, 255, 0.44)), color-stop(100%, rgba(255, 255, 255, 0.53)));
	background: -webkit-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: -o-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: -ms-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: linear-gradient(to bottom, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59aaaaaa', endColorstr='#87ffffff', GradientType=0);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom-color: rgba(255, 255, 255, 0.6);
	padding: 8px;
	height: 54px;
	box-shadow:
		inset 0 1px 0px rgba(0, 0, 0, 0.05),
		0 1px 0 rgba(255, 255, 255, 0.8),
		0 -1px 0 rgba(255, 255, 255, 0.4),
		inset 0 2px 19px rgba(0, 0, 0, 0.05),
		0 2px 1px rgba(0, 0, 0, 0.06);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	border-radius: 12px;
}

/* Controls list items */
ul.vc-controls li {
	display: block;
	float: left;
	width: 80px;
	height: 50px;
	line-height: 55px;
	text-align: center;
	padding: 1px;
	margin: 0;
	cursor: pointer;
	background: #ddd url(/files/assets/mixtapes/common/images/metal.webp) no-repeat center top;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.2),
		inset 0 0 1px 2px rgba(255, 255, 255, 0.9),
		inset 0 -6px 5px rgba(0, 0, 0, 0.1),
		0 6px 7px rgba(0, 0, 0, 0.3),
		0 4px 1px rgba(0, 0, 0, 0.5);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

ul.vc-controls li:first-child {
	border-radius: 8px 0 0 8px;
}

ul.vc-controls li:last-child {
	border-radius: 0px 8px 8px 0px;
}

ul.vc-controls li.vc-control-play {
	width: 120px;
}

/* Control icons */
ul.vc-controls li span:before {
	/* font-size: 18px; */
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	color: #2c0636;
	/* font-family: 'Material Symbols Outlined'; */
	font-family: 'Icons';
	/* Font 90 Icons */
	text-shadow: 0 0 0 0 rgba(0, 0, 0, 2);
	font-style: normal;
	font-weight: normal;
	text-transform: none;
	display: inline-block;
	text-decoration: inherit;
	width: .8em;
	margin-left: 2;
}

li.vc-control-play span:before {
	/* content: '\e037'; */
	content: 'D'; /* Play */
}

li.vc-control-fforward span:before {
	/* content: '\e01f'; */
	content: 'A'; /* Fast Forward */
}

li.vc-control-rewind span:before {
	/* content: '\e020'; */
	content: 'H'; /* Rewind */
}

li.vc-control-stop span:before {
	/* content: '\e047'; */
	content: 'F'; /* Stop */
}

li.vc-control-switch span:before {
	/* content: '\e042'; */
	content: 'M'; /* Switch */
}

li.vc-control-reset span:before {
	/* content: '\e045'; */
	content: 'G'; /* Reset */
}

li.vc-control-volume-off span:before {
	content: '🔇';
}

li.vc-control-volume-down span:before {
	content: '🔉';
}

li.vc-control-volume-up span:before {
	content: '🔊';
}

ul.vc-controls li:hover {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.2),
		inset 0 0 1px 2px rgba(255, 255, 255, 0.9),
		inset 0 -10px 15px rgba(0, 0, 0, 0.1),
		0 6px 7px rgba(0, 0, 0, 0.3),
		0 4px 1px rgba(0, 0, 0, 0.5);
}

/* Pressed (active) */
ul.vc-controls li.vc-control-active {
	height: 50px;
	margin-top: 2px;
	background-image: url(/files/assets/mixtapes/common/images/metal_dark.webp);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		inset 0 0 1px 2px rgba(255, 255, 255, 0.5),
		inset 0 -6px 5px rgba(0, 0, 0, 0.1),
		0 6px 7px rgba(0, 0, 0, 0.3),
		0 2px 1px rgba(0, 0, 0, 0.5);

}

/* Activated */
ul.vc-controls li.vc-control-pressed,
ul.vc-controls li.vc-control-active.vc-control-pressed {
	height: 50px;
	background-image: url(/files/assets/mixtapes/common/images/metal_dark.webp);
	margin-top: 4px;
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.2),
		inset 0 0 5px 1px rgba(103, 101, 101, 0.5),
		inset 0 -10px 15px rgba(0, 0, 0, 0.2),
		0 7px 5px rgba(255, 255, 255, 0.5);
}

/* 	
Background for the volume knob 
See knobKnob.css for the knob style
*/
.vc-volume-wrap {
	/* Volume Knob Position */
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 298px;
	left: 209%;
	margin-left: -315px;
	background: -moz-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(170, 170, 170, 0.35)), color-stop(50%, rgba(255, 255, 255, 0.44)), color-stop(100%, rgba(255, 255, 255, 0.53)));
	background: -webkit-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: -o-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: -ms-linear-gradient(top, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	background: linear-gradient(to bottom, rgba(170, 170, 170, 0.35) 0%, rgba(255, 255, 255, 0.44) 50%, rgba(255, 255, 255, 0.53) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#59aaaaaa', endColorstr='#87ffffff', GradientType=0);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	padding: 8px;
	box-shadow:
		inset 0 1px 0px rgba(0, 0, 0, 0.05),
		0 1px 0 rgba(255, 255, 255, 0.6),
		0 -1px 0 rgba(255, 255, 255, 0.4),
		inset 0 2px 19px rgba(0, 0, 0, 0.05),
		0 2px 1px rgba(0, 0, 0, 0.06);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.vc-volume-wrap:after {
	content: 'Volume';
	margin-top: 15px;
	display: block;
}

/* Text style for controls */
ul.vc-controls li,
.vc-volume-wrap:after {
	font-family: 'Sono', sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.2;
	color: #787a24;
}



#fullscreenMenu {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1000;
	align-items: flex-start;
	padding-top: 0px;
	/* Add padding to move content down */
}

.closeBtn {
	position: static;
	top: 30px;
	right: 30px;
	font-size: 60px;
	color: white;
	cursor: pointer;
	align-items: left;
}

.menu-content {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
}

.openMenuBtn {
	position: fixed;
	top: 10px;
	left: 20px;
	font-size: 20px;
	cursor: pointer;
}

.link-with-thumbnail {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #f7f7f7;
	font-size: 24px;
}

.link-with-thumbnail:hover {
	text-decoration: underline;
}

.thumbnail {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 5px;
	margin-right: 10px;
}

#gif-container-meter {
	position: relative;
}

#animated-gif-meter {
	position: fixed;
	top: 394px;
	left: 1219px;
	width: 412px;
	height: 52px;
}

#gif-container-left {
	position: relative;
}

#animated-gif-left {
	position: fixed;
	top: 394px;
	left: 384px;
	width: 198px;
	height: 52px;
}