@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: "Pretendard-Regular";
  src: url("../fonts/Pretendard-Regular.woff2") format("woff2"),
    url("../fonts/Pretendard-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard-bold";
  src: url("../fonts/Pretendard-Bold.woff2") format("woff2"),
    url("../fonts/Pretendard-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #121212;
}
.font-secondary{
  font-family: "Inconsolata", monospace;
}
.primary-bg{
  background-color: #121212;
}
/* .top-header .navbar-nav li a{
  font-family: "Pretendard, sans-serif" !important;
} */
body,
p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}
a {
  display: inline-block;
  text-decoration: none;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-weight: 400;
}
h1,
.h1 {
  font-size: 131px;
  line-height: 131px;
  color: #dcdcfc;
  letter-spacing: 0.5px;
  font-family: "Pretendard-Regular";
}
h2,
.h2 {
  font-size: 45px;
  line-height: 55px;
  letter-spacing: 0.5px;
  font-family: "Pretendard-Regular";
}

h3,
.h3 {
  font-size: 30px;
  line-height: 48px;
  letter-spacing: 0.5px;
  font-family: "Pretendard-Regular";
}

h4,
.h4 {
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 0.5px;
  font-family: "Pretendard-Regular";
}
h5,
.h5 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  font-family: "Pretendard-Regular";
}

.mt-20{
  margin-top: 20px;
}
.mt-40{
  margin-top: 40px;
}
.mt-60{
  margin-top: 60px;
}
.mt-80{
  margin-top: 80px;
}
.mt-90{
  margin-top: 90px;
}
.mt-100{
  margin-top: 100px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-40{
  margin-bottom: 40px;
}
.mb-60{
  margin-bottom: 60px;
}
.mb-80{
  margin-bottom: 80px;
}
.mt-90{
  margin-bottom: 90px;
}
.mb-100{
  margin-bottom: 100px;
}

.pt-20{
  padding-top: 20px;
}
.pt-40{
  padding-top: 40px;
}
.pt-60{
  padding-top: 60px;
}
.pt-80{
  padding-top: 80px;
}
.pt-90{
  padding-top: 90px;
}
.pt-100{
  padding-top: 100px;
}
.pb-20{
  padding-bottom: 20px;
}
.pb-40{
  padding-bottom: 40px;
}
.pb-60{
  padding-bottom: 60px;
}
.pb-80{
  padding-bottom: 80px;
}
.pb-90{
  padding-bottom: 90px;
}
.pb-100{
  padding-bottom: 100px;
}

/* Button Style */

button,button.btn,a.btn,input[type="submit"]{
  padding: 15px 32px;
    border-radius: 62px;
    background-color: #7F84FA;
    transition-property: background-color;
    transition-duration: 200ms;
    transition-timing-function: ease;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    width: auto;
    border: none;

}

button a{
  color: #121212 !important;
}
button:hover,button .btn:hover,a.btn:hover,input[type="submit"]:hover{
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}
a{
  color: #dcdcfc;
  transition: all 0.5s ease;
}
a:hover{
  color: #fff ;
}

/* Input Form Style */

input[type=date], 
input[type=email], 
input[type=number], 
input[type=password], 
input[type=search], 
input[type=tel], 
input[type=text], 
input[type=url], 
select, 
textarea,
input[type=datetime-local],
input[type=file], 
select,
select.form-control,
.form-control{
  transition: all .3s;
  min-height: 42px;
  display: block;
  margin-bottom: 20px;
  background-color: rgb(58, 58, 58);
  box-shadow: none;
  color: rgb(255, 255, 255);
  width: 100%;
  height: auto;
  min-width: 15vw;
  margin-right: 15px;
  margin-bottom: 15px;
  border-style: solid;
  border-width: 2px;
  border-radius: 8px;
  font-size: 18px;
  padding: 8px 12px;
  line-height: 1.42857143;
  border: 1px solid rgb(58, 58, 58);
  /* margin-bottom: 30px; */
}
input[type=file]{
  height: auto;
}
textarea,textarea.form-control{
  border-radius: 8px !important;
  min-height: 180px !important;
}

.table>:not(caption)>*>*{
  background-color: rgb(58, 58, 58);
  color: rgb(255, 255, 255);
}

select{
  appearance: none;
  background-image: url(../images/select-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 23px center;
  background-size: 12px;
}
input[type=checkbox]{
  background-image: url('../images/checkb.svg');
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
  border: none !important;
  appearance: none;
  padding: 0 !important;
  vertical-align: -5px;
  display: inline-block;
  background-color: transparent;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background-image: url(../images/check-mark.svg), url(../images/checkb.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: center top 5px, center top 0px;
  background-size: auto, auto;
}
input[type=radio]{
  background-image: url('../images/radioc.svg');
  background-repeat: no-repeat;
  height: 25px;
  width: 25px;
  border: none !important;
  appearance: none;
  padding: 0 !important;
  vertical-align: -5px;
  display: inline-block;
  background-color: transparent;
  cursor: pointer;
  background-size: 25px;
}
input[type="radio"]:checked{
  background-image: url(../images/radio-checked.svg), url(../images/radioc.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: center top 6px, center top 0px;
  background-size: 12px, 25px;
}

input[type=date]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
input[type=password]:focus, 
input[type=search]:focus, 
input[type=tel]:focus, 
input[type=text]:focus, 
input[type=url]:focus, 
select:focus, 
textarea:focus,
input[type=datetime-local]:focus,
input[type=file]:focus, 
select:focus,
select.form-control:focus{
  background-color: rgb(58, 58, 58);
  box-shadow: none;
  color: rgb(255, 255, 255);
  border: 1px solid rgb(58, 58, 58);
  box-shadow: none;
}

input[type=text]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input[type=datetime-local]::-webkit-input-placeholder{ 
  color: rgba(255, 255, 255, 0.3) ;
}
input[type=text]::-moz-placeholder,
input[type=date]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder,
input[type=datetime-local]::-moz-placeholder{ 
  color: rgba(255, 255, 255, 0.3);
}
input[type=text]:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input[type=datetime-local]::-moz-placeholder{ 
  color: rgba(255, 255, 255, 0.3);
}

.sign-up-wrapper-left{
  background-image: linear-gradient(140deg, rgb(255, 206, 245), rgb(200, 226, 145));
  display: flex;
  overflow: hidden;
  align-items: center;
  border-radius: 48px;
  min-height: 700px;
}
.sign-up-wrapper-left-slide-items {
  overflow: hidden;
  width: 14em !important;
  height: 14em;
  flex: 0 0 auto;
  border-radius: 100%;
}
.sign-up-wrapper-left-slide-items img{
  position: relative;
  width: 100%;
  height: 100%;
  align-self: flex-start;
  object-fit: cover;
}
.sign-up-wrapper-left .slick-track{
  display: flex;
  padding-left: 1vw;
  flex: 1 1 0%;
  column-gap: 1vw;
}
.heading-medium{
  font-family: "Poppins";
  font-size: 2.4em;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 15px;
}
.main-paragraph-w{
  margin-bottom: 0px;
  color: rgba(255, 255, 255, 0.47);
  font-size: 1em;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0em;
}
/* input[type=radio]{
  opacity: 0;
  position: relative;
  display: none;
} */
/* input[type=radio] ~ label{
  position: relative;
  padding-left: 45px;
  padding-right: 10px;
} */
/* input[type=radio] ~ label:before{
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  z-index: 1;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(32, 37, 44, 0.25);
  background-color: #FFFFFF;
  cursor: pointer;
} */
/* input[type=radio]:checked + label:before{
  background-image: url("../images/radio-input.svg");
  background-repeat: no-repeat;
  background-position: top 8px center;
  background-size: 12px;
} */

/* header css */
.top-header{
  /* background-color: #000; */
  background-color: #17171F;
  padding: 5px 0;

}

.top-header .navbar-brand img{
  max-width: 47.39px;
  min-height : 50.39px;
}
img.footer-logo{
  max-width: 79px;
}
.top-header ul.navbar-nav li a{
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color:rgba(255,255,255,0.8);
  padding-left: 21px !important;
  padding-right: 21px !important;
  border: 1px solid #FFFFFFCC;
    border-radius: 62px;
    font-family: "Pretendard-bold", sans-serif;
    text-transform: capitalize;
    padding: 7px 30px;
}
.top-header ul.navbar-nav li a.btn-link{border: none;padding-left: 24px;padding-right: 24px;}
/* .top-header ul.navbar-nav li:last-child a.btn-link{padding-left: 0px !important;padding-right: 0px !important;} */
.top-header ul.navbar-nav li.active a{
  color: #fff;
}
.top-header ul.navbar-nav li a:hover{
  color: #fff;
}
.top-header .navbar-expand-lg .navbar-collapse{ justify-content: space-between; }
.header-search{ display: flex; border: 1px solid #fff;border-radius: 33px;background: #222230;padding: 12px 14px;width: 348px;    position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
margin: 0 25px;    z-index: 3;}
.header-search .left-search {
  flex: 0 0 276px;
}
.header-search button{ padding: 0;background: transparent  !important;    margin-top: -2px;display: block; }
.header-search .form-control{ padding: 0;background: transparent; }
.header-search .input-group-icon{ display: flex;gap:8px;align-items: center;}
.header-search input.form-control{ font-size: 16px;line-height: 24px;color: #E5E7EB;    min-height: 24px;height: 24px;margin: 0;background: transparent;}
.header-search input.form-control::placeholder{ color: #E5E7EB;  }
.header-search input.form-control[type="search"]::-webkit-search-decoration,
.header-search input.form-control[type="search"]::-webkit-search-cancel-button,
.header-search input.form-control[type="search"]::-webkit-search-results-button,
.header-search input.form-control[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
.header-search .right-dropdown{border-left: 1px solid #fff;    padding-left: 8px;}
.header-search .form-select{   padding: 0;
    height: 24px;
    min-width: 117px;
    background: transparent;
 border: none;
    color: #E5E7EB;
    margin: 0;
    min-height: 24px;
    background-image: url(../images/dropdown-arrow.svg);
    background-repeat: no-repeat;
    background-position: right 4px;   box-shadow: none;
    padding-right: 26px; }

.header-search .form-select option{ color: #000;padding: 0 10px;text-indent: 5px; }


.header-search .search-content{background: #222230;padding: 14px;border-radius: 12px;position: absolute;width: 100%;max-height: 548px;left: 0;top: calc(100% + 8px);    z-index: 4;overflow-y: auto;}
.header-search .search-filter ul{list-style-type: none;display: flex;gap:15px;     padding: 0;margin-top: 4px;margin-bottom: 26px; }
.header-search .search-filter ul li a{ font-size: 14px;line-height: 24px;padding:3px 11px; border: 1px solid #fff;border-radius: 24px;display: inline-block;color: #fff; }
.header-search .search-filter ul li a:hover{ color: #222230;background: #fff; }
.header-search .search-title{ font-size: 16px;line-height: 24px; color: rgba(255,255,255,0.5);font-family: "Inter";font-weight: 700;margin-bottom: 11px;}
.header-search .search-boxes .each-box {display:flex;    gap: 8px;    align-items: center;  margin-bottom: 11px;  }
.header-search .search-boxes .each-box .image-wrapper img {height: 42px;    width: 42px;    object-fit: cover;    border: 1px solid #fff;    border-radius: 100%;}
.header-search .search-boxes .each-box .search-details h6 { color: #E5E7EB;font-size: 16px;line-height: 24px;    font-weight: 400;}
.header-search .search-boxes .each-box .songs-inner-text p {color:rgba(255,255,255,0.4);    font-family: "Inter";    font-size: 14px;    font-weight: 400;    line-height: 24px;    margin-bottom: 0;}
.header-search .search-boxes .each-box .search-details h6 strong {font-weight: 700;}
.header-search .collaborations-artistes{    border-top: 1px solid rgba(255, 255, 255, 0.2);padding-top: 22px;margin-top: 22px;}
.header-search .collaborations-artistes .search-boxes .each-box .search-details h6{color: #fff;}
.header-search .collaborations-artistes .search-boxes .each-box .songs-inner-text p{    color: rgba(255, 255, 255, 0.7);}




.collab-info h2 {
        font-family: "Poppins";
        font-size: 48px;
        font-weight: 700;
        line-height: 46px;
        letter-spacing: -0.012em;
        color: #FFFFFF;
    }
    .body-text {
        font-family: "Inter";
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #FFFFFF;
    }
    .body-text strong {
        font-weight: 700;
    }
    .small-title {
        font-family: 'Inter';
        font-size: 24px;
        font-weight: 400;
        line-height: 32px;
        letter-spacing: -0.006em;
    }
    .small-title span {
        color: #7F84FA;
        font-weight: 700;
    }
    .small-title strong {
        font-weight: 700;
    }
    .collab-info .collaboration-table thead tr th{
        background-color: #0C0C19;
    }
    .collaboration-table.pointer-none{
        opacity: 0.30;
    }
    .collaboration-table.pointer-none .btn{
        pointer-events: none;
    }


.hero-section.explore-section{
  background: linear-gradient(0deg, rgba(15, 19, 41, 0.44), rgba(15, 19, 41, 0.44)),url("../images/explore-img.png");
  min-height: 550px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top center;
  

}
.hero-section:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(0deg, rgba(15, 19, 41, 0.44), rgba(15, 19, 41, 0.44));
  z-index: 1;
  
}
.hero-section{
  background: linear-gradient(0deg, rgba(15, 19, 41, 0.44), rgba(15, 19, 41, 0.44)),url("../images/artist-1.jpg");
  min-height: 500px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  position: relative;

}
.custom-hero-section{
  /* background: linear-gradient(0deg, rgba(15, 19, 41, 0.44), rgba(15, 19, 41, 0.44)),url("../images/artist-1.jpg");
  min-height: 800px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */
  display: flex;
  width: 100%;
  /* height: 100vh; */
  padding: 100px 32px 32px;
  column-gap: 32px;
}
.sign-up-wrapper{
  width: 100%;
    max-width: 35vw;
    margin-right: auto;
    margin-left: auto;
    flex: 1 1 0%;
}
.latest-artical-notify{
  background: linear-gradient(0deg, rgba(15, 19, 41, 0.44), rgba(15, 19, 41, 0.44)),url("../images/african-american-professional-musician-recording-guitar-in-digital-studio-at-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 120px;
  padding-bottom: 120px;
}
.custom-hero-section > .container{
  padding-top: 100px;
  padding-bottom: 100px;
}
.hero-section .container{
  padding-top: 150px;
  position: relative;
  z-index: 2;
}
.footer-link ul {
  padding-left: 0;
}
.footer-link li {
  list-style: none;
  margin-bottom: 12px;
}
.footer-link ul li a:hover{
  color: #dcdcfc;
  transition: all 0.5s ease;
}
.footer-link ul li a {
  color: #ffffff;
  font-size: 13px;
  line-height: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.footer-link h5{
  margin-bottom: 40px;
}
.footer-link {
  padding-left: 98px;
}
.top-footer{
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 40px;

}
footer{
  padding-top: 100px;
}
.custom-top-padding{
  padding-top: 120px;
}
.custom-bottom-padding{
  padding-bottom: 120px;
}
.primary-color{
  color: #DCDCFC !important;
}
.form-group label{
  margin-bottom: 10px;
}
form.login-registration-form {
  /* background: rgb(255 255 255 / 20%);
  padding: 30px 25px;
  border-radius: 20px; */
}
.col-form-label{
  color: rgba(255, 255, 255, 0.5); 
  padding-left: 0;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}
.stem-form-create .col-form-label{
  padding: 0;
  margin: 0;
  margin-bottom: 11px;
  font-size: 14px;

}

ul li{
  list-style: none;
}
.artists-catalogue ul{
  padding-left: 0;
}
.artists-catalogue ul li{
  display: inline-block;
  margin-right: 15px;
}
.listing-card .detail-wrapper ul li{
  display: inline-block;
  position: relative;
}
.listing-card .detail-wrapper ul li:nth-child(2){
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  padding-left: 11px;
  padding-right: 11px;
  margin-left: 13px;
  margin-right: 13px;
}
.listing-card .detail-wrapper {
  border-bottom: 1px solid #4b5b57;
  padding-bottom: 20px;
}
.listing-card .bottom-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.listing-card .bottom-wrapper img{
  max-width: 22px;
}
.listing-card .profile-wrapper img
{
  background-repeat: no-repeat;
  background-position: center center;
  height: 250px;
  width: 100%;
  border-radius: 20px 20px 0px 0px;
  background-size: cover;
}
.listing-card {
  padding: 0 5px 50px 0;
}
.listing-card .bottom-wrapper > a, .listing-card .bottom-wrapper > div {
  flex: 0 0 50%;
}
.listing-card .bottom-wrapper > div {
  padding-left: 15px;
  padding-right: 15px;
}
.detail-wrapper li a,.detail-wrapper li .f-14{
  font-size: 14px;
}
.latest-artical-notify span img{
  max-width: 22px;
}
.latest-artical-notify .form-group{
  margin-bottom: 15px;
}
.forgot-password a:hover,a.hover:hover{
  color: #dcdcfc !important;
  transition: all 0.5s ease;
}
.social-share span {
  background: #DCDCFC;
  min-height: 30px;
  min-width: 30px;
  display: inline-block;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.social-share span i.fa-brands:before{
  color: #000;
  font-size: 16px;
}
.social-share a:hover{
  transform: translateY(-8px);
  transition: all 0.3s ease;
}
.social-share a{
  transition: all 0.5s ease;
}
.track-list-wrapper{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -5px;

}
.track-list-wrapper .tracklist-card{
  position: relative;
  flex: 0 0 33.333%;
  width: 33.333%;
  padding: 0 5px 10px 5px;

}
.track-list-wrapper .tracklist-card .image-wrapper img{
  background-repeat: no-repeat !important;
  background-position: top center !important;
  height: 415px;
  width: 100%;
  background-size: cover !important;
  border-radius: 24px;
}
.tracklist-card .launch-player {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
a.transofrm-hover{
  transition: all 0.5s ease;
}
a.transofrm-hover:hover{
  transition-duration: .3s;
  transition-property: transform;
  transition-timing-function: ease-out;
  transform: translateY(-8px);
}
.border-bottom{
  border-bottom-color: #4b5b57 !important;
}
.border-top{
  border-top-color: #4b5b57 !important;
}

.player-wrapper,.player-body-card{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
  /*zoom: 75%;*/
}
.player-body-card{ position: relative;}
.player-body-card:hover{ z-index:2;}
.player-wrapper .player-side-bar,.player-body-card .side-card{
  width: 375px;
}
.player-wrapper .player-main-bar,.player-body-card .track-card{
  width: calc(100% - 375px);
}
.player-body-card .track-card{
  position: relative;
  padding-left: 25px;
  display: flex;
  align-items: center;
}
.player-side-bar p{
  font-size: 19px;
  line-height: 23px;
  font-weight: 600;
}
.player-main-bar h5{
  font-family: "Pretendard-bold";
  color: rgba(255, 255, 255, 0.47);
  font-size: 17px;
  font-weight: 700;
}
.save-track{

  background: linear-gradient(217deg, rgba(76,98,238,.8), rgba(122,78,225,.9)) !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
  padding: 13px 25px 6px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  font-size: 19px !important;
  line-height: 19px !important;
  text-transform: capitalize !important;
  font-weight: 600 !important;
  min-height: 48px;
}
a.comment-field {
  background-color: #222429;
  /* padding: 15px 30px; */
  padding: 8px 10px;
  border-radius: 8px;
}
a.comment-field i.fa-comments::before{
  color: #fff;
}
.player-header-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sound-controll {
  background-color: #222429;
  border-radius: 8px;
  display: flex;
}
.sound-controll .icon-wrapper {
  padding: 10px 20px;
}
.sound-controll .duration-wrapper {
  background: #000;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  border: 1px solid #222429;
  border-radius: 0 8px 8px 0;
  min-width: 140px;
}
.duration-wrapper span{
  font-size: 22px;
}
.sound-controll .icon-wrapper a i.fa-solid::before{
  color: #fff;
  font-size: 18px;
  transition: all 0.5s ease;
}
.sound-controll .icon-wrapper a.on i.fa-solid::before {
  color: yellow;
}
.player-controll {
  display: flex;
  gap: 15px;
  align-items: center;
}
.audio-sound-controll a{
  color: #fff;
}
.audio-sound-controll a i{
  font-size: 23px;
}
.right-controller {
  display: flex;
  gap: 8px;
}
.player-wrapper .offcanvas {
  background: #000;
}
.player-wrapper  .offcanvas-backdrop.show {
  opacity: 0;
}
.player-wrapper .offcanvas h5{
  color: #fff;
  font-size: 19px;
    font-weight: 400;
    font-family: "Pretendard-Regular";
}
.player-wrapper .offcanvas .btn-close{
  background-image: url('../images/close-bold-svgrepo-com.svg');
  color: #fff !important;
  opacity: 1;
  background-size: 32px;
  cursor: pointer;
}
.player-wrapper .offcanvas-footer{
  padding: 0 16px 80px 16px;
}
.player-wrapper .offcanvas-footer button{
    width: 100%;
    border-radius: 8px !important;
    color: #000 !important;
    font-size: 12.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    background-color: #c1c5ff !important;
}
.player-wrapper .offcanvas-footer input[type=text]{
  background-color: #383838;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #fff;
}
.player-wrapper  .offcanvas-body button{
  width: 100%;
  border-radius: 8px !important;
  background-color: #191820 !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}
.player-wrapper .offcanvas-body{
  color: #fff;
}
.player-wrapper .comment-card{
  margin-bottom: 30px;
  font-size: 15px;
}

.player-wrapper .comment-card .reply-like-button{
  font-size: small;
}
.player-wrapper .comment-card .comment-header{
  background-color: #19181f;
  padding: 5px 8px;
  margin-bottom: 10px;
}
.player-wrapper  .comment-card .comment-header,
.player-wrapper  .comment-card .comment-footer
{
  display: flex;
  justify-content: space-between;
}
.player-wrapper .comment-card .comment-header{
  gap: 5px;
  font-size: 14px;
  width: 100%;
}
.player-wrapper .comment-card .comment-header .username{
  white-space: normal;
  word-break: break-all;
}
.player-wrapper .comment-card .comment-body{
  padding-left: 12px;
}
.comment-card.reply-card.reply-card {
  width: 93%;
  max-width: 100%;
  float: right;
}
.comment-card.reply-card.reply-card + div{
  clear: both;
}
.player-wrapper .comment-card  .comment-footer{
  font-style: italic;
}
.player-wrapper .comment-card  .comment-footer .reply-like-button{
  font-style: normal;
}
.instrument-wrapper {
  border-radius: 16px;
  padding: 10px 30px;
  position: relative;
  height: 100%;
  background-color: #292d3b;
}
.instrument-wrapper .title {
  margin-bottom: 20px;
}
.instrument-wrapper .track-buttons{
  display: flex;
  position: absolute;
  bottom: 10px;
  right: 18px;

}
.instrument-wrapper .track-button {
  min-height: 28px;
  min-width: 28px;
  background-color: #737686;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.track-button.mute {
  margin-right: 5px;
}
.track-button.mute.active{
  background-color: #1E6F8C;
}
.track-button.solo.active{
  background-color: #AE8231;
}
/*.track-button.mute:hover{
  background-color: #1E6F8C;
}
.track-button.solo:hover{
  background-color: #AE8231;
}*/
.side-card .title{
  display: flex;
  align-items: center;
}
.side-card .title span{
  font-weight: 700;
}
.side-card .title span i{
  font-size: 30px;
}
.side-card  .instrument-wrapper input[type=range]{
  width: 80px;
  height: 3px;
  accent-color: #AFA8F7;
  cursor: pointer;
}
.side-card  .instrument-wrapper#drums::after{
  background-color: #f68b43;
}
.side-card .instrument-wrapper#percus::after {
  background-color: #f68b43;
}
.side-card .instrument-wrapper#bass::after {
  background-color: #4399fa;
}
.side-card .instrument-wrapper#guiter-1::after {
  background-color: #1bfe8f;
}
.side-card .instrument-wrapper#guiter-2::after {
  background-color: #5cfe59;
}
.side-card .instrument-wrapper#guiter-3::after {
  background-color: #a5ff63;
}
.side-card .instrument-wrapper#guiter-4::after {
  background-color: #b8d7a0;
}
.side-card .instrument-wrapper#piano::after {
  background-color: #ceaa8e;
}
.side-card .instrument-wrapper#synth::after {
  background-color: #b08eb6;
}
.side-card .instrument-wrapper#keyboards::after {
  background-color: #dc97b0;
}
.side-card .instrument-wrapper#strings::after {
  background-color: #999999;
}
.side-card .instrument-wrapper#cuivres::after {
  background-color: #c5c5c5;
}
.side-card .instrument-wrapper#guitar::after {
  background-color: #2e84e8;
}
.side-card .instrument-wrapper#vocal::after {
  background-color: #d572e5;
}
.side-card .instrument-wrapper#sound-fx::after {
  background-color: #9ba1cf;
}
.track-card .track-item#sound-fx-track {
  background-color: #9ba1cf;
}
.side-card .instrument-wrapper#voix-lead::after {
  background-color: #fe3a36;
}
.track-card .track-item#voix-lead-track {
  background-color: #fe3a36;
}
.side-card .instrument-wrapper#chœurs::after {
  background-color: #f4417c;
}
.track-card .track-item#chœurs-track {
  background-color: #f4417c;
}

