@charset "UTF-8";

/********** Essential Audio Player CSS – Circle **********/



/****************************************/
/*                                      */
/*         Section 1: The Looks         */
/*                                      */
/****************************************/


/* 1. The Main Container */
div.essential_audio.circle {
	border-radius: 2px;
	overflow: hidden;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}


/* 2. The Player Button */
div.essential_audio.circle > div:nth-child(1) div {
	padding: 9px 0px 0px 0px;
	margin-left: 11px;
	width: 23px;
	height: 23px;
	border-radius: 0px!important;
	/* background-color: transparent!important; */
	background-color: blue;
}
div.essential_audio.circle > div:nth-child(1) div:after {
	top: 16%;
	left: 16%;
	width: 68%;
	height: 68%;

}
/* Set here how much the button exceeds the horizontal track limits. */
/* This must not be deleted! (but can be changed, of course) */
:root {
	--button-protrusion-circle: 0px;
}

/* 2.a) The Player Button – Off */
div.essential_audio.circle > div:nth-child(1) div.off {
	background-color: transparent!important;
}
div.essential_audio.circle > div:nth-child(1) div.off:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M12.6,24.5c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4L20,15l-8.1-7.8c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1-0.4,1.4,0l8.8,8.5c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7l-8.8,8.5C13.1,24.4,12.8,24.5,12.6,24.5z'/></svg>");
}

/* 2.b) The Player Button – Loading */
div.essential_audio.circle > div:nth-child(1) div.load {
	background-color: transparent!important;
}
div.essential_audio.circle > div:nth-child(1) div.load:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><circle fill='%23FFF' opacity='0.64' cx='7.2' cy='18.2' r='1.5'/><circle fill='%23FFF' opacity='0.76' cx='7.2' cy='11.8' r='1.5'/><circle fill='%23FFF' opacity='0.88' cx='11.8' cy='7.2' r='1.5'/><circle fill='%23FFF' cx='18.2' cy='7.2' r='1.5'/><circle fill='%23FFF' opacity='0.16' cx='22.8' cy='11.8' r='1.5'/><circle fill='%23FFF' opacity='0.28' cx='22.8' cy='18.2' r='1.5'/><circle fill='%23FFF' opacity='0.4' cx='18.2' cy='22.8' r='1.5'/><circle fill='%23FFF' opacity='0.52' cx='11.8' cy='22.8' r='1.5'/></svg>");
}

/* 2.c) The Player Button – Playing */
div.essential_audio.circle > div:nth-child(1) div.play {
	background-color: transparent!important;
}
div.essential_audio.circle > div:nth-child(1) div.play:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M11,23c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1s1,0.4,1,1v14C12,22.6,11.6,23,11,23z'/><path fill='%23FFF' d='M19,23c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1s1,0.4,1,1v14C20,22.6,19.6,23,19,23z'/></svg>");
}

/* 2.d) The Player Button – Dragging */
div.essential_audio.circle > div:nth-child(1) div.drag {
	background-color: transparent!important;
	transition: left 0s!important;
	/*
	cursor: grab!important;
	*/
}

/* 2.e) The Player Button – Error */
div.essential_audio.circle > div:nth-child(1) div.error {
	/*
	background-color: transparent!important;
	*/
	background-color: rgba(0,0,0,0.25)!important;
}
div.essential_audio.circle > div:nth-child(1) div.error:after {
	content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path fill='%23FFF' d='M13.9,18.6c0-0.3,0-0.5,0-0.9c0-1.6,0.6-2.9,2.1-3.9l1.1-0.8c0.9-0.6,1.3-1.5,1.3-2.4c0-1.5-1-2.8-3-2.8c-2.2,0-3.1,1.6-3.1,3.2c0,0.2,0,0.4,0,0.5L10,11.9c-0.1-0.3-0.1-0.8-0.1-1.2c0-2.3,1.7-5.1,5.5-5.1c3.5,0,5.5,2.5,5.5,5c0,2-1.1,3.4-2.5,4.3l-1.2,0.8c-0.8,0.5-1.1,1.4-1.1,2.4c0,0.1,0,0.2,0,0.5H13.9z'/><path fill='%23FFF' d='M15,20.8c1,0,1.8,0.8,1.8,1.8S16,24.4,15,24.4c-1,0-1.8-0.8-1.8-1.8S14,20.8,15,20.8z'/></svg>");
}


/* 3. The Track */
div.essential_audio.circle > div:nth-child(2) {
	width: 100%;
	height: 100%;
	left: 0px;
	transform: rotate(-90deg);
}
div.essential_audio.circle > div:nth-child(2):after {
	content: "";
	position: absolute;
	z-index: 0;
	opacity: 1;
	/* background-color: #E5695B; */
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}


/* 4. The Loading Progress Bar */
div.essential_audio.circle > div:nth-child(2) div {
	width: 0%;
	background-color: #000;
	opacity: 0.1;
	mix-blend-mode: multiply;
}


/* 5. The Klick & Drag Sensor */
div.essential_audio.circle > div:nth-child(3) {
	height: 100%;
	margin-top: 0px!important;
}





/****************************************/
/*                                      */
/*        Section 2: Core Values        */
/*                                      */
/****************************************/


/* 2.a) Container for Player Button */
div.essential_audio.circle > div:nth-child(1) {
	left: calc(var(--button-protrusion-circle) * -1);
	width: calc(100% + (2 * var(--button-protrusion-circle)));
}