﻿@import url("/css/fonts/css/fontiran.css"); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
body{
	font-family: IRANSans !important;
	font-weight: 400;
	font-size:14px;
}
h1, h2, h3, h4, h5, h6,input, textarea , pre , p , a , select{
	font-family: IRANSans !important;
}
button{
	font-family: IRANSans !important;
}
h1 {
	font-weight: bold;
}
*{
border-style:none;box-sizing:border-box;text-decoration:none;list-style:none;outline:none;
margin:0;padding:0;direction:rtl;transition:all 0.4s ease-in-out;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-user-drag:none;-webkit-app-region:no-drag;
}
body{background:#21252d;}
.ltr{direction:ltr;}
.lineBreak{display:block;width:94%;height:1px;margin-right:3%;}
/* position */
.fixBlock{position:fixed;}
.absoluteBlock{position:absolute;}
.relativeBlock{position:relative;}
/* display */
.blockElement{display:block !important;}
.hideElement{display:none !important;}
.flexBox{display:flex;}
.flexBoxWithWrap{display:flex;flex-wrap:wrap;}
.blockBox{display:block;}
.gridBox{display:grid;}
.hide{display:none;}
/* overflow */
.autoOverflowY{overflow-y:auto;}
.hideOverflow{overflow:hidden;}
/* state */
.containObject{object-fit:contain;object-position:center;}
.coverObject{object-fit:cover;object-position:center;}
.centerBox{top:50%;left:50%;transform:translate(-50%,-50%);}
.containBG{background-size:contain;background-repeat:no-repeat;background-position:center;}
/* show */
.fullScreen{width:100%;height:100%;}
/* font styles */
.centerText{text-align:center;}
.leftText{text-align:left;}
.justifyText{text-align:justify;}
/* colors */
.whiteColor{color:#fff;}
.lightColor{color:#e0e0e0;}
.orangeColor{color:#FFC107;}
/* backgrounds */
.darkBG{background-color:#151b23;}
.midNightBG{background-color:#21252d;}
.nightBG{background-color:#282f3a;}
.shadowBG{background-color:#30343a;}
.grayBG{background-color:#525760;}
.greenBg{background:#00c46b;}
.blueBG{background:#0098ff;}
.transparentBG{background:none;background:transparent;}
/* inputs */
.inputContainer{position:relative;height:52px;}
.inputContainer input[type="text"]{background:none;}
.button{height:50px;line-height:50px;cursor:pointer;}
input{padding: 0 10px;}
input::placeholder,textarea::placeholder{color: #d2d2d2;}
/*  cursor */
.pointer{cursor:pointer;}
.noneUserSelect{user-select:none;-webkit-user-select:none;}
/* icons */
.iconAfter::after,.iconBefore:before{content:"";position:absolute;background-repeat:no-repeat;background-position:center;background-size:contain;}

.main_box_header{padding:0 10px;border-bottom:1px solid #858585;}
.main_box_header h1{line-height:40px;font-size:16px;}

/* styles for mobile */
@media screen and (max-width: 650px) {
    .col-m-1{width:100%;flex:0 0 100%;}
    .col-m-2{width:50%;flex:0 0 50%;}
    .col-m-3{width:33.3333%;flex:0 0 33.3333%;}
    .col-m-4{width:25%;flex:0 0 25%;}
}
@media screen and (max-width: 360px){
    .col-sm-1{width:100%;flex:0 0 100%;}
    .col-sm-2{width:50%;flex:0 0 50%;}
    .col-sm-3_3{width:66.6666%;flex:0 0 66.6666%;}
    .col-sm-3{width:33.3333%;flex:0 0 33.3333%;}
    .col-sm-4{width:25%;flex:0 0 25%;}
}
@media screen and (min-width: 650px){
    .col-m-1, .col-sl-1{width:100%;flex:0 0 100%;}
    .col-m-2, .col-sl-2{width:50%;flex:0 0 50%;}
    .col-m-3_3, .col-sl-3_3{width:66.6666%;flex:0 0 66.6666%;}
    .col-m-3, .col-sl-3{width:33.3333%;flex:0 0 33.3333%;}
    .col-m-4, .col-sl-4{width:25%;flex:0 0 25%;}
    .col-sl-5{width:20%;flex:0 0 20%;}
    .col-sl-6{width:16.6666%;flex:0 0 16.6666%;}
}
@media screen and (min-width: 960px){
    .col-l-1{width:100%;flex:0 0 100%;}
    .col-l-2{width:50%;flex:0 0 50%;}
    .col-l-3_3{width:66.6666%;flex:0 0 66.6666%;}
    .col-l-3{width:33.3333%;flex:0 0 33.3333%;}
    .col-l-4{width:25%;flex:0 0 25%;}
    .col-l-5{width:20%;flex:0 0 20%;}
    .col-l-6{width:16.6666%;flex:0 0 16.6666%;}
}
@media screen and (min-width: 1500px){
    .col-xl-1{width:100%;flex:0 0 100%;}
    .col-xl-2{width:50%;flex:0 0 50%;}
    .col-xl-3_3{width:66.6666%;flex:0 0 66.6666%;}
    .col-xl-3{width:33.3333%;flex:0 0 33.3333%;}
    .col-xl-4{width:25%;flex:0 0 25%;}
    .col-xl-5{width:20%;flex:0 0 20%;}
    .col-xl-6{width:16.6666%;flex:0 0 16.6666%;}
}
#curtain{z-index:500;top:0;right:0;opacity:0.3;}#main_header{height:210px;}
/* Top Header Section */
#top_header{height:70px;padding:10px;}
.header_shadow{box-shadow:0 0 25px -5px #000;}
.logoItem{width:150px;flex:0 0 150px;height:50px;}
.logoItem a{margin:auto;}
.logoItem .logoImage{background-image:url("/includes/logo-with-letter.svg");background-position:right !important;}
.searchItem{width:calc(100% - 300px);flex:0 0 calc(100% - 300px);}
.searchItem *{font-size:15px;}
#searchbar{width:500px;height:50px;margin:auto;padding:0 5px;border-radius:15px;}
.searchbar_submit{top:7px;left:7px;height:36px;line-height:36px;width:100px;border-radius:10px;}
.searchbar_submit.active{background:#0098ff;}

/* Bottom Header Section */
#bottom_header{height:50px;padding:10px;}
.headerListItem{height:30px;line-height:30px;padding:0 10px;margin:0 10px;font-size:16px;border-radius:10px;}
.headerListItem:hover{background:#0098ff;}
/* Special Musics Section */
#special_musics{margin-top:-70px;}
.special_musics_container{width:96%;margin:auto;padding:10px;border-radius:25px;}
.special_music{width:calc(100% / 6);flex:0 0 calc(100% / 6);padding:5px;}
.special_music_inner{padding:5px;border-radius:15px;}
.special_music_thumbnail{height:150px;border:1px solid #fff;border-radius:10px;}
.special_music_title{height:70px;line-height:35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;font-size:15px;font-weight:400;}
/* Under Header Payam */
#under_header_payam{width:96%;margin:30px auto;border-radius:15px;}
/* mini desktop */
@media screen and (max-width: 1024px) {
    .special_musics_container{width:98%;padding:5px;}
    .special_music_thumbnail{height:135px;}
}
/* tablet Styles */
@media screen and (max-width: 960px) {
    #searchbar{width:80%;}
    .special_musics_container{width:86%;padding:5px;border-radius:20px;}
    .special_music{width:33.333%;flex:0 0 33.333%;padding:5px;}
    .special_music_inner{position:relative;padding:0;border-radius:15px;overflow:hidden;}
    .special_music_thumbnail{height:150px;border:none;border-radius:0;}
    .special_music_title{position:absolute;width:100%;height:auto;bottom:0;right:0;background-color:rgba(0,0,0,0.6);line-height:25px;-webkit-line-clamp:4;font-size:14px;}
}
/* mini tablet Styles */
@media screen and (max-width: 800px) {
    #searchbar{width:98%;}
    .special_musics_container{width:96%;border-radius:15px;}
    .special_music_inner{border-radius:10px;}
}
/* mobile Styles */
@media screen and (max-width:640px) {
    #main_header{height:50px;}
    #float_header{margin-top:70px;}
    #top_header{position:fixed;z-index:900;width:100%;top:0;right:0;padding:10px 5px;}
    .logoItem{width:120px;flex:0 0 120px;}
    .searchItem{width:calc(100% - 120px);flex:0 0 calc(100% - 120px);}
    .searchbar_submit{width:60px;font-size:13px;}
    #search-input{font-size:14px;padding:0 5px;padding-left:65px;}
    .headerListItem{font-size:15px;margin:0;}
    #special_musics{margin-top:0;}
    .special_musics_container{width:100%;padding:0;border-radius:0;}
    .special_music{width:33.333%;flex:0 0 33.333%;padding:0;}
    .special_music_inner{position:relative;padding:0;border-radius:0;}
    .special_music_thumbnail{border:none;border-radius:0;}
    .special_music_title{position:absolute;width:100%;height:auto;bottom:0;right:0;background-color:rgba(0,0,0,0.6);line-height:25px;-webkit-line-clamp:4;font-size:14px;}
    #under_header_payam{width:96%;border-radius:10px;}
    #copyRight{font-size:13px;}
}

/* mini mobile */
@media screen and (max-width:370px) {
    #main_header{height:auto;}
    #bottom_header{height:auto;}
    .headerList{flex-wrap:wrap;}
    .headerListItem:nth-of-type(3){display:none;}
    .logoItem{width:100px;flex:0 0 100px;}
    .searchItem{width:calc(100% - 100px);flex:0 0 calc(100% - 100px);padding-right:10px;}
}
/* Footer Styles */
footer{margin-top:20px;}
#mainFooter{padding:15px;}
.footerSection{margin:20px 0;}
.footer_hashtag_item{margin:5px;padding:0 15px;border-right:2px solid #ff9900;border-radius:5px;line-height:30px;}
#our_business_container{margin:10px 0;}
.our_business_item{display:inline-block;width:100px;height:100px;margin:10px;padding:5px;border-radius:10px;background-color:#31394f;}
.our_business_icon{width:100%;height:60px;}
.our_business_icon img{width:100%;height:100%;object-fit:contain;object-position:center;}
.our_business_link{display:block;text-align:center;color:#fff;height:40px;line-height:40px;}
#copyRight{padding:10px;}
.sidebar_box{margin:20px 10px;}
.sidebar_box:first-of-type{margin-top:0;}
.sidebar_box_header{height:40px;line-height:40px;border-bottom:1px solid #858585;font-weight:500;font-size:15px;}
.sidebar_box_items_holder{padding:5px;}
.sidebar_box_items_holder .artist_item .music_artist_link,
.sidebar_box_items_holder .post_item .music_post_link
{display:block;margin:5px;padding:0 5px;border-radius:5px;background:#21252d;}
.sidebar_box_items_holder .artist_item .music_artist_name,
.sidebar_box_items_holder .post_item .music_post_link
{color:#fff;font-size:14px;font-weight:400;}
.sidebar_box_items_holder .post_item .music_post_link{padding:10px;margin:5px 0;}
/* mini desktop */
@media screen and (min-width:800px) and (max-width:1024px) {
    #left_sidebar{display:flex;}
    #left_sidebar .sidebar_box{width:47%;margin:20px 2%;}
    #left_sidebar .sidebar_box:nth-of-type(odd){margin-left:2% !important;}
    #left_sidebar .sidebar_box:nth-of-type(even){margin-right:0 !important;}
}
/* tablet Styles */
@media screen and (min-width:640px) and (max-width:800px) {
    #left_sidebar , #right_sidebar{display:flex;}
    .sidebar_box{width:47%;margin:20px 2%;}
    .sidebar_box:first-of-type{margin:20px 2%;}
    .sidebar_box:nth-of-type(odd){margin-left:2% !important;}
    .sidebar_box:nth-of-type(even){margin-right:0 !important;}
}
/* mobile Styles */
@media screen and (max-width:640px){
    #left_sidebar , #right_sidebar{margin:20px 0;}
    .sidebar_box{margin:20px 5px;}
}#main_template{grid-area:main;}
#left_sidebar{grid-area:leftSidebar;}
#right_sidebar{grid-area:rightSidebar;}
#template_holder{
    margin:30px 0;
    grid-template-columns: 28% 44% 28%;
    grid-template-rows: auto;
    grid-template-areas: "rightSidebar main leftSidebar";
}
#musics_holder{padding:1px;}
.music_post_header{margin:10px;border-radius:10px;}
.music_post_header .post_header_text{width:calc(100% - 120px);flex-grow:1;padding:10px;font-size:16px;font-weight:400;}
.music_post_header .post_header_date{display:inline-flex;align-items:center;justify-content:center;width:120px;padding:5px;font-size:15px;}
.music_post_descriptions p{padding:10px;}
.music_post_descriptions strong{font-size:15px;font-weight:400;}
.thumbnail_container{width:60%;margin:20px 20%;border-radius:20px;overflow:hidden;box-shadow:0 0 10px -2px #000;}
.thumbnail_container:hover{box-shadow:0 0 35px -5px #000;transform:scale(102%);}
.artist_musics_link{width:fit-content;min-width:40%;max-width:60%;margin:10px auto;padding:0 10px;border-radius:8px;line-height:30px;}
.artist_musics_link h2{font-weight:400;font-size:14px;}
#post_content_container{margin:10px;border-radius:15px;color:#fff;overflow: hidden;}
.yooz_tabs_list{border-bottom: 1px solid #525b67;}
.yooz_tab_item{position:relative;line-height:50px;padding:0 25px;cursor:pointer;text-align:center;font-size:1rem;}
.yooz_tab_item::after{visibility:hidden;opacity:0;content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #3f7ad1, #ffbd03);background-size:200% 200%;animation:gradientShift 6s ease infinite;}
.yooz_tab_item.isActive{background:#3d4045;}
.yooz_tab_item.isActive::after{visibility:visible;opacity:1;}
@keyframes gradientShift {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.yooz_tab_content_item{display:none;}
.yooz_tab_content_item.isActive{display:block !important;animation:fadeIn 0.3s ease-in-out;}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.music_lyric{text-align:center;}

.yooz_tab_content_item .yoozExpandable {
    max-height: 330px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    position: relative;
}

.yooz_tab_content_item .yoozExpanded {
    max-height: none !important;
}

.yooz_tab_content_item .yoozNeedsExpansion::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, #26222f);
    pointer-events: none;
}

.yooz_tab_content_item .yooz-expand-btn {
        position: absolute;
        width: 50%;
        bottom: 10px;
        z-index: 10;
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff36;
        color: white;
        padding: 8px 0;
        border-radius: 20px;
        cursor: pointer;
        opacity: 0;
        transition: all 0.3s ease;
        backdrop-filter: blur(3px);
        text-shadow: 3px 1px 10px #fff;
        border: 1px solid #7e7e7e;
        border-left: none;
        border-top: none;
        font-weight: 500;
}

.yooz_tab_content_item .yoozNeedsExpansion .yooz-expand-btn {
    opacity: 1;
}

.post_content{position:relative;max-height:330px;padding:20px 10px;border-radius:15px;overflow:hidden;}
.post_content h2{margin-bottom:5px;color:#d6d618;font-size:17px;font-weight:500;}
#post_content_holder{margin-top:20px;}
.post_content p{font-size:16px;font-weight:400;}
.music_file_item{margin:20px 10px;padding:10px;border-radius:15px;}
.music_file_item_name{width:calc(100% - 100px);flex-grow:1;font-size:15px;font-weight:400;}

#related_posts_section{margin:20px 0;}
.animate_title{display:flex;flex-wrap:wrap;}
.center_title{justify-content:center;}
.animate_title_tag{position:relative;width:fit-content;padding-right:30px;color:#fff;font-size:24px;letter-spacing:1px;}
.animate_title_tag::before{
    position:absolute;content:"\25CF";width:24px;height:24px;
    background-color:rgba(255,255,255,0.1);border-radius:50%;top:7px;right:0;
    color:#fff;font-size:28px;text-align:center;line-height:28px;
    animation: title_animation 0.5s linear infinite;
}

@keyframes title_animation{
    0%{scale:100%;color:#fff;}
    33.333%{scale:80%;}
    50%{color:#d6ff00;}
    66.666%{scale:120%;}
    100%{scale:100%;color:#fff;}
}


.music_post_item{margin:15px 0;padding:5px;background-color:#151b23;border-radius:20px;}
.music_post_item:last-of-type{border-bottom:none;}
.music_post_item .thumbnail_section{width:110px;flex:0 0 110px;height:110px;}
.music_post_item .thumbnail_container{width:100px;height:100px;margin:5px;opacity:0.9;background:linear-gradient(0deg , #000 , transparent);border-radius:15px;}
.music_post_item:hover .thumbnail_container{opacity: 1;}
.music_post_item .info_section{width:calc(100% - 110px);flex:1 0 calc(100% - 110px);padding-right:5px;}
.music_post_item .info_section .post_info_item{margin:5px;}
.music_post_item .post_item_title{font-size:16px;font-weight:400;}
.music_post_item .post_item_date{font-size:16px;}
.music_post_item .post_artist_link{display:inline-block;padding:2px 5px;font-size:14px;border-radius:10px;}
.music_post_item .download_section{margin-top:15px;margin-bottom:5px;}
.music_post_item .download_section .music_item_buttons{
    width:44%;flex:0 0 44%;height:34px;margin-right:4%;margin-left:2%;font-size:15px;border-radius:10px;
}
.music_post_item .download_section .music_item_buttons:nth-of-type(2){margin-right:2%;margin-left:4%;}
.music_post_item .download_section .music_item_button_text{display:inline-block;height:24px;padding-right:36px;}


.play_online_music_button{width:100px;height:28px;padding:0 5px;border:1px solid #fff;border-radius:8px;line-height:26px;}
.play_online_music_button:before{width:12px;height:12px;top:7px;left:5px;background-image:url("/includes/icons/play.svg");}
.music_file_links{margin-top:25px;display:flex;flex-wrap:wrap;}
.music_file_links .music_file_item_link{display:flex;justify-content:center;align-items:center;width:47%;height:36px;border:1px solid #fff;border-radius:10px;background-color:#385072;}
.music_file_links .music_file_item_link:first-of-type{margin-left:6%;}
.demo_music_item .music_file_item_link{width:100% !important;margin-left:0 !important;}
.music_file_links .music_file_item_link .music_file_item_text{padding-right:30px;height:34px;line-height:34px;font-size:16px;}
.music_file_links .music_file_item_link .music_file_item_text:before{
    background-image: url("/includes/icons/download_music.svg");width:22px;height:22px;top:6px;right:0;
}
.release_soon_box{margin:20px 10px;border-radius:15px;padding:10px;padding-right:80px;min-height:70px;line-height:25px;}
.release_soon_box::before{
    background-image: url("/includes/icons/play_soon.svg");width:50px;height:50px;top:10px;right:10px;
}
#post_tags_holder{margin-top:40px;padding:10px;border-top:1px dashed #fff;}
#post_tags_holder .post_tag_item_link{display:inline-block;border-radius:5px;margin:5px 3px;padding:0 10px;background-color:#0977e8;}
#after_post_content_payam{margin:20px 10px;}
#after_article_payam{margin:20px 0;}


/* comments section styles */
#comment_section{margin:20px 0;padding:10px;}
#comments_section_title{flex-grow:1;font-size:20px;font-weight:500;}
#comments_count{display:inline-flex;align-items:center;justify-content:center;width:fit-content;margin-right:15px;font-size:16px;}
#comment_form_title_line{margin:20px 0;}
#comment_form_title_line::before{width:100%;height:1px;background-color:#817878;top:50%;right:0;transform:translateY(-50%);}
#comment_form_text{z-index:2;display:inline;padding:0 15px;font-size:17px;}
.comment_form_input{padding:5px 10px;}
.comment_form_input label{display:block;margin-bottom:5px;color:#a7a7a8;}
.comment_form_input input, .comment_form_input textarea{
    background-color:#282f3a;min-height:40px;
    width:100%;padding:5px 10px;border-radius:10px;resize:none;font-size:16px;border:1px solid #364151;color:#fff;
    
}
.comment_form_input textarea{height:130px;}
#comment_section input::placeholder, #comment_section textarea::placeholder{color:#8b8b8b;font-size:14px;font-weight:400;}
#submit_comment_form{padding:20px 10px;}
#submit_comment_form_button{height:40px;padding:0 30px;background:rgba(11,181,104,0.4);color:#2ae590;border:1px solid #0bb568;border-radius:10px;font-size:14px;cursor:pointer;}
#submit_comment_form_button:hover{background-color:rgba(11,181,104,1.0);color:#fff;}
.rule-accept-container{margin-top:20px;color:#d3d3d3;font-size:14px;}
.rule-accept-container a{color:#d6d618;background:#d6d61810;border-radius:5px;padding:0 5px;}
#users_comments_section{margin-top:50px;padding-top:50px;border-top:1px dashed #fff;}
#users_comments_section .user_comment_item{margin:10px 0;padding:10px;border-radius:10px;}
#users_comments_section .user_comment_item .user_comment_item_info{margin-bottom:15px;}
#users_comments_section .user_comment_item .user_comment_item_name{font-size:15px;padding-left:10px;}
#users_comments_section .user_comment_item .user_comment_item_date{padding-right:10px;border-right:2px solid #6b6868;font-size:12px;font-weight:400;}
#users_comments_section .user_comment_item .user_comment_item_text{padding:5px 10px;background:rgba(0, 0, 0, 0.15);border-radius:5px;}
#displayMoreCommentsBtn{display:block;width:150px;margin:30px auto 0;border-radius:10px;height:36px;background-color:#282f3a;border: 1px solid #364151;color:#ffffff;cursor:pointer;}


/* mini desktop */
@media screen and (max-width: 1024px) and (min-width: 800px){
    #main_template .content_holder{margin-right:10px;}
    #template_holder {
        grid-template-columns: 65% 35% !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: "main rightSidebar"
                             "leftSidebar leftSidebar" !important;
    }
}
/* tablet Styles */
@media screen and (max-width: 800px){
    #template_holder{display:block !important;}
}
/* mobile Styles */
@media screen and (max-width: 640px){
    #template_holder{display:block !important;}
    .music_post_header{margin:5px;}
    .music_post_header .post_header_text{font-size:15px;}
    .music_post_descriptions p{padding:5px 10px;}
    .thumbnail_container{width:70%;margin:20px 15%;}
    .post_content{margin:15px 5px;border-radius:10px;}
    .post_content p{font-size:15px;line-height:28px;}
    .music_file_item{margin:20px 5px;}
    .music_file_links .music_file_item_link{width:49%;}
    .music_file_links .music_file_item_link:first-of-type{margin-left:2%}
    .music_post_item{margin:15px 5px;}
}
/* mini mobile styles */
@media screen and (max-width: 390px){
    .music_file_links{display:block !important;}
    .music_file_links .music_file_item_link{width:96%;margin-left:2% !important;margin-right:2% !important;}
    .music_file_links .music_file_item_link:first-of-type{margin-bottom:10px;}
}.slideUp{bottom:10px !important;}
#music_player{display:flex;width:96%;bottom:-100%;left:2%;padding:5px;background-color:#151b23f5;border:1px solid #999;border-radius:15px;}
#music_player_cover_section{width:100px;flex:0 0 100px;}
#music_player_main_section{width:calc(100% - 100px);flex:0 0 calc(100% - 100px);}
#music_player_cover_container{width:80px;height:80px;overflow:hidden;border:1px solid #fff;border-radius:10px;}
#music_player_song_title{width:calc(100% - 40px);font-size:16px;}
#music_player_close_icon{width:30px;height:30px;margin-right:10px;border:1px solid #fff;border-radius:10px;}
#music_player_close_icon::before, #music_player_close_icon::after{width:16px;height:2px;background:#fff;top:50%;left:50%;transform:translate(-50%, -50%) rotate(45deg);}
#music_player_close_icon::before{transform:translate(-50%, -50%) rotate(-45deg);}
#music_player_app{margin-top:10px;}
#music_player_playline_container{position:relative;width:96%;height:10px;}
#music_player_playline_bg{height:5px;top:50%;transform:translateY(50%);background:#282f3a;}
#music_player_playline{width:0;height:100%;left:0;top:0;background:#fff;transition:width 0s !important;}
#music_player_playline_thumb, #music_player_volume_thumb{width:12px;height:12px;top:50%;right:0;transform:translate(50%, -50%);background:#fff;border-radius:4px;}
#music_player_controllers{margin-top:10px;justify-content:center;}
#music_player_time_holder{font-size:15px;width:85px;height:36px;line-height:36px;}
#music_player_time_holder #music_player_duration_time,
#music_player_time_holder #music_player_time_divider{color: #a0a6af;}
#music_player_controll_buttons{padding:0 10px;}
.button_background{width:30px;height:30px;margin:3px 5px;background:#282f3a;border-radius:50%;cursor:pointer;}
.big_button{width:36px;height:36px;margin:0 5px;}
.button_background::before{width:14px;height:14px;top:50%;left:50%;transform:translate(-50%, -50%);}
#music_player_play_button.music_player_play_icon::before{width:16px;height:16px;left:52%;background-image:url("/includes/icons/play.svg");}
#music_player_play_button.music_player_pause_icon::before{background-image:url("/includes/icons/pause.svg");left:50% !important;}
#music_player_next_button::before{background-image:url("/includes/icons/next_music.svg");}
#music_player_prev_button::before{background-image:url("/includes/icons/prev_music.svg");}
#music_player_volume_icon{margin:0;}
#music_player_volume_icon::before{width:18px;height:18px;top:50%;left:50%;transform:translate(-50%, -50%);background-image:url("/includes/icons/speaker.svg");}
#music_player_volume_holder{width:80px;height:5px;top:50%;transform:translateY(-50%);background:#282f3a;}
#music_player_volume_line{width:75%;height:100%;top:0;left:0;background:#eae02a;}
#music_player_volume_thumb{background:#eae02a;}
@media screen and (max-width: 640px){
    .slideUp{bottom: 5px !important;}
    #music_player{width:98%;left:1%;background-color:#000;}
    #music_player_cover_section{width:0;flex:0 0 0;}
    #music_player_main_section {width:100%;flex:0 0 100%;}
    #music_player_cover_container{position:absolute;width:100%;height:100%;top:0;right:0;opacity:0.2;border:none;border-radius:0;}
    #music_player_volume_controll{display:none;}
}