.wplayer{
    width:100%;
    position:fixed;
    left:0;
    bottom: 10px;
    z-index:990;
    pointer-events:none;
}

.audioplayer{
    pointer-events:auto;

    margin:8px auto 0px;
    width:min(1200px, calc(100% - 16px));
    height:70px;
    position:relative;
    background:#466bc7;
    color:#fff;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:14px;
    box-shadow:0 -12px 34px rgba(0,0,0,0.22);
    padding:10px 12px 0px 12px;
}

.audioplayer audio{display:none;}

.audioplayer-bar{
    position:absolute;
    left:12px;
    right:12px;
    top:4px;
    height:8px;
    background:rgba(255,255,255,0.20);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    overflow:hidden;
    cursor:pointer;
}

.audioplayer-bar-loaded{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0;
    background:rgba(0,0,0,0.10);
}

.audioplayer-bar-played{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:0;
    z-index:10;
    background:#ffffff;
}

.ap-desc{
    width:360px;
    max-width:calc(50% - 60px);
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.ap-img{
    width:42px;
    height:42px;
    border-radius:12px;
    overflow:hidden;
}

.ap-img img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.ap-info{min-width:0;}

.ap-title{
    font-size:14px;
    line-height:1.15;
    font-weight:600;
    color:#fff;
}

.ap-artist{
    font-size:12px;
    line-height:1.15;
    font-weight:500;
    color:rgba(255,255,255,0.80);
    margin-top:4px;
}

.ap-btns{
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    gap:8px;
}

.audioplayer-playpause a{
    width:42px;
    height:42px;
    line-height:42px;
    text-align:center;
    font-size:16px;
    border-radius:12px;
    display:block;
    background:#ffffff;
    color:#466bc7;
    border:1px solid rgba(0,0,0,0.08);
    transition:transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}

.audioplayer-stopped .audioplayer-playpause a{padding-left:1px;}

.audioplayer-playpause a:hover{
    transform:translateY(-1px);
    opacity:0.96;
}

.ap-prev, .ap-next{
    cursor:pointer;
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.20);
    color:#fff;
    transition:transform .2s ease, background .2s ease, opacity .2s ease;
}

.ap-prev:hover, .ap-next:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.18);
    opacity:0.96;
}

.ap-time{
    margin-left:auto;
    margin-top: 5px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    font-size:12px;
    font-weight:500;
    color:rgba(255,255,255,0.92);
}

.audioplayer-time-current:after{
    content:'/';
    display:inline;
    margin:0 6px;
    color:rgba(255,255,255,0.70);
}

.audioplayer-volume{
    position:relative;
    z-index:100;
    margin-left:10px;
    font-size:16px;
}

.audioplayer-volume-button a{
    width:38px;
    height:38px;
    line-height:38px;
    display:block;
    text-align:center;
    border-radius:12px;
    background:rgba(255,255,255,0.14);
    color:rgba(255,255,255,0.92);
    transition:transform .2s ease, background .2s ease, opacity .2s ease;
}

.audioplayer-volume-button a:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.18);
    opacity:0.96;
}

.audioplayer-muted .fa-volume-up:before{content:'\f6a9';}

.audioplayer-volume-adjust{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(100% + 0px);
    width:44px;
    height:124px;
    padding:10px;
    border-radius:14px;
    background:#2b3c74;
    box-shadow:0 14px 30px rgba(0,0,0,0.30);
    display:none;
}

.audioplayer-volume:hover .audioplayer-volume-adjust{display:block;}

.audioplayer-volume-adjust > div{
    width:10px;
    height:100%;
    margin:0 auto;
    border-radius:999px;
    background:rgba(255,255,255,0.16);
    overflow:hidden;
    position:relative;
    cursor:pointer;
}

.audioplayer-volume-adjust > div > div{
    width:100% !important;
    position:absolute;
    left:0;
    bottom:0;
    z-index:10;
    background:#ffffff;
    border-radius:999px;
}

.wplayer-init .audioplayer-playpause .fas:before{content:'\f04b'; padding-left:1px;}
.player-hide .wplayer{bottom:-88px;}
.player-hide .audioplayer{box-shadow:0 -15px 30px rgba(0,0,0,0); opacity:0; transform:scale(0.92);}
.ap-title, .ap-artist{max-width:260px;}


