@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0)
  }

  to {
    -moz-transform: rotate(360deg)
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes spin {
  from {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

@keyframes marquee {
  0% {
    transform: translate(100%, 0)
  }

  100% {
    transform: translate(-100%, 0)
  }
}

@-webkit-keyframes marquee {
  0% {
    transform: translate(100%, 0)
  }

  100% {
    transform: translate(-100%, 0)
  }
}

@-moz-keyframes marquee {
  0% {
    transform: translate(100%, 0)
  }

  100% {
    transform: translate(-100%, 0)
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes pulse {
  0% {
    transform: scale(.7)
  }

  50% {
    transform: scale(1.3)
  }

  100% {
    transform: scale(.7)
  }
}

@keyframes spin-reverse {
  from {
    transform: rotate(360deg)
  }

  to {
    transform: rotate(0)
  }
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg)
  }

  100% {
    filter: hue-rotate(360deg)
  }
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -10px 0
  }

  100% {
    background-position: 2000px 0
  }
}

.shimmer::before {
  z-index: 99999;
  animation-duration: 13s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .3) 18%, rgba(255, 255, 255, 0) 33%);
  background-size: 600px 122px;
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: none
}

.spin {
  -webkit-animation: spin 0.5s infinite ease;
  animation: spin 0.5s infinite ease
}

::-webkit-scrollbar {
 display: none,
}

* {
  padding: 0;
  margin: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

body {
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: Oxygen, sans-serif;
  background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1d 100%);
  outline: 0;
}

.feedback {
  width: auto;
  position: fixed;
  bottom: 10px;
  right: 10px;
  transition: .2s !important;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(7px);
  font-size: 14.45px;
  height: 39px;
  text-shadow: 0 0 15px rgba(0, 0, 0, .9);
  box-shadow: 0 0 35px rgba(0, 0, 0, .37);
  padding: 11px 15px;
  color: #fff;
  text-align: center;
  outline: 0;
  border-radius: 5px;
  z-index: 999
}

.miniplayer {
  width: auto;
  position: fixed;
  bottom: 10px;
  right: 155px;
  transition: .2s !important;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(7px);
  font-size: 14.45px;
  height: 39px;
  text-shadow: 0 0 15px rgba(0, 0, 0, .9);
  box-shadow: 0 0 35px rgba(0, 0, 0, .37);
  padding: 11px 15px;
  color: #fff;
  text-align: center;
  outline: 0;
  border-radius: 5px;
  z-index: 999
}

button:focus {
  outline: 0
}

.specialmsg {
  position: fixed;
  left: 0;
  bottom: 0
}

.marquee {
  text-align: left !important;
  -moz-animation: marquee 17s linear infinite;
  -webkit-animation: marquee 17s linear infinite;
  animation: marquee 17s linear infinite;
  transition: .2s
}

.mask {
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)))
}

.italics {
  font-style: italic !important
}

.player {
  height: 300px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  top: -25px;
  left: 0;
  background-color: black;
}

@media (max-width:1250px) {
  .player {
    height: 290px;
    width: 80%;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    top: 10vw;
    left: 10vw;
    border-radius: 10px;
  }
}

.page-content {
  width: 100%;
  margin: 0 auto;
  position: relative;
  border: none;
  box-shadow: none;
  z-index: 1;
  padding-bottom: 100px;
  padding-top: 20px
}

.page-container {
  width: 100%;
  margin-top: -25px;
  height: 100%;
}

.page-background img {
  height: 100%;
  width: 100%;
  object-fit: cover
}

@media (min-width:1250px) {
  .page-content {
    width: 1200px;
    margin: 0 auto
  }
}

@media (max-width:1250px) {
  .page-content {
    top: 300px
  }
}

.pageload {
  position: absolute;
  left: 50%;
  transform: translate(-50%)
}

/* credits to PartydoosMedia (thanks for the contribution) */

.playerbg,
.artistbg,
.roa-bg,
.bg-art,
.loginbox {
    filter: blur(50px) !important;
    opacity: 0.5 !important;
}

.visuals {
    opacity: 0.17 !important;
}

.tt-cont .tt-current,
.tt-bg {
    transform: scale(1.2) !important;
    filter: blur(20px) !important;
    opacity: 0.6 !important;
}

.registerbox img {
    filter: blur(50px) !important;
}

.recent {
    height: 330px !important;
}

.like-sect {
    height: auto !important;
}

a:hover:not(.recent a) {
    opacity: 0.3 !important;
    transition-duration: 0.2s !important;
}

.controlscontainer i:hover:not(.pulse) {
  opacity: 0.3 !important;
  transition-duration: 0.2s !important;
}

a {
    transition-duration: 0.2s !important;
}

.modal {
    backdrop-filter: blur(10px) !important;
}

.content {
    background-color: #0000002e !important;
    border-radius: 10px !important;
}

.requestmodal .closetab {
    padding: 10px !important;
}

.w-full:not(button, p) {
    background-color: #36363626 !important;
    padding: 6.3px !important;
}

.ss-bg {
    filter: blur(5px) !important;
    opacity: 0.2 !important;
}

/* end of contribution */

.playerbg {
  height: 100%;
  width: 57.2%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -2;
  -webkit-filter: brightness(30%);
  filter: brightness(50%);
  transition: .8s ease-in-out;
  clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%)
}

.artistbg {
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  height: 100%;
  width: 57.2%;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  object-fit: cover;
  z-index: -1;
  transition: .8s ease-in-out;
  -webkit-filter: brightness(30%);
  filter: brightness(50%)
}

@media (min-width:1250px) {
  .fulltopstats {
    width: 1200px !important;
    margin: 40px auto 0;
    padding: 20px 0 300px;
    transition: .2s
  }
}

.fulltopstats {
  width: 100%;
  top: -60px;
  position: relative;
  transition: .2s
}

.cover img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  z-index: 1;
  cursor: pointer
}

.albumavatarback {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0 !important
}

.cover {
  width: 110px;
  height: 110px;
  position: absolute;
  top: 115px;
  left: 40px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 50%);
  z-index: 5 !important;
  background-color: rgba(255, 255, 255, .05)
}

.shadow-l {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  transition: all .3s cubic-bezier(.25, .8, .25, 1)
}

.shadow-l:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22)
}

.blur {
  -webkit-filter: blur(20px) saturate(180%) brightness(60%) !important;
  filter: blur(20px) saturate(180%) brightness(60%) !important;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

#marquee {
  width: 100%;
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 1)), color-stop(90%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0)))
}

