.jp-interface button {
	background: none;
	border: none;
	color: var(--bs-gray-500);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	font-size: 1.15rem;
}
.jp-interface button:hover {
	color: var(--bs-body-color);
}

button.jp-play,
button.jp-pause {
	font-size: 1.75rem;
}
.volume-control {
	width: 32px;
	height: 42px;
}
@media (min-width: 992px) {
	.volume-control {
		width: 48px;
	}
}
button.jp-mute {
	top: 6px;
	left: -6px;
}
button.jp-unmute {
	top: 6px;
	left: -3px;
}

.jp-time-holder {
	font-style: italic;
}

.jp-progress {
	overflow: hidden;
	height: 25px;
	display: inline-block;
}
.jp-audio .jp-type-single .jp-progress {
	width: 100%;
	margin: 0 10px;
}
.jp-audio .jp-type-playlist .jp-progress,
.jp-audio .jp-type-playlist-compact .jp-progress {
	width: 100%;
	margin: 0 10px;
}
.jp-seek-bar {
	width: 0px;
	height: 100%;
	cursor: pointer;
}
.jp-play-bar {
	width: 0px;
	height: 100%;
}

div.jp-seek-bar {
	background-color: var(--bs-gray-500);
	background: linear-gradient(to bottom, transparent 0%, transparent 79%, var(--bs-gray-500) 79.1%, var(--bs-gray-500) 89%, transparent 89.1%, transparent 100% );
}
div.jp-play-bar {
	background-color: var(--bs-body-color);
	background: linear-gradient(to bottom, transparent 0%, transparent 79%, var(--bs-body-color) 79.1%, var(--bs-body-color) 89%, transparent 89.1%, transparent 100% );
}

.jp-volume-bar {
	overflow: hidden;
	height: 25px;
	display: inline-block;
	width: 20%;
	margin: 0 10px;
	cursor: hand; cursor: pointer;
	background: linear-gradient(to bottom, transparent 0%, transparent 79%, var(--bs-gray-500) 79.1%, var(--bs-gray-500) 89%, transparent 89.1%, transparent 100% );
}
.jp-volume-bar-value {
	height: 100%;
	background: linear-gradient(to bottom, transparent 0%, transparent 79%, var(--bs-body-color) 79.1%, var(--bs-body-color) 89%, transparent 89.1%, transparent 100% );
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

div.jp-playlist ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
div.jp-playlist li {
	background: var(--bs-white);
}
div.jp-playlist li:nth-child(odd) {
    background: var(--bs-gray-100);
}
div.jp-playlist li div,
div.jp-playlist li div a {
	display: block;
}
div.jp-playlist li div a {
	padding: .25rem;
	color: var(--bs-gray-600) !important;
}
div.jp-type-playlist div.jp-playlist a:hover {
	background: var(--bs-gray-200);
	color: var(--bs-dark) !important;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current a:hover {
	background: var(--bs-body-color);
	color: var(--bs-white) !important;
}
.jp-current-time, .jp-duration {
	color: var(--bs-body-color);
	font-size: .8rem !important;
}
div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
	background: var(--bs-body-color);
}
div.jp-playlist li.jp-playlist-current div a {
	color: var(--bs-white) !important;
}