.footer_player .footer_pause{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.71%205c.45%200%20.61.05.78.13.16.1.29.22.38.38.08.17.13.33.13.78V17.7c0%20.45-.05.61-.13.78a.91.91%200%2001-.38.38c-.17.08-.33.13-.78.13H6.8c-.45%200-.61-.05-.78-.13a.91.91%200%2001-.38-.38c-.08-.17-.13-.33-.13-.78V6.3c0-.45.05-.61.13-.78.1-.16.22-.29.38-.38.17-.08.33-.13.78-.13zm8%200c.45%200%20.61.05.78.13.16.1.29.22.38.38.08.17.13.33.13.78V17.7c0%20.45-.05.61-.13.78a.91.91%200%2001-.38.38c-.17.08-.33.13-.78.13H14.8c-.45%200-.61-.05-.78-.13a.91.91%200%2001-.38-.38c-.08-.17-.13-.33-.13-.78V6.3c0-.45.05-.61.13-.78.1-.16.22-.29.38-.38.17-.08.33-.13.78-.13z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}
.footer_player .footer_play{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%3B%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.13%205.1l10.5%206.25a.75.75%200%20010%201.29l-10.5%206.25A.75.75%200%20017%2018.25V5.75a.75.75%200%20011.13-.64z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}
.footer_player .footer_close{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%3B%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18.3%205.7a.99.99%200%2000-1.4%200L12%2010.6%207.1%205.7a.99.99%200%2000-1.4%201.4l4.9%204.9-4.9%204.9a.99.99%200%20001.4%201.4l4.9-4.9%204.9%204.9a.99.99%200%20001.4-1.4L13.4%2012l4.9-4.9a.99.99%200%20000-1.4z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}
.footer_player .footer_next{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%3B%22%20height%3D%2228%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M48%200H0v48h48z%22%20opacity%3D%22.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M23.95%2023.16l-12.15-7a1.2%201.2%200%2000-1.8%201.05v14.58a1.2%201.2%200%20001.8%201.04l12.15-7v5.96a1.2%201.2%200%20001.8%201.04l12.67-7.29a1.2%201.2%200%20000-2.08l-12.67-7.3a1.2%201.2%200%2000-1.8%201.05z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 28px no-repeat;
}
.playing_bars_wrapper{
    background: rgba(0,0,0,.5);
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
}

.playing_bars{
    margin: 15px 17px;
    height: 18px;
    width: 16px;
    position: relative;
    opacity: 0.8;
}

.bar1, .bar2, .bar3, .bar4 {
    transition: height 0.3s ease-out;
}

.playing_bars .bar1{
    height: 10%;
    width: 2px;
    background: #fff !important;
    float: left;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 5px;
}

.playing_bars .bar2{
    height: 10%;
    width: 2px;
    background: #fff !important;
    float: left;
    position: absolute;
    bottom: 0;
    left: 4px;
    border-radius: 5px;
}

.playing_bars .bar3{
    height: 10%;
    width: 2px;
    background: #fff !important;
    float: left;
    position: absolute;
    bottom: 0;
    left: 8px;
    border-radius: 5px;
}

.playing_bars .bar4{
    height: 10%;
    width: 2px;
    background: #fff !important;
    float: left;
    position: absolute;
    bottom: 0;
    left: 12px;
    border-radius: 5px;
}

.played_wrapper{
    padding: 3px 84px 0 0;
}
.player_wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin-right: 74px;
}
.progress_wrap:hover{
    cursor: pointer;
}
.progress_wrap{
    padding: 11px 0 15px 0;
    flex: 1 1 25%;
    position: relative;
    margin: 0 12px 0 0;
}
.volume_wrap{
    padding: 11px 0 15px 0;
    margin: 0 10px 0 0;
    flex: 0 0 55px;
	cursor: pointer;
	touch-action: none;
    position: relative;
}
.progress_wrap .progress_seek,
.volume_wrap .volume_display{
    width: 100%;
    height: 2px;
    background-color: #ebedf0;
}

.progress_wrap .progress_played,
.progress_wrap .progress_buffered,
.volume_wrap .volume_value{
    top: 11px;
	position: absolute;
    height: 2px;
    background: #4986cc;
    border-radius: 3px;
}
.progress_wrap .progress_buffered{
    background: #cfd4d8;
    transition: width 600ms ease;
}
.progress_buffered{
    z-index: 1;
}
.progress_played, .progress_transition, .progress_transition_circle{
    z-index: 2;
}
.progress_wrap .progress_transition,
.volume_wrap .volume_transition{
    width: 4px !important;
    height: 12px;
    border-radius: 2px;
    background: #4986cc;
    position: absolute;
    top: 6px;
    margin-left: -2px;
}

