body{
    background-color: rgb(0,0,0);
    opacity: 0.9;
}
.audio-player{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
}
.no-flexbox .audio-player{
    display:none;
}
.flex-wrap{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:nowrap;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}
.flex-item {
    -webkit-flex-basis:80px;
}
.jp-controls.flex-item{
    -webkit-flex-basis:150px;
    -ms-flex-preferred-size:150px;
    flex-basis:150px;
}
.jp-now-playing.flex-item{
    -webkit-flex-basis:350px;
    -ms-flex-preferred-size:350px;
    flex-basis:350px;
    -webkit-box-flex:2;
    -webkit-flex-grow:2;
    -ms-flex-positive:2;
    flex-grow:2;
    -webkit-flex-shrink:2;
    -ms-flex-negative:2;
    flex-shrink:2;
}
.jp-progress-container.flex-item{
    -webkit-flex-basis:145px;
    -ms-flex-preferred-size:145px;
    flex-basis:145px;
}
.jp-toggles.flex-item{
    -webkit-flex-basis:130px;
    -ms-flex-preferred-size:130px;
    flex-basis:130px;
}
.jp-volume-controls.flex-item{
    -webkit-flex-basis:155px;
    -ms-flex-preferred-size:155px;
    flex-basis:155px;
}
.jp-audio,.jp-audio-stream,.jp-video{
    background:rgb(0,0,0);
    opacity: 0.8;
    padding:10px 20px;
    position:relative;
}
.jp-playlist{
    display:none;
}
.jp-interface .jp-controls button,.jp-interface .jp-toggles button,.jp-interface .jp-volume-controls button{
    background:none;
    border:none;
    outline:none;
    color:#7b7c8b;
    line-height:24px;
    font-weight:600;
    -webkit-transition-delay:0;
    transition-delay:0;
    -webkit-transition-property:all;
    -webkit-transition-duration:0.2s;
    -webkit-transition-timing-function:ease-in-out;
    transition-property:all;
    -webkit-transition-duration:0.2s;
    transition-duration:0.2s;
    -webkit-transition-timing-function:ease-in-out;
    transition-timing-function:ease-in-out;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    font-size:20px;
    padding:0 5px;
}
.jp-interface .jp-controls .jp-play i,.jp-interface .jp-controls .jp-previous i,.jp-interface .jp-controls .jp-next i{
    font-size:23px;
    color:#FFF;
}
.jp-interface .jp-controls .jp-play{
    border: 3px solid black;
    border-radius:50%;
    width:42px;
    height:42px;
    margin:0 10px;
}
.jp-interface .jp-controls .jp-play i{
    padding-left:5px;
    padding-top:5px;
}
.jp-audio.jp-state-playing .jp-play i{
}
.jp-audio.jp-state-playing .jp-play i:before{
    content: "\f04c";
}
.jp-progress-container,.jp-volume-bar-container{
    height:30px;
    padding:10px;
}
.jp-progress,.jp-seek-bar,.jp-play-bar,.jp-volume-bar,.jp-volume-bar-value{
    height:8px;
    border-radius:1px;
}
.jp-progress{
    margin:0 50px;
    background-color:#2b2b2b;
    border-radius:5px;
}
.jp-seek-bar,.jp-volume-bar{
    cursor:pointer;
    background-color:#2b2b2b;
    border-radius:5px;
}
.jp-play-bar{
    float:left;
    position:relative;
    background-color:#00c85f;
    border-radius:5px;
    overflow:visible;
}
.jp-volume-bar-value{
    float:left;
    position:relative;
    background-color:#aaaaaa;
}
.jp-progress .bullet,.jp-volume-bar .bullet{
    position:absolute;
    content:"";
    top:-5px;
    right:-7px;
    height:18px;
    width:18px;
    background:#ffffff;
    border-radius:50%;
}
.jp-time-holder{
    position:relative;
    top:0;
    color:#979797;
    font-size:12px;
}
.jp-time-holder .jp-current-time{
    position:absolute;
    right:0;
    top:-3px;
}
.jp-time-holder .jp-duration{
    position:absolute;
    right:0;
    top:-3px;
}
.jp-now-playing{
    padding:0 10px;
}
.jp-track-name{
    color:#c9c9c9;
    font-size:16px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width:445px;
}
.jp-artist-name{
    color:#6d6d6d;
    font-size:14px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width:440px;
}
.jp-toggles button{
    margin:0 3px;
}
.jp-toggles button:hover{
    color:#FFF;
}
.jp-state-looped .jp-toggles .jp-repeat,.jp-state-shuffled .jp-toggles .jp-shuffle,.jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist{
    color:#00c85f;
}
.jp-volume-controls button{
    float:left;
}
.jp-volume-controls .jp-volume-bar{
    margin-left:40px;
    margin-top:8px;
}
.jp-state-muted .jp-mute i:before{
    content:"\f026";
}
.jp-volume-bar,.jp-volume-bar-value{
    border-radius:5px;
}
.jp-state-no-volume .jp-volume-controls{
    display:none;
}
.jp-playlist{
    position:absolute;
    right:65px;
    bottom:100%;
    background-color: rgb(0,0,0);
    opacity: 0.8;
    padding: 20px 25px;
    width:400px;
}
.jp-playlist ul{
    padding:0;
    margin:0;
    max-height:200px;
    overflow:auto;
}
.jp-playlist li{
    list-style:none;
}
.jp-playlist li a{
    color:#c9c9c9;
    display:block;
    padding:10px 0;
    outline:none;
    border-bottom:1px solid #1F1F1F;
}
.jp-playlist li:last-child a{
    border-bottom:0;
}
.jp-playlist li a:hover,.jp-playlist li a:focus,.jp-playlist li a:active{
    color:#00c85f;
    text-decoration:none;
}
.jp-playlist li a span{
    color:#6d6d6d;
}
@media (max-width:992px) {
    
}
@media (max-width:767px) {
    .jp-volume-bar,.jp-volume-bar .bullet,.jp-time-holder{
        display:none;
    }
    .jp-progress-container.flex-item{
        -webkit-flex-basis:140px;
        -ms-flex-preferred-size:140px;
        flex-basis:140px;
        padding:12px 15px;
    }
    .jp-progress .bullet{
        right:-10px;
    }
    .jp-volume-controls.flex-item{
        -webkit-flex-basis:33px;
        -ms-flex-preferred-size:33px;
        flex-basis:33px;
    }
    .jp-progress{
        margin:0;
    }
    .jp-interface .jp-controls .jp-play{
        margin:0 3px;
    }
    .jp-interface .jp-controls .jp-play i,.jp-interface .jp-controls .jp-previous i,.jp-interface .jp-controls .jp-next i{
        font-size:16px;
    }
    .jp-interface .jp-controls .jp-play{
        width:42px;
        height:42px;
    }
    .jp-interface .jp-controls .jp-play i{
        padding-left:3px;
        padding-top:0;
    }
    .jp-state-playing .jp-interface .jp-controls .jp-play i{
        padding-left:0;
    }
    .jp-controls.flex-item{
        -webkit-flex-basis:100px;
        -ms-flex-preferred-size:100px;
        flex-basis:100px;
    }
}
@media (max-width:480px) {
    .jp-toggles,.jp-playlist{
        display: none;
    }
    .jp-track-name{
        color:#c9c9c9;
        font-size:16px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        max-width:145px;
    }
    .jp-artist-name{
        color:#6d6d6d;
        font-size:14px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        max-width:140px;
    }
}