.pointer {
  pointer-events: none !important
}

.songhtml {
  position: absolute;
  left: 165px;
  top: 50px;
  font-size: 39px;
  text-align: left;
  font-weight: 700 !important;
  width: 100%;
  height: 55px;
  transition: .8s;
  color: #fff
}

.artisthtml {
  position: absolute;
  left: 165px;
  top: 90px;
  font-size: 29px;
  text-align: left;
  font-weight: 400 !important;
  width: 100%;
  height: 55px;
  transition: .8s;
  color: #fff;
  opacity: .7
}

.player-title {
  position: relative;
  left: 0;
  top: -55px;
  width: 35%;
  font-size: 39px;
  text-align: left;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  transition: .2s;
  color: #fff;
  display: block;
  transition: .5s;
  overflow: visible !important;
  white-space: nowrap;
  scrollbar-width: none;
  z-index: 5
}

.player-title::-webkit-scrollbar {
  display: none
}

.player-artist {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  font-size: 29px;
  text-align: left;
  overflow: hidden;
  width: 100%;
  font-weight: 400;
  overflow: hidden;
  display: block;
  transition: .2s;
  z-index: 5
}

.player-presenter-art img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  z-index: 1;
  cursor: pointer
}

.player-presenter-art {
  width: 110px;
  height: 110px;
  position: absolute;
  top: 115px;
  right: 40px;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 50%);
  z-index: 5;
  background-color: rgba(255, 255, 255, .05)
}

.player-presenter {
  position: absolute;
  right: 165px;
  top: 140px;
  z-index: 9;
  font-size: 40px;
  text-align: right;
  overflow: hidden;
  width: 35%;
  font-weight: 700;
  overflow: hidden;
  display: block;
  transition: .2s
}

.live {
  top: 125px;
  transition: .2s ease
}

.boostbar {
  width: 20%;
  position: absolute;
  right: 165px;
  top: 180px;
  height: 15px;
  background-color: rgba(255, 255, 255, .1);
  border-radius: 10px;
  overflow: hidden
}

.bar {
  height: 100%;
  width: 50%;
  background: rgba(255, 255, 255, .5);
  mix-blend-mode: overlay;
  transition: .2s ease;
  backdrop-filter: blur(7px)
}

.pulse {
  animation: pulse ease 2s infinite;
  -webkit-animation: pulse ease 2s infinite;
  -moz-animation: pulse ease 2s infinite;
  -o-animation: pulse ease 2s infinite;
  -ms-animation: pulse ease 2s infinite
}

.controlscontainer {
  position: relative
}

.toggle {
  position: absolute;
  margin-top: 34%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 40px;
  transition: .4s !important;
  z-index: 9;
  text-shadow: 0 0 7px rgba(0, 0, 0, .336)
}

.m-toggle {
  opacity: 0
}

.player .fa-pause {
  /* left: -20px; */
  /* margin-top: 52%; */
  /* font-size: 10px; */
  /* position: relative; */
}

.player .fa-thumbs-up {
  position: absolute;
  left: -29px;
  font-size: 20px;
  top: 10px;
  transition: .2s !important
}

.player .fa-thumbs-down {
  position: absolute;
  left: -29px;
  font-size: 20px;
  top: 85px;
  transition: .2s !important
}

.poll-loading {
  transform: scale(.7);
  opacity: .7;
  transition: .2s !important;
  pointer-events: none;
  cursor: progress
}

.poll-dis {
  opacity: .5;
  pointer-events: none
}

.animate__flip {
  --animate-duration: 1s !important
}

.player .fa-bullhorn {
  /* position: absolute; */
  /* right: -5px; */
  /* font-size: 30px; */
  /* top: 130px; */
  --animate-duration: 0.4s
}

.player .fa-fire {
  position: absolute;
  right: -5px;
  font-size: 30px;
  top: 175px;
  --animate-duration: 0.4s
}

@media (min-width:1250px) {
  .navbar {
    width: 1200px;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%);
    position: absolute
  }
}

.navbar {
  top: 5px;
  z-index: 9;
  position: absolute;
  display: flex;
  justify-content: left;
  flex-wrap: nowrap;
  flex-direction: row
}

.navbar-logo {
  height: 20px;
  z-index: 999999;
  width: auto;
  top: 0;
  position: relative
}

.userbox {
  margin: 5px;
  height: 30px;
  width: 105px;
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 50%);
  backdrop-filter: blur(7px);
  background-color: rgb(0 0 0 / 50%);
}

.userbox h1 {
  font-size: 15px;
  position: relative;
  left: 35px;
  top: 5px;
  display: block;
  font-weight: 400;
  padding-right: 5px;
  width: 90px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 50px;
  animation: fadeIn ease 0.2s
}

.userbox i {
  display: visible;
  font-size: 15px;
  position: relative;
  left: 35px;
  top: 7px;
  display: block;
  padding-right: 10px;
  float: left;
  transition: .2s ease
}

.userbox:hover i {
  animation: fadeIn ease 0.2s
}

.userbox i:hover {
  transition: .2s ease;
  opacity: 1;
  transform: scale(1.2)
}

.userbox:hover h1 {
  display: none
}

.userbox .avatar {
  height: 30px;
  width: 30px;
  position: absolute;
  z-index: 1;
  border-radius: 5px
}

.userbox .bg {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: blur(7px) brightness(70%);
  filter: blur(7px) brightness(70%)
}

.playing {
  bottom: 10px !important
}

.hide {
  /* visibility: collapse !important; */
  /* height: 0 !important; */
  /* width: 0 !important; */
  /* opacity: 0 !important; */
  /* display: none !important; */
}

.hidevolume {
  opacity: 0 !important
}

.field {
  background: #ffffff36;
  border-radius: 8px;
  outline: 0;
  border: none;
  padding: 8px 10px;
  font-size: 14.5px;
  color: #fff;
  width: 90%;
  display: block;
  margin: 5px 5px 5px 10px;
  float: left;
  transition: .2s;
  position: relative;
  z-index: 9999;
  color: #fff
}

.field::placeholder {
  color: rgba(255, 255, 255, .856)
}

.loginbtn {
  float: left;
  z-index: 500;
  outline: 0;
  width: 71%;
  border: none;
  background: #ffffff70;
  border-radius: 8px;
  color: #fff;
  padding: 5px 10px;
  font-size: 14.5px;
  margin: 10px;
  position: relative;
  display: block;
  cursor: pointer;
  color: #fff;
  text-align: center !important;
  transition: .2s
}

