/* Misc.
================================================== */

.add-bottom { margin-bottom: 2rem !important; }
.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.column { width: 100%; }


/* Settings
================================================== */

audio {
	background-color: #23313d;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
}

#mainwrap { 
    background: #2e4152; 
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 25px;
	padding-bottom: 15px;
	border-radius: 10px;
}

#audiowrap,
#plwrap {
	margin: 0 auto;
}

#tracks {
	position: relative;
	text-align: center;
}

#nowPlay {
	display: inline;
}

#npAction {
	padding: 0px;
	position: absolute;
	color: #FFF;
}

#npTitle {
	padding: 0px;
	color: #FFF;
}

#plList li {
	cursor: pointer;
	display: block;
	margin-left: -40px;
	padding: 28px 0;
	color: #C0C4C8;
}

#plList li:hover {
	background-color: rgba(0,0,0,.5);
	color: #FFFFFF;
}

.plItem {
	position: relative;
}

.plTitle {
	left: 60px;
	overflow: hidden;
	position: absolute;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
}

.plNum {
	position: absolute;
	left: 20px;
}

.plLength {
	position: absolute;
	right: 20px;
	top: 0;
}

.plSel,
.plSel:hover {
	color: #FFFFFF;
	background-color: rgba(0,0,0,.25);
	cursor: default !important;
}

a[id^="btn"] {
	border-radius: 50%;
	background-color: #23313d;
	color: #96db90;
	cursor: pointer;
	display: inline-block;
	height: 35px;
	line-height: .8;
	margin: 0 20px 20px;
	padding: 4px;
	text-decoration: none;
	width: 35px;
}

a[id^="btn"]:last-child {
	margin-left: -4px;
}

a[id^="btn"]:hover,
a[id^="btn"]:active {
	background-color: #172029;
	color: #FFFFFF;
}

a[id^="btn"]::-moz-focus-inner {
	border: 0;
	padding: 0;
}


/* Plyr Overrides
================================================== */

.plyr--audio .plyr__controls {
	background-color: transparent;
	border: none;
	color: #fff;
	padding: 20px 20px 20px 13px;
	width: 100%;
}

.plyr--audio .plyr__controls button.tab-focus:focus,
.plyr--audio .plyr__controls button:hover,
.plyr__play-large {
	background: rgba(0,0,0,.1);
}

.plyr__progress--played, .plyr__volume--display {
	color: rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer,
.plyr--audio .plyr__volume--display {
	background: rgba(0,0,0,.1);
}

.plyr--audio .plyr__progress--buffer {
	color: rgba(0,0,0,.1);
}

@media only screen and (max-width:850px) {
    #nowPlay { display: none; }
}