/* @override 
	http://beocreate-core.local/extensions/equaliser/equaliser.css */
	
	/* @group Preview Graph */
	
	.equaliser-graph-preview {
		position: relative;
		height: 120px;
		/*-webkit-mask-image: -webkit-linear-gradient(top, white 0%, white 90%, rgba(0, 0, 0, 0) 100%);*/
		pointer-events: none;
		/*background-color: var(--ultra-light-grey);*/
		border: 1px solid var(--menu-line);
		margin-bottom: 5px;
		margin-top: 10px;
	}
	
	/* @end */
	
	/* @group Graph */
	
	#equaliser-graph-container {
		height: 40%;
		flex-shrink: 0;
		border-bottom: 1px solid var(--menu-line);
		position: relative;
		overflow: hidden;
		/*background-color: #173e4b;
		background-image: url(/extensions/equaliser/graph-bg.svg);
		background-size: 100% 100%;*/
	}
	
	#equaliser-graph-divider {
		height: 5px;
		margin-bottom: -3px;
		position: relative;
		transition: box-shadow 0.3s ease;
		box-shadow: 0px -1px 0px var(--menu-line);
		cursor: row-resize;
		z-index: 3;
	}
	
	#equaliser-graph-divider:hover {
		box-shadow: 0px -1px 0px currentColor;
	}
	
	#equaliser-graph-divider:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 5px;
		display: block;
		top: -5px;
	}
	
	.graph-content {
		/*mix-blend-mode: screen;*/
	}
	
	#equaliser-graph-container.disabled {
		pointer-events: none;
	}
	
	.graph-handle {
		height: 9px;
		width: 9px;
		border-radius: 10px;
		position: absolute;
		margin-left: -4px;
		background-color: currentColor;
		margin-top: -4px;
		cursor: move;
		z-index: 1;
	}
	
	
	.graph-handle:before {
		content: "";
		background-color: currentColor;
		height: 19px;
		width: 19px;
		border-radius: 30px;
		top: -5px;
		left: -5px;
		opacity: 0.2;
		position: absolute;
		transition: opacity 0.3s ease;
	}
	
	.graph-handle:hover:before,
	.graph-handle.drag:before {
		opacity: 0.5;
	}
	
	.graph-handle-width {
		height: 100vh;
		position: absolute;
		width: 29px;
		top: 0;
		margin-left: -14px;
		left: 50%;
		margin-top: -50vh;
		/*-webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 15%, white 45%, white 55%, rgba(0, 0, 0, 0) 85%);*/
		/*opacity: 0.7;*/
		pointer-events: none;
		padding-right: 1px;
	}
	
	.graph-handle-width:after {
		content: "";
		border-top: 1px solid currentColor;
		width: 100%;
		position: absolute;
		top: 50%;
		opacity: 0.5;
	}
	
	.graph-handle-width:before {
		width: 100%;
		height: 100%;
		content: "";
		background-color: currentColor;
		box-shadow: inset 0 0px 20px currentColor;
		position: absolute;
		opacity: 0.1;
		/*transition: opacity 0.5s ease;*/
	}
	
	.graph-handle-width.drag:before {
		background-color: transparent;
		opacity: 0.5;
		/*transition: background-color 0.2s ease, opacity 0.2s ease;*/
	}
	
	.graph-handle-width:hover:before {
		/*opacity: 0.3;*/
	}
	
	.graph-handle-width-drag {
		width: 6px;
		color: currentColor;
		box-sizing: border-box;
		height: 100%;
		opacity: 0.5;
		pointer-events: all;
		position: absolute;
		cursor: ew-resize;
		transition: opacity 0.3s ease;
	}
	
	.graph-handle-width-drag.left:before,
	.graph-handle-width-drag.right:after {
		content: "";
		width: 5px;
		height: 100%;
		position: absolute;
	}
	
	.graph-handle-width-drag.left:before {
		left: -6px;
	}
	
	.graph-handle-width-drag.right:after {
		right: -6px;
	}
	
	.graph-handle-width:hover > div {
		opacity: 1;
	}
	
	.graph-handle-width-drag.left {
		border-left: 1px solid currentColor;
		left: 0;
	}
	
	.graph-handle-width-drag.right {
		border-right: 1px solid currentColor;
		right: 0;
	}
	
	.graph-handle, 
	.graph-handle-width {
		mix-blend-mode: multiply;
	}
	
	.dark .graph-handle, 
	.dark .graph-handle-width {
		mix-blend-mode: screen;
	}
	
	.graph-tooltip {
		background-color: rgba(0,0,0,0.8);
		position: absolute;
		color: white;
		transition: opacity 0.5s ease, transform 0.5s ease;
		opacity: 0;
		font-size: 0.7em;
		padding: 0.5em 0.6em 0.4em;
		text-align: center;
		z-index: 1;
		pointer-events: none;
	}
	
	.graph-tooltip:after {
		content: "";
	  	position: absolute;
	  	top: 100%;
	  	left: 50%;
	  	margin-left: -5px;
	  	border-width: 5px;
	  	border-style: solid;
	  	border-color: rgba(0,0,0,0.8) transparent transparent transparent;
	}
	
	.dark .graph-tooltip {
		/*background-color: rgba(255,255,255,0.8);
		color: black;*/
	}
	
	.dark .graph-tooltip:after {
	  	/*border-color: rgba(255,255,255,0.8) transparent transparent transparent;*/
	}
	
	.graph-tooltip.visible {
		opacity: 1;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}
	
	.graph-tooltip div {
		margin-bottom: 0.2em;
	}
	
	.graph-tooltip div:last-child {
		margin-bottom: 0;
	}
	
	.graph-tooltip .unit {
		opacity: 0.6;
	}
	
	.graph-tooltip .unit:last-child {
		margin-left: 0.3em;
	}
	
	.graph-tooltip .unit:first-child {
		margin-right: 0.3em;
	}
	
	.graph-tooltip .value {
		font-weight: 500;
	}
	
	#equaliser-compare-prompt {
		background-color: rgba(0,0,0,0.8);
		position: absolute;
		color: white;
		transition: opacity 0.5s ease, transform 0.5s ease;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0;
		font-size: 0.8em;
		text-align: center;
		z-index: 1;
		pointer-events: none;
		height: 46px;
		box-sizing: border-box;
		width: 160px;
		left: 50%;
		top: 50%;
		margin-top: -23px;
		margin-left: -80px;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	#equaliser-compare-prompt.visible {
		opacity: 1;
	}
	
	/* @end */
	
	/* @group Link */