.audioplayer-playpause a,
.ap-prev, .ap-next,
.audioplayer-volume-button a,
.ap-dl, .ap-repeat, .ap-shuffle{
    width:32px;
    height:32px;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:rgba(255,255,255,0.92);
    cursor:pointer;
    transition:transform .2s ease, opacity .2s ease, border-color .2s ease, color .2s ease;
}

.audioplayer-playpause a:hover,
.ap-prev:hover, .ap-next:hover,
.audioplayer-volume-button a:hover,
.ap-dl:hover, .ap-repeat:hover, .ap-shuffle:hover{
    transform:translateY(-1px);
    color: #fff;
    opacity:0.96;
    border-color:rgba(255,255,255,0.34);
}

.audioplayer-playpause a span,
.ap-prev span, .ap-next span,
.audioplayer-volume-button a span,
.ap-dl span, .ap-repeat span, .ap-shuffle span{
    font-size:15px;
    line-height:1;
}

.audioplayer-playpause a{
    width:34px;
    height:34px;
    border-radius:12px;
    border-color:rgba(255,255,255,0.34);
}

.ap-btns{gap:8px;}  
.ap-dl, .ap-repeat, .ap-shuffle{margin-left:6px;}
.audioplayer-volume{margin-left:8px;}

.audioplayer.ap-repeat-on .ap-repeat,
.audioplayer.ap-shuffle-on .ap-shuffle{
    border-color:#ffffff;
    color:#eeff00;
}

.ap-title{font-weight:600;}
.ap-artist{font-weight:500;}
.ap-time,
.audioplayer-time-current,
.audioplayer-time-duration{font-weight:500;}

.ap-title, .ap-artist{max-width:240px;}

@media screen and (max-width:760px){
    .audioplayer-playpause a,
    .ap-prev, .ap-next,
    .audioplayer-volume-button a,
    .ap-dl, .ap-repeat, .ap-shuffle{
        width:30px;
        height:30px;
        border-radius:10px;
    }
    .audioplayer-playpause a{width:32px; height:32px; border-radius:11px;}
}

@media screen and (max-width: 760px){
    .audioplayer{
        width:calc(100% - 12px);
        height:74px;
        padding:10px 10px 0px 10px;
        border-radius:14px;
    }

    .audioplayer-bar{
        left:10px;
        right:10px;
        height:10px;
        bottom:10px;
    }

    /* .ap-desc{
        position:absolute;
        left:0;
        right:0;
        bottom:100%;
        z-index:5;
        width:auto;
        max-width:none;
        padding:10px;
        margin-bottom:10px;
        border-radius:14px;
        background:#466bc7;
        box-shadow:0 16px 40px rgba(0,0,0,0.18);
        visibility:hidden;
    }

    .ap-desc.is-active{visibility:visible;} */

    .ap-img {
        display: none;
    }

    .ap-desc{
        position:absolute;
        z-index:5;
        width:auto;
    }


    .ap-mob-btn{
        /* display:block !important; */
        cursor:pointer;
        font-size:20px;
        color:#fff;
        opacity:0.92;
        padding:0 6px;
    }

    .ap-btns{
        /* left:50px;
        transform:translate(0,-50%); */
        top:40px;
    }

    .audioplayer-volume{display:none;}

    .ap-time{
        flex-basis:0;
        flex-grow:1;
        max-width:100%;
        min-width:50px;
        justify-content:flex-end;
        padding-right:0;
        font-weight:500;
    }

    .ap-repeat, .ap-shuffle {
        display: none;
    }

    .ap-dl, .ap-repeat, .ap-shuffle{
        width:34px;
        height:34px;
        border-radius:12px;
    }

    .ap-title, .ap-artist{max-width:100%;}
}

@media screen and (max-width: 580px){
    .ap-time {
        display: none;
    }
    .ap-dl {
        margin-left: auto;
    }
}

@media screen and (max-width: 380px){
    /* .ap-btns{left:50px;} */
    /* .ap-next, .ap-prev {display: none;} */
    .audioplayer-playpause a{width:32px; height:32px; line-height:32px;}
    /* .ap-prev, .ap-next, .ap-dl{width:36px; height:36px;} */
}

@media screen and (max-width: 380px){
    .ap-repeat, .ap-shuffle{width:36px; height:36px;}
}