.player{position:fixed;bottom:0;right:0;left:0;height:0;background:#fff;z-index:999;transition:.4s;box-shadow:-5px 0 10px #DEDBDB}
.player.active{height:70px}
.player .mdy_w{display:flex;justify-content:space-between;align-items:center;flex-direction:row-reverse;height:69px}
.jb_plycntrl{display:flex;align-items:center;flex-direction:row-reverse}
.jb_plycntrl span{width:25px;height:25px;margin:0 1px;cursor:pointer;display:flex;justify-content:center;align-items:center}
.jb_plycntrl span svg{width:20px;height:20px;fill:#525252}
.jb_plycntrl .player_next svg,.jb_plycntrl .player_prev svg{width:16px;height:16px}
.jb_plycntrl span.player_ctrl_play{font-size:20px}
.jb_plycntrl span.player_ctrl_volume{font-size:16px}
.jb_plycntrl span:hover{color:var(--ful-color)}
.jb_plycntrl span.active{color:var(--ful-color)}
.jb_plycntrl span.deactive{color:#fff;opacity:.4;cursor:default}
.player_time_show{display:flex;font-size:14px;color:#525252;margin-right:1em}
.player_time_bar{width:calc(100% - 100px);position:relative;height:13px;flex:1;margin:0 1em}
.player_time_bar .player_time_mousemove{position:absolute;top:-32px;padding:0 9px;background:#525252;font-size:13px;color:#fff;display:none;border-radius:.3em}
.player_time_bar .player_time_mousemove:before{content:"";position:absolute;bottom:-6px;right:20px;border-width:3px 6px;border-style:solid;border-color:#525252 transparent transparent;z-index:99}
.player_time_bar:hover .player_time_mousemove{display:block}
.player_time_bar .player_time_bar_main{position:relative;height:12px;background:#dbe4e9;overflow:hidden;cursor:pointer;border-radius:.3em}
.player_time_bar span{position:absolute;top:0;bottom:0;left:0;z-index:5;width:0;background:var(--ful-color)}
.jb_plitms div{display:flex;align-items:center;gap:.7em}
.jb_plitms>div{position:relative;border-bottom:1px solid #E0E0E0;padding:1em 0;display:flex;align-items:center;justify-content:space-between}
audio[id="player"]{position:fixed;top:0;left:0}
.jb_plitms .jb_pllft b{font-size:14px;font-weight:400;text-align:right}
.jb_plitm{flex-direction:row-reverse}
.jb_plitm a, .jb_plitm span, .jb_plitm del {
	font-size: 15px;
	min-width: 35px;
	height: 35px;
	background: var(--ful-color);
	color: var(--box-bg-color);
	transition: .3s;
	cursor: pointer;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	fill: var(--box-bg-color);
	flex-direction: row-reverse;
	border-radius: .4em;
	border: 2px solid var(--brdr-bg-color);
}

.jb_plitm del svg,.jb_plitm a svg{width:16px;height:16px;margin-right:.4em}
.jb_plitm del{background:#cfd9df;color:#525252;cursor:no-drop;padding:0 .5em;fill:#525252}
.jb_plitm span:hover,.jb_plitm a:hover{background:var(--text-color)}
.track thisTrack.jb_plitm span:before{display:block;height:38px;font-size:15px;line-height:2.5;overflow:hidden}
.jb_plitm a{padding:0 .5em;gap:.5em}
.jb_plitm a::before {
	content: "";
	width: 18px;
	height: 18px;
	background-size: cover;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 716.67 716.67'%3E%3Cpath d='M566.67,300.06c72.5.41,111.76,3.62,137.37,29.24,29.29,29.29,29.29,76.43,29.29,170.71v33.33c0,94.28,0,141.42-29.29,170.71s-76.43,29.29-170.71,29.29H266.67c-94.28,0-141.42,0-170.71-29.29S66.67,627.62,66.67,533.34V500c0-94.28,0-141.42,29.29-170.71,25.61-25.62,64.87-28.83,137.37-29.24' transform='translate(-41.67 -41.67)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-miterlimit='133.33' stroke-width='50' style='isolation:isolate'/%3E%3Cpath d='M400,66.67V500m0,0L300,383.33M400,500,500,383.33' transform='translate(-41.67 -41.67)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='50'/%3E%3C/svg%3E");
}
.dark .jb_plitm a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 716.67 716.67'%3E%3Cpath d='M566.67,300.06c72.5.41,111.76,3.62,137.37,29.24,29.29,29.29,29.29,76.43,29.29,170.71v33.33c0,94.28,0,141.42-29.29,170.71s-76.43,29.29-170.71,29.29H266.67c-94.28,0-141.42,0-170.71-29.29S66.67,627.62,66.67,533.34V500c0-94.28,0-141.42,29.29-170.71,25.61-25.62,64.87-28.83,137.37-29.24' transform='translate(-41.67 -41.67)' fill='none' stroke='%23333' stroke-linecap='round' stroke-miterlimit='133.33' stroke-width='50' style='isolation:isolate'/%3E%3Cpath d='M400,66.67V500m0,0L300,383.33M400,500,500,383.33' transform='translate(-41.67 -41.67)' fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='50'/%3E%3C/svg%3E");
}
.jb_plitms>div.track.jb_plnwply{border-bottom-color:var(--ful-color)}
.jb_plitms .jb_plnwply .jb_pllft .divStrong{color:var(--ful-color);fill:var(--ful-color)}
.player_ctrl_play .fa{display:none}
.jb_plply .fa{display:none}
.jb_plply .fa svg{width:14px;height:14px}
.jb_plnwply .jb_plply {background: var(--text-color);}
.icon-play6 .fa-play{display:inline-flex}
.icon-pause .fa-pause{display:inline-flex}
.icon-pause5 .fa-pause{display:inline-flex}
.icon-pause5 .fa-pause svg,.player_ctrl_loop.active svg{fill:var(--ful-color)}
.player_ctrl_volume .fa{display:none}
.icon-sound-alt .fa-volume-up{display:inline-flex}
.icon-soundoff .fa-volume-off{display:inline-flex}
.jb_ltply{cursor:pointer;margin:1em 0 0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.jb_ltply span:nth-child(2){margin:0 0 .2em;display:flex;align-items:center;justify-content:center;color:#1f1f1f;width:100%;font-size:16px}
.jb_ltply span i {
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;
	margin: 0 0 .8em;
	fill: var(--box-bg-color);
	background: var(--ful-color);
	border-radius: .4em;
}
.jb_ltply i{display:none}
.jb_ltply i svg{width:20px;height:20px}
.icon-play i.fa-play{display:flex}
.icon-pause3 i.fa-pause{display:flex}
.icon-pause3 i.fa-play{display:none}
.jb_plitms .jb_pllft strong,.jb_plitms .jb_pllft .divstrong:hover{color:#2283c2}
.jb_plitms .jb_plnwply .jb_pllft .divStrong #bar1{animation:bar1 1.2s infinite linear}
.jb_plitms .jb_plnwply .jb_pllft .divStrong #bar2{animation:bar2 .8s infinite linear}
.jb_plitms .jb_plnwply .jb_pllft .divStrong #bar3{animation:bar3 1s infinite linear}
.jb_plitms .jb_plnwply .jb_pllft .divStrong #bar4{animation:bar4 .7s infinite linear}
@keyframes bar1 {
0%{height:2px}
50%{height:7px}
100%{height:2px}
}
@keyframes bar2 {
0%{height:5px}
40%{height:1px}
80%{height:7px}
100%{height:5px}
}
@keyframes bar3 {
0%{height:7px}
50%{height:0}
100%{height:7px}
}
@keyframes bar4 {
0%{height:2px}
50%{height:7px}
100%{height:2px}
}
@media screen and (max-width:530px) {
.jb_plitms>div{flex-direction:column;padding-top:.5em}
.jb_plitms>div:first-child{border-top:1px solid #E0E0E0}
}
@media screen and (max-width:320px) {
.player_backward,.player_forward{display:none!important}
}