.regbtn {
  float: left;
  z-index: 500;
  outline: 0;
  width: calc(100% - 24px);
  border: none;
  background: #ffffff70;
  border-radius: 8px;
  color: #fff;
  padding: 5px 10px;
  font-size: 14.5px;
  margin: 0 10px 10px;
  position: relative;
  display: block;
  cursor: pointer;
  color: #fff;
  text-align: center !important;
  transition: .2s
}

.loginbtn:hover {
  opacity: 1 !important
}

.dropbtn {
  background-color: transparent;
  color: #fff;
  margin: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  outline: 0;
  z-index: 999
}

.dropdown {
  position: relative;
  float: left;
  z-index: 99;
  padding: 0;
  height: auto;
  outline: 0
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 44px;
  width: 180px;
  opacity: 1 !important;
  backdrop-filter: blur(7px);
  background-color: rgba(19, 19, 19, .5);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, .2);
  border-radius: 5px;
  z-index: 9999 !important;
  overflow: hidden;
  font-family: "Open Sans", sans-serif
}

.dropdown-image {
  display: none
}

.dropdown-content .blur {
  filter: blur(7px)
}

.dropdown-content a {
  float: none;
  position: relative;
  color: rgba(216, 216, 216, .8) !important;
  padding: 6px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 999 !important;
  transition: .2s
}

.dropdown-content input {
  float: none;
  position: relative;
  padding: 8px 12px;
  margin: 8px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
  z-index: 99999999;
  transition: .2s
}

.dropdown-content a:hover {
  display: block !important;
  z-index: 999;
  border-radius: 5px;
  color: #fff !important;
  transition: .2s !important
}

.dropdown:hover .dropdown-content {
  display: block !important;
  z-index: 9999;
  animation: fadeIn ease 0.2s;
  -webkit-animation: fadeIn ease 0.2s;
  -moz-animation: fadeIn ease 0.2s;
  -o-animation: fadeIn ease 0.2s;
  -ms-animation: fadeIn ease 0.2s
}

.fadeIn-sp {
  animation: fadeIn ease 0.2s;
  -webkit-animation: fadeIn ease 0.2s;
  -moz-animation: fadeIn ease 0.2s;
  -o-animation: fadeIn ease 0.2s;
  -ms-animation: fadeIn ease 0.2s
}

.glow {
  text-shadow: 0 0 5px #929292;
  transition: .2s
}

.gohomelol:hover {
  text-shadow: 0 0 15px #fff;
  transition: .2s;
  cursor: pointer
}

.gohomelol {
  transition: .2s !important
}

.noglow {
  text-shadow: 0 0 0 rgba(255, 255, 255, 0)
}

a:link {
  color: #fff
}

a:visited {
  color: #fff
}

a:hover {
  color: #fff
}

a:active {
  color: #fff
}

.visuals {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 1 !important;
  mix-blend-mode: overlay !important;
  box-shadow: inset 0 -50px 50px 0 rgb(0 0 0 / 50%) !important;
  -webkit-box-shadow: inset 0 -50px 50px 0 rgb(0 0 0 / 50%) !important;
  pointer-events: none;
  object-fit: cover;
}

.songhistory_songcontainer {
  height: 70px;
  width: 50%;
  margin: 10px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  left: 50%;
  transform: translate(-50%)
}

.songhistory_songcontainer .bgsongrecent {
  height: 100%;
  width: 100%;
  filter: blur(10px);
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover
}

.songhistory_songcontainer p {
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 99;
  font-size: 19px
}

.artforsongrecent {
  height: 60px;
  width: 60px;
  position: absolute;
  top: 5px;
  left: 6px;
  border-radius: 5px
}

.overflowgobrr {
  overflow: hidden !important;
}

.fadeOut {
  animation: fadeOut ease 0.2s;
  -webkit-animation: fadeOut ease 0.2s;
  -moz-animation: fadeOut ease 0.2s;
  -o-animation: fadeOut ease 0.2s;
  -ms-animation: fadeOut ease 0.2s
}

.fadeIn {
  animation: fadeIn ease 0.2s;
  -webkit-animation: fadeIn ease 0.2s;
  -moz-animation: fadeIn ease 0.2s;
  -o-animation: fadeIn ease 0.2s;
  -ms-animation: fadeIn ease 0.2s
}

