*{margin:0;border:0;padding:0;outline:0;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body,html{height:100%}
body{font-size:16px;font-weight:400;color:#FFF;background-color:#f4f4f5;text-align:left}
a{color:#FFF;text-decoration:none}
a:hover{color:#FFF;text-decoration:none}
ol,ul{list-style:none}
table{border-spacing:0;border-collapse:collapse}
blockquote{quotes:none}
img{border:none}
header,nav,section,article,aside,footer{display:block}
input,select,textarea{font-size:100%;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}
textarea{font-size:16px/22px}
button{font-size:100%}
button:hover{cursor:pointer}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
::selection{background:#24c8e5;color:#FFF;text-shadow:none}
::-moz-selection{background:#24c8e5;color:#FFF;text-shadow:none}
body,input,select,textarea,button{font-family:'Inter',sans-serif}
body{background: var(--tg-theme-secondary-bg-color); color: var(--tg-theme-text-color);}
.pwrap{padding:30px 0}
.img_main_cont{text-align: center;}
.img_main_cont img{max-width: 80% !important;padding-top: 20px;padding-bottom: 20px;}
.message_bottom{margin: 20px 20px 0px 20px;text-align: center;font-family: 'Philosopher', sans-serif;}
.main_block{position: relative;
    /* background: var(--tg-theme-bg-color); */
    background: white;
    width: 90%;
    min-height: 300px;
    border-radius: 10px;
    -webkit-transform: translate(5.5%, 50%);}
.loading-container {
	text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    /* Style for the spinner */
    .loading-circle {
        border: 6px solid #f3f3f3; /* Light gray background color */
        border-top: 6px solid #925cd6; /* Blue color for the top part */
        border-radius: 50%; /* Make the spinner circular */
        width: 30px; /* Size of the spinner */
        height: 30px; /* Size of the spinner */
        animation: spin 1s linear infinite; /* Animation */
        margin-right: 10px;
    }

    /* Animation for spinning the circle */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

.mwrap{max-width:1200px;margin:0 auto;box-shadow:0 0 20px 0 rgba(255 255 255 / 10%);border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;position:relative}
header{width:100%;height:110px;border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;border-bottom:1px solid #262d72}
header .logo{float:left;margin:30px 40px}
header .logo a{display:block;background:url(/public/img/allimg.png) no-repeat 0 0;background-size:247px;width:247px;height:50px;text-indent:-9999px}
header .search{float:left;width:493px;position:relative;background-color:#0f042d;padding:8px 16px 8px 8px;margin-top:35px;border-radius:24px;-moz-border-radius:24px;-webkit-border-radius:24px}
header .search form{display:table;width:100%}
header .search form>div{display:table-cell}
header .search form>div:first-child,header .search form>div:first-child input{width:100%}
header .search_field{background-color:#0f042d;color:#a08fc3;font-weight:400;height:24px;padding:0 8px;cursor:text;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;transition:.1s}
header .search_field::placeholder{color:#a08fc3}
header .search_field:hover,header .search_field:focus{outline:0}
header .search_button{background:url(/public/img/allimg.png) no-repeat 0 -50px;background-size:247px;width:24px;height:24px;cursor:pointer}
header .search_mobile{display:none}
header .search_result{position:absolute;top:100%;left:0;right:0}
header .search_result .sr{width:100%;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin-top:10px;padding-top:6px}
header .search_result span{padding:8px 16px 0;cursor:pointer;display:block}
header .search_result a.all{color:#a08fc3}
header .search_result a.all span{padding-bottom:14px}
header .search_result a:hover{color:#f7355e}
header .bookmark{float:right;margin:44px 40px 0 30px}
header .bookmark:hover{cursor:pointer}
header .bookmark i{display:inline-block;background:url(/public/img/allimg.png) no-repeat -24px -50px;background-size:247px;width:24px;height:24px}
header .bookmark span{display:none}
.bookmark_overlay{display:none;position:fixed;z-index:2;top:0;left:0;height:100%;width:100%}
.bookmark_overlay.show{display:block}
.bookmark_modal{height:auto;position:fixed;right:0;top:-150px;width:300px;transform:translate(-50%,0);background-color:#1c0950;padding:20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;z-index:3;display:block}
.bookmark_modal_close{position:absolute;top:20px;right:20px;display:block;width:24px;height:24px;background:url(/public/img/allimg.png) no-repeat -48px -50px;background-size:247px;z-index:4;cursor:pointer}
.bookmark_modal_title{margin-bottom:20px;font-size:14px}
.bookmark_modal_text{font-size:22px}
.container{clear:both}
.left_content{float:left;width:100%;margin-right:-340px;overflow:hidden}
.content{margin:70px 0px 70px 40px}
.rightbar{width:300px;float:right;overflow:hidden;margin:105px 40px 0 0}
h1{font-size:38px;font-weight:700;margin-bottom:30px}
h2{font-size:22px;font-weight:700;margin-bottom:15px}
.mp_soc{margin-bottom:30px}
.mp_info{overflow:hidden;margin-bottom:30px}
.mp_info_left{float:left;width:192px;margin-right:30px}
.mp_info_left img{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;width:192px;height:192px}
.mp_info_right{float:right;width:calc(100% - 222px)}
.mp_info_right>ul>li{position:relative;padding:10px 10px 10px 200px;font-size:14px;border-bottom:1px dashed #262d72}
.mp_info_right>ul>li:first-child{border-top:1px dashed #262d72}
.mp_info_right>ul>li>span:first-child{position:absolute;left:10px;top:10px;color:#a08fc3}
.mp_description{margin-bottom:30px;font-size:14px;line-height:1.8}
.mp_play,.mp_down{float:left;width:calc(50% - 15px);margin-bottom:30px}
.mp_play{margin-right:15px}
.mp_down{margin-left:15px}
.mp_play .play_item,.mp_down a{display:block;padding:10px 10px 10px 90px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:relative;height:96px}
.mp_play .play_item{border:3px solid #f7355e}
.mp_down a{border:3px solid #24c8e5}
.mp_play .play_item:hover{cursor:pointer;background-color:#262d72}
.mp_down a:hover{background-color:#262d72}
.mp_play_img,.mp_down_img{position:absolute;left:10px;top:10px;width:70px;height:70px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.mp_play_img{background-color:#f7355e}
.mp_down_img{background-color:#24c8e5}
.mp_play_img i,.mp_down_img i{display:block;width:36px;height:36px;margin:17px;background-image:url(/public/img/allimg.png);background-repeat:no-repeat;background-size:247px}
.mp_play_img i{background-position:0 -74px}
.played .mp_play_img i{background-position:-36px -74px}
.mp_down_img i{background-position:-72px -74px}
.mp_play_title,.mp_down_title{font-size:24px;font-weight:700;margin:7px 0 5px}
.mp_play_artist,.mp_down_artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp_stars{margin-bottom:30px;clear:both}
.mp_stars_img{width:189px;height:32px;background:url(/public/img/star_empty.png) repeat-x 0 0;background-size:contain;display:inline-block}
.mp_stars_img div{height:32px;background:url(/public/img/star_full.png) repeat-x 0 0;background-size:contain}
.mp_stars_score{display:inline-block;margin:2px 0 0 10px;font-size:24px;font-weight:700}
.mp_stars_addstar{display:inline-block;margin-left:30px}
.mp_stars_addstar button{background-color:#0f042d;color:#a08fc3;padding:8px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.mp_stars_addstar button:hover{background-color:#0f042d}
.addstar{display:none;background-color:#f3f2f6;padding:20px;margin-top:20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.addstar .ablock{float:left;width:18%;margin-right:2.5%;margin-bottom:20px;padding:5px;border:1px solid #9B9DA8;color:#9B9DA8;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.addstar .ablock:last-child{margin-right:0}
.addstar .astars{display:inline-block;width:80px;height:14px;background:url(/public/img/star_mini_empty_na.png) repeat-x 0 0;background-size:contain}
.addstar .astars div{height:14px;background:url(/public/img/star_mini_full_na.png) repeat-x 0 0;background-size:contain}
.addstar .ablock:hover{cursor:pointer}
.addstar .ablock:hover,.addstar .ablock.active{border:1px solid #f4c319;background-color:#FFF;color:#0f042d}
.addstar .ablock:hover .astars,.addstar .ablock.active .astars{background-image:url(/public/img/star_mini_empty.png);background-size:contain}
.addstar .ablock:hover .astars div,.addstar .ablock.active .astars div{background-image:url(/public/img/star_mini_full.png);background-size:contain}
.addstar .atext{margin:2px 0 0 2px}
.addstar .abutton input{background-color:#24c8e5;color:#FFF;padding:8px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.addstar .abutton input:hover{background-color:#24c8e5;cursor:pointer}
.mp_slova{margin-bottom:30px;line-height:1.8}
.content_tracklist a{display:block;padding:10px 10px 10px 60px;font-size:14px;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin-bottom:10px;position:relative;height:60px}
.content_tracklist a:hover{background-color:#262d72}
.content_tracklist .track_img{position:absolute;left:10px;top:10px;width:40px;height:40px;background-color:#5e35b2;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.content_tracklist .track_img i{display:block;width:24px;height:24px;margin:8px;background:url(/public/img/allimg.png) no-repeat -96px -50px;background-size:247px}
.content_tracklist .track_title{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:11px;width:45%}
.content_tracklist .track_artist{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:11px;width:45%;color:#a08fc3}
.content_tracklist .track_time{position:absolute;right:10px;top:21px;color:#777}
.paginator{clear:both;margin-top:20px;font-size:22px;font-weight:700}
.paginator li{display:inline-block;margin-bottom:15px}
.paginator li.active{display:inline-block;padding:0 10px;color:#24c8e5}
.paginator li a{display:block;padding:0 10px}
.paginator li a:hover{color:#f7355e}
.contact51{float:left;width:49%;margin-right:2%}
.contact52{float:left;width:49%}
.contactfields i{color:#f7355e;font-style:normal}
.contact-input,.contact-textarea,.contact-submit{margin:5px 0 15px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.contact-input,.contact-textarea{padding:5px;background-color:#f3f2f6;width:100%}
.contact-textarea{resize:none}
.contact-submit{padding:8px 10px;background-color:#24c8e5;color:#FFF}
.contact-submit:hover,.contact-submit:focus,.contact-submit:active{cursor:pointer;background-color:#24c8e5}
.rightbar_element{margin-bottom:30px}
.rightbar_title{font-size:22px;font-weight:700;margin-bottom:10px}
.rightbar_tracklist a{display:block;padding:10px 10px 10px 60px;font-size:14px;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin-bottom:10px;position:relative}
.rightbar_tracklist a:hover{background-color:#262d72}
.rightbar_tracklist .track_img{position:absolute;left:10px;top:10px;width:40px;height:40px;background-color:#5e35b2;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.rightbar_tracklist .track_img i{display:block;width:24px;height:24px;margin:8px;background:url(/public/img/allimg.png) no-repeat -96px -50px;background-size:247px}
.rightbar_tracklist .track_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 5px}
.rightbar_tracklist .track_artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a08fc3}
.rightbar_index_tracklist a{display:block;padding:10px;font-size:14px;background-color:#24c8e5;background:linear-gradient(to bottom,rgba(36,200,229,1) 0%,rgba(36,200,229,0.5) 100%);color:#FFF;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin-bottom:10px;height:100px}
.rightbar_index_tracklist a:hover{color:#FFF}
.rightbar_index_tracklist .track_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:42px 0 5px}
.rightbar_index_tracklist .track_artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a6cad0}
footer{clear:both;width:100%;overflow:hidden;border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;font-size:14px;border-top:1px solid #262d72}
footer .footer_main{margin:30px 40px 0;overflow:hidden}
footer .footer_about{float:left;width:65%;margin-right:30px}
footer .footer_about p{margin-bottom:10px}
footer .footer_about p.color{color:#a08fc3}
footer .footer_feedback{float:left;margin-right:30px}
footer .footer_feedback a{display:block;padding:7px;background-color:#0f042d;color:#a08fc3;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
footer .footer_age{float:left;margin-right:30px;font-size:20px;padding:4px 4px 3px;background-color:#0f042d;color:#a08fc3;overflow:hidden;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
footer .footer_counters{float:right}
footer .footer_info{clear:both;margin:10px 40px 30px;color:#a08fc3}
.scroll{position:fixed;top:calc(50% - 20px);left:10px;z-index:1;display:none;width:40px;height:40px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#1c0950}
.scroll:hover{cursor:pointer;background-color:#1c0950}
.scroll i{display:inline-block;margin:9px 10px 0 8px;width:24px;height:24px;background:url(/public/img/allimg.png) no-repeat -72px -50px;background-size:247px}
.scroll.up i{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.scroll span{display:none}
.aplayer{width:100%;position:fixed;left:0;bottom:0;z-index:100;background-color:#24c8e5;box-shadow:0 -15px 30px rgba(255 255 255 / 10%);}
/*.audioplayer{max-width:1140px;margin:0 auto;height:70px;padding:15px 20px}*/
.ap-bar{position:absolute;left:0;right:0;top:-5px;height:5px;background-color:#0f042d;overflow:hidden}
.ap-bar-loaded{position:absolute;left:0;top:0;height:100%;background-color:rgba(0,0,0,0.1);border-radius:10px 10px 0 0}
.ap-bar-played{position:absolute;left:0;top:0;height:100%;z-index:98;border-radius:0;background-color:#FFF}
.ap-info{float:left;position:relative;width:350px;font-size:14px;padding-left:30px}
.ap-info-img{position:absolute;left:0;top:0;width:40px;height:40px;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.ap-info-img i{display:block;width:24px;height:24px;margin:8px;background:url(/public/img/allimg.png) no-repeat -120px -50px;background-size:247px}
.ap-info-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 5px;color:#0f042d}
.ap-info-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#5e35b2}
.ap-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px}
.ap-btn-playpause{float:left;cursor:pointer;width:40px;height:40px;border-radius:50%;display:block;margin:0 10px;background-color:#0f042d}
.ap-btn-playpause i{display:block;width:16px;height:16px;margin:12px;background-image:url(/public/img/allimg.png);background-repeat:no-repeat;background-size:247px;background-position:-16px -110px}
.audioplayer-stopped .ap-btn-playpause i{background-position:0 -110px}

.ap-time{float:right;font-size:11px;opacity:.8;margin-left:20px;line-height:40px;color:#0f042d}
.ap-time-current,.ap-time-duration{float:left}
.ap-time-current:after{content:'/';display:inline;margin:0 6px}
.ap-download{float:right;margin:5px 20px 0;display:block;width:30px;height:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#0f042d}
.ap-download i{display:block;width:16px;height:16px;margin:7px;background:url(/public/img/allimg.png) no-repeat -52px -110px;background-size:247px}
.ap-volume{float:right;position:relative;z-index:99;margin-top:5px;margin-right:30px}
.ap-volume-change{position:absolute;left:0;top:0;width:30px;height:30px;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.ap-volume-change i{display:block;width:16px;height:16px;margin:7px;background:url(/public/img/allimg.png) no-repeat -68px -110px;background-size:247px}
.audioplayer-muted .ap-volume-change i{background-position:-84px -110px}
.ap-volume-change:hover{cursor:pointer}
.ap-volume-adjust{position:absolute;left:0;bottom:100%;width:30px;height:100px;background-color:#0f042d;box-shadow:0 0 10px rgba(0,0,0,0.5);padding:10px;display:none}
.ap-volume-adjust > div{width:10px;height:80px;border-radius:0;position:relative;cursor:pointer;background-color:rgba(0,0,0,0.1);overflow:hidden}
.ap-volume-adjust > div > div{width:100%!important;background-color:#FFF;position:absolute;left:0;bottom:0;z-index:98}
.ap-volume:hover .ap-volume-adjust{display:block}
.ap-volume:hover .ap-volume-change{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}
/*.ap-btn-playpause:hover,.ap-btn-prev:hover,.ap-btn-next:hover,.ap-download:hover,.ap-volume-change:hover{background-color:#f7355e}*/
@media screen and (max-width:1279px) {
.pwrap{padding:10px}
.bookmark_modal{transform:translate(-10px,0)}
}
@media screen and (max-width:1023px) {
header{height:70px}
header .logo{margin:10px}
header .search{display:none;width:auto}
header .search_mobile{display:block;background:url(allimg.png) no-repeat 0 -50px;background-size:247px;position:absolute;top:23px;right:15px;width:24px;height:24px;cursor:pointer}
header.s .search{display:block;margin:15px 44px 0 10px}
header.s .logo{display:none}
header.s .search_mobile{background-position:-48px -50px;top:26px}
header .bookmark{display:none}
.left_content{float:none;margin-right:0}
.content{margin:15px 10px 10px}
.rightbar{width:auto;float:none;margin:10px}
h1{font-size:32px;margin-bottom:20px}
.mp_soc{margin-bottom:20px}
.mp_info{margin-bottom:20px}
.mp_info_left{display:none}
.mp_info_right{float:none;width:100%}
.mp_info_right>ul>li{padding:10px 10px 10px 150px}
.mp_description{margin-bottom:20px}
.mp_play,.mp_down{float:none;width:100%;margin-bottom:20px}
.mp_play{margin-right:0;margin-bottom:20px}
.mp_down{margin-left:0}
.mp_stars{margin-bottom:20px}
.mp_slova{margin-bottom:20px}
.paginator{margin-top:10px}
.addstar{padding:10px}
.addstar .ablock{margin-bottom:10px}
.addstar .astars{display:none}
.addstar .atext{text-align:center;font-weight:700;margin:0}
.addstar .atext span{display:none}
.rightbar_element{margin-bottom:20px}
footer .footer_main{margin:10px 10px 0}
footer .footer_about{float:none;width:100%;margin-right:0}
footer .footer_feedback{margin-right:20px}
footer .footer_age{margin-right:20px}
footer .footer_info{margin:10px}
.scroll{display:none!important}
.ap-info{width:270px}
.ap-download{margin-right:0}
.ap-volume{display:none}
}
@media screen and (max-width:767px) {
.ap-info-title,.ap-info-artist{display:none}
.ap-info.active{position:absolute;left:20px;right:20px;bottom:0;height:55px;z-index:97;min-width:100%;background-color:#24c8e5}
.ap-info.active .ap-info-title,.ap-info.active .ap-info-artist{display:block;width:230px}
.ap-btn{left:80px;transform:translate(0,-50%)}
}



/* RemixDesign | woaichidapi@163.com | Redesigned by JimmyCheung */
.error_mess{
	color: red;
	padding: 15px;
}
.success_mess{
	color: green;
	padding: 15px;
}
.audioplayer {
    max-width: 980px;
    width: calc(100% - 30px);
    margin: 0 auto;
    height: 80px;
    color: #ffffff;
}
.fx-row{
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.fx-middle {
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.ap-img{width:40px;height:40px;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.ap-img img{display:block;width:24px;height:24px;margin:8px;}
.ap-btns{
	width: 130px;
    height: 46px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -23px 0 0 -65px;
}
.ap-prev, .ap-next{float:left;cursor:pointer;width:30px;height:30px;margin-top:5px;border-radius:50%;background-color:#0f042d}
.ap-prev span,.ap-next span{display:block;width:10px;height:10px;margin:10px;background-image:url(/public/img/allimg.png);background-repeat:no-repeat;background-size:247px}
.ap-prev span{background-position:-32px -110px}
.ap-next span{background-position:-42px -110px}
.audioplayer-playpause a {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    display: block;
    font-size: 14px;
    position: relative;
    background-color:#0f042d
}
/*.audioplayer-playpause{float:left;cursor:pointer;width:40px;height:40px;border-radius:50%;display:block;margin:0 10px;background-color:#0f042d}*/
.audioplayer-playpause span{display:block;width:16px;height:16px;margin:16px;background-image:url(/public/img/allimg.png);background-repeat:no-repeat;background-size:247px;}
.audioplayer-playpause span.fa-pause{background-position:-16px -110px;margin: 15px !important;}
.audioplayer-playpause span.fa-play{background-position:0 -110px;}
.audioplayer .audioplayer-playpause a:hover, .ap-prev:hover,.ap-next:hover,.ap-download:hover,.audioplayer-volume-button:hover {
    background-color:#f7355e;
}
.audioplayer-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 2px;
    background-color: #F4F1EE;
}
.audioplayer-bar-loaded {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}
.audioplayer-bar-played {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 10;
    background-color: #ffffff;
}
.audioplayer-volume{float:right;position:relative;z-index:99;margin-top:-20px;margin-right:30px}
.audioplayer-volume-button{position:absolute;left:0;top:0;width:30px;height:30px;background-color:#0f042d;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.audioplayer-volume-button a{display:block;width:16px;height:16px;margin:7px;background:url(/public/img/allimg.png) no-repeat -68px -110px;background-size:247px}

.audioplayer-volume-adjust{position:absolute;left:0;bottom:100%;width:30px;height:100px;background-color:#0f042d;box-shadow:0 0 10px rgba(0,0,0,0.5);padding:10px;display:none}
.audioplayer-volume-adjust > div{width:10px;height:80px;border-radius:0;position:relative;cursor:pointer;background-color:rgba(0,0,0,0.1);overflow:hidden}
.audioplayer-volume-adjust > div > div{width:100%!important;background-color:#FFF;position:absolute;left:0;bottom:0;z-index:98}
.audioplayer-volume:hover .audioplayer-volume-adjust{
	display: block;
}
.audioplayer-muted .audioplayer-volume-button a{
	background-position:-84px -110px !important;
}
.audioplayer:hover .audioplayer-bar{
	height: 10px;
}
.audioplayer-bar-played:before {
    content: '';
    background-color: #ffffff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    right: -3px;
    top: 50%;
    margin-top: -6px;
    z-index: 3;
}
.active-player a{
	background-color: #2199c0;
}






.audioplayer-playpause {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.audioplayer:not(.audioplayer-playing) .audioplayer-playpause {
    background: rgba(91, 130, 255, 0);
    border: 1px solid #5B82FF;
}




.audioplayer-playing .audioplayer-playpause a::before, .audioplayer-playing .audioplayer-playpause a::after {
    content: '';
    width: 4px;
    height: 14px;
    background-color: #FD4F1A;
}

.audioplayer-time {
    display: flex;
    width: 40px;
    justify-content:center;
    font-size: 12px;
    color: rgba(51, 51 ,51, .6)
}

.audioplayer-time-current {
    margin-left: 24px;
}

.audioplayer-time-duration {
    margin-right: 24px;
}


.audioplayer-mute .audioplayer-volume-button a {
    background-color: #FD4F1A;
}

.audioplayer-mute .audioplayer-volume-button a:before {
    border-right: 9px solid #FD4F1A;
}

/* responsive | you can change the max-width value to match your theme */

@media screen and (max-width: 679px) {
    .audioplayer-volume-adjust {
        display: none;
    }
}