#equaliser-link {
	display: none; /* flex */
	justify-content: space-around;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: var(--uppercase-spacing);
	font-weight: 500;
}

#equaliser-link > div {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 1em;
	padding-bottom: 7px;
}

#equaliser-link div.line {
	display: block;
	width: 1px;
	background-color: rgba(128,128,128,0.5);
	position: absolute;
	bottom: 0;
	transition: transform 0.1s linear;
	transform: scaleY(0);
	transform-origin: bottom;
	height: 8px;
}

#equaliser-link > .linked div.line {
	transform: scaleY(1);
}

#equaliser-link > div.selected div.line {
	height: 35px;
	transform-origin: top;
	transition-delay: 0.3s;
	transition-timing-function: ease-out;
}

#equaliser-link > div.selected.linked div.line {
	transform: scaleY(1);
	transition-delay: 0s;
	transition-timing-function: ease-in;
}

#equaliser-link > div.linked:not(.selected) div.line {
	transition-delay: 0.3s;
}

#equaliser-link > div.selected div.line:before {
	/*content: "";*/
	width: 9px;
	height: 9px;
	border: 1px solid rgba(128,128,128,0.5);
	box-sizing: border-box;
	border-radius: 10px;
	position: absolute;
	top: -8px;
	left: -4px;
}

#equaliser-link > div.selected .symbol {
	opacity: 0;
	/*transform: translateY(-5px);*/
	pointer-events: none;
}

#equaliser-link > div:before,
#equaliser-link > div:after {
	content: "";
	height: 1px;
	background-color: rgba(128,128,128,0.5);
	position: absolute;
	bottom: 0;
	transition: width 0.2s linear;
	pointer-events: none;
	width: 0;
}

#equaliser-link > div:before {
	right: 50%;
}

#equaliser-link > div:after {
	left: 50%;
}

#equaliser-link > div:after,
#equaliser-link > div:before {
	transition-delay: 0.1s;
}

#equaliser-link > div.linked.right-one:after,
#equaliser-link > div.linked.left-one:before {
	width: 100%;
}

#equaliser-link > div.linked.right-two:after,
#equaliser-link > div.linked.left-two:before {
	width: 200%;
}

#equaliser-link > div.linked.right-three:after,
#equaliser-link > div.linked.left-three:before {
	width: 300%;
}

/* @end */


/* @group Filter Bar */