.art {
  width: 99px;
  height: 99px;
  border-radius: 50%;
  position: absolute;
  z-index: 999;
  top: 100px;
  left: 100px;
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

.vinyl {
  position: absolute;
  z-index: 999;
  top: -25px;
  left: -50px !important;
  width: 250px;
  height: 250px;
  border-radius: 50%
}

.sp-vinyl {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

.sp-background {
  top: 0;
  left: -20%;
  z-index: 1;
  position: absolute;
  width: 150%;
  height: 400vh;
  object-fit: cover;
  filter: brightness(50%);
  transition: .5s ease
}

.collapse {
  visibility: collapse !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important
}

.sp-vinyltemp {
  width: 190px;
  height: 190px;
  margin-top: 30px;
  margin-left: 55px;
  border-radius: 5px;
  transition: .2s
}

.sp-mf {
  border-radius: 5px;
  overflow: hidden;
  width: 350px;
  height: 100px;
  float: left;
  position: relative;
  cursor: pointer;
  margin: 10px
}

.sp-mf p {
  position: absolute;
  z-index: 99;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.sp-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: brightness(50%)
}

.sp-art {
  position: absolute;
  z-index: 99;
  height: 80px;
  width: 80px;
  top: 85px;
  left: 85px;
  border-radius: 50%
}

.sp-t {
  top: 10px;
  left: 100px;
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.sp-a {
  top: 35px;
  left: 100px;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.bg-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  filter: brightness(50%);
}

.gold {
  color: gold
}

.glowgold {
  text-shadow: 0 0 5px gold
}

.sp-bg-art {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  opacity: .4
}

.sp-container {
  position: relative;
  width: 100%;
  height: 200px;
  top: 10px;
  left: 0;
  z-index: 99
}

.sp-title {
  position: absolute;
  top: 55px;
  left: 210px;
  font-size: 40px;
  font-weight: 700;
  white-space: nowrap;
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  max-width: 60%;
  z-index: 99;
  vertical-align: middle
}

.sp-title span {
  font-size: 15px;
  background-color: #2989eb;
  padding: 5px 10px;
  border-radius: 80px;
  vertical-align: middle
}

.sp-artist {
  position: absolute;
  top: 105px;
  left: 210px;
  font-size: 25px;
  font-weight: 100;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 60%;
  z-index: 99;
  mix-blend-mode: overlay
}

.btn {
  padding: 6px 12px;
  margin: 5px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff !important;
  border: none !important;
  border-radius: 5px;
  padding: 10px 12px 8px 15px !important;
  background-color: rgba(255, 255, 255, .1);
  z-index: 999;
  outline: 0
}

.v-spin {
  -webkit-animation: spin 5s infinite linear;
  animation: spin 5s infinite linear;
  transition: 1s
}

.sp-quickmenu {
  position: absolute;
  top: 0px;
  width: 15%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  right: 15px !important;
}

.sp-preview {
  display: block;
  float: right;
  width: 100%;
  margin: 0 !important;
}

.sp-like {
  display: block;
  float: left;
  width: 100%;
  margin: 0 !important;
  margin-bottom: 5px !important;
  margin-top: 10px !important;
  background-color: rgba(16, 185, 129, 0.2) !important;
}

.sp-dislike {
  display: block;
  width: 100%;
  float: left;
  margin: 0 !important;
  margin-bottom: 5px !important;
  background-color: rgba(239, 68, 68, 0.2) !important;
}

.sp-liked {
  background-color: rgba(16,185,129,0.7) !important;
}

.sp-disliked {
  background-color: rgba(239,68,68,0.7) !important;
}

.lyricsheader {
  position: absolute;
  top: 10px !important;
  font-size: 30px !important;
  width: 100%;
  color: #fff;
  left: 50px !important;
  text-align: center;
  font-weight: bolder
}

.sp-morefrom-title {
  display: none
}

.sp-lyrics {
  position: relative !important;
  top: 50px !important;
  left: 50px !important;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  white-space: initial;
  white-space: pre-line;
  text-align: center;
  display: block;
  transition: 1s;
  min-height: 50px;
  font-family: "Open Sans", sans-serif !important;
  margin-bottom: 50px
}

.sp-uncorrect {
  width: auto;
  position: fixed;
  mix-blend-mode: normal;
  bottom: 10px;
  right: 10px;
  transition: .2s;
  z-index: 999 !important
}

@media (min-width:1250px) {
  .sp-morefrom {
    position: absolute;
    top: 320px;
    right: 10px !important;
    width: 360px;
    padding-left: 10px;
    padding-top: 5px;
    transition: 1s;
    display: unset !important
  }

  .sp-morefrom-title {
    position: absolute;
    text-align: right;
    top: 256px;
    font-size: 30px;
    right: 20px;
    width: 500px;
    transition: 1s;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 70%;
    display: unset !important
  }

  .sp-lyrics {
    position: relative;
    top: 50px;
    bottom: 0;
    left: 10px;
    height: auto;
    min-height: 50px;
    width: 50%;
    text-align: left;
    word-wrap: break-word;
    white-space: initial;
    white-space: pre-line;
    display: block;
    transition: 1s;
    padding-bottom: 50px
  }

  .lyricsheader {
    position: absolute;
    top: 6px;
    font-size: 30px !important;
    left: 10px;
    width: 500px;
    transition: 1s;
    color: #fff;
    text-align: left
  }
}

.sp-morefrom {
  display: none
}

.apifailed {
  width: 50px !important;
  transition: ease .2s
}

.api-success {
  width: 55% !important;
  transition: ease .2s
}

.volume {
  width: 110px;
  height: 10px;
  cursor: pointer;
  position: relative;
  left: 40px;
  top: 210px;
  z-index: 2 !important;
  transition: .4s !important;
  --animate-duration: 0.4s !important;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, .3);
  outline: 0;
  opacity: .7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 30px;
  overflow: hidden
}

.volume:focus {
  outline: 0
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(7px);
  border-radius: 100%;
  cursor: pointer;
  box-shadow: -170px 0 0 165px rgba(255, 255, 255, .3)
}

.volume::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(7px);
  border-radius: 100%;
  cursor: pointer;
  box-shadow: -170px 0 0 165px rgba(255, 255, 255, .3)
}

.progress {
  width: 110px;
  height: 15px;
  position: absolute;
  margin: 0 0 0 10px;
  display: inline;
  border: none;
  background: 0 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  mix-blend-mode: overlay;
  overflow: hidden;
  border-radius: 5px;
  top: -5px;
  right: 0;
  transition: .5s;
  pointer-events: none
}

.progress:focus {
  outline: 0
}

.progress::-webkit-slider-runnable-track {
  height: 10px;
  width: 140px !important;
  background-color: rgba(255, 255, 255, .1);
  margin: 0;
  border: none;
  float: right;
  -webkit-appearance: none;
  -webkit-transition: height .3s ease-in-out;
  -moz-transition: height .3s ease-in-out;
  transition: height .3s ease-in-out
}

.progress::-webkit-slider-runnable-track {
  height: 3vh
}

.progress::-webkit-slider-thumb {
  height: 1px;
  width: 1px;
  background-color: rgba(255, 255, 255, .5);
  cursor: pointer;
  margin: 6.2px 0 0;
  mix-blend-mode: overlay;
  border: none;
  outline: 0;
  border: none;
  -webkit-appearance: none;
  -webkit-box-shadow: -305px 0 0 300px rgba(255, 255, 255, .15);
  -moz-box-shadow: -305px 0 0 300px rgba(255, 255, 255, .15);
  box-shadow: -305px 0 0 300px rgba(255, 255, 255, .15);
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.progress::-moz-range-track {
  height: 10px;
  width: 140px !important;
  background-color: rgba(255, 255, 255, .5);
  margin: 0;
  border: none;
  border-radius: 3px;
  float: right;
  -moz-appearance: none;
  border-radius: 5px
}

.progress::-moz-range-thumb {
  height: 0;
  width: 0;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  outline: 0;
  border: none;
  -moz-appearance: none;
  -webkit-box-shadow: -305px 0 0 300px rgba(255, 255, 255, .25);
  -moz-box-shadow: -305px 0 0 300px rgba(255, 255, 255, .25);
  box-shadow: -305px 0 0 300px rgba(255, 255, 255, .25)
}

.nextUp {
  opacity: 1 !important;
  left: 50%;
  transform: translate(-50%);
  width: fit-content;
  bottom: 20px;
  position: absolute;
  z-index: 9;
  background-color: rgba(49, 49, 49, .6);
  backdrop-filter: blur(7px);
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  font-weight: lighter;
  display: inline-block;
  text-align: center;
  overflow: hidden
}

.nextUp .text {
  /* font-weight: 700; */
}

.nextUp span {
  vertical-align: middle;
  padding-top: 5px;
  white-space: nowrap;
}

.nextUp img {
  width: 20px;
  float: left;
  border-radius: 5px;
  margin-right: 10px;
  pointer-events: none
}

.player-title {
  font-weight: 700;
  overflow: auto
}

hr {
  -webkit-box-flex: 1;
  content: "";
  flex: 1 1 auto;
  height: 1.5px;
  margin-left: 5px !important;
  margin-right: 5px !important;
  background-color: rgba(255, 255, 255, .2);
  border-radius: 9px;
  border: none;
  margin: 0;
  position: relative;
  z-index: 9999
}

.page-content {
  --animate-duration: 0.3s
}

.banners {
  height: 260px;
  max-height: 260px !important;
  width: 100%;
  border-radius: 5px;
  transition: .2s;
  overflow: hidden;
  position: relative
}

.banners h1 {
  z-index: 999;
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 20px;
  font-weight: 700;
  padding-top: 0
}

.banners img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  transform: translateZ(0);
  image-rendering: crisp-edges;
  object-fit: cover
}

.slideshow-container {
  position: relative;
  margin: auto
}

.mySlides {
  display: none;
  transform: translateZ(0);
  image-rendering: crisp-edges
}

.next,
.prev {
  cursor: pointer;
  position: absolute;
  top: 47%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  transition: .6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px
}

.birthday {
  height: auto;
  width: 100%;
  border-radius: 5px;
  transition: .2s;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

.birthday h1 {
  font-size: 20px;
  font-weight: bold;
}

.tt-sect {
  height: 100%f;
  width: 100%;
  margin-bottom: 10px;
}

.tt-sect h1 {
  z-index: 999;
  position: relative;
  top: 0;
  left: 15px;
  font-size: 20px;
  font-weight: 700
}

.tt-cont {
  transition: .2;
  height: 80px;
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  right: 0;
  border-radius: 5px;
  margin-bottom: 5px;
  object-fit: cover;
  cursor: pointer
}

.tt-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  object-fit: cover;
  transition: ease-in-out .2s;
  filter: brightness(50%)
}

.tt-av {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  height: calc(100% - 20px);
  width: auto;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  object-fit: cover;
  transition: ease-in-out .2s;
  border-radius: 5px
}

.tt-cont .tt-current {
  transform: scale(1.2);
  filter: brightness(60%)
}

.tt-t {
  position: absolute;
  z-index: 99;
  right: 10px;
  top: 24.5px;
  text-align: right;
  font-weight: 400;
  font-size: 20px;
  opacity: .5;
  mix-blend-mode: overlay
}

.tt-n {
  position: absolute;
  z-index: 99;
  left: 80px;
  top: 21px;
  text-align: left;
  font-weight: 500;
  font-size: 25px;
  width: 80%;
  font-weight: 700
}

.tt-n span {
  position: relative;
  z-index: 999;
  padding: 3px;
  bottom: 5px !important;
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  background-color: #ffffff13;
  border-radius: 5px
}

.tts-box {
  height: 50px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  margin-top: 10px
}

.tts-n {
  position: absolute;
  left: 55px;
  top: 12px;
  font-size: 20px;
  font-weight: 700
}

.tts-t {
  opacity: .8;
  font-weight: 300
}

.tts-a {
  height: 90%;
  width: auto;
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  border-radius: 5px
}

.tts-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: brightness(50%);
  z-index: -1
}

