.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;
}

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

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

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

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

.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;
    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{
    position: absolute;
    height: 2px;
    background: #4986cc;
    top: 11px;
}
.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;
    height: 12px;
    border-radius: 2px;
    background: #4986cc;
    position: absolute;
    top: 6px;
    margin-left: -2px;
}

.progress_transition_circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4986cc;
    position: absolute;
    top: 2px;
    margin-left: -10px;
}
.footer_player_wrapper{
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
}
.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;
    padding-right: 48px;
    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;
}

.popup_player_wrapper{
    z-index: 300;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.5);
    top: 0;
    display: none;
}
.popup_player_content{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 -2px 6px 2px rgba(0, 0, 0, 0.05);
    padding: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    width: 360px;
    margin-top: -150px;
    margin-left: -200px;
    word-break: break-word;
    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;
}
@media (max-width: 420px) {
    .popup_player_content{
        width: calc(100% - 60px);
        margin-left: 10px;
        margin-right: 10px;
        left: 0;
    }
    .buttons_wrap{
        margin: 20px 0 !important;
    }
}
.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 .cover{
    width: 48px;
    height: 48px;
    border-radius: 6px;
    float: left;
}
.popup_player_content .info{
    padding-left: 12px;
    padding-right: 30px;
    position: relative;
    overflow: hidden;
    height: 21px;
}
.popup_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;
    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 12px 0 12px;
}
.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 .prev:hover,
.buttons_wrap .next:hover,
.buttons_wrap .popup_play:hover,
.buttons_wrap .popup_pause:hover{
    cursor: pointer;
}
.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 .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;
}
.button_bottom_wrap > div:hover{
    cursor: pointer;
}
.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 .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
    }
}