.progress_transition_circle{
    width: 12px !important;
    height: 12px;
    border-radius: 50%;
    background: #4986cc;
    position: absolute;
    top: 6px;
    margin-left: -10px;
}
.footer_player_wrapper{
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 11;
}
.footer_player:hover{
    cursor: pointer;
}
.footer_player{
    height: 48px;
    width: 1024px;
    margin: 0 auto;
    position: relative;
    font-size: 15px;
    background: #fff;
    border: 1px solid #ededed;
    border-bottom: none;
}
@media (max-width: 750px) {
    .footer_player{
        width: 100%;
    }
}
.footer_player .audio_info{
    text-align: center;
    padding-left: 48px !important;
    padding-right: 48px !important;
    padding-top: 5px;
    font-size: 13px;
    font-weight: 600;
}
.footer_player .title{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.footer_player .f_epd .title{
    padding-right: 16px;
}
.footer_player .audio_author{
    font-size: 12px;
    font-weight: 600;
    color: #818c99;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 6px;
    text-align: center;
}
.footer_player .footer_play,
.footer_player .footer_pause{
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    left: 0;
}
.footer_player .footer_close,
.footer_player .footer_next{
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    right: 0;
}
.footer_player .footer_pause{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.71%205c.45%200%20.61.05.78.13.16.1.29.22.38.38.08.17.13.33.13.78V17.7c0%20.45-.05.61-.13.78a.91.91%200%2001-.38.38c-.17.08-.33.13-.78.13H6.8c-.45%200-.61-.05-.78-.13a.91.91%200%2001-.38-.38c-.08-.17-.13-.33-.13-.78V6.3c0-.45.05-.61.13-.78.1-.16.22-.29.38-.38.17-.08.33-.13.78-.13zm8%200c.45%200%20.61.05.78.13.16.1.29.22.38.38.08.17.13.33.13.78V17.7c0%20.45-.05.61-.13.78a.91.91%200%2001-.38.38c-.17.08-.33.13-.78.13H14.8c-.45%200-.61-.05-.78-.13a.91.91%200%2001-.38-.38c-.08-.17-.13-.33-.13-.78V6.3c0-.45.05-.61.13-.78.1-.16.22-.29.38-.38.17-.08.33-.13.78-.13z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}
.footer_player .footer_play{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%3B%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8.13%205.1l10.5%206.25a.75.75%200%20010%201.29l-10.5%206.25A.75.75%200%20017%2018.25V5.75a.75.75%200%20011.13-.64z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') 11px 12px / 24px no-repeat;
}
.footer_player .footer_close{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%3B%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18.3%205.7a.99.99%200%2000-1.4%200L12%2010.6%207.1%205.7a.99.99%200%2000-1.4%201.4l4.9%204.9-4.9%204.9a.99.99%200%20001.4%201.4l4.9-4.9%204.9%204.9a.99.99%200%20001.4-1.4L13.4%2012l4.9-4.9a.99.99%200%20000-1.4z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}
.footer_player .footer_next{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%234986cc%3B%22%20height%3D%2228%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M48%200H0v48h48z%22%20opacity%3D%22.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M23.95%2023.16l-12.15-7a1.2%201.2%200%2000-1.8%201.05v14.58a1.2%201.2%200%20001.8%201.04l12.15-7v5.96a1.2%201.2%200%20001.8%201.04l12.67-7.29a1.2%201.2%200%20000-2.08l-12.67-7.3a1.2%201.2%200%2000-1.8%201.05z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 28px no-repeat;
}

.audio .author_right,
.audio .author_right a{
    display: inline;
    font-size: 15px;
    font-weight: 400;
    padding-right: 0 !important;
}

.progress-bar-striped{
    background: #2688eb linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size:1rem 1rem
}

.altr{
    background-image: url('../img/audio_progress.png');
    animation: altr 300ms linear infinite;
    transition: width 6000ms ease;
    -webkit-animation: 300ms linear infinite altr;
    background-position: 0 0;
}

.divider {
    padding: 0 2px;
}

.audioPlaylist_footer {
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: #909499;
    padding: 6px 0 10px;
}

.popup_player_wrapper{
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    position: fixed;
    background: rgba(0,0,0,.5);
    display: none;
}

.popup_player_content{
    top: 50%;
    left: 50%;
    width: 360px;
    position: fixed;
	padding: 20px;
    margin-top: -150px;
    margin-left: -200px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 -2px 6px 2px rgba(0, 0, 0, 0.05);
    word-break: break-word;
	overflow: hidden;
    background: #fff;
}

.popup_player_content a:hover{
    text-decoration: underline;
}

.popup_player_content .info_wr{
    position: relative;
}

.popup_player_content .info_wr .more{
    top: 0;
    right: 0;
    width: 24px;
    height: 44px;
}

.AudioPlayerBottomExpanded__handle {
	display: none;
}

.player_content,
.audio_content {
    width: 100% !important;
	height: 272px;
}

.button_bottom_wrap {
	display: none;
}

.player_content .button_bottom_wrap {
	display: block;
}

.toggle.more {
    display: block;
    height: 18px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    z-index: 18;
    bottom: calc(100vh / 4.1);
    transform: translate(-50%,0);
    transition: width .2s;
}

@media screen and (max-width: 620px) and (min-width: 450px) {
	.toggle.more {
		top: calc(100vh / 1.3);
	}
}

.player_content .info .marquee {
	display: none;
}

.player_content .volume_wrap {
    margin: 0 70px 0 70px;
}

.popup_player_content .layout {
    width: 100%;
    height: 50%;
    opacity: .5;
    position: absolute;
    overflow: hidden;
    -webkit-transform: scale(1) translate(-20px, -25px);
    -moz-transform: scale(1) translate(-20px, -25px);
    -ms-transform: scale(1) translate(-20px, -25px);
    -o-transform: scale(1) translate(-20px, -25px);
    transform: scale(1) translate(-20px, -25px);
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
    filter: blur(50px);
    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: transform 0.5s ease;
    -o-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
	background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%235d5f61%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22song_outline_28__Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22song_outline_28__song_outline_28%22%3E%3Cpath%20d%3D%22M0%200h28v28H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19.78%203.02A1%201%200%200121%204v2.1a3.6%203.6%200%2001-2.67%203.48l-3.33.89v9.92c0%204.7-4.58%207.1-7.07%204.61-2.58-2.57-.11-6.8%205.07-7.06v-10c-.03-1.93.91-3.3%202.68-3.89.64-.21%202-.55%204.1-1.03zM13%2019.94c-3.54.2-4.84%202.46-3.66%203.65%201.14%201.14%203.66-.18%203.66-3.2zm6-14.68c-1.35.31-2.25.54-2.68.69-.94.31-1.34.89-1.32%201.97v.48l2.81-.75A1.6%201.6%200%200019%206.1z%22%20id%3D%22song_outline_28__Icon-Color%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px !important;
}

.AudioPlayerBottomExpanded__close {
	top: 50%;
	left: 50%;
	position: absolute;
	display: none;
	width: 32px;
	height: 32px;
	border: 0;
	padding: 0;
	cursor: pointer;
	margin: -163px 0 0 214px;
	justify-content: center;
	align-items: center;
	background: 0 0;
}

.popup_player_wrapper,
.AudioPlayerBottomExpanded {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.AudioPlayerBottomExpanded__container {
	margin-top: unset;
	transform: translate(0%, 50%);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.AudioPlayerBottomExpanded__handle {
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    touch-action: none;
}

.AudioPlayerBottomExpanded__handle--touch {
    background-color: rgba(0,0,0,0.05);
}

@media screen and (min-width: 620px) {
	.popup_player_wrapper {
		background: none;
	}
	
	.AudioPlayerBottomExpanded {
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 101;
	    background: rgba(0, 0, 0, 0.60);
		transform: translateY(0);
		touch-action: none;
	}

	.AudioPlayerBottomExpanded__handle {
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: 16;
		background: 0 0;
		border: 0;
		outline: 0;
	}
	
	.AudioPlayerBottomExpanded__close {
	    display: flex;
		z-index: 16;
	}
	
	.AudioPlayerBottomExpanded__container {
	    left: 50%;
	    top: 50%;
	    position: fixed;
	    bottom: auto;
	    right: auto;
	    margin: 0;
	    z-index: 16;
	    transform: translate(-50%,-50%);
		/* transform: translate(-50%,-50%)!important; */
	    box-shadow: 0-2px 6px 2px rgba(0, 0, 0, 0.05);
	    border-radius: 10px;
	}
}

@media screen and (max-width: 450px) and (orientation: portrait),
	   screen and (max-height: 450px) and (orientation: landscape) {
    .popup_player_content{
        width: calc(100% - 60px);
        margin-left: 10px;
        margin-right: 10px;
        left: 0;
    }
	
    .AudioPlayerBottomExpanded {
	    position: fixed;
	    left: 0;
	    right: 0;
	    /*bottom: 48px;*/
	    width: 100%;
	    height: 100%;
	    z-index: 300;
	    background: rgba(0, 0, 0, 0.60);
		transform: translateY(0);
		touch-action: none;
	}

	.AudioPlayerBottomExpanded__handle {
		position: absolute;
		bottom: calc(100% - 30px);
		display: block;
		width: 100%;
		height: 100%;
		z-index: 17;
		background: 0 0;
		border: 0;
		outline: 0;
	}

	.AudioPlayerBottomExpanded__handle::before {
		content: "";
		display: block;
		width: 20px;
		height: 4px;
		background: rgb(51 49 49 / 60%);
		border-radius: 4px;
		position: absolute;
		left: 50%;
		bottom: 15px;
		transform: translate(-50%,0);
		transition: width .2s;
	}

	.AudioPlayerBottomExpanded__handle--touch::before {
		width: 40px;
	}

	.AudioPlayerBottomExpanded__close {
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    display: block;
	    width: 32px;
	    height: 32px;
	    border: 0;
	    padding: 0;
	    margin: -152px 0 0 222px;
	    justify-content: center;
	    align-items: center;
	    background: 0 0;
	}
	
	.AudioPlayerBottomExpanded__container {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		z-index: 16;
		position: fixed;
		transform: none;
		animation: appear-bottom 300ms cubic-bezier(0,0,.2,1);
		will-change: transform;
		box-shadow: 0-2px 6px 2px rgba(0, 0, 0, 0.05);
		border-radius: 0px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.player_content {
		width: 100% !important;
		height: calc(100% - 40px) !important;
		min-height: calc(100vh - 50px) !important;
	}
	
	.popup_player_content .layout {
	    width: 100%;
	    height: 50%;
	    opacity: .5;
	    position: absolute;
	    overflow: hidden;
	    -webkit-transform: scale(1) translate(-20px, -25px);
	    -moz-transform: scale(1) translate(-20px, -25px);
	    -ms-transform: scale(1) translate(-20px, -25px);
	    -o-transform: scale(1) translate(-20px, -25px);
	    transform: scale(1) translate(-20px, -25px);
	    -webkit-filter: blur(50px);
		-moz-filter: blur(50px);
		-o-filter: blur(50px);
		-ms-filter: blur(50px);
		filter: blur(50px);
		-webkit-transition: -webkit-transform 0.5s ease;
		-moz-transition: transform 0.5s ease;
		-o-transition: transform 0.5s ease;
		transition: transform 0.5s ease;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px !important;
	}
	
	.popup_player_content .layout.paused {
		opacity: 0
	}
	
	.player_content .layout {
	    height: 60%;
		-webkit-transform: scale(1) translateY(20px);
		-moz-transform: scale(1) translateY(20px);
	    -ms-transform: scale(1) translateY(20px);
	    -o-transform: scale(1) translateY(20px);
	    transform: scale(1) translateY(20px);
	}
	
	.audio_content .layout {
	    height: 100%;
	    -webkit-transform: scale(1.1) translateY(25px);
		-moz-transform: scale(1.1) translateY(25px);
	    -ms-transform: scale(1.1) translateY(25px);
	    -o-transform: scale(1.1) translateY(25px);
	    transform: scale(1.1) translateY(25px);
	}
	
	.player_content .layout.paused {
		opacity: 0
	}
	
	.player_content .popup_cover {
	    display: flex;
	    justify-content: space-between;
	    flex-direction: column-reverse;
	    flex-wrap: nowrap;
	    align-items: center;
	}
	
	.player_content .cover {
	    margin: 15% 0 0;
	    width: 250px !important;
	    height: 250px !important;
	    max-width: 250px;
	    max-height: 250px;
	    overflow: hidden !important;
		border-radius: 6px !important;
	    transition: transform 0.5s ease;
	    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px !important;
	}
    
    .player_content .cover,
    .player_content .layout {
        transition: opacity 0.5s ease-in-out;
    }
	
	.player_content .cover.playing,
	.player_content .cover:hover {
		transform: scale(1.4);
		--shadow-color: 197deg 32% 65%;
		--shadow-color: 0 100% 0%;
		box-shadow: 0 0.5px 0.6px hsl(var(--shadow-color)/.36),0 1.7px 1.9px -0.8px hsl(var(--shadow-color)/.36),0 4.3px 4.8px -1.7px hsl(var(--shadow-color)/.36),-0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color)/.36) !important;
	}

	.player_content .progress_wrap,
	.durations_wrap {
		/* top: -9%; */
		position: relative;
		/* margin: 50px 18px 0 18px !important; */
		clear: both;
	}

	.progress_transition_circle {
	    top: 6px;
	    width: 12px;
	    height: 12px;
	}

	.player_content .info_wr {
	    top: calc(100vh / 5); /* 5 */
	    position: relative;
	    clear: both;
	    /* margin: 31px 0px; */
	    text-align: center;
	}
	
	.player_content .info_wr .more {
		display: none;
	}
	
	.player_content .info {
	    height: 50px !important;
		padding-left: 0 !important;
	    padding-right: 0 !important;
	}

	.player_content .title {
	    font-size: 30px !important;
	    font-weight: 700 !important;
		padding-right: 0 !important;
	}
	
	.player_content .explicit::after {
		top: -3px !important;
		position: relative !important;
	}
	
	.player_content .author {
	    padding-left: 0 !important;
	    padding-right: 0 !important;
	}
	
	.player_content .author a {
	    font-size: 16px !important;
	}

	.player_content .buttons_wrap {
	    top: calc(100vh / 5); /* 6 */
	    position: relative;
	    clear: both;
	}
	
	.buttons_wrap {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
		margin: 10px 0px !important;
    }

	.buttons_wrap .prev,
	.buttons_wrap .popup_play,
	.buttons_wrap .popup_pause,
	.buttons_wrap .next{
	    margin: 0 25px 0 25px;
	}

	.buttons_wrap:has(.add_track, .add_more) .prev,
	.buttons_wrap:has(.add_track, .add_more) .popup_play,
	.buttons_wrap:has(.add_track, .add_more) .popup_pause,
	.buttons_wrap:has(.add_track, .add_more) .next{
	    margin: 0 15px 0 15px;
	}

	.buttons_wrap .add_track,
	.buttons_wrap .add_more {
	    display: block !important;
	}
	
	.popup_player_wrapper {
		background: none;
	}
	
	.toggle.more {
		bottom: 15px !important;
	}

	.player_content .volume_wrap {
	    margin: 0 70px 0 70px;
	    top: calc(100vh / 4); /* 5 */
	    position: relative;
	    clear: both;
	}

	.button_bottom_wrap {
	    display: block;
	    width: calc(100vw - 40px);
	    bottom: -6px !important;
	    position: absolute;
	    z-index: 17;
	    margin: 21px;
	}
	
	.player_content .button_bottom_wrap {
	    display: none;
	    top: calc(100vh / 7); /* 5 */
	    position: relative;
	    clear: both;
	}

	.audio_content {
	    width: 100% !important;
		height: 95% !important;
	}
	
}

@media screen and (max-height: 450px) and (orientation: landscape) {
	.AudioPlayerBottomExpanded__container {
		/*height: calc(100% - 8px);*/
	}
	
	.player_content .popup_cover {
		width: 40%;
		/* top: 5%; */
		position: absolute;
	}
	
	.player_content .cover {
	    margin: 13% 0 0;
	    width: 220px !important;
	    height: 220px !important;
	}
	
	.player_content .info_wr {
		top: auto;
		left: calc(100vw / 2.4);
		width: calc(100vw / 2);
	}
	
	.player_content .title {
		width: 100% !important;
	}
	
	.player_content .explicit::after {
		padding-right: 15px !important;
	}
	
	.player_content .progress_wrap,
	.durations_wrap {
		left: calc(100vw / 2.4);
		width: calc(100vw / 2.1);
	}
	
	.player_content .progress_wrap,
	.player_content .durations_wrap {
		left: calc(100vw / 2.5);
		width: calc(100vw / 2);
	}
	
	.player_content .buttons_wrap {
		top: calc(100vh / 15);
		left: 65%;
		width: calc(100vw / 2);
		transform: translate(-50%, 0);
	}
	
	.buttons_wrap .prev,
	.buttons_wrap .popup_play,
	.buttons_wrap .popup_pause,
	.buttons_wrap .next{
	    margin: 0 20px 0 20px;
	}
	
	.player_content .volume_wrap {
		top: calc(100vh / 7);
		left: calc(100vw / 2.4);
		width: calc(100vw / 3);
	}
	
	.toggle.more {
		/*left: 69% !important;*/
	}
	
	.button_bottom_wrap {
	    width: calc(100vw / 2);
	    left: calc(100vw / 2.3);
	    bottom: 0px !important;
	}

	.button_bottom_wrap.landscape {
		width: calc(100vw - 43px);
	    left: 0;
	}

	.player_content .button_bottom_wrap {
	    display: none;
		top: calc(100vh / 8);
		left: calc(100vw / 2.4);
		width: calc(100vw / 2);
	}
	
	.audio_content {
	    height: 90% !important;
	}
}

@media screen and (max-height: 380px) and (orientation: landscape) {
	.AudioPlayerBottomExpanded__container {
		/*height: calc(100% - 10px);*/
	}
	
	.player_content .cover {
		width: 180px !important;
		height: 180px !important;
		max-width: 200px;
		max-height: 200px;
	}
	
	.player_content .cover.playing {
		transform: scale(1.3);
	}
	
	.player_content .buttons_wrap {
		left: 62%;
		width: calc(100vw / 2);
		margin: 2px 60px !important;
	}
	
	.player_content .volume_wrap {
		top: calc(100vh / 7);
		left: calc(100vw / 2.4);
		width: calc(100vw / 3);
	}
	
	.toggle.more {
		/*left: 72% !important;*/
	}
	
	.button_bottom_wrap {
	    width: calc(100vw / 2);
	    left: calc(100vw / 2.4);
	    bottom: 0px !important;
	}

	.player_content .button_bottom_wrap {
	    display: none;
		top: calc(100vh / 8);
		left: calc(100vw / 2.3);
		width: calc(100vw / 2);
	}
	
	.audio_content {
	    height: 90% !important;
	}
}

@media only screen and (max-width: 380px) {
	.player_content .cover.playing,
	.player_content .cover:hover {
		transform: scale(1.3);
	}
	
	.player_content .progress_wrap {
	    margin: 0 18px 0 18px !important;
	}
	
	.player_content .info_wr {
	    top: calc(100vh / 6);
	}
	
	.player_content .info {
	    height: 35px !important;
	}
	
	.player_content .title {
	    font-size: 25px !important;
	    font-weight: 700 !important;
	}
	
	.player_content .buttons_wrap {
		top: calc(100vh / 7);
	}
	
	.player_content .volume_wrap {
		top: calc(100vh / 5);
	}
	
	.player_content .button_bottom_wrap {
		top: calc(100vh / 9);
	}
	
	.audio_content {
	    height: 95% !important;
	}
}

@media only screen and (max-width: 430px) and (max-height: 950px) {
	.player_content .cover {
	    margin: 15% 0 0;
	    width: 240px !important;
	    height: 240px !important;
	    max-width: 240px;
	    max-height: 240px;
	}
	
	.player_content .cover.playing,
	.player_content .cover:hover {
		transform: scale(1.3);
	}
}

@media only screen and (max-width: 380px) and (max-height: 740px) {
	.player_content .cover {
	    margin: 15% 0 0;
	    width: 220px !important;
	    height: 220px !important;
	    max-width: 220px;
	    max-height: 220px;
	}
	
	.player_content .cover.playing,
	.player_content .cover:hover {
		transform: scale(1.3);
	}
}

@media only screen and (max-width: 360px) and (max-height: 640px) {
	.player_content .cover {
	    margin: 15% 0 0;
	    width: 200px !important;
	    height: 200px !important;
	    max-width: 200px;
	    max-height: 200px;
	}
	
	.player_content .cover.playing,
	.player_content .cover:hover {
		transform: scale(1.2);
	}
}

@media only screen and (max-width: 320px) {
	.buttons_wrap .prev,
	.buttons_wrap .popup_play,
	.buttons_wrap .popup_pause,
	.buttons_wrap .next{
	    margin: 0 15px 0 15px;
	}
}

@media only screen and (max-width: 300px) {
	.player_content .cover {
	    width: 180px !important;
	    height: 180px !important;
	    max-width: 180px;
	    max-height: 180px;
	}
	
	.player_content .cover.playing,
	.player_content .cover:hover {
		transform: scale(1.2);
	}
}

.svgIcon {
    display: flex;
    align-items: center;
    justify-content: center;
	color: #fff;
}

.popup_player_wrapper .more{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%23a2a2a2%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2050.2%20%2855047%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Emore_horizontal_24%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%2F%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-2%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22more_horizontal_24%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Bounds%22%20points%3D%2224%200%200%200%200%2024%2024%2024%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18%2C10%20C19.1%2C10%2020%2C10.9%2020%2C12%20C20%2C13.1%2019.1%2C14%2018%2C14%20C16.9%2C14%2016%2C13.1%2016%2C12%20C16%2C10.9%2016.9%2C10%2018%2C10%20L18%2C10%20Z%20M12%2C14%20C10.9%2C14%2010%2C13.1%2010%2C12%20C10%2C10.9%2010.9%2C10%2012%2C10%20C13.1%2C10%2014%2C10.9%2014%2C12%20C14%2C13.1%2013.1%2C14%2012%2C14%20L12%2C14%20Z%20M6%2C14%20C4.9%2C14%204%2C13.1%204%2C12%20C4%2C10.9%204.9%2C10%206%2C10%20C7.1%2C10%208%2C10.9%208%2C12%20C8%2C13.1%207.1%2C14%206%2C14%20L6%2C14%20Z%22%20id%3D%22Mask%22%20fill%3D%22currentColor%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') center / 24px no-repeat !important;
}

.popup_player_content .popup_covers{
	box-sizing: border-box;
    border-radius: 6px;
	border: solid 1px rgba(0, 0, 0, 0.08);
}

.popup_player_content .cover{
    width: 48px;
    height: 48px;
	box-sizing: border-box;
    border-radius: 4px;
	background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    float: left;
}

.popup_player_content .info{
    padding-left: 12px;
    padding-right: 30px;
    position: relative;
    overflow: hidden;
    height: 21px;
}
.popup_player_content .player_content .title{
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*padding-right: 16px;*/
    position: relative;
    display: inline-block;
	width: 97%;
    max-width: 100%;
}

.popup_player_content .author{
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    padding-left: 12px;
    padding-right: 28px;
    min-height: 19px;
}

.popup_player_content .author a{
    color: #4986cc !important;
    font-size: 14px;
}

.popup_player_content .progress_wrap{
    margin: 20px 18px 0 18px;
}

.durations_wrap{
    font-size: 13px;
    color: #818c99;
    min-height: 20px;
    margin: 0 18px;
}

.durations_wrap .duration_start{
    float: left;
}

.durations_wrap .duration_end {
    float: right;
}

.buttons_wrap{
    text-align: center;
    margin: 20px 60px;
}

.buttons_wrap .add_track,
.buttons_wrap .add_more,
.buttons_wrap .prev,
.buttons_wrap .popup_play,
.buttons_wrap .popup_pause,
.buttons_wrap .next{
    width: 48px;
    height: 48px;
}

.buttons_wrap .popup_play{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%23000%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22id-play_48__Page-2%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%22id-play_48__play_48%22%3E%3Cpath%20id%3D%22id-play_48__Rectangle-737%22%20d%3D%22M0%200h48v48H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M14.4%208.76l24.02%2013.85a1.6%201.6%200%20010%202.78L14.4%2039.24a1.6%201.6%200%2001-2.4-1.39v-27.7a1.6%201.6%200%20012.4-1.39z%22%20id%3D%22id-play_48__Mask%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 60px no-repeat;
}

.buttons_wrap .popup_pause{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%23000%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h48v48H0z%22%20opacity%3D%22.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M17.15%206c1.34%200%201.83.14%202.32.4.48.26.87.65%201.13%201.13.26.5.4.98.4%202.32v28.3c0%201.34-.14%201.83-.4%202.32-.26.48-.65.87-1.13%201.13-.5.26-.98.4-2.32.4h-5.3c-1.34%200-1.83-.14-2.32-.4a2.73%202.73%200%2001-1.13-1.13c-.26-.5-.4-.98-.4-2.32V9.85c0-1.34.14-1.83.4-2.32.26-.48.65-.87%201.13-1.13.5-.26.98-.4%202.32-.4zm19%200c1.34%200%201.83.14%202.32.4.48.26.87.65%201.13%201.13.26.5.4.98.4%202.32v28.3c0%201.34-.14%201.83-.4%202.32-.26.48-.65.87-1.13%201.13-.5.26-.98.4-2.32.4h-5.3c-1.34%200-1.83-.14-2.32-.4a2.73%202.73%200%2001-1.13-1.13c-.26-.5-.4-.98-.4-2.32V9.85c0-1.34.14-1.83.4-2.32.26-.48.65-.87%201.13-1.13.5-.26.98-.4%202.32-.4z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 48px no-repeat;
}

.buttons_wrap .add_track {
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%2300%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M48%200H0v48h48z%22%20opacity%3D%22.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M13%2011h6.5a1%201%200%200%201%200%202H13v6.5a1%201%200%200%201-2%200V13H4.5a1%201%200%200%201%200-2H11V4.5a1%201%200%200%201%202%200V11Z%22%20fill%3D%22currentColor%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center/26px no-repeat;
}

.buttons_wrap .prev{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%23000%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M48%200H0v48h48z%22%20opacity%3D%22.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M24%2022.68V16.8a1.2%201.2%200%2000-1.8-1.05l-12.69%207.2a1.2%201.2%200%20000%202.08l12.7%207.2A1.2%201.2%200%200024%2031.19v-5.87l12.2%206.92a1.2%201.2%200%20001.8-1.05V16.81a1.2%201.2%200%2000-1.8-1.05z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 48px no-repeat;
}

.buttons_wrap .next{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%23000%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M48%200H0v48h48z%22%20opacity%3D%22.4%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M23.95%2023.16l-12.15-7a1.2%201.2%200%2000-1.8%201.05v14.58a1.2%201.2%200%20001.8%201.04l12.15-7v5.96a1.2%201.2%200%20001.8%201.04l12.67-7.29a1.2%201.2%200%20000-2.08l-12.67-7.3a1.2%201.2%200%2000-1.8%201.05z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 48px no-repeat;
}

.buttons_wrap .add_more {
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%20%23000%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%2224%200%200%200%200%2024%2024%2024%22%20opacity%3D%22.4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18%2C10%20C19.1%2C10%2020%2C10.9%2020%2C12%20C20%2C13.1%2019.1%2C14%2018%2C14%20C16.9%2C14%2016%2C13.1%2016%2C12%20C16%2C10.9%2016.9%2C10%2018%2C10%20L18%2C10%20Z%20M12%2C14%20C10.9%2C14%2010%2C13.1%2010%2C12%20C10%2C10.9%2010.9%2C10%2012%2C10%20C13.1%2C10%2014%2C10.9%2014%2C12%20C14%2C13.1%2013.1%2C14%2012%2C14%20L12%2C14%20Z%20M6%2C14%20C4.9%2C14%204%2C13.1%204%2C12%20C4%2C10.9%204.9%2C10%206%2C10%20C7.1%2C10%208%2C10.9%208%2C12%20C8%2C13.1%207.1%2C14%206%2C14%20L6%2C14%20Z%22%20fill%3D%22currentColor%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') center/26px no-repeat;
}

.buttons_wrap > div:hover,
.button_bottom_wrap > div:hover{
    cursor: pointer;
}

.buttons_wrap > div:active,
.button_bottom_wrap > div:active{
	opacity: .8;
    transform: scale(.95);
}

.button_bottom_wrap .shuffle{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%2399a2ad%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19.5%205.26a.5.5%200%2001.3.1l2.93%202.24a.5.5%200%20010%20.8l-2.92%202.23a.5.5%200%2001-.81-.4V9h-3.5c-.9%200-1.7.76-3.28%203%201.57%202.24%202.39%203%203.28%203H19v-1.23a.5.5%200%2001.8-.4l2.93%202.23a.5.5%200%20010%20.8l-2.92%202.23a.5.5%200%2001-.81-.4V17h-3.5c-1.7%200-2.75-.84-4.5-3.26C9.25%2016.16%208.2%2017%206.5%2017H4a1%201%200%20010-2h2.5c.9%200%201.7-.76%203.28-3C8.21%209.76%207.4%209%206.5%209H4a1%201%200%20110-2h2.5c1.7%200%202.75.84%204.5%203.26C12.75%207.84%2013.8%207%2015.5%207H19V5.77c0-.28.22-.5.5-.5z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}

.button_bottom_wrap .shuffle_active{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%232688eb%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M19.5%205.26a.5.5%200%2001.3.1l2.93%202.24a.5.5%200%20010%20.8l-2.92%202.23a.5.5%200%2001-.81-.4V9h-3.5c-.9%200-1.7.76-3.28%203%201.57%202.24%202.39%203%203.28%203H19v-1.23a.5.5%200%2001.8-.4l2.93%202.23a.5.5%200%20010%20.8l-2.92%202.23a.5.5%200%2001-.81-.4V17h-3.5c-1.7%200-2.75-.84-4.5-3.26C9.25%2016.16%208.2%2017%206.5%2017H4a1%201%200%20010-2h2.5c.9%200%201.7-.76%203.28-3C8.21%209.76%207.4%209%206.5%209H4a1%201%200%20110-2h2.5c1.7%200%202.75.84%204.5%203.26C12.75%207.84%2013.8%207%2015.5%207H19V5.77c0-.28.22-.5.5-.5z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat, rgba(0, 28, 61, 0.08);
}

.button_bottom_wrap .repeat{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%2399a2ad%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20.5%2012a1%201%200%20011%201c0%203.05-1.95%205-5%205H9.02v1.75c0%20.26-.14.35-.33.24l-.06-.04-3.47-2.65c-.21-.16-.22-.43%200-.6l3.47-2.65c.2-.16.39-.08.39.2V16h7.48c1.88%200%202.92-.98%203-2.8V13a1%201%200%20011-1zm-5.1-7.95l3.46%202.65c.21.17.2.44%200%20.6l-3.47%202.65c-.21.17-.39.08-.39-.2V8H7.5c-1.88%200-2.92.98-3%202.8v.2a1%201%200%2001-2%200c0-3.05%201.95-5%205-5H15V4.25c0-.28.18-.36.4-.2z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat;
}

.button_bottom_wrap .repeat_active{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%232688eb%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20.5%2012a1%201%200%20011%201c0%203.05-1.95%205-5%205H9.02v1.75c0%20.26-.14.35-.33.24l-.06-.04-3.47-2.65c-.21-.16-.22-.43%200-.6l3.47-2.65c.2-.16.39-.08.39.2V16h7.48c1.88%200%202.92-.98%203-2.8V13a1%201%200%20011-1zm-5.1-7.95l3.46%202.65c.21.17.2.44%200%20.6l-3.47%202.65c-.21.17-.39.08-.39-.2V8H7.5c-1.88%200-2.92.98-3%202.8v.2a1%201%200%2001-2%200c0-3.05%201.95-5%205-5H15V4.25c0-.28.18-.36.4-.2z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat, rgba(0, 28, 61, 0.08);
}

.button_bottom_wrap .repeat_one_active{
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20style%3D%22color%3A%232688eb%22%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m12.4754%209.13192c.2663.1638.4285.45396.4285.76649v4.20209c0%20.4971-.4031.9-.9003.9-.4973%200-.9004-.4029-.9004-.9v-2.7396c-.4428.2197-.9807.0412-1.20382-.4007-.22408-.4437-.04589-.98497.39802-1.20897l1.3004-.65625c.2791-.14084.6114-.12686.8776.03694z%22%20fill-rule%3D%22evenodd%22%2F%3E%3Cpath%20d%3D%22m2.00464%2012c0-3.25844%202.64246-5.89996%205.9021-5.89996h10.02596l-.5638-.56364c-.3516-.35148-.3516-.92132%200-1.2728.3516-.35147.9216-.35147%201.2732%200l2.1008%202.09998c.3516.35147.3516.92132%200%201.27279l-2.1008%202.09998c-.3516.35145-.9216.35145-1.2732%200-.3516-.35147-.3516-.92132%200-1.2728l.5637-.56351h-10.02586c-2.26517%200-4.10146%201.83563-4.10146%204.09996v.0967c0%20.4971-.40309.9-.90032.9s-.90032-.4029-.90032-.9z%22%2F%3E%3Cpath%20d%3D%22m21.1043%2011.0033c.4973%200%20.9003.403.9003.9v.0967c0%203.2585-2.6424%205.9-5.9021%205.9h-10.02836l.56372.5636c.35159.3514.35159.9213%200%201.2727-.3516.3515-.92165.3515-1.27325%200l-2.10072-2.0999c-.3516-.3515-.3516-.9213%200-1.2728l2.10072-2.1c.3516-.3515.92165-.3515%201.27325%200%20.35159.3515.35159.9213%200%201.2728l-.56384.5636h10.02848c2.2652%200%204.1015-1.8356%204.1015-4.1v-.0967c0-.497.4031-.9.9003-.9z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') center / 24px no-repeat, rgba(0, 28, 61, 0.08);
}

.button_bottom_wrap .shuffle,
.button_bottom_wrap .shuffle_active,
.button_bottom_wrap .repeat,
.button_bottom_wrap .repeat_active,
.button_bottom_wrap .repeat_one_active{
    width: 48px;
    height: 36px;
    border-radius: 8px;
}

.button_bottom_wrap .shuffle,
.button_bottom_wrap .shuffle_active{
    float: left;
}

.button_bottom_wrap .repeat,
.button_bottom_wrap .repeat_active,
.button_bottom_wrap .repeat_one_active{
    float: right;
}

.buttons_wrap .add_track,
.buttons_wrap .add_more{
    display: none;
}

.buttons_wrap .add_more,
.buttons_wrap .add_more:active {
	transform: rotate(90deg);
}

.buttons_wrap .prev{
    float: left;
}

.buttons_wrap .next {
    float: right;
}

.buttons_wrap .popup_play,
.buttons_wrap .popup_pause{
    display: inline-block;
}

@keyframes altr{
    0% {
        background-position:0 0
    }
    to {
        background-position: 9px 0
    }
}

@keyframes appear-bottom {
    0% {
        transform: translate3d(0,100%,0)
    }

    to {
        transform: translate3d(0,0,0)
    }
}