.collection-row-scroller {
	overflow-x: scroll;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	position: relative;
	padding-bottom: 10px;
	margin-right: -20px;
	margin-left: -20px;
}

.collection-row-wrap {
	padding-right: 15px;
	padding-left: 15px;
	display: inline-block;
}

.collection-row-view {
	display: flex;
	align-items: center;
}

.collection-row-item {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin-right: 5px;
	margin-left: 5px;
	height: 65px;
	width: 65px;
	position: relative;
}

.collection-row-item:after,
.collection-row-item:before {
	content: "";
	border-top: 1px solid currentColor;
	position: absolute;
	transform: rotate(-45deg);
	transition: width 0.3s ease;
	width: 0;
}

.collection-row-item:before {
	transform: rotate(45deg);
}

.collection-row-item.bypass:after,
.collection-row-item.bypass:before {
	width: 100%;
}

.collection-row-view .separator {
	width: 1px;
	height: 20px;
	background-color: var(--menu-line);
	margin-left: 5px;
	margin-right: 5px;
}

.collection-row-item-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.bypass .collection-row-item-content {
	opacity: 0.5;
}

.collection-row-item-text {
	/*font-size: 0.8em;
	font-weight: 500; */
	margin-top: 0.8em;
	padding-left: var(--uppercase-spacing);
	position: relative;
}

.ui-equaliser-item.shift-left {
	transform: translateX(calc(-100% - 10px));
}

.ui-equaliser-item.shift-right {
	transform: translateX(calc(100% + 10px));
}

.ui-equaliser-item.no-animation {
	transition: none;
}

.ui-equaliser-item.deleted {
	transform: scale(0.5);
	opacity: 0;
}

/* @end */

.filter-controls {
	transition: opacity 0.5s ease;
}

.control-squares {
	display: flex;
	justify-content: space-around;
}

.control-square {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--menu-line);
	border-right: none;
	flex-basis: 100%;
	flex-direction: column;
	width: 100%;
	position: relative;
	margin-bottom: 10px;
	padding-top: 5px;
}

.control-square:after {
	content: attr(data-label);
	/*background-color: var(--button-bg);*/
	/*position: absolute;*/
	font-size: 0.8em;
	font-weight: 500;
	opacity: 0.5;
	width: calc(100% - 20px);
	text-align: center;
	margin-top: 5px;
	margin-right: 10px;
	height: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid rgba(160,160,160,0.6);
	bottom: -1.5em;
	margin-left: 10px;
}

.control-square:last-of-type,
.control-square.all-borders {
	border-right: 1px solid var(--menu-line);
}


.control-square-wrap {
	cursor: ew-resize;
	z-index: 1;
	padding-top: 4px;
	padding-bottom: 3px;
}

.vertical .control-square-wrap {
	cursor: ns-resize;
}

.control-value {
	font-weight: 500;
	text-align: center;
	pointer-events: none;
}

.large .control-value {
	font-size: 1.8em;
}

.control-label {
	font-size: 0.8em;
	font-weight: 500;
	opacity: 0.5;
	margin-top: 0.3em;
}

.control-unit {
	opacity: 0.5;
	font-size: 0.8em;
	pointer-events: none;
}

#coeffs-controls input[type=text].menu-value {
	width: calc(100% - 50px);
	max-width: none;
}

/* @group Overrides for Sound Design */

.speaker-equaliser #equaliser-tab-l,
.speaker-equaliser #equaliser-tab-r,
.speaker-equaliser #equaliser-tab-group-lr,
.sound-design #equaliser-tab-a,
.sound-design #equaliser-tab-b,
.sound-design #equaliser-tab-c,
.sound-design #equaliser-tab-d,
.sound-design #equaliser-tab-group-ab,
.sound-design #equaliser-tab-group-cd,
.sound-design #speaker-equaliser-header,
.speaker-equaliser #sound-design-header {
	display: none;
}

.sound-design #equaliser-channel-settings-button {
	display: none;
}

/* @end */

@media only screen and (max-width: 360px) {
	
	.control-squares {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	.control-square:last-of-type {
		border-right: none;
	}
	
	.control-square:first-of-type {
		border-left: none;
	}
	
	.control-square.all-borders {
		border-right: none;
	}
	
}

@media only screen and (min-width: 620px) {
	
	.collection-row-scroller {
		-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, white 20px, white calc(100% - 20px), rgba(0, 0, 0, 0) 100%);
	}
	
}

@media only screen and (min-width: 800px) {
	
	#equaliser-link {
		margin-left: -20px;
		margin-right: -20px;
	}
	
}