/*--------------------------------------------------*/
/*	OVERRIDE
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*	ROUND THEME
/*--------------------------------------------------*/



/*--------------------------------------------------*/
/*	GENERAL
/*--------------------------------------------------*/

.panel {
/*
	overflow: hidden;
*/
	width: 100%;
}

.panel .info {
	position: absolute;
	bottom: 15px;
	left: 15px;
}

.panel .info .name {
	color: #FFFFFF;
	text-shadow: #404040AA 0 0 3px;
}

/*--------------------------------------------------*/
/*	SUPER
/*--------------------------------------------------*/

.panel .button.super {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.panel .button.super:after {
	content: "\f161";

	color: #FFFFFF;
	font-size: 150%;
	text-align: center;
}

/*--------------------------------------------------*/
/*	BIO
/*--------------------------------------------------*/

.panel[type="bio"] {
	overflow: hidden;
}

.panel[type="bio"]:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background-image: url("/content/backgrounds/paper/01");
}

/*--------------------------------------------------*/
/*	IMAGE
/*--------------------------------------------------*/

.panel[type="image"] {
	overflow: hidden;
}

.panel[type="image"] img {
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

/*--------------------------------------------------*/
/*	PROMPT
/*--------------------------------------------------*/

.panel[type="prompt"] {
	width: 100%;

	padding: 5px 15px;

	line-height: 24px;
}

/*--------------------------------------------------*/
/*	AUDIO
/*--------------------------------------------------*/

.panel[type="audio"] {
	overflow: hidden;
	display: block;
	background: #FFFFFF;

	height: 350px;
	width: 700px;
}

.panel[type="audio"] .position {
	position: absolute;
	top: 50%;
	left: 20px;

	transform: translate(-50%, -50%);
}

.panel[type="audio"] .position .vinyl {
	zoom: calc(350 / 850 + .33);
}

.panel[type="audio"] .button {
	float: left;
}

.panel[type="audio"] .waveform {
	float: right;
	overflow: hidden;

	width: calc(100% - 80px);
	height: 40px;
	margin: 5px 15px;
}

.panel[type="audio"] .waveform:after  {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF00 5%, #FFFFFF00 95%, #FFFFFF 100%);
}

.panel[type="audio"] .waveform > * {
	display: inline-block;

	position: relative;
	top: -12px;
	transform: translateY(50%);

	width: 4px;
	margin-left: 2px;

	background: var(--text);
	border-radius: 2px;
}

.panel[type="audio"] .waveform > *:nth-child(1n) { height: 4px;  }
.panel[type="audio"] .waveform > *:nth-child(2n) { height: 16px; }
.panel[type="audio"] .waveform > *:nth-child(3n) { height: 24px; }
.panel[type="audio"] .waveform > *:nth-child(4n) { height: 8px;  }
.panel[type="audio"] .waveform > *:nth-child(5n) { height: 32px; }