.side-card  .instrument-wrapper::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 12px;
  border-radius: 16px 0 0 16px;

}
.track-card .track-item{
  height: 100%;
  width: 100%;
  /* background-image: url(../images/track-background-img.png); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /*border-radius: 16px;*/
  position: relative;
}
.track-card .track-item .track-overlay{position:absolute;top: 0;
// border-radius: 16px;
height: 100%;z-index: 1;}
.instrument-wrapper{
  cursor: pointer;
  transition: all 0.5s ease;
}
/*.instrument-wrapper:hover{
  background-color: #666978;
}*/
/* .instrument-wrapper#drums{
  background-color: #666978;
} */
.instrument-wrapper#piano{
  background-color: #292d3b;
}
.instrument-wrapper#guitar {
  background-color: #292d3b;
}
.instrument-wrapper#vocal {
  background-color: #292d3b;
}
.track-card .track-item#drums-track{
  background-color: #f68b43;
}
.track-card .track-item#percus-track {
  background-color: #f68b43;
}
.track-card .track-item#bass-track {
  background-color: #4399fa;
}
.track-card .track-item#guiter-1-track {
  background-color: #1bfe8f;
}
.track-card .track-item#guiter-2-track {
  background-color: #5cfe59;
}
.track-card .track-item#guiter-3-track {
  background-color: #a5ff63;
}
.track-card .track-item#guiter-4-track {
  background-color: #b8d7a0;
}
.track-card .track-item#synth-track {
  background-color: #b08eb6;
}
.track-card .track-item#keyboards-track {
  background-color: #dc97b0;
}
.track-card .track-item#strings-track {
  background-color: #999999;
}

.track-card .track-item#cuivres-track {
  background-color: #c5c5c5;
}

