@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,300,0,0');
body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  font-family: 'Poppins', sans-serif;
  background: #121212;  
}

@keyframes  randomcolor {
  15% { background-image: linear-gradient(to bottom, #290d30, #23091e, #19040f, #000000); } 
  30% { background-image: linear-gradient(to bottom, #571e40, #3c182a, #221017, #000000); } 
  45% { background-image: linear-gradient(to bottom, #843649, #572733, #2e181e, #000000); } 
  60% { background-image: linear-gradient(to bottom, #ab554c, #71383b, #391f24, #000000); }
  75% { background-image: linear-gradient(to bottom, #c87b4e, #884c41, #452729, #000000); }  
  /* linear-gradient(180deg, rgba(255,145,86,1) 0%, rgba(57,57,57,1) 16%, rgba(18,18,18,1) 100%) */
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  background-image: url(../images/nav-back.png);
  z-index: 9999;
}
#preloader .status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url("/frontend/images/gee-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  background-size: 30%;
}

.scroll-content{
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
input:-webkit-autofill, 
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
.form-control:focus {
  border: none;
  box-shadow: none;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #757575 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar{
  width: 12px;
}

*::-webkit-scrollbar-thumb {
  z-index: 3;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
*:hover::-webkit-scrollbar-thumb{
  background-color: #757575;
}

html {
  height: -webkit-fill-available;
}

main {
  height: 100vh;
  height: -webkit-fill-available;
  max-height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
}
.sidenav{
  width: 240px;
  height: 100vh;
  background-color: #000000;
  background-image: url("../images/nav-back.png");
  background-size: 150px;
}
.sidenav .nav-pills .nav-link{
  color: #b3b3b3;
  padding-left: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.sidenav .nav-pills .nav-link.active{
  background-color: transparent;
  color: #fff;
}
.sidenav .nav-pills .nav-link:hover{
  color: #fff;
}
.sidenav .material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 48;
  margin-right: 10px;
}
span.heart {
  color: #b3b3b3;
}
span.heart.active {
  color: #d84239;
}
.sidenav .material-symbols-rounded.heart,
.mobile-nav a span.heart {
  color: #d84239;
}
.sidenav .nav-pills .nav-link:hover .heart {
  color: #ff594f;
}
.sidenav .lists.nav-pills .nav-link{
  font-size: 13px;
}
.copyrights {
  color: #fff;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.mobile-nav{
  background-color: #000000;
  background-image: url(../images/nav-back.png);
  background-position: 110px 88px;
  background-size: 150px;
}
.mobile-nav a span {
  display: block;
  font-size: 34px;
  text-align: center;
}
.mobile-nav a{
  color: #b3b3b3;
  font-size: 12px;
}
.mobile-nav a.active {
  color: #fff;
}
.mobile-header{
  background-color: #000000;
  background-image: url(../images/nav-back.png);
  background-position: 110px 88px;
  background-size: 150px;
}
.mobile-header .nav-link {
  color: #fff;
}
.mobile-header .header-nav {
  right: 12px;
  position: absolute;
}
.mobile-nav a.active > .heart{
  color: #ff594f;
}
.side-profile {
  background-color: #000000 !important;
  background-image: url(../images/nav-back.png);
  background-size: 150px;
}
.side-profile .offcanvas-header{
  background: #000;
}
.side-profile  .nav-link{
  font-size: 14px;
}
.side-profile .logout {
  border-radius: 100px;
  background: #fff;
  color: #000;
  border: none;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 600;
}
.top-header .material-symbols-rounded,
.mobile-header  .material-symbols-rounded{
  color: #fff;
  font-size: 26px;
}
.top-header .btn,
.mobile-header .btn{
  background: rgb(0 0 0 / 40%);
  border-radius: 20px;
  padding: 3px 10px;  
}
.top-header .btn-sign-in,
.mobile-header .btn-sign-in{ 
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 4px;
}
.top-header .link-register,
.mobile-header .link-register {
  font-size: 14px;
}
.content-area{
  overflow-y: auto;
  
}
.artist .card {
  border: none;
  box-shadow: 0px 0px 25px rgb(0 0 0 / 10%);
  width: 138px;
  cursor: pointer;
  background: rgb(0 0 0 / 70%);
  background-image: url(../images/nav-back.png);
  background-size: 150px;
  background-position: top;
  animation: mymove 50s alternate infinite;
  padding: 20px 0 8px;
}
.lists .card {
  border: none;
  box-shadow: 0px 0px 25px rgb(0 0 0 / 10%);
  width: 140px;
  cursor: pointer;
  background: #000;
  background-image: url(../images/nav-back.png);
  background-size: 150px;
  background-position: top;
  animation: mymove 50s alternate infinite;
  padding: 10px 0 8px;
}
.artist .card .card-body, 
.favorites .card .card-body, 
.lists .card .card-body {
  margin-top: 20px;
}
.artist .card:hover .card-body, 
.favorites .card:hover .card-body, 
.lists .card:hover .card-body {
  filter: brightness(110%);
}
.artist .card .card-body .card-title,
.favorites .card .card-body .card-title,
.lists .card .card-body .card-title  {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 115px;
  font-size: 12px;
}
.artist .card .card-image {
  height: 100px;
  width: 100px;
  /* overflow: hidden; */
  border-radius: 100%;
  background: transparent;
  margin: 0 auto;
}
.lists .card .card-image {
  height: 118px;
  width: 120px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  margin: 0 auto;
}
.artist .card .card-image img {
  height: 100px;
  object-fit: cover;
  transition: all 0.35s linear;
  border-radius: 100%;
}
.lists .card .card-image img {
  height: 120px;
  object-fit: cover;
  transition: all 0.35s linear;
  border-radius: 0;
}
.favorites .card .playlist img,
.lists .card .playlist img  {
  height: 57px;
  width: 57px;
  border-radius: 0;
  float: left;
}
.favorites .card .playlist,
.lists .card .playlist {
  height: 118px;
  overflow: hidden;
  margin: 0px 13px;
}
.favorites .card .playlist.single-img img,
.lists .card .playlist.single-img img  {
  height: auto;
  width: 118px;
}
.favorites .card:hover .single-img img,
.lists .card:hover .single-img img {
  background-color: transparent;
}
.favorites .card .card-image span,
.lists .card .card-image span{
  font-size: 80px;
}
.artist .card:hover img,
.favorites .card:hover img,
.lists .card:hover img,
.artist .card:hover .hover-fx,
.favorites .card:hover .hover-fx,
.lists .card:hover .hover-fx
{
  /* transform: rotate(5deg) scale(1.1, 1.1); */
  filter: brightness(110%);
  background-color: #fff;
  color: #00989A;
  
}
.artist .card:hover .hover-fx:after,
.favorites .card:hover .hover-fx:after,
.lists .card:hover .hover-fx:after {
  opacity: 1;
  transform: scale(1.15);
}


/* SEARCH PAGE */
.search .input-group {
  width: 500px;
}
.search .input-group span {
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
  font-size: 28px;
  border: none !important;
  background: #fff !important;
}
.search .input-group label {
  border-top-right-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
  font-size: 28px;
  border: none !important;
  background: #fff !important;
}
.search input.form-control{
  border: none !important;
}
.search input.form-control::-webkit-input-placeholder {
  color: #b3b3b3;
  font-size: 14px;
}
.search .btn.search-type,
.favorites .btn.search-type{
  border-color: #fff;
  color: #fff;
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 14px;
  margin-right: 5px;
}
.search .btn-check+.btn:hover,
.search .btn-check:checked+.btn,
.favorites .btn-check+.btn:hover,
.favorites .btn-check:checked+.btn
{
  background: #fff;
  color: #000;
}
.mobile-search-list .list-group-item,
.lg-song-list .list-group-item,
.fav-list .list-group-item{
  background: transparent;
  padding: 0;
  margin: 8px 0;
  cursor: default;
  /* padding-right: 10px !important; */
}
.list-group-item:hover {
  background: #000;
}
.mobile-search-list .artist-img {
  height: 55px;
  width: 55px;
  overflow: hidden;
  border-radius: 100%;
  background: transparent;
  margin: 0 auto;
}
.mobile-search-list .artist-img img {
  height: 60px;
  object-fit: cover;
}
.mobile-search-list p,
.mobile-search-list .song-txt p {
  font-weight: 400;
  font-size: 14px;
  width: 200px;
}
.mobile-search-list .song-img img {
  height: 60px;
  object-fit: cover;
}
.mobile-search-list .song-img {
  height: 55px;
  width: 55px;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
  border-radius: 100%;
  /* outline: 3px solid #fff; */
}
.mobile-search-list .song-txt a{
  font-size: 12px;
  font-weight: 500;
  color: #979797;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.mobile-search-list small{
  font-size: 12px;
  font-weight: 600;
  color: #979797;
  text-decoration: none;
}
.mobile-search-list .song-option span {
  font-size: 20px;
}
.lg-song-list .artist-img {
  height: 55px;
  width: 55px;
  overflow: hidden;
  border-radius: 100%;
  background: transparent;
  margin: 0 auto;
}
.lg-song-list .artist-img img {
  height: 60px;
  object-fit: cover;
}
.lg-song-list p,
.lg-song-list .song-txt p {
  font-weight: 400;
  font-size: 14px;
  width: 500px;
}
.lg-song-list .song-img img {
  height: 60px;
  object-fit: cover;
}
.lg-song-list .song-img {
  height: 55px;
  width: 55px;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
}
.lg-song-list .song-txt a{
  font-size: 12px;
  font-weight: 500;
  color: #979797;
  text-decoration: none;
}
.lg-song-list .song-txt a:hover{
  text-decoration: underline;
}
.list-group-item:hover .song-txt a{
  color: #fff;
}
.fav-list p,
.fav-list .fav-txt p {
  font-weight: 400;
  font-size: 14px;
  width: 100%;
}
.fav-list .fav-img img {
  height: 60px;
  object-fit: cover;
}
.fav-list .fav-img {
  height: 54px;
  width: 54px;
  overflow: hidden;
  background: transparent;
  margin: 0 auto;
}
.fav-list .heart {
  font-size: 3.5rem;
}
.fav-img.multiple img {
  height: 27px;
  object-fit: cover;
  width: 27px;
  float: left;
}
.fav-list .fav-txt small{
  font-size: 12px;
  font-weight: 500;
  color: #979797;
  display: block;
}
.fav-img span{
  font-size: 30px;
}
.lyrics h5 {
  max-width: 450px;
}
.lyrics{
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 95%);
}
.lyrics .lyrics-txt {
  width: 500px;
  line-height: 2em;
  padding: 0 0 200px 0;
  overflow-y: scroll;
  height: 100vh;
}
.lyrics .material-symbols-rounded:hover,
.lyrics .material-symbols-rounded.active {
  cursor: pointer;
  color: #d84239;
}
.lyrics .lyrics-head span {
  margin: 0 5px;
}
.authentication-page{
  background-color: #000000;
  background-image: url(../images/nav-back.png);
  background-size: 150px;
}
.authentication-page label, 
.authentication-page p {
  font-size: 14px;
}
.authentication-page .form-control {
  border-radius: 0;
  background: #373737;
  color: #fff;
}
.authentication-page .form-control:focus {
  border: 1px solid #fff;
  box-shadow: none;
}
.authentication-page .btn-sign-in, 
.authentication-page .btn-register {
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  margin: 0 4px;
}
.authentication-page .registration-page,
.authentication-page .login-page {  
  margin: 3rem 0;
}
.authentication-page a{
  color: #fff;
}
.authentication-page h5 {  
  margin: 1.5rem 0;
}
.authentication-page .form-group{
  margin: 0.5rem 0;
}
.authentication-page .btn{
  border-radius: 100px;
  background: transparent;
  color: #fff;
  border-color: #fff;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 600;
}
.authentication-page .btn:hover{
  background: #fff;
  color: #000;
}

.hover-fx {
  font-size: 36px;
  display: inline-block;
  cursor: pointer;
  margin: 15px;
  width: 80px;
  height: 80px;
  line-height: 84px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  transition: 300ms;
}

.hover-fx:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  box-sizing: content-box;
  box-shadow: 0 0 0 3px #fff;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 300ms;
}

.heart-like-button.liked {
  animation: liked .4s ease;
}
@keyframes liked {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.material-symbols-rounded:hover{
  cursor: pointer;
}
.modal-content{
  background-color: #000000;
  background-image: url(../images/nav-back.png);
  background-size: 150px;
}
.playlist-modal .accordion{
  --bs-accordion-bg: #000;
  --bs-accordion-color: #fff;
}
.playlist-modal .accordion-button{
  background-color: transparent;
  color: #fff;
}
.playlist-modal .accordion-button::after,
.playlist-modal .accordion-button:not(.collapsed)::after{
  color: #fff;
}
.playlist-modal .accordion-button:not(.collapsed){
  background-color: transparent;
}
.playlist-modal .accordion-button:focus {
  box-shadow: none;
}
.playlist-modal .accordion .form-control-sm{
  border: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  color: #fff;
}
.playlist-modal .accordion input:focus-visible {
  border-radius: 0;
}
.playlist-modal .accordion .btn-create-list{
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 4px;
  border-radius: 20px;
  padding: 3px 10px;
}
.playlist-modal .accordion .btn-create-list:hover{
  color: #000;
}

.HeartAnimation {
  padding-top: 2em;
  background-image: url(../images/heart_animation.png);
	background-repeat: no-repeat;
	background-size: 2900%;
  background-position: -17px -8px;
	height: 50px;
	width: 50px;
  margin: 0 auto;
  cursor: pointer;
}

.animate {
  animation: heart-burst .8s steps(28) forwards;
}

@keyframes heart-burst {
	0% {
		background-position: left
	}
	100% {
		background-position: right
	}
}
.colored-background{
  -webkit-animation: randomcolor 200s linear infinite;
  animation: randomcolor 200s linear infinite;
  -moz-animation: randomcolor 200s linear infinite;
}
.banner {
  background-color: rgba(0,0,0,.5);
}
.banner .list-img {
  height: 205px;
  width: 205px;
  overflow: hidden;
  -webkit-box-shadow: 3px 3px 23px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 3px 3px 23px -3px rgba(0,0,0,0.75);
  box-shadow: 3px 3px 23px -3px rgba(0,0,0,0.75);
}
.banner .list-img img {
  height: 100px;
  width: 100px;
  border-radius: 0;
  float: left;
}
.banner input.form-control {
  border: 0;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  background: transparent;
  width: 30%;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 500;
  padding: 0;
}
.banner .list-img.single-img{
  border-radius: 100%;
}
.banner .list-img.single-img img {
  height: 100%;
  width: auto;
  border-radius: 0;
  margin-bottom: 4px;
}
.banner h1{
  font-weight: 600;
}
.delete-modal .btn-yes {
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  margin: 0 4px;
  border-radius: 20px;
  padding: 3px 10px;
}
.delete-modal .btn-yes:hover{
  color: #000;
}
.delete-modal .btn-cancel {
  /* background: #fff; */
  font-size: 14px;
  font-weight: 600;
  margin: 0 4px;
  border-radius: 20px;
  padding: 3px 10px;
  color: #fff;
}
.home.songs .card {
  background: rgb(0 0 0 / 70%);
  background-image: url(../images/nav-back.png);
  background-size: 150px;
  background-position: top;
  width: 300px;
  overflow: hidden;
  animation: mymove 50s alternate infinite;
}
.home.songs .card:hover {
  cursor: pointer;
}
.home.songs .card .text-small{
  font-size: 12px;
  color: #979797;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  
}
.home.songs .card .text-small:hover{
  color: #fff;
  text-decoration: underline;
}
.home.songs .card img{
  border-radius: 0;
}
.home.songs .song-img {
  max-height: 74px;
  overflow: hidden;
}
.home.songs .song-name{
  font-size: 14px;
}

/* Mobile CSS */
h3.mobile-heading {
  position: relative;
  top: 120px;
}
.move-top-on-scroll{
  animation: headingmovebottom 0.2s forwards;
}
@keyframes headingmovebottom {
  from {top: 120px;}
  to {top: 0;}
}
.move-down-on-scroll{
  animation: headingmovetop 0.2s forwards;
}
@keyframes headingmovetop {
  from {top: 0;}
  to {top: 120px;}
}
.artist-carousel{
  background-image: url(../images/nav-back.png);
  background-size: 82px;
  background-position: top;
  animation: mymove 50s alternate infinite;
  padding: 22px 0 0;
}
.artist-carousel .card {
  border: none;
  width: 128px;
  cursor: pointer;
  background: transparent;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
}
@keyframes mymove {
  50% {background-position: bottom;}
}
.artist-carousel .card .card-body {
  transition: all 0.35s linear;
  padding: 5px 0;
}
.artist-carousel .card:hover .card-body {
  filter: brightness(110%);
}
.artist-carousel .card .card-body .card-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  max-width: 140px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.artist-carousel .card .card-image {
  min-height: 128px;
  max-height: 128px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 100%;
  border: 5px solid #fff;
}
.artist-carousel .card .card-image.explore{
  font-size: 12px;
}
.artist-carousel .card .card-image img {
  height: 128px;
  object-fit: cover;
  transition: all 0.35s linear;
  border-radius: 0;
}
.artist-carousel .card:hover img {
  /* transform: rotate(5deg) scale(1.1, 1.1); */
  filter: brightness(110%);
}
.artist-carousel .card-image.explore {
  background: rgb(0 0 0 / 18%);
  font-size: 1rem;
  text-align: center;
  font-weight: 400;
}
.artist-carousel .card-image.explore span {
  font-size: 2.5rem;
}
.banner-mobile input.form-control {
  font-size: calc(1.375rem + 1.5vw);
  width: 100%;
}
.banner .heart{
  font-size: 5.5rem;
}
.songs-carousel{
  background-image: url(../images/nav-back.png);
  background-size: 82px;
  background-position: top;
  animation: mymove 50s alternate infinite;
  padding: 22px 0 0;
}
.songs-carousel .card{
  border: none;
  width: 125px;
  cursor: pointer;
  background: transparent;
}
.songs-carousel .card-image {
  max-height: 125px;
  overflow: hidden;
  border: 5px solid #fff;
}
.songs-carousel .card-image img {
  border-radius: 0;
}
.songs-carousel .card .card-body .card-title{
  text-transform: uppercase;
  letter-spacing: 0.05em;
  max-width: 140px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.songs-carousel .card .text-small {
  font-size: 12px;
  color: #979797;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  max-width: 140px;
  display: block;
}
.songs-carousel .card .text-small:hover {
  color: #fff;
  text-decoration: underline;
}
.songs-carousel .card.last .card-image {
  min-height: 128px;
  max-height: 128px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 100%;
  border: 5px solid #fff;
  font-size: 12px;
}
.songs-carousel .card-image.explore span {
  font-size: 2.5rem;
}
.banner .fav-artist {
  padding: 0;
  display: block;
  font-size: 2rem;
}

.privacy p, .privacy ul li{
  font-size: 12px;
}