.fail{color: #c2302c;}
.groovy{color: #333;}



.now-playing {
	background-image: linear-gradient(to bottom, rgba(22, 22, 22, .10) 1%, rgba(40, 42, 40, .10) 50%);
}

 


	.other-tracks {
		padding: 0% 20px;
		position: absolute;
		top: 750px;
		/*right: 0px;*/
		height: 100%;
		overflow: hidden;
		 width: 500px; 
	}
 

	.now-playing .inner {
		padding: 0% 20px;
		position: absolute;
		right: 0px;
		top: 0px;
		width: 500px;
	}

	.now-playing .count {
		color: #c2302c;
		font-family: 'Permanent Marker', cursive;
		font-size: 1.4em;
		vertical-align: middle;
	}

	.now-playing .playcount {
		font-family: 'Just Me Again Down Here', cursive;
		font-size: 2em;
		position: relative;
		text-align: center;
		top: -15px;
		z-index: 5;
	}

		.now-playing .playcount img,
		.now-playing .playcount .meta {
			display: inline-block;
			vertical-align: middle;
		}


	.now-playing .details {
		font-family: 'Fredoka One', cursive;
	}

		.now-playing .details h1 {
			padding-bottom: 8px;
			text-shadow: 2px 1px 1px rgb(246, 236, 224);
		}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.now-playing .meta-wrap {
	overflow: hidden;
}

	.now-playing .meta-wrap .meta {
		box-sizing: border-box;
		/*float: left;*/
		/*max-width:85%;
			width: 85%;*/
	}

	.now-playing .meta-wrap .meta {
		box-sizing: border-box;
		/*float: left;*/
		/*max-width:85%;
			width: 85%;*/
	}

	.now-playing .meta-wrap .number {
		/*font-size: 1em;*/
		float: right;
	}

	.now-playing .meta-wrap .artist {
	}

	.now-playing .meta-wrap .album {
		/*text-align: right;*/
	}
	
/*.now-playing a { display: block;}*/
.now-playing img.cover-art {
	display: block;
	/*margin: auto;*/
	max-width: 100%;
	vertical-align: middle;
	height: 500px;
}

.now-playing .tiny img {
	margin: auto;
	max-width: 100%;
	vertical-align: middle;
	height: 50px;
}


/*.now-playing .heatmap {
		position: absolute;
		bottom: -25px;
		width: 100%;
		z-index: -1;
	}
	.now-playing .heatmap .wrapper {
		display: inline-block ;
		margin: 0 auto;
		max-width: 100%;
		position: relative;
		top: 35px;
	}*/
.now-playing .heatmap .degree {
	display: block;
	float: left;
	height: 5px;
	width: 2px;
}

.now-playing .heatmap .dot {
	float: left;
	height: 50px;
	width: 2px;
	position: relative;
	top: -10px;
}

.now-playing .heatmap .maxed {
	position: relative;
	left: 500px;
	height: 50px;
	width: 5px;
	display: block;
	top: -10px;
}


.playcount-ball {
	position: relative;
	width: 5px;
	height: 5px;
	border-radius: 20px;
	border: 2px solid;
}




img.tiny {
	max-height: 25px;
}

sup {
	color: #c2302c;
}

.arrow_box {
	position: relative;
	/*background: #88b7d5;
	border: 4px solid #c2e1f5;*/
	top: 20px;
}

	.arrow_box:after, .arrow_box:before {
		bottom: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.arrow_box:after {
		/*border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #88b7d5;*/
		border-bottom-color: inherit;
		border-width: 15px;
		margin-left: -15px;
	}

	.arrow_box:before {
		border-color: rgba(194, 225, 245, 0);
		border-bottom-color: inherit;
		border-width: 15px;
		margin-left: -15px;
	}