.track-card .track-item#piano-track{
  background-color: #ceaa8e;
}
.track-card .track-item#guitar-track {
  background-color: #2e84e8;
}
.track-card .track-item#vocal-track {
  background-color: #d572e5;
}
.track-card .track-item span{
  background-color: rgb(34 36 41 / 70%);
  display: block;
  padding-left: 15px;
  /*border-radius: 16px 16px 0 0;*/
  font-weight: 500;
}
.track-seek-bar{
    background-color: rgba(50, 50, 50, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    left: 25px;
    border-radius: 16px 0 0 16px;
    z-index: 1;
    max-width: calc(100% - 25px);
    width: 20%;
    z-index: -1;
}
.commnent-tooltip {
  height: 20px;
  width: 20px;
  background-color: #c1c5ff;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(0%, -50%);
  z-index: 1;
   display: inline-block; 
  cursor: pointer;
}

.collab-commnent-tooltip {
  height: 10px;
  width: 10px;
  background-color: #c1c5ff;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(0%, -50%);
  z-index: 1;
   display: inline-block; 
  cursor: pointer;
}

/* comment tooltip css */

.commnent-tooltip .tooltiptext {
  visibility: hidden;
  width: 280px;
  background-color: rgb(0 0 0 / 70%);
  color: #fff;
  text-align: center;
  border-radius: 0px ;
  padding: 15px;
  top: 20px;
  border-radius: 8px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.collab-commnent-tooltip .tooltiptext {
  visibility: hidden;
  width: 280px;
  background-color: rgb(0 0 0 / 70%);
  color: #fff;
  text-align: center;
  border-radius: 0px ;
  padding: 15px;
  top: 20px;
  border-radius: 8px;
  text-align: left;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.commnent-tooltip:hover .tooltiptext {
  visibility: visible;
}
.collab-commnent-tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltiptext-header{
  border-bottom: 1px solid #fff;

}
.tooltiptext-header h4{    font-size: 18px;     word-break: break-all; }
.tooltiptext-header p,.tooltiptext-footer p{ font-size: 14px;}
.tooltiptext-footer a {
  font-style: italic;
  font-size: 18px;
}
.tooltiptext-footer{
padding-top: 15px;
}
.icon-wrapper a {
  min-width: 16px;
}
#pause, #volume-mute {
  display: none;
}
.audio-sound-controll a {
  min-width: 26px;
}
.side-dashboard li a{
  background-color: #121212;
  padding: 15px 25px;
  border-radius: 8px;
  width: 100%;
  color: #dcdcfc;
  margin-bottom: 20px;
}
.side-dashboard li:last-child a{
  margin-bottom: 0;
}
.side-dashboard ul{
  padding: 0;
}
.side-dashboard{
  background-color: #17171F;
  padding: 25px 25px;
  border-radius: 8px;
}
.main-content{
  background-color: #17171F;
  padding: 25px 25px;
  border-radius: 8px;
}
.side-dashboard .profile-wrapper img {
  border-radius: 100%;
  margin-bottom: 15px;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

.side-dashboard .profile-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-dashboard ul li a:hover{
  background-color: #DCDCFC;
  color: #121212 ;
}
.side-dashboard ul li.active a{
  background-color: #DCDCFC;
  color: #121212 ;
}
table thead th,table tbody td{padding: 15px 20px !important;vertical-align: middle;}
table thead th:first-child{
  border-radius: 8px 0 0 0;
}
table thead th:last-child{
  border-radius: 0 8px 0 0;
}
table tbody tr:last-child td:first-child{
  border-radius: 0 0 0 8px;
  border: none;
}
table tbody tr:last-child td{ border-bottom: none;}
table tbody tr:last-child td:last-child{
  border-radius: 0 0 8px 0px;
  border: none;
}
table a {
  color: #000;
}
 table .songs-inner-text a {
  color: #FFFFFF;
}

table a:hover{
  color: #dcdcfc;
}
.card p{
  color: #000;
}

input[type="range"] {
  /* removing default appearance */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  /* width: 100%; */
  cursor: pointer;
  outline: none;
  /*  slider progress trick  */
  overflow: hidden;
  border-radius: 16px;
  max-height: 16px;
}

/* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
  height: 16px;
  background: #ccc;
  border-radius: 16px;
}

/* Track: Mozilla Firefox */
input[type="range"]::-moz-range-track {
  height: 16px;
  background: #ccc;
  border-radius: 16px;
  max-height: 16px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px #48cd97;
}


/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 16px;
  width: 16px;
  background-color: #fff;
  border-radius: 50%;
  border: none;
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px #48cd97;
}

.stems-color{
  background-color: #f68b43;
  height: 35px;
  width: 35px;
  display: none;
  border-radius: 8px;
}
.modal-title,.modal-body{
  color:black;
}
/**modal**/
.modal-body .description-txt{ font-size: 14px;color: #000;}
.modal-header .modal-title{font-size: 20px;line-height: 30px;font-weight: 600;}
.song-list-radio{ font-size: 14px;}
.song-list-radio .radio-lable{ display: inline-block;margin-right: 5px;}
/**table**/
.table-responsive{ font-size: 14px;}
.table-small-btn{ color: #121212;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    background-color: #dcdcfc;
    border-radius: 50px;
    border: none;
    font-size: 11.5px;
    line-height: 12px;
    text-transform: uppercase;
    font-weight: 600;}
.table-small-btn:hover{
    background: #CDCDFF;color: #121212;
  }
.table-small-btn + .table-small-btn{ margin-left: 8px;}
.stems-wrapper{
  width:100%;
}
.loop-modal .modal-header .modal-title{
  color: #000;
}
.loop-modal .modal-header{
  justify-content: space-between;
}
.loop-modal button.close{
  background-color: transparent !important;
  font-size: 28px !important;
}
.loop-modal label.checkbox-label{
  padding-left: 10px;
}
.loop-btn-wrap {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  margin-top: 25px;
}
.loop-btn-wrap a {
  width: 100%;
}
.track-card .track-item  .track-overlay2 {
  position: absolute;
  top: 0;
  /*border-radius: 16px;*/
  height: 100%;
  z-index: 1;
  background: rgba(50,50,50,0.5);
  /*opacity: 0.8;*/
}
.track-loop{
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 16px;
}
.track-loop.tracke-start .trackline-start,.track-loop.tracke-start .trackline-end{
  background-color: #FFFFFF;
}
.track-loop .trackline-start,.track-loop .trackline-end {
  background-color: transparent;
  height: 100%;
  width: 2px;
  right: 0;
  position: absolute;
}
.track-loopstart,.track-loopend{
  position: absolute;
  top: 0;
  border-radius: 16px;
}
div#loader {
  position: absolute;
  width: 100%;
  z-index: 999999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}
div#loader svg{
  max-width: 350px;

}
textarea.form-control:focus{
    background-color: rgb(58, 58, 58);
box-shadow:none;
color:#FFFFFF;
    border-color: transparent;
}

/* Step-degin */
section.custom-bg{
  background-color: #201E1E;
}
section.step-flow{
  padding-top: 119px;
  padding-bottom: 72px;
}
.step-wrap.step-1 a{
  margin-bottom: 54px;
}
.step-flow .step-wrap h2{
  font-family: "Poppins";
  font-size: 40px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.012em;
  text-align: left;
  /* background: linear-gradient(to right, #7F84FA 40%, #EEEFFB 100%); */
  background: linear-gradient(90deg, #BABFFC 0%, #EEEFFB 76.71%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step-flow .step-wrap p{

  font-size: 20px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.006em;
  text-align: left;
  margin-bottom: 27px;

}
.step-flow .step-wrap.left-col{
  padding-right: 19px;
}
.step-flow .step-wrap.left-col .image-wrapper img{
  display: block;
  width: 100%;
}
.step-flow .step-wrap.right-col{
  padding-left: 19px;
}
.step-flow .round-btn,a.btn.my-profile-btn{
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: center;
padding: 7px 15.5px 7px 15.5px;
border-radius: 62px;
color: #FFFFFF;
}
.step-flow .round-btn.primary,a.btn.my-profile-btn{
  background-color: #7F84FA;
  border: 1px solid transparent;
}
.step-flow .round-btn.secondary{
  border: 1px solid #EEEFFB;
  background-color: #222230;
}
.upgrade-btn{
  padding: 2.5px 16px 2.5px 16px;
  border-radius: 5px;
  background-color: #222230;
  color: #FCA6EC;
  font-size: 12px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border: 1px solid transparent;
  transition: all 0.5s ease;
}
.step-flow .upgrade-btn{
  margin-right: 155px;
  border: 1px solid transparent;
  transition: all 0.5s ease;
}
.upgrade-btn:hover {
  background-color: #0c0c19 !important;
  border: 1px solid #222230;
}
.upgrade-btn:hover{
  color: #FCA6EC !important;
}
.step-flow .round-btn:hover{
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}
.my-statistics h4{
color: #FFFFFF;
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
margin-bottom: 22px;
}
.my-statistics{
  padding-bottom: 62px;
}
.statistics-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
}
.statistics-box .each-box {
  padding: 6px;
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
.analytics-section .statistics-box .each-box {
  flex: 0 0 25%;
  max-width: 25%;
}
.card.pricing-card {
  background-color: #222230;
  color: #FFFFFF;
  height: 100%;
  border-radius: 21px;
  background: radial-gradient(66.6% 60.64% at 100% 5.71%, #351E3B 15.86%, #322547 59.01%, #222230 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
}
.card.pricing-card  h4{
  color: #FFFFFF;
  font-size: 28px;
}
.pricing-description svg {
  flex: 0 0 24px;
}
.card.pricing-card p{
  color: #FFFFFF;
}
.statistics-box .each-box .inner-box{
  background-color: #222230;
  border-radius: 15px;
  padding: 20px;
  transition: all 0.5s ease;
  cursor: pointer;
}
.statistics-box .each-box .inner-box:hover{
  background-color: #383849;
}
.statistics-box .each-box .inner-box h5{
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 12px;
margin-bottom: 12px;    text-transform: uppercase;
}
.statistics-box .each-box .inner-box .count{
font-size: 48px;
font-weight: 700;
line-height: 56px;
letter-spacing: -0.012em;
}
.latest-comment-track{
  background-color: #222230;
  border-radius: 12px;
  padding: 12px 16px;
}
.latest-comment-track{
  margin-bottom: 12px;
  position: relative;
  cursor: pointer;
}
.latest-comment-track:last-child{
  margin-bottom: 0;
}
.latest-comment-track .inner-box{
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.latest-comment-track .inner-box .song-name{
font-family: "Inter";
font-size: 14px;
font-weight: 400;
line-height: 24px;

}
.latest-comment-track .inner-box .song-name span{
  font-weight: 700;
}
.latest-comment-track .inner-box .stemp-type{
font-family: "Inter";
font-size: 16px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.005em;
color: #22C55E;

}
.latest-comment-track .inner-box .username {
  background-color: #0C0C19;
  border-radius: 10px;
  font-family: "Inter";
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  padding: 4px 8px;
}
a.redirect-link{
  position: relative;
  font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: center;
color: #FFFFFF;
}
a.redirect-link::after{
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  height: 20px;
  width: 20px;
  background-image: url(/images/arrow-right.svg);
  background-repeat: no-repeat;
  transform: translate(0, -50%);
}
.my-song-container h4{
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
margin-bottom: 22px;
}
.song-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -13px;
}
.song-box .each-song-box{
  padding: 0 13px;
  flex: 0 0 25%;
  max-width: 25%;
  margin-bottom: 26px;
}
.song-box .each-song-box .image-wrapper {
  position: relative;
}
.song-box .each-song-box .image-wrapper img{
  display: block;
  height: 189px;
  width: 100%;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 13px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.5s ease;
}
.song-box .each-song-box .image-wrapper img:hover{
  border: 2px solid #FCA6EC;
}
.song-box .each-song-box .bottom-info {
  display: flex;
  gap: 8px;
  align-items: center;
}
.song-box .each-song-box .bottom-info .artist-detail .song-name{

font-family: "Inter";
font-size: 14px;
font-weight: 700;
line-height: 24px;
}
.song-box .each-song-box .bottom-info .artist-detail .artist-name{
font-family: "Inter";
font-size: 14px;
font-weight: 400;
line-height: 24px;
color: rgba(255, 255, 255, 0.70);
}
.song-box .each-song-box .bottom-info .artist-detail .artist-name a{
  color: inherit;
}
.song-box .each-song-box .bottom-info .image-thumb img{
  height: 42px;
  width: 42px;
  object-fit: cover;
  border-radius: 100%;
  /* border: 1px solid #FFFFFF; */
}
.my-song-container {
  margin-bottom: 102px;
}
.song-box .each-song-box .edit-wrap {
  background: #222230CC;
  border-radius: 24px;
  padding: 4px 8px;
  font-family: "Inter";
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  /* position: absolute; */
  /* top: 13px;
  right: 12px; */
  cursor: pointer;
  color: #FFFFFFCC;
}
.song-listview .modal-content .modal-body{
  text-align: center;
}
/* Popup Design Css */

.upgrade-popup .modal-content{
  padding: 78px 40px 40px 40px;
  box-shadow: 0px 4px 6px 0px #00000017;
    border-radius: 21px;
}
.upgrade-popup  .close{
  background: transparent;
  padding: 0;
  background-image: url("/images/poup-close.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 24px;
  width: 24px !important;
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 0;
}
.upgrade-popup .modal-header{
  text-align: center;
  flex-direction: column;
}
.upgrade-popup .modal-header h5{
font-family: "Inter";
font-size: 30px;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.0075em;
text-align: center;
color: #0C0C19;
margin-bottom: 24px;
}
.upgrade-popup .modal-header h5 span{
  color: #7F84FA;
}
.upgrade-popup .modal-header h6{
  color: #7F84FA;
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
text-align: center;
}
.upgrade-popup .modal-header p{
color: #22223099;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;

}
.upgrade-popup .modal-dialog{
  max-width: 614px;
  z-index: 3;
}
.upgrade-popup .modal-header{
  border-bottom: 1px solid #D1D5DB;
  padding: 0;
  padding-bottom: 24px;
}
.upgrade-popup .modal-body{
  padding: 24px 0;
  text-align: left;
}
.upgrade-popup .modal-body ul li{
  list-style: disc;
  color: #000000;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
margin-bottom: 8px;
}
.upgrade-popup .modal-body ul li:last-child{
  margin-bottom: 0;
}
.upgrade-popup .modal-body ul{
  padding-left: 25px;
}
.upgrade-popup .modal-footer{
  justify-content: center;
  flex-direction: column;
  padding: 24px 0 0 0;
  border-top: 1px solid #D1D5DB;
}
.upgrade-popup .modal-footer .terms-text{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
color: #0C0C19;
}
.upgrade-popup .modal-footer .terms-text p{
  color: #0C0C19;
  margin-bottom: 0;
}
.upgrade-popup .modal-footer .terms-text a{
  color: #7F84FA;
  font-weight: 700;
}
.upgrade-popup .modal-footer .terms-text a:hover{
  color: #0C0C19;
}
.upgrade-popup .modal-footer .rounded-btn{
padding: 12px 22px 12px 22px;
margin-bottom: 20px;
border-radius: 30px;
font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: center;
color: #FFFFFF;
background: linear-gradient(90deg, #7F84FA 0%, #BABFFC 100%);
transition: all 0.5s ease;    margin-top: 0;
}
.upgrade-popup .modal-footer .rounded-btn:hover{
  background: linear-gradient(90deg, #7F84FA 87%, #BABFFC 100%);
}
.song-box .each-song-box .image-wrapper .player-redirect {
  width: 100%;
  display: block;
}
/* .sound-controll .icon-wrapper a:hover i.fa-solid::before,
.sound-controll .icon-wrapper a:focus i.fa-solid::before {
  color: #BABFFC;
} */
.sound-controll .icon-wrapper a {
  transition: all 0.5s ease;
}
a.comment-field:hover {
  background-color: #424242;
}

/* #backword-play,#forward-play,#pause,#play,#reset-play {
  min-height: 28px !important;
  min-width: 28px !important;
  background-color: #737686;
  border-radius: 8px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;

} */
.sound-controll .icon-wrapper a{
  min-height: 28px;
  min-width: 28px;
  background-color: #737686;
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.5s ease;
}
.sound-controll .icon-wrapper a:hover{
  background-color: #424242;
}

.top-header .navbar-nav li a{
  font-family: "Pretendard, sans-serif";
}

.sound-controll .icon-wrapper a.player-instrument:hover {
  background-color: #424242 !important;
}
.instrument-wrapper .track-button:hover {
  background-color: #424242;
}
.latest-comment-track .inner-box .username a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

/* New Explore Page Design */

.explore-hero-banner{
  padding: 119px 0 140px 0;
  background-image: url('/images/top-section-bg.png'), url('/images/bottom-section-bg-gr.png');
  background-position: top -80px left 0, bottom 0 right -35px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: contain,contain;
  background-color: #201E1E;
}
.category-banner h1{
  font-family: "Poppins";
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -0.012em;
  text-align: center;
  background: linear-gradient(90deg, #AFA8F7 0%, #EA9AA2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.category-banner {
  max-width: 890px;
  margin: 0 auto;
}
.category-banner .category-box{
  margin-top: 42px;
  text-align: center;
}
.category-banner .category-box .each-song-category.active {
    background-color: #FCA6EC;
    color: #222230;
}
.category-banner .category-box .each-song-category{
  font-family: "Inter";
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.005em;
  text-align: center;
  color: #FFFFFFCC;
  padding: 4px 17px;
  border-radius: 24px;
  background-color: #2E2D2D;
  display: inline-block;   
   margin-right: 7px;
  margin-bottom: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.category-banner .category-box .each-song-category:hover{
  background-color: #424242;
}
.songs-you-like h3{
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
color: #7F84FA;
margin-bottom: 22px;
}
.songs-you-like h3 span{
  color: #FFFFFF;
}
.section-common-bg
{
  background-color: #201E1E;
}
.songs-you-like .song-box .each-song-box .bottom-info{
  align-items: start;
}
.songs-you-like .song-box .each-song-box .bottom-info .image-thumb img{
  border: 1px solid #FCA6EC;
}
.songs-you-like  .song-box .each-song-box .categories .inner-categories{
  font-family: 'Inter';
  border-radius: 24px;
  color: #FFFFFF99;
  background-color: #222230;
  padding: 4.5px 8px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  margin-right: 3px;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.songs-you-like  .song-box .each-song-box .categories .inner-categories:hover{
  background-color: #424242;
}
.songs-you-like  .song-box .each-song-box .categories{
  margin-top: 8px;
}
.songs-you-like .song-box .each-song-box .bottom-info .artist-detail .song-name{
  max-width: 255px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artists-you-like{
  margin-top: 26px;
}
.artists-you-like h3{
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
text-align: left;
color: #FFFFFF;
margin-bottom: 22px;
}
.artists-you-like h3 span{
  color: #FCA6EC;
}
.artist-slider .image-wrapper img{
  height: 369px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #000000;
  border-radius: 250px;
  transition: all 0.5s ease;
}
.artist-slider .image-wrapper a{
  display: block;
  width: 100%;
}
.artist-slider .image-wrapper img:hover{
  border: 1px solid #FCA6EC;
}
.artist-slider .slick-slide{
  margin-left:  13px;
  margin-right:  13px;
}

.artist-slider .slick-list {
  margin-left: -13px;
  margin-right: -13px;
}
.artist-slider .each-artist-box{
  position:relative;
}
.artist-slider .each-artist-box .artist-details{
  text-align: center;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
}
.artist-slider .each-artist-box .artist-details h4{
font-family: "Inter";
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.005em;
text-align: center;
color: #FFFFFF;
margin-bottom: 10px;

}
.artist-slider .each-artist-box  .song-categories .inner-box{
  font-family: "Inter";
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: center;
  color: #FFFFFF;
  background-color: #222230;
  padding: 4.5px 8.5px;
  border-radius: 24px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-bottom: 5px;

}
.artist-slider .each-artist-box  .song-categories .inner-box:hover{
  background-color: #424242;
}
.artist-wrap-section,.collab-info{
  padding-bottom: 232px;
    background-image: url(/images/artist-section-bg.png);
    background-position: bottom 0 left -40px;
    background-repeat: no-repeat;
    background-size: contain;
}
.artist-profile-wrapper img{
  width: 305px;
  height: 305px;
  border-radius: 100%;
  object-fit: cover;
}
section.artist-profile-detail{
  padding: 85px 0;
  background-color: #0C0C19;
}
.artist-detail-right h2{
color: #FFFFFF;
font-family: 'Inter';
font-size: 30px;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.0075em;
text-align: center;
}
.artist-detail-right .name{
  display: flex;
  align-items: center;
  gap: 8px;
}
.artist-detail-right .location{
color: #7F84FA;
font-family: 'Inter';
font-size: 14px;
font-weight: 400;
line-height: 24px;
text-align: left;

}
.artist-detail-right .share-btn {
  border: 1px solid #FFFFFF;
  background-color: #222230;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
  position: relative;
}
.artist-detail-right .share-btn a::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.artist-detail-right .share-btn a img {
  margin-top: -3px;
  margin-left: -1px;
}
.artist-detail-right .follow-btn button{
  color: #FFFFFF;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  background-color: #222230;
  border: 1px solid #FFFFFF;
  border-radius: 62px;
  padding: 7px 15.5px;
  display: flex;
  gap: 8px;
  align-items: center;

}
.artist-detail-right .share-btn:hover,.artist-detail-right .follow-btn button:hover{
  background-color: #424242 !important;
  color: #FFFFFF !important;
}
.artist-detail-right .top-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.songs-categories .inner-box{
  color: #FFFFFFCC;
  font-family: "Inter";
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  text-align: center;
  background-color: #222230;
  border-radius: 24px;
  display: inline-block;
  padding: 4.5px 8.5px;
  margin-right: 2px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.songs-categories .inner-box:hover{
  background-color: #424242;
}
.artist-detail-right .inner-text{
  margin-top: 14px;
  margin-bottom: 28px;
  max-width: 645px;
}
.artist-detail-right .inner-text p{
color: #FFFFFFCC;
font-family: "Inter";
font-size: 14px;
font-weight: 400;
line-height: 24px;
text-align: left;

}
.social-share-group a{
  background-color: #222230;
  border-radius: 100%;
  height: 44px;
  width: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-right: 10px;
  margin-bottom: 10px;
}
.social-share-group a:hover{
  background-color: #424242;
}
.collabration-text h3 {
  margin-top: 36px;
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
color: #FFFFFF80;
position: relative;

}
.collabration-text h3 span{
  color: #FFFFFF;
}
.collabration-text {
  display: flex;
  gap: 30px;
}
.collabration-text h3::after {
  content: ".";
  position: absolute;
  top: 50%;
  right: -22px;
  transform: translate(-50%, -50%);
  margin-top: -4px;
  color: #FFFFFF;
}
.collabration-text h3:last-child::after{
  display: none;
}
.tab-section{
  padding: 0 0 85px 0;
  background-image: url('/images/bottom-section-bg-gr.png');
  background-position: top -25px right -25px;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #0C0C19;
  position: relative;
  /* z-index: 2; */
}
.tab-section .nav-pills .nav-link.active, .tab-section .nav-pills .show>.nav-link {
  color: #7F84FA;
  background-color: transparent;
}
.tab-section .nav-pills button.nav-link:hover{
  background-color: transparent !important;
  color: #7F84FA !important;
}
.tab-section .nav-pills button.nav-link{
color: #6B7280;
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
text-align: center;
padding: 0 0 8px 0;
margin-right: 22px;
}
.tab-section .nav-pills .nav-link.active,.tab-section .nav-pills .nav-link:hover{
  border-bottom: 2px solid #7F84FA;
  border-radius: 0;
}
.freepremium-alert{
  display: flex;
  gap: 22px;
  align-items: center;
  margin-bottom: 24px;
}
.freepremium-alert p{
color: #FFFFFFCC;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
margin-bottom: 0;

}
.tab-section .nav-pills{
  margin-bottom: 32px;
  z-index: 2;
    position: relative;
}
.play-song-list h4{
color: #FFFFFF;
font-family: "Inter";
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.005em;
margin-bottom: 0;
}
.play-song-list {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.song-boxes .each-box{
  background-color: #222230;
  border-radius: 100px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 24px 8px 8px;
  margin-right: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.song-boxes .each-box .image-wrapper img {
  height: 48px;
  width: 48px;
  object-fit: cover;
  border: 1px solid #7F84FA;
  border-radius: 100%;
}
.song-boxes .each-box .songs-details {
    display: flex;
  gap: 5px;
  align-items: center;
}
.song-boxes .each-box .songs-details h6{
color: #7F84FA;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}
.song-boxes .each-box .songs-inner-text p{
color: #FFFFFF;
font-family: "Inter";
font-size: 14px;
font-weight: 300;
line-height: 24px;
text-align: left;
margin-bottom: 0;


}
.song-boxes .each-box .songs-inner-text p strong{ font-weight: 700; }
.mt-30{
  margin-top: 30px;
}
.song-boxes .each-box:hover{
  background-color: #424242;
}
/* .collaboration-table table thead th:first-child{
  border-radius: 12px 0 0 0;
}
.collaboration-table table thead th:last-child {
  border-radius: 0 12px 0 0;
}
.collaboration-table table {
  border: none;
  background-color: transparent;
}
.collaboration-table .table>:not(caption)>*>*{
  background-color: transparent;
  border: none;
} */

.collaboration-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 400px;
  border-radius: 10px;
  overflow: hidden;
}
.collaboration-table thead tr {
  text-align: left;
  font-weight: bold;
}
.collaboration-table thead tr th {
border-top: 2px solid #222230;
border-bottom: 2px solid #222230;
}

.collaboration-table th, .collaboration-table td {
  padding: 12px 15px;
}
.collaboration-table td{
  background-color: #222230;
}
.collaboration-table thead tr th:first-child{
  padding: 15px 16px !important;
 border-left: 2px solid #222230;
}
.collaboration-table thead tr th:last-child{
 border-right: 2px solid #222230;
}
.collaboration-table thead tr th{
  padding: 15px 50px !important;
  font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
}
.collaboration-table tbody tr td {
  padding: 0 50px !important;
  color: rgba(255, 255, 255, 0.8);
    font-weight: 300;

}
.collaboration-table tbody tr td .offer-text{color: #22C55E;font-weight: 600;    font-size: 20px;}
.collaboration-table tbody tr td:first-child{
  background-color: transparent;
  width:380px;
  padding: 0 !important;
  border: none;

}
.collaboration-table tbody tr td:nth-child(2){
  border-radius: 16px 0 0 16px;
}
.collaboration-table tbody tr td:last-child{
  border-radius: 0 16px 16px 0 !important;
}
.collaboration-table table{
  border-collapse: separate;
  border-spacing: 0 1em;
}
.collaboration-table tbody tr.active {
  outline: 2px solid #00f1ff;
}
.collaboration-table tbody tr.active td {
  outline: none;
}
.collaboration-table td.offer {
  color: #00ff85;
  font-weight: bold;
}
.collaboration-table .btn {
  background-color: #00ff85;
  color: #222230;
  padding:2.5px 8px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 400;
  font-size: 12px;
}
.collaboration-table .song-boxes .each-box{
  margin-bottom: 0;
  width: 98%;
}


/** select 2 css **/
.select2-dropdown{    background-color: #3a3a3a;border: none;}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #7F84FA;
}
.select2-container--default .select2-results__option--selected{ color: #fff;background: #7e7d7d; }
.select2-container--default .select2-search--inline .select2-search__field{ min-height: inherit !important;     margin: 0; width: 100% !important;padding: 8px 12px;}
.select2-container--default .select2-selection--multiple{ padding: 0;     min-height: 65px;    background-color: rgb(58, 58, 58);
    border: 1px solid rgb(58, 58, 58);}
.select2-container--default .select2-selection--multiple .select2-selection__choice{    background-color: #7e7d7d;    font-size: 15px;    border: 1px solid #403d3d;}


.song-box.slider-box{
    display: block;
    margin: 0;
  }
  .song-box.slider-box .each-song-box{
    padding: 0;
    max-width: 100%;
    margin-bottom: 0;
    position: relative;
  }
  .each-song-box .badges {
    font-size: 12px;
    /* position: absolute; */
    /* top: 10px;
    right: 10px; */
    z-index: 1;
    background-color: transparent;
    border-radius: 24px;
    padding: 0px 10px;
    color: #201e1e;
    font-weight: 500;
    text-align: center;
}
.profile-songs.each-song-box .badges{
  /* top: 12px;
  right: 80px; */
  text-align: center;
}
.each-song-box .badges.final{
  background-color: #7af67a;
}
.each-song-box .badges.demo{
  background-color: #facd7b;
}
.each-song-box .badges.sale{
  background-color: #efef45;
}
    /* the slides */
    .song-box.slider-box .slick-slide {
      margin: 0 13px;
  }
  /* the parent */
  .song-box.slider-box .slick-list {
      margin: 0 -13px;
  }
 .artist-profile-wrapper{ position: relative;}
.artist-profile-wrapper::before{
  content: "";
  background-image: url('/images/profile-overlay-bg.png');
  width: 557px;
  height: 582px;
  position: absolute;
  left: 57%;
  /* top: 68%; */
  top: 55%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-repeat: no-repeat;
  opacity: 0.7;

}
.artist-profile-wrapper img,.artist-profile-detail .col-lg-9{
  z-index: 2;
  position: relative;
}

.drop-down-menu {
  position: relative;
  margin-right: 60px;
}
.notification-drop-down-menu {
  position: relative;
  margin-right: 22px;
}
.notification-drop-down-menu .user-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: calc(100% + 40px);
  width: calc(100% + 20px);
  transform: translate(-50%, -50%);
}
.drop-down-menu .dropdown-list ,.notification-drop-down-menu .notification-dropdown-list{
  position: absolute;
  top: 45px;
  z-index: 4;
  right: -45px;
  border-radius: 21px;
  background: radial-gradient(66.6% 60.64% at 100% 5.71%, #351E3B 15.86%, #322547 59.01%, #222230 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  padding: 32px 32px;
  width: 408px;
  display: none;
}
.notification-drop-down-menu .notification-dropdown-list{
  width: 488px;    max-height: 550px;
  overflow-y: auto;
}
.notification-drop-down-menu .notification-dropdown-list  .user-information {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}
.notification-drop-down-menu .notification-dropdown-list  .user-information h3{
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
font-family: "inter";
margin: 0;
}
/* .notification-drop-down-menu .notification-dropdown-list{
  display: block !important;
} */
.notification-drop-down-menu .notification-dropdown-list .user-information .close-icon {
  cursor: pointer;
}
.drop-down-menu .dropdown-list  .user-information {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 24px;
}
.drop-down-menu .dropdown-list .user-information .info{
  display: flex;
  align-items: center;
  gap: 8px;
}
.notification-drop-down-menu .user-dropdown i{
  color: #7F84FA;
}
.drop-down-menu .dropdown-list .user-information .info img{
  height: 42px;
  width: 42px;
  border: 1px solid #7F84FA;
  border-radius: 100%;
  object-fit: cover;
}
.drop-down-menu .dropdown-list .user-information .info h3{
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
text-align: left;
}
.drop-down-menu .dropdown-list .user-information .close-icon{
  cursor: pointer;
}
.drop-down-menu .dropdown-list .user-redirection{
  padding: 12px 22px;
  border: 1px solid #D1D5DB;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  transition: all 0.5s ease;
  cursor: pointer;
}
.drop-down-menu .dropdown-list .user-redirection:hover{
  background-color: #32323a;
}
.drop-down-menu .dropdown-list .user-redirection .icon-list{
  display: flex;
  align-items: center;
  gap: 8px;
}
.drop-down-menu .dropdown-list .user-redirection .icon-list p{
color: #FFFFFF;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
margin-bottom: 0;

}
.dropdown-list hr {
  margin: 24px 0;
}
.collab-detail .apply-btn{
  width: auto;
}
.drop-down-menu .dropdown-list .bottom-btn,.collab-detail .apply-btn{
  width: 100%;
  background: linear-gradient(90deg, #7F84FA 0%, #FCA6EC 100%);
  transition: all 0.5s ease;
}
.drop-down-menu .dropdown-list .bottom-btn:hover,.collab-detail .apply-btn:hover{
  color: #FFFFFF !important;
  background: linear-gradient(90deg, #565aab 0%, #c34fae 100%);
}
.upgrade-popup.signup-modal .modal-header h5 span{
  background: linear-gradient(90deg, #7F84FA 38.49%, #EA9AA2 75.33%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.upgrade-popup.signup-modal .modal-header{
  padding: 0;
  border: none;
}
.upgrade-popup.signup-modal .modal-body{
  text-align: center;
  padding: 0 0 8px 0;
}
.upgrade-popup.signup-modal .modal-body a{
  display: flex;
  gap: 8px;
  align-items: center;
color: #000000;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
padding: 12px 28px;
border-radius: 30px;
border: 1px solid #D1D5DB;
margin-bottom: 16px;
text-align: center;
align-items: center;
justify-content: center;

}
.upgrade-popup.signup-modal .modal-dialog{
  max-width: 440px;
}
.upgrade-popup.signup-modal .modal-content{
  padding: 78px 60.5px 40px 60.5px;
}
.category-banner .category-box .each-song-category a{
  color: inherit;
}
.drop-down-menu .user-dropdown::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: calc(100% + 40px);
  width: calc(100% + 20px);
  transform: translate(-50%, -50%);
}
.upgrade-popup.signup-modal .modal-body a:hover {
  background-color: #dfdff0;
}
.search-boxes a {
  display: block;
}
.dark-bg{
  background-color: #0C0C19;
}
.transactions-top-area h3{
color: #7F84FA;
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
border-bottom: 2px solid #7F84FA;
padding-bottom: 5px;
display: inline-block;
}
.transactions-top-area .action-view{
  display: flex;
  gap: 8px;
  align-items: center;
}
.transactions-top-area .action-view h4{
font-family: "Inter";
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.005em;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 0;
}
.transactions-top-area .action-view h2{
color: #FFFFFF;
font-family: "Inter";
font-size: 30px;
font-weight: 600;
line-height: 36px;
letter-spacing: -0.0075em;
text-align: center;
margin-bottom: 0;
}
.transactions-top-area .action-view .btn{
  padding: 8px 17px;
  margin-left: 25px;
}
.transactions-section{
  background-image: url(/images/top-section-bg.png), url(/images/bottom-section-bg-gr.png);
  background-position: top -80px left 0, bottom 0 right -35px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: contain, contain;
}
.collaboration-table.transactions-table tbody tr td:first-child{
  background-color: #222230;
  width: 210px;
  padding: 12px 50px 12px 16px !important;
  border-radius: 16px 0 0 16px;
}
.collaboration-table.transactions-table tbody tr td:nth-child(2){
  border-radius: 0;
}
.collaboration-table.transactions-table tbody tr td span.offer{
font-family: "Inter";
font-size: 14px;
font-weight: 700;
line-height: 24px;
text-align: center;
color: #FFFFFF;
background-color: #0C0C19;
border-radius: 10px;
padding: 7.5px 8.5px;
}
.collaboration-table.transactions-table tbody tr td span.amount-text{
color: #22C55E;
font-family: "Inter";
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.005em;
text-align: center;
}
.collaboration-table.transactions-table tbody tr td span.amount-text.nagative{
  /* color: #EF4444; */
  color: #FDBA74;
}
.collaboration-table.transactions-table tbody tr td span.songs-name{
  color: #FFFFFFCC;
  font-weight: 700;
}
.collaboration-table.transactions-table tbody tr td span.progress-update{
font-family: "Inter";
font-size: 12px;
font-weight: 400;
line-height: 14.52px;
text-align: center;
color: #222230;
padding: 4px 8.5px;
border-radius: 24px;
background-color: transparent;
}
.collaboration-table.transactions-table tbody tr td span.progress-update.in-progress{
  background-color: #FDBA74;
}
.collaboration-table.transactions-table tbody tr td span.progress-update.done{
  background-color: #4ADE80;
}
.collaboration-table.transactions-table thead tr th{
  background-color: #0C0C19;
}
a.header-auth-btn{
  padding: 9px 30px;
}

#load-more-btn{
  line-height:0px;
  font-size:14px
}
ul.pagination {
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
ul.pagination .active>.page-link, ul.pagination .page-link.active{
  background-color: #7F84FA;
}
ul.pagination .page-link{
  color:#FFFFFF ;
  background-color: #0C0C19;
  border: 1px solid #222230;
}
ul.pagination .active .page-link{
  color: #FFFFFF;
}
ul.pagination .page-link{
  padding: 7px 15px;
}
ul.pagination .page-link:focus{
  box-shadow: none;
}
ul.pagination .page-link:hover{
  background-color: #7F84FA;
  color:#FFFFFF ;
}
/* .each-song-box .badges {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
} */
.top-header ul.navbar-nav li.active a, .top-header a.active {
  color: #adb0ed  !important;
}
.tempo-detail{
  gap: 10px;
}

.tempo-detail > div{
  display: flex;
  align-items: center;
  gap: 6px;
}
.tempo-detail .status{
  background-color: #7af67a;
  border-radius: 24px;
  padding: 0px 10px;
  color: #201e1e;
  font-weight: 500;
  font-size: 12px;
}
.tempo-detail .status.final{
  background-color: #7af67a;
}
.tempo-detail .status.demo{
  background-color: #facd7b;
}
.tempo-detail .status.sale{
  background-color: #efef45;
}
.collab-detail .apply-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.collab-detail .apply-wrap .inner-detail{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.collab-detail .apply-wrap .inner-detail .song-info .image-wrapper img{
  width: 100%;
  max-width: 70px;
  object-fit: cover;
}
.right-btn-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 295px;
  justify-content: end;
}
.right-btn-wrap .apply-btn-wrap a.btn-wrap{
  padding: 12px 32px;
}
.custom-player-collab .player-body-card:hover{    z-index: auto;
}
.custom-player-collab  .track-card .track-item .track-overlay2{
  background-color: transparent;
}
.collab-detail .share-info button.btn{
  color: #FFFFFF;
  font-family: "Inter";
  font-size: 15px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  background-color: #222230;
  border: 1px solid #FFFFFF;
  border-radius: 62px;
  padding: 5px 21.5px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.collab-detail .apply-wrap .inner-detail .share-info button.btn:hover{
  background-color: #424242 !important;
  color: #FFFFFF !important;
}
.right-btn-wrap .apply-btn-wrap .upgrade-btn{
  font-size: 11px;    padding: 2.5px 15px 2.5px 15px;
}
.collab-detail .apply-wrap .inner-detail .song-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

}
.collab-detail .apply-wrap .inner-detail .song-info .detail h4{
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 0;
}
.collab-detail .apply-wrap .inner-detail .song-info .detail p{
  margin: 0;
  color: #FFFFFF80;
}
.collab-detail .apply-wrap .inner-detail .song-info .detail p strong{
  color: #FFFFFF;
}
.special-requirement label{
  padding: 0 20px 10px 10px;
  cursor: pointer;
}
.file-download .top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-box .latest-comment-track{
    margin-bottom: 20px;
    transition: all 0.5s ease;
}
.download-box .latest-comment-track:hover{
  background-color: #292d3b;
}
.latest-comment-track.download-wrap .inner-box .song-name{
  font-size: 18px;
}
.right-side-comment {
  display: block;
  background-color: #222230;

  border-radius: 12px;
  zoom: 0;    
}
.right-side-comment .comment-card .comment-footer{
  display: block;
}
.right-side-comment .comment-card.reply-card.reply-card{
  width: 93%;
  margin-left: 25px;
  float: none;
}
.right-side-comment .comment-right-box{
  /* padding: 25px 25px; */
  /* max-height: 650px;
  overflow: auto; */
  scrollbar-width: thin;
}
.right-side-comment .comment-footers{
  padding: 25px 25px;
}
.comment-footers button {
  width: 100%;
}
.left-side-player .play-controll a{
  min-height: 40px;
  min-width: 40px;
  background-color: rgb(115, 118, 134);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: 700;
  transition: 0.5s;
  margin: 0;
}
.left-side-player .instrument-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 15px;
}
.left-side-player .player-body-card .side-card{
  width: 200px;
}
.left-side-player .player-body-card .track-card{
  width: calc(100% - 200px);
}
.custom-player-collab {
  background-color: #222230;
  padding: 25px;
  border-radius: 12px;
}
.left-side-player .play-controll a:hover{
  background-color: #424242;
}
.left-side-player .play-controll span.time-section{
  background-color: #19181f;
  padding: 8px 15px;
  margin-left: 13px;
  border-radius: 8px;
  min-width: 95px;
}
h3.sub-category{
  font-family: "Poppins";
  font-size: 33px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -0.012em;
  text-align: center;
  background: linear-gradient(90deg, #AFA8F7 0%, #EA9AA2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
button#load-more-btn {
  margin-bottom: 22px;
}
.collab-detail .apply-wrap .inner-detail .song-info .detail {
  /* max-width: 358px; */
}
.custom-player-collab .track-card .track-item span{
  height: 18px;
}
.social-share-group a i{
  font-size: 18px;
    color: #FFFFFF;
}
.apply-btn-wrap a.btn.apply-btn {
  padding: 12px 20px;
}
.each-song-box .right-side-sticky {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.each-song-box .left-side-sticky {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

}
.song-box .each-song-box .left-side-sticky .edit-wrap{ background: transparent;color:#fff;}

.right-side-comment.player-wrapper .comment-footer-bottom {
  padding: 25px 25px;
  text-align: center;
}
.tempo-detail-apply {
  /* max-width: 150px; */
  margin-left: -3px;
  gap: 5px
}
#collabApplyForm .form-control:disabled {
  background: transparent;
  color: #000000;
}
#collabApplyForm .form-control{
  border: 1px solid #D1D5DB;
  background-color: transparent;
  color: #000000;
}
#collabApplyForm button.rounded-btn a{
  color: #FFFFFF !important;
}
#collabApplyForm input[type="file"]{
  height: auto;
}
.table-extra-small-btn {
  color: #121212;
  letter-spacing: 0.5px;
  padding: 7px 10px;
  background-color: #dcdcfc;
  border-radius: 50px;
  border: none;
  font-size: 10.5px;
  line-height: 12px;
  text-transform: uppercase;
  font-weight: 600;
}
.table-extra-small-btn:hover{
  color: #121212;
}

.share-button-copy{

  color: #FFFFFF !important;
    background: linear-gradient(90deg, #565aab 0%, #c34fae 100%);
}
.swal2-container .swal2-popup {
  padding: 78px 60.5px 40px 60.5px;
  box-shadow: 0px 4px 6px 0px #00000017;
  border-radius: 21px;
}
.swal2-container .swal2-popup .swal2-title{
  padding: 0;
font-family: "Inter";
font-size: 26px;
font-weight: 600;
line-height: 34px;
letter-spacing: -0.006em;
text-align: center;

margin-bottom: 10px;
color: #0C0C19;
}
.swal2-container .swal2-popup .swal2-title span{
  background: linear-gradient(90deg, #7F84FA 38.49%, #EA9AA2 75.33%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.swal2-container .swal2-popup button.swal2-cancel{
  background: transparent;
  padding: 0;
  background-image: url(/images/poup-close.svg) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 24px;
  width: 24px !important;
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 0;
}
.swal2-container .swal2-popup button.swal2-cancel:hover{
  background-image: none;
  background-color: transparent;
}
.swal2-container .swal2-popup .swal2-confirm, .swal2-container .swal2-popup .swal2-deny{
  border-radius: 30px;
  min-width: 135px;
}
.swal2-container .swal2-popup .swal2-actions button{
  transition: all 0.3s ease;
  background: linear-gradient(90deg, #7F84FA 0%, #BABFFC 100%);
}
.swal2-container .swal2-popup button.swal2-confirm:hover,
.swal2-container .swal2-popup button.swal2-deny:hover{

  background: linear-gradient(90deg, #7F84FA 87%, #BABFFC 100%);
  color: #FFFFFF !important;
}
.swal2-container .swal2-popup.swal2-icon-success,
.swal2-container .swal2-popup.swal2-icon-info{
  padding: 15px 60.5px 40px 60.5px;
}

.form-control:disabled {

  background:none;
  opacity:0.5;
}
.tempo-detail .table-extra-small-btn{
  padding: 9px 10px 7px 10px;

}


.row .song-listview {
  background-color: #121212;
  margin-bottom: 10px;
  /* display: flex; */
  justify-content: space-between;
  padding: 0;
  border-radius: 8px;
  align-items: center;
  transition: all 0.4s ease;
}
.row .song-listview:hover {

  /* background-color:#424242 */
}
.song-listview-main .list-song-img{
  background-size: cover;
  height: 70px;
  width: 70px;
}

.list-song-img img :hover{
  opacity:0.5
}

.song-listview-main .list-song-img i{

    font-size: 25px;
}

.row .song-listview-main{
  scrollbar-width: none;
  /* max-height: 100dvh; */
  overflow-x: auto;
  padding: 0 30px;

}
/* .swal2-container .swal2-popup .swal2-icon{
  width: 4em;
  height: 4em;
} */
 .filter-option .form-control{
  height: 50px;
 }
 .filter-option  input[type=radio]{
  height: 22px;
    width: 22px;
    background-size: 22px;
 }
 .filter-option  input[type=radio]:focus{
  box-shadow: none;
 }
 .filter-option input[type="radio"]:checked {
  background-size: 10px, 22px;
}
.pointer{
  cursor: pointer;
}
.filter-option h4{
  font-family: Inter;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px;
  letter-spacing: -0.006em;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
color: #FFFFFFCC;
}
.sidebar-footer button{
  width: 100%;
}
.filter-option input[type="range"]{
  display: block;
  width: 100%;
  margin: 13px 0;
}
.filter-option {
  border-bottom: 1px solid #222230;
  padding-bottom: 25px;
  margin-bottom: 30px;
}
.song-listview .list-song-img{
  position: relative;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.4s ease;
}
.song-listview .list-song-img a{
  opacity: 0;
  transition: all 0.4s ease;

}
.song-listview .list-song-img:hover{
  border: 2px solid #FCA6EC;
}
.song-listview .list-song-img:hover a{
  opacity: 1;
}
.song-listview .list-song-img a::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.song-listview .list-song-img .time{
  color: #FFFFFF;
  font-family: "Inter";
  font-size: 10px;
  font-weight: 500;
  line-height: 13.52px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  background-color: #222230CC;
  padding: 3px 16px 2px 16px;
  border-radius: 24px;
  position: absolute;
  bottom: 2px;
  right: 5px;

}
.song-listview .song-detail .image-thumb img {
  /* border: 1px solid #FFFFFF; */
  height: 30px;
  width: 30px;
  border-radius: 100%;
  object-fit: cover;
  
}
.collab-detail .share-info button.btn:hover svg path {

stroke: #000000;
}
.collab-detail .share-info button.btn:hover svg{
  fill: #000000;
}
.filter-option-price input{
  color: #FFFFFF;
}
.filter-option-price input.form-control::placeholder{
  color: darkgrey;
}
.filter-option-price input.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: darkgrey;
}
.filter-option-price input.form-control::-moz-placeholder { /* Firefox 19+ */
  color: darkgrey;
}
.filter-option-price input.form-control:-ms-input-placeholder { /* IE 10+ */
  color: darkgrey;
}
.filter-option-price input.form-control:-moz-placeholder { /* Firefox 18- */
  color: darkgrey;
}
.song-listview .right-side-controll {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  /* min-width: 565px; */

}
.song-listview .right-side-controll .table-extra-small-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 7px 15px;
}
.market-sidebar {
  padding-left: 15px;

}

.song-listview:hover .list-song-img{
  /* border: 2px solid #FCA6EC; */
}
.song-listview:hover .list-song-img a{
  /* opacity: 1; */
}
.song-listview .right-side-controll  a.sales-badge {
  font-size: 12px;
  /* position: absolute; */
  z-index: 1;
  background-color: transparent;
  border-radius: 24px;
  padding: 0px 10px;
  color: #201e1e;
  font-weight: 500;
  text-align: center;
  background-color: #4ADE80;
  color: #222230;
}
.song-listview .tempo-detail .status.sale{
  background-color: #2E2D2D;
  color: #FFFFFFCC;
}
.song-listview.selected
{
  /* background-color: #424242; */
}
.song-listview.selected .list-song-img{
  /* border: 2px solid #FCA6EC; */
}
.song-listview.selected .list-song-img a{
  opacity: 1;
}
.sidebar-footer a.text-reset{
  padding: 15px 32px;
  border-radius: 62px;
  background-color: #7F84FA;
  transition-duration: 200ms;
  transition-timing-function: ease;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: none;
  width: 100%;
}

.sidebar-footer a.text-reset:hover{
  background-color: rgb(255, 255, 255) !important;
  color: rgb(0, 0, 0) !important;
}

#withdrawForm .form-control {
  border: 1px solid #D1D5DB;
  background-color: transparent;
  color: #000000;
}
.song-listview.collaboration-table.transactions-table tbody tr td:first-child.action-view,
.song-listview.collaboration-table.transactions-table tbody tr td {
  /* background-color: transparent; */
}
.song-listview table  a {
  color: #d3d3d6;
}
.song-listview.collaboration-table tbody tr td{
  padding: 15px 8px !important;
      border: none;

}
.song-listview.collaboration-table thead tr th{
  padding: 15px 8px !important;
}
.song-listview.collaboration-table .songs-thumb-wrap .list-song-img{
  min-width: 70px;
}
.song-listview.collaboration-table .songs-thumb-wrap .song-detail{
  flex: 0 0 155px;

}
.tempo-detail-apply > div {
  display: inline-block;
  vertical-align: middle;
}
.filter-option select {
  font-size: 16px;
}
.player-side-bar h4 {
  font-size: 19px;
}
.song-listview.collaboration-table .tempo-detail {
  display: inline-block;
}
.song-listview.collaboration-table tbody tr:hover .list-song-img{
  border: 2px solid #FCA6EC;
}
.song-listview.collaboration-table tbody tr:hover .list-song-img a {
  opacity: 1;
}
.song-listview.collaboration-table tbody tr.selected .list-song-img{
  border: 2px solid #FCA6EC;
}
.song-listview.collaboration-table tbody tr.selected .list-song-img a{
  opacity: 1;
}
.song-listview.collaboration-table tbody tr.selected td{
  background-color: #494953;
}
.song-listview.collaboration-table .tempo-detail .status.sale {
  background-color: #0C0C19;
  color: #FFFFFFCC;
  border-radius: 10px;
  padding: 4px 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 5px;
}
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
}
.gu-hide {
  display: none !important;
}

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  cursor: grabbing;
}
/* table.table.dragable-table {
  width: 100%;
  table-layout: fixed;
}
table.table.dragable-table  tr > td{
  width: 100%;
} */
.gu-mirror {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
.dragable-table tr{
  cursor: grab;
  transition: all 0.2s ease;
}
.lang-btn{
  margin-right: 15px;
  font-size: 23px;
}
.lang-btn i{
  color: #7f84fa;
}
.notification-dropdown-list .news-detail h6{
color: #7F84FA;
font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-bottom: 20px;

}
.notification-dropdown-list .news-detail.notification-wrap h6{
color: #FFFFFF;
font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;

}
.notification-dropdown-list .news-detail .info,.notification-dropdown-list .news-detail .detail-info{
      display: flex;
      gap: 10px;
      margin-bottom: 40px;

}
.notification-dropdown-list .news-detail .info .image-wrapper img{
  height: 42px;
  width: 42px;
  border: 1px solid #FFFFFF;
  border-radius: 100%;
  object-fit: cover;
}
.notification-dropdown-list hr{
  border-color: #FFFFFFCC;
}
.notification-dropdown-list .news-detail .info .detail-wrapper h3,
.notification-dropdown-list .news-detail .detail-info .detail-wrapper h3{
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px; 
  margin: 0;
}
.notification-dropdown-list .news-detail .info .image-wrapper,.notification-dropdown-list .news-detail .detail-info .image-wrapper{
  height: 42px;
  width: 42px;
  flex: 0 0 42px;
  align-items: center;
  display: inline-flex
;
  justify-content: center;
}
.notification-dropdown-list .news-detail .info .detail-wrapper p,
.notification-dropdown-list .news-detail .detail-info .detail-wrapper p{
font-family: "Inter";
font-size: 14px;
font-weight: 400;
line-height: 24px;
margin: 0;
}
.analytics-section .left-col h5.bold-title{
font-family: "Inter";
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.006em;
color: #7F84FA;
border-bottom: 2px solid #7F84FA ;
display: inline-block;
margin-bottom: 40px;

}
a.user-dropdown:hover svg{
  transition: all 0.4s ease;
}
a.user-dropdown:hover svg{
  fill: #7F84FA;
}
a.user-dropdown:hover svg path{
  stroke: #7F84FA;
}
.range-select-wrap select{
  margin-right: 0;
  width: auto;
  min-width: auto;
  margin-bottom: 5px;

}
.range-select-wrap select.value-select{
  background-color: #0C0C19;
  border: none;
  background-image: url('/images/select-drop.svg');
  background-size: 16px;
  background-position: center right 20px;
  color: #FFFFFF;
  font-family: "Inter";
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.006em;
  cursor: pointer;
  width: 200px;
}
.absolute-btn{
  visibility: hidden;
}
.blur-section + .absolute-btn{
  visibility: visible;
}
div#chart {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
}
.right-select{
  flex: 0 0 135px;
}
div#chart .apexcharts-pie-label{
  /* font-family: "Inter" !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #000000;   */
}
.apexcharts-datalabels text {
  text-shadow: none !important;
}
.range-select-wrap select.value-select:focus-visible,.range-select-wrap select.range-select:focus-visible{
  outline: none;
  box-shadow: none;
}
.range-select-wrap select.range-select{
  background-color: #222230;
  border: 1px solid #7F84FA;
  background-image: url('/images/select-range.svg');
  background-size: 12px;
  background-position: center right 20px;
  color: #7F84FA;
font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;
  max-width: 130px;
  cursor: pointer;
  width: 100%;
  border-radius: 62px;
  min-height: auto;
  max-height: 40px;
  padding: 0 16px 0 16px;
}
.analytics-bottom-chart-wrapper{
  background-color: #222230;
  border-radius: 20px;
  margin-top: 16px;
  padding: 20px 20px;
}
section.my-statistics.analytics-section {
  padding: 120px 0;
}
.revenue-chart-wrapper {
  background-color: #222230;
  border-radius: 20px;
  height: 100%;
  min-height: 491px;
  padding: 5px 20px 20px 20px;
}
.revenue-chart-wrapper .range-select-wrap select.value-select{
  background-color: #222230;
font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;
background-size: 10px;
background-position: center right 42px;
padding: 0 5px;
}
.revenue-chart-wrapper .range-select-wrap select.range-select{
  font-family: "Inter";
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  background-size: 9px;
  max-width: 101px;
  max-height: 32px;
  background-position: center right 10px;
}
.analytics-bottom-chart-wrapper {
  display: flex;
  gap: 40px;

}
.analytics-bottom-chart-wrapper .left-wrapper{
  flex: 0 0 475px;
  max-width: 475px;
  background-color: #0C0C19;
  border-radius: 12px;
  padding: 20px 20px;
}
.about-live p{
  margin-bottom: 0;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #FFFFFFCC;

}
.about-live {
  margin-bottom: 12px;
}
.analytics-bottom-chart-wrapper .left-wrapper .text-area p{
  font-weight: 700;
  width: 100%;
  max-width: 432px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.analytics-bottom-chart-wrapper .left-wrapper .text-area .date-info{
color: rgba(255, 255, 255, 0.50);
font-family: "Inter";
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.analytics-bottom-chart-wrapper .left-wrapper .icon-box {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 22px;

}
.analytics-bottom-chart-wrapper .left-wrapper .icon-box div{
  border-radius: 24px;
  padding: 4px 8px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.analytics-bottom-chart-wrapper .left-wrapper .icon-box .replay{
color: #FCA6EC;
font-family: "Inter";
font-size: 12px;
font-weight: 500;
line-height: 14.52px;
background-color: #222230;
text-align: center;
}
.analytics-bottom-chart-wrapper .left-wrapper .icon-box .subscribers,.analytics-bottom-chart-wrapper .left-wrapper .icon-box .time{
color: #FFFFFFCC;
font-family: "Inter";
font-size: 12px;
font-weight: 400;
line-height: 14.52px;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
background-color: #222230CC;
backdrop-filter: blur(5px)


}
.analytics-bottom-chart-wrapper .left-wrapper  .statastic-information {
  display: flex;
  gap: 20px;

}
.analytics-bottom-chart-wrapper .left-wrapper  .statastic-information > div{
color: #7F84FA;
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;

}
.analytics-bottom-chart-wrapper .left-wrapper  .statastic-information .time-wrap{
  color: #FCA6EC;
}
.analytics-bottom-chart-wrapper .left-wrapper  .statastic-information .time-wrap span{
  color: #FCA6EC;
}
.analytics-bottom-chart-wrapper .left-wrapper  .statastic-information span{
color: #7F84FA;
  font-family: "Inter";
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.006em;
  display: block;  
}
.revenue-chart-wrapper .chart-data .title.bold{
  color: #FFFFFF;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  
}
.revenue-chart-wrapper .chart-data .value.bold{
font-family: "Inter";
font-size: 16px;
font-weight: 700;
line-height: 24px;
padding: 4px 9px;
border-radius: 2px;
background-color: #0C0C19;
color: rgba(255, 255, 255, 0.9);
}
.revenue-chart-wrapper .chart-data .value{

font-family: "Inter";
font-size: 14px;
font-weight: 700;
line-height: 24px;
color: rgba(255, 255, 255, 0.9);

}
.revenue-chart-wrapper .chart-data .title{
color: rgba(255, 255, 255, 0.50);
font-family: "Inter";
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
.revenue-chart-wrapper .chart-data .title .circle-value{
  height: 14px;
  width: 14px;
  border-radius: 100%;
  background-color: transparent;
  margin-right: 12px;
}
.revenue-chart-wrapper .chart-data .title .circle-value.donation{
  background-color: #FCA6EC;
}
.revenue-chart-wrapper .chart-data .title .circle-value.susbcription{
  background-color: #FFD2A3;
}
.revenue-chart-wrapper.blur-section,.analytics-bottom-chart-wrapper.blur-section{
  filter: blur(4px);
  opacity: 0.3;
  pointer-events: none;

}
.analytics-section .absolute-btn{

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FCA6EC;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  border-radius: 62px;
  width: 210px;
  border: 1px solid #FCA6EC;
  padding: 7px 16px;
  gap: 8px;
}
.relative{
  position: relative;
}
.range-select-wrap .upgrade-btn{
  max-height: 29px;
}
.drop-down-menu .dropdown-list .user-redirection i{
  color: #FFFFFF;
}
.controll-information .icon-box{
  background-color: #292d3b;
  min-height: 40px;
  min-width: 40px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.4s ease;
  padding: 0 18px;
}
.controll-information .icon-box:hover{
  background-color: #737686;
}
.analytics-bottom-chart-wrapper .right-wrapper{
  width: 100%;
}
.lang-drop-down-menu {
  position: relative;
  margin-right: 22px;
}
.lang-drop-down-menu a.user-dropdown:hover svg path {
  stroke: transparent;
}
.lang-drop-down-menu .user-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: calc(100% + 40px);
  width: calc(100% + 20px);
  transform: translate(-50%, -50%);
}
.lang-drop-down-menu .lang-dropdown-list {
  position: absolute;
  top: 45px;
  z-index: 4;
  right: -45px;
  border-radius: 21px;
  background: radial-gradient(66.6% 60.64% at 100% 5.71%, #351E3B 15.86%, #322547 59.01%, #222230 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  padding: 18px 20px 18px 20px;
  width: 140px;
  display: none;
}
.lang-drop-down-menu .lang-dropdown-list ul{
  margin: 0;
  padding: 0;
}
.lang-drop-down-menu .lang-dropdown-list ul li+li{
  margin-top: 13px;
}
.lang-dropdown-list svg {
  height: 20px;
  width: 25px;
  margin-right: 13px;
}
.lang-drop-down-menu .lang-dropdown-list ul li a{
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #FFFFFF;
}
.lang-drop-down-menu .lang-dropdown-list ul li a:hover{
color: #adb0ed;
}
.apexcharts-series-markers-wrap .apexcharts-series-markers path{
  fill: #FFFFFF;
}
.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path[selected="true"]{
  fill: #FFFFFF;
  filter: none;
}
.analytics-bottom-chart-wrapper .right-wrapper .chart-value{
color: #7F84FA;
font-family: "Poppins";
font-size: 48px;
font-weight: 700;
line-height: 56px;
letter-spacing: -0.012em;
text-align: right;
margin-bottom: -50px;
}
.right-controller .action-wrapper a:hover svg{
  /* fill: transparent; */
}
.right-controller .action-wrapper a:hover svg path{
  stroke: #dcdcfc;
}
.right-controller .action-wrapper a.comment-field:hover svg g path{
  fill:#dcdcfc ;
  stroke: transparent;
}
.right-controller .action-wrapper a:hover i.fa-comments::before{
  color: #dcdcfc;
}
.mobile-list-view .inner-box{
  background-color: #222230;
  padding: 12px 16px 12px 16px ;
  border-radius: 16px;
  min-height: 100px;
  display: flex;
  justify-content: space-between;
}
.mobile-list-view .inner-box .left-part .song-detail .bottom-info .image-thumb img{
  height: 30px;
  width: 30px;
  border-radius: 100%;
  object-fit: cover;
}
.mobile-list-view .inner-box .left-part .song-detail .bottom-info a.song-name{
  font-size: 20px;
  color: #FFFFFF;

}
.mobile-list-view .inner-box .left-part .songs-thumb-wrap{
  margin-bottom: 15px;
}
.mobile-list-view .inner-box .left-part .song-detail .bottom-info .artist-detail .artist-name a{
  font-size: 12px;color: #e6e9ee;
}
.mobile-list-view .inner-box .left-part .tempo-detail .status.sale{
  display: inline-block;
  background-color: #0C0C19;
  border-radius: 10px;
  padding: 3px 8px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  margin-bottom: 5px;
}
.mobile-list-view .inner-box .left-part .tempo-detail {
  margin: 0 5px 5px 0;
}
.mobile-list-view .inner-box .right-part .sales-count span{
  font-size: 12px;
}
.mobile-list-view .inner-box .right-part .sales-count a span{
  color: #22C55E;
  font-size: 14px;
}
.mobile-list-view .inner-box .right-part{
  text-align: right;
}
.mobile-list-view .inner-box .left-part{
  flex: 0 0 238px;
  max-width: 238px;
}
.mobile-list-view .inner-box .right-part .amount-text{
  color: #22C55E;
  font-family: "Inter";
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.005em;
  text-align: center;
}
.mobile-list-view .inner-box .right-part .cart-mobile a{
  padding: 9px 10px 7px 10px;
  color: #121212;
  letter-spacing: 0.5px;
  padding: 7px 10px;
  background-color: #dcdcfc;
  border-radius: 50px;
  border: none;
  font-size: 8.5px;
  line-height: 10px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  display: flex;
      align-items: center;
      margin-top: 28px;
}
.mobile-player-header .image-thumb img{
  height: 40px;
  width: 40px;
  border-radius: 100%;
  object-fit: cover;
}
.mobile-player-header .artist-detail .artist-name a{
  font-size: 18px;

  color: #e6e9ee;
}
.mobile-player-header .tempo-detail{
  flex-direction: row;
  margin-left: 0;
  margin-right: 0;
}
.mobile-player-header .tune,.mobile-player-header .tempo  {
  font-size: 14px;
}
.mobile-player-header .sound-controll .duration-wrapper{
  width: 100%;
}
.mobile-player-header .sound-controll.master-controller .icon-wrapper{
  flex: 0 0 208px;
}
.mobile-player-header .tempo {
  margin-left: 8px;
}
.mobile-player-header .offcanvas{
  background: #000;
}
.mobile-player-header .offcanvas-body {
  color: #fff;
}
.mobile-player-header .offcanvas .btn-close {
  background-image: url('../images/close-bold-svgrepo-com.svg');
  color: #fff !important;
  opacity: 1;
  background-size: 32px;
  cursor: pointer;
}
.mobile-player-header .comment-card {
  margin-bottom: 30px;
  font-size: 15px;
}
.mobile-player-header .comment-card .comment-header {
  gap: 5px;
  font-size: 14px;
  width: 100%;
}
.mobile-player-header  .comment-card .comment-header .username {
  white-space: normal;
  word-break: break-all;
}
.mobile-player-header  .comment-card .comment-body {
  padding-left: 12px;
}
.mobile-player-header .comment-card  .comment-footer {
  font-style: italic;
}
.mobile-player-header  .comment-card .comment-header, .mobile-player-header  .comment-card .comment-footer {
  display: flex;
  justify-content: space-between;
}
.mobile-player-header  .comment-card .comment-header {
  background-color: #19181f;
  padding: 5px 8px;
  margin-bottom: 10px;
}
.mobile-player-header  .offcanvas-footer input[type=text] {
  background-color: #383838;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #fff;
}
.mobile-player-header .offcanvas-footer button {
  width: 100%;
  border-radius: 8px !important;
  color: #000 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  background-color: #c1c5ff !important;
}
.mobile-player-header .detail-wrapper h4{
  font-size: 20px;
  line-height: 21px;

    font-weight: 700;
}
.mobile-list-view .modal-dialog .modal-body{
  text-align: center;
}
/* #downloadfollower{
  padding: 0;
  background-color: transparent;
} */
.artist-detail-right .name h6{
  margin-bottom: 0;
}
/* #downloadfollower:hover,#downloadfollower:focus{
  background-color: transparent !important;
}
#downloadfollower:hover svg g path{
  stroke: #dcdcfc;
} */
/* .mobile-player-header{
  display: none;
} */

/* Feed Post Design */

.feed-container {
  /* max-width: 600px; */
  /* max-width: 1089px; */
  margin: 20px auto;
  /* background: #fff;
  border: 1px solid #ddd; */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 25px 25px;
  background: radial-gradient(66.6% 60.64% at 100% 5.71%, #351E3B 15.86%, #322547 59.01%, #222230 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

}

.feed-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  /* border-bottom: 1px solid #eee; */
}
.feed-header .bottom-info .image-thumb img{

  height: 35px;
  width: 35px;
  object-fit: cover;
  border-radius: 100%;

}
.feed-container  .bottom-info {
  display: flex;
  gap: 18px;
  /* align-items: center; */
}

.artist-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
}

.artist-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-info {
  font-size: 14px;
}

.feed-container .artist-name {
  font-weight: bold;
  color: #333;
}

.post-time {
  font-size: 12px;
  color: #777;
}

.feed-content ul li{
  list-style: disc;
}

.feed-content img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 25px;
  height: 400px;
  background-size: cover;

}

.feed-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);

}
.feed-text p{
  color: rgba(255, 255, 255, 0.8);
}

.feed-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #eee;
}
.action-buttons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.action-buttons button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #777;
  display: flex;
  align-items: center;    gap: 8px;
}
.action-buttons button.active{
  color: #7F84FA !important;
}
.feed-text h2 {
  font-size: 23px;
  color: #FFFFFF;
}
.mobile-list-view .inner-box .left-part .bottom-info {
  flex-direction: column;
  gap: 5px;
}
.action-buttons button:hover {
  /* color: #7F84FA !important; */
  color: #777 !important;
  background-color: transparent !important;
}
.action-buttons button
.action-buttons button i {
  margin-right: 6px;
  font-size: 16px;
}
.feed-container .comments-section {

  border-top: 1px solid #eee;    padding-top: 25px;
}
.comment-input {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}
.comment-input:focus {
  border-color: #888;
}
.comment-wrap-list .image-thumb img{
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 100%;
}
.comment-wrap-list .list-header {
  background-color: #19181f;
  padding: 10px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
}
/* Chat Design Start */
.reciver-chat{
  text-align: left;    margin: 20px 0;

}
.sender-chat{
  text-align: right;    margin: 20px 0;

}
.all-chats .chat {
  text-align: left;
  display: inline-block;
  padding: 10px;
  border-radius: 8px;
  background-color: #19181f;
  max-width: 235px;
  word-wrap: break-word;
}
.all-chats .sender-chat .chat{
  background-color: rgb(25 24 31 / 60%);
}
.all-chats .time {
margin-top: 5px;font-size: 10px;

}
.comment-wrap-list .list-header{

  transition: all 0.4s ease;color: #FFFFFF;
}
.comment-wrap-list .list-header:hover{
  background-color: #35314f;


}
.chat-header{
  background-color: #19181f;
  padding: 11px 18px;
  margin-bottom: 10px;
  border-radius: 0;
  display: flex
;
  justify-content: space-between;
  align-items: center;
}
.comment-right-box .image-thumb {
  position: relative;
}
.comment-right-box .image-thumb span.avilability-status{
  position: absolute;
  right: 6px;
  bottom: 6px;
  height: 7px;
  width: 7px;
  border-radius: 100%;
}
.comment-right-box .image-thumb span.avilability-status.offline{
  background-color: red;
}
.comment-right-box .image-thumb span.avilability-status.online{
  background-color: #7aee7a;
}
.chat-header .image-thumb img {
  height: 45px;
  width: 45px;
  object-fit: cover;
  border-radius: 100%;
}
.chat-list-wrap .chat-back-btn {
  text-align: right;cursor: pointer;
}
.chat-list-wrap .chat-back-btn i{
  font-size: 28px;
}
.all-chats.comment-wrap {
  padding: 0 15px;
}
.all-chats.comment-wrap {
  overflow: auto;
  max-height: 380px;
  min-height: 380px;
  scrollbar-width: thin;
}
.chat-list-wrap form input[type="text"],.chat-list-wrap form textarea{
  background-color: #19181f;
  border-color: transparent;
  margin: 0;
  padding-right: 60px;

}
.chat-list-wrap form{
  padding: 20px 15px 20px;
  position: relative;
}
.chat-list-wrap form button#btnsubmit {
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.chat-list-wrap form button#btnsubmit {
  padding: 0;
  background-color: #7f84fa;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
}
.chat-list-wrap form button#upload-button{
    padding: 0;
    background-color: #7f84fa;
    position: absolute;
    top: 50%;
    right: 56px;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
}
.all-chats .sender-chat .chat a {
  color: inherit;
}
.comment-wrap-list.listing{
  padding: 20px 20px;

}
.comment-wrap-list.listing button#btnaddcomment {
  width: 100%;
  margin-top: 25px;
}
.comment-wrap-list.listing .inner-listing {
  overflow: auto;
  max-height: 380px;
  scrollbar-width: thin;
  min-height: 380px;position: relative;
}
.comment-wrap-list.listing .inner-listing .no-chat{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);    width: 100%;
}
.user-chats-list .search{
  width: 100%;
}
.user-chats-list .search input[type="search"]{
  height: 50px;    background-color: rgb(25 24 31);border: none;
}
.user-chats-list .search input[type="search"]:focus-visible{
  outline: none;
  border: none;
  box-shadow: none;
}
input[type="search" i]::-webkit-search-cancel-button{
  cursor: pointer;
}
.comment-wrap-list.listing .inner-listing .list-header {
  /* display: flex;
  justify-content: space-between;
  align-items: center;    gap: 5px; */
}

.comment-wrap-list.listing .inner-listing .list-header .new-messages{
  color: #22C55E;    font-size: 13px;
}
.comment-wrap-list.listing .inner-listing .list-header .new-messages span{
  margin-right: 5px;
}
/* Chat Design End */

.apply-wrap .detail p{
  font-size: 15px;
}
section.my-statistics.analytics-section.tab-section{
  background-color: #0C0C19;
  background-image: none;
}
.apply-btn-wrap a.btn.apply-btn.disable-btn{
  background: grey;
}
.apply-btn-wrap a.btn.apply-btn.disable-btn:hover{
  color: #FFFFFF !important;
  background: grey !important;
}
.tab-section.my-statistics.analytics-section .tab-pane.blur .container{
  filter: blur(4px);
  opacity: 0.3;
  pointer-events: none;
  position: relative;
}
.tab-section.my-statistics.analytics-section .tab-pane.blur .absolute-btn{
  visibility: visible;
}
.comment-wrap-list.listing .add-member {
  background-color: #7f84fa;
  height: 35px;
  width: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  cursor: pointer;
}
.comment-form button.submit-comment-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-radius: 0 8px 8px 0;
  padding: 13px 32px;
}
.comment-form{
  position: relative;
}
.comment-form .comment-input{
  margin: 0;
  height: 50px;
  background-color: rgb(25 24 31);
  border: none;
  padding-right: 135px;
}
.comment-form .comment-input:focus{
  background-color: rgb(25 24 31);
}
.comment-form .comment-input:focus-visible{
  border: none;
  box-shadow: none;
  outline: none;
}
.comment-list .comment .image-thumb img{
  height: 35px;
  width: 35px;
  object-fit: cover;
  border-radius: 100%;
}
.comment-list .comment {
  border-bottom: 1px solid #ddd;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
}
.comment-list .comment:last-child{
  border-bottom: none;
}
.comment-list .comment p.user{
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;

}
.comment-list .comment p.date{

  font-family: "Inter";
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;    opacity: 0.5;

}
.comment-list .comment p.comment-body{

  font-family: "Inter";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.visibility-blur{
  filter: blur(4px);
    opacity: 0.3;
    pointer-events: none;
}
.notification-drop-down-menu .notification-count{
  position: absolute;
  top: -4px;
  right: -3px;
  background-color: #FFFFFF;
  border-radius: 100%;
  height: 15px;
  width: 15px;
  color: #000000;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
}
.custom-input {
  transition: all .3s;
  min-height: 42px;
  display: block;
  margin-bottom: 20px;
  background-color: rgb(58, 58, 58);
  box-shadow: none;
  color: rgb(255, 255, 255);
  width: 100%;
  height: 50px;
  min-width: 15vw;
  margin-right: 15px;
  margin-bottom: 15px;
  border-style: solid;
  border-width: 2px;
  border-radius: 8px;
  font-size: 18px;
  padding: 8px 12px;
  line-height: 1.42857143;
  border: 1px solid rgb(58, 58, 58);
  display: flex;
  align-items: center;
}
.stem-form-create input[type=text],.stem-form-create select{
  height: 50px;
}
.stem-form-create textarea, .stem-form-create textarea.form-control{
  min-height: 100px !important;
}
.stem-form-create .custom-card {
  border: 2px solid rgb(255 255 255 / 30%);
  padding: 45px 12px 0px 12px;
  border-radius: 8px;
  margin-bottom: 15px;
  position: relative;
}

.stem-form-create .custom-card .delete-stem{
  position: absolute;
  top: 10px;
  right: 10px;
  height: 30px;
  width: 30px;
  background-color: #FFFFFF;
  color: #000;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.main-content .add-stemp{
  height: 30px;
  width: 30px;
  background-color: #FFFFFF;
  color: #000;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;

}
.stem-form-create .custom-card .row {
  border-bottom: 2px solid rgb(255 255 255 / 30%);
}
.stem-form-create .custom-card .row:last-child {
  border-bottom: none;
}
.right-btn-wrap .apply-btn-wrap .apply-offset {
  margin-top: -50px;
}
.right-btn-wrap .apply-btn-wrap .apply-btn{
  padding: 10px 20px !important;
  font-size: 15px;
}
div#bar-chart {
  margin-top: 40px;
}
/* Media Query Start Here */
@media(max-width:1330px){
  .player-wrapper .player-side-bar{
    width: 300px;
  }
  .player-wrapper .player-main-bar{
    width: calc(100% - 300px);
  }
}
@media(max-width:1250px){
  .player-wrapper .player-main-bar .player-header-bar{
    flex-direction: column;
    gap: 20px;
  }
}
@media(max-width:1025px){
  .right-btn-wrap{
    gap: 10px;

    flex: 0 0 295px;


  }
  .collab-detail .apply-wrap .inner-detail .song-info .detail p {
    font-size: 13px !important;
}
}
@media(min-width:991px){
  .song-listview.collaboration-table tbody tr td:first-child{
    width: 400px !important;
  }
  .artist-detail-right{
    padding-left: 32px;
  }
  .toggle-button{
    display: none;
  }
}

@media(max-width:1295px){
  .header-search .right-dropdown{
    display: none;
  }
  .header-search{
    width: 260px;    left: 55%;

  }
  .header-search input.form-control{
    font-size: 13px;
  }
  .top-header ul.navbar-nav li a{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media(max-width:1220px){
  .artist-detail-right{
    margin-left: 55px;
  }
  .song-box .each-song-box{
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
  .my-statistics .left-col{
    margin-bottom: 20px;
  }
  .step-flow .step-wrap.left-col {
    padding-right: 0;
}
.step-flow .step-wrap.right-col{
  padding-left: 0;
}
}
@media(max-width:1200px){
  .player-controll{
    /* flex-direction: column; */
  }
  .collab-detail .apply-wrap{
    /* flex-direction: column; */
    gap: 5px;
    align-items: start;
  }
  .collab-detail .apply-wrap .inner-detail{
    flex-direction: column;
    gap: 20px;
    align-items: start;
  }
  .player-main-bar h5{
    text-align: left;
  }
  .player-header-bar {
    flex-direction: column;
    gap: 20px;
    justify-content: start;
    align-items: start;
}
td.action-btn button.btn{
margin-bottom:10px;
}

.collaboration-table tbody tr td {
    padding: 0 10px !important;
 
}

}

@media(max-width:1100px){
  .player-body-card .side-card{
    width: 255px;
  }
  .player-body-card .track-card{
    width: calc(100% - 255px);
  }
  .side-card .instrument-wrapper input[type="range"] {
    width: 100px;
}
  .track-list-wrapper .tracklist-card{
    position: relative;
    flex: 0 0 50%;
    width: 50%;
  }
}
@media(max-width:991px){
  .analytics-bottom-chart-wrapper .left-wrapper{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .analytics-bottom-chart-wrapper{
    flex-direction: column;
  }
  .lang-drop-down-menu{
    position: absolute;
    right: 50px;
  }
  .analytics-section .statistics-box .each-box {
    flex: 0 0 50%;
    max-width: 50%;
}
  .notification-drop-down-menu
  {
    position: absolute;
    right: 90px;
  }
  .market-sidebar {
    transform: translateX(-200%);
    padding-left: 0;
    position: fixed;
    background-color: #000000;
    top: 0;
    left: 0;
    height: 100%;
    width: 93%;
    padding: 30px 25px 30px 25px;
    z-index: 99;
    transition: all 0.4s ease;
	  overflow-y: scroll;
}
.market-sidebar.show{
  transform: translateX(0);
}
.song-listview .laravel-livewire-table {
  padding: 0 !important;
}
.row .song-listview-main{
  padding: 0;
}
  .right-side-comment.player-wrapper .comment-footer-bottom {
    padding: 15px 15px;
}
  .right-side-comment.player-wrapper .comment-right-box{
    /* padding: 15px 15px; */

  }
  .right-side-comment.player-wrapper .comment-footers {
    padding: 15px 15px;
}
  .tempo-detail{
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
  }
  .drop-down-menu{
    position: absolute;
    right: 90px;

  }
  .artist-profile-wrapper::before{
    width: 100%;
  }

  .artist-detail-right{
    margin-left: 0;
    margin-top: 20px;

  }
/* When the modal is open, make sure the toggler doesn't overlap */
.modal-open .navbar-toggler {
  z-index: 0 !important;
}
  .top-header .upgrade-btn{
    padding: 12.5px 16px 12.5px 16px;
  }
  .modal-backdrop{
    display: none;
  }
  .my-song-container{
    margin-bottom: 50px;
  }
  .song-box .each-song-box{
    flex: 0 0 50%;
    max-width: 50%;
  }
  .step-flow .step-wrap h2 {
    font-size: 27px;
    line-height: 36px;

  }
  .step-flow .step-wrap p{
    font-size: 16px;
    line-height: 24px;

  }
  section.step-flow{
    padding-top: 50px;
    padding-bottom: 50px;
  }
.top-header .navbar-collapse {
    text-align: center;
}
  .player-body-card .side-card {
    width: 145px;
}
.player-wrapper .player-main-bar, .player-body-card .track-card {
  width: calc(100% - 145px);
}
  .instrument-wrapper .track-button{
    min-height: 26px;
    min-width: 26px;
    font-size: 13px;
  }
  .instrument-wrapper .track-buttons{
    bottom: 4px;
    right: 18px;
  }
  .track-card .track-item{
    min-height: 150px;
  }
  .collaboration-table tbody tr td .offer-text {font-size: 16px;}
  .collaboration-table table{    font-size: 14px;}
  .song-boxes .each-box .songs-details h6{ font-size: 14px; }
  .song-boxes .each-box .songs-inner-text p{font-size: 12px; }
}
@media(max-width:991px){
  
  .mobile-filter-button a,.mobile-filter-close-button a{
    height: 50px;
    width: 50px;
    background-color: #222429;
    border-radius: 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
    cursor: pointer;
  }
  .mobile-filter-button a:hover,.mobile-filter-close-button a:hover{
    background-color: #424242;
  }
  .player-side-bar p{
    text-align: center;
  }
  .player-wrapper .player-side-bar,.player-wrapper .player-main-bar {
    width: 100%;
}

  .player-wrapper{
    flex-direction: column;
  }
  .player-header-bar{
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
  }
  .top-header .navbar-collapse form{
    justify-content: center;
    flex-direction: column;
    gap: 10px;
  }
  .top-header .navbar-collapse form a{
    width: 100%;
  }

  .listing-card {
    padding: 0 0 50px 0;
}
.fluid-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
  .top-header .navbar-collapse button{
    width: 100%;
  }
  .top-header ul.navbar-nav li a ,.top-header .upgrade-btn, .top-header a.btn.my-profile-btn ,.top-header  .header-auth-btn{
    /* text-align: center; */
    text-align: right;
    padding: 0 !important;
    font-size: 30px;
    font-weight: 700;
    line-height: 43.5px;
    font-family: "inter", sans-serif;
    border: none;
    color: #FFFFFF;
    background-color: transparent;
    display: flex;
    justify-content: end;
    text-transform: uppercase;
    margin-right: 0 !important;

  }
  .top-header a.btn.my-profile-btn:hover,.top-header .upgrade-btn:hover,.top-header  .header-auth-btn:hover{
    background-color: transparent !important;
    color: #adb0ed  !important;
  }
  .top-header .upgrade-btn svg{
    display: none;
  }
  .top-header ul.navbar-nav li.active a ,  .top-header a.active{
    color: #adb0ed  !important;
  }
  .header-social-icon li{
    display: inline-block;
    margin-right: 4px;
  }
  .header-social-icon li:last-child{
    margin-right: 0;
  }
  .header-social-icon {
    text-align: right;
    margin-top: 40px;
  }
  .header-social-icon li a{
    background-color: #1d1d1d;
    border-radius: 100%;
    height: 40px;
    width: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 22px;
  }
  .top-header button.navbar-toggler{
    border-radius: 11px !important;
    padding: 11px 11px !important;
    min-width: 40px;
    min-height: 40px;
  }
  .top-header button.navbar-toggler{
    background-image: url('../images/close-icon.svg');
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
  }
  .top-header button.navbar-toggler:focus{
    box-shadow: none;
  }
  .top-header button.navbar-toggler.collapsed{
    background-image: url('../images/hamburgermenu.svg');
  }
  .footer-link {
    padding-left: 0;
}
h1,
  .h1 {
    font-size: 59px;
    line-height: 63.5px;
  }
  section .container,  footer .container{
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
  .top-header .navbar-collapse{
    transition: transform 0.3s linear;
    transform: translateX(200%);
    position: absolute;
    right: 0;
    /* width: calc(100% - 120px); */
    padding-top: 100px;
    height: 100vh;
    z-index: 3;
    background-color: #000;
    display: block !important;
    position: fixed;
    top: 0;
    padding: 150px 30px;
    width: 100%;

  }
  .top-header .navbar-collapse.show{
    transform: translateX(0);
  }
  .top-header button.navbar-toggler{
    z-index: 4;
  }
}

@media(max-width:880px){
.collaboration-table table{width: 900px;}

}

@media(max-width:820px){
  .side-card .instrument-wrapper input[type="range"] {
    right: 2px;
    min-height: 80%;
}
  .side-card .instrument-wrapper input[type="range"] {
    /* display: none; */
    appearance: slider-vertical;
    /*  safari  */
    -webkit-appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 16px;
    vertical-align: bottom;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 9px;
}
.side-card .instrument-wrapper input[type="range"]::-webkit-slider-runnable-track{
  background: transparent;
}
.side-card .instrument-wrapper input[type="range"]::-webkit-slider-thumb{
  box-shadow: none;
}
  .sound-controll{
    /* max-width: 400px; */
  }
}

@media (max-width: 767px) {
  .sound-controll .icon-wrapper{
    padding: 10px 10px;
  }
  .filter-option{
    padding-bottom: 14px;
    margin-bottom: 18px;
  }
  .row .song-listview{
    flex-direction: column;
    justify-content: start;
    align-items: start;
    margin-bottom: 25px;
  }
  .row .song-listview-main{
    overflow: hidden;
    max-height: 100%;
  }
  .song-listview .right-side-controll{
    min-width: auto;
    padding-left: 122px;
    margin-top: -25px;
    gap: 8px;

  }
  .song-listview .right-side-controll .tempo-detail{
    margin: 0 0 0 0;
  }
  .row .song-listview{
    gap: 0;
  }
  .custom-player-collab{
    padding: 15px;
  }
  .drop-down-menu .dropdown-list,.notification-drop-down-menu .notification-dropdown-list{
    right: -140px;
    width: 330px;
    padding: 25px 20px;
  }
  .notification-drop-down-menu .notification-dropdown-list{
    right: -105px;

  }
  .artist-slider .image-wrapper img{
    height: 530px;
  }
  .freepremium-alert{
    flex-direction: column;
  }
  .tab-section{
    padding: 0 0 50px 0;
  }
  .tab-section .nav-pills button.nav-link {
    font-size: 14px;    line-height: 22px;    margin-right: 14px;        margin-bottom: 10px;
  }
  .tab-section.my-statistics.analytics-section .nav-pills button.nav-link{
    font-size: 22px;
  }
  .artist-detail-right h2 {
    font-size: 25px;    line-height: 31px;
  }
  section.artist-profile-detail{
    padding: 50px 0;
  }
  .collabration-text h3 {
    font-size: 19px;
    line-height: 27px;

  }
  .artist-wrap-section,.collab-info{
    padding-bottom: 50px;
  }
  .songs-you-like .song-box .each-song-box .bottom-info .artist-detail .song-name{
    max-width: 210px;
  }
  .category-banner .category-box .each-song-category{
    font-size: 15px;
    line-height: 25px;
  }
  .category-banner .category-box {
    margin-top: 25px;
}
  .explore-hero-banner{
    padding: 50px 0;
  }
  .category-banner h1{
    font-size: 32px;
    line-height: 42px;
  }
.sign-up-wrapper{
max-width:100%;
}
.pt-100.pt-md-20 {
  padding-top: 30px;
}
.latest-comment-track{
  padding: 12px 12px;
}
.statistics-box .each-box{
  flex: 0 0 50%;
    max-width: 50%;
}
.step-wrap.step-1 a{
  margin-bottom: 30px;
}
  .table-small-btn{
    margin-bottom: 8px;
    margin-left: 0 !important;
    margin-right: 8px !important;
  }
  .instrument-wrapper {
    /* padding: 20px 18px; */
    padding: 12px 10px 12px 12px;
}
  .side-card .instrument-wrapper input[type="range"] {
    /* display: none; */
    appearance: slider-vertical;
    /*  safari  */
    -webkit-appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 16px;
    vertical-align: bottom;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 9px;
}
.side-card .instrument-wrapper input[type="range"]::-webkit-slider-runnable-track{
  background: transparent;
}
.side-card .instrument-wrapper input[type="range"]::-webkit-slider-thumb{
  box-shadow: none;
}
  .track-button.mute {
    margin-right: 0;
}
  .instrument-wrapper .track-buttons {
    flex-direction: column;
    gap: 5px;
}
  .side-card .title span i {
    font-size: 20px;
}
  .instrument-wrapper .title {
    margin-bottom: 8px;
}
  .instrument-wrapper .track-buttons {
    bottom: 18px;
    left: 43%;
    transform: translate(-50%, 0px);
    margin-left: -5px;
}
  .side-card .title {
flex-direction: column;
margin-left: -25px;
}
  .side-card .title span {
    font-weight: 700;
    font-size: 0;
    line-height: 18px;
}
  .track-list-wrapper .tracklist-card{
    position: relative;
    flex: 0 0 100%;
    width: 100%;
  }
  .latest-artical-notify{
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .listing-card {
    padding: 0 0 50px 0;
}
  input[type=checkbox] ~ label:before{
    top: 8px;
  }
  .custom-top-padding{
    padding-top: 50px;
  }
  .custom-bottom-padding{
    padding-bottom: 50px;
  }
  .footer-link h5 {
    margin-bottom: 15px;
}
  .hero-section{
    background-position: center center;
  }
  footer {
    padding-top: 50px;
}

  .top-footer{
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
  footer{
    text-align: center;
  }
  h1,
  .h1 {
    font-size: 59px;
    line-height: 63.5px;
  }
  h2,
  .h2 {
    font-size: 32px;
    line-height: 35px;
  }
  h3,
  .h3 {
    font-size: 25px;
    line-height: 35px;
  }
  h4,
  .h4 {
    font-size: 18px;
    line-height: 25px;
  }
  p {
    font-size: 14px;
    line-height: 21px;
  }
  .hero-section .container{
    padding-top: 0;
  }
  .hero-section.explore-section,.hero-section{
    display: flex;
    align-items: center;
  }
.animation{
  display: none;
}
.animation-for-mobile{
  display: block !important;
}

.sign-up-wrapper-left{
height:250px;
min-height:250px
}

.custom-hero-section{

padding: 32px 32px 32px
}

.collab-info h2{
            font-size: 28px;    line-height: 38px;
        }
        .collab-info h2 br{
            display: none;
        }



}




@media(max-width:560px){
  .analytics-bottom-chart-wrapper .left-wrapper{
    flex: 0 0 auto;
    max-width: 100%;
  }
  .analytics-bottom-chart-wrapper .left-wrapper .statastic-information,.analytics-bottom-chart-wrapper .left-wrapper .icon-box{
    flex-direction: column;
  }
  .analytics-bottom-chart-wrapper .left-wrapper .icon-box div{
    display: inline-flex;        max-width: max-content;        padding: 5px 15px;
  }
}
@media(max-width:550px){
  .comment-form .d-flex{
    flex-direction: column;    gap: 13px;
  }
  .comment-form .comment-input{
    padding-right: 12px;
  }
  .comment-form button.submit-comment-btn{
    position: static;
    transform: none;
    border-radius: 8px;
  }
  .analytics-section .statistics-box .each-box {
    flex: 0 0 100%;
    max-width: 100%;
}
  .range-select-wrap select.value-select{
    font-size: 18px;    line-height: 24px;    background-position: center right 38px;
  }
  .range-select-wrap select.range-select{
    font-size: 14px;    line-height: 22px;
  }
  .collab-detail .apply-wrap{
    flex-direction: column;
  }
  .tempo-detail{
    flex-direction: column;
    text-align: center;
        align-items: center;
  }
  .tempo-detail
  .collab-detail .apply-wrap {
    flex-direction: column;
    gap: 5px;
    align-items: start;
}
.right-btn-wrap {
  gap: 10px;
flex: auto;
}
  h3.sub-category {
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
}
  .left-side-player .player-body-card {
    position: relative;
    flex-direction: column;
    gap: 15px;
}
.left-side-player .player-body-card .side-card {
  width: 100%;
}
.left-side-player .player-body-card .track-card {
  width: 100%;
}
  .transactions-top-area .action-view{
    flex-wrap: wrap;
  }
  .transactions-top-area .action-view .btn{
    margin-left: 0;
  }
  .upgrade-popup.signup-modal .modal-content {
    padding: 50px 25px 40px 25px;
}
  .header-search{
    display: none;
  }
  .songs-you-like .song-box .each-song-box .bottom-info .artist-detail .song-name{
    max-width: 260px;
  }
  .latest-comment-track .inner-box{
    display: flex;
    justify-content: center;
    gap: 11px;
    flex-direction: column;
  }
  .latest-comment-track.download-wrap .inner-box{
    flex-direction: row;
    justify-content: space-between;
  }
  .file-download .top-wrap{
    flex-direction: column;
    gap: 15px;
    align-items: normal;
  }
  .upgrade-popup .modal-content{
    padding: 60px 20px 30px 20px;
  }
  .sound-controll .icon-wrapper{
    padding: 10px 10px;
  }
  .upgrade-popup .close{
    top: 20px;
    right: 30px;

  }
  .song-box .each-song-box{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .loop-btn-wrap{
    flex-direction: column;
    margin-bottom: 0;
    margin-top: 10px;
  }
  .player-side-bar p{
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .track-seek-bar {
    left: 10px;
    max-width: calc(100% - 10px);
  }
  .player-body-card .track-card {

    padding-left: 10px;

}




  /* .player-body-card .side-card{
    transform: translateX(-285px);
    transition: all 0.5s ease;
  }
  .player-body-card .side-card.active{
    transform: translateX(0);
  } */

  .player-body-card .side-card {
    width: 85px;
}
.player-body-card .track-card {
  width: calc(100% - 85px);
}
  .player-wrapper input[type="range"]{
    width: 260px;
  }
  .player-controll{
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }
}

@media(max-width:1300px){
    table thead th, table tbody td,.table {
        padding: 15px 10px !important;
    }

}

@media(min-width:576px){
  .loop-modal .modal-dialog{
    max-width: 620px;
  }
}


.all-comments.comment-wrap > div {
    clear: both;
}



@media(max-width:480px){
  .artist-slider .image-wrapper img{
    height: 520px;
  }
}

@media(min-width:767px){
  .mobile-player-header .sound-controll.master-controller .icon-wrapper{
    flex: 0 0 250px;
  }
  .artist-slider  .slick-list{padding:0 10% 0 0 !important;}
}
@media(min-width:1260px){
  .row .song-listview{
    /* padding-right: 40px; */
  }
}
@media(min-width:1200px){
  .right-side-comment.player-wrapper{
    margin-left: 50px;
  }
}
@media(min-width:550px) and (max-width:800px){
  .mobile-player-header .top-part, .mobile-player-header .bottom-part {
    display: flex;
    gap: 20px;       margin-bottom: 28px;        align-items: start;
}
.mobile-player-header .sound-controll.master-controller .icon-wrapper{
  flex: 0 0 200px;
  padding: 10px;
}
.mobile-player-header .top-part > div,.mobile-player-header .bottom-part > div{
  flex: 1;        margin: 0 !important;
}
.mobile-player-header  .sound-controll .icon-wrapper a{
  min-height: 35px;
  min-width: 35px;
}
.mobile-player-header .sound-controll .duration-wrapper{
  padding: 10px 10px;
}
.mobile-player-header .bottom-part .d-flex.justify-content-between,
.mobile-player-header .top-part .d-flex.justify-content-between{
  flex-direction: row-reverse;
  justify-content: start !important;
  gap: 25px;
}
.mobile-player-header a.comment-field{
  padding: 15px 15px;
}
}
@media(min-width:1024px) and (max-width:1250px){
  .tempo-detail .table-extra-small-btn{
    font-size: 9.5px;
  }
  .tempo-detail .status{
    font-size: 12px;
  }
  .tempo-detail{
    gap: 7px;    font-size: 13px;

  }
  .tempo-detail .tune svg,.tempo-detail .tempo svg{
    height: 17px;
    width: 17px;

  }
  .tempo-detail > div{
    gap: 4px;
  }
  .tempo-detail .table-extra-small-btn{    padding: 9px 8px 7px 8px;}
  .player-controll {
    flex-direction: row;    gap: 12px;
}
.sound-controll .icon-wrapper {
  padding: 10px 10px;
}
.sound-controll .duration-wrapper{
  padding: 10px 10px;    min-width: 72px;
}
.sound-controll .icon-wrapper a{
  min-height: 33px;
  min-width: 33px;
}
.player-wrapper .player-main-bar .player-header-bar {
  flex-direction: row;
  gap: 12px;
}
.right-controller {
  display: flex;
  gap: 8px;
}
a.comment-field{
  padding: 10px 10px;
}
}

/* Media Query End Here */



.market-filter-item select,
.market-filter-item input[type=number] {
  min-height: 34px;
  width: auto;
  margin-bottom: 0;
  display: inline-block;
}

/* Market filters */
.market-filter-item select,
.market-filter-item input[type=number] {
  min-height: 32px;
  width: auto;
  margin-bottom: 0;
  display: inline-block;
}

/* Market filters override - high specificity */
.market-section .market-filter-item select,
.market-section .market-filter-item input {
  min-height: 32px;
  width: auto;
  margin-bottom: 0;
  display: inline-block;
  padding: 5px 10px;
}

/* Market filter overrides */
.market-section form select,
.market-section form input[type=number] {
  height: auto;
  min-height: 32px;
  width: auto;
  min-width: 0;
  margin-bottom: 0;
  margin-right: 0;
  display: inline-block;
  padding: 5px 10px;
}

.market-list-view { margin-bottom: 12px; }
.market-list-view .inner-box { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; gap: 16px; }
.market-list-view .inner-box:hover { border-color: rgba(175,168,247,0.3); }
.market-list-view .left-part { display: flex; align-items: center; gap: 16px; flex: 1; }
.market-list-view .songs-thumb-wrap { display: flex; align-items: center; gap: 12px; }
.market-list-view .list-song-img { width: 56px; height: 56px; min-width: 56px; border-radius: 8px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.market-list-view .song-detail { min-width: 0; }
.market-list-view .song-name { color: #fff; font-size: 0.9rem; font-weight: 600; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-list-view .song-name:hover { color: #AFA8F7; }
.market-list-view .image-thumb img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.market-list-view .artist-name a { color: rgba(255,255,255,0.5); font-size: 0.78rem; text-decoration: none; }
.market-list-view .tempo-detail { margin-right: 6px; }
.market-list-view .status.sale { font-size: 0.65rem; padding: 2px 8px; border-radius: 10px; background: rgba(175,168,247,0.15); color: #AFA8F7; }
.market-list-view .right-part { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.market-list-view .sales-count { color: rgba(255,255,255,0.3); font-size: 0.75rem; }
.market-list-view .amount-text.positive { color: #AFA8F7; font-size: 1rem; font-weight: 700; }
.market-list-view .cart-mobile a { display: flex; align-items: center; gap: 6px; padding: 6px 14px; background: linear-gradient(90deg,#AFA8F7,#EA9AA2); border-radius: 8px; color: #fff; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }


/* ===== PLAYER COMMENTS OFFCANVAS ===== */
#offcanvasRight {
  background: #0f0f1a;
  border-left: 1px solid rgba(255,255,255,0.08);
  width: 360px;
}
#offcanvasRight .offcanvas-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#offcanvasRight .offcanvas-body {
  padding: 16px;
}
.comment-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.comment-card:hover { border-color: rgba(175,168,247,0.3); }
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.comment-header .username span {
  color: #AFA8F7;
  font-size: 0.85rem;
  font-weight: 700;
}
.comment-header .specify-time span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 10px;
  font-family: monospace;
}
.comment-body p {
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  margin: 0 0 8px;
  line-height: 1.5;
}
.comment-footer { font-size: 0.75rem; color: rgba(255,255,255,0.25); }
.reply-button {
  color: rgba(175,168,247,0.7);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: none;
}
.reply-button:hover { color: #AFA8F7; }

/* Bouton Add Comment */
#btnaddcomment {
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 10px;
  background: rgba(175,168,247,0.15);
  border: 1px solid rgba(175,168,247,0.3);
  border-radius: 8px;
  color: #AFA8F7;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: block;
}
#btnaddcomment:hover { background: rgba(175,168,247,0.25); }

/* Formulaire commentaire */
.offcanvas-footer {
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.offcanvas-footer #payment-form input[type=text],
.offcanvas-footer #reply-form input[type=text] {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
  margin-bottom: 10px;
  font-family: Poppins, sans-serif;
}
.offcanvas-footer #btnsubmit,
.offcanvas-footer #replyBtnId {
  width: 100%;
  padding: 10px;
  background: linear-gradient(90deg, #AFA8F7, #EA9AA2);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Poppins, sans-serif;
}

.comment-alert {
  background: rgba(175,168,247,0.15);
  border: 1px solid rgba(175,168,247,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  color: #AFA8F7;
  font-size: 0.85rem;
  margin-bottom: 12px;
  text-align: center;
}

/* ===== PLAYER HEADER REFINEMENT ===== */
.player-side-bar h4 {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px !important;
}
.player-side-bar h4 img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px;
  object-fit: cover;
}
.player-side-bar h4 a {
  color: rgba(255,255,255,0.5) !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
}
.player-side-bar h4 a:hover { color: #AFA8F7 !important; }

/* Tempo detail */
.tempo-detail {
  gap: 10px !important;
  align-items: center;
  flex-wrap: wrap;
}
.tempo-detail .tune,
.tempo-detail .tempo {
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.8rem !important;
}
.tempo-detail .tune svg,
.tempo-detail .tempo svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.5;
}
.tempo-detail .status {
  font-size: 0.65rem !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.tempo-detail .status.demo { background: rgba(251,191,36,0.15) !important; color: #fbbf24 !important; border: none !important; }
.tempo-detail .status.final { background: rgba(175,168,247,0.15) !important; color: #AFA8F7 !important; border: none !important; }
.tempo-detail .status.sale { background: rgba(234,154,162,0.15) !important; color: #EA9AA2 !important; border: none !important; }

/* Buy button */
.tempo-detail .table-extra-small-btn {
  font-size: 0.75rem !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(90deg, #AFA8F7, #EA9AA2) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
}

/* Boutons M/S master */
.track-button.master-mute,
.track-button.master-solo {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.72rem !important;
  border-radius: 6px !important;
}

/* Boutons play/pause/prev/next */
.player-header-bar .icon-wrapper a {
  font-size: 0.875rem !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Volume */
#volume-master {
  width: 80px !important;
  height: 3px !important;
  accent-color: #AFA8F7 !important;
}

/* Duration */
#currenttime-m-s {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: monospace !important;
}

/* ===== PLAYER CONTROLS SIZE REDUCTION ===== */
.player-header-bar .sound-controll .icon-wrapper {
  padding: 6px 10px !important;
}
.player-header-bar .sound-controll .icon-wrapper a i.fa-solid::before {
  font-size: 13px !important;
}
.player-header-bar .sound-controll .duration-wrapper {
  padding: 6px 14px !important;
  min-width: 90px !important;
}
.player-header-bar .duration-wrapper span {
  font-size: 13px !important;
}
.player-header-bar .track-button.master-mute,
.player-header-bar .track-button.master-solo {
  width: 26px !important;
  height: 26px !important;
  font-size: 0.7rem !important;
  line-height: 26px !important;
  padding: 0 !important;
}
.player-header-bar .audio-sound-controll #volume-master {
  width: 70px !important;
}

/* ===== PLAYER CONTROLS - FORCE OVERRIDE ===== */
.player-header-bar .sound-controll .icon-wrapper a {
  min-width: 28px !important;
}
/* ===== RIGHT ACTION BUTTONS ===== */
.right-controller .action-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.right-controller .action-wrapper a {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}
.right-controller .action-wrapper a svg {
  width: 15px !important;
  height: 15px !important;
}
.right-controller .action-wrapper a i {
  font-size: 13px !important;
}

/* ===== INSTRUMENT VOLUME SLIM ===== */


/* ============================================================
   STEMZ PLAYER — SIDEBAR BANDLAB STYLE (Session 3)
   ============================================================ */

/* --- Largeur sidebar / track area --- */
.player-wrapper .player-side-bar,
.player-body-card .side-card {
  width: 240px !important;
}
.player-wrapper .player-main-bar,
.player-body-card .track-card {
  width: calc(100% - 240px) !important;
}

/* --- Hauteur de piste unifiée --- */
.player-body-card {
  height: 72px;
}
.player-body-card .side-card,
.player-body-card .track-card {
  height: 72px;
}

/* --- instrument-wrapper : une seule ligne BandLab --- */
.instrument-wrapper {
  border-radius: 0 !important;
  padding: 0 10px 0 0 !important;
  height: 72px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: #1a1b2e !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  position: relative !important;
  overflow: hidden;
}

/* Bande couleur à gauche (4px, sans arrondi) */
.instrument-wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 4px !important;
  border-radius: 0 !important;
}

/* Icône + nom */
.side-card .title {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
}
.side-card .title span {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(255,255,255,0.85) !important;
}
.side-card .title span img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.side-card .title span i {
  font-size: 16px !important;
  opacity: 0.7;
}

/* Slider volume horizontal compact */
.side-card .instrument-wrapper input[type=range] {
  width: 52px !important;
  height: 3px !important;
  accent-color: #AFA8F7 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* Boutons M/S inline (plus d'absolute) */
.instrument-wrapper .track-buttons {
  display: flex !important;
  position: static !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
.instrument-wrapper .track-button {
  min-height: 22px !important;
  min-width: 22px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 0.65rem !important;
  border-radius: 4px !important;
  background-color: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.7) !important;
}
.instrument-wrapper .track-button.mute {
  margin-right: 0 !important;
}
.track-button.mute.active {
  background-color: #1E6F8C !important;
  border-color: #1E6F8C !important;
  color: #fff !important;
}
.track-button.solo.active {
  background-color: #AE8231 !important;
  border-color: #AE8231 !important;
  color: #fff !important;
}

/* --- Track item hauteur fixe --- */
.track-card .track-item {
  height: 72px !important;
  min-height: 72px !important;
}
.track-card .track-item span {
  font-size: 0.68rem !important;
  padding: 3px 8px !important;
  background-color: rgba(0,0,0,0.35) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.track-card .track-item .tack-image img {
  height: 72px !important;
  width: 100% !important;
  object-fit: cover !important;
  margin-top: 0 !important;
  opacity: 0.6;
}
.track-card {
  padding-left: 0 !important;
}
/* ===== PLAYER WRAPPER LAYOUT FIX ===== */
.player-wrapper {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  height: auto !important;
}
.player-wrapper .player-side-bar {
  width: 100% !important;
  height: auto !important;
  padding: 12px 16px 8px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: #13131f !important;
}
.player-wrapper .player-main-bar {
  width: 100% !important;
  height: auto !important;
}
/* ===== PLAYER HEADER SINGLE LINE FIX ===== */
.player-wrapper .player-side-bar {
  padding: 10px 16px !important;
}
.player-wrapper .player-side-bar .tempo-detail {
  display: none !important;
}
.player-header-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 44px !important;
  padding: 0 16px 0 240px !important;
  background: #13131f !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.ph-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.ph-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}
.ph-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
/* ===== PLAYER SONG TITLE CENTERED ===== */
.player-wrapper .player-side-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  background: #13131f !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
h4.player-song-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}
h4.player-song-title img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
}
.player-song-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.player-song-info .song-name {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}
.player-song-info a {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}
.player-wrapper .player-side-bar .tempo-detail {
  display: none !important;
}
/* ===== PLAYER HEADER UNIFIED ===== */
.player-wrapper .player-side-bar {
  display: none !important;
}
.player-header-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 52px !important;
  padding: 0 16px !important;
  background: #13131f !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  gap: 16px !important;
}
.player-wrapper .player-main-bar {
  background: #13131f !important;
}
section.primary-bg.pt-5 {
  background: #0f0f1a !important;
}
.ph-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 200px;
}
.ph-title img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.ph-title-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.ph-title-info span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-title-info a {
  font-size: 0.68rem !important;
  color: rgba(255,255,255,0.4) !important;
  font-weight: 400 !important;
}
section.primary-bg.pt-5 {
  padding-top: 0 !important;
}
/* ===== PLAYER HEADER PILLS STYLE ===== */
.ph-meta-item {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.ph-meta-sep {
  display: none !important;
}
.ph-controls {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  gap: 2px !important;
}
.ph-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  color: rgba(255,255,255,0.7) !important;
  background: transparent !important;
}
.ph-btn:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
.ph-btn-play {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
.ph-timer {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.7) !important;
  font-family: monospace !important;
  min-width: auto !important;
}
.ph-volume {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  gap: 8px !important;
}
.ph-actions {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  gap: 2px !important;
}
.ph-action-btn {
  border-radius: 50% !important;
  width: 26px !important;
  height: 26px !important;
}
.ph-action-btn:hover {
  background: rgba(255,255,255,0.12) !important;
}
/* ===== PLAYER HEADER FIXES ===== */
/* Texte blanc dans les pills */
.ph-meta-item {
  color: rgba(255,255,255,0.95) !important;
}
.ph-timer {
  color: rgba(255,255,255,0.95) !important;
}

/* Play centré dans son cercle */
.ph-btn-play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ph-btn-play svg {
  margin-left: 2px;
}

/* Boutons droite — restaurer pointer-events */
.ph-action-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ph-actions a[data-bs-toggle] {
  pointer-events: auto !important;
}
/* ===== OFFCANVAS DARK THEME ===== */
#offcanvasRight,
#offcanvasRight1,
#offcanvasRight2 {
  background: #0f0f1a !important;
  color: #fff !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
}
#offcanvasRight .offcanvas-body,
#offcanvasRight1 .offcanvas-body,
#offcanvasRight2 .offcanvas-body {
  color: #fff !important;
}
#offcanvasRight p,
#offcanvasRight1 p,
#offcanvasRight2 p {
  color: rgba(255,255,255,0.8) !important;
}
#offcanvasRight .btn-close,
#offcanvasRight1 .btn-close,
#offcanvasRight2 .btn-close {
  filter: invert(1) !important;
}
/* FIX PAUSE BUTTON */
#pause[style*="display: inline-flex"],
#pause[style*="display:inline-flex"] {
  display: inline-flex !important;
}
/* ===== FORCE PAUSE BUTTON VISIBILITY ===== */
#pause {
  display: none !important;
}
.is-playing #pause {
  display: inline-flex !important;
}
a#pause[style] {
  display: inline-flex !important;
}
/* ===== FIX PLAY/PAUSE TOGGLE ===== */
a#play.ph-btn-play[style*="display: none"],
a#pause.ph-btn-play[style*="display: none"] {
  display: none !important;
}
a#pause.ph-btn-play {
  display: none !important;
}
a#pause.ph-btn-play[style*="inline-flex"] {
  display: inline-flex !important;
}
/* ===== FIX ACTION ICONS SIZE ===== */
.ph-action-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
.ph-action-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
}
/* ===== WAVESURFER ===== */
.wavesurfer-container {
  width: 100% !important;
  height: 72px !important;
  cursor: pointer !important;
}
.tack-image {
  width: 100% !important;
  height: 72px !important;
  overflow: hidden !important;
}
/* ===== VU-METRE ===== */
.ph-vumeter {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 3px;
  height: 32px;
}
#vu-meter {
  display: block;
}
/* ===== VU-METRE + VOLUME WIDGET ===== */
.ph-volume-vu {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  height: 32px !important;
}
.ph-vu-slider-wrap {
  position: relative;
  width: 100px;
  height: 24px;
  display: flex;
  align-items: center;
}
#vu-meter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px !important;
  height: 24px !important;
  pointer-events: none;
  border-radius: 4px;
  overflow: hidden;
}
.ph-vu-slider-wrap #volume-master {
  position: relative;
  z-index: 2;
  width: 100px !important;
  height: 3px !important;
  accent-color: rgba(255,255,255,0.9) !important;
  background: transparent !important;
  margin: 0 !important;
}
.ph-vu-slider-wrap #volume-master {
  accent-color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.ph-vu-slider-wrap #volume-master::-webkit-slider-runnable-track {
  background: transparent !important;
  height: 3px !important;
}
.ph-vu-slider-wrap #volume-master::-webkit-slider-thumb {
  box-shadow: none !important;
  background: #fff !important;
}
/* ===== FIX VOLUME SLIDER THUMB ===== */
.ph-vu-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.ph-vu-slider-wrap input[type=range]::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  border: none !important;
}
/* ===== FIX VOLUME SLIDER THUMB ===== */
.ph-vu-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.ph-vu-slider-wrap input[type=range]::-webkit-slider-runnable-track {
  background: transparent !important;
  height: 2px !important;
}
input.vu-volume-slider::-webkit-slider-thumb {
  box-shadow: none !important;
  width: 12px !important;
  height: 12px !important;
  background: #fff !important;
  border-radius: 50% !important;
  -webkit-appearance: none !important;
}
input.vu-volume-slider::-webkit-slider-runnable-track {
  background: transparent !important;
  height: 2px !important;
}
.vu-custom-slider {
  position: relative;
  width: 80px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  z-index: 3;
}
.vu-custom-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}