@font-face {
	font-family: 'FaPlayer';
	src: url('/audio/jplayer/skin/fa-solid-900.woff2');
	font-style: normal;
	font-weight: normal;
}

div.jp-audio {
	width: 100%;
	padding: 10px 0;
	/*Stops drag hi-lighting but allows clicks*/
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

/* MY PLAYLIST LINKS */
div.jp-audio table {
	border-collapse: collapse;
	vertical-align: middle;
	width: 100%;
}

div.jp-audio tr > td:first-child { 
	width: 100% !important;
}

div.jp-audio td {
	padding: 10px;
	min-width: 40px;
	color: var(--gj-light);
}

div.jp-audio tr {
	height: 50px;

}

@media screen and (max-width: 576px) { /*on mobile*/
	div.jp-audio tr {
		height: 70px;
		border-bottom: 1pt solid var(--gj-player);
	}
}

div.jp-audio tr:hover {
	background-color: #0000001f;
}

div.jp-audio tr.archive:hover {
	background-color:  var(--gj-trans);
}

div.jp-audio td span.star {
	background: url("listenliststar.png") 0 0 no-repeat;
	padding-left: 30px;
    margin-left: 10px;
}

@media screen and (max-width: 576px) { /*== CHANGED FROM STD listenplayer.CSS ==*/
	div.jp-audio td span.star {
		background: none;
		padding-left: 0;
    	margin-left: 0;
		font-size: 1rem;
	}
}

/* DOWNLOAD BUTTONS */
div.jp-audio td a { /*== CHANGED FROM STD listenplayer.CSS ==*/
	width: 120px;
	padding: 6px;
	margin-left: auto;
	display: block;
	cursor: pointer;
	text-indent: 30px;
	font-size: 0.8em;
	border: none;
	outline: none;
	background: var(--gj-player) url(download.png) 9px -3px no-repeat;
	border-radius: 8px;
	moz-border-radius: 8px;
	transition: none;
}

div.jp-audio td a:hover { /*== CHANGED FROM STD listenplayer.CSS ==*/
	background: var(--gj-player) url("download.png") 9px -43px no-repeat;
}

div.jp-audio td a:active { /*== CHANGED FROM STD listenplayer.CSS ==*/
	background: var(--gj-player) url("download.png") 9px -83px no-repeat;
}

/* TRACK BUTTONS */
/* trk play */
div.jp-audio .track span.button {
	cursor: pointer;
	color: var(--gj-light);
	display: block;
	padding-left: 30px; /*(allow for text wrap)*/
}

div.jp-audio .track span.button::before {
	font-family: 'FaPlayer';
	content: "\f04b";
	display: inline-block;
	margin-left: -26px; /*(allow for text wrap)*/
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	width: 26px;
}

/* trk play glow */
div.jp-audio .track span.button:hover,
div.jp-audio .track span.button.current:hover {
	cursor: pointer;
	color: var(--gj-yellow);
	display: block;
}
div.jp-audio .track span.button:hover::before {
	font-family: 'FaPlayer';
	content: "\f04b";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	text-shadow: 0px 0px 6px var(--gj-yellow);
	width: 26px;
}

/* trk pause */
div.jp-audio .track span.current.playing:before {
	font-family: 'FaPlayer';
	content: "\f04c";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	width: 26px;
}

/* trk pause glow */
div.jp-audio .track span.current.playing:hover::before {
	font-family: 'FaPlayer';
	content: "\f04c";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	padding-right: 10px;
	color: var(--gj-yellow);
	text-shadow: 0px 0px 6px var(--gj-yellow);
	width: 26px;
}

/* INTERFACE */
div.jp-interface {
	position: relative;
	background: linear-gradient(to bottom, #555f69 0%, var(--gj-player) 10%, var(--gj-player) 90%, #292e33 100%);
	color: var(--gj-yellow);
	font-size: 0.7em; /* for title & times */
	border-radius: 8px;
	padding: 14px 20px;
	margin-bottom: 15px;
	width: 100%;
	/*max-width: 450px; now set by container */
}

/* CONTROLS */
div.jp-audio div.jp-controls {
	padding: 8px 0 0 8px;
}

div.jp-interface div.jp-controls p {
	padding: 0;
	margin: 0;
	display: inline;
	float: left;
}

div.jp-interface div.jp-controls a {
	display: block;
	font-size: 0;
	padding: 0px;
	transition: none;
	border: none;
}

/* play */
div.jp-interface div.jp-controls .jp-play::after {
	font-family: 'FaPlayer';
	content: "\f04b";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	width: 26px;
}

div.jp-interface div.jp-controls .jp-play:hover::after {
	font-family: 'FaPlayer';
	content: "\f04b";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	text-shadow: 0px 0px 6px var(--gj-yellow);
	width: 26px;
}

/* empty (waiting) star */
.empty {
	cursor: default;
}

div.jp-interface div.jp-controls .empty::after,
div.jp-interface div.jp-controls .empty:hover::after {
	font-family: 'FaPlayer';
	content: "\f005";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	text-shadow: none;
	width: 26px;
	margin-left: -4px;
	cursor: default;
}

/* pause */
div.jp-interface div.jp-controls .jp-pause::after {
	font-family: 'FaPlayer';
	content: "\f04c";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	width: 26px;
}

div.jp-interface div.jp-controls .jp-pause:hover::after {
	font-family: 'FaPlayer';
	content: "\f04c";
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
    font-size: 20px;
	color: var(--gj-yellow);
	text-shadow: 0px 0px 6px var(--gj-yellow);
	width: 26px;
}

/* PROGRESS BAR */
div.jp-progress {
	overflow: hidden;
	background-color: #3f3f3f;
}

div.jp-audio div.jp-progress {
	height: 10px;
}

div.jp-audio div.jp-type-single div.jp-progress {
	margin: 2px 0 12px;
	border: 1px solid;
	border-color: #262626 #525252 #525252 #262626;
}

div.jp-seek-bar {
	background: url("backBar.png") repeat-x;
	width: 0px;
	height: 100%;
	cursor: pointer;
}

div.jp-play-bar {
	background: url("letterBar.jpg") repeat-x;
	width: 0px;
	height: 100%;
}

/* ===[ The seeking class is added/removed inside jPlayer ]=== */
div.jp-seeking-bg {
	background: url("seekinganim.gif");
}

/* VOLUME */
div.jp-volume-bar {
	background: url("twelvebarGrey.png");
	overflow: hidden;
	width: 48px;
	height: 12px;
	cursor: pointer;
}

div.jp-audio div.jp-volume-bar {
	margin: 0;
}

div.jp-volume-bar-value {
	background: url("twelvebarYellow.png");
	width: 0px;
	height: 12px;
}

@media screen and (max-width: 576px) { /*on mobile*/
	div.jp-volume-bar,
	div.jp-audio div.jp-volume-bar,
	div.jp-volume-bar-value {
    	display: none;
		height: 0px;
	}
}

/* TIME/DURATION */
div.jp-current-time,
div.jp-duration {
	font-style: oblique;
}

div.jp-current-time {
	text-align: left;
	padding-left: 6px;
}

div.jp-duration {
	text-align: right;
	padding-right: 6px;
}

/* OTHER */

div.jp-jplayer audio,
div.jp-jplayer {
	width: 0px;
	height: 0px;
}

/* NO SOLUTION fallback */
.jp-no-solution {
	padding: 5px;
	font-size: .8em;
	border: 2px solid #009be3;
	display: none;
}

.jp-no-solution span {
	font-size: 1em;
	display: block;
	text-align: center;
	font-weight: bold;
}