@charset "UTF-8";

/********** Essential Audio Player — White Equalizer Icon **********/


/* ========================================
   MAIN CONTAINER
   ======================================== */

div.essential_audio {
	position: relative;
	z-index: 0;
	width: 32px;
	height: 32px;
}


/* ========================================
   PLAYER BUTTON
   ======================================== */

div.essential_audio>div:nth-child(1) div {
	width: 32px;
	height: 32px;
	margin-top: 0;
	border-radius: 0;
	background-color: transparent !important;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}

div.essential_audio>div:nth-child(1) div:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Button Container */

div.essential_audio>div:nth-child(1) {
	position: absolute;
	z-index: 3;
	height: 32px;
	width: 32px;
	top: 0;
	left: 0;
}


/* ========================================
   OFF — WHITE EQUALIZER ICON
   ======================================== */

div.essential_audio>div:nth-child(1) div.off:after {
	content: "";
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect fill='%23FFFFFF' x='6' y='14' width='3' height='7' rx='1.5'/><rect fill='%23FFFFFF' x='11' y='9' width='3' height='12' rx='1.5'/><rect fill='%23FFFFFF' x='16' y='5' width='3' height='20' rx='1.5'/><rect fill='%23FFFFFF' x='21' y='11' width='3' height='10' rx='1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* ========================================
   LOADING
   ======================================== */

div.essential_audio>div:nth-child(1) div.load:after {
	content: "";
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle opacity='.64' fill='%23FFFFFF' cx='6.5' cy='18.5' r='2'/><circle opacity='.76' fill='%23FFFFFF' cx='6.5' cy='11.5' r='2'/><circle opacity='.88' fill='%23FFFFFF' cx='11.5' cy='6.5' r='2'/><circle fill='%23FFFFFF' cx='18.5' cy='6.5' r='2'/><circle opacity='.16' fill='%23FFFFFF' cx='23.5' cy='11.5' r='2'/><circle opacity='.28' fill='%23FFFFFF' cx='23.5' cy='18.5' r='2'/><circle opacity='.4' fill='%23FFFFFF' cx='18.5' cy='23.4' r='2'/><circle opacity='.52' fill='%23FFFFFF' cx='11.5' cy='23.4' r='2'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	animation: audio_load_rotate 1s infinite linear;
}

@keyframes audio_load_rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


/* ========================================
   PLAYING — ANIMATED WHITE EQUALIZER
   ======================================== */

div.essential_audio>div:nth-child(1) div.play {
	background-color: transparent !important;
}

div.essential_audio>div:nth-child(1) div.play:after {
	content: "";
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><rect fill='%23FFFFFF' x='6' y='14' width='3' height='5' rx='1.5'><animate attributeName='height' values='5;13;5' dur='.7s' repeatCount='indefinite'/><animate attributeName='y' values='14;10;14' dur='.7s' repeatCount='indefinite'/></rect><rect fill='%23FFFFFF' x='11' y='9' width='3' height='12' rx='1.5'><animate attributeName='height' values='12;18;12' dur='.6s' repeatCount='indefinite'/><animate attributeName='y' values='9;6;9' dur='.6s' repeatCount='indefinite'/></rect><rect fill='%23FFFFFF' x='16' y='5' width='3' height='20' rx='1.5'><animate attributeName='height' values='20;10;20' dur='.8s' repeatCount='indefinite'/><animate attributeName='y' values='5;10;5' dur='.8s' repeatCount='indefinite'/></rect><rect fill='%23FFFFFF' x='21' y='11' width='3' height='10' rx='1.5'><animate attributeName='height' values='10;16;10' dur='.65s' repeatCount='indefinite'/><animate attributeName='y' values='11;8;11' dur='.65s' repeatCount='indefinite'/></rect></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* ========================================
   DRAGGING
   ======================================== */

div.essential_audio>div:nth-child(1) div.drag {
	transition: left 0s !important;
}


/* ========================================
   ERROR
   ======================================== */

div.essential_audio>div:nth-child(1) div.error {
	background-color: transparent !important;
}

div.essential_audio>div:nth-child(1) div.error:after {
	content: "";
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFFFFF' d='M13.9 18.6c0-.3 0-.5 0-.9 0-1.6.6-2.9 2.1-3.9l1.1-.8c.9-.6 1.3-1.5 1.3-2.4 0-1.5-1-2.8-3-2.8-2.2 0-3.1 1.6-3.1 3.2 0 .2 0 .4 0 .5L10 11.9c-.1-.3-.1-.8-.1-1.2 0-2.3 1.7-5.1 5.5-5.1 3.5 0 5.5 2.5 5.5 5 0 2-1.1 3.4-2.5 4.3l-1.2.8c-.8.5-1.1 1.4-1.1 2.4 0 .1 0 .2 0 .5H13.9z'/><path fill='%23FFFFFF' d='M15 20.8c1 0 1.8.8 1.8 1.8S16 24.4 15 24.4c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8z'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* ========================================
   HIDE TRACK COMPLETELY
   ======================================== */

div.essential_audio>div:nth-child(2) {
	display: none !important;
}

div.essential_audio>div:nth-child(2) div {
	display: none !important;
}


/* ========================================
   HIDE CLICK / DRAG SENSOR
   ======================================== */

div.essential_audio>div:nth-child(3) {
	display: none !important;
}


/* ========================================
   CORE SETTINGS
   ======================================== */

div.essential_audio,
div.essential_audio * {
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-overflow-scrolling: auto;
}

div.essential_audio *:focus {
	outline: none;
}




/* ========================================
   ELYSIAN AUDIO BUTTON
   ======================================== */

#player_box {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-left: 12px;
	vertical-align: middle;
}


/* Hide Essential Audio track */
#player_box .essential_audio>div:nth-child(2),
#player_box .essential_audio>div:nth-child(3) {
	display: none !important;
}


/* Audio player */
#player_box .essential_audio {
	position: relative;
	width: 32px;
	height: 32px;
}


/* Button container */
#player_box .essential_audio>div:nth-child(1) {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 0;
	left: 0;
}


/* Button */
#player_box .essential_audio>div:nth-child(1) div {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 0;
	left: 0;
	margin: 0;
	background: transparent !important;
	cursor: pointer;
}


/* Speaker icon */
#player_box .essential_audio>div:nth-child(1) div:after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* OFF */
#player_box .essential_audio>div:nth-child(1) div.off:after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' d='M4 12v8h5l7 6V6l-7 6H4z'/><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M21 11c2 2.7 2 7.3 0 10M25 7c4.5 4.5 4.5 13.5 0 18'/></svg>");
}


/* PLAYING */
#player_box .essential_audio>div:nth-child(1) div.play:after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='white' d='M4 12v8h5l7 6V6l-7 6H4z'/><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M21 10c3 3.5 3 8.5 0 12M25 6c5 5.5 5 14.5 0 20'/></svg>");
}


/* Hover */
#player_box .essential_audio>div:nth-child(1) div:hover {
	opacity: 0.65;
}