.tts-cont {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px
}

.tts-cont h1 {
  font-size: 30px;
  font-weight: 700
}

.tts-cont-left {
  grid-area: 1/1/2/2
}

.tts-cont-right {
  grid-area: 1/2/2/3
}

.recent-onair h1 {
  font-weight: 500;
  font-size: 20px;
  top: 0;
  margin: 3px;
  position: relative
}

.recent-onair {
  width: 100%;
  height: 100%;
  margin: -1px;
  border-radius: 5px
}

.roa-cont {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: 70px;
  float: left;
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: 15px;
  transition: .2s;
  background-color: rgba(255, 255, 255, .05);
}

.roa-cont p {
  position: absolute;
  z-index: 99
}

.roa-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .7;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  object-fit: cover;
  transition: ease-in-out .3s;
  filter: brightness(50%)
}

.roa-art {
  position: absolute;
  z-index: 99;
  height: 50px;
  width: 50px;
  top: 10px;
  left: 10px;
  border-radius: 5px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none
}

.roa-t {
  top: 28%;
  left: 70px;
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 70%;
  font-weight: 500
}

.roa-comptext {
  top: 10%;
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 70%;
  font-weight: 500
}

.roa-a {
  top: 35px;
  left: 70px;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 80%;
  opacity: .8
}

.registerbox {
  width: 100%;
  height: 150px;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  border-radius: 5px;
  padding: 5px;
}

.registerbox img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
  filter: blur(50px) !important;
}

.registerbox h1 {
  width: 100%;
  font-size: 20px;
  margin: 5px;
  font-weight: 700;
  text-align: center
}

.registerbox p {
  width: 100%;
  text-align: center;
  font-size: 14px;
}

.registerbox button {
  width: calc(100% - 10px);
  position: absolute;
  bottom: 5px
}

.banner {
  width: 100%;
  height: 25%;
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
  border-radius: 5px;
  padding: 5px;
}

.banner img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
  filter: blur(50px) !important;
}

.banner h1 {
  width: 100%;
  font-size: 20px;
  margin: 5px;
  font-weight: 700;
  text-align: center
}

.banner p {
  width: 100%;
  text-align: center;
  font-size: 14px;
  margin-left: 5px;
  margin-right: 5px;
}

.banner button {
  width: calc(100% - 10px);
  position: absolute;
  bottom: 5px
}

@media(max-width:410px){
  .banner p {
    font-size: 75%
  }
}

.registerwidget img {
  opacity: .8;
  animation: hueRotate linear 10s infinite
}

.nws-sect {
  width: 100%;
  position: relative;
  pointer-events: none;
  overflow: hidden;
  border-radius: 5px
}

.nws-soon {
  z-index: 99;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase
}

.nws-header {
  filter: blur(7px);
  z-index: 99;
  position: absolute;
  top: 5px;
  left: 15px;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase
}

