.maggie-volume-indicator-topbar {
	cursor: pointer;
	height: 57px;
	width: 57px;
	display: flex;
	flex: 1 0 57px;
	pointer-events: auto;
	justify-content: center;
	align-items: center;
	border: none;
	transition: all 0.3s ease 0s;
}

.maggie-volume-indicator-container {
	margin-top: 20px;
	width: 28px;
	height: 17px;
	transform: rotate(180deg);
	transform: rotate(180deg);
	cursor: pointer;
}

.state-muted {}

.state-hidden {
	display: none;
}

/* .state-muted [class^="eq-"] {
	animation: muted 0.75s forwards;
}

@keyframes muted {
	0% {
		height: 90%;
	}
	100% {
		height: 5%;
	}
}

[class^="eq-"] {
	float: left;
	display: block;
	height: 100%;
	width: 3px;
	margin: 0px 3px 0px 0px;
	background: #FFF;
}

.eq-1 {
	animation: eq2 0.95s infinite;
}

.eq-2 {
	animation: eq2 0.75s infinite;
}

.eq-3 {
	animation: eq3 0.95s infinite;
}

.eq-4 {
	animation: eq1 0.55s infinite;
	margin: 0px;
}

@keyframes eq1 {
	0% {
		height: 30%;
	}
	50% {
		height: 80%;
	}
	100% {
		height: 40%;
	}
}

@keyframes eq2 {
	0% {
		height: 45%;
	}
	35% {
		height: 10%;
	}
	65% {
		height: 100%;
	}
	100% {
		height: 20%;
	}
}

@keyframes eq3 {
	0% {
		height: 5%;
	}
	50% {
		height: 60%;
	}
	100% {
		height: 20%;
	}
} */