.music_controls {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100vw;
	overflow: hidden;

	background-color: var(--alt);
}

.music_controls > tbody > tr {
	width: 100vw;
	min-height: 51px;
	height: max(4vw, 4vh);
}

.music_controls > tbody > tr > td {
	width: fit-content;
	height: 100%;
}

.music_controls .left {
	float: left;
}

.music_controls .right {
	float: right;
	
	text-align: right;
}

.music_controls .center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.music_controls * {
	display: inline-block;
	vertical-align: middle;
}

.music_controls button {
	min-width: 38px;
	width: max(3vw, 3vh);
	min-height: 38px;
	height: max(3vw, 3vh);
	margin-left: max(6px, max(0.5vw, 0.5vh));
	margin-top: max(6px, max(0.5vw, 0.5vh));

	cursor: pointer;
	border: none;
}

.music_controls p {
	color: var(--text);

	font-size: max(13px, max(1vw, 1vh));
}

.music_controls .prev {
	background: url(../media/icons/prev.png);
	background-size: contain;
}

.music_controls .play {
	background: url(../media/icons/play.png);
	background-size: contain;
}

.music_controls .pause {
	background: url(../media/icons/pause.png);
	background-size: contain;
}

.music_controls .next {
	background: url(../media/icons/next.png);
	background-size: contain;
}

.music_controls .volume {
	width: 10vw;
	height: 30%;

	background-color: var(--divider);
}

.music_controls .volume div {
	display: block;
	height: 100%;

	background-color: var(--primary);
}

.music_controls .progress {
	width: 50vw;
	height: 50%;

	background-color: var(--divider);
}

.music_controls .progress div {
	height: 100%;

	background-color: var(--primary);
}

.music_controls .cover {
	height: calc(100% - max(6px, max(0.5vw, 0.5vh)));
	margin-top: calc(max(6px, max(0.5vw, 0.5vh)) / 2);
}

.music_controls .title, .music_controls .author {
	display: block;
	height: 50%;
	margin: 0;
}