.nws-art {
  filter: blur(7px);
  border-radius: 5px;
  overflow: hidden;
  width: 470px;
  height: 80px;
  float: left;
  display: block;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  transition: .2s;
  transition: .2s ease;
  background: linear-gradient(0deg, #090909 0, rgba(255, 255, 255, 0) 100%)
}

.nws-big {
  width: 320px;
  height: 260px;
  margin-top: 0;
  margin-right: 10px;
  background: linear-gradient(0deg, #090909 0, rgba(255, 255, 255, 0) 30%)
}

.nws-img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .7;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  object-fit: cover;
  transition: ease-in-out .3s
}

.nws-art .big {
  bottom: 0;
  left: 0;
  font-size: 20px;
  width: 100% !important;
  font-weight: 600 !important;
  height: 60px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  align-items: center
}

.nws-title {
  bottom: 0;
  left: 0;
  font-size: 15px;
  width: 100% !important;
  font-weight: 600 !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center !important;
  overflow: hidden;
  align-items: center;
  position: absolute;
  z-index: 99999;
  font-weight: 700;
  text-transform: uppercase
}

.recent {
  width: 100%;
  height: 267px;
  position: relative;
  border-radius: 5px;
  overflow: auto;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(95%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0))) !important;
  mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(95%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0))) !important
}
.recent.overflow-hidden{
  overflow: hidden !important;
}

.recent .container {
  height: auto;
  /* padding: 10px; */
  width: 100%;
  background-color: rgba(255, 255, 255, .05);
  margin-bottom: 5px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  text-align: left;
  display: flex;
}

.recent .container div {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.recent .container .title {
  font-weight: 700;
  font-size: 15px;
}

.recent .container .artist {
  font-size: 12px;
  opacity: 0.8;
  mix-blend-mode: overlay;
}

.recent .container .alba {
  height: 100%;
  width: auto;
  /* margin-top: auto; */
  /* margin-bottom: auto; */
  margin-right: 10px;
  object-fit: contain;
  max-height: 60px;
  /* border-radius: 5px; */
}

.mobilebox {
  display: none
}

.homefooter {
  width: 94%;
  height: 267px;
  position: relative;
  margin: 10px;
  overflow: hidden;
  border-radius: 5px
}

.homefooter img {
  width: 100%;
  height: 100%;
  -webkit-filter: blur(7px) brightness(70%);
  filter: blur(7px) brightness(70%);
  object-fit: cover
}

.homefooter h1 {
  z-index: 99;
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 20px;
  font-weight: 700
}

.homefooter h1 i {
  align-items: center;
  align-self: center
}

.search {
  padding: 15px;
  background-color: #ffffff04;
  border-radius: 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 0 solid #000;
  text-align: center;
  z-index: 888888;
  outline: 0;
  color: #fff;
  font-size: 16px;
  outline: 0;
  transition: all .1s ease-in-out;
  white-space: pre-wrap
}

.ss-res {
  border-radius: 5px;
  overflow: hidden;
  width: 350px;
  height: 100px;
  display: block;
  position: relative;
  cursor: pointer;
  margin: 10px;
  transition: .2s
}

.ss-res p {
  position: absolute;
  z-index: 99
}

.ss-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .7;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  object-fit: cover;
  transition: ease-in-out .3s;/* l */
}

.ss-art {
  position: absolute;
  z-index: 99;
  height: 80px;
  top: 10px;
  left: 10px;
  border-radius: 5px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none
}

.ss-t {
  top: 25px;
  left: 100px;
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 70%
}

.ss-a {
  top: 50px;
  left: 100px;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 80%;
  mix-blend-mode: overlay
}

.vipPARTYMODE {
  width: 120%;
  height: 120%;
  background-color: #f08080;
  z-index: -1;
  position: absolute;
  left: -10%;
  top: -10%;
  transition: 2s;
  filter: blur(150px)
}

