@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table {border-collapse:collapse;border-spacing:0;}
hr {display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select {vertical-align:middle;}
a:hover, a:focus{ outline: none; text-decoration: none;}
body{font-family: 'Inter', sans-serif; overflow-x: hidden;}
html{overflow-x: hidden;}

/*LOGIN AND REGISTER*/
/*Header Top*/
.bodybg{background: #161818; background: url(../images/bg1.jpg) center center no-repeat; background-size: cover; height: 100vh;} 
.bodybg section{padding: 50px 0;}

/*HEADER*/
a{text-decoration: none; transition: all 0.5s ease;}
p{font-size: 14px; color: #fff; line-height: 24px;}
header{padding: 10px 0; background: #161a1a;}
header .logo{padding: 5px 0;}
.logo img{max-width: 270px;}
header .menu{margin-right: 30px;}
.menu ul{padding: 0; margin: 0;}
.menu ul li{list-style: none; display: inline-block; margin-left: 30px;}
.menu ul li a{font-size: 18px; color: #fff; font-weight: 500;}
header .login-btn{padding: 5px 30px; font-size: 16px; border-radius: 8px; margin-left: 20px;}
.btn{border-radius: 5px; box-shadow: none !important;}
.btn-danger{background: #ff0137; border-color: #ff0137;}
.btn-primary{background: #1877f2; border-color: #1877f2;}
.white-btn{border-color: #fff; color: #fff;}
.login-section h3{font-size: 28px; color: #fff;}
.login-section .form-group{margin-bottom: 25px;}
.login-section .form-group label{display: block; font-size: 18px; color: #868b90; margin-bottom: 10px;}
.login-section form input{height: 50px; border-radius: 8px; font-size: 16px; border:1px solid #fff; background: none !important; color: #fff !important;}
.login-section .form-group.validate input{border-color: #ff0137;} 
.form-group .form-control{box-shadow: none !important; outline: none !important;}
form .form-group{position: relative;}
.form-group .verify{color: #7fd6dc; background: #e5f7f8; width: 25px; height: 25px; border-radius: 50%; line-height: 25px; font-size: 14px; text-align: center; display: block; position: absolute; top: 38px; right: 10px; z-index: 9;}
.login-section p, .login-section p a{font-size: 18px; color: #868b90;}
.login-section p a{text-decoration: underline;}
.login-section p a:hover, .login-section p a:focus{color: #ff0137;}
.border-line{font-size: 16px; color: #fff; margin: 30px 0; position: relative; text-align: center;}
.border-line:before{background: url(../images/border-line.png) no-repeat; content: ""; width: 132px; height: 1px; display: table; margin: -12px auto;}
.border-line span{padding: 10px 7px; color: #868b90;}
.form-control:focus{border-color: #fff;}
.login-section .btn{font-size: 18px; padding: 12px; border-radius: 12px;}
/*LOGIN AND REGISTER END*/

/*Welcome Page*/
.welcome-bg{background: url(../images/bg2.jpg) center center no-repeat;}
.welcome-section{padding: 100px 0 60px !important;}
.welcome-section h1{font-size: 68px; font-weight: 600; color: #fff; margin-bottom: 20px;}
.welcome-section p{font-size: 20px; line-height: 30px; color: #868B90;}
.welcome-section .btn{padding: 10px 80px; margin-right: 20px; font-size: 18px; font-weight: 600; text-transform: uppercase;}
.red-border{border-color: #ff0137;}

/*Home*/
.blacktheme{background: #121317;}
aside{position: fixed; top: 0; bottom: 0; left: 0; width: 320px; height: 100vh; z-index: 999; background: #000;}
.blacktheme header{padding-right:}
header .inputbox{position: relative;}
header .inputbox input{width: 210px; height: 40px; font-size: 18px; border-radius: 50px; background: #666 !important; padding: 10px 10px 10px 50px; border:none; color: #fff !important;}
.btn, .form-control{box-shadow: none !important; outline: none !important;}
header .inputbox span{position: absolute; top: 11px; left: 15px; color: #fff;}

.header-right .inputbox, .header-right .dropdown{display: inline-block;}

header input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(255, 255, 255, 1) !important;
}

header input::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 1) !important;
}

header input:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255, 255, 255, 1) !important;
}

header input:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(255, 255, 255, 1) !important;
}

.header-right .dropdown{margin-left: 30px;}
.header-right .dropdown .avatar{display: inline-block; vertical-align: middle; margin-right: 5px;}
.header-right .dropdown .avatar img{width: 25px; vertical-align: top;}
.header-right .dropdown .btn{background: none !important; border:none !important; box-shadow: none !important; color: #fff; padding: 0;width: auto;}
.header-right .dropdown ul{background: #222;}
.header-right .dropdown ul li{margin-bottom: 10px;}
.header-right .dropdown ul li a{font-size: 13px; color: #fff;}
.header-right .dropdown ul li a:hover, .header-right .dropdown ul li a:focus{background: none; color: #ff0137;}
.mobile-toggle, .mobile-close{display: none;}
header .dropdown-toggle::after {display: none;}
header .dropdown-toggle .down-arrow{width: 10px;}

aside .logo-side{padding: 30px;}
aside .logo-side img{max-width: 250px; margin-bottom: 30px;}
aside .side-menu ul{padding: 0; margin: 0;}
aside .side-menu ul li{list-style: none; display: block; }
aside .side-menu ul li a{color: #fff; font-size: 18px; font-weight: 400; padding: 15px 45px; display: block;}
aside .side-menu ul li a img{width: 20px; margin-right: 15px; vertical-align: middle;}
aside .side-menu ul li.active a{border-left: 2px solid #FE0235;}
aside .side-menu ul li a:hover, aside .side-menu ul li a:focus ,aside .side-menu ul li.active a{color: #FE0235;} 

.side-menu2{padding: 0 30px;}
.side-menu2 ul{border-bottom: 1px solid #fff; padding-bottom: 20px !important; margin-bottom: 20px !important;}
.side-menu2 li a{padding: 0 !important;}
.side-menu2 li a img{width: 30px !important; vertical-align: middle;}

.side-menu2 h5{font-size: 18px; color: #fff;}
.install-app{font-size: 18px; color: #fff;}
.install-app img{vertical-align: top; margin-right: 10px; position: relative; top: -2px;}

.right-sidebar{margin:0 0 0 300px; padding: 25px 50px 100px 70px; background: #1b1c20;}
.big-heading h3{font-size: 32px; font-weight: 600; color: #fff; margin-bottom: 10px;}
.big-heading p{font-size: 20px; color: #fff;}

.trackbox{border-radius: 8px; overflow: hidden; position: relative;}
/* .trackbox img{width: 100%;} */
.trackbox .cover-image{width: 100%;}
.trackbox-inner{position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 20px;}
.trackbox-inner .track-thumb img{border-radius: 8px; width: 100%; object-fit: cover;} 
.track-right .track-content h4{font-size: 20px; font-weight: 600; color: #eb9cd0; margin-bottom: 10px; text-transform: uppercase;}
.track-right .track-content p{font-size: 11px; color: #fff; font-weight: 500; line-height: 16px;}
.trackbox .track-right{margin-top: 5px;}
.trackbox .track-bottom{position: absolute; bottom: 10px; right: 20px;}
.trackbox .track-bottom p{font-size: 10px; line-height: 16px; color: #fff;}
.trackbox .play1{position: relative; top: -25px;} 
.trackbox .play1 img{width: 40px;}
.seeall{font-size: 18px; color: #fff;}
.trackbox2 .track-content h4{color: #969FBC;}
.trackbox3 .track-content h4{color: #8CCAA1;}

.playbox{border-radius: 8px; overflow: hidden; position: relative; background: #c585f8; margin-bottom: 15px;}
/*.playbox:before{background: url(../images/left-curve.png) repeat-y; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 9;}*/
.playbox img{width: 100%;}
.blacktheme section{padding: 30px 0;}
.dotmore{position: absolute; bottom: -10px; right: -10px; z-index: 9;}
.playbox-content p{font-size: 14px; color: #fff; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.playbox-content .favourite{font-weight: 400; color: #868b90; margin-top: 0;}
.recently-play-slider .owl-nav{position: absolute; top: -40px; right: 0; color: #fff; font-size: 20px; z-index: 9;}
.recently-play-slider .owl-nav .owl-prev{position: absolute; top: 0; right: 30px; z-index: 9;}

.playlist .trackbox:before{position: absolute; top: 0; bottom: 0; right: 0; background: url(../images/corner-black.png) no-repeat right top; content: ""; width: 100%; height: 100%;}
.best-artist .playbox-image{border-radius: 50%; overflow: hidden; margin-bottom: 15px;}

/*Audio Player*/
.audio-player{position: fixed; bottom: 0; left: 0; right: 0; background: #1b1c20; padding: 10px; z-index: 999;}
.album-title h3{font-size: 20px; color: #fff; margin: 0 0 3px;}
.album-title p{font-size: 16px; color: #CAD0D8; margin: 0;}
.album-check img{width: 20px; margin-left: 10px;}
.audio-player .volume{margin-left: 20px;}

.player-controls ul{padding: 0; margin: 0;}
.player-controls ul li{list-style: none; display: inline-block; margin-left: 50px;}
.player-controls ul li img{width: 20px;}
.volume-progress{position: relative; top: -4px; width: 40%; height: 2px; background: #99999f; display: inline-block; vertical-align: middle; margin-left: 10px;}
.volume-inner{position: absolute; width: 50%; height: 100%; background: #fff; z-index: 9;}
.volume-check{}

/*Audio Script*/
#audio-player-container button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    width: 40px;
    height: 40px;
    float: left;
}
#audio-player-container {
      --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
    position: relative;
    /*width: 100%;
    max-width: 100%;
    height: 132px;*/
}
#audio-player-container::before {
    position: absolute;
    content: '';
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    left: -2px;
    top: -2px;
    z-index: -1;
}

#play-icon {
    margin: 20px 2.5% 10px 2.5%;
}
#audio-player-container path {
    stroke: #007db5;
}
#audio-player-container .time {
    display: inline-block;
    width: 37px;
    text-align: center;
    font-size: 14px;
    margin: 0;
    display: inline-block;
    color: #fff;
}
#audio-player-container output {
    display: inline-block;
    width: 32px;
    text-align: center;
    font-size: 20px;
    margin: 0;
    display: inline-block;
}
#volume-slider {
    margin: 10px 2.5%;
    width: 58%;
}
#volume-slider::-webkit-slider-runnable-track {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::-moz-range-track {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::-ms-fill-upper {
    background: rgba(0, 125, 181, 0.6);
}
#volume-slider::before {
    width: var(--volume-before-width);
}
#mute-icon {
    margin: 0 2.5%;
}
input[type="range"] {
    position: relative;
    -webkit-appearance: none;
    width: 70%;
    margin: 0;
    padding: 0;
    height: 19px;
    margin: 10px 5px;
    display: inline-block;
    outline: none;
    background: none; box-shadow: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #ff0137;
}
input[type="range"]::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: var(--seek-before-width);
    height: 2px;
    background-color: #ff0137;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 1px solid #fff;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    margin: -7px 0 0 0;
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
    background: #ff0137;
}
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: #81868c;
}
input[type="range"]::-moz-range-progress {
    background-color: #ff0137;
}
input[type="range"]::-moz-focus-outer {
    border: 0;
}
input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    border: 1px solid #fff;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
    background: #ff0137;
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    background: transparent;
    border: solid transparent;
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background: #ff0137;
}
input[type="range"]::-ms-fill-upper {
    background: linear-gradient(to right, rgba(0, 125, 181, 0.6) var(--buffered-width), rgba(0, 125, 181, 0.2) var(--buffered-width));
}
input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    border: 1px solid #007db5;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}
input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
    background: #007db5;
}
/*End*/

/*Create Store*/
.big-btn{padding: 12px 10px; font-size: 14px; font-weight: 600;}

/*Custom Radio and Checkbox*/
input[type=checkbox],input[type=radio]{opacity:0;position:absolute;z-index:12;width:18px;height:18px;}
input[type=checkbox]:checked,input[type=radio]:checked,input[type=checkbox]:focus,input[type=radio]:focus{outline:none !important;}
input[type=checkbox]+.lbl,input[type=radio]+.lbl{position:relative;z-index:11;display:inline-block;margin:0;line-height:20px;min-height:14px;min-width:14px;font-weight:normal;}
input[type=checkbox]+.lbl.padding-16::before,input[type=radio]+.lbl.padding-16::before{margin-right:16px;}
input[type=checkbox]+.lbl.padding-12::before,input[type=radio]+.lbl.padding-12::before{margin-right:12px;}
input[type=checkbox]+.lbl.padding-8::before,input[type=radio]+.lbl.padding-8::before{margin-right:8px;}
input[type=checkbox]+.lbl.padding-4::before,input[type=radio]+.lbl.padding-4::before{margin-right:4px;}
input[type=checkbox]+.lbl.padding-0::before,input[type=radio]+.lbl.padding-0::before{margin-right:0px;}
input[type=checkbox]+.lbl::before,input[type=radio]+.lbl::before{font-family:fontAwesome;font-weight:normal;font-size:11px;color:#FF0137;content:"\a0";background-color:none;border:1px solid #FF0137;border-radius:0;display:inline-block;text-align:center;vertical-align:middle;height:17px;line-height:15px;min-width:17px;margin-right:1px; margin-top: -5px;}
input[type=checkbox]:checked+.lbl::before,input[type=radio]:checked+.lbl::before{display:inline-block;content:'\f00c';background-color:none;border-color:#FF0137;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05),inset 15px 10px -12px rgba(255, 255, 255, 0.1);}
input[type=checkbox]:hover+.lbl::before,input[type=radio]:hover+.lbl::before,input[type=checkbox]+.lbl:hover::before,input[type=radio]+.lbl:hover::before{border-color:#1c7aad;}
input[type=checkbox]:active+.lbl::before,input[type=radio]:active+.lbl::before,input[type=checkbox]:checked:active+.lbl::before,input[type=radio]:checked:active+.lbl::before{box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),inset 0px 1px 3px rgba(0, 0, 0, 0.1);}
input[type=checkbox]:disabled+.lbl::before,input[type=radio]:disabled+.lbl::before,input[type=checkbox][disabled]+.lbl::before,input[type=radio][disabled]+.lbl::before,input[type=checkbox].disabled+.lbl::before,input[type=radio].disabled+.lbl::before{background-color:#DDD !important;border-color:#CCC !important;box-shadow:none !important;color:#BBB;}
input[type=radio]+.lbl::before{border-radius:32px;font-family:Arial,Helvetica,sans-serif;font-size:36px;}
input[type=radio]:checked+.lbl::before{content:"\2022";}
input[type="checkbox"] + .lbl::before{border-radius: 4px;}
input[type="checkbox"] + .lbl::before{border-color: #5c5e62;}
input[type=checkbox]:checked+.lbl::before{}

/*End*/

.store-section{background: #121317; padding: 30px 30px 10px 30px !important; margin-bottom: 35px;}
.medium-heading h3{font-size: 30px;}
.radio-group label{font-size: 18px; font-weight: 400; color: #fff; padding: 19px 35px 15px 15px; border-radius: 12px; background: #21242B; margin-right: 35px; box-shadow: 2px 4px 15px 0px #000033; border: 1px solid #2E3349; height: 59px;}
.form-style1 .form-control{padding: 15px 35px 15px 15px; border-radius: 12px; background: #21242B; color: #fff; box-shadow: 2px 4px 15px 0px #000033; border: 1px solid #2E3349; height: 59px;}
.custom-select .form-control{position: relative; background: url(../images/arrow-down.png) no-repeat right center;
    display: block; background-position-x: 95%;}
.form-style1 .form-group{margin-bottom: 25px;}
.form-style1 .form-group label{font-size: 19px; color: #787F86; margin-bottom: 10px;}
.long-btn{padding: 12px 140px;}
.big-btn2{padding: 12px 30px;}

/*Range Slider*/
.range {
  position: relative;
}
.range input[type=range] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  width: 100%;
  height: 22px;
  cursor: pointer;
  display: block;
}
.range input[type=range]:focus {
  outline: none;
}
.range input[type=range][disabled] {
  opacity: 0.3;
  cursor: default;
}
.range .rangeslider {
  position: relative;
  height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.range .rangeslider:before {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.range input::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  margin: 11px 0;
}
.range input::-moz-range-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  margin: 11px 0;
}
.range input::-ms-track {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
  color: transparent;
  padding: 11px 0;
  background: transparent;
  border-color: transparent;
}
.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
  box-sizing: border-box;
  width: 100%;
  height: 4px;
  background: #e6e6e6;
  border-radius: 100px;
}
.range input::-ms-fill-lower {
  background: #60cd18;
}
.range .rangeslider-fill-lower {
  background-color: #60cd18;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  will-change: width;
}
.range input::-webkit-slider-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transform: translateY(-50%);
  margin-top: 2px;
}
.range input::-moz-range-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
}
.range input::-ms-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
}
.range .rangeslider-thumb {
  box-sizing: border-box;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
  border: 6px solid #fff;
  height: 24px;
  width: 24px;
  border-radius: 100px;
  background: #333940;
  cursor: pointer;
  position: absolute;
  touch-action: pan-x;
  top: 50%;
  transform: translateY(-50%);
  will-change: left;
}
.range .range-output {
  position: absolute;
  left: 6px;
  top: 6px;
  transform-origin: 0 0;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.range .range-output .output {
  display: block;
  position: absolute;
  min-width: 60px;
  padding: 10px 10px;
  top: -26px;
  transform: translate(100%, -100%);
  background: #383c42;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
}
.range .range-output .output:before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  border: 10px solid #383c42;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  transform: translateX(-50%);
}
/*End*/

/*Search Page*/
.search-result{padding: 100px 0;}
.search-result h3{font-size: 42px; font-weight: 700; color: #fff; margin-bottom: 15px;}
.search-result p{font-size: 20px; color: #868B90;}

.recently-play-slider2 .owl-nav{position: absolute; top: -40px; right: 0; color: #fff; font-size: 20px; z-index: 9;}
.recently-play-slider2 .owl-nav .owl-prev{position: absolute; top: 0; right: 30px; z-index: 9;}

/*Music Channel*/
.right-sidebar{position: relative;}
.rightspace header{position: absolute; top: 25px; left: 0; right: 0; z-index: 9; background: none; padding-right: 30px;}
.right-sidebar.rightspace{padding: 0 0 100px 70px !important;}
.leftpad .container-fluid{padding-left: 0;}
.music-coverbg{position: relative; padding: 0 !important;}
.music-coverbg h2{font-size: 40px; font-weight: 600; color: #fff; position: absolute; bottom: 70px; left: 40px; z-index: 9;}
.quick-menu ul{padding: 0; margin: 0;}
.quick-menu ul li{list-style: none; display: block; font-size: 18px; margin-bottom: 20px;}
.quick-menu ul li a{color: #4F545A;}
.quick-menu ul li img{width: 6px; vertical-align: middle;}

.topsongs-row{font-size: 18px; color: #fff; border-bottom: 1.5px solid rgba(64, 68, 73, 0.51); padding-bottom: 15px; margin-bottom: 15px;}
.topsongs-row img{width: 15px; margin-left: 5px;}
.topsongs-row span{color: #868B90;}
.topsongs-row label{font-size: 13px; width: 62%; margin-left: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.search-tag ul{padding: 0; margin: 0;}
.search-tag ul li{list-style: none; display: inline-block; margin-right: 10px; margin-bottom: 10px;}
.search-tag ul li a{padding: 10px 10px; border-radius: 4px; background: #21242B; color: #fff; box-shadow: 2px 4px 15px 0px #000; border: 1px solid #2E3349; display: block; font-size: 13px;}
.right-blackbg{background: #000; padding: 0 20px;}
.best-artist2 .playbox-content{margin-bottom: 35px;}

.recommend-channel .playbox-content{margin-bottom: 40px;}

.button-groups ul{padding: 0; margin: 0;}
.button-groups ul li{display: inline-block; margin-left: 15px;}
.button-groups ul li a{height: 50px; width: 50px; line-height: 58px; text-align: center; background: #121317; border-radius: 10px; display: block;}
.button-groups ul li.playall a{width: auto;}
.button-groups .playall-btn{height: 50px; line-height: 27px; padding: 10px 60px; border-radius: 5px; margin-right: 5px;}
.button-groups ul li a:hover, .button-groups ul li a:focus{background: #;}

table tr th{font-size: 19px; color: #fff; font-weight: 600; text-transform: uppercase; padding-bottom: 20px !important;} 
table tr td{font-size: 19px; color: #fff; font-weight: 500; background: #000 !important; padding: 10px !important;}
table tr td{border-bottom: 10px solid #1b1c20 !important;}
.album-thumb img{overflow: hidden; border-radius: 10px; width: 55px;}
table tr th, table tr td{vertical-align: middle !important; border-spacing: 10px;
    border-collapse: separate;}
table .album-flex p{font-size: 18px; font-weight: 500; color: #fff; margin-left: 15px; margin-bottom: 0;}
table p{font-size: 18px; font-weight: 500;}
table p img{vertical-align: top;} 

.blue-text{color: #fff !important;}
.favour-round{width: 40px; height: 40px; line-height: 50px; border-radius: 50%; text-align: center; background: #1d242e;}
.favour-round img{width: 20px;}

/*Profile*/
.profile-image{overflow: hidden;}
.profile-image img{width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.profile-info h3{font-size: 34px; font-weight: 600; color: #fff; margin-bottom: 10px;}
.profile-info h3 img{margin-left: 5px; width: 30px; vertical-align: middle;}
.profile-info p{font-size: 18px; font-weight: 500; color: #7c8db5; margin: 0 0 10px;}
.profile-info .follow-count span{margin-right: 45px;}
.profile-info .follow-count label{color: #fff;}

.music-info h3{font-size: 34px; font-weight: 600; color: #fff; margin-bottom: 10px;}
.music-info p{font-size: 18px; font-weight: 500; color: #7c8db5; margin: 0 0 10px;}
.music-info p span{color: #fff;}
.btn.radius{border-radius: 50px;}

.recent-music .recently-play-slider {border-bottom: 1.3px solid #475066; padding-bottom: 30px;}

.signer-info{background: #111; border-radius: 10px; padding: 20px 80px 20px 20px; position: relative; border: 1px solid #21242b;}
.signer-info .singer-thumb{width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin-right: 20px;}
.signer-info .singer-thumb img{width: 100%; height: 100%; object-fit: cover;}
.signer-info h3{font-size: 24px; font-weight: 600; color: #fff; margin: 0 0 10px;}
.signer-info p{font-size: 18px; font-weight: 600; color: #868b90; margin: 0 0 10px;}
.singer-favour{position: absolute; top: 50%; margin-top: -15px; right: 6%; z-index: 9;}
.singer-favour img{width: 30px;}
.songs-year p{font-size: 24px; font-weight: 500; color: #fff; margin: 0 0 25px;}
.songs-year p label{font-weight: 500; color: #7c8db5;}
.text-upper h3{text-transform: uppercase;}
.songdesc p{font-size: 16px; color: #868b90; margin-top: 30px;}

.musiclog table th, .musiclog table td, .musiclog table p{font-size: 14px;}

.table-select{align-items: center;}
.table-select select{width: 100px; color: #fff !important; border-color: #7c8db5; margin: 0 10px; background-position-x: 85% !important;}
.table-select span{color: #7c8db5;}
.navigation{float: right;}
.paginations ul li a{background: none !important; box-shadow: none; border:none; color: #fff; box-shadow: none !important; outline: none !important;}
.paginations ul li a i{margin-left: 5px;}
.paginations ul li .round{background: #555 !important; box-shadow: none; border:none; color: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin-left: 10px !important; display: block; padding: 0; text-align: center;}
.paginations ul li .page-link.round.active{background: #761228 !important; color: #fff;}

.message-table p{font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 0;}
.message-table p img{vertical-align: middle; margin-top: -3px;}
.message-table .playimg{margin-left: 40px;}
.message-table .btn{padding: 10px 10px;}
.message-table .table-row{background: #121317; padding: 10px; margin-bottom: 10px;}
.message-table .custom-select .form-control{background: url(../images/arrow-down.png) no-repeat right center #21242b; background-position-x: 95%;}
.small-select .form-control{background-position-x: 93% !important;}

.message-show{padding: 30px 30px 30px 45px;}
.upload-photo{background: #21242b; padding: 25px; border:2px dashed #7c8db5; border-radius: 20px;}
.upload-photo p{font-size: 14px; color: #787F86; margin-bottom: 20px;}
.upload-photo p br{display: none;}
.upload-photo .btn{padding: 10px 80px;}
.upload-photo img{width: 90px;}
.label-font .form-group label{font-size: 15px;}
.heading-md h3{font-size: 24px;}
.label-check{font-size: 18px; color: #787F86;}
.blue{color: #1f8ed9;}
.btn-group2 .btn{margin-right: 10px;}
.outline-danger{border-color: #ff0137; color: #ff0137;}
.label-title{position: absolute; top: 45px; right: 15px; z-index: 9; font-size: 14px; font-weight: 500; color: #575c63;}
.label-title-icon{position: absolute; top: 43px; right: 10px; z-index: 9;}
.label-title img{width: 20px;}
.rowgroup .form-control{padding: 10px 30px 15px 10px;}
.btnmd3{padding: 6px 45px; font-size: 14px;}
.cover-bottom{position: absolute; bottom: 0; left: 0; right: 0; padding: 35px;}
.store-cover h2{font-size: 30px; position: unset;}
.Offline{width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; background: #ff0137;}
.online{width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; background: #1da809;}
.cover-bottom select{width: 110px; font-size: 14px; color: #fff !important; background-position-x: 89% !important;}

@media only screen and (max-width: 767px) {
    .btnmd3{padding: 6px 20px;font-size: 14px;}
    .table.dataTable { margin-top: 15px; }
    .table.dataTable tr th { background: #222; border-bottom: #444 1px solid !important; padding: 8px 10px 8px !important}
    .table.dataTable tr th:last-child {text-align: right;}
    .table.dataTable tr td { border-bottom: 2px solid #1b1c20 !important;}
    .table.dataTable tr td:last-child {text-align: right;}
    .table.dataTable tr td p{display: inline;}
    .dataTables_wrapper .dataTables_filter input {margin-top: 10px;}
    .dataTables_wrapper .dataTables_length label {display: block;}
    .dataTables_wrapper .dataTables_length select {display: inline-block;max-width: 70px;margin: 0 10px;}
}