.p-background {
  width: 100%;
  height: 500%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  min-height: 200%;
  opacity: .1;
  object-fit: cover;
  -webkit-filter: brightness(50%);
  filter: brightness(50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  background: linear-gradient(0deg, #000 0, rgba(255, 255, 255, 0) 100%)
}

.collapse {
  visibility: collapse !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important
}

.p-bg {
  position: absolute;
  left: -10%;
  top: -10%;
  width: 120%;
  height: 120%;
  -webkit-filter: blur(20px) saturate(1.25) brightness(0.75) grayscale(0.15);
  filter: blur(20px) saturate(1.25) brightness(.75) grayscale(.15)
}

.p-pfp-bg {
  width: 120%;
  height: 120%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  left: -10%;
  top: -10%
}

.p-username {
  position: absolute;
  left: 220px;
  font-size: 60px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 87%;
  height: 100%;
  display: flex;
  align-items: left;
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
}
.p-username small {
  font-size: 12px;
}

.p-art {
  width: 200px;
  height: 200px;
  margin-top: 25px;
  margin-left: 50px;
  border-radius: 5px;
  transition: .2s
}

.p-badges {
  position: absolute;
  right: 0;
  top: 0;
  height: 200px;
  width: 35%
}

.p-badges .header {
  position: absolute;
  text-align: right;
  right: 20px;
  top: 50px;
  width: 200%;
  font-size: 22px;
  font-weight: 500
}

.p-badges .badges {
  margin-top: 80px;
  position: relative;
  right: -105px;
  z-index: 9999999;
  height: 50%;
  width: 50%;
  border-radius: 5px;
  width: 300px
}

.p-container-bottom {
  position: relative;
  top: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 75%;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-bottom: 20px;
  align-items: start
}

.p-container-bottom h1 {
  font-size: 20px;
  font-weight: 700
}

.p-bio {
  grid-area: 1/2/2/3;
  position: relative;
  top: 0;
  width: calc(100% - 10px);
  height: auto !important;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-align: center;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(105, 105, 105, .144);
  padding: 10px;
  align-content: center
}

.p-libinfo {
  grid-area: 1/1/2/2;
  position: relative;
  top: 0;
  width: 100%;
  height: 100px;
  text-align: left;
  border-radius: 5px;
  background: rgba(105, 105, 105, .144);
  padding: 10px;
  align-content: center
}

.p-libinfo button {
  margin: -10px;
  width: calc(100% + 20px);
  margin-top: 1.5em
}

.p-container {
  position: relative;
  width: 100%;
  height: 200px;
  top: 20px;
  left: 50%;
  z-index: 99;
  transform: translate(-50%)
}

.nws-username {
  left: 260px;
  font-size: 40px;
  top: 75px
}

.nws-composer {
  position: absolute;
  top: 200px;
  right: -10px;
  margin: 10px;
  width: 29%;
  height: 125px;
  white-space: pre-line;
  text-align: center;
  border-radius: 5px;
  overflow: hidden
}

.nws-composer .header {
  margin-top: -3px
}

.nws-composer .roa-cont {
  margin-top: -35px;
  width: 90%;
  left: 5%
}

.nws-composer .roa-cont .roa-t {
  top: 3px
}

.nws-info {
  position: absolute;
  top: 330px;
  right: -10px;
  margin: 10px;
  width: 29%;
  height: auto;
  white-space: pre-line;
  text-align: center;
  border-radius: 5px;
  overflow: hidden
}

.nws-info-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  filter: blur(18px);
  z-index: -5;
  opacity: .3;
  background: linear-gradient(0deg, #000 0, rgba(255, 255, 255, 0) 100%);
  object-fit: cover
}

.modal {
  position: fixed;
  z-index: 99999999999999999999999999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #0d0d0de7;
  --animate-duration: 0.5s
}

.modal2 {
  position: fixed;
  z-index: 99999999999999999999999999999;
  left: 0;
  top: 0;
  width: 75%;
  height: 100%;
  overflow: auto;
  background-color: #0d0d0de7;
  --animate-duration: 0.5s
}

.regi {
  justify-items: center
}

.content {
  justify-content: center;
  padding: 20px;
  width: 600px;
  height: auto;
  z-index: 2;
  position: fixed;
  z-index: 99999999999999;
  top: 50%;
  left: 50%;
  width: 900px;
  transform: translate(-50%, -50%);
  --animate-duration: 0.5s;
  --animate-delay: 0.7s
}

.cnt {
  --animate-duration: 0.5s;
  --animate-delay: 0.7s
}

.cnt input,
textarea {
  width: 50%;
  padding: 13px;
  border-radius: 8px;
  background: #ffffff25;
  color: #fff;
  outline: 0;
  border: none;
  margin: 7px;
  font-size: 14.5px;
  transition: .5s
}

.content h1 {
  text-align: center;
  width: 100%;
  font-size: 30px
}

.cnt button {
  outline: 0;
  width: 50%;
  border: none;
  background: #b8b8b869;
  border-radius: 8px;
  color: #fff;
  padding: 7px;
  margin-top: 5px;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  text-align: center !important;
  opacity: 1
}

.page-content button:not(.splide__pagination__page) {
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(7px);
  font-size: 14.45px;
  height: 39px;
  text-shadow: 0 0 15px rgba(0, 0, 0, .9);
  box-shadow: 0 0 35px rgba(0, 0, 0, .37);
  padding: 11px 15px;
  color: #fff;
  text-align: center;
  transition: .3s ease-in-out;
  outline: 0;
  border-radius: 5px
}

.content input::placeholder {
  color: rgba(255, 255, 255, .76);
  opacity: 1
}

.content input {
  width: 49.5%;
  padding: 13px;
  border-radius: 8px;
  background: #ffffff25;
  color: #fff;
  outline: 0;
  border: none;
  font-size: 14.5px;
  transition: .5s
}

.content input::placeholder {
  color: rgba(255, 255, 255, .76);
  opacity: 1
}

.modal-right {
  right: 0 !important
}

.content button {
  outline: 0;
  width: 100%;
  border: none;
  background: #b8b8b869;
  border-radius: 8px;
  color: #fff;
  padding: 7px;
  margin-top: 5px;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  text-align: center !important;
  opacity: 1;
  mix-blend-mode: overlay
}

.content p {
  width: 100% !important;
  color: #fff;
  font-size: 3em;
  text-align: center;
  transition: .5s;
  font-weight: 600
}

.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: 700
}

.close:focus,
.close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: #fff
}

.modal-body {
  padding: 2px 16px
}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: #fff
}

.register {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%)
}

.register input {
  width: 304px;
  position: relative;
  padding: 10px;
  margin-bottom: 10px;
  text-decoration: none;
  border-radius: 3px;
  border: none;
  display: block;
  text-align: left;
  z-index: 99999999;
  transition: .2s;
  box-sizing: border-box;
  opacity: .7
}

.register input:focus {
  opacity: 1 !important;
  padding: 15px !important;
  outline: 0 !important
}

.register input:hover {
  opacity: .85;
  padding: 12.5px;
  outline: 0
}

.register-img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -80;
  left: 0;
  top: 0;
  filter: blur(70px) saturate(180%);
  border-radius: 50%
}

.p-jobpagetitle {
  position: absolute;
  top: 0;
  left: 30%;
  font-size: 60px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 87%;
  z-index: 99
}

.lyricsbg {
  margin-top: 2rem;
  background: rgba(0, 0, 0, .35)
}

.boxy {
  -webkit-transition: all .6s cubic-bezier(.165, .84, .44, 1);
  transition: all .6s cubic-bezier(.165, .84, .44, 1);
  cursor: pointer
}

.boxy::after {
  -webkit-transition: all .6s cubic-bezier(.165, .84, .44, 1);
  transition: all .6s cubic-bezier(.165, .84, .44, 1)
}

.boxy:hover {
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1)
}

.boxy:hover::after {
  opacity: 1
}

.KqpIcD {
  top: 25%
}

footer.footer {
  bottom: 0;
  height: auto;
  position: relative;
  transition: .2s ease;
  overflow: hidden;
  background-color: #0d0d0d
}

footer.footer .top {
  width: 1200px;
  margin: 0 auto;
  top: 0;
  padding: 20px 20px 0;
  display: block;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-columns: 75% 25%;
  grid-column-gap: 50px;
  grid-row-gap: 0
}

.box1 {
  grid-area: 1/1/2/2;
  display: grid;
  grid-template-columns: repeat(3, 33.3333333333%);
  grid-template-rows: auto;
  grid-column-gap: 5px
}

.box2 {
  grid-area: 1/2/2/3
}

.box2 a {
  opacity: .7;
  transition: .2s
}

.box2 a:hover {
  opacity: 1;
  transition: .2s
}

footer.footer .bottom {
  height: auto;
  display: block;
  padding-left: 20px;
  padding-bottom: 15px;
  padding-top: 20px;
  background: rgba(0, 0, 0, .2);
  border-top: 2px solid rgba(255, 255, 255, .02);
  text-align: center
}

footer.footer .bottom p {
  width: 1200px;
  margin: 0 auto
}

.usercircle {
  height: 38.5px;
  width: 38.5px;
  display: block;
  float: left;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  margin: 2px;
  transition: .2s
}

.usercircle img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover
}

.notifications {
  position: absolute;
  right: 10px;
  top: 10px
}

.tata {
  border-radius: 5px !important;
  padding: 10px 10px !important;
  font-size: 16px !important;
  display: block !important;
  box-shadow: inset 0 0 20px 5px rgb(0 0 0 / 25%) !important
}

.tata-icon {
  display: none !important
}

.tata-body {
  padding: 0 !important
}

.tata-title {
  font-weight: 700 !important;
  margin: 0 !important;
  text-transform: uppercase;
  margin-bottom: -5px !important
}

.tata.error {
  background: rgba(133, 29, 44, .7) !important
}

.tata.success {
  background: rgba(52, 129, 59, .7) !important
}

.tata.info {
  background: rgba(49, 49, 49, .7) !important
}

.tata.fade-in {
  animation: fadeInRight 0.2s ease-in-out !important
}

.fa-instagram:hover {
  transition: .2s;
  transform: scale(1.2);
  color: #e1306c
}

.fa-twitter:hover {
  transition: .2s;
  transform: scale(1.2);
  color: #1da1f2
}

.fa-discord:hover {
  transition: .2s;
  transform: scale(1.2);
  color: #7289da
}

#discord-activity .usercircle:hover {
  transform: scale(1.15);
  z-index: 99
}

.requestmodal {
  width: 600px;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0d0d0d9a;
  backdrop-filter: blur(7px);
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 50%);
  padding: 10px 20px 10px 10px;
  border-radius: 5px;
  z-index: 999;
  transition: .2s ease
}

.requestmodal .closetab {
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 20px;
  cursor: pointer
}

.requestmodal h1 {
  text-align: center;
  width: 100%;
  font-size: 40px
}

.requestmodal .rcontent {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(4, auto);
  grid-column-gap: 10px;
  grid-row-gap: 10px
}

.requestmodal input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff25;
  color: #fff;
  outline: 0;
  border: none;
  transition: .5s
}

.requestmodal select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff25;
  color: #fff;
  outline: 0;
  border: none;
  transition: .5s
}

select option {
  color: #000
}

select #disabled {
  color: rgba(53, 53, 53, .445) !important
}

.requestmodal .selection {
  grid-area: 3/1/4/3
}

.requestmodal .selection .roa-cont {
  margin-bottom: 5px
}

.fa-leaf {
  transition: .2s ease
}

.fa-leaf:hover {
  color: #82cc54;
  transition: .2s ease
}

.tts-box {
  cursor: pointer
}

.discord {
  height: 110px
}

.discord h1 img {
  width: 50%;
  height: auto;
  margin: 5px 25% 25%;
  position: absolute;
  z-index: 10;
  filter: none;
  object-fit: cover;
}

.lockbtn {
  z-index: 500;
  outline: 0;
  width: 15%;
  border: none;
  background: #ffffff70;
  border-radius: 8px;
  color: #fff;
  padding: 5px 10px;
  font-size: 14.5px;
  margin: 10px;
  position: relative;
  display: block;
  cursor: pointer;
  color: #fff;
  text-align: center !important;
  transition: .2s;
  opacity: .7;
  margin-top: 18px;
  transition: .2s
}

.locklogin {
  display: block !important
}

.lockedactive {
  opacity: 1;
  transition: .2s
}

.lockopacity {
  opacity: 1 !important;
  animation: none !important
}

.like-sect {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  display: flex;
  margin-top: 20px;
  height: 225px;
  flex-wrap: wrap;
  flex-direction: column
}

.like-h {
  z-index: 999;
  font-size: 20px;
  font-weight: 700;
  padding-top: 0;
  width: 100%;
  margin-bottom: -20px
}

.like-h span {
  font-size: 20px;
  font-weight: lighter;
  opacity: .5
}

.like-sect a {
  padding-right: 5px;
  margin-bottom: 5px
}

.like-sect .roa-cont {
  margin-bottom: 0 !important
}

#ch-5,
#ch-6,
.like-sect #ch-4 {
  padding-right: 0 !important
}

.roa-cont .pos {
  z-index: 999;
  font-size: 40px;
  font-weight: 700;
  padding-top: 0;
  margin-bottom: -20px;
  position: absolute;
  right: 15px;
  height: 100%;
  padding: 1% 0;
  mix-blend-mode: overlay;
  opacity: 0.7;
}

.logotext:hover .version {
  animation: fadeIn 0.2s ease;
  visibility: visible
}

.logotext:hover {
  display: none
}

.hide_i {
  display: none !important;
}

.break {
  margin-bottom: 10px;
}

@media (max-width:1250px){.registerwidget{display:none!important}#fsu,.accountbox,.artistavatar,.artistavatar2,.artistbg,.artistbg2,.cover,.dislike,.dropdown,.featuresongs,.hideexcess,.like,.player-artist-two,.player-presenter,.player-presenter-art,.request,.settingsbox,.volume{display:none!important}.navbar-logo{left:10%}.songhtml{width:100%;text-align:center!important;top: 50px;left: 0px;}.artisthtml{width:100%;text-align:center!important;top: 90px;left:0px}.player-title{text-align:center!important;font-size:40px;width:100%;top:40px}marquee{width:100%!important}.player-artist{text-align:center!important;font-size:25px;width:100%;top:40px}.player-remix{display:none}.playerbg{width:100%!important}#marquee{position:absolute;left:50%!important;transform:translate(-50%);width:50%}.nextUp{/* display:none!important; */}.m-toggle{/* position:absolute; *//* top:240px; *//* left:50%; *//* transform:translate(-50%); */z-index:9;font-size: 35px;opacity:1}.playerbg{clip-path:none!important}.discord{display:none!important}footer.footer{display:none!important}.feedback{display:none!important}.mobilebox{display:block!important}.registerbanner{display:none!important}.page-content{padding:10px}.miniplayer{display:none!important}}

.splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover{opacity:.9}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{top:6.9em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:3px;display:inline-block;height:5px;margin:3px;opacity:.7;padding:0;transition:transform .2s linear;width:15px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4)}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus{outline:none}.splide__progress__bar{background:#ccc;height:3px}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide--nav>.splide__slider>.splide__track>.splide__list>.splide__slide:focus,.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{left:auto;right:1em}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{bottom:1em;top:auto}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__slider>.splide__track>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination,.splide--ttb>.splide__slider>.splide__pagination{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}