:root{
   --ver: #ff0000;
   --rosa: #ff006c;
   --roxo: #da00ff;
   --vio: #8a00ff;
   --azul: #0600ff;
   --ceu: #007eff;
   --mar: #00fff6;
   --verde: #1eff00;
   --nature: #00ff5a;
   --limao: #beff00;
   --sol: #ffc600;
   --lara: #ff6c00;
   --tura: #ff3600;
   --terra: #c04d00;
   --choco: #3f0800;
   --leijo: #00334d;
   --cinza: #c8c8c8;
   --preto: #000;
   --face-mess: #1877f2;
   --ouro: #ffe400;

   --face-mess: #1877f2;
   --face: #3b5998;
   --twitter: #1da1f2;
   --twi1: #14171a;
   --twi2: #aab8c2;
   --twi3: #e1e8ed;
   --twi4: #f5f8fa;
   --youtube: #ff0000;
   --you1: #282828;
   --insta: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
   --insta1: #feda75;
   --insta2: #fa7e1e;
   --insta3: #d62976;
   --insta4: #962fbf;
   --insta5: #4f5bd5;
   --pin: #bd081c;
   --in: #007bb5;
   --goo1: #4285f4;
   --goo2: #ea4335;
   --goo3: #34a853;
   --goo4: #fbbc05;
   --snap: #fffc00;
   --sap: #25d366;
   --sap1: #075e54;
   --sap2: #128c7e;
   --sap3: #dcf8c6;
   --sap4: #34b7f1;
   --tumblr: #2c4762;
   --reddit: #ff5700;
   --red1: #cee3f8;
   --red2: #336699;
   --red3: #5f99cf;
   --red4: #ff5700;
   --mastodon: #2b90d9;
   --masto1: #282c37;
   --masto2: #9baec8;
   --masto3: #d9e1e8;
   --spot: #1ed760;
   --spot1: #1db954;
   --apple: #a6b1b7;
   --ap1: #333333;
   --ap2: #bbbbbb;
   --amazon: #ff9900;
   --micro1: #f35022;
   --micro2: #80bb03;
   --micro3: #03a5f0;
   --micro4: #ffb903;
   --periscope: #40a4c4;
   --peri1: #d55548;
   --peri2: #7cd6f1;
   --peri3: #3f4d51;
   --peri4: #a4b8be;
   --4s: #f94877;
   --4s1: #073282;
   --4s2: #2d5be3;
   --swarm: #ffa633;
   --swarm1: #f06d1b;
   --swarm2: #ffa71c;
   --swarm3: #2182eb;
   --medium: #02b875;
   --med1: #e8f3ec;
   --med2: #00ab6b;
   --med3: #12100e;
   --vimeo: #1ab7ea;
   --vim1: #162221;
   --skype: #00aff0;
   --sky: #0078d7;
   --android: #a4c639;
   --quora: #aa2200;
   --quora1: #2b6dad;
   --drib: #ea4c89;
   --drib1: #c32361;
   --drib2: #444444;
   --drib3: #9ba5a8;
   --slack: #4a154b; 
   --slack1: #36c5f0;
   --slack2: #2eb67d;
   --slack3: #e01e5a;
   --slack4: #ecb22e;
   --stumb: #e94826;
   --stumb1: #e4e5e7;
   --flickr: #f40083;
   --flickr1: #006add;
   --flickr2: #177fff;
   --flickr3: #246dd6;
   --flickr4: #ff1981;
   --yahoo: #430297;
   --yah1: #500095;
   --yah2: #2d1152;
   --yah3: #3b009d;
   --yah4: #38027c;
   --twitch: #6441a4;
   --twitch1: #b9a3e3;
   --twitch2: #b9a3e3;
   --twitch3: #292929;
   --sound: #ff5500;
   --sound1: #ff7700;
   --sound2: #ff3300;
   --devian: #05cc47;
   --devian1: #1f3626;
   --devian2: #42704f;
   --devian3: #4dc47d;
   --devian4: #d4f5de;
   --pocket: #ee4056;
   --pock1: #42b7b0;
   --pock2: #9bcfcc;
   --pock3: #83edb8;
   --pock4: #fcb643;
   --ss1: #e68523;
   --ss2: #00a0dc;
   --ss3: #0077b5;
   --500px: #0099e5;
   --px1: #222222;
   --vk: #4a76a8;
   --vk1: #5181b8;
   --vk2: #2a5885;
   --vk3: #edeef0;
   --vk4: #f7f8fa;
   --steam: #171a21;
   --steam1: #66c0f4;
   --steam2: #1b2838;
   --steam3: #2a475e;
   --steam4: #c7d5e0;
   --discord: #7289da;
   --dis1: #99aab5;
   --dis2: #2c2f33;
   --dis3: #23272a;
   --telegram: #0088cc;
   --clarity: #61bed9;
   --listly: #df6d46;
   --list1: #52b1b3;
   --list2: #ce4f24;
   --list3: #333333;
   --list4: #409092;
   --list5: #222222;
   --gmail: #db4437;
   --vine: #00b489;

   --ouro: #ffe400;
   --prata: #f0f0f0;
   --bronze: #e46600;
   --platina: #e0e0e0;
   --ferro: #e6e6e6;
   --fogo: #ff6000;

}

.texto-mozabeatz{ 
   background: linear-gradient(-45deg, var(--ver), var(--rosa), var(--roxo), var(--vio), var(--ceu)); color: transparent; background-size: cover; background-clip: text;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -ms-background-clip: text;
   -o-background-clip: text;
}

.texto-premium{ 
   background: linear-gradient(-45deg, var(--ver), var(--rosa), var(--roxo), var(--vio), var(--ceu)); color: transparent; background-size: cover; background-clip: text;
   background: linear-gradient(45deg, var(--ver), var(--rosa), var(--roxo));
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -ms-background-clip: text;
   -o-background-clip: text;
}

.texto-pro{ 
   background: linear-gradient(-45deg, var(--ver), var(--rosa), var(--roxo), var(--vio), var(--ceu)); color: transparent; background-size: cover; background-clip: text;
   background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -ms-background-clip: text;
   -o-background-clip: text;
}

.texto-mPesa{ color: #ed1c24; }
.texto-mKesh{ color: #fac910; }
.texto-eMola{ color: #f37227; }
.texto-ponto24{ color: #8a00ff; }


.fundo-mozabeatz{ background: var(--mb) !important; }
.fundo-mozabeatz1{  background: var(--mb1) !important }
.fundo-mozabeatz2{  background: var(--mb2) !important }
.fundo-mozabeatz3{  background: var(--mb3) !important }

.fundo-mPesa{ background: #ed1c24; }
.fundo-mKesh{ background: #fac910; }
.fundo-eMola{ background: #f37227; }
.fundo-ponto24{ background: #8a00ff; }

.borda-mPesa{ border-color: #ed1c24; }
.borda-mKesh{ border-color: #fac910; }
.borda-eMola{ border-color: #f37227; }
.borda-ponto24{ border-color: #8a00ff; }



::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
}

::-webkit-scrollbar-track {
   width: 0;
   height: 0;
}

::-webkit-scrollbar-thumb {
   width: 0;
   height: 0;
}

::-webkit-scrollbar-thumb:hover {
   width: 0;
   height: 0;
}



   .raleway {
     font-family: "Raleway", serif;
   }

   .montserrat {
      font-family: "Montserrat", serif;
   }

   .helvetica {
      font-family: 'URWRegular', "Helvetica", serif;
   }


   :root {

      /* this has to be set to switch between light or dark */

      --main-adjusting: 320;
      --main-adjuster: 100vw;

      --thumb-color: var(--ceu);
      --item-color: grey;

      --light-bg: white;
      --light-color: #222;

      --dark-bg: #101010;
      --dark-color: #aaa;
      --player-width: calc(var(--main-adjuster) * (340/400));
     font-size: calc(var(--main-adjuster) * (20/400));
/*        font-size: calc(var(--main-adjuster) * (20/400));*/
     line-height: 1.05;

   }

   *{

      scrollbar-width: none;
      border-color: transparent;
      font-family: URWRegular;
      box-sizing: border-box;
      margin: 0;
      color: #aaa;
      -webkit-tap-highlight-color: transparent;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      word-wrap: break-word;
      word-break: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;

      -webkit-user-select: none; /* Safari */
      -ms-user-select: none; /* IE 10 and IE 11 */
      user-select: none; /* Standard syntax */

      -webkit-overflow-scrolling: touch;

   }

   .prevent-select {

   }

   a{
      scroll-margin-top: calc(calc(var(--main-adjuster) * (80/400)) + 5em);
   }

   img{
      object-fit: cover;
      margin: 0;
      padding: 0;
   }

   html, body{
      height: 100%;
      width: 100vw;
      overflow: hidden;
      background: #171717;
   }
   
   main{
      --player-width: 100vw;
      width: 100%;
      height: 100%;
      position: fixed;
      left: calc(50% - (var(--player-width)/2));
      top: 0;
      background: #171717;
      border-radius: 0;
      padding: calc(var(--main-adjuster) * (16/400));
      overflow: hidden;
/*      border: calc(var(--main-adjuster) * (1/400)) solid #171717;*/
   }

   sup{
      font-size: calc(var(--main-adjuster) * (10/400));
   }

   input[type="color"]:focus{
      box-shadow: none;
   }

   input[type="color"]::-webkit-color-swatch{
      margin: 0;
      border: none;
      border-radius: inherit;
      outline: none;
      height: calc(var(--main-adjuster) * (40/400));
   }

   input[type="color"]::-webkit-color-swatch-wrapper{
      padding: 0;
      border-radius: inherit;
      border: none;
      outline: none;
      height: calc(var(--main-adjuster) * (40/400));
   }

   input[type="color"]::-moz-color-swatch{
      margin: 0;
      width: calc(100% - calc(var(--main-adjuster) * (0/400)));
      height: calc(100% - calc(var(--main-adjuster) * (0/400)));
      padding: 0;
      border: none;
   }

   input[type="color"]::-moz-focus-inner{
      padding: calc(var(--main-adjuster) * (0/400));
      margin: 0;
      border: none;
      height: calc(var(--main-adjuster) * (40/400));
   }

   input[type="checkbox"]{
      appearance: none;
      position: relative;
      background: transparent;
      border: calc(var(--main-adjuster) * (1/400)) solid white;
      border-radius: calc(var(--main-adjuster) * (2/400));
   }

   input[type="checkbox"]:checked{
      border-color: var(--ceu);
   }

   input[type="checkbox"]:checked:after{
      content: "";
      position: absolute;
      left: calc(var(--main-adjuster) * (3/400));
      top: calc(var(--main-adjuster) * (3/400));
      width: calc(100% - calc(var(--main-adjuster) * (6/400)));
      height: calc(100% - calc(var(--main-adjuster) * (6/400)));
      background:var(--ceu);
   }


   .line-clamp{
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
   }


   @-webkit-keyframes spin {
       100% {
         -webkit-transform: rotate(360deg)
       }
   }

   @keyframes spin {
       100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
       }
   }



   @keyframes line-scale-pulse-out-rapid {

      0% { transform: scaleY(1); }
      80% { transform: scaleY(0.3); }
      90% { transform: scaleY(1); } 

   }

   .loader-container{
      height: calc(var(--main-adjuster) * (100/400));
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .loader-3{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      height: 100%;
   }


   .loader-3 > div {
      width: calc(var(--main-adjuster) * (1/400));
      height: 90%;
      border-radius: calc(var(--main-adjuster) * (1/400));
      margin: 0 calc(var(--main-adjuster) * (2/400));
      animation-fill-mode: both;
      display: inline-block;
      vertical-align: middle;
      animation: line-scale-pulse-out-rapid 0.9s -0.5s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78); 
   }

   .loader-3 > div:nth-child(2), .loader-3 > div:nth-child(4) {
       animation-delay: -0.25s !important; 
   }

   .loader-3 > div:nth-child(1), .loader-3 > div:nth-child(5) {
       animation-delay: 0s !important; 
   }


   .fundo-vermelho{
      background: var(--ver);
   }
   .fundo-rosa{
      background: var(--rosa);
   }
   .fundo-roxo{
      background: var(--roxo);
   }
   .fundo-violeta{
      background: var(--vio);
   }
   .fundo-ceu{
      background: var(--ceu);
   }





   button,
   .play-podcast,
   .song-item-action,
   .station-body-action,
   .station-header-button{
      padding: 0;
      position: relative;
   }

   button:not([class*="lg-icon"]):after,
   .play-podcast:after,
   .song-item-action:after,
   .station-body-action:after,
   .station-header-button:after{
      content: "";
      top: -10%;
      left: -10%;
      right: -10%;
      bottom: -10%;
      display: flex;
      position: absolute;
   }

   .common-page-header button:after{
      top: calc(var(--main-adjuster) * (-10/400)) !important;
      left: calc(var(--main-adjuster) * (-10/400)) !important;
      right: calc(var(--main-adjuster) * (-10/400)) !important;
      bottom: calc(var(--main-adjuster) * (-10/400)) !important;
   }

   #lg-download{
      display: none !important;
   }

   .station-body-action{
      width: calc(var(--main-adjuster) * (30/400));
      display: flex;
      justify-content: center;
      align-items: center;
   }


   .music-player,
   .creator-controller{
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 0;
      width: 100vw;
      padding: calc(var(--main-adjuster) * (7/400)) calc(var(--main-adjuster) * (16/400));
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 3;
      background: linear-gradient(0deg, #000, transparent);
      height: calc(var(--main-adjuster) * (80/400));
      box-shadow: 0 calc(var(--main-adjuster) * (30/400)) 0 calc(var(--main-adjuster) * (20/400)) black;
   }

   .music-player.open{
/*      background: transparent;*/
   }

   .creator-page-controller,
   .page-controller,
   .music-player-controller {
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      border: none;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      cursor: pointer;
      padding: 0;
   }

   .page-controller:not([class*="active"]) *,
   .music-player-controller:not([class*="active"]) *{
      color: white !important;
   }

   .page-controller:not([class*="active"]) *[stroke="currentColor"],
   .music-player-controller:not([class*="active"]) *[stroke="currentColor"]{
      stroke: white !important;
   }

   .page-controller:not([class*="active"]) *[fill="currentColor"],
   .music-player-controller:not([class*="active"]) *[fill="currentColor"]{
      fill: white !important;
   }


   .music-player .music-player-controller:not(:nth-child(5)),
   .music-player.open .page-controller:not(:nth-child(5)){
      display: none;
   }

   .music-player.open .music-player-controller:not(:nth-child(5)){
      display: flex;
   }

   .music-player-controller img{
      display: none !important;
   }

   .music-player-controller.buffering img{
      display: flex !important;
   }

   .music-player-controller.buffering img ~ *:not(:last-child){
      display: none !important;
   }

   .page-controller::before{
      content: attr(name);
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-10/400));
      width: 100%;
      min-width: fit-content;
      left: calc(var(--main-adjuster) * (0/400));
      display: flex;
      justify-content: center;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (8/400));
      white-space: nowrap;
      color: white;
   }

   .creator-page-controller:nth-child(3)::before{
      left: -10%;
   }

   .page-controller svg{
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .page-controller.active::before{
      color: var(--vio);
   }

   .page-controller:last-child::before{
      left: calc(var(--main-adjuster) * (1/400));
   }

   .page-controller:nth-last-child(2)::before{
/*      left: calc(var(--main-adjuster) * (-1/400));*/
   }


   .music-player-controller.play-button::before{
      content: "";
      display: flex;
      width: calc(var(--main-adjuster) * (4/400));
      height: calc(var(--main-adjuster) * (4/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
      background: var(--vio);
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-12/400));
      left: calc(50% - calc(var(--main-adjuster) * (1/400)));
   }

   .page-controller.active > *:first-child{
      display: flex;
   }

   .page-controller.active *,
   .music-player-controller.active *{
/*      color: var(--thumb-color);*/
/*      border-color: var(--thumb-color);*/
   }

   .page-controller > *:first-child,
   .page-controller.active > *:last-child{
      display: none;
   }

   .page-controller:hover,
   .page-controller:hover *,
   .music-player-controller:not(:nth-child(5)):hover,
   .music-player-controller:not(:nth-child(5)):hover *{
/*      color: var(--thumb-color);*/
      border-color: var(--thumb-color);
      transition: .5s;
   }

   .music-player-controller.play-button{
      width: calc(var(--main-adjuster) * (45/400));
      height: calc(var(--main-adjuster) * (45/400));
   }

   .music-player-controller.play-button svg{
      background: transparent;
   }

   .music-player-controller.options-button svg{
      transform: rotate(90deg);
/*         margin-right: calc(var(--main-adjuster) * (-5/400));*/
   }

   .play-icon{
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      color: white;
   }

   .play-icon *{
      color: white;
   }

   .music-player-controller.play-button .play-icon,
   .music-player-controller.play-button.playing .pause-icon{
      display: flex;
   }

   .music-player-controller.play-button.playing .play-icon,
   .music-player-controller.play-button .pause-icon{
      display: none;
   }

   .round-progress{
      position: absolute;
      transform: rotate(-90deg);
   }

   .round-progress-percentage{
      stoke: var(--thumb-color);
   }



   .pause-icon{
      display: flex;
      position: absolute;
      background: transparent;
   }

   .music-player-controller.play-button.playing .pause-icon::after,
   .music-player-controller.play-button.playing .pause-icon::before{
/*       background: var(--thumb-color);*/
   }

   .pause-icon::after,
   .pause-icon::before{
      content: "";
      height: calc(var(--main-adjuster) * (20/400));
      width: calc(var(--main-adjuster) * (5/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
      display: flex;
      margin: 0 calc(var(--main-adjuster) * (4/400));
   }







   .text-effect{
      text-align: center;
      color: #fcedd8;
      background: #d52e3f;
      /*font-family: 'Niconne', cursive;*/
      font-weight: 700;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) #eb452b, 
         calc(calc(var(--main-adjuster) * (10/400))/5) calc(calc(var(--main-adjuster) * (10/400))/5) calc(var(--main-adjuster) * (0/400)) #efa032, 
         calc(calc(var(--main-adjuster) * (15/400))/5) calc(calc(var(--main-adjuster) * (15/400))/5) calc(var(--main-adjuster) * (0/400)) #46b59b, 
         calc(calc(var(--main-adjuster) * (20/400))/5) calc(calc(var(--main-adjuster) * (20/400))/5) calc(var(--main-adjuster) * (0/400)) #017e7f, 
         calc(calc(var(--main-adjuster) * (25/400))/5) calc(calc(var(--main-adjuster) * (25/400))/5) calc(var(--main-adjuster) * (0/400)) #052939, 
         calc(calc(var(--main-adjuster) * (30/400))/5) calc(calc(var(--main-adjuster) * (30/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b, 
         calc(calc(var(--main-adjuster) * (35/400))/5) calc(calc(var(--main-adjuster) * (35/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b, 
         calc(calc(var(--main-adjuster) * (40/400))/5) calc(calc(var(--main-adjuster) * (40/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b, 
         calc(calc(var(--main-adjuster) * (45/400))/5) calc(calc(var(--main-adjuster) * (45/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b;
   }






   .floating-player{
      position: absolute;
      bottom: calc(100% - calc(var(--main-adjuster) * (4/400)));
      left: calc(var(--main-adjuster) * (8/400));
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      border-radius: calc(var(--main-adjuster) * (12/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black, inset 0 0 0 calc(var(--main-adjuster) * (100/400)) rgba(0, 0, 0, 0.1);
      display: flex;
      height: calc(var(--main-adjuster) * (50/400));
      overflow: hidden;
      justify-content: space-between;
      align-items: center;
      padding: calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (8/400));
      padding-left: calc(var(--main-adjuster) * (5/400));
   }
   
   .music-player.open .floating-player{
      display: none !important;
   }

   .floating-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (8/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .floating-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .floating-control{
      height: 100%;
      margin-left: calc(var(--main-adjuster) * (10/400));
      width: calc(100% - calc(var(--main-adjuster) * (120/400)));
      position: relative;
   }

   .floating-control-container{
      width: 100%;
      height: 100%;
   }

   .floating-control-container.swiper-wrapper{
      padding-top: calc(var(--main-adjuster) * (2/400));
   }

   .floating-control-item{
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      padding-bottom: calc(var(--main-adjuster) * (2/400));
   }

   .floating-control-item::after,
   .floating-control-item::before{
      content: "";
      width: 100%;
      height: calc(100% - calc(var(--main-adjuster) * (0/400)));
      position: absolute;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (32/400));
      font-weight: bolder;
      color: white;
/*      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;*/
      display: flex;
      align-items: center;
      top: 0;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      overflow: visible;
      white-space: pre;
      word-spacing: calc(var(--main-adjuster) * (20/400));
      padding-top: calc(var(--main-adjuster) * (3/400));
      font-family: 'URWRegular' !important;
      mix-blend-mode: difference;
   }

   .floating-control-item::after{
      left: calc(100% + calc(var(--main-adjuster) * (10/400)));
      content: "Asseguir Asseguir Asseguir Asseguir Asseguir";
      justify-content: start;
   }

   .floating-control-item::before{
      right: calc(100% + calc(var(--main-adjuster) * (10/400)));
      content: "Anterior Anterior Anterior Anterior Anterior";
      justify-content: end;
/*      box-shadow: calc(var(--main-adjuster) * (-200/400)) 0 0 calc(var(--main-adjuster) * (200/400)) rgba(0, 0, 0, 0.5);*/
   }

   .floating-control-item *{
      pointer-events: none;
   }

   .floating-control-title{
      font-size: calc(var(--main-adjuster) * (16/400));
      color: white;
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (4/400));
   }

   .floating-control-name{
      font-size: calc(var(--main-adjuster) * (12/400));
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (1/400));
   }

   .floating-actions{
      height: 100%;
      display: flex;
      align-items: center;
   }

   .floating-action-button{
      padding: 0;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      background: transparent;
      margin: 0;
      position: relative;
   }

   .floating-action-button:last-child{
      right: calc(var(--main-adjuster) * (-2/400));
   }

   .floating-action-button:first-child path {
      fill: white !important;
   }


   .floating-action-button.active:first-child path {
      fill: url(#playlistGradient) !important;
   }
















   .floating-alert{
      width: calc(100vw - calc(var(--main-adjuster) * (10/400)));
      display: none;
      border-radius: calc(var(--main-adjuster) * (10/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      padding: calc(var(--main-adjuster) * (5/400));
      /*overflow: hidden;*/
      align-items: center;
      justify-content: space-between;
      height: calc(var(--main-adjuster) * (50/400));
      position: absolute;
      left: calc(var(--main-adjuster) * (5/400));
      bottom: calc(var(--main-adjuster) * (75/400));
      z-index: 5;
      background: #171717;
      box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.85);
   }

   .floating-alert.apple{
      bottom: calc(var(--main-adjuster) * (95/400));
   }

   .floating-alert::after{
      content: "";
      width: 100%;
      height: 200vh;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: transparent;
      position: absolute;
   }

   .floating-alert.active{
      display: flex;
   }

   .modal-page.active ~ .floating-alert{
      bottom: calc(var(--main-adjuster) * (80/400));
   }

   .modal-page.apple.active ~ .floating-alert{
      bottom: calc(var(--main-adjuster) * (100/400));
   }

   .floating-alert-button{
      width: calc(var(--main-adjuster) * (60/400));
      height: 100%;
      display: flex;
      min-width: calc(var(--main-adjuster) * (60/400));
      background: black;
      border-radius: calc(var(--main-adjuster) * (5/400));
      align-items: center;
      color: white;
      justify-content: center;
      text-transform: uppercase;
      line-height: 1.1;
      /*padding-top: calc(var(--main-adjuster) * (4/400));*/
      display: none;
   }

   .floating-alert-text{
      margin: 0 calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (12/400));
      line-height: 1.1;
      padding-top: calc(var(--main-adjuster) * (4/400));
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      line-clamp: 3;
      -webkit-line-clamp: 3;
   }

   .floating-alert-icon{
      height: calc(var(--main-adjuster) * (30/400));
      width: calc(var(--main-adjuster) * (30/400));
      min-width: calc(var(--main-adjuster) * (30/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: green;
      display: flex;
      align-items: center;
      justify-content: center;
      /*display: none;*/
      margin: 0 calc(var(--main-adjuster) * (5/400));
   }









   .pages-manager{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      background: inherit;
      height: 100%;
   }

   .main-page-container{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .main-page-container ~ .main-page-container{
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .pages-manager-section{
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0;
      overflow: hidden;
      position: absolute;
      left: 100%;
      top: 0;
      overflow-y: auto;
      display: flex;
      background: #171717;
      transition: .25s;
   }

   .pages-manager-section.before-remove{
      left: -100% !important;
      overflow: hidden;
      position: none !important;
   }

   .pages-manager-section.active ~ .pages-manager-section{
      left: 100% !important;
   }

   .pages-manager-section.active ~ .pages-manager-section.before-remove{
      left: -100% !important;
   }

   .pages-manager-section.player-page{
      background: linear-gradient(0deg, black, --thumb-color);     
   }

   .pages-manager-section.active{
      z-index: 1;
      top: 0;
      left: 0;
      transition: .25s;
   }

   .pages-manager-section.player-page{
      left: 0;
      top: 100%;
   }

   .pages-manager-section.player-page.active{
      top: 0;
      transition: .25s;
   }

   .pages-manager-section.video-page.active{
      z-index: 5;
   }



   .player-page{

   }

   .common-page-header{
      width: 100%;
      height: calc(var(--main-adjuster) * (80/400));
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (20/400));
      position: sticky;
      top: 0;
   }

   .common-page-header .search-categories{
      width: calc(100% + calc(var(--main-adjuster) * (0/400)));
      min-width: calc(100% + calc(var(--main-adjuster) * (0/400)));
      margin-top: calc(var(--main-adjuster) * (-1/400));
   } 

   .common-header-progress{
      width: calc(100% - calc(var(--main-adjuster) * (96/400)));
      position: relative;
      height: calc(var(--main-adjuster) * (3/400));
      background: rgba(0, 0, 0, 0.25);
      border-radius: calc(var(--main-adjuster) * (5/400));
      overflow: hidden;
      display: none;
   }

   .common-progress-status{
      background: var(--thumb-color);
      position: absolute;
      display: flex;
      height: 100%;
      width: 50%;
      left: 0;
      top: 0;
      border-radius: inherit;
   }

   .common-page-header .loader-3{
      margin-bottom: 0;
      display: none;
   }

   .common-page-header .active{
      display: flex !important;
   }

   .common-page-header > .active ~ *:not([class*="common-header-button"]) {
      display: none !important;
   }

   .common-page-header .loader-3 > div {
      width: calc(var(--main-adjuster) * (1/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (2/400));
      margin: 0 calc(var(--main-adjuster) * (3/400));
   }

   .common-header-button{
      cursor: pointer;
      transform: scale(1.0);
      background: none;
      border: none;
      outline: none;
      margin: 0;
      padding: 0;
      position: relative;
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .common-header-button:hover,
   .common-header-button.active{
      transition: .5s;
/*      color: var(--thumb-color);*/
   }

   .common-header-button *{
      color: white;
   }

   .common-header-title{
      color: #fff;
      color: white;
      text-align: center;
      word-wrap: break-word;
      word-break: break-word;
      -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        position: relative;
        z-index: 1;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }


   .player-page-view{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: flex-start;
      height: 100vh;
      padding: calc(var(--main-adjuster) * (80/400)) 0;
      overflow-y: auto;
   }

   .player-page-view .explore-suggestions{
      height: auto;
      padding: calc(var(--main-adjuster) * (0/400)) 0;
      overflow: visible;
      border-radius: calc(var(--main-adjuster) * (16/400));
      width: calc(100% - calc(var(--main-adjuster) * (0/400)));
   }

   .player-page-view .explore-suggestion{
      width: calc((100vw / 3) - calc(var(--main-adjuster) * (13.5/400)));
      margin: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6.5/400));
      height: 25vh;
      height: calc(var(--main-adjuster) * (200/400));
   }

   .player-page .common-page-header{
      position: absolute !important;
      left: 0;
      top: 0;
   }

   .player-slider{
      z-index: 0;
   }

   .swiper-wrapper{
      display: flex;
      align-items: center;
      margin-left: 0;
      width: calc(100% + calc(var(--main-adjuster) * (0/400)));
      margin-top: 0;
/*      padding-top: calc(var(--main-adjuster) * (16/400));*/
      height: auto;
   }


   .track-item-container{
      width: calc(15vh*2);
      height: 40vh;
      margin-top: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      cursor: pointer;
   }

   .track-item-container-active{
      width: calc(15vh*2.1);
      height: 45vh;
      margin-right: calc(var(--main-adjuster) * (315/400)) !important;
   }

   .track-item-container img{
      width: 100%; 
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (11/400)) !important;

   }

   .track-item{
      width: 100%;
      height: 100%;
      padding: calc(var(--main-adjuster) * (5/400));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: linear-gradient(-45deg, rgba(0, 0, 0, 1), #141414);
      box-shadow: inset 0 0 0 calc(var(--main-adjuster) * (1000/400)) rgba(0, 0, 0, 0.5), 0 0 calc(var(--main-adjuster) * (10/400)) rgba(0, 0, 0, 0.75);
   }

   .track-item ~ *{
      opacity: 0 !important;
   }



   .player-page-details{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (32/400));
      text-align: center;
      padding: 0 calc(var(--main-adjuster) * (16/400));
   }

   .player-page-title{
      color: #fff;
      -webkit-line-clamp: 2;
      font-size: calc(var(--main-adjuster) * (24/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .player-page-artist{
      display: block;
      font-size: calc(var(--main-adjuster) * (14/400));
      margin-top: calc(var(--main-adjuster) * (10/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }



   .player-page-actions{
      width: 100%;
      display: flex;
      margin-top: calc(var(--main-adjuster) * (32/400));
      align-items: center;
      justify-content: center;
   }

   .player-page-actions .player-action-button{
      margin: 0 calc(var(--main-adjuster) * (16/400));
      cursor: pointer;
      padding: 0;
      border: none;
      outline: none;
      background: transparent;
   }

   .repeat-button.repeat-single:after{
      content: "•";
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: calc(var(--main-adjuster) * (4/400));
      color: var(--ceu);
      font-weight: bolder;
   }

   .repeat-button.repeat-single *{
      fill: var(--ceu);
      color: var(--ceu);
      stroke: transparent;
   }

   .repeat-button.repeat-all *{
      fill: var(--ceu);
      color: var(--ceu);
      stroke: transparent;
   }

   .player-page-actions .player-action-button *{
      color: white;
   }

   .player-page-actions .player-action-button.active,
   .player-page-actions .player-action-button.active *{
      color: var(--thumb-color);
   }


   .player-page-actions .player-action-button.like-button.active *{
      color: red;
      fill: red;
   }

   .player-action-button.like-button {
      top: calc(var(--main-adjuster) * (-2/400));
      width: calc(var(--main-adjuster) * (22/400));
      height: calc(var(--main-adjuster) * (22/400));
      display: flex;
      align-items: center;
      justify-content: center;
      --heart-color: white;
   }

   .player-action-button.like-button.active{
      --heart-color: red;
   }

     .svg-outline,
     .svg-filled {
      fill: var(--heart-color);
      position: absolute;
    }

     .svg-filled {
      animation: keyframes-svg-filled 1s;
      display: none;
    }

     .svg-celebrate {
      position: absolute;
      animation: keyframes-svg-celebrate .5s;
      animation-fill-mode: forwards;
      display: none;
      stroke: var(--heart-color);
      fill: var(--heart-color);
      stroke-width: calc(var(--main-adjuster) * (2/400));
    }

   .player-action-button.active .svg-filled {
      display: block
    }

   .player-action-button.active .svg-celebrate {
      display: block
    }

    @keyframes keyframes-svg-filled {
      0% {
        transform: scale(0);
      }

      25% {
        transform: scale(1.2);
      }

      50% {
        transform: scale(1);
        filter: brightness(1.5);
      }
    }

    @keyframes keyframes-svg-celebrate {
      0% {
        transform: scale(0);
      }

      50% {
        opacity: 1;
        filter: brightness(1.5);
      }

      100% {
        transform: scale(1.4);
        opacity: 0;
        display: none;
      }
    }

   .player-page-progress{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (24/400));
      padding: 0 calc(var(--main-adjuster) * (24/400));
   }

   progress::-webkit-progress-inner-element{
      background: transparent;
      height: inherit;
      width: inherit;
      border-radius: inherit;
      overflow: hidden;
   }

   progress::-webkit-progress-bar{
      border-radius: inherit;
      background: inherit;
      overflow: inherit;
   }

   progress::-ms-fill{ 
      border-radius: inherit;
/*      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));*/
         background: var(--thumb-color);
/*      background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.3) calc(var(--main-adjuster) * (5/400)), transparent calc(var(--main-adjuster) * (10/400)));*/
      border: none;
   }

   progress::-moz-progress-bar{ 
      border-radius: inherit;
/*      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));*/
         background: var(--thumb-color);
/*      background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.3) calc(var(--main-adjuster) * (5/400)), transparent calc(var(--main-adjuster) * (10/400)));*/

   }

   progress::-webkit-progress-value{
      border-radius: inherit;
/*      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));*/
         background: var(--thumb-color);
/*      background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.3) calc(var(--main-adjuster) * (5/400)), transparent calc(var(--main-adjuster) * (10/400)));*/
   }
   
   .player-page-range{
      width: 100%;
      position: relative;
   }

   .player-page-range input{
      width: 100%;
      height: calc(var(--main-adjuster) * (30/400));
      background: transparent;
   }

   .player-range-progress{
      width: 100%;
      position: absolute;
      left: 0;
      top: calc(50% - calc(var(--main-adjuster) * (4.5/400)));
      height: calc(var(--main-adjuster) * (2/400));
      background: transparent;
      pointer-events: none;
   }

   .player-range{
      -webkit-appearance: none;
      -moz-appearance: none;
   }

   .player-range::-webkit-slider-thumb{
      margin-top: calc(var(--main-adjuster) * (-7/400));
/*      background: linear-gradient(90deg, var(--roxo), var(--vio), var(--ceu)) !important;*/
      border-radius: calc(var(--main-adjuster) * (32/400));
      -webkit-appearance: none !important;
      background: var(--thumb-color) !important;
      width: calc(var(--main-adjuster) * (16/400));
      height: calc(var(--main-adjuster) * (16/400));
   }

   .player-range::-ms-thumb{
      background: var(--thumb-color) !important;
      border: calc(var(--main-adjuster) * (5/400)) solid var(--thumb-color) !important;
/*      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;*/
   }

   .player-range::-ms-thumb:active, 
   .player-range:active::-ms-thumb{
      background: var(--thumb-color) !important;
      border: calc(var(--main-adjuster) * (5/400)) solid var(--thumb-color) !important;
/*      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;*/
   }

   .player-range::-moz-range-thumb{
      background: var(--thumb-color) !important;
      border: calc(var(--main-adjuster) * (5/400)) solid var(--thumb-color) !important;
/*      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;*/
      -moz-appearance: none;
   }

   .player-range:focus::-webkit-slider-thumb {
       background: var(--thumb-color) !important;
   }

   .player-range:focus::-moz-range-thumb {
      background: var(--thumb-color) !important;
   }

   .player-range::-moz-focus-outer {
      border: 0
   }

   .player-range::-webkit-slider-runnable-track {
      width: 100%;
      height: calc(var(--main-adjuster) * (2/400));
      cursor: pointer;
      background-color: #222;
   }



   .player-page-ellapsed{
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: calc(var(--main-adjuster) * (12/400));
/*      margin-top: calc(var(--main-adjuster) * (8/400));*/
   }

   .player-page-ellapsed span{
      font-family: 'URWRegular';
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }







   .main-page{
      align-content: start;
      padding-bottom: calc(var(--main-adjuster) * (160/400));
   }

   .main-page-section{
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      align-content: start;
      margin: calc(var(--main-adjuster) * (16/400)) 0;
   }

   .content-page .main-page-section{
      margin: calc(var(--main-adjuster) * (32/400)) 0;
   }

   .main-page-section:first-child{
      margin-top: 0;
   }


   .main-page-section .nominee-template{
      width: 100vw;
      height: 100vw;
      min-width: 100vw;
      min-height: 100vw;
   }

   .main-page-header{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      cursor: pointer;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      position: relative;
   }

   .my-current-balance,
   .my-beatzcoin-balance{
      position: relative;
   }

   .my-current-balance::after,
   .my-beatzcoin-balance::after{
      content: attr(title);
      position: absolute;
      left: 0;
      top: calc(var(--main-adjuster) * (-7/400));
      color: white;
      padding: calc(var(--main-adjuster) * (5/400));
      border-radius: calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (5/400)) 0 0;
      background: inherit;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .my-beatz-balance,
   .my-account-balance{
      color: white;
   }

   .my-beatz-balance sup,
   .my-account-balance sup{
      margin: calc(var(--main-adjuster) * (-4/400));
   }

   .content-page .main-page-header{
      margin-bottom: 0;
   }

   .main-page-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (20/400));
      width: 100%;
   }

   .search-title-button{
      right: calc(var(--main-adjuster) * (16/400));
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      color: var(--ceu);
      background: transparent;
      border-radius: calc(var(--main-adjuster) * (4/400));
      position: absolute;
      align-items: center;
      text-transform: uppercase;
      font-weight: bolder;
   }

   .main-page-description{
      font-size: calc(var(--main-adjuster) * (13/400));
      width: 100%;
      color: grey;
   }

   .header-action{
      transform: rotate(180deg);
   }

   .main-page-body,
   .library-categories-body{
      margin-top: calc(var(--main-adjuster) * (16/400));
      width: 100%;
      display: flex;
      overflow-x: auto;
      position: relative;
   }

   .main-page-body{
      overflow-y: hidden !important;
   }

   .specific-page-body{
      padding: 0 calc(var(--main-adjuster) * (16/400));
   }

   .library-categories-body{
      padding: calc(var(--main-adjuster) * (4/400)) 0;
   }

   .main-page .main-page-body,
   .main-page-section:first-child .main-page-body{
      margin-top: 0;
   }

   .artist-item{
      width: calc(var(--main-adjuster) * (130/400));
      min-width: calc(var(--main-adjuster) * (130/400));
      margin-right: calc(var(--main-adjuster) * (14/400));
      padding: calc(var(--main-adjuster) * (8/400));
      padding-bottom: calc(var(--main-adjuster) * (10/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: linear-gradient(-45deg, black, var(--item-color));
      background: var(--item-color);
      cursor: pointer;
   }

   .artist-item:first-child{
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .artist-item-cover{
      width: 100%;
      height: calc(var(--main-adjuster) * (115/400));
      border-radius: calc(var(--main-adjuster) * (8/400));
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .artist-item-details{
      display: flex;
      flex-wrap: wrap;
      color: #aaa;
   }

   .artist-item-title{
      color: #fff;
      width: 100%;
      max-width: 100%;
      font-size: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (5.5/400));
      font-weight: 600;
   }

   .artist-item-name{
      font-size: calc(var(--main-adjuster) * (12/400));
   }








   .library-item{
      width: calc(var(--main-adjuster) * (70/400));
      height: calc(var(--main-adjuster) * (140/400));
      min-width: calc(var(--main-adjuster) * (100/400));
      padding: calc(var(--main-adjuster) * (11/400));
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      margin-right: calc(var(--main-adjuster) * (16/400));
      background: #141414;
      border-radius: calc(var(--main-adjuster) * (16/400));
      position: relative;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      padding-bottom: calc(var(--main-adjuster) * (9/400));
      overflow: hidden;
   }


   .library-purchase{
    
     --s: calc(var(--main-adjuster) * (40/400)); /* control the size*/
     --c1: #ccbf82;
     --c2: #604848;
     
     --_g: var(--c1)        6.1%,var(--c2)  6.4% 18.6%,var(--c1) 18.9% 31.1%,
           var(--c2) 31.4% 43.6%,var(--c1) 43.9% 56.1%,var(--c2) 56.4% 68.6%,#0000 68.9%;
     background:
       radial-gradient(var(--s) at 100% 0   ,var(--_g)),
       radial-gradient(var(--s) at 0    0   ,var(--_g)),
       radial-gradient(var(--s) at 0    100%,var(--_g)),
       radial-gradient(var(--s) at 100% 100%,var(--_g)) var(--c1);
     background-size: var(--s) var(--s);
   }

   .library-playlist{

     --s: calc(var(--main-adjuster) * (50/400)); /* control the size*/
     --c1: #cd2942;
     --c2: #62928c;
     --c3: #e8cba9;
     --c4: #33152e;
     --c5: #414352;
     
     --_g: conic-gradient(from 30deg at 50% 25%,#0000 300deg,var(--c1) 0);
     background:
       var(--_g) calc(0.2885*var(--s)) calc(7*var(--s)/12),
       var(--_g) 0 calc(var(--s)/12),
       conic-gradient(from 120deg at 50% calc(250%/3),var(--c2) 120deg,#0000 0),
       repeating-conic-gradient(from 30deg,#0000 0 60deg,var(--c3) 0 120deg),
       repeating-conic-gradient(var(--c4) 0 60deg,var(--c2) 0 120deg,var(--c5) 0 180deg);
     background-size: calc(0.577*var(--s)) var(--s);
   }

   .library-following{

     --s: calc(var(--main-adjuster) * (50/400)); /* control the size*/
     --c1: #f8b195;
     --c2: #355c7d;
     
     --_g: 
        var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
        var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
     background:
       radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
       radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
       var(--c1);
     background-size: var(--s) var(--s);
   }


   .library-local{
     --s: calc(var(--main-adjuster) * (20/400)); /* control the size*/
     --c1: #f2f2f2;
     --c2: #cdcbcc;
     --c3: #999999;
     
     --_g: 0 120deg,#0000 0;
     background:
       conic-gradient(             at calc(250%/3) calc(100%/3),var(--c3) var(--_g)),
       conic-gradient(from -120deg at calc( 50%/3) calc(100%/3),var(--c2) var(--_g)),
       conic-gradient(from  120deg at calc(100%/3) calc(250%/3),var(--c1) var(--_g)),
       conic-gradient(from  120deg at calc(200%/3) calc(250%/3),var(--c1) var(--_g)),
       conic-gradient(from -180deg at calc(100%/3) 50%,var(--c2)  60deg,var(--c1) var(--_g)),
       conic-gradient(from   60deg at calc(200%/3) 50%,var(--c1)  60deg,var(--c3) var(--_g)),
       conic-gradient(from  -60deg at 50% calc(100%/3),var(--c1) 120deg,var(--c2) 0 240deg,var(--c3) 0);
     background-size: calc(var(--s)*sqrt(3)) var(--s);
   }

   .library-download{

     --s: calc(var(--main-adjuster) * (50/400)); /* control the size*/
     --c1: #1d1d1d;
     --c2: #4e4f51;
     --c3: #3c3c3c;
     
     background:
       repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
        calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
       repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
     background-size: var(--s) calc(var(--s)*tan(30deg));
   }


   .library-item::after{
      content: "";
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
   }

   .library-item:first-child{
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .library-item-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (80/400));
      padding: calc(var(--main-adjuster) * (3/400));
      position: relative;
      background: #171717;
      border: none !important;
   }

   .library-item-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .library-item-icon{
      position: absolute;
      margin: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      color: white !important;
      border-radius: calc(var(--main-adjuster) * (30/400));
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .library-item-icon svg{
      width: calc(var(--main-adjuster) * (24/400));
      height: calc(var(--main-adjuster) * (24/400));
   }

   .library-item-icon *{
      color: white important;
   }

   .library-item-details{
      z-index: 1;
   }

   .library-item-title{
      font-size: calc(var(--main-adjuster) * (14/400));
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      word-break: keep-all;
      background: black;
      display: inline;
      padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (1/400));
   }





   .how-to-install{
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: flex;
         position: fixed;
         z-index: 55;
         flex-wrap: wrap;
         justify-content: center;
         backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));
         background: rgba(0, 0, 0, 0.8);
   }

   .how-to-header{
         display: flex;
         align-items: center;
         justify-content: center;
         width: fit-content;
         margin: calc(var(--main-adjuster) * (16/400));
         border-radius: calc(var(--main-adjuster) * (10/400));
         background: red;
         padding: calc(var(--main-adjuster) * (3/400));
         background: rgba(255, 255, 255, 0.08);
   }

   .how-to-button{
         display: flex;
         padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (12/400));
         border-radius: calc(var(--main-adjuster) * (8/400));
         border: none;
         background: none;
         text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .how-to-button.active{
         background: rgba(255, 255, 255, 0.25);
         color: white;
   }

   .how-to-media{
         width: calc(100% - calc(var(--main-adjuster) * (32/400)));
         height: calc(100% - calc(var(--main-adjuster) * (90/400)));
         margin-bottom: calc(var(--main-adjuster) * (16/400));
         display: flex;
         justify-content: center;

   }

   .how-to-video{
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (32/400));
   }



   .song-item{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400));
      cursor: pointer;
      position: sticky;
      left: 0;
      right: 0;
   }

   .song-item-action::before,
   .song-item-cover::before{
      content: "";
      width: 100%;
      height: calc(100% - calc(var(--main-adjuster) * (0/400)));
      position: fixed;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (32/400));
      font-weight: bolder;
      color: white;
      display: flex;
      align-items: center;
      top: 0;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      overflow: visible;
      white-space: pre;
      word-spacing: calc(var(--main-adjuster) * (15/400));
      padding-top: calc(var(--main-adjuster) * (3/400));
      font-family: 'URWRegular' !important;
      mix-blend-mode: difference;
   }

   .song-item-action::before{
      left: calc(100% + calc(var(--main-adjuster) * (10/400)));
      max-height: calc(var(--main-adjuster) * (64/400));
      justify-content: start;
   }

   .playlist-page .song-item-action::before{
      content: "Remover Remover Remover Remover Remover";
   }

   .song-item-cover::before{
      content: "Lista Lista Lista Lista Lista";
      justify-content: end;
      right: calc(100% + calc(var(--main-adjuster) * (10/400)));
   }

   .song-item:hover{
      background: rgba(255, 255, 255, 0.020);
   }

   .song-item:last-child{
      margin-bottom: 0;
   }

   .song-item-cover{
      height: calc(var(--main-adjuster) * (40/400));
      width: calc(var(--main-adjuster) * (40/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      border-radius: calc(var(--main-adjuster) * (8/400));
      overflow: hidden;
      pointer-events: none;
      position: relative;
   }

   .song-item-image{
      height: 100%;
      width: 100%;
   }

   .song-item-details{
      padding-top: calc(var(--main-adjuster) * (3/400));
      margin-left: calc(var(--main-adjuster) * (15/400));
      width: calc(100% - calc(var(--main-adjuster) * (95/400)));
      pointer-events: none;
   }

   .song-item-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (17/400));
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-weight: 550;
   }

   .song-item-name{
      font-size: calc(var(--main-adjuster) * (12/400));
      color: #aaa;
   }

   .song-item:hover .song-item-title,
   .song-item:hover .song-item-name{
      transition: .5s;
/*      color: var(--thumb-color);*/
   }

   .explicit-badge,
   .song-item-name span,
   .station-body-name span,
   .song-item-name i,
   .station-body-name i,
   .profile-stats-name span,
   .profile-stats-name i{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: calc(var(--main-adjuster) * (3/400));
      padding-bottom: calc(var(--main-adjuster) * (2/400));
      border-radius: calc(var(--main-adjuster) * (2/400));
      background: black;
      color: white;
      font-size: calc(var(--main-adjuster) * (10/400));
      font-family: 'Helvetica';
      margin-right: calc(var(--main-adjuster) * (6/400));
      font-style: normal;
      text-transform: uppercase;
      font-weight: bolder;
      line-height: normal;
   }

   .explicit-badge{
/*      font-family: inherit;*/
   }

   .offline-badge{
      padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (6/400));
      border-radius: calc(var(--main-adjuster) * (6/400));
      font-size: calc(var(--main-adjuster) * (14.5/400));
   }

   .explicit-badge ~ .explicit-badge,
   .explicit-badge.old-style-2,
   .explicit-badge.old-style-1{
      margin-left: 0;
      font-size: calc(var(--main-adjuster) * (9/400));
      margin-top: calc(var(--main-adjuster) * (-1/400));
      line-height: normal;
      font-family: "Helvetica";
      padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (3/400));
      line-height: normal;
   }

   .profile-stats-name .helvetica{
      background: var(--ceu);
   }

   .song-item-name,
   .station-body-name{
/*      display: flex;*/
      flex-direction: row-reverse;
      justify-content: flex-end;
   }

   .song-item-action{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (80/400));
      display: flex;
      align-items: center;
      justify-content: end;
      justify-items: end;
      cursor: pointer;
      position: relative;
   }

   .song-item-action > *{
      pointer-events: none;
   }

   .song-item-action > *:hover{
/*      color: var(--thumb-color);*/
   }





   .genre-item{
      width: calc((100%/6) - calc(var(--main-adjuster) * (8/400)));
      height: calc(((100vw - calc(var(--main-adjuster) * (32/400)))/6) - calc(var(--main-adjuster) * (7/400)));
      border-radius: calc(var(--main-adjuster) * (10/400));
      cursor: pointer;
      margin: calc(var(--main-adjuster) * (4/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      position: relative;
      overflow: hidden;
   }

   .small-box.no-effects {
      background-color: var(--vio);
      background-image: radial-gradient(circle at center center, var(--rosa), var(--vio)), repeating-radial-gradient(circle at center center, var(--rosa), var(--rosa), calc(var(--main-adjuster) * (10/400)), transparent calc(var(--main-adjuster) * (20/400)), transparent calc(var(--main-adjuster) * (10/400)));
      background-blend-mode: multiply;
   }

   .small-box.swiper-container{
      width: 100%;
      /*background: url(../lightgalleryjs/img/loading.gif);
      background-size: 30p 30p;
      background-repeat: no-repeat;
      background-position: center;*/
   }

   .small-box .swiper-wrapper{
      width: 100%;
      height: 100%;
      position: relative;
      padding: 0 !important;
   }







   .genre-item::after{
      content: attr(data-search);
      display: flex;
      position: absolute;
      word-break: normal;
      padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (4/400));
      left: 0;
      bottom: 0;
      color: white;
      z-index: 1;
      max-width: 100%;
      width: fit-content;
      font-size: calc(var(--main-adjuster) * (8/400));
      font-weight: bolder;
      border-top-right-radius: calc(var(--main-adjuster) * (5/400));
      mix-blend-mode: difference;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      text-transform: uppercase;
   }

   .main-page-body .genre-item{
      width: calc((100%/4) - calc(var(--main-adjuster) * (8/400)));
      height: calc(((100vw - calc(var(--main-adjuster) * (32/400)))/4) - calc(var(--main-adjuster) * (7/400)));
      margin: calc(var(--main-adjuster) * (4/400));
   }

   .genre-item-cover{
      width: 100%;
      border-radius: inherit;
      height: 100%;
   }

   .swiper-wrapper .genre-item-cover{
      width: 100%;
      height: 100%;
   }

   .search-body .genre-item-cover{
      transform: scale(1.0);
      animation: 100s infinite scaleIn linear;
   }

   .search-body .left-side .genre-item-cover,
   .search-body .right-side .genre-item-cover{
      transform: scale(2.0);
      animation: 100s infinite scaleOut linear;
   }

   .swiper-wrapper .genre-item-cover{
      transform: none !important;
      animation: none !important;
   }


   @keyframes scaleIn {

      0%{
         transform: scale(1.0);
      }

      50%{
         transform: scale(2.0);
      }

      100%{
         transform: scale(1.0);
      }

   }

   @keyframes scaleOut {

      0%{
         transform: scale(2.0);
      }

      50%{
         transform: scale(1.0);
      }

      100%{
         transform: scale(2.0);
      }

   }






   .search-temporary{
      width: 100%;
      position: fixed;
      left: 0;
      top: 0;
      max-height: 100vh;
      height: 100vh;
      display: none;
      flex-wrap: wrap;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      background: #101010;
      overflow: hidden;
      z-index: 1;
   }

   .search-temporary.active{
      z-index: 1;
      display: flex;
   }

   .search-temporary.active ~ .search-field{
      z-index: 1;
   }

   .search-temporary.active ~ .search-categories{
      z-index: 0;
   }

   .search-temporary-header{
      width: 100%;
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      height: calc(var(--main-adjuster) * (100/400));
      background: linear-gradient(180deg, #101010, #101010, transparent);
      pointer-events: none;
   }

   .temporary-header-title{
      padding: calc(var(--main-adjuster) * (16/400));
      font-size: calc(var(--main-adjuster) * (14/400));
      font-style: italic;
      color: grey;
   }



   .search-temporary-body{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      padding: calc(var(--main-adjuster) * (48/400)) 0;
      overflow-y: auto;
      padding-top: calc(var(--main-adjuster) * (80/400));
      padding-bottom: calc(var(--main-adjuster) * (152/400));
      align-content: start;
   }

   .temporary-body-item{
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (16/400));
      width: 100%;
      font-size: calc(var(--main-adjuster) * (24/400));
      align-items: center;
      /*line-height: 2;*/
      overflow: hidden;
      display: flex;
      position: relative;
      justify-content: space-between;
   }

   .temporary-body-item[data-id]{
      margin-top: calc(var(--main-adjuster) * (4/400));
   }

   .temporary-body-item:not([data-id]){
      margin-top: calc(var(--main-adjuster) * (8/400));
   }

   .temporary-body-item:hover{
      background: rgba(0, 0, 0, 0.5);
   }

   .temporary-body-item b{
      color: var(--ceu);
   }

   .temporary-body-item span{
      margin-left: calc(var(--main-adjuster) * (4/400));
   }






   .temporary-item-cover{
      width: calc(var(--main-adjuster) * (25/400));
      height: calc(var(--main-adjuster) * (25/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .temporary-item-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .temporary-item-details{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: calc(100% - calc(var(--main-adjuster) * (35/400)));
   }

   .temporary-item-title{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (13/400));
      padding: 0;
      height: calc(var(--main-adjuster) * (14/400));
      margin-bottom: calc(var(--main-adjuster) * (2/400));
   }

   .temporary-item-type{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (8/400));
      margin-top: calc(var(--main-adjuster) * (2/400));
   }






   .search-temporary-footer{
      width: 100%;
      display: flex;
      height: calc(var(--main-adjuster) * (50/400));
      position: absolute;
      left: 0;
      bottom: 0;
      justify-content: space-between;
      background: linear-gradient(0deg, #101010, #101010, transparent);
   }

   .temporary-footer-item{
      height: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ceu);
   }

   .temporary-footer-item.cancel-temporary{
      color: darkred;
   }









   .query-body{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow-y: auto;
      padding-bottom: calc(var(--main-adjuster) * (144/400));
   }

   .query-display{
      width: 100%;
      height: 100vw;
      position: relative;
      overflow: hidden;
   }

   .query-display-cover{
      width: 100%;
      height: 100%;
      animation: 100s infinite scaleIn linear;
   }

   .query-display-image{
      width: 100%;
      height: 100%;
   }

   .query-display-details{
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
   }

   .query-display-details::after{
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 0;
      height: calc(var(--main-adjuster) * (200/400));
      position: absolute;
      display: flex;
      pointer-events: none;
      background: linear-gradient(0deg, #171717, transparent);
   }

   .query-display-title{
      width: 100%;
      color: white;
      text-align: center;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (30/400));
/*      mix-blend-mode: difference;*/
      z-index: 1;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) #eb452b, 
         calc(calc(var(--main-adjuster) * (10/400))/5) calc(calc(var(--main-adjuster) * (10/400))/5) calc(var(--main-adjuster) * (0/400)) #efa032, 
         calc(calc(var(--main-adjuster) * (15/400))/5) calc(calc(var(--main-adjuster) * (15/400))/5) calc(var(--main-adjuster) * (0/400)) #46b59b, 
         calc(calc(var(--main-adjuster) * (20/400))/5) calc(calc(var(--main-adjuster) * (20/400))/5) calc(var(--main-adjuster) * (0/400)) #017e7f, 
         calc(calc(var(--main-adjuster) * (25/400))/5) calc(calc(var(--main-adjuster) * (25/400))/5) calc(var(--main-adjuster) * (0/400)) #052939, 
         calc(calc(var(--main-adjuster) * (30/400))/5) calc(calc(var(--main-adjuster) * (30/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b, 
         calc(calc(var(--main-adjuster) * (35/400))/5) calc(calc(var(--main-adjuster) * (35/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b;
      padding: calc(var(--main-adjuster) * (5/400));
   }



   .query-page .search-categories{
      margin-top: calc(var(--main-adjuster) * (20/400));
   }

   .query-page .main-page-body{
      flex-wrap: wrap;
      margin-top: 0;
   }

   .query-page .main-page-section{
      margin-top: calc(var(--main-adjuster) * (20/400));
   }







   
   .playlist-item{
      width: calc(var(--main-adjuster) * (120/400));
      margin-right: calc(var(--main-adjuster) * (24/400));
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (16/400)) 0;
   }

   .playlist-item:first-child{
      margin-left: calc(var(--main-adjuster) * (16/400));
   }
   
   .playlist-item-cover{
      width: calc(var(--main-adjuster) * (90/400));
      height: calc(var(--main-adjuster) * (90/400));
      border-radius: calc(var(--main-adjuster) * (80/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
   }

   .playlist-item-cover .library-option-icon{
      position: absolute;
      left: 0;
      top: 0;
      width: calc(var(--main-adjuster) * (14/400));
      height: calc(var(--main-adjuster) * (14/400));
/*      transform: scale(.4);*/
      color: white important;
      background: var(--item-color);
      border-radius: calc(var(--main-adjuster) * (16/400));
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (4/400)) var(--item-color), 0 0 0 calc(var(--main-adjuster) * (8/400)) #171717;
   }

   .playlist-item-cover .library-option-icon *{
      color: white important;
   }
   
   .playlist-item-image{
      border-radius: inherit;
      width: 100%;
      height: 100%;
   }
   
   .playlist-item-details{
      text-align: center;
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (12/400));
   }
   
   .playlist-item-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (14.5/400));
      font-weight: normal;
      text-align: center;
      -webkit-line-clamp: 2;
   }
   
   .playlist-item-name{
      font-family: 'URWRegular';
      font-size: calc(var(--main-adjuster) * (12/400));
      margin-top: calc(var(--main-adjuster) * (7/400));
   }







   .playlist-collection{
      width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
      display: flex;
      flex-wrap: wrap;
      margin: calc(var(--main-adjuster) * (8/400));
      align-content: start;
      --item-color: #483018;
   }

   .search-body .playlist-collection{
      margin: calc(var(--main-adjuster) * (8/400));
   }

   .search-body .playlist-collection:nth-child(odd) {
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .playlist-collection-container{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (8/400)) 0;
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: linear-gradient(-45deg, black, var(--item-color));
      overflow: hidden;
      box-shadow: inset 0 0 0 calc(var(--main-adjuster) * (200/400)) rgba(255, 255, 255, 0.25);
   }

   .playlist-collection-container *{
      color: black;
   }

   .playlist-collection-top{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (24/400)) calc(var(--main-adjuster) * (8/400));
      align-items: center;
      padding-top: calc(var(--main-adjuster) * (.5/400));
      justify-content: space-between;
   }

   .playlist-top-icon{
      font-family: Helvetica;
   }

   .playlist-top-text{
      font-family: ;
      font-size: calc(var(--main-adjuster) * (10/400));
      text-transform: uppercase;
      font-family: Helvetica;
      background: #171717;
      width: fit-content;
      color: white;
      border-radius: calc(var(--main-adjuster) * (15/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (8/400));
   }

   .playlist-collection-mid{
      display: flex;
      width: 100%;
      height: calc(var(--main-adjuster) * (80/400));
      position: relative;
      align-items: center;
      justify-content: space-between;
   }

   .playlist-collection-cover{
      border-radius: calc(var(--main-adjuster) * (64/400));
   }

   .playlist-collection-cover:nth-child(even){
      width: calc(var(--main-adjuster) * (90/400));
      height: calc(var(--main-adjuster) * (90/400));
      left: calc(50% - calc(var(--main-adjuster) * (45/400)));
      position: absolute;
      z-index: 1;
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (5/400)) rgba(255, 255, 255, 0.25), 0 0 0 calc(var(--main-adjuster) * (5/400)) var(--item-color);
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (5/400)) #171717;
   }

   .playlist-collection-cover:nth-child(odd){
      width: calc(var(--main-adjuster) * (60/400));
      height: calc(var(--main-adjuster) * (60/400));
      position: relative;
   }

   .playlist-collection-cover:first-child{
      left: calc(var(--main-adjuster) * (-5/400));
   }

   .playlist-collection-cover:last-child{
      right: calc(var(--main-adjuster) * (-5/400));
   }

   .playlist-collection-image{
      width: 100%;
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (64/400));
   }

   .playlist-collection-bottom{
      width: 100%;
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (8/400));
      margin-top: calc(var(--main-adjuster) * (16/400));
      padding-bottom: calc(var(--main-adjuster) * (4/400));
   }

   .playlist-bottom-text{
      font-size: calc(var(--main-adjuster) * (20/400));
      font-weight: bolder;
   }

   .playlist-collection-details{
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .playlist-collection-name{
      -webkit-line-clamp: 2;
      font-family: URWRegular;
   }







   .creative-playlist{
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--main-adjuster) * (16/400));
      margin-left: calc(var(--main-adjuster) * (15/400));
      width: calc((100vw/3) - calc(var(--main-adjuster) * (20/400)));
   }

   .creative-playlist:nth-child(3n+1){
      /*margin-left: calc(var(--main-adjuster) * (0/400));*/
   }

   .creative-playlist-cover{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      border-radius: calc(var(--main-adjuster) * (10/400));
      height: calc((100vw/3) - calc(var(--main-adjuster) * (20/400)));
   }

   .creative-playlist-image{
      width: calc(100%/2);
      height: calc(100%/2);
   }

   .creative-playlist-details{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--main-adjuster) * (10/400));
   }

   .creative-playlist-title{
      width: 100%;
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (4/400));
   }

   .creative-playlist-name{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (10/400));
      -webkit-line-clamp: 2;
   }







   .podcast-item{
      display: flex;    
      width: calc(var(--main-adjuster) * (260/400));
      min-width: calc(var(--main-adjuster) * (260/400));
      height: calc(var(--main-adjuster) * (280/400));
      flex-wrap: wrap;
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
      justify-content: space-between;
      align-content: space-between;
      margin-right: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (13/400));
   }

   .podcast-item-cover{
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      border-radius: inherit;
   }

   .podcast-item-cover::after{
      content: "";
      width: calc(100% - calc(var(--main-adjuster) * (6/400)));
      height: calc(100% - calc(var(--main-adjuster) * (6/400)));
      position: absolute;
      left: calc(var(--main-adjuster) * (3/400));
      top: calc(var(--main-adjuster) * (3/400));
      border-radius: calc(var(--main-adjuster) * (13/400));
      display: flex;
      background: linear-gradient(0deg, black, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.20));
   }

   .podcast-item-image{
      width: 100%;
      height: 100%;
      display: flex;
      border-radius: inherit;
   }

   .podcast-item-owner{
      display: flex;
      width: 100%;
      z-index: 1;
   }

   .podcast-owner-cover{
      border-radius: calc(var(--main-adjuster) * (5/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      overflow: hidden;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
   }

   .podcast-owner-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }


   .play-podcast{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (64/400));
      background: var(--thumb-color);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: calc(50% - calc(var(--main-adjuster) * (20/400)));
      background: var(--item-color);
      z-index: 1;
   }

   .play-podcast-icon{
      margin-left: calc(var(--main-adjuster) * (2/400));
      color: white;
   }


   .podcast-owner-details{
      display: flex;
      margin-left: calc(var(--main-adjuster) * (10/400));
      flex-wrap: wrap;
   }

   .podcast-owner-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (16/400));
      font-weight: 500;
      width: 100%;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      color: white;
   }

   .podcast-owner-name{
      font-size: calc(var(--main-adjuster) * (12/400));
      margin-top: calc(var(--main-adjuster) * (5/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      color: white;
   }

   .podcast-item-details{
      width: 100%;
      display: flow;
      flex-wrap: wrap;
      z-index: 1;
   }

   .podcast-item-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (16/400));
      -webkit-line-clamp: 1;
      font-weight: normal;
   }

   .podcast-item-stats{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (10/400));
      -webkit-line-clamp: 2;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .podcast-item-stat{
      display: flex;
      cursor: pointer;
      align-items: center;
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .podcast-item-stat-icon{
      margin-right: calc(var(--main-adjuster) * (8/400));
   }

   .podcast-item-stat-count{
      font-size: calc(var(--main-adjuster) * (13/400));
      font-family: 'URWRegular';
   }







   .display-content{
      width: 100%;
      height: calc(100vh - calc(var(--main-adjuster) * (140/400)));
      position: relative;
      display: flex;
      padding: 0;
      z-index: 0;
   }

   .diplay-content-item{
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      padding: calc(var(--main-adjuster) * (16/400));
   }

   .swiper-pagination-bullet.swiper-pagination-bullet-active{
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
   }

   .content-item-cover,
   .cover-item-reset{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: -1;
      background: url("../images/placeholder.png");
      background-size: 50% !important;
   }

   .content-item-cover{
      z-index: 1;
   }

   .content-item-cover::after,
   .cover-item-reset::after{
      content: "";
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      position: absolute;
      pointer-events: none;
      background: linear-gradient(0deg, #171717, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.0));
   }

/*   .content-item-cover:before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      background: rgba(0, 0, 0, .10);
      z-index: -1;
      backdrop-filter: blur(calc(var(--main-adjuster) * (108/400)));
   }
*/
   .content-item-image{
      width: calc(100vw - calc(var(--main-adjuster) * (60/400)));
      height: calc(100vw - calc(var(--main-adjuster) * (60/400)));
      margin-top: calc(var(--main-adjuster) * (-40/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .content-item-header{
      z-index: 2;
      width: 100%;
      display: flex;
      align-items: center;
   }

   .content-item-header .explicit-badge{
      font-size: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400)) calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (6/400));
   }

   .content-item-badge{
      font-family: 'URWRegular';
      font-size: calc(var(--main-adjuster) * (12/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (10/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      margin-right: calc(var(--main-adjuster) * (16/400));
      background: var(--item-color);
   }

   .content-item-details{
      z-index: 1;
      width: calc(100% - (calc(var(--main-adjuster) * (32/400)) + calc(var(--main-adjuster) * (40/400))));
   }

   .content-item-title{
      color: #fff;
      font-weight: normal;
   }

   .content-item-name{
      font-size: calc(var(--main-adjuster) * (14.5/400));
      margin-top: calc(var(--main-adjuster) * (6/400));
      display: block;
   }

   .content-item-button{
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
      bottom: calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: 0;
      background: var(--item-color);
      z-index: 1;
   }

   .album-button > .play-icon,
   .content-item-button > .play-icon{
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .play-podcast-icon *,
   .album-button > .play-icon *,
   .content-item-button > .play-icon *{
      color: white;
   }

   .play-icon,
   .play-podcast-icon{
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .display-thumbnails{
      position: absolute;
      bottom: calc(var(--main-adjuster) * (80/400)) !important;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      left: 0;
   }

   .display-thumbnail{
      width: calc(var(--main-adjuster) * (10/400));
      height: calc(var(--main-adjuster) * (10/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      margin: 0 calc(var(--main-adjuster) * (4/400));
      background: rgba(255, 255, 255, 0.1);
      transform: .5s;
   }

   .display-thumbnail.active{
      background: rgba(255, 255, 255, 0.5);
      transform: scale(1.2);
   }






   .station-item{
      width: calc(var(--main-adjuster) * (300/400));
      min-width: calc(var(--main-adjuster) * (300/400));
      display: flex;
      flex-wrap: wrap;
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
      overflow: hidden;
      margin-right: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (10/400));
      align-content: start;
   }

   .station-item-cover{
      position: absolute;
      display: flex;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: -1;
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: linear-gradient(-45deg, black, var(--item-color));
   }

   .station-item-cover::after{
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      background: rgba(0, 0, 0, 0.55);
   }

   .station-item-image{
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      display: none;
   }

   .station-item:first-child{
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .station-item-header{
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
      padding: calc(var(--main-adjuster) * (10/400));
      background: rgba(0, 0, 0, 0.25);
      border-radius: calc(var(--main-adjuster) * (10/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) #444;
   }

   .station-header-cover{
      height: calc(var(--main-adjuster) * (70/400));
      width: calc(var(--main-adjuster) * (70/400));
      border-radius: calc(var(--main-adjuster) * (6/400));
   }

   .station-header-image{
      height: 100%;
      width: 100%;
      border-radius: inherit;
   }

   .station-header-details{
      display: flex;
      flex-wrap: wrap;
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .station-header-title{
      color: #fff;
      margin-bottom: calc(var(--main-adjuster) * (6/400));
      font-size: calc(var(--main-adjuster) * (24/400));
   }

   .station-header-name{
      font-size: calc(var(--main-adjuster) * (16/400));
      width: 100%;
   }

   .station-header-stats{
      display: flex;
      margin-top: calc(var(--main-adjuster) * (8/400));
      align-items: center;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .station-header-button{
      position: absolute;
      z-index: 1;
      right: calc(var(--main-adjuster) * (10/400));
      bottom: calc(var(--main-adjuster) * (10/400));
      width: calc(var(--main-adjuster) * (30/400));
      height: calc(var(--main-adjuster) * (30/400));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (32/400));
      align-items: center;
      justify-content: center;
      background: var(--item-color);
   }

   .station-item-body{
      display: flex;
      width: 100%;
      flex-wrap: wrap;
/*       margin-top: calc(var(--main-adjuster) * (10/400));*/
      align-content: start;
   }

   .station-body-item{
      display: flex;
      align-items: center;
      width: calc(100% + calc(var(--main-adjuster) * (20/400)));
      min-width: calc(100% + calc(var(--main-adjuster) * (20/400)));
      margin-left: calc(var(--main-adjuster) * (-10/400));
      padding: calc(var(--main-adjuster) * (6.5/400)) calc(var(--main-adjuster) * (10/400));
   }

   .station-body-item:hover{
      background: rgba(255, 255, 255, 0.050);
   }

   .station-body-item:hover .station-body-title,
   .station-body-item:hover .station-body-name{
      transition: .5s;
/*      color: var(--item-color);*/
   }

   .station-body-item:first-child{
      margin-top: calc(var(--main-adjuster) * (14/400));
   }

   .station-body-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .station-body-image{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: inherit;
   }

   .station-body-details{
      margin-left: calc(var(--main-adjuster) * (10/400));
      position: relative;
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
   }

   .station-body-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (16/400));
      font-weight: normal;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
   }

   .station-body-name{
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .station-body-button{
      border-radius: calc(var(--main-adjuster) * (32/400));
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      align-items: center;
      justify-content: end;
      background: transparent;
      border: none;
      cursor: pointer;
      margin-right: 0;
   }

   .station-body-button .loader-3{
      margin-bottom: 0;
   }

   .station-body-button .loader-3 > div {
      width: calc(var(--main-adjuster) * (1/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (2/400));
      margin: 0 calc(var(--main-adjuster) * (3/400));
   }



   .station-body-cover,
   .song-item-cover{
      overflow: hidden;
      position: relative;
   }

   .not-purchased .song-item-cover:after,
   .not-purchased .station-body-cover::after{
      content: "MZN";
      width: calc(100% - calc(var(--main-adjuster) * (2/400)));
      height: fit-content;
      position: absolute;
      transform: rotate(45deg);
      left: calc(var(--main-adjuster) * (14/400));
      top: calc(var(--main-adjuster) * (1/400));
      display: flex;
      background: #3b5998;
      z-index: inherit;
      font-size: calc(var(--main-adjuster) * (5/400));
      padding: calc(var(--main-adjuster) * (1/400));
      padding-top: calc(var(--main-adjuster) * (2/400));
      font-weight: bolder;
      text-transform: uppercase;
      text-align: center;
      justify-content: center;
      color: white;
   }

   .track .song-item-cover:after,
   .track .station-body-cover::after{
/*      content: "TRK";*/
      background: #2c4762;
   }

   .podcast .song-item-cover:after,
   .podcast .station-body-cover::after{
/*      content: "POD";*/
      background: #075e54;
   }







   .album-slider{
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .album-item{
      width: calc(var(--main-adjuster) * (150/400));
      height: calc(var(--main-adjuster) * (210/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      display: flex;
      position: relative;
      justify-content: center;
      align-content: space-between;
      overflow: hidden;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (10/400));
      margin: 0 calc(var(--main-adjuster) * (16/400));
      margin-right: 0;
   }

   .album-item.swiper-slide-active{
      z-index: 3 !important;
   }

   .album-item.swiper-slide-active ~ .album-item{
      z-index: 1 im !important;
   }

   .album-cover{
      position: absolute;
      display: flex;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      z-index: -1;
   }

   .album-cover::after{
      content: "";
      width: calc(100% - calc(var(--main-adjuster) * (4/400)));
      height: calc(100% - calc(var(--main-adjuster) * (4/400)));
      position: absolute;
      left: calc(var(--main-adjuster) * (2/400));
      top: calc(var(--main-adjuster) * (2/400));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (14/400));
      background: linear-gradient(0deg, black, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.0));
   }

   .album-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .album-header{
      width: 100%;
   }

   .album-badge{
      font-size: calc(var(--main-adjuster) * (10/400));
      text-transform: uppercase;
      background: black;
      text-align: center;
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400));
      border-radius: calc(var(--main-adjuster) * (4/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      background: var(--item-color);
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .album-button{
      border-radius: calc(var(--main-adjuster) * (32/400));
      width: calc(var(--main-adjuster) * (46/400));
      height: calc(var(--main-adjuster) * (46/400));
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: 0;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      background: var(--item-color);
   }

   .album-details{
      width: 100%;
      text-align: center;
   }

   .album-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .album-name{
      font-size: calc(var(--main-adjuster) * (11/400));
      display: block;
      margin-top: calc(var(--main-adjuster) * (5/400));
   }









   .reset-page{
      align-content: start;
      overflow: hidden;
      padding-bottom: 0;
   }

   .playlist-page{
/*      overflow-y: auto;*/
   }

   .playlist-page .common-page-header{
      background: var(--thumb-color);
      background: linear-gradient(0deg, transparent, var(--thumb-color)) !important;
      z-index: 1;
   }

   .inmyplaylist-header{
      background: #171717 !important;
      box-shadow: none !important;
   }

   .playlist-body{
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0;
      width: 100%;
      padding-top: calc(var(--main-adjuster) * (80/400));
      padding-bottom: calc(var(--main-adjuster) * (180/400));
      height: 100vh;
      bottom: 0;
      right: 0;
      position: sticky;
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      box-shadow: inset 0 0 0 calc(var(--main-adjuster) * (1000/400)) rgba(0, 0, 0, .5);
      background: linear-gradient(0deg, #000, var(--thumb-color));
   }

   .inmyplaylist-body{
      background: #171717 !important;
      box-shadow: none !important;
   }

   .playlist-body .station-body-item{
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
      margin: 0;
      min-width: 100%;
      cursor: pointer;
   }

   .playlist-body .station-body-item:hover{
      background: rgba(255, 255, 255, 0.020);
      transition: .5s;
   }


   .playlist-body .station-body-item:hover .station-body-title,
   .playlist-body .station-body-item:hover .station-body-name{
      transition: .5s;
   }

   .playlist-body .station-body-button{
      padding-right: 0;
   }





   .container {
     display: grid;
     grid-template-columns: repeat(3, calc((100vw/3) - calc(var(--main-adjuster) * (4/400))));
     grid-auto-rows: minmax(calc((100vw/3) - calc(var(--main-adjuster) * (4/400))), auto);
     gap: calc(var(--main-adjuster) * (5/400));
     margin-top: calc(var(--main-adjuster) * (48/400));
     width: 100vw;
     max-width: 100vw;
   }

   .small-box {
     position: relative;
     overflow: hidden;
   }

   .large-box {
     grid-row: span 2;
   }

   .right-side {
     grid-column: 3 /4;
   }

   .left-side {
     grid-column: 1 / 2;
   }

   .small-box:nth-last-child(8){
/*      grid-row: 23 / span 1 !important;*/
   }

   .small-box:nth-last-child(4){
/*       grid-row: 24 / span 1 !important;*/
/*       grid-column: auto !important;*/
   }

   .small-box::after{
      content: attr(data-search);
      display: flex;
      position: absolute;
      word-break: normal;
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (4/400));
      right: 0;
      bottom: 0;
      color: #d52e3f;
      color: white;
      z-index: 1;
      max-width: 100%;
      width: fit-content;
      font-size: calc(var(--main-adjuster) * (14.5/400));
      font-weight: bolder;
/*      mix-blend-mode: darken;*/

      writing-mode: vertical-rl;
      text-orientation: mixed;
      font-family: "Monoton", sans-serif;
      transform: rotate(180deg);
      text-transform: uppercase;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) #eb452b, 
         calc(calc(var(--main-adjuster) * (10/400))/5) calc(calc(var(--main-adjuster) * (10/400))/5) calc(var(--main-adjuster) * (0/400)) #efa032, 
         calc(calc(var(--main-adjuster) * (15/400))/5) calc(calc(var(--main-adjuster) * (15/400))/5) calc(var(--main-adjuster) * (0/400)) #46b59b, 
         calc(calc(var(--main-adjuster) * (20/400))/5) calc(calc(var(--main-adjuster) * (20/400))/5) calc(var(--main-adjuster) * (0/400)) #017e7f, 
         calc(calc(var(--main-adjuster) * (25/400))/5) calc(calc(var(--main-adjuster) * (25/400))/5) calc(var(--main-adjuster) * (0/400)) #052939, 
         calc(calc(var(--main-adjuster) * (30/400))/5) calc(calc(var(--main-adjuster) * (30/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b, 
         calc(calc(var(--main-adjuster) * (35/400))/5) calc(calc(var(--main-adjuster) * (35/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b;
      line-height: normal;
   }


   .straighten.small-box::after{
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (4/400));
      right: unset;
      left: 0;
      bottom: 0;
      transform: rotate(0deg);
      writing-mode: unset;
      text-orientation: unset;
   }

   .library-page .common-page-header{
/*      z-index: 1;*/
/*      background: linear-gradient(180deg, #171717, #171717, #171717, #171717, transparent);*/
   }

   .library-page .playlist-item:first-child,
   .mulists-page .playlist-item:first-child{
      margin-left: calc(var(--main-adjuster) * (24/400));
   }

   .mylists-body-item.playlist-item{
      padding: calc(var(--main-adjuster) * (16/400)) 0;
   }

   .library-page .playlist-item,
   .mylists-page .playlist-item{
      width: calc(var(--main-adjuster) * (90/400));
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .library-page .playlist-item-cover,
   .mylists-page .playlist-item-cover{
      width: calc(var(--main-adjuster) * (60/400));
      height: calc(var(--main-adjuster) * (60/400));
      background: #171717;
      padding: calc(var(--main-adjuster) * (4/400));
   }

   .library-page .playlist-item-title,
   .mylists-page .playlist-item-title{
      font-size: calc(var(--main-adjuster) * (14/400));
      word-break: keep-all;
   }

   .library-body{
      overflow-y: auto;
      padding: 0;
      width: 100%;
      padding-bottom: calc(var(--main-adjuster) * (180/400));
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      padding-top: calc(var(--main-adjuster) * (64/400));
   }

   .library-body-options{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .library-option-item{
      display: flex;
      width: 100%;
      align-items: center;
      padding: 13.5;
      cursor: pointer;
   }

   .library-option-item *{
      color: #fff;
   }

   .library-option-item:hover{
      transition: .5s;
      background: rgba(0, 0, 0, 0.20);
   }

   .library-option-item:hover *{
/*      color: var(--thumb-color);*/
   }

   .library-option-icon{
      margin-right: calc(var(--main-adjuster) * (16/400));
      display: flex;
      width: calc(var(--main-adjuster) * (40/400));
      align-items: center;
      justify-content: center;
   }

   .library-option-title{
      font-weight: normal;

   }

   .library-option-item:hover *{
      transition: .5s;
/*      color: var(--thumb-color);*/
   }




   footer:after,
   .creator-controller:after{
/*      content: "";*/
      position: absolute;
      left: 0;
      bottom: calc(var(--main-adjuster) * (24/400));
      width: 100%;
      height: calc(var(--main-adjuster) * (30/400));
      background: transparent;
      border: calc(var(--main-adjuster) * (1/400)) solid white;
      pointer-events: none;
   }




   .library-terms{
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black, inset 0 0 0 calc(var(--main-adjuster) * (200/400)) rgba(0, 0, 0, 0.2);
   }

   .library-terms .profile-stats-header{
      margin-bottom: 0;
   }

   .library-terms.active .profile-stats-header{
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .terms-item{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (12/400)) 0;
   }

   .terms-item:last-child{
      padding-bottom: calc(var(--main-adjuster) * (4/400));
   }

   .terms-item-icon{
      margin-right: calc(var(--main-adjuster) * (12/400));
      stroke: white !important;
      color: white !important;
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
      display: flex;
      justify-content: center;
      width: calc(var(--main-adjuster) * (22/400));
   } 

   .terms-item-icon *{
      stroke: white !important;
      color: white !important;
   }

   .terms-item-title{
      color: #fff;
      white-space: pre;
      font-size: calc(var(--main-adjuster) * (20/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .profile-overview-stats.library-app{
      background: linear-gradient(45deg, var(--ver), var(--rosa), var(--roxo));
   }



   .download-app-button *{
      color: white;
   }

   .download-app-icon{
      margin-right: calc(var(--main-adjuster) * (8/400));
   }

   .download-app-button{
      position: absolute;
      right: 0;
      top: calc(var(--main-adjuster) * (1/400));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (12/400));
      border-radius: calc(var(--main-adjuster) * (8/400));
      background: black;
      border: none;
      padding-right: calc(var(--main-adjuster) * (16/400));
   }

   .download-app-button span{
      font-size: calc(var(--main-adjuster) * (24/400));
      margin-bottom: calc(var(--main-adjuster) * (-5/400));
   }

   [draggable] {
     -moz-user-select: none;
     -khtml-user-select: none;
     -webkit-user-select: none;
     user-select: none;
     /* Required to make elements draggable in old WebKit */
     -khtml-user-drag: element;
     -webkit-user-drag: element;
     cursor: move;
/*     transition: 1s;*/
   }

  /* .column {
     width: calc(var(--main-adjuster) * (162/400));
     padding-bottom: calc(var(--main-adjuster) * (5/400));
     padding-top: calc(var(--main-adjuster) * (5/400));
     text-align: center;
   }*/

   [draggable] header {
     height: calc(var(--main-adjuster) * (20/400));
     width: calc(var(--main-adjuster) * (150/400));
     color: black;
     background-color: #ccc;
     padding: calc(var(--main-adjuster) * (5/400));
     border-bottom: calc(var(--main-adjuster) * (1/400)) solid #ddd;
     border-radius: calc(var(--main-adjuster) * (10/400));
     border: calc(var(--main-adjuster) * (2/400)) solid #666666;
   }

   [draggable].over {
      box-shadow: 0 calc(var(--main-adjuster) * (-2/400)) 0 0 white, inset 0 calc(var(--main-adjuster) * (2/400)) 0 0 black;
   }


   #content {
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: minmax(calc((100vw - calc(var(--main-adjuster) * (30/400)))/6), auto);
      grid-gap: calc(var(--main-adjuster) * (2/400));
      width: calc(100vw - calc(var(--main-adjuster) * (20/400)));
      display: grid;
      max-width: 100vw;
      margin: calc(var(--main-adjuster) * (16/400)) auto;
   }

   #content > div {
/*      background: #333;*/
      padding: 0;
      color:#fff;
      position: relative;
      width: 100%;
   }

   .one {
     grid-column: 1 / 3;
     grid-row: 1/5;
     border-top-left-radius: calc(var(--main-adjuster) * (10/400)) !important;
   }

   .two {
     grid-column: 3/7;
     grid-row: 1/3;
     border-top-right-radius: calc(var(--main-adjuster) * (10/400)) !important;
   }

   .three {
     grid-column: 3/5;
     grid-row: 3/5;
   }

   .four {
     grid-column: 5/7;
     grid-row: 3/7;
     border-bottom-right-radius: calc(var(--main-adjuster) * (10/400)) !important;
   }

   .five {
     grid-column: 1/5;
     grid-row: 5/7;
     border-bottom-left-radius: calc(var(--main-adjuster) * (10/400)) !important;
   }





   .nominees-board{
      border-radius: calc(var(--main-adjuster) * (16/400));
/*      background: white*/
   }

   .nominees-board-item{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      background: black;
      align-content: center;
      background-color: #171717;
      opacity: 1;
      background-size: calc(var(--main-adjuster) * (7/400)) calc(var(--main-adjuster) * (7/400));
      background-image: repeating-linear-gradient(45deg, #333 0, #333 calc(var(--main-adjuster) * (0.7000000000000001/400)), #171717 0, #171717 50%);
   }

   .nominees-board-item.one{

   }

   .nominees-board-item.two{
     
   }

   .nominees-board-item.three{
     
   }

   .nominees-board-item.four{
     
   }

   .nominees-board-item.five{
      
   }

   .nominees-board-item *{
      color: white;
   }

   .nominees-item-container,
   .nominees-item-container.swiper-wrapper{
      padding: 0;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
   }

   .nominees-item-cover{
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 0;
   }

   .nominees-item-image{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
   }

   .nominees-item-title{
      position: relative;
      font-size: calc(var(--main-adjuster) * (20/400));
      background: black;
      width: fit-content;
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (8/400));
      position: absolute;
      text-transform: uppercase;
      word-break: normal;
      font-family: "Monoton";
      background: transparent !important;
/*      mix-blend-mode: difference;*/
      color: white;
      /*text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) #eb452b, 
         calc(calc(var(--main-adjuster) * (10/400))/5) calc(calc(var(--main-adjuster) * (10/400))/5) calc(var(--main-adjuster) * (0/400)) #efa032, 
         calc(calc(var(--main-adjuster) * (15/400))/5) calc(calc(var(--main-adjuster) * (15/400))/5) calc(var(--main-adjuster) * (0/400)) #46b59b, 
         calc(calc(var(--main-adjuster) * (20/400))/5) calc(calc(var(--main-adjuster) * (20/400))/5) calc(var(--main-adjuster) * (0/400)) #017e7f, 
         calc(calc(var(--main-adjuster) * (25/400))/5) calc(calc(var(--main-adjuster) * (25/400))/5) calc(var(--main-adjuster) * (0/400)) #052939, 
         calc(calc(var(--main-adjuster) * (30/400))/5) calc(calc(var(--main-adjuster) * (30/400))/5) calc(var(--main-adjuster) * (0/400)) #c11a2b;*/
   }

   .nominees-item-description{
      font-size: calc(var(--main-adjuster) * (13/400));
      position: relative;
      text-shadow: calc(var(--main-adjuster) * (.5/400)) calc(var(--main-adjuster) * (.5/400)) black;
      color: white;
      position: absolute;
      font-size: calc(var(--main-adjuster) * (11/400));
      display: none;
   }


   .nominees-item-title.level-text{
      font-size: calc(var(--main-adjuster) * (16/400));
   }


   .nominees-board-item:nth-child(1) .nominees-item-title{
      top: calc(var(--main-adjuster) * (6/400));
      left: calc(var(--main-adjuster) * (-2/400));
      writing-mode: vertical-rl;
      text-orientation: mixed;
      border-bottom-right-radius: calc(var(--main-adjuster) * (10/400));
      background: var(--ver);
   }

   .nominees-board-item:nth-child(2) .nominees-item-title{
      top: calc(var(--main-adjuster) * (2/400));
      left: 0;
      border-bottom-left-radius: calc(var(--main-adjuster) * (10/400));
      background: var(--rosa);
   }

   .nominees-board-item:nth-child(3) .nominees-item-title{
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: calc(var(--main-adjuster) * (10/400));
      background: var(--roxo);
      width: auto;
      font-size: calc(var(--main-adjuster) * (14/400));
      text-align: center;
      display: flex;
   }

   .nominees-board-item:nth-child(4) .nominees-item-title{
      writing-mode: vertical-rl;
      text-orientation: mixed;
      right: calc(var(--main-adjuster) * (0/400));
      bottom: calc(var(--main-adjuster) * (8/400));
      transform: rotate(180deg);
      border-bottom-right-radius: calc(var(--main-adjuster) * (10/400));
      background: var(--vio);
   }

   .nominees-board-item:nth-child(5) .nominees-item-title{
      bottom: calc(var(--main-adjuster) * (2/400));
      left: calc(var(--main-adjuster) * (2/400));
      border-top-right-radius: calc(var(--main-adjuster) * (10/400));
      background: var(--ceu);
   }



   .nominees-board-item:nth-child(1) .nominees-item-description{
      bottom: calc(var(--main-adjuster) * (6.5/400));
      left: calc(var(--main-adjuster) * (8/400));
   }

   .nominees-board-item:nth-child(2) .nominees-item-description{
      bottom: calc(var(--main-adjuster) * (6.5/400));
      left: calc(var(--main-adjuster) * (8/400));
   }

   .nominees-board-item:nth-child(3) .nominees-item-description{
/*      right: 0;*/
      display: none;
   }

   .nominees-board-item:nth-child(4) .nominees-item-description{
      left: calc(var(--main-adjuster) * (8/400));
      top: calc(var(--main-adjuster) * (8/400));
   }

   .nominees-board-item:nth-child(5) .nominees-item-description{
      bottom: calc(var(--main-adjuster) * (8/400));
      right: calc(var(--main-adjuster) * (8/400));
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
   }






   .profile-dashboard{
      width: calc(100% - calc(var(--main-adjuster) * (32/400)));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      flex-wrap: wrap;
      margin: 0 calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (10/400));
      justify-content: space-between;
      cursor: pointer;
      position: relative;
      background: linear-gradient(135deg, var(--item-color), #171717) !important;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black, inset 0 0 0 calc(var(--main-adjuster) * (200/400)) rgba(0, 0, 0, 0.2);
   }

   .artist-page .profile-dashboard{
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      margin: calc(var(--main-adjuster) * (8/400));
   }

   .profile-dashboard .stats-shrink-button{
      top: calc(var(--main-adjuster) * (32/400));
      right: calc(var(--main-adjuster) * (8/400));
   }

   .profile-dashboard.active .stats-shrink-button{
      transform: rotate(180deg);
   }

   .profile-dashboard .profile-stats-body{
      margin-top: calc(var(--main-adjuster) * (16/400));
      padding-top: calc(var(--main-adjuster) * (24/400));
      border-top: calc(var(--main-adjuster) * (1/400)) solid rgba(0, 0, 0, 0.092);
      display: none;
   }

   .profile-dashboard.active .profile-stats-body{
      display: flex;
   }

   .profile-stats-body{
      width: 100%;
   }

   .file-container{
      width: 100%;
      height: 100%;
      border-radius: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: calc(var(--main-adjuster) * (8/400));
      border: calc(var(--main-adjuster) * (1/400)) dashed #555;
      height: calc(100vw - calc(var(--main-adjuster) * (64/400)));
   }

   .file-icon{

   }

   .file-container.audio-wave{
      height: calc(var(--main-adjuster) * (100/400));
      border: none;
      overflow: hidden;
      position: relative;
      background: url(../lightgalleryjs/img/loading.gif);
      background-size: 30p 30p;
      background-repeat: no-repeat;
      background-position: center;
   }

   .audio-wave-container{
      width: 100%;
      min-width: 100%;
      height: calc(var(--main-adjuster) * (100/400));
      max-width: 100%;
      max-height: calc(var(--main-adjuster) * (100/400));
   }

   .profile-stats-footer{
      display: none;
      align-items: center;
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .profile-overview-stats.active .profile-stats-footer{
      display: flex;
   }

   .stats-footer-button{
      display: flex;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      background: black;
      align-items: center;
      border-radius: calc(var(--main-adjuster) * (32/400));
      justify-content: center;
      margin: 0;
      margin-right: calc(var(--main-adjuster) * (12/400));
   }

   .stats-footer-input{
      width: calc(100% - (calc(var(--main-adjuster) * (80/400)) + calc(var(--main-adjuster) * (24/400)))) !important;
      height: calc(var(--main-adjuster) * (40/400));
      background: rgba(0, 0, 0, .5);
      border-radius: calc(var(--main-adjuster) * (32/400));
      padding: 0 calc(var(--main-adjuster) * (16/400));
   }

   .stats-footer-range{
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (2/400));
      margin-top: calc(var(--main-adjuster) * (12/400));
   }

   .stats-footer-range:after{
      content: attr(start);
      position: absolute;
      left: calc(var(--main-adjuster) * (4/400));
      bottom: calc(var(--main-adjuster) * (12/400));
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Helvetica;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .stats-footer-range:before{
      content: attr(end);
      position: absolute;
      right: calc(var(--main-adjuster) * (4/400));
      bottom: calc(var(--main-adjuster) * (12/400));
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Helvetica;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .audio-wave-highlight{
      position: absolute;
      left: 0;
      top: 0 !important;
      height: 100%;
      background: transparent;
      filter: hue-rotate(45deg);
      border-right: calc(var(--main-adjuster) * (1/400)) solid red;
      border-left: calc(var(--main-adjuster) * (1/400)) solid var(--ceu);
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (1000/400)) rgba(0, 0, 0, 0.5);
   }

   span.mime-badge{
      margin-right: calc(var(--main-adjuster) * (5/400));
      font-family: "Helvetica";
      padding: calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (5/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
   }

   .profile-dashboard-cover{
      height: calc(var(--main-adjuster) * (70/400));
      width: calc(var(--main-adjuster) * (70/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      border: calc(var(--main-adjuster) * (1/400)) solid #171717;
      position: relative;
   }

   .profile-dashboard-button{
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-4/400));
      left: calc(var(--main-adjuster) * (-4/400));
      background: transparent;
      display: none;
   }

   .profile-dashboard-button svg{
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .profile-dashboard-image{
      height: 100%;
      width: 100%;
      border-radius: inherit;
   }

   .profile-dashboard-details{
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
   }

   .profile-dashboard-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (24/400));
      width: 100%;
   }

   .profile-dashboard-name{
      font-size: calc(var(--main-adjuster) * (13/400));
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (6/400));
   }

   .profile-dashboard-status{
      font-size: calc(var(--main-adjuster) * (8/400));
      padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (4/400));
      padding-top: calc(var(--main-adjuster) * (3/400));
      border-radius: calc(var(--main-adjuster) * (3/400));
      background: red;
      text-transform: uppercase;
      display: inline-block;
      text-align: center;
      margin-top: calc(var(--main-adjuster) * (6/400));
      font-weight: 600;
      color: white;
   }

   .profile-dashboard-status.active{
      background: var(--ceu);
   }










   .profile-body{
      overflow-y: auto;
      margin-top: calc(var(--main-adjuster) * (-10/400));
      width: 100%;
      padding-bottom: calc(var(--main-adjuster) * (120/400));
      height: calc(100% - calc(var(--main-adjuster) * (110/400)));
      display: flex;
      flex-wrap: wrap;
      padding-top: 0 !important;
   }

   .profile-body .search-categories{
      margin: calc(var(--main-adjuster) * (16/400)) 0;
   }

   .profile-body .modal-cover{
      height: calc(var(--main-adjuster) * (300/400));
      margin: 0;
      margin-bottom: calc(var(--main-adjuster) * (24/400));
      border-radius: 0;
      position: relative;
   }

   .profile-body .modal-cover::after{
      content: "";
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 0;
      height: calc(var(--main-adjuster) * (200/400));
      position: absolute;
      display: flex;
      pointer-events: none;
      background: linear-gradient(0deg, #171717, transparent);
   }

   .profile-overview{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: calc(var(--main-adjuster) * (8/400));
   }

   .profile-body .profile-overview{
      padding: 0;
   }

   .profile-chart{
      width: 100%;
      height: calc(var(--main-adjuster) * (400/400));
      display: flex;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      position: relative;
   }

   .profile-chart img{
      width: calc(var(--main-adjuster) * (30/400));
      height: calc(var(--main-adjuster) * (30/400));
      margin-top: 50%;
      margin-left: calc(50% - calc(var(--main-adjuster) * (15/400)));
   }

   .profile-chart::after{
/*      content: "";*/
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(0deg, #000, #000, transparent);
      z-index: 0;
   }


   .profile-chart-stats{
      width: calc(var(--main-adjuster) * (120/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (10/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: calc(var(--main-adjuster) * (16/400));
      top: 0;
      box-shadow: 0 0 calc(var(--main-adjuster) * (4/400)) black;
      flex-wrap: wrap;
   }

   .profile-chart-title{
      color: #fff;
      width: 100%;
      text-align: left;
      font-size: calc(var(--main-adjuster) * (10/400));
      text-transform: uppercase;
      margin-bottom: calc(var(--main-adjuster) * (10/400));
   }

   .profile-chart-amount{
      width: 100%;
      text-align: center;
      font-weight: normal;
      font-family: 'URWRegular';
   }

   .profile-chart-amount sup{
      font-size: calc(var(--main-adjuster) * (10/400));
   }

   .profile-chart-date{
      width: 100%;
      text-align: right;
      font-size: calc(var(--main-adjuster) * (10/400));
      font-family: 'URWRegular';
      margin-top: calc(var(--main-adjuster) * (10/400));
   }



   
   .affiliate-chart table tr:first-child td:nth-child(3){
      position: absolute;
      right: 0;
      opacity: 0;
   }

   .affiliate-chart table tr:first-child td:nth-child(2){
      position: absolute !important;
      width: 100% !important;
   }

   .affiliate-chart table tr:first-child td:nth-child(2) canvas{
      width: 100% !important;
   }

   .affiliate-chart table:hover tr:first-child td:nth-child(3){
      opacity: 1;
   }


   table td:first-child,
   table td:first-child *{
      word-break: initial;
      white-space: wrap !important;
      word-wrap: initial;
      word-break: initial;
      -webkit-hyphens: initial;
        -moz-hyphens: initial;
        -ms-hyphens: initial;
        hyphens: initial;
   }



   .profile-overview-item{
      width: calc((100%/3) - calc(var(--main-adjuster) * (8/400)));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      margin: calc(var(--main-adjuster) * (4/400));
      text-align: center;
      padding: calc(var(--main-adjuster) * (8/400));
      height: calc(var(--main-adjuster) * (100/400));
      display: flex;
      align-items: center;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap;
   }

   .profile-item-title{
      color: #fff;
      font-family: 'URWRegular';
      font-size: calc(var(--main-adjuster) * (24/400));
      font-weight: normal;
      margin-bottom: calc(var(--main-adjuster) * (12/400));
      width: 100%;
      white-space: pre;
   }
   
   .profile-item-title > *{
      font-size: calc(var(--main-adjuster) * (10/400));
   }

   .profile-item-name{
      font-size: calc(var(--main-adjuster) * (10/400));
      width: 100%;
   }

   .main-page-header{

   }

   .main-page-header.medx-ui{
      background: black;
   }

   .main-page-title{
      color: #fff;
   }

   .profile-information{
      padding: calc(var(--main-adjuster) * (16/400));
      display: flex;
      flex-wrap: wrap;
      width: 100%;
   }

   .profile-information-item{
      display: flex;
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      justify-content: space-between;
   }

   .profile-information-details{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
      position: relative;
   }

   .profile-information-title{
      color: #fff;
      margin-top: calc(var(--main-adjuster) * (7/400));
      width: 100%;
      font-weight: normal;
      font-size: calc(var(--main-adjuster) * (21.6/400)) !important;
      appearance: none;
      -moz-appearance: none;
      position: relative;
   }

   .profile-information-title span,
   .profile-information-title span *{
      font-family: URWRegular;
      color: White;
   }

   .profile-information-title input{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: transparent;
      color: transparent;
   }

   .modal-field input[type="date"]:invalid,
   .profile-information-details input[type="date"]:invalid{
      color: transparent;
   }

   .modal-field input[type="date"], 
   .modal-field input[type="date"]:focus, 
   .profile-information-details input[type="date"],
   .profile-information-details input[type="date"]:focus{
      color: white;
   }

   input:invalid ~ .date-placeholder,
   .date-placeholder{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      padding-bottom: calc(var(--main-adjuster) * (12/400));
      pointer-events: none;
   }

/*   input:invalid*/

   input:valid ~ .date-placeholder,
   input:focus ~ .date-placeholder{
      display: none;
   }

   .profile-information-title input:focus ~ span,
   .profile-information-title input:focus ~ span *{
      color: transparent;
   }

   .profile-information-title input:focus{
      color: white;
   }

   .profile-information-title:not(h2){
      height: calc(var(--main-adjuster) * (40/400));
      border: none;
      outline: none;
      padding: 0;
      background: transparent;
      box-shadow: none;
   }

   h2.profile-information-title{
      color: #fff;
      margin-top: calc(var(--main-adjuster) * (14.5/400));
      word-wrap: break-word;
      word-break: break-word;
      -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
   }

   .profile-information-title:not(h2) option{
      background: #171717;
      border: none;
      outline: none;
   }

   .profile-information-name{
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (10/400));
      width: 100%;
      color: grey;
   }





   .search-header{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400)) 0;
      justify-content: center;
      position: relative;
      z-index: 2;
      background: linear-gradient(180deg, #171717, transparent);
   }

   .search-field{
      width: calc(100% - calc(var(--main-adjuster) * (32/400)));
      display: flex;
      position: relative;
      align-items: center;
      height: calc(var(--main-adjuster) * (50/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      overflow: hidden;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .search-field-button{
      border-radius: calc(var(--main-adjuster) * (32/400));
      width: calc(var(--main-adjuster) * (36/400));
      height: calc(var(--main-adjuster) * (44/400));
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      position: absolute;
      top: calc(var(--main-adjuster) * (2/400));
      z-index: 1;
   }

   .search-field-button *{
      color: white;
   }

   .search-field-button:first-child{
      left: calc(var(--main-adjuster) * (2/400));
   }

   .search-field-button:last-child{
      right: calc(var(--main-adjuster) * (2/400));
   }

   input:not([type="checkbox"], [type="radio"], [type="checkbox"], [type="range"]){
      width: 100%;
      display: flex;
      min-height: calc(var(--main-adjuster) * (40/400));
      -webkit-appearance: none;
      -moz-appearance: none;
      border: none;
      font-size: calc(var(--main-adjuster) * (16/400));
      outline: none !important;
      padding-top: calc(var(--main-adjuster) * (10/400)) !important;
   }

   input:not([type*="range"]):focus{
      
   }

   input[type="number"]{
      -moz-appearance: textfield;
      font-family: 'URWRegular';
   }

   input[type="date"]{
      font-family: 'URWRegular';
   }

   input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
      -webkit-appearance: none;
      display: none;
      opacity: 0;
   }

   ::-webkit-textfield-decoration-container{
      /*display: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      opacity: 0;*/
   }

   input::-webkit-clear-button{
      opacity: 0;
      display: none;
      -webkit-appearance: none;
   }

   input::-webkit-clear-button:hover{
      opacity: 0;
      display: none;
   }

   input::-webkit-list-button{
      display: none;
      opacity: 0;
   }

   input[list]::-webkit-calendar-picker-indicator{
      display: none;
      opacity: 0;
   }

   input[type*="date"]{
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
   }

   input:-internal-autofill-selected{
      background: transparent !important;
   }

   input[type*="date"]::-webkit-calendar-picker-indicator{
      display: block;
      right: 0;
      position: absolute;
   }

   input::-moz-focus-inner, ::-moz-focus-outer{
      border: none;
      padding: 0;
      opacity: 0;
   }

   textarea::-moz-focus-inner{
      border: none;
      padding: 0;
      display: none;
      opacity: 0;
   }

   select::-moz-focus-inner{
      border: none;
      padding: 0;
      display: none;
      opacity: 0;
   }



   .search-field-input{
      padding: calc(var(--main-adjuster) * (5/400));
      padding-left: calc(var(--main-adjuster) * (40/400));
      height: 100%;
      border-radius: inherit;
      background: #222;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   ::-ms-input-placeholder{
      font-style: italic;
      color: #ccc;
      padding-top: calc(var(--main-adjuster) * (3/400));
   }
   ::-moz-placeholder{
      font-style: italic;
      color: #ccc;
      padding-top: calc(var(--main-adjuster) * (3/400));
   }
   ::placeholder{
      font-style: italic;
      color: #ccc;
      padding-top: calc(var(--main-adjuster) * (3/400));
   }

   input.modal-field-input:not([class*="stand-alone"])::-ms-input-placeholder{
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   input.modal-field-input:not([class*="stand-alone"])::-moz-placeholder{
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   input.modal-field-input:not([class*="stand-alone"])::placeholder{
      font-size: calc(var(--main-adjuster) * (16/400));
   }




   .search-categories{
      display: flex;
      align-items: center;
      width: 100%;
      overflow-x: auto;
      margin-top: 0;
      overflow-x: auto;
      z-index: 2;
   }

   .search-categories ~ div{
/*      padding-top: calc(var(--main-adjuster) * (128/400));*/
   }

   .donations-categories,
   .payments-categories,
   .public-categories{
      margin-top: 0;
/*      margin-bottom: calc(var(--main-adjuster) * (16/400));*/
   }

   .search-category-item{
      display: flex;
      align-items: center;
      margin-right: calc(var(--main-adjuster) * (12/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: #222;
      padding: calc(var(--main-adjuster) * (7/400)) calc(var(--main-adjuster) * (12/400));
      text-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      white-space: pre;
      color: white;
      margin: 0 calc(var(--main-adjuster) * (6/400));
      padding-top: calc(var(--main-adjuster) * (10/400));
   }

   .search-category-item *{
      color: white !important;
   }

   .search-category-item *[stroke="currentColor"]{
      stroke: white !important;
   }

   .search-category-item *[fill="currentColor"]{
      fill: white !important;
   }

   .search-category-item.active{
      transition: .5s;
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
   }

   .search-category-item:first-child{
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .search-category-icon{
      display: flex;
      margin-right: calc(var(--main-adjuster) * (6/400));
   }

   .search-category-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (13/400));
      text-transform: uppercase;
      font-weight: normal;
   }




   .search-body,
   .profile-body,
   .library-body,
   .public-page-body,
   .artist-body-page,
   .transactions-page-body{
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400)) 0;
      overflow-y: auto;
      width: 100%;
      padding-bottom: calc(var(--main-adjuster) * (180/400));
      height: 100% !important;
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      position: absolute;
      left: 0;
      top: 0;
      padding-top: calc(var(--main-adjuster) * (70/400));
   }

   .search-body {
      padding-top: calc(var(--main-adjuster) * (128/400));
   }

   .search-page .search-body{
      padding-top: calc(var(--main-adjuster) * (75/400));
   }

   .search-page .search-body .container{
      margin-top: 0;
   }

   .search-body.padding-allowance{
      padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (8/400));
      padding-top: calc(var(--main-adjuster) * (128/400));
      padding-bottom: calc(var(--main-adjuster) * (180/400));
   }

   .search-body .add-album-item{
      margin: calc(var(--main-adjuster) * (24/400)) calc(var(--main-adjuster) * (8/400));
      margin-bottom: calc(var(--main-adjuster) * (20/400));
      width: calc(50% - calc(var(--main-adjuster) * (16/400)));
      min-width: calc(50% - calc(var(--main-adjuster) * (16/400)));
   }

   .search-body .playlist-item,
   .preview-content .playlist-item,
   .specific-page-body .playlist-item,
   .search-body .playlist-item:first-child,
   .preview-content .playlist-item:first-child,
   .specific-page-body .playlist-item:first-child{
      margin: calc(var(--main-adjuster) * (8/400));
      width: calc((100%/3) - calc(var(--main-adjuster) * (16/400)));
      padding: calc(var(--main-adjuster) * (8/400)) 0;
   }

   /*.search-body .playlist-item-cover{
      width: calc(var(--main-adjuster) * (110/400));
      height: calc(var(--main-adjuster) * (110/400));
      margin-bottom: calc(var(--main-adjuster) * (8/400));
   }

   .search-body .playlist-item-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (24/400));
      -webkit-line-clamp: 1;
   }

   .search-body .playlist-item-name{
      font-size: calc(var(--main-adjuster) * (13/400));
   }*/


   .search-body .artist-item{
      margin-left: calc(var(--main-adjuster) * (16/400));
      margin-right: 0;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
      min-width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
   }

   .search-body .artist-item-cover{
      height: calc(50vw - calc(var(--main-adjuster) * (48/400)));
   }


   .search-body-item{
      display: flex;
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
      width: 100%;
   }

   .search-body-item:hover{
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      transition: .5s;
   }

   .search-body-item:hover *{
/*      color: var(--thumb-color);*/
      transition: .5s;
   }

   .search-item-icon{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      margin-right: calc(var(--main-adjuster) * (10/400));
      display: flex;
      align-items: center;
      justify-content: start;
   }

   .search-item-icon svg{
      width: 80%;
      height: 80%;
      color: #888;
   }

   .search-item-deatils{
      width: calc(100% - calc(var(--main-adjuster) * (50/400)));
      color: #888;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
   }

   .search-item-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (16/400));
      color: #ccc;
      width: 100%;
   }

   .search-item-name{
      font-size: calc(var(--main-adjuster) * (12/400));
      margin-top: 0;
      font-family: 'URWRegular';
   }









   .terms-body{
      scroll-behavior: smooth;
   }

   .terms-body-tab{
      width: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
   }

   .terms-body-tab a{
      text-decoration: none;
   }

   .terms-body-tab .loader-container{
      margin: 0 !important;
      height: 80vh !important;
   }









   .content-page{
      overflow-y: auto;
   }

   .content-header,
   .common-page-header{
      z-index: 1;
      background: transparent;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 3;
   }

   .content-header ~ .search-categories,
   .common-page-header ~ .search-categories{
      margin-top: calc(var(--main-adjuster) * (80/400));
   }

   .pages-manager-section .content-header,
   .pages-manager-section .common-page-header{
      z-index: 5;
      background: linear-gradient(180deg, #000, transparent);
      position: fixed;
   }

   .preview-page .content-header:before,
   .preview-page .common-page-header:before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (80/400));
      -webkit-mask: linear-gradient(180deg, #000, #000, transparent);
       mask: linear-gradient(180deg, #000, #000, transparent);
       -webkit-backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));
       backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));
       z-index: -1;
   }


   .content-display{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (-80/400));
      height: 70vh;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-end;
   }

   .content-display-cover{
      z-index: 0;
   }

   .content-display-cover::after{
      pointer-events: none;
      background: linear-gradient(0deg, #171717, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.0));
   }

   .content-display-image{
      width: 100%;
      height: 100%;
   }

   .content-display-details{
      position: relative;
      padding: calc(var(--main-adjuster) * (16/400));
      width: calc(100% - calc(var(--main-adjuster) * (110/400)));
   }

   .content-display-title{
      color: #fff;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      font-size: calc(var(--main-adjuster) * (24/400));
      margin-bottom: calc(var(--main-adjuster) * (5/400));
   }

   .content-display-title .badge-icon{
      width: calc(var(--main-adjuster) * (22/400));
      height: calc(var(--main-adjuster) * (22/400));
   }

   .content-display-name{
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .content-display-button{
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
      bottom: calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: 0;
      background: var(--ceu);
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) #222;
   }

   .content-display-button-icon,
   .content-display-button *{
      fill: white !important;
      color: white;
   }

   .content-display-button svg{
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .display-action.content-display-button{
      right: calc(var(--main-adjuster) * (70/400));
/*      background: var(--thumb-color);*/
   }

   .display-action.active .remove-user{
      display: none;
   }

   .display-action.artist{
      width: calc(var(--main-adjuster) * (80/400));
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      padding-top: calc(var(--main-adjuster) * (3/400));
      align-items: center;
      font-weight: bolder;
      /*background: transparent !important;*/
      /*border: 2px solid white;*/
      text-transform: uppercase;
   }

   .content-body{
      padding-bottom: calc(var(--main-adjuster) * (160/400));
      width: 100%;
   }

   .donations-body{
      width: 100%;
      display: none;
      overflow-x: auto;
      padding: 0 calc(var(--main-adjuster) * (12/400));
      margin-top: calc(var(--main-adjuster) * (24/400));
   }
   
   .donations-body.active{
      display: flex;
   }

   .content-body .search-category-title{
      color: #fff;
      font-family: 'URWRegular';
   }

   .content-about{
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (12/400));
      line-height: 1.5;
      margin-top: calc(var(--main-adjuster) * (16/400));
      text-align-last: left;
      word-wrap: break-word;
      word-break: break-word;
      -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
      font-size: calc(var(--main-adjuster) * (18.5/400));
      color: #ccc;
   }









   .rapid-content{
      display: none;
      width: 100%;
      height: calc(var(--main-adjuster) * (240/400));
      margin-top: calc(var(--main-adjuster) * (16/400));
      position: relative;
      box-shadow: 0 calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)) black;
   }

   .rapid-content.active{
      display: flex;
   }

   .rapid-content-container{
      position: absolute;
      left: -100%;
      top: 0;
      width: 100%;
      height: 100%;
      background: #171717;
      transition: .25s;
      display: flex;
      flex-wrap: wrap;
      align-content: start;
   }

   .rapid-content-container.active{
      left: 0;
      z-index: 1;
   }

   .donations-first{
      left: 0;
   }

   .donations-last{

   }

   .donations-last.active ~ .donations-middle{
      left: 100%;
   }


   .donations-middle{

   }

   .donations-middle.active ~ .donations-first{
      left: 100%;
   }


   .rapid-content-header{
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
   }

   .donations-dismiss-button{
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(var(--main-adjuster) * (50/400));
      width: calc(var(--main-adjuster) * (50/400));
      background: none;
      border: none;
   }

   .donations-header-title{
      width: calc(100% - calc(var(--main-adjuster) * (150/400)));
      font-size: calc(var(--main-adjuster) * (24/400));
      color: white;
      margin-bottom: calc(var(--main-adjuster) * (-4/400));
   }

   .rapid-content-body{
      width: 100%;
      height: calc(100% - calc(var(--main-adjuster) * (70/400)));
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      margin-top: calc(var(--main-adjuster) * (16/400));
      overflow-x: auto;
      position: relative;
   }

   .rapid-content-body::after{
      content: attr(title);
      display: flex;
      position: absolute;
      bottom: calc(var(--main-adjuster) * (4/400));
      left: calc(var(--main-adjuster) * (16/400));
      font-family: URWRegular;
   }

   .rapid-content-item{
      height: calc(var(--main-adjuster) * (100/400));
      width: calc(var(--main-adjuster) * (100/400));
      min-width: calc(var(--main-adjuster) * (80/400));
      margin-right: calc(var(--main-adjuster) * (32/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      position: relative;
      text-align: center;
   }

   .rapid-content-image{
      height: 100%;
      width: 100%;
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .rapid-content-price{
      font-size: calc(var(--main-adjuster) * (12/400));
      white-space: pre;
      font-family: URWRegular;
   }

   .rapid-content-price sup{
      font-size: calc(var(--main-adjuster) * (5/400));
   }

   .rapid-content-name{
      width: 100%;
      width: 100%;
      color: white;
      margin-top: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (13/400));
      margin-bottom: calc(var(--main-adjuster) * (2/400));
      font-weight: bolder;
/*      line-clamp: 2;*/
/*      word-break: unset;*/
/*      -webkit-line-clamp: 2;*/
      text-align: center;
   }




   .donations-body-left{
      width: calc(var(--main-adjuster) * (100/400));
      height: calc(var(--main-adjuster) * (130/400));
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .donations-body-cover{
      width: 100%;
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .donations-body-image{
      width: 100%;
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .donations-body-right{
      width: calc(100% - calc(var(--main-adjuster) * (120/400)));
      height: 100%;
      height: calc(var(--main-adjuster) * (130/400));
      display: flex;
      flex-wrap: wrap;
      align-content: start;
   }

   .donations-body-quantity{
      width: 100%;
      display: flex;
      margin-top: calc(var(--main-adjuster) * (12/400));
      align-items: center;
   }

   .donations-quantity-button,
   .donations-send-button{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (34/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      display: flex;
      color: white;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      padding-top: calc(var(--main-adjuster) * (3.5/400));
   }

   .donations-quantity-input{
      height: calc(var(--main-adjuster) * (40/400));
      width: calc(var(--main-adjuster) * (70/400));
      padding-top: calc(var(--main-adjuster) * (10/400));
      max-width: calc(var(--main-adjuster) * (70/400));
      text-align: center;
      font-size: calc(var(--main-adjuster) * (32/400)) !important;
      background: transparent;
   }

   .donations-send-button{
      width: auto;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      max-width: auto;
      font-size: calc(var(--main-adjuster) * (16/400));
      text-transform: uppercase;
      margin-left: calc(var(--main-adjuster) * (10/400));
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
      top: calc(var(--main-adjuster) * (8/400));
      padding-top: calc(var(--main-adjuster) * (3.5/400));
   }

   .donations-body-balance{
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
   }

   .donations-total-balance{
      font-family: URWRegular;
      white-space: pre;
      font-size: calc(var(--main-adjuster) * (40/400));
      margin-top: 0;
      margin-right: calc(var(--main-adjuster) * (16/400));
      color: white;
   }

   .donations-total-label{
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (4/400));
      text-transform: uppercase;
   }

   .donations-total-balance sup{
      font-size: calc(var(--main-adjuster) * (10/400));
      margin-left: calc(var(--main-adjuster) * (2/400));
   }

   .donations-topup-balance{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      display: flex;
      justify-content: center;
      align-items: center;
      background: none;
      border: none;
   }





   .beatz-container{
      width: 100%;
      display: none;
      flex-wrap: nowrap;
      overflow-x: auto;
      align-items: flex-start;
   }

   .beatz-container.active{
      display: flex;
   }
   
   .beatz-container .profile-stats-left{
      min-width: 100%;
   }

   .beatz-container .profile-stats-left:first-child{
      display: none;
   }

   .beatz-container .profile-stats-left.active:first-child{
      display: flex !important;
   }

   .beatz-container .profile-stats-left.active:first-child ~ .profile-stats-left{
      display: none;
   }

   .beatz-container .profile-stats-left{
      display: flex;
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      min-width: calc(100% - calc(var(--main-adjuster) * (16/400)));
   }

   .beatz-donation-back{
      display: flex;
      justify-content: center;
      align-items: center;
      background: transparent;
      border: none;
      z-index: 1;
   }

   .beatz-donation-back ~ span{
      color: white;
   }

   .beatz-donation-back::after{
      top: calc(var(--main-adjuster) * (-10/400)) !important;
      left: calc(var(--main-adjuster) * (-10/400)) !important;
      right: calc(var(--main-adjuster) * (-10/400)) !important;
      bottom: calc(var(--main-adjuster) * (-10/400)) !important;
   }

   .beatz-donation-container{
      display: flex;
      margin-left: calc(var(--main-adjuster) * (-16/400));
      width: calc(100% + calc(var(--main-adjuster) * (32/400)));
      min-width: calc(100% + calc(var(--main-adjuster) * (32/400)));
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
   }
   .beatz-donation-item{
      width: calc(100%/4);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      padding: 0 calc(var(--main-adjuster) * (8/400));
   }

   .beatz-donation-cover{
      width: calc(var(--main-adjuster) * (60/400));
      height: calc(var(--main-adjuster) * (60/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .beatz-donation-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .beatz-donation-details{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (10/400));
      text-align: center;
   }

   .beatz-donation-title{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (13/400));
   }

   .beatz-donation-name{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (6/400));
      font-size: calc(var(--main-adjuster) * (10/400));
      font-family: URWRegular;
   }








   .video-header{
      z-index: 1;
      background: linear-gradient(0deg, transparent, #171717);
      position: relative;
   }


   .video-page-player{
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: ;
   }










   .mylists-body{
      overflow-y: auto;
      padding-top: calc(var(--main-adjuster) * (70/400));
      width: 100%;
      padding-bottom: calc(var(--main-adjuster) * (150/400));
      height: calc(100% - calc(var(--main-adjuster) * (0/400)));
      display: flex;
      align-content: start;
      flex-wrap: wrap;
   }

   .mylists-container{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .mylists-body-item{
      width: 100%;
      display: flex;
      align-items: center;
      padding: calc(var(--main-adjuster) * (9/400)) calc(var(--main-adjuster) * (16/400));
   }

   .mylists-body-item:hover{
      transition: .5s;
/*      color: var(--thumb-color);*/
/*      background: rgba(255, 255, 255, 0.020);*/
   }

   .add-to-list .mylists-body-item{
      padding: calc(var(--main-adjuster) * (9/400)) calc(var(--main-adjuster) * (16/400));
   }

   .mylists-item-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: calc(var(--main-adjuster) * (10/400));
   }

   .mylists-item-icon{
      width: 60%;
      height: 60%;
   }

   .mylists-item-details{
      width: calc(100% - calc(var(--main-adjuster) * (50/400)));
   }

   .mylists-item-title{
      color: #fff;
      font-size: 1.25rem;
      font-weight: normal;
      padding-top: calc(var(--main-adjuster) * (7/400));
   }





   .modal-page{
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      transition: 0;
      background: rgba(0, 0, 0, 0.5);
      bottom: -100%;
      z-index: 4;
      display: flex;
      border: none;
      outline: none;
      padding: 0;
   }

   .modal-page.active{
      bottom: 0;
   }

   .modal-fieldset{
      position: absolute;
      left: 0;
      bottom: -100vh;
      height: auto;
      min-height: calc(var(--main-adjuster) * (100/400));
      width: 100%;
      max-height: 100vh;
      border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) 0 0;
      background: #171717;
      flex-wrap: wrap;
      box-shadow: 0 0 calc(var(--main-adjuster) * (10/400)) black;
      transition: .35s, height 1s;
      display: flex;
   }

   .modal-fieldset.drag-down-close,
   img.drag-down-close{
      transition: 0s !important;
   }

   .modal-fieldset.active{
      bottom: 0;
   }

   .modal-page.active .modal-fieldset{
/*      bottom: 0;*/
   }


   .confirm-payment-method .modal-fieldset-body{
      display: none;
      overflow-x: hidden;
   }

   .payment-frame{
      width: 100%;
      height: calc(var(--main-adjuster) * (280/400));
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
   }

   .confirm-payment-method .modal-fieldset-body.active{
      display: flex;
   }

   .top-purchase-item{
      width: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      display: flex;
      align-items: center;
      margin-bottom: calc(var(--main-adjuster) * (32/400));
   }

   .top-purchase-item .profile-stats-header{
      margin-bottom: 0;
   }



   .confirm-otp-code .refresh-button{
      display: none;
   }

   .confirm-otp-code .refresh-button.active{
      display: flex;
   }

   .confirm-otp-code .refresh-button.active ~ button{
      display: none;
   }



   .modal-fieldset-body{
      width: 100%;
      max-height: calc(100vh - calc(var(--main-adjuster) * (80/400)));
      padding: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (16/400));
      overflow-y: auto;
      height: 100%;
      padding-top: 0;
      display: flex;
      flex-wrap: wrap;
   }

   .modal-fieldset-body.modal-scroll-padding{
      padding-bottom: calc(var(--main-adjuster) * (160/400));
   }

   .modal-fieldset-body.modal-division{
      justify-content: space-between;
   }

   .modal-field{
      width: 100%;
      margin: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (4/400));
      align-items: center;
      position: relative;
      display: flex;
      flex-wrap: wrap;
   }

   .modal-suggestions-element{
      position: absolute;
      left: calc(var(--main-adjuster) * (-4/400));
      bottom: calc(var(--main-adjuster) * (50/400));
      width: calc(100% + calc(var(--main-adjuster) * (16/400)));
      height: fit-content;
      z-index: 1;
      max-height: calc(var(--main-adjuster) * (160/400));
      overflow-y: auto;
      list-style: none;
      padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (0/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      display: none;
      flex-wrap: wrap;
   }

   .modal-suggestions-element.active{
      display: flex;
   }

   .modal-suggestions-element li{
      width: 100%;
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
      font-size: calc(var(--main-adjuster) * (24/400));
      font-family: Helvetica;
   }

   .modal-suggestions-element li:hover{
      background: rgba(0, 0, 0, 0.2);
   }

   .modal-field svg,
   .modal-field .show-suggestions{
      position: absolute;
      right: 0;
      bottom: calc(var(--main-adjuster) * (12/400));
   }

   .modal-field .show-suggestions{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
   }

   .modal-field .show-suggestions svg{
      pointer-events: none;
      bottom: calc(var(--main-adjuster) * (4/400));
   }

   .modal-field .show-suggestions.active svg{
      transform: rotate(180deg);
   }

   .modal-checkbox{
      width: calc(var(--main-adjuster) * (14/400));
      height: calc(var(--main-adjuster) * (14/400));
      margin-right: calc(var(--main-adjuster) * (10/400));
      border: none;
      background: transparent;
   }

   .modal-checkbox ~ span{
      color: red;
   }

   .modal-checkbox:checked ~ span{
      color: var(--ceu);
   }

   .modal-short{
      width: calc(var(--main-adjuster) * (75/400));
   }

   .modal-long{
      width: calc(100% - (calc(var(--main-adjuster) * (90/400)) + calc(var(--main-adjuster) * (8/400))));
   }

   .modal-field:focus-within .modal-field-label{
      color: var(--thumb-color);
   }

   .modal-field-label{
      width: 100%;
      display: flex;
      margin-bottom: calc(var(--main-adjuster) * (8/400));
      font-size: calc(var(--main-adjuster) * (12/400));
      text-transform: uppercase;
      color: #aaa;
   }

   .modal-field-input{
      width: 100%;
      height: calc(var(--main-adjuster) * (40/400));
      border: none;
      outline: none;
      border-bottom: calc(var(--main-adjuster) * (2/400)) solid #888 !important;
      background: rgba(0, 0, 0, 0.0);
      border-radius: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   .expiry-month-input{
      max-width: calc(50% - calc(var(--main-adjuster) * (32/400)));
   }

   .expiry-year-input{
      max-width: calc(50%/2);
   }

   .modal-field-checkbox{
      height: calc(var(--main-adjuster) * (20/400));
      width: calc(var(--main-adjuster) * (20/400));
      margin-right: calc(var(--main-adjuster) * (10/400));
      background: transparent;
   }

   .modal-field-title{
      width: 100%;
   }

   input.modal-field-input.stand-alone{
      height: calc(var(--main-adjuster) * (80/400));
      font-size: calc(var(--main-adjuster) * (64/400));
      margin: calc(var(--main-adjuster) * (16/400)) 0;
      margin-left: 0;
      background: transparent;
      width: calc(100% - calc(var(--main-adjuster) * (0/400)));
      border-bottom: none !important;
      font-family: 'URWRegular';
      text-align: center;
      padding: 0 calc(var(--main-adjuster) * (32/400));
   }

   input.modal-field-input.stand-alone:placeholder{
      font-size: calc(var(--main-adjuster) * (64/400));
      font-style: normal;
   }

   input.modal-field-input.stand-alone::-ms-input-placeholder{
      font-style: normal;
   }

   input.modal-field-input.stand-alone::-moz-placeholder{
      font-style: normal;
   }

   input.modal-field-input.stand-alone::placeholder{
      font-style: normal;
   }


   .modal-field-input.modal-field-textarea{
      height: calc(var(--main-adjuster) * (200/400));
      line-height: 1.5;
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .modal-field-input *{
      background: #101010 !important;
      border: none;
      outline: none;
      font-family: inherit;
   }

   .modal-field-input:focus{
      border-bottom: calc(var(--main-adjuster) * (2/400)) solid var(--thumb-color) !important;
   }


   .modal-description{
      line-height: 1.5;
      font-size: calc(var(--main-adjuster) * (14.5/400));
      color: #ccc;
   }

   .card-payment-icons{
      width: 100%;
      display: flex;
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .card-payment-icon:not(:first-child){
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .terms-condition{
      height: calc(var(--main-adjuster) * (40/400));
      width: 100%;
      font-size: calc(var(--main-adjuster) * (32/400));
      display: flex;
      margin-top: calc(var(--main-adjuster) * (16/400));
      align-items: center;
      justify-content: center;
   }

   .terms-conditional{
      color: var(--ceu);
   }


   .modal-payment-method{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (2/400)) 0;
      flex-wrap: wrap;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      align-items: center;
      justify-content: center;
   }

   .continue-freely-button{
      color: white;
      padding: calc(var(--main-adjuster) * (10/400));
      font-size: calc(var(--main-adjuster) * (18/400));
      margin-top: calc(var(--main-adjuster) * (20/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      margin-bottom: calc(var(--main-adjuster) * (-5/400));
      align-items: center;
      background: transparent;
      background: linear-gradient(-45deg, var(--ver), var(--rosa), var(--roxo), var(--vio), var(--ceu)); color: transparent; background-size: cover; background-clip: text;
      -webkit-background-clip: text;
      -moz-background-clip: text;
      -ms-background-clip: text;
      -o-background-clip: text;
      /*text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) #101010;*/
   }

   .continue-freely-button svg{
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .modal-payment-item{
      padding: 0;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      margin: 0 calc(var(--main-adjuster) * (8/400));
      display: flex;
      cursor: pointer;
      border-radius: calc(var(--main-adjuster) * (20/400));
      align-items: center;
      justify-content: center;
      background: transparent;
      border: calc(var(--main-adjuster) * (2/400)) solid #101010;
   }

   .modal-payment-item.active{
      color: white;
      padding: 0;
/*      padding-right: calc(var(--main-adjuster) * (5/400));*/
      background: var(--item-color);
      border-color: var(--item-color);
   }

   .modal-payment-item.payment-grow{
      border-radius: calc(var(--main-adjuster) * (64/400));
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      justify-content: center;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      border: none;
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .modal-payment-icon{
      width: calc(var(--main-adjuster) * (30/400));
      height: calc(var(--main-adjuster) * (30/400));
      border-radius: inherit;
      border: calc(var(--main-adjuster) * (1/400)) solid #171717;
      border: none;
   }

   .modal-payment-item.active .modal-payment-icon{
      display: flex !important;
   }

   .modal-payment-item.payment-grow:last-child .modal-payment-icon{
      width: calc(var(--main-adjuster) * (28/400));
      height: calc(var(--main-adjuster) * (28/400));
   }

   .modal-payment-icon.payment-grow{
/*         width: calc(var(--main-adjuster) * (40/400));*/
/*         height: calc(var(--main-adjuster) * (40/400));*/
   }

   .modal-payment-text{
      font-size: calc(var(--main-adjuster) * (13/400));
      margin: 0 calc(var(--main-adjuster) * (8/400));
      margin-top: calc(var(--main-adjuster) * (2/400));
      color: #fff;
      white-space: pre;
      word-break: normal;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }




   .modal-body-padding{
      padding-left: 0;
      padding-right: 0;
   }

   .modal-option-item{
      width: 100%;
      display: flex;
      align-items: center;
      padding: calc(var(--main-adjuster) * (9/400)) calc(var(--main-adjuster) * (20/400));
      cursor: pointer;
   }

   .modal-large-items .modal-option-item{
      padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (24/400));   
   }

   .modal-option-item:hover{
/*      color: var(--thumb-color);*/
      background: rgba(0, 0, 0, 0.20);
   }

   .modal-option-icon{
      margin-right: calc(var(--main-adjuster) * (16/400));
      color: white;
   }

   .modal-option-icon *{
      color: white;
   }

   .modal-option-icon *[stroke="currentColor"]{
      stroke: white;
   }

   .modal-option-icon *[fill="currentColor"]{
      fill: white;
   }

   .modal-large-items .modal-option-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (18/400));
   }

   .modal-option-title{
      color: #fff;
      margin-bottom: calc(var(--main-adjuster) * (-3/400));
   }

   .modal-option-input{
      margin: 0;
      margin-right: calc(var(--main-adjuster) * (16/400));
      color: red;
      width: calc(var(--main-adjuster) * (12/400));
      height: calc(var(--main-adjuster) * (12/400));
      padding: calc(var(--main-adjuster) * (2/400));
   }









   .loaders-pages{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
      align-items: start;
      z-index: 2;
      padding: 0;
      display: none;
/*         background: rgba(0, 0, 0, 0.5);*/
      background: #171717;
   }

   .loaders-pages.level{
      z-index: 2;
   }

   .loaders-pages.active{
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (1000/400)) rgba(0, 0, 0, 0.5);
      display: flex;
   }

   .small-loader-item{
      width: 100%;
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (12/400));
      margin: calc(var(--main-adjuster) * (16/400));
      margin-bottom: 0;
      position: relative;
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      align-items: center;
      justify-content: space-between;
      border-radius: calc(var(--main-adjuster) * (32/400));
      overflow: hidden;
      display: none;
   }

   .active.small-item .small-loader-item{
      display: flex;
   }

   .small-loader-title{
      color: #fff;
      color: #aaa;
      font-size: calc(var(--main-adjuster) * (12/400));
      font-style: italic;
      text-transform: uppercase;
      z-index: 1;
   }

   .small-loader-precentage{
      font-family: 'URWRegular';
      color: var(--thumb-color);
      font-size: calc(var(--main-adjuster) * (13/400));
   }

   .small-loader-progress{
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(50% - calc(var(--main-adjuster) * (32/400)));
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: var(--thumb-color);
      z-index: 0;
      opacity: .5;
   }



   .big-loader-item{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: transparent;
      display: none;
      align-items: center;
      justify-content: center;
   }

   .active.big-item .big-loader-item{
      display: flex;
   }

   .loader-3{
      margin-bottom: calc(var(--main-adjuster) * (80/400));
   }

   .big-item-center .loader-3{
      margin-bottom: 0;
   }

   .loader-3 > div {
      width: calc(var(--main-adjuster) * (2/400));
      height: calc(var(--main-adjuster) * (80/400));
      border-radius: calc(var(--main-adjuster) * (2/400));
      margin: 0 calc(var(--main-adjuster) * (5/400));
   }









   .local-page{
      padding-bottom: calc(var(--main-adjuster) * (160/400));
      overflow-y: auto;
   }

   .local-page-header{
      position: sticky;
      top: 0;
      z-index: 2 !important;
      background: #171717 !important;
   }

   .local-categories{
      position: sticky;
      top: calc(var(--main-adjuster) * (80/400));
      margin-top: 0;
      padding-bottom: calc(var(--main-adjuster) * (16/400));
      z-index: 2 !important;
      background: #171717 !important;
   }

   .local-page-body{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      z-index: 0;
   }

   .button-local-page .search-item-deatils{
      width: calc(100% - calc(var(--main-adjuster) * (88/400)));
   }






   .modal-cover{
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
      height: calc(100vw - calc(var(--main-adjuster) * (40/400)));
      width: 100%;
   }

   .modal-field.modal-cover{
/*      margin-bottom: calc(var(--main-adjuster) * (16/400));*/
   }

   .modal-field.modal-cover ~ .search-categories{
      margin: calc(var(--main-adjuster) * (16/400)) 0;
   }

   .modal-field-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .modal-field-file{
      z-index: 1;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
   }


   .profile-settings-display{
      width: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      display: flex;
      left: 0;
      bottom: calc(var(--main-adjuster) * (0/400));
      position: absolute;
      align-items: center;
      z-index: 1;
   }

   .profile-settings-image{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      border-radius: calc(var(--main-adjuster) * (64/400));
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .profile-settings-image ~ .modal-field-file{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      left: calc(var(--main-adjuster) * (16/400));
      bottom: 0;
   }

   .profile-settings-details{
      width: calc(100% - calc(var(--main-adjuster) * (60/400)));
      display: flex;
      flex-wrap: wrap;
      padding-top: calc(var(--main-adjuster) * (4/400));
   }

   .profile-settings-title{
      width: calc(100% - calc(var(--main-adjuster) * (50/400)));
      color: white;
      font-size: calc(var(--main-adjuster) * (20/400));
      margin-bottom: calc(var(--main-adjuster) * (5/400));
   }

   .profile-settings-description{
      width: calc(100% - calc(var(--main-adjuster) * (50/400)));
      font-size: calc(var(--main-adjuster) * (14/400));
   }

   .profile-settings-button{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      display: flex;
      border: none;
      align-items: center;
      justify-content: center;
      background: transparent;
      justify-content: center;
      background: rgba(0, 0, 0, 0.50);
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
   }









   .manager-buttons{
      display: flex;
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (4/400));
      margin: calc(var(--main-adjuster) * (8/400)) 0;
      margin-left: calc(var(--main-adjuster) * (8/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      background: transparent;
      overflow: hidden;
      align-items: center;
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      justify-content: space-between;
   }

   .manager-buttons .manager-button-item{
      padding: 0;
      width:   calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border: none;
      outline: none;
      display: flex;
      position: relative;
      background: #101010;
      border-radius: calc(var(--main-adjuster) * (32/400));
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .manager-play-button.buffering svg,
   .manager-play-button.playing svg,
   .manager-play-button.playing img,
   .manager-play-button .pause-icon,
   .manager-play-button span,
   .manager-play-button img{
      display: none;
   }

   .manager-play-button.playing .pause-icon,
   .manager-play-button.playing span,
   .manager-play-button.buffering img{
      display: flex;
   }

   .manager-play-button.buffering span{
      display: none;
   }

   .manager-play-button span{
      font-family: Helvetica;
      margin-left: calc(var(--main-adjuster) * (5/400));
   }

   .manager-play-button .pause-icon{
      position: initial;
      width: calc(var(--main-adjuster) * (30/400));
   }

   .manager-play-button .pause-icon::after,
   .manager-play-button .pause-icon::before{
      background: white;
   }

   .manager-button-item:first-child{
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
      box-shadow: calc(var(--main-adjuster) * (-0/400)) calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (0/400)) var(--roxo), calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (-0/400)) calc(var(--main-adjuster) * (0/400)) var(--ceu);
   }

   .old-style-2,
   .manager-button-item.old-style-2{
      background: linear-gradient(45deg, var(--ver), var(--rosa), var(--roxo)) !important;
      box-shadow: calc(var(--main-adjuster) * (-0/400)) calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (0/400)) var(--ver), calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (-0/400)) calc(var(--main-adjuster) * (0/400)) var(--roxo);
      font-weight: bolder;
   }

   .old-style-1,
   .manager-button-item.old-style-1{
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;
      box-shadow: calc(var(--main-adjuster) * (-0/400)) calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (0/400)) var(--roxo), calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (-0/400)) calc(var(--main-adjuster) * (0/400)) var(--ceu);
   }

   .manager-button-item *{
      color: white;
   }

   .manager-button-item.manager-grow-3,
   .manager-button-item.manager-grow-2{
      width: calc((calc(var(--main-adjuster) * (40/400))*3) + calc(var(--main-adjuster) * (56/400)));
      justify-content: start;
      padding-left: calc(var(--main-adjuster) * (12/400));
   }

   .manager-button-item.manager-grow-2{
      width: calc((calc(var(--main-adjuster) * (40/400))*2) + calc(var(--main-adjuster) * (40/400)));
   }

   .manager-grow-3 ~ .manager-grow-3{
      width: calc((calc(var(--main-adjuster) * (40/400))*3) + calc(var(--main-adjuster) * (16/400)));
   }

   .manager-item-text{
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      margin-left: calc(var(--main-adjuster) * (10/400));
      margin-bottom: calc(var(--main-adjuster) * (-3/400));
      text-transform: uppercase;
   }

   .manager-play-button .manager-item-text{
      margin-bottom: calc(var(--main-adjuster) * (-1/400));
   }

   .manager-buttons .manager-button-item:hover{
      background: ;
   }







   .add-album-body,
   .add-track-body{
      width: 100%;
      max-height: calc(100vh - calc(var(--main-adjuster) * (80/400)));
      padding: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (16/400));
      overflow-y: auto;
      height: auto;
      padding-top: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: calc(var(--main-adjuster) * (160/400)) !important;
   }

   .add-track-body{
      padding: calc(var(--main-adjuster) * (32/400)) 0;
      padding-top: 0;
   }

   .add-album-item{
      width: calc(50% - calc(var(--main-adjuster) * (8/400)));
      min-width: calc(50% - calc(var(--main-adjuster) * (8/400)));
      border-radius: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (20/400));
      margin-top: calc(var(--main-adjuster) * (40/400));
      height: auto;
   }

   .add-album-item{
      position: relative;
   }

   .add-album-item[new]::after{
       content: attr(new);
    }

   .add-album-item::after{
      display: flex;
      font-size: calc(var(--main-adjuster) * (10/400));
      position: absolute;
      right: calc(var(--main-adjuster) * (5.5/400));
      top: calc(50vw - calc(var(--main-adjuster) * (56/400)));
      top: calc(50vw - calc(var(--main-adjuster) * (50/400)));
      padding: calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (8/400));
      padding-bottom: calc(var(--main-adjuster) * (4/400));
      background: linear-gradient(45deg, var(--ver), var(--rosa), var(--roxo));
      font-weight: bolder;
      border-radius: 0;
      font-family: Helvetica;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      color: white;
      border-radius: calc(var(--main-adjuster) * (16/400));
      text-transform: uppercase;
      line-height: normal;
   }

   .add-album-item[parental]::before{
      content: attr(parental);
      display: flex;
      font-size: calc(var(--main-adjuster) * (12/400));
      position: absolute;
      left: calc(var(--main-adjuster) * (8/400));
      top: calc(var(--main-adjuster) * (8/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400));
      background: black;
      font-weight: bolder;
      border-radius: calc(var(--main-adjuster) * (4/400));
      font-family: Helvetica;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      z-index: 1;
      text-transform: uppercase;
      line-height: normal;
      padding-bottom: calc(var(--main-adjuster) * (3/400));
   }

   .add-album-item[exclusive]::after{
      content: attr(exclusive);
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
   }



   .add-album-item:hover *{
      transition: .5s;
/*      color: var(--thumb-color);*/
/*      border-color: var(--thumb-color) !important;*/
   }

   .add-album-cover{
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      border-radius: inherit;
      height: calc(50vw - calc(var(--main-adjuster) * (24/400)));
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      position: relative;
   }

   .add-album-click .add-album-cover{
      border: calc(var(--main-adjuster) * (2/400)) dashed #888;
   }

   .add-album-cover::after{
      content: "";
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      height: calc(100% - calc(var(--main-adjuster) * (16/400)));
      left: calc(var(--main-adjuster) * (8/400));
      top: calc(var(--main-adjuster) * (-8/400));
      display: flex;
      position: absolute;
      background: #333;
      z-index: -1;
      border-radius: calc(var(--main-adjuster) * (16/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .add-album-cover::before{
      content: "";
      width: calc(100% - calc(var(--main-adjuster) * (32/400)));
      height: calc(100% - calc(var(--main-adjuster) * (32/400)));
      left: calc(var(--main-adjuster) * (16/400));
      top: calc(var(--main-adjuster) * (-16/400));
      display: flex;
      position: absolute;
      background: #222;
      z-index: -2;
      border-radius: calc(var(--main-adjuster) * (16/400));
   }

   .add-album-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .add-album-click .add-album-image{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      color: #888;
      stroke-width: 1 !important;
   }

   .add-album-details{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .album-details-title{
      color: #fff;
      font-weight: normal;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (20/400));
      width: 100%;
   }

   .album-details-name{
      font-size: calc(var(--main-adjuster) * (14/400));
      line-clamp: 2 !important;
   }




   .add-track-item{
      position: relative;
   }

   .add-track-item:hover *{
      transition: .5s;
   }

   .add-track-item .song-item-cover{
      border: calc(var(--main-adjuster) * (1/400)) dashed;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .add-track-item .song-item-image{
      width: calc(var(--main-adjuster) * (20/400));
      height: calc(var(--main-adjuster) * (20/400));
   }

   .add-track-item .song-item-details{
      width: calc(100% - calc(var(--main-adjuster) * (55/400)));
   }

   .add-track-item .song-item-action{

   }


   .song-item.active .song-item-action{
      pointer-events: none;
   }


   .playing-indicator {
     width: calc(var(--main-adjuster) * (20/400));
     height: calc(var(--main-adjuster) * (20/400));
     border-radius: calc(var(--main-adjuster) * (5/400));
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 0;
     box-sizing: border-box;
     position: absolute;
     right: 0;
     display: none;
   }

   .playing-indicator.active{
      position: initial;
   }

   .playing-indicator.active,
   .song-item.active .playing-indicator,
   .station-body-item.active .playing-indicator{
      display: flex;
   }

   .station-body-item.active .playing-indicator ~ *,
   .song-item.active .playing-indicator ~ *,
   .playing-indicator.active ~ *{
      display: none;
   }

   .playing__bar {
     display: inline-block;
     background: white;
     width: calc(var(--main-adjuster) * (4/400));
     height: 100%;
     animation: up-and-down 1.3s ease infinite alternate;
   }

   .playing__bar1 {
     height: 60%;
   }

   .playing__bar2 {
     height: 30%;
     animation-delay: -2.4s;
   }

   .playing__bar3 {
     height: 75%;
     animation-delay: -3.7s;
   }

   @keyframes up-and-down {
     10% {
       height: 30%;
     }
     
     30% {
       height: 100%;
     }
     
     60% {
       height: 50%;
     }
     
     80% {
       height: 75%;
     }
     
     100% {
       height: 20%;
     }
   }


   .track-add-input,
   .captions-add-input{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      opacity: 0;
      z-index: 1;
   }


   .profile-overview-stats{
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      border-radius: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (16/400));
      display: flex;
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      flex-wrap: wrap;
   }

   .profile-overview-stats.active .profile-stats-header{
      margin-bottom: calc(var(--main-adjuster) * (20/400));
   }

   .profile-overview-stats.content-aditional{
      background: linear-gradient(135deg, var(--item-color), #171717);
      margin: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (8/400));
/*      margin-top: calc(var(--main-adjuster) * (32/400));*/
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black, inset 0 0 0 calc(var(--main-adjuster) * (200/400)) rgba(0, 0, 0, 0.2);
   }

   .profile-overview-stats.content-aditional *{
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }


   .content-aditional .loader-container{
      margin-top: calc(var(--main-adjuster) * (16/400)) !important;
   }

   .profile-overview-stats .profile-stats-body{
      display: none;
   }

   .profile-overview-stats.content-information .profile-stats-body{
      display: flex;
   }

   .profile-overview-stats.active .profile-stats-body{
      display: flex;
   }

   .profile-overview-stats.video-frame{
      height: calc(var(--main-adjuster) * (300/400));
      padding: calc(var(--main-adjuster) * (2/400));
   }
   
   .content-video-iframe{
      display: flex;
      width: 100%;
      height: 100%;
      min-height: calc(var(--main-adjuster) * (260/400));
      border: none;
      outline: none;
      box-shadow: none;
      border-radius: calc(var(--main-adjuster) * (8/400));
   }


   .profile-overview-stats.add-content-click{
      height: calc(var(--main-adjuster) * (100/400));
      align-items: center;
      justify-content: center;
      border: calc(var(--main-adjuster) * (1/400)) dashed #555;
      position: relative;
   }

   .profile-overview-stats.add-content-click .track-add-input{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
   }
   
   .add-content-icon{

   }

   .profile-stats-cover{
      width: calc(var(--main-adjuster) * (46/400));
      height: calc(var(--main-adjuster) * (46/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      margin-right: calc(var(--main-adjuster) * (12/400));
      box-shadow: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)) black;
   }

   .profile-stats-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .profile-stats-cover ~ .profile-stats-header{
      width: calc(100% - (calc(var(--main-adjuster) * (50/400)) + calc(var(--main-adjuster) * (16/400))));
   }

   .profile-contacts .profile-stats-header{
      width: calc(100% - (calc(var(--main-adjuster) * (50/400)) + calc(var(--main-adjuster) * (0/400))));
   }

   .profile-contacts .profile-stats-header{
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .profile-contacts-container{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .creator-playlists{
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-right: calc(var(--main-adjuster) * (16/400));
      padding-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .creator-playlists > div:last-child{
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .contact-wrapper{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: calc(var(--main-adjuster) * (12/400)) 0;
      width: 100%;
   }

   .contact-wrapper:last-child{
      margin-bottom: 0;
   }

   .contact-wrapper .profile-stats-header{
      margin-bottom: 0;
   }

   .profile-contacts .contact-wrapper .profile-stats-header{
      width: calc(100% - (calc(var(--main-adjuster) * (100/400)) + calc(var(--main-adjuster) * (16/400))));
   }

   .profile-contact-button{
      height: calc(var(--main-adjuster) * (46/400));
      width: calc(var(--main-adjuster) * (50/400));
      padding: 0;
      background: transparent;
      border: none;
      outline: none;
   }

   .profile-contact-button:after{
      content: none !important;
   }

   .profile-contact-button input{
      display: none;
   }

   .profile-contact-button *,
   .profile-contact-button *::before,
   .profile-contact-button *::after {
     transition: 400ms all ease-in-out 50ms;
     box-sizing: border-box;
     backface-visibility: hidden;
   }



   .uploads-body{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      padding: calc(var(--main-adjuster) * (72/400)) 0;
      padding-bottom: calc(var(--main-adjuster) * (112/400));
      overflow-y: auto;
      align-content: start;
   }




   .upload-element{
      width: 100%;
      display: flex;
      align-items: center;
      padding: calc(var(--main-adjuster) * (12/400)) calc(var(--main-adjuster) * (16/400));
      position: relative;
      transition: .5s;
      transform: translateX(0);
   }

   .upload-element.active{
      transform: translateX(calc(var(--main-adjuster) * (-160/400)));
   }

   .upload-element-controllers{
      width: calc(var(--main-adjuster) * (180/400));
      top: calc(var(--main-adjuster) * (12/400));
      height: calc(100% - calc(var(--main-adjuster) * (24/400)));
      display: flex;
      align-items: center;
      position: absolute;
      left: calc(100% - calc(var(--main-adjuster) * (8/400)));
   }

   .upload-controller-button{
      width: calc(var(--main-adjuster) * (36/400));
      height: calc(var(--main-adjuster) * (36/400));
      margin: 0 calc(var(--main-adjuster) * (10/400));
      display: flex;
      align-items: center;
      border-radius: calc(var(--main-adjuster) * (32/400));
      justify-content: center;
      border: none;
      background: transparent;
   }

   .upload-controller-button:nth-child(1) {
      background: #8a00ff;
   }

   .upload-controller-button:nth-child(2) {
      background: #da00ff;
   }

   .upload-controller-button:nth-child(3) {
      background: #ff006c;
   }


   .upload-element-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
   }

   .upload-element-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .upload-element-details{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: calc(100% - calc(var(--main-adjuster) * (100/400)));
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .upload-element-title{
      width: 100%;
      color: white;
      font-size: calc(var(--main-adjuster) * (24/400));
      margin-bottom: calc(var(--main-adjuster) * (4/400));
      font-weight: normal;
   }

   .upload-element-name{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .upload-progress-percentage{
      font-family: Helvetica;
      color: var(--ceu);
   }


   .upload-element-progress{
      transform: rotate(-90deg);
   }

   .cancel-upload-icon{
      position: absolute;  
      font-size: calc(var(--main-adjuster) * (11/400));
      font-weight: bolder;
      font-family: Helvetica;
   }

   .upload-element-cancel{
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
      display: flex;
      align-items: center;
      justify-content: center;
   }




   /*Button is :CHECKED*/

   #toggle[type="checkbox"]:checked ~ .toggle-container {
     background: linear-gradient(245deg, var(--roxo), var(--vio), var(--ceu));
     box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) var(--vio);
   }

   #toggle[type="checkbox"]:checked ~ .toggle-container .check-element {
     left: calc(var(--main-adjuster) * (27.5/400));
     transform: rotate(360deg);
   }


   /*shared*/

   .toggle-container,
   .check-element {
     border-radius: calc(var(--main-adjuster) * (50/400));
   }


   /*'un':checked state*/

   .toggle-container {
     height: calc(var(--main-adjuster) * (24.95/400));
     width: calc(var(--main-adjuster) * (50/400));
     background: rgba(43, 43, 43, 1);
     position: relative;        
     box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) rgba(43,43,43,1);
     
   }

   .toggle-container .check-element {
     height: calc(var(--main-adjuster) * (20/400));
     width: calc(var(--main-adjuster) * (20/400));
     background: rgba(255, 255, 255, 1);
     position: absolute;
     top: calc(var(--main-adjuster) * (2.95/400));
     left: calc(var(--main-adjuster) * (2.95/400));
     cursor: pointer;
   }

   .toggle-container .check-element::before {
     content: '';
     height: calc(var(--main-adjuster) * (15/400));
     width: calc(var(--main-adjuster) * (1.25/400));
     position: absolute;
     top: calc(50% - calc(var(--main-adjuster) * (7.5/400)));
     left: calc(50% - calc(var(--main-adjuster) * (.525/400)));
     transform: rotate(45deg);
   }

   .toggle-container .check-element::after {
     content: '';
     height: calc(var(--main-adjuster) * (1.25/400));
     width: calc(var(--main-adjuster) * (15/400));
     position: absolute;
     top: calc(50% - calc(var(--main-adjuster) * (.525/400)));
     left: calc(50% - calc(var(--main-adjuster) * (7.5/400)));
     transform: rotate(45deg);
   }

   .toggle-container .check-element::before,
   .toggle-container .check-element::after{
     background: rgba(43,43,43,1);
     border-radius: calc(var(--main-adjuster) * (1.25/400));
   }

   /* pesduo class on toggle */

   #toggle[type="checkbox"]:checked ~ .toggle-container .check-element::before{
     height: calc(var(--main-adjuster) * (12.5/400));
     top: calc(55% - calc(var(--main-adjuster) * (6.25/400)));
     left: calc(60% - calc(var(--main-adjuster) * (.525/400)));
     background: var(--vio);
   }

   #toggle[type="checkbox"]:checked ~ .toggle-container .check-element::after{
     width: calc(var(--main-adjuster) * (5/400));
     top: calc(95% - calc(var(--main-adjuster) * (6.25/400)));
     left: calc(22.5% - calc(var(--main-adjuster) * (.525/400)));
     background: var(--vio);
   }









   .profile-stats-header{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: calc(var(--main-adjuster) * (32/400));
      position: relative;
   }

   .header-bar{
      height: calc(var(--main-adjuster) * (4/400));
      width: calc(var(--main-adjuster) * (100/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
      background: white;
      margin-top: calc(var(--main-adjuster) * (5/400));
      margin-left: calc(50% - calc(var(--main-adjuster) * (50/400)));
   }

   .save-preview,
   .stats-shrink-button,
   .deposits-button{
      position: absolute;
      right: calc(var(--main-adjuster) * (-4/400));
      top: 0;
      width: calc(var(--main-adjuster) * (46/400));
      height: calc(var(--main-adjuster) * (46/400));
      border-radius: calc(var(--main-adjuster) * (20/400));
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
   }

   .player-lyrics{
      color: white;
      height: calc(var(--main-adjuster) * (300/400));
      display: flex;
      font-size: calc(var(--main-adjuster) * (32/400));
      line-height: 1.75;
      overflow: hidden;
      font-weight: bold;
      text-align: center;
      position: relative;
      align-items: center;
      justify-content: center;
      text-shadow: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)) black;
   }

   .player-lyrics *{
      color: white;
      text-shadow: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)) black;
   }

   .player-lyrics:after,
   .player-lyrics:before{
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (100/400));
      background: red;
   }

   .player-lyrics:after{
      top: 0;
      background: linear-gradient(180deg, var(--thumb-color), transparent);
   }

   .player-lyrics:before{
      bottom: 0;
      background: linear-gradient(0deg, var(--thumb-color), transparent);
   }


   .player-stats-header{
      align-items: center;
      justify-content: space-between;
   }

   .player-stats-header .profile-stats-title{
      margin: calc(var(--main-adjuster) * (5/400)) 0;
   }

   .player-stats-header .profile-stats-name{
/*      margin-top: calc(var(--main-adjuster) * (10/400));*/
   }

   .profile-stats-button{
      position: absolute;
      right: 0;
      display: flex;
      padding: calc(var(--main-adjuster) * (7/400)) calc(var(--main-adjuster) * (12/400));
      padding-bottom: calc(var(--main-adjuster) * (5/400));
      border-radius: calc(var(--main-adjuster) * (20/400));
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      background: var(--ceu);
      color: white;
      font-weight: bold;
      border: none;
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;
      background: transparent !important; border: calc(var(--main-adjuster) * (2/400)) solid #fff;
   }

   .profile-overview-cover{
      width: 100%;
      height: calc(var(--main-adjuster) * (300/400));
      margin-bottom: calc(var(--main-adjuster) * (24/400));
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
   }

   .profile-overview-image{
      width: calc(100% + calc(var(--main-adjuster) * (32/400)));
      height: calc(100% + calc(var(--main-adjuster) * (32/400)));
      border-radius: inherit;
      position: absolute;
      left: calc(var(--main-adjuster) * (-16/400));
      top: calc(var(--main-adjuster) * (-16/400));
   }


   .deposits-button{
      right: 0;
      top: calc(var(--main-adjuster) * (-4/400));
   }

   .stats-shrink-button svg{
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
      color: white;
   }

   .stats-shrink-button svg *{
      color: white !important;
   }

   .profile-overview-stats.active .stats-shrink-button svg{
      transform: rotateX(180deg);
   }

   .profile-overview-stats.active button.save-preview{
      background: #171717;
      border-radius: calc(var(--main-adjuster) * (32/400));
      padding: 0;
      top: calc(var(--main-adjuster) * (4/400));
   }

   .add-track .profile-stats-header,
   .query-page .profile-stats-header,
   .content-page .profile-stats-header{
      margin-bottom: 0;
   }

   .profile-stats-title{
      color: #fff;
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (24/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .profile-stats-name{
      color: white;
      font-size: calc(var(--main-adjuster) * (12/400));
      padding-top: calc(var(--main-adjuster) * (4/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .profile-stats-body{
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      -webkit-line-clamp: 4;
   }

   .profile-page .profile-stats-body{
      display: flex;
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      flex-wrap: wrap;
      margin-top: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      border-radius: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (16/400));
      margin-left: calc(var(--main-adjuster) * (8/400));
   }

   .profile-stats-left{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .my-wallet-transactions,
   .my-beatz-transactions{
      width: 100%;
      margin: calc(var(--main-adjuster) * (8/400));
      background: #101010;
      border-radius: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (24/400)) calc(var(--main-adjuster) * (16/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      display: none;
   }

   .my-current-balance.active ~ .my-wallet-transactions,
   .my-beatzcoin-balance.active ~ .my-beatz-transactions,
   .my-beatzcoin-balance.active ~ .beatz-container{
      display: flex;
   }

   .my-wallet-transactions .profile-stats-item,
   .my-beatz-transactions .profile-stats-item{
      margin-bottom: 0;
   }

   .my-wallet-transactions .profile-stats-item .placeholder-shimmer,
   .my-beatz-transactions .profile-stats-item .placeholder-shimmer{
      margin-left: calc(var(--main-adjuster) * (8/400));
      margin-right: calc(var(--main-adjuster) * (8/400));
   }

   .profile-stats-item{
      display: flex;
      width: calc(100%/4);
      flex-wrap: wrap;
      margin-bottom: calc(var(--main-adjuster) * (32/400));
      justify-content: center;
      text-align: center;
   }

   .content-page .profile-stats-item,
   .query-page .profile-stats-item{
      margin: calc(var(--main-adjuster) * (8/400)) 0;
      margin-top: calc(var(--main-adjuster) * (24/400));
   }

   .profile-stats-item.stats-double{
      width: calc(100%/2) !important;
   }

   .content-information .profile-stats-header{
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .content-information .profile-stats-item{
      width: 100%;
      justify-content: start;
      text-align: left;
      margin-bottom: 0;
      margin-top: calc(var(--main-adjuster) * (8/400));
   }

   .profile-stats-item-title{
      color: #fff;
      font-family: 'URWRegular';
      width: 100%;
      font-size: calc(var(--main-adjuster) * (24/400));
      font-weight: normal;
      word-wrap: break-word;
      word-break: break-word;
      -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
   }

   .profile-stats-item-name{
      font-size: calc(var(--main-adjuster) * (10/400));
      text-transform: uppercase;
      margin-top: calc(var(--main-adjuster) * (10/400));
      white-space: pre;
   }

   .content-information .profile-stats-item-name{
      margin-bottom: calc(var(--main-adjuster) * (10/400));  
      top: 0;
   }

   .profile-stats-right{
      display: flex;
      justify-content: center;
      width: 100%;
   }

   .profile-stats-right .profile-stats-item{
      display: flex;
      width: 50%;
      margin-bottom: 0;
      align-content: center;
   }

   .profile-stats-right .profile-stats-item-title{
      color: #fff;
/*       font-size: calc(var(--main-adjuster) * (28/400));*/
   }

   .profile-stats-item-title > *{
      font-size: calc(var(--main-adjuster) * (10/400));
   }

   .profile-stats-right .profile-stats-item-name{

   }




   .medx-ui .profile-stats-footer{
      display: flex;
      width: 100%;
      position: relative;
      align-items: center;
      margin-top: calc(var(--main-adjuster) * (20/400));
   }

   .medx-ui .profile-footer-details{
      width: 100%;
      padding: calc(var(--main-adjuster) * (10/400)) 0;
      display: flex;
      flex-wrap: wrap;
   }

   .medx-ui .profile-footer-title{
      width: 100%;
      color: white;
      font-size: calc(var(--main-adjuster) * (14/400));
   }

   .medx-ui .profile-footer-name{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (10/400));
      margin-top: calc(var(--main-adjuster) * (3/400));
   }

   .medx-ui .profile-footer-button{
      position: absolute;
      right: calc(var(--main-adjuster) * (0/400));
      background: #0096ea;
      color: black;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (5/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
   }




   .profile-account{
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: calc(var(--main-adjuster) * (8/400));
      margin: calc(var(--main-adjuster) * (8/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      border-radius: calc(var(--main-adjuster) * (16/400));
   }

   .profile-account-item{
      width: calc(50% - calc(var(--main-adjuster) * (8/400)));
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
      border-radius: calc(var(--main-adjuster) * (11/400));
      padding: calc(var(--main-adjuster) * (16/400));
      align-items: start;
      justify-items: start;
   }

   .profile-account-item + .profile-account-item{
      background: #171717;
   }

   .profile-account-title{
      color: #fff;
      width: 100%;
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .profile-account-icon{
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      padding: calc(var(--main-adjuster) * (16/400));
   }

   .profile-account-icon svg{
      width: 90%;
      height: 90%;
   }

   .svg-icon svg{
      stroke: var(--vio);
   }

   .profile-item-name{
      display: inline-block;
      padding: calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (10/400));
      padding-top: calc(var(--main-adjuster) * (5/400));
      width: fit-content;
      border-radius: calc(var(--main-adjuster) * (16/400));
      font-weight: bold;
      text-transform: uppercase;
      white-space: nowrap;
   }

   .profile-item-name.active{
      background: green;
      color: white;
   }

   .profile-item-name.pending{
      background: orange;
      color: black;
   }

   .profile-item-name.payment{
      background: var(--vio);
      color: white;
   }

   .profile-item-name.inactive{
      background: red;
      color: white;
   }

   .profile-item-name.helvetica{
      font-family: "Helvetica";
   }





   .transactions-page-body{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
/*      height: calc(100vh - calc(var(--main-adjuster) * (120/400)));*/
      overflow-y: auto;
      align-content: start;
      padding-bottom: calc(var(--main-adjuster) * (32/400));
   }

   .donations-page-body{
      padding: 0 0 calc(var(--main-adjuster) * (80/400)) 0;
      height: calc(100vh - calc(var(--main-adjuster) * (120/400)));
      overflow-y: auto;
      padding-bottom: calc(var(--main-adjuster) * (48/400));
      align-content: start;
   }

   .public-page-body{
      height: calc(100vh - calc(var(--main-adjuster) * (120/400)));
      overflow-y: auto;
      padding-bottom: calc(var(--main-adjuster) * (48/400));
      padding: calc(var(--main-adjuster) * (8/400));
      padding-top: calc(var(--main-adjuster) * (136/400));
      align-content: start;
   }

   .stats-body-page{
      width: 100%;
   }


   .donator-item{
      width: 100%;
      display: flex;
      justify-content: center;
      padding: calc(var(--main-adjuster) * (12/400)) 0;
      border-top: calc(var(--main-adjuster) * (1/400)) solid #222;
   }

   .donations-page-body .donator-item,
   .payments-page-body .donator-item{
      padding: calc(var(--main-adjuster) * (16/400));
   }

   .payments-page-body .donator-item{
      padding-left: calc(var(--main-adjuster) * (10/400));
   }

   .donator-item .profile-stats-title,
   .payments-page-body .profile-stats-title{
      margin-bottom: calc(var(--main-adjuster) * (0/400));
   }

   .top-purchase-item .profile-stats-title{
      font-size: calc(var(--main-adjuster) * (20/400));
      margin-bottom: calc(var(--main-adjuster) * (2/400));
   }

   .donator-item .profile-stats-title{
      font-size: calc(var(--main-adjuster) * (20/400));
      line-height: .5;
      padding-top: calc(var(--main-adjuster) * (10/400));
   }

   .donator-item i{
      font-size: calc(var(--main-adjuster) * (8/400));
   }

   .payments-page-body .search-item-icon{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
/*      margin-right: calc(var(--main-adjuster) * (5/400));*/
   }

   .payments-page-body .search-item-icon svg{
      width: 100%;
      height: 100%;
   }

   .donator-item .profile-stats-header{
      margin-bottom: 0;
      width: calc(100% - calc(var(--main-adjuster) * (150/400)));
   }

   .donator-item-contribution{
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(var(--main-adjuster) * (120/400));
      height: 100%;
      flex-wrap: wrap;
   }

   .donator-contribution-title{
      color: #fff;
      width: 100%;
      text-align: right;
      font-weight: normal;
      font-family: 'URWRegular';
      white-space: pre;
   }

   .donator-contribution-name{
      width: 100%;
      text-align: right;
      font-size: calc(var(--main-adjuster) * (10/400));
      text-transform: uppercase;
      margin-top: calc(var(--main-adjuster) * (5/400));
      font-family: 'URWRegular';
   }

   .donator-contribution-title sup{
      font-size: calc(var(--main-adjuster) * (10/400));
   }









   .fancy-card{
      width: calc(100% - calc(var(--main-adjuster) * (16/400))) !important;
      margin: calc(var(--main-adjuster) * (8/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: linear-gradient(135deg, grey, black);;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black, inset 0 0 0 calc(var(--main-adjuster) * (500/400)) rgba(0, 0, 0, 0.5);
      align-self: start;
      overflow: hidden;
      height: auto !important;
   }

   .main-page-body .fancy-card{
      margin: 0;
      width: 100% !important;
   }

   .main-page-body.swiper-container{
      margin-top: 0 !important;
/*      margin-bottom: calc(var(--main-adjuster) * (32/400)) !important;*/
   }

   .main-page-body .add-album-item{
      margin-left: calc(var(--main-adjuster) * (24/400));
      width: calc(50vw - calc(var(--main-adjuster) * (16/400)));
      min-width: calc(50vw - calc(var(--main-adjuster) * (16/400)));
   }

   .main-page-body .add-album-item:last-child,
   .main-page-body .artist-item:last-child,
   .main-page-body .podcast-item:last-child,
   .main-page-body .station-item:last-child{
      margin-right: calc(var(--main-adjuster) * (24/400));
   }

   .main-page-body .artist-item{
      margin: calc(var(--main-adjuster) * (8/400));
      margin-right: calc(var(--main-adjuster) * (4/400));
   }

   .main-page-body .station-item{
      margin: calc(var(--main-adjuster) * (16/400));
      margin-right: 0;
   }

   .main-page-body .podcast-item{
      margin: calc(var(--main-adjuster) * (16/400));
      margin-right: 0;
   }

   .fancy-card-header{
      width: 100%;
      display: flex;
      align-items: center;
      padding: calc(var(--main-adjuster) * (16/400));
      padding-bottom: calc(var(--main-adjuster) * (8/400));
      position: relative;
   }

   .fancy-header-badge{
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
      top: calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: #151515;
      font-size: calc(var(--main-adjuster) * (10/400));
      text-transform: uppercase;
      padding: calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (10/400));
      display: flex;
      color: white;
      width: auto;
      max-width: calc(var(--main-adjuster) * (110/400));
      text-align: center;
      justify-content: center;
   }

   .fancy-header-cover{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .fancy-header-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
      margin-right: calc(var(--main-adjuster) * (15/400));
   }

   .fancy-header-details{
      display: flex;
      flex-wrap: wrap;
      width: calc(100% - calc(var(--main-adjuster) * (0/400)));
   }

   .fancy-header-title{
      color: #fff;
      margin-bottom: calc(var(--main-adjuster) * (7/400));
      font-weight: normal;
      max-width: calc(100% - calc(var(--main-adjuster) * (100/400)));
   }

   .fancy-header-name{
      font-size: calc(var(--main-adjuster) * (12/400));
      line-height: 1.45;
   }

   .fancy-card-body{
      height: calc(100vw - calc(var(--main-adjuster) * (48/400)));
      width: 100%;
      border-radius: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (5/400));
   }

   .fancy-card-image{
      border-radius: calc(var(--main-adjuster) * (12/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      width: 100%;
      height: 100%;
   }







   .affiliate-stats-container{
      display: flex;
      flex-wrap: wrap;
   }


   .video-item{
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      margin: calc(var(--main-adjuster) * (8/400));
      position: relative;
   }

   .video-screen{
      width: 100%;
      height: calc(30vw + calc(var(--main-adjuster) * (48/400)));
      border-radius: calc(var(--main-adjuster) * (8/400));
   }

   .video-details{
      padding: calc(var(--main-adjuster) * (4/400));
      align-items: center;
      width: calc(100% - calc(var(--main-adjuster) * (90/400)));
      margin-top: calc(var(--main-adjuster) * (7/400));
      position: absolute;
      bottom: calc(var(--main-adjuster) * (8/400));
      left: calc(var(--main-adjuster) * (8/400));
   }

   .video-details-title{
      color: #fff;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (13.5/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .video-details-name{
      font-size: calc(var(--main-adjuster) * (10.5/400));
      color: #fff;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .video-owner{
      width: calc(var(--main-adjuster) * (30/400));
      height: calc(var(--main-adjuster) * (30/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      position: absolute;
      right: calc(var(--main-adjuster) * (48/400));
      bottom: calc(var(--main-adjuster) * (12/400));
   }

   .video-play-button{
         width: calc(var(--main-adjuster) * (30/400));
         height: calc(var(--main-adjuster) * (30/400));
         border-radius: calc(var(--main-adjuster) * (32/400));
         display: flex;
         align-items: center;
         justify-content: center;
         position: absolute;
         right: calc(50% - calc(var(--main-adjuster) * (15/400)));
         bottom: calc(50% - calc(var(--main-adjuster) * (15/400)));
         right: calc(var(--main-adjuster) * (12/400));
         bottom: calc(var(--main-adjuster) * (12/400));
         border: none;
   }

   .video-badges{
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         display: flex;
         padding: calc(var(--main-adjuster) * (8/400));
   }

   .video-item-badge{
         display: inline-flex;
         align-items: center;
         justify-content: center;
         padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (3/400));
/*         padding-bottom: 0;*/
         border-radius: calc(var(--main-adjuster) * (2/400));
         background: black;
         color: white;
         font-size: calc(var(--main-adjuster) * (10/400));
         font-family: 'Helvetica';
         margin-right: calc(var(--main-adjuster) * (6/400));
         font-style: normal;
         text-transform: uppercase;
         font-weight: bolder;
         line-height: normal;
   }






   .control-top{
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      border-radius: calc(var(--main-adjuster) * (24/400));
      padding: calc(var(--main-adjuster) * (16/400));
      background: #111;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      display: flex;
      margin: calc(var(--main-adjuster) * (8/400));
      flex-wrap: wrap;
   }

   .control-top-title{
      width: 100%;
   }

   .control-top-amount sup{
      font-size: calc(var(--main-adjuster) * (10/400));
      margin-top: calc(var(--main-adjuster) * (-16/400));
   }
   .control-top-amount{
      white-space: nowrap;
      width: 100%;
      font-size: calc(var(--main-adjuster) * (64/400));
      font-family: URWRegular;
      margin: calc(var(--main-adjuster) * (16/400)) 0 calc(var(--main-adjuster) * (12/400)) 0;
      font-style: normal;
      font-weight: normal;
   }

   .control-top-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
   }


   .control-top-text{
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .control-top-button{
      padding: calc(var(--main-adjuster) * (6.5/400)) calc(var(--main-adjuster) * (12/400));
      background: var(--vio);
      margin-left: calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (24/400));
      color: white;
      text-transform: uppercase;
      min-width: fit-content;
   }




   .control-mid{
      display: flex;
      align-items: center;
      width: 100vw;
      padding: calc(var(--main-adjuster) * (16/400)) 0;
      overflow-x: auto;
      white-space: nowrap;
   }

   .control-mid-wallet{
      display: inline-flex;
      flex-wrap: wrap;
      width: calc(var(--main-adjuster) * (260/400));
      min-width: calc(var(--main-adjuster) * (260/400));
      border-radius: calc(var(--main-adjuster) * (24/400));
      background: #111;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      padding: calc(var(--main-adjuster) * (16/400));
      margin: 0 calc(var(--main-adjuster) * (12/400));
   }

   .control-mid-title{
      font-size: calc(var(--main-adjuster) * (16/400));
      position: relative;
      display: flex;
      align-items: center;
   }

   .emola-wallet .control-mid-title::before{
      background: url(../images/emola.png);
      background-position: center;
      background-size: 80%;
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (3/400)) #111, 0 0 0 calc(var(--main-adjuster) * (4/400)) orangered;
   }

   .mkesh-wallet .control-mid-title::before{
      background: url(../images/mkesh.png);
      background-position: center;
      background-size: 80%;
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (3/400)) #111, 0 0 0 calc(var(--main-adjuster) * (4/400)) yellow;
   }

   .card-wallet .control-mid-title::before{
      background: url(../images/card.jpg);
      background-position: center;
      background-size: 150%;
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (3/400)) #111, 0 0 0 calc(var(--main-adjuster) * (4/400)) black;
   }

   .control-mid-title::before{
      content: "";
      display: flex;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      background: #000;
      margin-right: calc(var(--main-adjuster) * (16/400));
      background: url(../images/mpesa.png);
      background-position: center;
      background-size: 80%;
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (3/400)) #111, 0 0 0 calc(var(--main-adjuster) * (4/400)) red;
   }

   .control-mid-title.placeholder-shimmerring::before{
      content: none;
   }

   .control-mid-amount sup{
      font-size: calc(var(--main-adjuster) * (10/400));
   }

   .control-mid-amount{
      white-space: nowrap;
      font-weight: normal;
      font-family: URWRegular;
      text-transform: uppercase;
      margin: calc(var(--main-adjuster) * (24/400)) 0 calc(var(--main-adjuster) * (16/400)) 0;
      width: 100%;
      font-size: calc(var(--main-adjuster) * (48/400));
   }

   .control-mid-bottom{
      display: flex;
      width: 100%;
      align-items: center;
   }


   .control-mid-button{
      border-radius: calc(var(--main-adjuster) * (32/400));
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      background: var(--ceu);
      font-size: calc(var(--main-adjuster) * (16/400));
      text-transform: uppercase;
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .control-mid-button *{
      color: white;
   }

   .control-bottom{
      width: 100%;
      background: #111;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      border-radius: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400)) 0 0;
      margin-top: calc(var(--main-adjuster) * (8/400));
      box-shadow: 0 calc(var(--main-adjuster) * (200/400)) 0 0 #111, 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .control-bottom-header{
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400));
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .control-header-title{
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .control-header-button{
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));;
      border-radius: calc(var(--main-adjuster) * (32/400));
      align-items: center;
      justify-content: center;
      background: var(--ceu);
      font-weight: bold;
      font-size: calc(var(--main-adjuster) * (16/400));
      color: white;
      font-family: Helvetica;
      min-width: fit-content;
   }

   .control-bottom-body{
      padding-bottom: calc(var(--main-adjuster) * (80/400));
   }








   .stats-table-header,
   .stats-table-body{
      width: 100%;
      display: flex;
      align-items: center;
   }

   .stats-table-header{
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .stats-table-header.x{
      margin-bottom: 0;
      padding-top: calc(var(--main-adjuster) * (12/400));
      border-top: calc(var(--main-adjuster) * (1/400)) solid grey;
   }

   .stats-table-header *{
      color: white;
   }

   .stats-header-title{
      width: calc(100% - calc(var(--main-adjuster) * (160/400)));
      font-weight: bold;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (14/400));
   }

   .stats-header-name{
      width: calc(var(--main-adjuster) * (80/400));
      text-align: right;
      font-weight: bold;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (14/400));
   }

   .stats-table-header.x .stats-header-name{
      font-family: URWRegular;
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .stats-table-body{
      margin-bottom: calc(var(--main-adjuster) * (12/400));
   }

   .stats-body-title{
      width: calc(100% - calc(var(--main-adjuster) * (160/400)));

   }

   .stats-body-name{
      width: calc(var(--main-adjuster) * (80/400));
      text-align: right;
      font-family: URWRegular;
   }




   .pop-image{
      position: fixed;
      width: 100vw;
      height: 100vh;
      left: 0;
      top: 0;
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(calc(var(--main-adjuster) * (15/400)));
      overflow: auto;
      max-width: 100vw;
   }

   .pop-image.active{
      display: flex;
   }

   .pop-image-cover{
      width: 100%;
      height: auto;
   }

   .pop-image-cover.active{
      width: 200vw;
   }

   .pop-image-close{
      position: fixed;
      right: calc(var(--main-adjuster) * (16/400));
      top: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (10/400)) calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(var(--main-adjuster) * (16/400));
      text-transform: uppercase;
      color: white;
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
      border: none;
      font-weight: bold;
   }






   .nominee-template{
      width: 100%;
      height: 100vw;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
   }

   .nominee-center{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--item-color);
   }

   .nominee-center-cover{
      width: calc(100vw - calc(var(--main-adjuster) * (140/400)));
      height: calc(100vw - calc(var(--main-adjuster) * (140/400)));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .nominee-center ~ div{
      position: absolute;
      z-index: 1;
   }

   .nominee-center ~ div *{
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .nominee-top{
      top: 0;
      left: 0;
      height: calc(var(--main-adjuster) * (70/400));
      width: 100%;
      text-align-last: center;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .nominee-top-text{
      text-transform: uppercase;
      /*writing-mode: vertical-rl;*/
      /*text-orientation: mixed;*/
   }

   .nominee-left{
      top: calc(var(--main-adjuster) * (70/400));
      left: 0;
      width: calc(var(--main-adjuster) * (70/400));
      height: calc(100% - calc(var(--main-adjuster) * (140/400)));
   }

   .nominee-bottom{
      bottom: 0;
      left: 0;
      height: calc(var(--main-adjuster) * (70/400));
      width: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      align-content: center;
   }

   .nominee-bottom-title{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (20/400));
      margin-bottom: calc(var(--main-adjuster) * (4/400));
   }

   .nominee-bottom-name{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .nominee-right{
      top: calc(var(--main-adjuster) * (70/400));
      right: 0;
      width: calc(var(--main-adjuster) * (70/400));
      height: calc(100% - calc(var(--main-adjuster) * (140/400)));
   }




   .monoton-regular {
     font-family: "Monoton", sans-serif;
     font-weight: 400;
     font-style: normal;
   }



   .lyrics-display{
      z-index: 4 !important;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(0deg, black, var(--thumb-color), black);
      align-content: start;
   }

   .lyrics-display-header{
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
      flex-wrap: wrap;
      position: absolute;
      top: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (60/400));
      background: linear-gradient(0deg, transparent, #000);
   }

   .lyrics-display-header .play-button svg,
   .lyrics-display-header .play-button.playing .pause-icon{
      display: flex !important;
      position: relative;
   }

   .lyrics-display-header .play-button.playing .pause-icon:after,
   .lyrics-display-header .play-button.playing .pause-icon:before{
      background: white;
      height: calc(var(--main-adjuster) * (18/400));
      margin: 0 calc(var(--main-adjuster) * (3/400));
   }

   .lyrics-display-header .play-button.playing svg,
   .lyrics-display-header .play-button .pause-icon{
      display: none !important;
      position: relative;
   }

   .lyrics-display-body{
      padding: calc(var(--main-adjuster) * (16/400));
      height: 100%;
      width: 100%;
      font-size: calc(var(--main-adjuster) * (24/400));
      overflow-y: auto;
      padding: calc(var(--main-adjuster) * (64/400)) calc(var(--main-adjuster) * (16/400));
      text-shadow: calc(var(--main-adjuster) * (.5/400)) calc(var(--main-adjuster) * (.5/400)) black;
      align-items: center;
      justify-content: center;
      text-align: center;
      word-break: break-word;
   }

   .lyrics-display-body p{
      color: gray;
      margin: calc(var(--main-adjuster) * (24/400)) auto;
   }

   .lyrics-display-body p.active{
      font-size: calc(var(--main-adjuster) * (40/400));
      color: white;
      line-height: 1.2;
   }

   .lyrics-display-footer{
      display: flex;
      padding: calc(var(--main-adjuster) * (16/400));
      position: absolute;
      bottom: 0;
      width: 100%;
      justify-content: start;
      background: linear-gradient(180deg, transparent, #000);
   }


   .display-footer-cover{
      height: calc(var(--main-adjuster) * (40/400));
      width: calc(var(--main-adjuster) * (40/400));
      overflow: hidden;
      border-radius: calc(var(--main-adjuster) * (5/400));
   }

   .display-footer-image{
      width: 100%;
      height: 100%;
   }

   .display-footer-details{
      display: flex;
      width: calc(100% - calc(var(--main-adjuster) * (100/400)));
      flex-wrap: wrap;
      margin-left: calc(var(--main-adjuster) * (10/400));
   }


   .lyrics-header-title{
      color: white;
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (7/400));
      font-size: calc(var(--main-adjuster) * (18/400));
   }

   .lyrics-header-name{
      color: white;
      font-size: calc(var(--main-adjuster) * (10.5/400));
   }







   .content-option{
      height: calc(var(--main-adjuster) * (170/400));
      margin: calc(var(--main-adjuster) * (8/400));
      overflow: hidden;
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .content-option-cover{
      width: 100%;
      height: 100%;
      padding: calc(var(--main-adjuster) * (8/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
   }

   .content-option-image{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: calc(var(--main-adjuster) * (8/400));
   }

   .content-option-title{
      z-index: 1;
      padding-top: calc(var(--main-adjuster) * (8/400));
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      color: white;
      display: flex;
      font-size: calc(var(--main-adjuster) * (41.5/400));
      position: absolute;
      text-align: center;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      mix-blend-mode: difference;
   }









   .gallery-content .add-album-item{
      margin-bottom: calc(var(--main-adjuster) * (20/400));
      margin-top: calc(var(--main-adjuster) * (32/400));
      margin-right: calc(var(--main-adjuster) * (16/400));
      min-width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
      width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
   }

   .gallery-content .add-album-item:nth-child(2n+1) {
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .gallery-content .add-album-item.album-element::after{
      top: calc(50vw - calc(var(--main-adjuster) * (58/400)));
   }

   .gallery-content .add-album-cover{
      height: calc(50vw - calc(var(--main-adjuster) * (32/400)));
   }



   .specific-page-body .album-item,
   .gallery-content .album-item,
   .preview-content .album-item{
      margin-bottom: calc(var(--main-adjuster) * (18/400));
      min-width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
      width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
      height: calc(70vw - calc(var(--main-adjuster) * (32/400)));
   }

   .gallery-content .album-item:nth-child(2n+1) {
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .preview-content .album-item:nth-child(2n+1),
   .specific-page-body .album-item:nth-child(2n+1) {
      margin-left: calc(var(--main-adjuster) * (0/400));
   }

   .gallery-content .album-cover{
   }










   .professional-categories{
      width: 100%;
      display: flex;
      overflow-x: auto;
      align-items: center;
      margin-top: calc(var(--main-adjuster) * (24/400));
      padding: calc(var(--main-adjuster) * (10/400)) 0;
   }

   .professional-categories ~ .content-about{
      margin-top: 0;
   }

   .professional-category-item{
      border: calc(var(--main-adjuster) * (1.5/400)) solid var(--color);
      margin-left: calc(var(--main-adjuster) * (16/400));
      min-width: fit-content;
      padding: calc(var(--main-adjuster) * (6.5/400)) calc(var(--main-adjuster) * (12/400));
      padding-bottom: calc(var(--main-adjuster) * (6/400));
      border-radius: calc(var(--main-adjuster) * (8/400));
      position: relative;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      background: #171717;
   }

   .professional-category-item.limit ~ .professional-category-item{
      display: none;
   }

   .professional-category-item.active,
   .professional-category-item:hover{
      background: var(--color);
      animation: shake-animation 5s ease running;
      transform-origin: 50% 50%;
   }

   .professional-category-item:after,
   .professional-category-item:before{
      content: "";
      position: absolute;
      width: 50%;
      display: flex;
      height: 100%;
      background: var(--color);
      z-index: -1;
      border-radius: calc(var(--main-adjuster) * (8/400));
   }


   .professional-category-item:after{
      left: calc(var(--main-adjuster) * (-3/400));
      top: calc(var(--main-adjuster) * (-3/400));
   }

   .professional-category-item:before{
      right: calc(var(--main-adjuster) * (-3/400));
      bottom: calc(var(--main-adjuster) * (-3/400));
   }

   .professional-category-item:hover:after{
      left: calc(var(--main-adjuster) * (-2/400));
      top: calc(var(--main-adjuster) * (-2/400));
   }

   .professional-category-item:hover:before{
      right: calc(var(--main-adjuster) * (-2/400));
      bottom: calc(var(--main-adjuster) * (-2/400));
   }


   .professional-category-item:nth-child(1) {
      --color: var(--ceu);
      margin-left: calc(var(--main-adjuster) * (16/400));
   }

   .professional-category-item:nth-child(2) {
      --color: var(--vio);
   }

   .professional-category-item:nth-child(3) {
      --color: var(--roxo);
   }

   .professional-category-item:nth-child(4) {
      --color: var(--rosa);
   }

   .professional-category-item:last-child {
      --color: var(--ver);
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .professional-category-title{
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) var(--color);
      min-width: fit-content;
      padding-top: calc(var(--main-adjuster) * (1/400));
   }











   .lyrics-speed-container{
      width: calc(var(--main-adjuster) * (70/400));
      height: calc(var(--main-adjuster) * (70/400));
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .lyrics-speed-button{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      z-index: 1;
   }

   .lyrics-speed-options{
      position: absolute;
      bottom: 100%;
      width: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      padding: 0;
      display: none;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (12/400)) 0;
      background: rgba(0, 0, 0, 0.5);
   }

   .lyrics-speed-button.active ~ .lyrics-speed-options{
      display: flex;
   }

   .lyrics-speed-option{
      list-style: none;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      height: calc(var(--main-adjuster) * (40/400));
      font-size: calc(var(--main-adjuster) * (12/400));
      font-family: "helvetica";
      justify-content: center;
      color: white;
   }

   .lyrics-speed-option:first-child{
      
   }

   .lyrics-speed-option:last-child{

   }

   .lyrics-speed-option.active{
      color: var(--ceu);
      font-weight: bolder;
      font-size: .8rewm;
   }












   .lyrics-studio-body{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow-y: auto;
      padding: calc(var(--main-adjuster) * (80/400)) calc(var(--main-adjuster) * (8/400));
      padding-bottom: calc(var(--main-adjuster) * (96/400));
      flex-wrap: wrap;
      scroll-behavior: smooth;
   }

   .lyrics-card{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (16/400));
      flex-wrap: wrap;
      border-radius: calc(var(--main-adjuster) * (16/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      transition: .5s;
   }

   .lyrics-card.active{
      background: #101010;
   }

   .lyrics-card-header{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin-bottom: calc(var(--main-adjuster) * (8/400));
   }

   .lyrics-header-time{
      font-family: Helvetica;
   }

   .lyrics-header-time.active{
      color: var(--vio);
   }

   .lyrics-audio-adjuster{
      width: 100%;
      height: calc(var(--main-adjuster) * (2/400));
      display: none;
      margin: calc(var(--main-adjuster) * (16/400)) 0;
   }

   .lyrics-header-time.active ~ .lyrics-audio-adjuster{
      display: flex;
   }

   .lyrics-header-button{
      padding: 0;
      border-radius: calc(var(--main-adjuster) * (16/400));
      width: calc(var(--main-adjuster) * (30/400));
      height: calc(var(--main-adjuster) * (30/400));
      background: transparent;
   }

   .lyrics-header-button *{
      color: white;
   }

   .lyrics-header-time{

   }

   .lyrics-card-body{
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400));
      min-width: 100%;
      font-size: calc(var(--main-adjuster) * (16/400));
      overflow-y: auto;
      min-height: fit-content;
      background: #101010;
      border-radius: calc(var(--main-adjuster) * (12/400));
      border-bottom-right-radius: 0;
   }

   .lyrics-card-footer{
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: calc(var(--main-adjuster) * (16/400));
      justify-content: space-between;
   }

   .lyrics-card-footer button{
      padding: 0;
      display: flex;
      align-items: center;
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: transparent;
      justify-content: center;
   }

   .lyrics-card-play{
      padding: 0;
   }

   .lyrics-card-play .pause-icon{
      display: none;
      position: relative;
   }

   .lyrics-card-play .pause-icon::after,
   .lyrics-card-play .pause-icon::before{
      width: calc(var(--main-adjuster) * (3/400));
      height: calc(var(--main-adjuster) * (18/400));
   }

   .lyrics-card-play .pause-icon:after,
   .lyrics-card-play .pause-icon:before{
      background: white;
   }

   .lyrics-card-play.playing .pause-icon ~ svg{
      display: none;
   }

   .lyrics-card-play.playing .pause-icon{
      display: flex;
   }

   .lyrics-card-progress{
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
   }

   .lyrics-card-count{
      font-family: Helvetica;
      font-size: calc(var(--main-adjuster) * (12/400));
      margin-bottom: calc(var(--main-adjuster) * (4/400));
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-16/400));
   }

   .lyrics-progress-line{
      width: 100%;
      height: calc(var(--main-adjuster) * (2/400));
      border-radius: calc(var(--main-adjuster) * (2/400));
      background: #007eff;
      float: left;
      position: absolute;
      left: 0;
   }

   .lyrics-card-progress:after{
      left: 0;
      content: "";
      height: calc(var(--main-adjuster) * (2/400));
      width: 100%;
      display: flex;
      position: absolute;
      background: #101010;
      z-index: -1;
   }

   .lyrics-card-delete{

   }

   .lyrics-card-delete *{
      color: white;
   }


   .lyrics-studio-footer{
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      height: calc(var(--main-adjuster) * (80/400));
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 calc(var(--main-adjuster) * (20/400));
      box-shadow: 0 calc(var(--main-adjuster) * (30/400)) 0 calc(var(--main-adjuster) * (20/400)) black;
      background: linear-gradient(0deg, black, transparent);
   }

   .lyrics-audio-progress{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (1/400));
   }

   .lyrics-audio-progress:after{
      content: attr(start);
      position: absolute;
      left: calc(var(--main-adjuster) * (4/400));
      bottom: calc(var(--main-adjuster) * (8/400));
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Helvetica;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .lyrics-audio-progress:before{
      content: attr(end);
      position: absolute;
      right: calc(var(--main-adjuster) * (4/400));
      bottom: calc(var(--main-adjuster) * (8/400));
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Helvetica;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .lyrics-footer-button{
      background: transparent;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .lyrics-footer-button *{
      color: white;
   }

   .lyrics-footer-button::before{
      content: attr(name);
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-10/400));
      width: 100%;
      min-width: fit-content;
      left: calc(var(--main-adjuster) * (0/400));
      display: flex;
      justify-content: center;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (8/400));
      white-space: nowrap;
      color: white;
   }

   .play-lyrics:before{
      left: 50%;
      transform: translateX(-50%);
      color: #007eff;
      font-family: Helvetica;
      font-weight: bold;
      font-size: calc(var(--main-adjuster) * (12/400));
   }

   .play-lyrics .pause-icon:after,
   .play-lyrics .pause-icon:before{
      background: white;
   }

   .play-lyrics .pause-icon,
   .play-lyrics.playing .pause-icon ~ svg{
      display: none;
   }

   .play-lyrics.playing .pause-icon{
      display: flex;
   }

   .lyrics-table{
      min-height: calc(100vh - calc(var(--main-adjuster) * (80/400)));
      padding: 0;
      display: block;
   }

   .lyrics-table p{
      line-height: 1.5;
      font-size: calc(var(--main-adjuster) * (20/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (8/400));
      margin: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (8/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .lyrics-table p.active{
      color: white;
      font-weight: bold;
      background: #007eff;
   }

   .lyrics-table p.identify-last{
      color: white;
   }

   .lyrics-textarea{
      width: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      min-height: calc(100vh - calc(var(--main-adjuster) * (80/400)));
      line-height: 1.5;
      font-size: calc(var(--main-adjuster) * (20/400));
      background: transparent;
   }

   .delete-lyrics .common-header-button.clear-button svg:last-child,
   .save-selection .common-header-button.clear-button svg:first-child{
      display: none;
   }

   .save-selection .common-header-button.clear-button svg:last-child,
   .delete-lyrics .common-header-button.clear-button svg:first-child{
      display: flex;
   }



   .social-link-tree{
      display: flex;
      width: 100%;
      padding: calc(var(--main-adjuster) * (8/400)) 0;
      padding-bottom: calc(var(--main-adjuster) * (16/400));
      position: relative;
      align-items: center;
      justify-content: center;
   }

   .social-link-item{
      padding: 0;
      position: relative;
      width: fit-content;
      height: fit-content;
      background: transparent;
      margin: 0 calc(var(--main-adjuster) * (8/400));
      display: flex;
      width: calc(var(--main-adjuster) * (45/400));
      height: calc(var(--main-adjuster) * (45/400));
      align-items: center;
      justify-content: center;
   }

   .social-link-item::before{
      display: flex;
      content: attr(data-name);
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-16/400));
      font-size: calc(var(--main-adjuster) * (8/400));
      text-transform: uppercase;
      text-align: center;
      word-break: keep-all;
      white-space: nowrap;
      color: white;
      width: fit-content;
   }

   @keyframes placeHolderShimmer{
       0%{
           background-position: calc(var(--main-adjuster) * (-468/400)) 0
       }
       100%{
           background-position: calc(var(--main-adjuster) * (468/400)) 0
       }
   }

   .placeholder-shimmer,
   .placeholder-shimmerring{
       animation-duration: 2s;
       animation-fill-mode: forwards;
       animation-iteration-count: infinite;
       animation-name: placeHolderShimmer;
       animation-timing-function: linear;
       background: #121212;
       background: linear-gradient(to right, #121212 8%, #222 18%, #121212 33%);
       background-size: calc(var(--main-adjuster) * (1000/400)) calc(var(--main-adjuster) * (104/400));
       border-radius: calc(var(--main-adjuster) * (10/400));
       color: transparent !important;
       text-shadow: none !important;
   }
   
   .placeholder-shimmer.element-influence,
   .placeholder-shimmerring.element-influence{
      background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 8%, #222 18%, rgba(0, 0, 0, 0.2) 33%);
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
   }

   .placeholder-shimmer *,
   .placeholder-shimmerring *{
      visibility: hidden;
   }



   .discover-menu{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (60/400));
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .discover-page-menu{
      width: calc(100%/5);
      z-index: 9;
      display: flex;
      position: relative;
      align-items: center;
      background: transparent;
      justify-content: center;
      transform: scale(.9);
   }

   .discover-page-menu::before{
      content: attr(name);
      position: absolute;
      bottom: calc(var(--main-adjuster) * (-13/400));
      width: 100%;
      min-width: fit-content;
      left: calc(var(--main-adjuster) * (0/400));
      display: flex;
      justify-content: center;
      text-transform: uppercase;
      font-size: calc(var(--main-adjuster) * (8/400));
      white-space: nowrap;
      color: white;
   }

   .discover-page-menu:nth-child(5)::before{
      bottom: calc(var(--main-adjuster) * (-11/400));
   }

   .discover-page-menu:nth-child(3)::before{
      bottom: calc(var(--main-adjuster) * (-11/400));
   }

   .discover-page-menu svg{
      filter: box-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (2/400)) black);
   }


   .discover-content{
      /*position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      background: #171717;
      z-index: 1;*/
   }

   .explore-content{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .explore-container{
      display: flex;
      width: 100%;
      height: 100%;
      padding: 0;
   }

   .explore-footer{
      display: none;
   }




   .explore-content-item{
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--item-color);
   }

   .explore-content-item:after{
      content: "";
      width: 100%;
      height: 100%;
      display: flex;
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.5);
   }

   .explore-content-center{
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      height: calc(100% - calc(var(--main-adjuster) * (16/400)));
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: calc(var(--main-adjuster) * (8/400));
      top: calc(var(--main-adjuster) * (8/400));
      border-radius: 0 0 calc(var(--main-adjuster) * (35/400)) calc(var(--main-adjuster) * (35/400));
      overflow: hidden;
   }

   .explore-content-center::before{
      width: 100%;
      height: 100%;
      content: "";
      display: flex;
      border-radius: inherit;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.25);
   }

   .explore-content-cover{
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 0;
   }

   .explore-content-image{
      width: 100%;
      height: 100%;
      border-radius: 0;
   }

   .explore-content-animation{
      position: absolute;
      z-index: 4;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      pointer-events: none;
      justify-content: center;
   }

   .explore-content-animation svg,
   .explore-content-animation img{
      display: none;
   }

   .explore-content-item.playing-slide .explore-content-animation svg{
      display: flex;
   }

   .explore-content-item.buffering-slide .explore-content-animation svg{
      display: none;
   }

   .explore-content-item.buffering-slide .explore-content-animation img{
      display: flex;
   }

   .explore-action-bar{
      position: absolute;
      right: calc(var(--main-adjuster) * (8/400));
      bottom: calc(var(--main-adjuster) * (80/400));
      display: flex;
      flex-wrap: wrap;
      width: calc(var(--main-adjuster) * (50/400));
      z-index: 2;
   }

   .explore-action-bar svg{
      filter: drop-shadow(calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black);
   }

   .explore-action-button{
      border: none;
      margin-bottom: calc(var(--main-adjuster) * (20/400));
      background: transparent;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
   }

   .explore-action-like.active svg{
      fill: red;
   }

   .explore-action-like.active svg path:nth-child(1){
      stroke: red;
   }

   .explore-content-details{
      position: absolute;
      bottom: calc(var(--main-adjuster) * (16/400));
      left: calc(var(--main-adjuster) * (16/400));
      width: calc(100% - calc(var(--main-adjuster) * (32/400)));
      display: flex;
      padding: calc(var(--main-adjuster) * (8/400));
      z-index: 2;
      align-items: center;
      backdrop-filter: blur(calc(var(--main-adjuster) * (20/400)));
      border-radius: calc(var(--main-adjuster) * (32/400));
      background: rgba(0, 0, 0, 0.25);
   }

   .explore-details-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      margin-right: calc(var(--main-adjuster) * (14/400));
      border-radius: calc(var(--main-adjuster) * (20/400));
      overflow: hidden;
   }

   .explore-details-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .explore-details-data{
      display: flex;
      flex-wrap: wrap;
      padding-top: calc(var(--main-adjuster) * (2/400));
      width: calc(100% - calc(var(--main-adjuster) * (66/400)));
   }

   .explore-details-title{
      width: calc(100% - calc(var(--main-adjuster) * (50/400)));
      color: white;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (16/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .explore-details-name{
      color: white;
      width: calc(100% - calc(var(--main-adjuster) * (50/400)));
      font-size: calc(var(--main-adjuster) * (12/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .explore-play-button{
      position: absolute;
      right: calc(var(--main-adjuster) * (6/400));
      bottom: calc(var(--main-adjuster) * (3/400));
      display: flex;
      z-index: 4;
      border: none;
      background: transparent;
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      align-items: center;
      justify-content: center;
   }



   


   .subscription-options{
      margin: calc(var(--main-adjuster) * (4/400)) 0; 
      display: none; 
      overflow-x: auto; 
      flex-wrap: nowrap; 
      padding: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (0/400));
      padding-top: calc(var(--main-adjuster) * (24/400));
      align-items: start;
      padding-right: calc(var(--main-adjuster) * (16/400));
      justify-content: space-between; 
   }

   .main-page-header.active ~ .subscription-options{
      display: flex;
   }

   .subscription-option{
      margin-left: calc(var(--main-adjuster) * (16/400)); 
      min-width: calc(50vw - calc(var(--main-adjuster) * (8/400))); 
      width: calc(50vw - calc(var(--main-adjuster) * (8/400))); 
      margin-bottom: 0;
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      border-radius: calc(var(--main-adjuster) * (16/400));
      padding: calc(var(--main-adjuster) * (16/400));
      display: flex;
      flex-wrap: wrap;
      position: relative;
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .subscription-option.active::after{
      content: "";
      position: absolute;
      width: calc(100% - calc(var(--main-adjuster) * (0/400)));
      height: calc(100% - calc(var(--main-adjuster) * (0/400)));
      left: calc(var(--main-adjuster) * (0/400));
      top: calc(var(--main-adjuster) * (0/400));
      border: calc(var(--main-adjuster) * (1/400)) solid var(--box-shad);
      border-radius: calc(var(--main-adjuster) * (12/400));
      z-index: 0;
   }

   .subscription-option.recommend-plan::before{
      top: calc(var(--main-adjuster) * (-10/400));
      left: calc(50%);
      transform: translateX(-50%);
      z-index: 2;
      color: white;
      border-radius: calc(var(--main-adjuster) * (4/400));
      height: fit-content;
      width: fit-content;
      display: flex;
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (5.5/400));
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu)) !important;
      position: absolute;
      font-size: calc(var(--main-adjuster) * (12/400));
      font-weight: bolder;
/*      content: "Popular";*/
      text-transform: uppercase;
   }

   .premium-tag{
     position: absolute;
         overflow: hidden;
    width: calc(var(--main-adjuster) * (120/400));
    height: calc(var(--main-adjuster) * (120/400));
    top: calc(var(--main-adjuster) * (-10/400));
    left: calc(var(--main-adjuster) * (-10/400));
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1;
   }

   .premium-tag::before{
     content: 'Recomendado';
     position: absolute;
     width: 140%;
     height: calc(var(--main-adjuster) * (30/400));
     background-image: linear-gradient(45deg, var(--ceu) 0%, var(--vio)  51%, var(--ceu)  100%);
     transform: rotate(-45deg) translateY(calc(var(--main-adjuster) * (-20/400)));
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 600;
     font-size: calc(var(--main-adjuster) * (14/400));
     padding-top: calc(var(--main-adjuster) * (2/400));
     text-transform: uppercase;
     box-shadow: 0 calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (10/400)) rgba(0,0,0,0.23);
   }

   .premium-tag::after{
     content: '';
     position: absolute;
     width: calc(var(--main-adjuster) * (10/400));
     bottom: calc(var(--main-adjuster) * (6/400));
     left: 0;
     height: calc(var(--main-adjuster) * (10/400));
     z-index: -1;
     box-shadow: calc(var(--main-adjuster) * (104/400)) calc(var(--main-adjuster) * (-104/400)) var(--vio);
     background: var(--vio);
   }

   .subscription-option:last-child{
      /*margin-right: calc(var(--main-adjuster) * (32/400));*/
   }

   .subscription-option-title{
      padding: calc(var(--main-adjuster) * (12/400));
      padding-bottom: calc(var(--main-adjuster) * (9/400));
      border-radius: calc(var(--main-adjuster) * (8/400));
      background: red;
      display: flex;
      color: white;
      font-size: calc(var(--main-adjuster) * (20/400));
      align-items: center;
      justify-content: center;
   }

   .subscription-option-title svg{
      position: relative;
      margin-left: calc(var(--main-adjuster) * (10/400));
      bottom: calc(var(--main-adjuster) * (4/400));
   }

   .subscription-option:first-child .subscription-option-title{
      background: var(--ceu);
   }

   .subscription-option:nth-child(2) .subscription-option-title{
      background: linear-gradient(45deg, #fac910, #f37227);
   }

   .subscription-option-price{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (32/400));
      display: flex;
      justify-content: center;
      padding: calc(var(--main-adjuster) * (16/400)) 0;
      padding-top: calc(var(--main-adjuster) * (24/400));
      color: white;
   }

   .subscription-option-price sub{
      font-size: calc(var(--main-adjuster) * (10/400));
   }

   .subscription-option-list{
      width: 100%;
      padding: 0;
/*      list-style: none;*/
   }

   .subscription-list-item{
      color: white;
      text-left: center;
      margin-bottom: calc(var(--main-adjuster) * (12/400));
      padding-left: calc(var(--main-adjuster) * (8/400));
      margin-left: calc(var(--main-adjuster) * (8/400));
      font-size: calc(var(--main-adjuster) * (13/400));
      text-decoration: line-through;
      text-decoration-color: red;
   }

   .subscription-list-item::marker{
      content: "✘";
      color: red;
   }

   .subscription-list-item.active::marker{
      content: "✔";
      color: green;
   }

   .subscription-list-item.active{
      text-decoration: none;
   }

   .streaming-plans-button{
      position: absolute;
      right: calc(var(--main-adjuster) * (16/400));
      top: calc(var(--main-adjuster) * (10/400));
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
   }

   .active > .streaming-plans-button{
/*      top: calc(var(--main-adjuster) * (16/400));*/
   }

   .streaming-plans-button *{
      color: white;
   }

   .streaming-plans-button img{
      width: 100%;
      height: 100%;
   }


   .mastercard-modal{
      position: fixed;
      display: none;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99;
      left: 0;
      top: 0;
   }

   .mastercard-modal.active{
      display: flex;
   }

   .matercard-iframe{
      width: 100%;
      height: calc(var(--main-adjuster) * (200/400));
      display: flex;
      background: #171717;
   }











   .creators-suggestions{
      width: calc(100% - calc(var(--main-adjuster) * (32/400)));
      margin: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
      background: #101010;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      padding: calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
   }

   .creators-suggestions-top{
      width: 100%;
      height: calc(var(--main-adjuster) * (100/400));
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
   }

   .creators-suggestions-cover{
      width: calc(var(--main-adjuster) * (100/400));
      height: calc(var(--main-adjuster) * (100/400));
      border-radius: 5rem;
      position: absolute;;
      z-index: 2;
      border: calc(var(--main-adjuster) * (4/400)) solid #101010;
   }

   .creators-suggestions-cover.suggestions-last{
      width: calc(var(--main-adjuster) * (60/400));
      height: calc(var(--main-adjuster) * (60/400));
      z-index: 0;
   }

   .creators-suggestions-cover.suggestions-middle{
      width: calc(var(--main-adjuster) * (80/400));
      height: calc(var(--main-adjuster) * (80/400));
      z-index: 1;
   }

   .creators-suggestions-image{
      width: 100%;
      height: 100%;
      border-radius: 5rem;
   }

   .creators-suggestions-middle{
      width: 100%;
      margin: calc(var(--main-adjuster) * (18/400)) 0;
      text-align: center;
   }

   .creators-suggestions-bottom{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .creators-suggestions-cover.suggestions-last:nth-child(1){
      left: 10%;
   }

   .creators-suggestions-cover.suggestions-middle:nth-child(2){
      left: 20%;
   }

   .creators-suggestions-cover.suggestions-last:nth-child(5){
      right: 10%;
   }

   .creators-suggestions-cover.suggestions-middle:nth-child(4){
      right: 20%;
   }


   .creators-suggestions-button{
      display: flex;
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (12/400));
      padding-top: calc(var(--main-adjuster) * (8/400));
      font-weight: bolder;
      border-radius: calc(var(--main-adjuster) * (20/400));
      align-items: center;
      font-size: .75rem;
      justify-content: center;
      background: rgba(0, 0, 0, 0.5);
   }




   .scrollable-lists{
      width: 100%;
      display: flex;
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .scrollable-lists-container{
      width: 100%;
      display: flex;
      overflow-x: auto;
      padding: 0 calc(var(--main-adjuster) * (8/400));
   }

   .scrollable-item{
      margin: calc(var(--main-adjuster) * (8/400));
      padding: 0;
      height: calc(var(--main-adjuster) * (410/400));
      overflow: hidden;
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      width: calc(100vw - calc(var(--main-adjuster) * (70/400)));
      --item-color: var(--sap2);
      background: linear-gradient(45deg, #000, var(--item-color));
   }  

   .scrollable-item:nth-child(2){
      --item-color: var(--vimeo);
   }

   .scrollable-item:last-child{
      --item-color: var(--vio);
   }

   .scrollable-item:first-child{
      --item-color: var(--goo2);
   }


   .scrollable-lists-header{
      top: 0;
      left: 0;
      width: 100%;
      height: calc(var(--main-adjuster) * (70/400));
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      position: absolute;
      align-items: center;
      z-index: 1;
      justify-content: space-between;
      background: linear-gradient(0deg, transparent, var(--item-color), var(--item-color));
   }

   .scrollable-lists-header:before{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: none;
      content: "";
      -webkit-mask: linear-gradient(180deg, #000, #000, transparent);
       mask: linear-gradient(180deg, #000, #000, transparent);
       backdrop-filter: blur(calc(var(--main-adjuster) * (8/400)));
       -webkit-backdrop-filter: blur(calc(var(--main-adjuster) * (8/400)));
       z-index: 0;
   }

   .scrollable-header-title{
      color: white;
      max-width: 80%;
      font-size: calc(var(--main-adjuster) * (24/400));
      padding-top: calc(var(--main-adjuster) * (5/400));
      width: fit-content;
      position: relative;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
      z-index: 1;
   }

   .scrollable-header-button{
      color: white;
      padding: calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (8/400));
      background: rgba(0, 0, 0, 0.9);
      border-radius: calc(var(--main-adjuster) * (5/400));
      line-height: normal;
      font-weight: bolder;
      font-family: Raleway;
      text-transform: uppercase;
      position: relative;
      z-index: 1;
      white-space: pre;
      font-size: calc(var(--main-adjuster) * (14/400));
   }

   .scrollable-lists-body{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      align-items: flex-start;
      align-content: flex-start;
      height: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      padding-top: calc(var(--main-adjuster) * (60/400));
      padding-bottom: calc(var(--main-adjuster) * (20/400));
   }








   .scrollable-lists-item{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (8/400)) 0;
      position: relative;
   }

   .scrollable-lists-item:nth-child(7) {
      display: none;
   }

   .scrollable-lists-position{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: none;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
   }

   .scrollable-lists-position.active{
      display: flex;
   }

   .scrollable-lists-position.active ~ .scrollable-lists-cover{
      display: none;
   }

   .scrollable-lists-number{
      color: white;
      font-size: calc(var(--main-adjuster) * (30/400));
      font-weight: bolder;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .scrollable-lists-caption{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (8/400));
      text-align: center;
      text-transform: uppercase;
   }

   .scrollable-lists-caption::after{
      content: "";
      font-size: calc(var(--main-adjuster) * (9/400));
      margin-left: calc(var(--main-adjuster) * (3/400));
      margin-bottom: calc(var(--main-adjuster) * (-1/400));
      display: inline-flex;
   }

   .scrollable-lists-caption.down-to::after{
      content: "▼";
      color: red;
   }

   .scrollable-lists-caption.up-to::after{
      content: "▲";
      color: green;
   }

   .scrollable-lists-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
   }

   .scrollable-lists-cover.active{
      display: flex !important;
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .scrollable-lists-cover.active ~ .scrollable-lists-details{
      width: calc(100% - calc(var(--main-adjuster) * (140/400)));
   }

   .scrollable-lists-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .scrollable-lists-details{
      padding-top: calc(var(--main-adjuster) * (2/400));
      margin-left: calc(var(--main-adjuster) * (15/400));
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
   }

   .scrollable-lists-title{
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (6/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .scrollable-lists-name{
      font-size: calc(var(--main-adjuster) * (13/400));
      color: #ccc;
   }






   .genre-suggestions{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (8/400));
      flex-wrap: wrap;
   }

   .genre-suggestion-item{
      margin: calc(var(--main-adjuster) * (8/400));
/*       padding: calc(var(--main-adjuster) * (16/400));*/
      height: calc(var(--main-adjuster) * (70/400));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (8/400));
      align-items: center;
      justify-content: center;
      width: calc(50% - calc(var(--main-adjuster) * (16/400)));
   }

   .genre-suggestion-title{
      z-index: 1;
      color: black;
      max-width: 100%;
      font-size: calc(var(--main-adjuster) * (16/400));
      width: fit-content;
      font-weight: bolder;
      line-height: normal;
      text-orientation: mixed;
      text-transform: uppercase;
      font-family: "Monoton", sans-serif;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) #eb452b, calc(calc(var(--main-adjuster) * (10/400)) / 5) calc(calc(var(--main-adjuster) * (10/400)) / 5) calc(var(--main-adjuster) * (0/400)) #efa032, calc(calc(var(--main-adjuster) * (15/400)) / 5) calc(calc(var(--main-adjuster) * (15/400)) / 5) calc(var(--main-adjuster) * (0/400)) #46b59b, calc(calc(var(--main-adjuster) * (20/400)) / 5) calc(calc(var(--main-adjuster) * (20/400)) / 5) calc(var(--main-adjuster) * (0/400)) #017e7f, calc(calc(var(--main-adjuster) * (25/400)) / 5) calc(calc(var(--main-adjuster) * (25/400)) / 5) calc(var(--main-adjuster) * (0/400)) #052939, calc(calc(var(--main-adjuster) * (30/400)) / 5) calc(calc(var(--main-adjuster) * (30/400)) / 5) calc(var(--main-adjuster) * (0/400)) #c11a2b, calc(calc(var(--main-adjuster) * (35/400)) / 5) calc(calc(var(--main-adjuster) * (35/400)) / 5) calc(var(--main-adjuster) * (0/400)) #c11a2b;
   }


   .pick-suggestions-body .genre-suggestion-item{
      padding: calc(var(--main-adjuster) * (5/400));
   }

   .pick-suggestions-body .genre-suggestion-title{
         font-size: calc(var(--main-adjuster) * (14/400));
         text-align: center;
   }


   .chart-suggestions{
      width: 100%;
      display: flex;
      overflow-x: auto;
      padding-left: calc(var(--main-adjuster) * (16/400));
   }

   .chart-suggestion-item {
       width: calc(var(--main-adjuster) * (160/400));
       display: flex;
      margin-top: calc(var(--main-adjuster) * (16/400));
       margin-right: calc(var(--main-adjuster) * (20/400));
   }

   .chart-suggestion-container {
       display: flex;
       flex-direction: column;
       width: 100%;
       height: 100%;
   }

   .chart-suggestion-top {
       display: flex;
       width: calc(var(--main-adjuster) * (160/400));
       height: calc(var(--main-adjuster) * (120/400));
       position: relative;
       perspective: calc(var(--main-adjuster) * (1000/400));
   }

   .chart-suggestion-cover {
       display: flex;
       width: 100%;
       height: 100%;
       position: absolute;
       border-radius: calc(var(--main-adjuster) * (16/400));
       box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) grey;
       left: 0;
       top: 0;
       transform-style: preserve-3d;
       transform-origin: left;
   }

   .chart-suggestion-cover1 {
       filter: hue-rotate(90deg);
       opacity: 0.9;
   }

   .chart-suggestion-cover2 {
       transform: rotateY(-25deg);
       filter: grayscale(100%);
       opacity: 0.9;
   }

   .chart-suggestion-cover3 {
       transform: rotateY(-35deg);
   }

   .chart-suggestion-tracks {
       position: absolute;
       left: 50%;
       bottom: 50%;
       transform: translate(calc(-50% - calc(var(--main-adjuster) * (10/400))), 50%);
       border-radius: calc(var(--main-adjuster) * (10/400));
       padding: calc(var(--main-adjuster) * (5/400)) calc(var(--main-adjuster) * (8/400));
       padding-bottom: calc(var(--main-adjuster) * (2/400));
       text-transform: uppercase;
       font-size: calc(var(--main-adjuster) * (28/400));
       font-weight: bolder;
/*      color: black;*/
      text-shadow: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)) white;
      font-family: "Monoton", sans-serif;
      width: calc(var(--main-adjuster) * (140/400));
      text-align: center;
          mix-blend-mode: difference;
   }

   .chart-suggestion-bottom {
       display: flex;
       flex-direction: column;
       margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .chart-suggestion-title {
      color: white;
       font-weight: 600;
       margin-bottom: calc(var(--main-adjuster) * (6/400));
       font-size: calc(var(--main-adjuster) * (20/400));
       text-overflow: ellipsis;
       position: relative;
   }

   .chart-suggestion-name {
       font-size: calc(var(--main-adjuster) * (14/400));
/*       white-space: pre;*/
       -webkit-line-clamp: 2;
   }






   .square-suggestions{
      width: 100%;
      display: flex;
      overflow-x: auto;
      padding-left: calc(var(--main-adjuster) * (16/400));
   }


   .square-suggestion-item{
      width: calc(var(--main-adjuster) * (140/400));
      margin-top: calc(var(--main-adjuster) * (20/400));
      position: relative;
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .square-suggestion-item[new]::after{
      content: attr(new);
    }

   .square-suggestion-item::after{
      right: calc(var(--main-adjuster) * (8/400));
      color: white;
      display: flex;
      font-size: calc(var(--main-adjuster) * (10/400));
      padding: calc(var(--main-adjuster) * (3/400)) calc(var(--main-adjuster) * (4/400));
      padding-bottom: calc(var(--main-adjuster) * (2/400));
      position: absolute;
      font-weight: bolder;
      border-radius: calc(var(--main-adjuster) * (2/400));
      line-height: normal;
      top: calc(var(--main-adjuster) * (116/400));
      font-family: Helvetica;
      text-transform: uppercase;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      background: linear-gradient(45deg, var(--ver), var(--rosa), var(--roxo));
   }

   .square-suggestion-item[parental]::before{
      content: attr(parental);
      display: flex;
      font-size: calc(var(--main-adjuster) * (12/400));
      position: absolute;
      left: calc(var(--main-adjuster) * (8/400));
      top: calc(var(--main-adjuster) * (8/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (6/400));
      background: black;
      font-weight: bolder;
      border-radius: calc(var(--main-adjuster) * (4/400));
      font-family: Helvetica;
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) black;
      z-index: 1;
      text-transform: uppercase;
      line-height: normal;
   }

   .square-suggestion-item[exclusive]::after{
      content: attr(exclusive);
      background: linear-gradient(45deg, var(--roxo), var(--vio), var(--ceu));
   }

   .square-suggestion-cover{
      width: calc(var(--main-adjuster) * (140/400));
      height: calc(var(--main-adjuster) * (140/400));
   }

   .square-suggestion-image{
      width: 100%;
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (5/400));
   }

   .square-suggestion-bottom{
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .square-suggestion-title{
      color: white;
      font-size: calc(var(--main-adjuster) * (20/400));
      margin-bottom: calc(var(--main-adjuster) * (5/400));
   }

   .square-suggestion-name{
      font-size: calc(var(--main-adjuster) * (14/400));
      -webkit-line-clamp: 2;
   }







   .creator-suggestions{
      width: 100%;
      display: flex;
      overflow-x: auto;
   }

   .creator-suggestion-item{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .creator-suggestion-header{
      width: calc(100% - calc(var(--main-adjuster) * (16/400)));
      display: flex;
      align-items: center;
      position: relative;
      padding: calc(var(--main-adjuster) * (10/400));
      background: rgba(0, 0, 0, 0.25);
      background: linear-gradient(45deg, #171717, var(--item-color));
      border-radius: calc(var(--main-adjuster) * (20/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (2/400)) #444, inset 0 0 0 calc(var(--main-adjuster) * (500/400)) rgba(0, 0, 0, 0.2);
      margin: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (8/400));
   }

   .creator-header-cover{
      height: calc(var(--main-adjuster) * (70/400));
      width: calc(var(--main-adjuster) * (70/400));
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .creator-header-image{
      height: 100%;
      width: 100%;
      border-radius: inherit;
   }

   .creator-header-details{
      display: flex;
      flex-wrap: wrap;
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .creator-header-title{
      color: #fff;
      margin-bottom: calc(var(--main-adjuster) * (6/400));
      font-size: calc(var(--main-adjuster) * (24/400));
   }

   .creator-header-name{
      font-size: calc(var(--main-adjuster) * (16/400));
      width: 100%;
      color: white;
   }

   .creator-header-stats{
      display: flex;
      margin-top: calc(var(--main-adjuster) * (8/400));
      align-items: center;
      font-size: calc(var(--main-adjuster) * (12/400));
      color: white;
   }

   .creator-header-button{
      position: absolute;
      z-index: 1;
      right: calc(var(--main-adjuster) * (10/400));
      bottom: calc(var(--main-adjuster) * (10/400));
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (32/400));
      align-items: center;
      justify-content: center;
      background: var(--item-color);
   }



   .creator-suggestion-body{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }









   .video-suggestions{
      width: 100%;
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (8/400));
      overflow-x: auto;
   }


   .video-suggestion{
      width: calc(var(--main-adjuster) * (300/400));
      min-width: calc(var(--main-adjuster) * (300/400));
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      margin: calc(var(--main-adjuster) * (8/400));
      position: relative;
      overflow: hidden;
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .specific-page-body .video-suggestion,
   .preview-content .video-suggestion{
      margin: 0;
      width: 100%;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .video-suggestion::before{
      left: 0;
      bottom: 0;
      content: "";
      width: 100%;
      height: calc(var(--main-adjuster) * (200/400));
      display: flex;
      position: absolute;
      border-radius: calc(var(--main-adjuster) * (12/400));
      display: none;
      -webkit-mask: linear-gradient(0deg, #000, transparent);
       mask: linear-gradient(0deg, #000, transparent);
       -webkit-backdrop-filter: blur(calc(var(--main-adjuster) * (8/400)));
       backdrop-filter: blur(calc(var(--main-adjuster) * (8/400)));
       background: linear-gradient(0deg, #000, transparent, transparent);
       z-index: 0;
       pointer-events: none;
   }

   .video-suggestion-screen{
      width: 100%;
      height: calc(var(--main-adjuster) * (200/400));
      border-radius: calc(var(--main-adjuster) * (13/400));
   }

   .video-suggestion-details{
      padding: calc(var(--main-adjuster) * (4/400));
      align-items: center;
      width: calc(100% - calc(var(--main-adjuster) * (90/400)));
      margin-top: calc(var(--main-adjuster) * (7/400));
      position: absolute;
      bottom: calc(var(--main-adjuster) * (8/400));
      left: calc(var(--main-adjuster) * (8/400));
      z-index: 1;
   }

   .video-suggestion-title{
      color: #fff;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (20/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .video-suggestion-name{
      font-size: calc(var(--main-adjuster) * (14/400));
      color: #fff;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .video-suggestion-owner{
      width: calc(var(--main-adjuster) * (30/400));
      height: calc(var(--main-adjuster) * (30/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      position: absolute;
      right: calc(var(--main-adjuster) * (60/400));
      bottom: calc(var(--main-adjuster) * (12/400));
      z-index: 1;
   }

   .video-play-button{
       width: calc(var(--main-adjuster) * (40/400));
       height: calc(var(--main-adjuster) * (40/400));
       border-radius: calc(var(--main-adjuster) * (32/400));
       display: flex;
       align-items: center;
       justify-content: center;
       position: absolute;
       right: calc(50% - calc(var(--main-adjuster) * (15/400)));
       bottom: calc(50% - calc(var(--main-adjuster) * (15/400)));
       right: calc(var(--main-adjuster) * (12/400));
       bottom: calc(var(--main-adjuster) * (12/400));
       border: none;
       z-index: 1;
   }

   .video-suggestion-badges{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       display: flex;
       padding: calc(var(--main-adjuster) * (8/400));
   }

   .video-suggestion-badge{
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (3/400));
       padding-bottom: 0;
       border-radius: calc(var(--main-adjuster) * (2/400));
       background: black;
       color: white;
       font-size: calc(var(--main-adjuster) * (10/400));
       font-family: 'URWRegular';
       margin-right: calc(var(--main-adjuster) * (6/400));
       font-style: normal;
       text-transform: uppercase;
       font-weight: bolder;
   }




   .explore-suggestions{
      display: flex;
      width: 100%;
      padding: calc(var(--main-adjuster) * (8/400));
      overflow-x: auto;
   }

   .explore-suggestion{
      margin: calc(var(--main-adjuster) * (8/400));
      height: calc(var(--main-adjuster) * (200/400));
      display: flex;
      background: #333;
/*      overflow: hidden;*/
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400));
      align-items: flex-end;
      justify-items: flex-end;
      width: calc((100vw/3) - calc(var(--main-adjuster) * (21.75/400)));
   }

   .explore-suggestion .filterBorder{
      width: calc(100% + calc(var(--main-adjuster) * (6/400)));
      height: calc(100% + calc(var(--main-adjuster) * (6/400)));
      left: calc(var(--main-adjuster) * (-3/400));
      top: calc(var(--main-adjuster) * (-3/400));
      border-radius: calc(var(--main-adjuster) * (12/400));
      /*background-image: conic-gradient(
        rgba(0, 0, 0, 0),
        var(--item-color),
        rgba(0, 0, 0, 0) 30%,
        rgba(0, 0, 0, 0) 100%
      );*/
   }

   .explore-suggestion:after{
/*      content: "";*/
      top: calc(var(--main-adjuster) * (-4/400));
      left: calc(var(--main-adjuster) * (-4/400));
      display: flex;
      width: calc(100% + calc(var(--main-adjuster) * (6/400)));
      height: calc(100% + calc(var(--main-adjuster) * (6/400)));
      position: absolute;
      border-radius: calc(var(--main-adjuster) * (14/400));
      pointer-events: none;
      border: calc(var(--main-adjuster) * (1/400)) solid var(--item-color);
   }

   .explore-suggestion-cover{
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      border-radius: calc(var(--main-adjuster) * (10/400));
   }

   .explore-suggestion-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .explore-suggestion-details{
      width: 100%;
      height: 100%;
      padding: calc(var(--main-adjuster) * (8/400));
      display: flex;
      flex-wrap: wrap;
      position: relative;
      border-radius: calc(var(--main-adjuster) * (10/400));
      align-items: flex-end;
      align-content: flex-end;
      background: linear-gradient(0deg, black, transparent);
   }

   .explore-suggestion-title{
      color: white;
      font-size: calc(var(--main-adjuster) * (14/400));
      text-align: center;
      margin-bottom: calc(var(--main-adjuster) * (4/400));
   }

   .explore-suggestion-name{
      font-size: calc(var(--main-adjuster) * (10/400));
      text-align: center;
   }





   .quote-suggestions{
      width: 100%;
   }

   .quote-suggestion{
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400));
      padding-top: calc(var(--main-adjuster) * (30/400));
      margin: calc(var(--main-adjuster) * (16/400)) 0;
      position: relative;
      box-shadow: inset 0 0 0 calc(var(--main-adjuster) * (200/400)) rgba(0, 0, 0, 0.5);
   }

   .quote-suggestion:before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      backdrop-filter: blur(calc(var(--main-adjuster) * (5/400)));
      z-index: 0;
   }

   .quote-suggestion-text{
      font-size: calc(var(--main-adjuster) * (30/400));
      width: 100%;
      color: white;
      z-index: 1;
      position: relative;
   }

   .quote-suggestion-details{
      width: 100%;
      display: flex;
      margin-top: calc(var(--main-adjuster) * (16/400));
      position: relative;
      align-items: center;
      justify-content: space-between;
   }

   .quote-suggestion-stats{
      display: flex;
      padding: calc(var(--main-adjuster) * (4/400)) 0;
      border-radius: calc(var(--main-adjuster) * (24/400));
      align-items: center;
      justify-content: center;
      background: transparent;
   }

   .quote-suggestion-icon{
      margin-right: calc(var(--main-adjuster) * (10/400));
   }

   .quote-stats-count{
      font-size: calc(var(--main-adjuster) * (24/400));
      padding-top: calc(var(--main-adjuster) * (5/400));
   }

   .quote-suggestion-author{
      float: right;
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .quote-suggestion-stats *{
      color: white;
   }

   .quote-suggestion-stats.active,
   .quote-suggestion-stats.active *{
      border-color: red;
      color: red;
      fill: red;
   }







   .preview-suggestions{
      width: 100%;
      padding: calc(var(--main-adjuster) * (8/400));
   }

   .preview-suggestion{
      width: 100%;
      display: flex;
      height: calc(var(--main-adjuster) * (500/400));
      overflow: hidden;
      position: relative;
      border-radius: calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (16/400)) calc(var(--main-adjuster) * (32/400)) calc(var(--main-adjuster) * (32/400));
   }

   .preview-suggestion-header{
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400));
      display: flex;
      position: absolute;
/*      pointer-events: none;*/
   }

   .preview-suggestion-cover{
      width: calc(var(--main-adjuster) * (60/400));
      height: calc(var(--main-adjuster) * (60/400));
      border-radius: calc(var(--main-adjuster) * (8/400));
      margin-right: calc(var(--main-adjuster) * (16/400));
   }

   .preview-suggestion-image{
      width: 100%;
      height: 100%;
      border-radius: calc(var(--main-adjuster) * (8/400));
   }

   .preview-header-details{
      width: calc(100% - calc(var(--main-adjuster) * (110/400)));
   }

   .preview-header-title{
      color: white;
      font-size: calc(var(--main-adjuster) * (22/400));
      margin-bottom: calc(var(--main-adjuster) * (5/400));
   }

   .preview-header-name{
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .preview-header-caption{
      font-size: calc(var(--main-adjuster) * (12/400));
      margin-top: calc(var(--main-adjuster) * (3/400));
   }

   .preview-share-button{
      background: transparent;
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      border-radius: calc(var(--main-adjuster) * (20/400));
      align-items: center;
      justify-content: center;
      position: absolute;
      right: calc(var(--main-adjuster) * (10/400));
      top: calc(var(--main-adjuster) * (10/400));
   }

   .preview-suggestion-body{
      width: 100%;
      height: 100%;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      overflow: hidden;
   }

   .preview-suggestion-body:after{
      top: 0;
      left: 0;
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      pointer-events: none;
      background: linear-gradient(black, transparent, black);
   }

   .preview-body-audios{
      display: none;
   }

   .preview-body-slides{
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 0;
   }

   .preview-body-cover{
      width: 100%;
      height: 100%;
      position: relative;
   }

   .preview-body-image{
      width: 100%;
      height: 100%;
   }

   .preview-body-image img{
      width: 100%;
      height: 100%;
   }

   .preview-body-image img{
      pointer-events: none;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: -2;
   }

   .preview-suggestion-animation{
      position: absolute;
      pointer-events: none;
   }

   .preview-suggestion-footer{
      position: absolute;
      width: 100%;
      bottom: 0;
      display: flex;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (16/400));
/*      pointer-events: none;*/
   }

   .preview-footer-text{
      width: 100%;
      color: white;
      font-size: calc(var(--main-adjuster) * (18/400));
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .preview-suggestion-controllers{
      width: 100%;
      display: flex;
      justify-content: space-between;
   }

   .preview-suggestion-unmute{
      display: flex;
      align-items: center;
      padding: calc(var(--main-adjuster) * (8/400)) calc(var(--main-adjuster) * (16/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      background: rgba(255, 255, 255, 0.1);
   }

   .preview-unmute-icon{
      line-height: 0;
      margin-right: calc(var(--main-adjuster) * (10/400));
   }

   .preview-suggestion-unmute svg:first-child{
      display: flex;
   }

   .preview-suggestion-unmute svg:last-child{
      display: none;
   }

   .preview-suggestion-unmute.active svg:first-child{
      display: none;
   }

   .preview-suggestion-unmute.active svg:last-child{
      display: flex;
   }

   .preview-suggestion-text{
      color: white;
      padding-top: calc(var(--main-adjuster) * (3/400));
   }

   .preview-suggestion-play{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: calc(var(--main-adjuster) * (50/400));
      border: none;
   }










   .pages-manager-section{

   }

   .preview-page .common-page-header{
      background: transparent;
   }

   .common-header-button{
      position: relative;

   }

   .common-header-title{
      position: relative;

   }

   .preview-body{
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100vh;
      position: sticky;
      overflow-y: auto;
   }

   .preview-display{
      width: 100%;
      height: calc(var(--main-adjuster) * (400/400));
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, var(--item-color), #171717);
   }

   .preview-display-cover{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .preview-display-image{
      width: 60vw;
      height: 60vw;
      margin-top: calc(var(--main-adjuster) * (20/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) rgba(0, 0, 0, 0.50);
   }

   .preview-details{
      width: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
   }

   .preview-details-title{
      color: white;
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      -webkit-line-clamp: 2;
   }

   .preview-details-name{
      font-size: calc(var(--main-adjuster) * (16/400));
      line-height: 1.1;
      -webkit-line-clamp: 2;
   }

   .preview-control{
      margin: calc(var(--main-adjuster) * (20/400)) 0;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: end;
   }

   .preview-control button{
      border: none;
      height: calc(var(--main-adjuster) * (44/400));
      width: calc(var(--main-adjuster) * (44/400));
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: calc(var(--main-adjuster) * (25/400));
      margin-right: calc(var(--main-adjuster) * (14/400));
      background: rgba(0, 0, 0, 0.250);
   }


   .filterBorder {
     height: calc(var(--main-adjuster) * (46/400));
     width: calc(var(--main-adjuster) * (152/400));
     position: absolute;
     overflow: hidden;
     top: calc(var(--main-adjuster) * (-1/400));
     left: calc(var(--main-adjuster) * (-1/400));
     border-radius: calc(var(--main-adjuster) * (24/400));
     z-index: -1;
   }

   .filterBorder::before {
     content: "";
     z-index: inherit;
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(90deg);
     position: absolute;
     width: calc(var(--main-adjuster) * (600/400));
     height: calc(var(--main-adjuster) * (600/400));
     background-repeat: no-repeat;
     background-position: 0 0;
     filter: brightness(1.35);
     background-image: conic-gradient(
       rgba(0, 0, 0, 0),
       var(--item-color),
       rgba(0, 0, 0, 0) 30%,
       rgba(0, 0, 0, 0) 100%
     );
     animation: rotate 8s linear infinite;
   }

   @keyframes rotate {
     100% {
       transform: translate(-50%, -50%) rotate(450deg);
     }
   }

   .preview-control-sense{
      position: absolute;
      left: calc(var(--main-adjuster) * (16/400));
      width: auto !important;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      padding-right: calc(var(--main-adjuster) * (22/400));
      background: #111111 !important;
   }

   .preview-control-icon{
      margin-right: calc(var(--main-adjuster) * (10/400));
      line-height: 0;
   }

   .preview-control-text{
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      padding-top: calc(var(--main-adjuster) * (3/400));
      text-transform: uppercase;
   }

   .preview-control-search{

   }

   .preview-control-options{

   }

   .preview-control-play{

   }

   .preview-body-title,
   .home-suggestions-title{
      width: 100%;
      color: white;
      font-size: calc(var(--main-adjuster) * (30/400));
      padding: 0 calc(var(--main-adjuster) * (16/400));
      -webkit-line-clamp: 2;
   }


   .home-suggestions-title{
      font-size: calc(var(--main-adjuster) * (24/400));
      white-space: pre;
      -webkit-line-clamp: 2;
   }

   
   .preview-search{
      display: none;
      width: 100%;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      font-size: calc(var(--main-adjuster) * (20/400));
      margin-bottom: calc(var(--main-adjuster) * (24/400));
   }

   .preview-search.active{
      display: flex;
   }

   .preview-search-input,
   .pick-header-input{
      height: calc(var(--main-adjuster) * (50/400));
      width: 100%;
      background: transparent;
      border-bottom: calc(var(--main-adjuster) * (2/400)) solid var(--item-color) !important;
      padding: 0;
      font-size: calc(var(--main-adjuster) * (20/400));
   }

   .preview-search-input::placeholder,
   .pick-header-input::placeholder{
      font-size: calc(var(--main-adjuster) * (20/400));
      font-style: normal;
   }

   .preview-search-input::-ms-input-placeholder,
   .pick-header-input::-ms-input-placeholder{
      font-size: calc(var(--main-adjuster) * (20/400));
      font-style: normal;
   }

   .preview-search-input::-moz-placeholder,
   .pick-header-input::-moz-placeholder{
      font-size: calc(var(--main-adjuster) * (20/400));
      font-style: normal;
   }






   .preview-content{
      width: 100%;
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      flex-wrap: wrap;
   }

   .preview-content .square-suggestion-item,
   .specific-page-body .square-suggestion-item{
      margin: 0;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      width: calc(50vw - calc(var(--main-adjuster) * (24/400)));
   }

   .preview-content .square-suggestion-item:nth-child(2n+1),
   .specific-page-body .square-suggestion-item:nth-child(2n+1) {
      margin-right: calc(var(--main-adjuster) * (16/400));

   }

   .preview-content .square-suggestion-cover,
   .specific-page-body .square-suggestion-cover{
      width: 100%;
      height: calc(50vw - calc(var(--main-adjuster) * (24/400)));
   }

   .preview-content-item{
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (8/400)) 0;
      position: relative;
   }

   .preview-content-position{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      display: none;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
   }

   .preview-content-position.active{
      display: flex;
   }

   .preview-content-position.active ~ .preview-content-cover{
      display: none;
   }

   .preview-content-number{
      color: white;
      font-size: calc(var(--main-adjuster) * (30/400));
      font-weight: bolder;
      word-break: normal;
   }

   .preview-content-caption{
      width: 100%;
      font-size: calc(var(--main-adjuster) * (8/400));
      text-align: center;
      text-transform: uppercase;
   }

   .preview-content-caption::after{
      content: "";
      font-size: calc(var(--main-adjuster) * (9/400));
      margin-left: calc(var(--main-adjuster) * (3/400));
      margin-bottom: calc(var(--main-adjuster) * (-1/400));
      display: inline-flex;
   }

   .preview-content-caption.down-to::after{
      content: "▼";
      color: red;
   }

   .preview-content-caption.up-to::after{
      content: "▲";
      color: green;
   }

   .preview-content-cover{
      width: calc(var(--main-adjuster) * (40/400));
      height: calc(var(--main-adjuster) * (40/400));
      border-radius: calc(var(--main-adjuster) * (5/400));
   }

   .preview-content-cover.active{
      display: flex !important;
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .preview-content-cover.active ~ .preview-content-details{
      width: calc(100% - calc(var(--main-adjuster) * (130/400)));
   }

   .preview-content-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
   }

   .preview-content-details{
      padding-top: calc(var(--main-adjuster) * (2/400));
      margin-left: calc(var(--main-adjuster) * (15/400));
      width: calc(100% - calc(var(--main-adjuster) * (80/400)));
   }

   .preview-content-title{
      color: white;
      font-size: calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (6/400));
   }

   .preview-content-name{
      font-size: calc(var(--main-adjuster) * (14/400));
   }


   .playing-loading {
     width: calc(var(--main-adjuster) * (40/400));
     transform: rotate(180deg);
     height: calc(var(--main-adjuster) * (40/400));
     position: absolute;
     right: 0;
     bottom: calc(var(--main-adjuster) * (7/400));
     display: none;
   }

   .playing-loading.active{
     display: flex;  
   }

   .playing-load {
     width: calc(var(--main-adjuster) * (2/400));
     height: calc(var(--main-adjuster) * (33/400));
     background-color: var(--ceu);
     animation: 1s move6 infinite;
     border-radius: calc(var(--main-adjuster) * (5/400));
     margin: 0.1em;
   }

   .playing-load:nth-child(1) {
     animation-delay: 0.2s;
   }

   .playing-load:nth-child(2) {
     animation-delay: 0.4s;
   }

   .playing-load:nth-child(3) {
     animation-delay: 0.6s;
   }


   @keyframes move6 {
     0% {
       height: 0.2em;
     }

     25% {
       height: 0.7em;
     }

     50% {
       height: 1.5em;
     }

     100% {
       height: 0.2em;
     }
   }

   
   .preview-recommendations{
      display: flex;
      overflow-x: auto;
      padding: 0 calc(var(--main-adjuster) * (16/400));
   }








   .merch-suggestions{
      width: 100%;
      padding: 0;
      display: flex;
      margin: calc(var(--main-adjuster) * (16/400)) 0;
      align-items: center;
   }

   .merch-suggestion-item{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (16/400)) 0;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .merch-suggestion-header{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      align-items: center;
      margin-bottom: calc(var(--main-adjuster) * (16/400));
   }

   .merch-header-cover{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      padding: calc(var(--main-adjuster) * (4/400));
      border: calc(var(--main-adjuster) * (1/400)) solid var(--vio);
   }

   .merch-header-image{
      width:   100%;
      height: 100%;
      border-radius: 2rem;
   }

   .merch-header-details{
      padding-top: calc(var(--main-adjuster) * (3/400));
      width: calc(100% - calc(var(--main-adjuster) * (60/400)));
      margin-left: calc(var(--main-adjuster) * (10/400));
   }

   .merch-header-title{
      margin-bottom: calc(var(--main-adjuster) * (5/400));
      font-size: calc(var(--main-adjuster) * (24/400));
      color: white;
   }

   .merch-header-name{
      font-size: calc(var(--main-adjuster) * (16/400));
   }

   .merch-item-body{
      width: 100%;
      height: calc(100vw + calc(var(--main-adjuster) * (100/400)));
      display: flex;
      position: relative;
   }

   .merch-item-cover{
      width: 100%;
      height: 100%;
   }

   .merch-item-image{
      width: 100%;
      height: 100%;
   }

   .merch-item-stock{
      position: absolute;
      left: 0;
      top: 0;
      left: calc(var(--main-adjuster) * (10/400));
      top: calc(var(--main-adjuster) * (10/400));
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (10/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: black;
      color: white;
      font-size: calc(var(--main-adjuster) * (14/400));
      padding-top: calc(var(--main-adjuster) * (8/400));
   }

   .merch-item-details{
      width: 100%;
      padding: calc(var(--main-adjuster) * (16/400));
      position: absolute;
      bottom: 0;
      left: 0;
      background: linear-gradient(0deg, #171717, transparent);
   }

   .merch-item-title{
      color: white;
      -webkit-line-clamp: 2;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .merch-item-name{
      font-size: calc(var(--main-adjuster) * (16/400));
      margin-top: calc(var(--main-adjuster) * (8/400));
      line-height: 1.3;
      -webkit-line-clamp: 3;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .merch-item-extra{
      width: 100%;
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      align-items: center;
      margin-top: calc(var(--main-adjuster) * (16/400));
      justify-content: space-between;
   }

   .merch-extra-button{
      color: white;
      height: calc(var(--main-adjuster) * (44/400));
      border: none;
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      font-size: calc(var(--main-adjuster) * (24/400));
      padding-top: calc(var(--main-adjuster) * (4/400));
      border-radius: calc(var(--main-adjuster) * (32/400));
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.25);
   }

   .merch-extra-price{
      color: white;
      font-size: calc(var(--main-adjuster) * (40/400));
      padding-top: calc(var(--main-adjuster) * (8/400));
      font-weight: bolder;
   }









   .pick-suggestions{
      top: 0;
      left: 0;
      width: 100%;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      position: fixed;
   }

   .pick-suggestions-header{
      width: 100%;
      height: calc(var(--main-adjuster) * (250/400));
      padding: calc(var(--main-adjuster) * (16/400));
      padding-top: calc(var(--main-adjuster) * (70/400));
      background: linear-gradient(180deg, var(--ceu), #171717);
   }

   .pick-header-navigation{
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      padding: calc(var(--main-adjuster) * (16/400));
      position: absolute;
      justify-content: space-between;
   }

   .pick-navigation-button{
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (10/400));
      padding-bottom: calc(var(--main-adjuster) * (2/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: rgba(0, 0, 0, 0.75);
      color: white;
      text-transform: uppercase;
   }

   .pick-header-title{
      text-align: center;
      font-size: calc(var(--main-adjuster) * (32/400));
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .pick-header-name{
      text-align: center;
      font-size: calc(var(--main-adjuster) * (16/400));
      line-height: 1.3;
      margin: calc(var(--main-adjuster) * (8/400)) 0;
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) black;
   }

   .pick-header-input{
      margin-top: calc(var(--main-adjuster) * (16/400));
      text-align: center;

   }

   .pick-suggestions-body{
      width: 100%;
      position: relative;
      background: #171717;
      height: calc(100% - calc(var(--main-adjuster) * (250/400)));
   }

   .pick-body-start{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (8/400));
   }



   .genre-suggestion-item.active{
      position: relative;
   }

   .genre-suggestion-item.active::after{
      content: "";
      position: absolute;
      left: calc(var(--main-adjuster) * (-5/400));
      top: calc(var(--main-adjuster) * (-5/400));
      display: flex;
      width: calc(100% + calc(var(--main-adjuster) * (8/400)));
      height: calc(100% + calc(var(--main-adjuster) * (8/400)));
      border-radius: calc(var(--main-adjuster) * (12/400));
      border: calc(var(--main-adjuster) * (1/400)) solid var(--vio);
   }

   .genre-suggestion-item.active .genre-suggestion-title{
      color: white;
   }




   .pick-body-start,
   .pick-body-end{
      width: 100%;
      height: 100%;
      overflow-y: auto;
      align-content: flex-start;
       align-items: flex-start;
       padding-bottom: calc(var(--main-adjuster) * (50/400));
       position: absolute;
       left: 100%;
       background: #171717;
       top: 0;
       transition: .5s;
       z-index: 1;
   }


   .pick-body-end{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
   }

   .pick-body-end.active,
   .pick-body-start.active{
      left: 0;
   }

   .pick-user{
      width: calc(var(--main-adjuster) * (120/400));
      margin-right: calc(var(--main-adjuster) * (24/400));
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: calc(var(--main-adjuster) * (16/400)) 0;


      margin: calc(var(--main-adjuster) * (8/400));
      width: calc((100% / 3) - calc(var(--main-adjuster) * (16/400)));
      padding: calc(var(--main-adjuster) * (8/400)) 0;
   }

   
   .pick-user-cover{
      width: calc(var(--main-adjuster) * (90/400));
      height: calc(var(--main-adjuster) * (90/400));
      border-radius: calc(var(--main-adjuster) * (80/400));
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
   }

   .pick-user-cover .library-option-icon{
      position: absolute;
      left: 0;
      top: 0;
      width: calc(var(--main-adjuster) * (14/400));
      height: calc(var(--main-adjuster) * (14/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      color: white important;
      background: var(--item-color);
      box-shadow: 0 0 0 calc(var(--main-adjuster) * (4/400)) var(--item-color), 0 0 0 calc(var(--main-adjuster) * (8/400)) #171717;
   }

   .pick-user-cover .library-option-icon *{
      color: white important;
   }
   
   .pick-user-image{
      border-radius: inherit;
      width: 100%;
      height: 100%;
   }
   
   .pick-user-details{
      text-align: center;
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (12/400));
   }
   
   .pick-user-title{
      color: #fff;
      font-size: calc(var(--main-adjuster) * (14.5/400));
      font-weight: normal;
      text-align: center;
      -webkit-line-clamp: 2;
   }
   
   .pick-user-name{
      font-family: 'URWRegular';
      font-size: calc(var(--main-adjuster) * (12/400));
      margin-top: calc(var(--main-adjuster) * (7/400));
   }

   .pick-user-button{
      padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (16/400));
      padding-bottom: calc(var(--main-adjuster) * (3/400));
      border-radius: calc(var(--main-adjuster) * (16/400));
      background: var(--ceu);
      margin-top: calc(var(--main-adjuster) * (12/400));
      font-size: calc(var(--main-adjuster) * (14/400));
      color: white;
   }

   .pick-user.active .pick-user-button{
      background: var(--vio);
   }











   .nominees-suggestions{
      width: 100%;
      display: flex;
   }  

   .nominees-suggestions-container{
      width: 100%;
      display: flex;
      overflow-x: auto;
   }

   .nominees-suggestions-item{
      width: calc(var(--main-adjuster) * (280/400));
      margin: calc(var(--main-adjuster) * (16/400));
      min-width: calc(var(--main-adjuster) * (280/400));
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
      border-radius: calc(var(--main-adjuster) * (24/400)) calc(var(--main-adjuster) * (24/400)) 0 0;
      background-size: cover !important;
      background-repeat: no-repeat !important;
      background-position: center center !important;
      box-shadow: inset 0 0 0 calc(var(--main-adjuster) * (500/400)) rgba(0, 0, 0, 0.750);
   }

   .nominees-suggestions-item:after{
      left: 0;
      bottom: 0;
      content: "";
      width: 100%;
      height: 25%;
      position: absolute;
      box-shadow: calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (2/400)) 0 0 #171717;
      background: linear-gradient(0deg, #171717, transparent);
   }

   .nominees-item-header{
      width: 100%;
   }

   .nominees-header-title{
      width: 100%;
      color: white;
      padding: calc(var(--main-adjuster) * (16/400));
      margin: calc(var(--main-adjuster) * (16/400)) 0;
      margin-top: calc(var(--main-adjuster) * (8/400));
      line-height: 1.25;
      text-align: center;
      word-break: normal;
      text-transform: uppercase;
      font-family: "Monoton", sans-serif;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (0/400)) #eb452b, calc(calc(var(--main-adjuster) * (10/400)) / 5) calc(calc(var(--main-adjuster) * (10/400)) / 5) calc(var(--main-adjuster) * (0/400)) #efa032, calc(calc(var(--main-adjuster) * (15/400)) / 5) calc(calc(var(--main-adjuster) * (15/400)) / 5) calc(var(--main-adjuster) * (0/400)) #46b59b, calc(calc(var(--main-adjuster) * (20/400)) / 5) calc(calc(var(--main-adjuster) * (20/400)) / 5) calc(var(--main-adjuster) * (0/400)) #017e7f, calc(calc(var(--main-adjuster) * (25/400)) / 5) calc(calc(var(--main-adjuster) * (25/400)) / 5) calc(var(--main-adjuster) * (0/400)) #052939, calc(calc(var(--main-adjuster) * (30/400)) / 5) calc(calc(var(--main-adjuster) * (30/400)) / 5) calc(var(--main-adjuster) * (0/400)) #c11a2b, calc(calc(var(--main-adjuster) * (35/400)) / 5) calc(calc(var(--main-adjuster) * (35/400)) / 5) calc(var(--main-adjuster) * (0/400)) #c11a2b;
   }

   .nominees-item-body{
      width: 100%;
      display: flex;
      padding: 0 calc(var(--main-adjuster) * (16/400));
      margin-bottom: calc(var(--main-adjuster) * (16/400));
      position: relative;
      z-index: 1;
      justify-content: space-between;
   }

   .nominees-item-pillar{
      width: calc(var(--main-adjuster) * (70/400));
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      position: relative;
      align-items: flex-end;
      align-content: flex-end;
      justify-content: center;
      --item-color: var(--ceu);
   }

   .nominees-item-pillar:first-child{
      --item-color: var(--sap1);
   }

   .nominees-item-pillar:last-child{
      --item-color: var(--insta1);
   }


   .nominees-pillar-cover{
      width: calc(var(--main-adjuster) * (50/400));
      height: calc(var(--main-adjuster) * (50/400));
      padding: calc(var(--main-adjuster) * (3/400));
      border-radius: calc(var(--main-adjuster) * (50/400));
      border: calc(var(--main-adjuster) * (2/400)) solid var(--item-color);
   }

   .nominees-pillar-image{
      width: 100%;
      height: 100%;
      border-radius: inherit;
      box-shadow: 0 0 calc(var(--main-adjuster) * (5/400)) black;
   }

   .nominees-pillar-bar{
      width: 100%;
      margin-top: calc(var(--main-adjuster) * (16/400));
      background: rgba(0, 0, 0, 0.5);
      border-radius: calc(var(--main-adjuster) * (50/400)) calc(var(--main-adjuster) * (50/400)) 0 0;
      height: calc(var(--main-adjuster) * (200/400));
      display: flex;
      align-items: flex-end;
      padding: calc(var(--main-adjuster) * (10/400));
      flex-wrap: wrap;
      position: relative;
      justify-content: center;
      align-content: flex-end;
      overflow: hidden;
      background: linear-gradient(180deg, var(--item-color), transparent);
   }

   .nominees-pillar-bar:before{
/*      content: "";*/
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: flex;
      position: absolute;
      background: linear-gradient(0deg, #171717, transparent);
   }

   .nominees-pillar-bar::after{
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      position: absolute;
      align-items: center;
      justify-content: center;
      z-index: -1;
      background: red;
      display: none;
   }


   .nominees-item-pillar:first-child .nominees-pillar-bar{
      height: calc(var(--main-adjuster) * (140/400));
      background: linear-gradient(180deg, var(--item-color), transparent);
   }

   .nominees-item-pillar:last-child .nominees-pillar-bar{
      height: calc(var(--main-adjuster) * (80/400));
      background: linear-gradient(180deg, var(--item-color), transparent);
   }

   .nominees-bar-position{
      width: 100%;
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) #171717;
      font-size: calc(var(--main-adjuster) * (30/400));
      text-align: center;
      position: relative;
      font-weight: bolder;
   }

   .nominees-bar-votes{
      color: white;
      text-shadow: calc(var(--main-adjuster) * (1/400)) calc(var(--main-adjuster) * (1/400)) #171717;
      font-size: calc(var(--main-adjuster) * (10/400));
      position: relative;
      font-weight: bolder;
      word-break: normal;
      white-space: pre;
   }

   .nominees-pillar-details{
      margin-top: calc(var(--main-adjuster) * (16/400));
   }

   .nominees-pillar-title{
/*         word-break: normal;*/
      text-align: center;
      color: white;
      line-height: 1.25;
      font-size: calc(var(--main-adjuster) * (16/400));
      -webkit-line-clamp: 2;
   }



   .nominees-item-footer{
         display: none;
         flex-wrap: wrap;
         margin-top: calc(var(--main-adjuster) * (16/400));
         padding: calc(var(--main-adjuster) * (16/400));
         width: 100%;
   }

   .nominees-item-position{
         width: 100%;
         width: 100%;
         display: flex;
         background: linear-gradient(90deg, var(--insta3), #171717);
         padding: calc(var(--main-adjuster) * (3/400));
         overflow: hidden;
         position: relative;
         align-items: center;
         margin-bottom: calc(var(--main-adjuster) * (10/400));
         border-radius: calc(var(--main-adjuster) * (20/400)) 0 0 calc(var(--main-adjuster) * (20/400));
   }

   .nominees-item-position:first-child{
         background: linear-gradient(90deg, var(--insta2), #171717);
   }

   .nominees-item-position:last-child{
         background: linear-gradient(90deg, var(--insta4), #171717);
   }



   .nominees-item-position:before{
         content: "";
         width: 100%;
         height: 100%;
         position: absolute;
         right: 0;
         top: 0;
         display: flex;
         background: linear-gradient(90deg, transparent, #171717);
         z-index: 0;
   }

   .nominees-position-place{
         background: #171717;
         border-radius: inherit;
         padding: calc(var(--main-adjuster) * (4/400)) calc(var(--main-adjuster) * (10/400));
         padding-top: calc(var(--main-adjuster) * (9/400));
         font-size: calc(var(--main-adjuster) * (16/400));
         height: calc(var(--main-adjuster) * (26/400));
         display: flex;
         color: white;
         align-items: center;
         justify-content: center;
         border-radius: calc(var(--main-adjuster) * (20/400));
         position: relative;
   }

   .nominees-position-points{
         color: white;
         margin: 0 calc(var(--main-adjuster) * (5/400));
         display: flex;
         font-size: calc(var(--main-adjuster) * (16/400));
         padding-top: calc(var(--main-adjuster) * (3/400));
         align-items: center;
         white-space: pre;
   }

   .nominees-position-title{
         color: white;
         margin: 0 calc(var(--main-adjuster) * (10/400));
         padding-top: calc(var(--main-adjuster) * (1/400));
         position: relative;
         white-space: pre;
   }









   .shake {
     animation: shake-animation 1s ease running;
     transform-origin: 50% 50%;
   }
 
   @keyframes shake-animation {
      0% { transform:translate(0,0) }
     1.78571% { transform:translate(calc(var(--main-adjuster) * (5/400)),0) }
     3.57143% { transform:translate(0,0) }
     5.35714% { transform:translate(calc(var(--main-adjuster) * (5/400)),0) }
     7.14286% { transform:translate(0,0) }
     8.92857% { transform:translate(calc(var(--main-adjuster) * (5/400)),0) }
     10.71429% { transform:translate(0,0) }
     100% { transform:translate(0,0) }
   }



   .background-effect-1{
      background: repeating-radial-gradient(
          circle,
          #000,
          #000 calc(var(--main-adjuster) * (5/400)),
          transparent calc(var(--main-adjuster) * (6/400))
        );
        background-size: calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (20/400));
   }

   .background-effect-2{
      background-image: repeating-radial-gradient(  #0c0a0a 80%,#2f312f 90%,#3f4549 90%);
      background-size: calc(var(--main-adjuster) * (65/400)) calc(var(--main-adjuster) * (65/400));
   }

   .background-effect-3{
      --s: calc(var(--main-adjuster) * (25/400)); /* control the size */
        --c1: #1eaaee;
        --c2: #171717;

        --c: #0000 71%, var(--c1) 0 79%, #0000 0;
        --_s: calc(var(--s) / 2) / calc(2 * var(--s)) calc(2 * var(--s));
        background: linear-gradient(45deg, var(--c)) calc(var(--s) / -2) var(--_s),
          linear-gradient(135deg, var(--c)) calc(var(--s) / 2) var(--_s),
          radial-gradient(var(--c1) 35%, var(--c2) 37%) 0 0 / var(--s) var(--s);
   }

   .background-effect-4{
      background: radial-gradient(
           circle farthest-side at 0% 50%,
           #282828 23.5%,
           rgba(255, 170, 0, 0) 0
         )
         calc(var(--main-adjuster) * (21/400)) calc(var(--main-adjuster) * (30/400)),
       radial-gradient(
           circle farthest-side at 0% 50%,
           #a1000e 24%,
           rgba(240, 166, 17, 0) 0
         )
         calc(var(--main-adjuster) * (19/400)) calc(var(--main-adjuster) * (30/400)),
       linear-gradient(
           #282828 14%,
           rgba(240, 166, 17, 0) 0,
           rgba(240, 166, 17, 0) 85%,
           #282828 0
         )
         0 0,
       linear-gradient(
           150deg,
           #282828 24%,
           #a1000e 0,
           #a1000e 26%,
           rgba(240, 166, 17, 0) 0,
           rgba(240, 166, 17, 0) 74%,
           #a1000e 0,
           #a1000e 76%,
           #282828 0
         )
         0 0,
       linear-gradient(
           30deg,
           #282828 24%,
           #a1000e 0,
           #a1000e 26%,
           rgba(240, 166, 17, 0) 0,
           rgba(240, 166, 17, 0) 74%,
           #a1000e 0,
           #a1000e 76%,
           #282828 0
         )
         0 0,
       linear-gradient(90deg, #a1000e 2%, #282828 0, #282828 98%, #a1000e 0%) 0 0
         #282828;
     background-size: calc(var(--main-adjuster) * (40/400)) calc(var(--main-adjuster) * (60/400));
   }

   .background-effect-5{
      background-color: #111111;
      background-image: linear-gradient(
       32deg,
       rgba(8, 8, 8, 0.74) calc(var(--main-adjuster) * (30/400)),
       transparent
      );
      background-size: calc(var(--main-adjuster) * (60/400)) calc(var(--main-adjuster) * (60/400));
        background-position: calc(var(--main-adjuster) * (-5/400)) calc(var(--main-adjuster) * (-5/400));
   }

   .background-effect-6{
      --s: calc(var(--main-adjuster) * (194/400)); /* control the size */
        --c1: #f6edb3;
        --c2: #acc4a3;

        --_l: #0000 calc(25% / 3), var(--c1) 0 25%, #0000 0;
        --_g: conic-gradient(from 120deg at 50% 87.5%, var(--c1) 120deg, #0000 0);

        background: var(--_g), var(--_g) 0 calc(var(--s) / 2),
          conic-gradient(from 180deg at 75%, var(--c2) 60deg, #0000 0),
          conic-gradient(from 60deg at 75% 75%, var(--c1) 0 60deg, #0000 0),
          linear-gradient(150deg, var(--_l)) 0 calc(var(--s) / 2),
          conic-gradient(
            at 25% 25%,
            #0000 50%,
            var(--c2) 0 240deg,
            var(--c1) 0 300deg,
            var(--c2) 0
          ),
          linear-gradient(-150deg, var(--_l)) #55897c /* third color here */;
        background-size: calc(0.866 * var(--s)) var(--s);
   }

   .background-effect-7{
      --u: calc(var(--main-adjuster) * (5/400));
        --c1: #ededee;
        --c2: #000000;
        --c3: #1e1e1e;
        --gp: 50% / calc(var(--u) * 16.9) calc(var(--u) * 12.8);
        background: conic-gradient(
           from 122deg at 50% 85.15%,
           var(--c2) 0 58deg,
           var(--c3) 0 116deg,
           #fff0 0 100%
         )
         var(--gp),
       conic-gradient(from 122deg at 50% 72.5%, var(--c1) 0 116deg, #fff0 0 100%)
         var(--gp),
       conic-gradient(from 58deg at 82.85% 50%, var(--c3) 0 64deg, #fff0 0 100%)
         var(--gp),
       conic-gradient(
           from 58deg at 66.87% 50%,
           var(--c1) 0 64deg,
           var(--c2) 0 130deg,
           #fff0 0 100%
         )
         var(--gp),
       conic-gradient(from 238deg at 17.15% 50%, var(--c2) 0 64deg, #fff0 0 100%)
         var(--gp),
       conic-gradient(
           from 172deg at 33.13% 50%,
           var(--c3) 0 66deg,
           var(--c1) 0 130deg,
           #fff0 0 100%
         )
         var(--gp),
       linear-gradient(98deg, var(--c3) 0 15%, #fff0 calc(15% + calc(var(--main-adjuster) * (1/400))) 100%)
         var(--gp),
       linear-gradient(-98deg, var(--c2) 0 15%, #fff0 calc(15% + calc(var(--main-adjuster) * (1/400))) 100%)
         var(--gp),
       conic-gradient(
           from -58deg at 50.25% 14.85%,
           var(--c3) 0 58deg,
           var(--c2) 0 116deg,
           #fff0 0 100%
         )
         var(--gp),
       conic-gradient(from -58deg at 50% 28.125%, var(--c1) 0 116deg, #fff0 0 100%)
         var(--gp),
       linear-gradient(90deg, var(--c2) 0 50%, var(--c3) 0 100%) var(--gp);
   }

   .background-effect-8{
      --s: calc(var(--main-adjuster) * (200/400)); /* control the size */
     --c1: #1d1d1d;
     --c2: #4e4f51;
     --c3: #3c3c3c;

     background: repeating-conic-gradient(
           from 30deg,
           #0000 0 120deg,
           var(--c3) 0 180deg
         )
         calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
       repeating-conic-gradient(
         from 30deg,
         var(--c1) 0 60deg,
         var(--c2) 0 120deg,
         var(--c3) 0 180deg
       );
     background-size: var(--s) calc(var(--s) * 0.577);
   }

   .background-effect-9{
      --s: calc(var(--main-adjuster) * (150/400));
     --c1: #282c34;
     --c2: #3e4149;
     --c3: #525762;
     --c4: #ff6384;
     --c5: #36a2eb;
     --c6: #4bc0c0;
     --c7: #ffcc29;
     --c8: #8e8f91;
     --c9: #626262;

     background: repeating-conic-gradient(
           from 30deg,
           #0000 0 120deg,
           var(--c3) 0 180deg
         )
         calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
       repeating-conic-gradient(
         from 30deg,
         var(--c1) 0 45deg,
         var(--c2) 0 90deg,
         var(--c3) 0 135deg,
         var(--c4) 0 180deg,
         var(--c5) 0 225deg,
         var(--c6) 0 270deg,
         var(--c7) 0 315deg,
         var(--c8) 0 360deg,
         var(--c9) 0 405deg
       );
     background-size: var(--s) calc(var(--s) * 0.577);
   }

   .background-effect-10{
      --s: calc(var(--main-adjuster) * (50/400));
      --c1: #1d1d1d;
      --c2: #4e4f51;
      --c3: #3c3c3c;
      background: repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 50%) calc(var(--s) / 2) calc(var(--s) * tan(30deg) / 2), repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 50%);
      background-size: var(--s) calc(var(--s) * tan(30deg));
   }

   .background-effect-11{
      
   }

   .background-effect-12{
      
   }

   .background-effect-13{
      
   }

   .background-effect-14{
      
   }

   .background-effect-15{
      
   }

   .background-effect-16{
      
   }


   .hidden{
      display: none !important;
   }







     .genre-effect-1{
      --s: calc(calc(var(--main-adjuster) * (20/400))/5); /* control the size*/
      --c1: #c02942;
      --c2: #53777a;
      --c3: #ecd078;
      
       --g: var(--s); /* gap between lines */
       background:
         conic-gradient(at var(--s) calc(100% - var(--s)),#0000 270deg,var(--c1) 0) calc(var(--s) + var(--g)) 0,
         linear-gradient(var(--c2) var(--s),#0000 0) 0 var(--g),
         conic-gradient(at var(--s) calc(100% - var(--s)),#0000 90deg,var(--c2) 0 180deg, var(--c1) 0),
         var(--c3);
       background-size: calc(2*(var(--s) + var(--g))) calc(2*(var(--s) + var(--g)));
    }

    .genre-effect-2{
         --s: calc(calc(var(--main-adjuster) * (80/400))/5); /* control the size*/
         --c1: #6b5344;
         --c2: #f8ecc9;
         
         --c:var(--c1) 0;
         --g:conic-gradient(at 50% 25%,#0000 75%,var(--c));
         background:
           repeating-linear-gradient(#0000 0 48%,var(--c) 50%),var(--g),
           conic-gradient(#0000 75%,var(--c)) calc(var(--s)/4) calc(var(--s)/2),
           var(--g) calc(var(--s)/2) var(--s) var(--c2);
         background-size: var(--s) var(--s),var(--s) calc(2*var(--s));
       }

    .genre-effect-3{
       --s: calc(calc(var(--main-adjuster) * (125/400))/5); /* control the size*/
       --c1: #f8ca00;
       --c2: #bd1550;
       
       --_g: var(--c1) 90deg,var(--c2) 0 135deg,#0000 0;
       background:
         conic-gradient(from  -45deg at calc(100%/3)   calc(100%/3)  ,var(--c1) 90deg,#0000 0 ),
         conic-gradient(from -135deg at calc(100%/3)   calc(2*100%/3),var(--_g)),
         conic-gradient(from  135deg at calc(2*100%/3) calc(2*100%/3),var(--_g)),
         conic-gradient(from   45deg at calc(2*100%/3) calc(100%/3)  ,var(--_g),var(--c1) 0 225deg,var(--c2) 0);
       background-size: var(--s) var(--s);
     }

    .genre-effect-4{
       --s: calc(calc(var(--main-adjuster) * (120/400))/5); /* control the size*/
       --c1: #fa6900;
       --c2: #d95b43;
       --c3: #ecd078;
       
       background:
         conic-gradient(from 150deg at 50% 33%,#0000,var(--c1) .5deg 60deg,#0000 60.5deg) 
           calc(var(--s)/2) calc(var(--s)/sqrt(2)),
         conic-gradient(from -30deg at 50% 66%,#0000,var(--c2) .5deg 60deg,var(--c3) 60.5deg);
       background-size: var(--s) calc(.5*var(--s)/tan(30deg));
     }

    .genre-effect-5{
       --s: calc(calc(var(--main-adjuster) * (140/400))/5); /* control the size*/
       --c1: #170409;
       --c2: #67917a;
       
       --_g: #0000 52%,var(--c1) 54% 57%,#0000 59%; 
       background: 
        radial-gradient(farthest-side at -33.33% 50%,var(--_g)) 0 calc(var(--s)/2),
        radial-gradient(farthest-side at 50% 133.33%,var(--_g)) calc(var(--s)/2) 0,
        radial-gradient(farthest-side at 133.33% 50%,var(--_g)),
        radial-gradient(farthest-side at 50% -33.33%,var(--_g)),
        var(--c2);
       background-size: calc(var(--s)/4.667) var(--s),var(--s) calc(var(--s)/4.667);
     }

    .genre-effect-6{
       --s: calc(calc(var(--main-adjuster) * (105/400))/5); /* control the size*/
       --c1: #b9b9b9;
       --c2: #dcdcdc;
       --c3: #fafafa;
       
       background:
         conic-gradient(from 75deg,var(--c1)   15deg ,var(--c2) 0 30deg ,#0000 0 180deg,
                                   var(--c2) 0 195deg,var(--c1) 0 210deg,#0000 0) 
            calc(var(--s)/2) calc(.5*var(--s)/tan(30deg)),
         conic-gradient(var(--c1)   30deg ,var(--c3) 0 75deg ,var(--c1) 0 90deg, var(--c2) 0 105deg,
                        var(--c3) 0 150deg,var(--c2) 0 180deg,var(--c3) 0 210deg,var(--c1) 0 256deg,
                        var(--c2) 0 270deg,var(--c1) 0 286deg,var(--c2) 0 331deg,var(--c3) 0);
       background-size: var(--s) calc(var(--s)/tan(30deg));
     }

    .genre-effect-7{
       --s: calc(calc(var(--main-adjuster) * (100/400))/5); /* control the size*/
       --c1: #eceddc;
       --c2: #29ab87;
       
       --_g: var(--c1) 90deg,#0000 90.5deg;
       background:
        conic-gradient(from -45deg,var(--_g)),
        conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0,
        var(--c2);
       background-size: var(--s) var(--s)
     }

    .genre-effect-8{
       --s: calc(calc(var(--main-adjuster) * (150/400))/5); /* control the size*/
       --c1: #ff847c;
       --c2: #e84a5f;
       --c3: #fecea8;
       --c4: #99b898;
       
       background:
         conic-gradient(from  45deg at 75% 75%, var(--c3) 90deg,var(--c1) 0 180deg,#0000 0),
         conic-gradient(from -45deg at 25% 25%, var(--c3) 90deg,#0000 0),
         conic-gradient(from -45deg at 50% 100%,#0000 180deg,var(--c3) 0),
         conic-gradient(from -45deg,var(--c1) 90deg, var(--c2) 0 225deg,var(--c4) 0);
       background-size: var(--s) var(--s); 
     }

    .genre-effect-9{
       --s: calc(calc(var(--main-adjuster) * (200/400))/5); /* control the size*/
       --c1: #ffffff;
       --c2: #1095c1;
       
       --_g: #0000 8%,var(--c1) 0 17%,#0000 0 58%;
       background: 
         linear-gradient(135deg,#0000 20.5%,var(--c1) 0 29.5%,#0000 0) 0 calc(var(--s)/4),
         linear-gradient( 45deg,var(--_g)) calc(var(--s)/2) 0,
         linear-gradient(135deg,var(--_g),var(--c1) 0 67%,#0000 0),        
         linear-gradient( 45deg,var(--_g),var(--c1) 0 67%,#0000 0 83%,var(--c1) 0 92%,#0000 0),
         var(--c2); 
       background-size: var(--s) var(--s);
     }

    .genre-effect-10{
       --s: calc(calc(var(--main-adjuster) * (100/400))/5); /* control the size*/
       --c1: #c3ccaf;
       --c2: #67434f;
       
       --_s: calc(2*var(--s)) calc(2*var(--s));
       --_g: var(--_s) conic-gradient(at 40% 40%,#0000 75%,var(--c1) 0);
       --_p: var(--_s) conic-gradient(at 20% 20%,#0000 75%,var(--c2) 0);
       background:
         calc( .9*var(--s)) calc( .9*var(--s))/var(--_p),
         calc(-.1*var(--s)) calc(-.1*var(--s))/var(--_p),
         calc( .7*var(--s)) calc( .7*var(--s))/var(--_g),
         calc(-.3*var(--s)) calc(-.3*var(--s))/var(--_g),
         conic-gradient(from 90deg at 20% 20%,var(--c2) 25%,var(--c1) 0) 
          0 0/var(--s) var(--s);
     }

    .genre-effect-11{
       --s: calc(calc(var(--main-adjuster) * (60/400))/5); /* control the size*/
       --c1: #b09f79;
       --c2: #476074;
       
       --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
       background:
         radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
         radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
         radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
         radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
         var(--c2);
       background-size: calc(2*var(--s)) calc(2*var(--s));
     }

    .genre-effect-12{
        --s: calc(calc(var(--main-adjuster) * (50/400))/5); /* control the size*/
        --c1: #5e412f;
        --c2: #ccc68d;
        
        --c:calc(50%/3),#0000 75%,var(--c1) 0;
        --g:conic-gradient(at 50% var(--c));
        --l:conic-gradient(at var(--c));
        background:
          var(--g),
          var(--g) calc(var(--s)/2) var(--s),
          var(--g) var(--s) calc(2*var(--s)),
          var(--l) calc(2*var(--s)) 0,
          var(--l) 0 var(--s) var(--c2);
        background-size: calc(3*var(--s)) calc(3*var(--s));
      }

    .genre-effect-13{
       --s: calc(calc(var(--main-adjuster) * (100/400))/5); /* control the size*/
       --c1: #fcd036;
       --c2: #987f69;
       
       --_g: var(--c1) 0 100%,#0000 102%;
       background:
         conic-gradient(#0000 75%,var(--_g)) calc(var(--s)/4) calc(var(--s)/4),
         radial-gradient(65% 65% at 50% -50%,var(--_g)),
         radial-gradient(65% 65% at -50% 50%,var(--_g)),
         radial-gradient(65% 65% at 50% 150%,var(--_g)),
         radial-gradient(65% 65% at 150% 50%,var(--_g))
         var(--c2);
       background-size: var(--s) var(--s);
     }

    .genre-effect-14{
       --s: calc(calc(var(--main-adjuster) * (162/400))/5); /* control the size*/
       --c1: #cd2942;
       --c2: #62928c;
       --c3: #e8cba9;
       --c4: #33152e;
       --c5: #414352;
       
       --_g: conic-gradient(from 30deg at 50% 25%,#0000 300deg,var(--c1) 0);
       background:
         var(--_g) calc(0.2885*var(--s)) calc(7*var(--s)/12),
         var(--_g) 0 calc(var(--s)/12),
         conic-gradient(from 120deg at 50% calc(250%/3),var(--c2) 120deg,#0000 0),
         repeating-conic-gradient(from 30deg,#0000 0 60deg,var(--c3) 0 120deg),
         repeating-conic-gradient(var(--c4) 0 60deg,var(--c2) 0 120deg,var(--c5) 0 180deg);
       background-size: calc(0.577*var(--s)) var(--s);
     }

    .genre-effect-15{
       --s: calc(calc(var(--main-adjuster) * (70/400))/5); /* control the size*/
       --c1: #6b5344;
       --c2: #f8ecc9;
       
       --_l: #0000 46%,var(--c1) 47% 53%,#0000 54%;
       background:
         radial-gradient(100% 100% at 100% 100%,var(--_l)) var(--s) var(--s),
         radial-gradient(100% 100% at 0    0   ,var(--_l)) var(--s) var(--s),
         radial-gradient(100% 100%,#0000 22%,var(--c1) 23% 29%, #0000 30% 34%,var(--c1) 35% 41%,#0000 42%),
         var(--c2);
       background-size: calc(var(--s)*2) calc(var(--s)*2);
     }

    .genre-effect-16{
       --s: calc(calc(var(--main-adjuster) * (100/400))/5); /* control the size*/
       --c1: #f8b195;
       --c2: #355c7d;
       
       --_g: 
          var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
          var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
       background:
         radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
         radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
         var(--c1);
       background-size: var(--s) var(--s);
     }

    .genre-effect-17{
       --s: calc(calc(var(--main-adjuster) * (140/400))/5); /* control the size*/
       --c1: #ab3e5b;
       --c2: #ffbe40;
       --c3: #accec0;
       --c4: #61a6ab;
       
       --_g: 
         #0000 25%,#0008 47%,var(--c1)  53% 147%,var(--c2) 153% 247%,
         var(--c1) 253% 347%,var(--c2) 353% 447%,var(--c1) 453% 547%,#0008 553%,#0000 575%;
       --_s: calc(25%/3) calc(25%/4) at 50%; 
       background:
         radial-gradient(var(--_s) 100%,var(--_g)),
         radial-gradient(var(--_s) 100%,var(--_g)) calc(var(--s)/2) calc(3*var(--s)/4),
         radial-gradient(var(--_s) 0   ,var(--_g)) calc(var(--s)/2) 0,
         radial-gradient(var(--_s) 0   ,var(--_g)) 0                calc(3*var(--s)/4),
         repeating-linear-gradient(90deg,var(--c3) calc(25%/-6) calc(25%/6),var(--c4) 0 calc(25%/2));
       background-size: var(--s) calc(3*var(--s)/2)
     }

    .genre-effect-18{
       --s: calc(calc(var(--main-adjuster) * (50/400))/4); /* control the size*/
       --c1: #084c7f;
       --c2: #fef5e9;
       
       --t: calc(var(--s)/10);  /* control the thickness */
       --_c: #0000 calc(98% - var(--t)),var(--c1) calc(100% - var(--t)) 98%,#0000;
       --_s: calc(2*var(--s)) calc(5*var(--s)/2);
       --_r0: /var(--_s) radial-gradient(calc(var(--s)/2) at 0    20%,var(--_c));
       --_r1: /var(--_s) radial-gradient(calc(var(--s)/2) at 100% 20%,var(--_c));
       background:
         0 0 var(--_r0),calc(-1*var(--s)) calc(5*var(--s)/4) var(--_r0),
         var(--s) 0 var(--_r1),0 calc(5*var(--s)/4) var(--_r1),
         conic-gradient(at var(--t) calc(20% + 2*var(--t)),#0000 75%,var(--c1) 0)
         calc(var(--t)/-2) calc(var(--s) - var(--t))/var(--s) calc(5*var(--s)/4),
         repeating-conic-gradient(var(--c2) 0 25%,#0000 0 50%)
         var(--s) calc(var(--s)/-8)/var(--_s),
         conic-gradient(from 90deg at var(--t) var(--t),var(--c2) 25%,var(--c1) 0) 
         calc((var(--s) - var(--t))/2) calc((var(--s) - var(--t))/2)/var(--s) calc(5*var(--s)/4);
     }

    .genre-effect-19{
       --s: calc(calc(var(--main-adjuster) * (55/400))/4); /* control the size*/
       --c1: #f9f2e7;
       --c2: #88a65e;
       --c3: #bfb35a;
       
       --b: calc(var(--s)/3.67); /* control the thickness of the curved lines */
       
       --_r: calc(1.28*var(--s) + var(--b)/2) at top 50%;
       --_f: calc(99.5% - var(--b)),var(--c1) calc(101% - var(--b)) 99.5%,#0000 101%;
       --_g0: calc(-.8*var(--s)), var(--c2) var(--_f);
       --_g1: calc(-.8*var(--s)), var(--c3) var(--_f);
       --_s: calc(1.8*var(--s) + var(--b));
       background: 
         radial-gradient(var(--_r) right var(--_g0)) calc(-1*var(--_s)) var(--s),
         radial-gradient(var(--_r) left  var(--_g1))         var(--_s)  calc(-1*var(--s)),
         radial-gradient(var(--_r) right var(--_g1)) calc(var(--_s)/-2) calc(-1*var(--s)),
         radial-gradient(var(--_r) left  var(--_g0)) calc(var(--_s)/ 2) var(--s),
         linear-gradient(90deg,var(--c2) 50%,var(--c3) 0);
       background-size: var(--_s) calc(4*var(--s));
     }

    .genre-effect-20{
       --s: calc(calc(var(--main-adjuster) * (80/400))/4); /* control the size*/
       --c1: #542437;
       --c2: #c02942;
       
       --_g: 
         #0000 calc(-650%/13) calc(50%/13),var(--c1) 0 calc(100%/13),
         #0000 0 calc(150%/13),var(--c1) 0 calc(200%/13),
         #0000 0 calc(250%/13),var(--c1) 0 calc(300%/13);
       --_g0: repeating-linear-gradient( 45deg,var(--_g));
       --_g1: repeating-linear-gradient(-45deg,var(--_g));
       background:
         var(--_g0),var(--_g0) var(--s) var(--s),
         var(--_g1),var(--_g1) var(--s) var(--s) var(--c2);
       background-size: calc(2*var(--s)) calc(2*var(--s));
     }

    .genre-effect-21{
       --s: calc(calc(var(--main-adjuster) * (56/400))/4); /* control the size*/
       --c1: #3fb8af;
       --c2: #ff9e9d;
       
       --_c1: var(--c1) 99%,#0000 101%;
       --_c2: var(--c2) 99%,#0000 101%;
       
       --r:calc(var(--s)*.866); 
       --g0:radial-gradient(var(--s),var(--_c1));
       --g1:radial-gradient(var(--s),var(--_c2));
       --f:radial-gradient(var(--s) at calc(100% + var(--r)) 50%,var(--_c1));
       --p:radial-gradient(var(--s) at 100% 50%,var(--_c2));
       background:
         var(--f) 0 calc(-5*var(--s)/2),
         var(--f) calc(-2*var(--r)) calc(var(--s)/2),
         var(--p) 0 calc(-2*var(--s)),
         var(--g0) var(--r) calc(-5*var(--s)/2),
         var(--g1) var(--r) calc( 5*var(--s)/2),
         radial-gradient(var(--s) at 100% 100%,var(--_c1)) 0 calc(-1*var(--s)),   
         radial-gradient(var(--s) at 0%   50% ,var(--_c1)) 0 calc(-4*var(--s)),
         var(--g1) calc(-1*var(--r)) calc(-7*var(--s)/2),
         var(--g0) calc(-1*var(--r)) calc(-5*var(--s)/2),
         var(--p) calc(-2*var(--r)) var(--s),
         var(--g0) calc(-1*var(--r)) calc(var(--s)/ 2),
         var(--g1) calc(-1*var(--r)) calc(var(--s)/-2),
         var(--g0) 0 calc(-1*var(--s)),
         var(--g1) var(--r) calc(var(--s)/-2),
         var(--g0) var(--r) calc(var(--s)/ 2) 
         var(--c2);
       background-size: calc(4*var(--r)) calc(6*var(--s));
     }

    .genre-effect-22{
       --s: calc(calc(var(--main-adjuster) * (150/400))/4); /* control the size*/
       --c1: #5e412f;
       --c2: #fcebb6;
       
       background:
         linear-gradient(135deg,#0000 18.75%,var(--c1) 0 31.25%,#0000 0),
         repeating-linear-gradient(45deg,var(--c1) -6.25% 6.25%,var(--c2) 0 18.75%);
       background-size: var(--s) var(--s); 
     }

    .genre-effect-23{
       --s: calc(calc(var(--main-adjuster) * (120/400))/4); /* control the size*/
       --c1: #4e395d;
       --c2: #8ebe94;
       
       --_g:var(--c1) 15%,var(--c2) 0 28%,#0000 0 72%,var(--c2) 0 85%,var(--c1) 0;
       background:
         conic-gradient(from 90deg at calc(var(--main-adjuster) * (2/400)) calc(var(--main-adjuster) * (2/400)),#0000 25%,var(--c1) 0) calc(var(--main-adjuster) * (-1/400)) calc(var(--main-adjuster) * (-1/400)),
         linear-gradient(-45deg,var(--_g)),linear-gradient(45deg,var(--_g)),
         conic-gradient(from 90deg at 40% 40%,var(--c1) 25%,var(--c2) 0) 
          calc(var(--s)/-5) calc(var(--s)/-5);
       background-size: var(--s) var(--s);
     }

    .genre-effect-24{
       --s: calc(calc(var(--main-adjuster) * (120/400))/4); /* control the size*/
       --c1: #1a2030;
       --c2: #0f9177;
       --c3: #fdebad;
       --c4: #d34434;
       --c5: #b5d999;
       
       --_g: radial-gradient(#0000 70%,var(--c1) 71%);
       background:
         var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2),
         conic-gradient(var(--c2) 25%,var(--c3) 0 50%,var(--c4) 0 75%,var(--c5) 0);
       background-size: var(--s) var(--s);
     }

    .genre-effect-25{
       --s: calc(calc(var(--main-adjuster) * (71/400))/4); /* control the size*/
       --c1: #78c0a8;
       --c2: #fcebb6;
       
       background:
         radial-gradient(36% 72% at 25% -50%,var(--c2) 98%,#0000)
          0 0/calc(2*var(--s)) var(--s),
         radial-gradient(36% 72% at 75% 150%,var(--c2) 98%,#0000)
          0 0/calc(2*var(--s)) var(--s),
         radial-gradient(72% 36% at 150% 25%,var(--c2) 98%,#0000)
          0 0/var(--s) calc(2*var(--s)),
         radial-gradient(72% 36% at -50% 75%,var(--c2) 98%,#0000)
          0 0/var(--s) calc(2*var(--s)),
         repeating-conic-gradient(var(--c2) 0 45deg,var(--c1) 0 25%)
          0 0/calc(2*var(--s)) calc(2*var(--s));
     }

    .genre-effect-26{
       --s: calc(calc(var(--main-adjuster) * (220/400))/4); /* control the size*/
       --c1: #774f38;
       --c2: #f1d4af;
       
       --_g:radial-gradient(#0000 60%,var(--c1) 61% 63%,#0000 64% 77%,var(--c1) 78% 80%,#0000 81%);
       --_c:,#0000 75%,var(--c2) 0;
       background:
         conic-gradient(at 12% 20% var(--_c)) calc(var(--s)* .44) calc(.9*var(--s)),
         conic-gradient(at 12% 20% var(--_c)) calc(var(--s)*-.06) calc(.4*var(--s)),
         conic-gradient(at 20% 12% var(--_c)) calc(.9*var(--s)) calc(var(--s)* .44),
         conic-gradient(at 20% 12% var(--_c)) calc(.4*var(--s)) calc(var(--s)*-.06),
         var(--_g),var(--_g) calc(var(--s)/2) calc(var(--s)/2) var(--c2);
       background-size: var(--s) var(--s);
     }

    .genre-effect-27{
       --s: calc(calc(var(--main-adjuster) * (124/400))/4); /* control the size*/
       --c1: #90c0b2;
       --c2: #f9fbef;
       
       --g:var(--c1) 0 25%,var(--c2) 0 50%,#0000 0;
       background: 
         conic-gradient(from 135deg at 25% 75%, var(--g)) 
          calc(var(--s)/4) calc(var(--s)/-4), 
         conic-gradient(from -45deg at 75% 25%, var(--g))
          calc(var(--s)/-4) calc(var(--s)/4), 
         repeating-conic-gradient(var(--g));
       background-size: var(--s) var(--s);
     }

    .genre-effect-28{
       --s: calc(calc(var(--main-adjuster) * (50/400))/4); /* control the size*/
       --c1: #e08e79;
       --c2: #774f38;
       
       --c: var(--c1) 0 25%,var(--c2) 0 50%,#0000 0;
       background:
         conic-gradient(from 180deg,var(--c)) 
         0/var(--s) var(--s),
         repeating-conic-gradient(from 90deg,var(--c))
         0/calc(3*var(--s)) calc(3*var(--s));
     }

    .genre-effect-29{
       --s: calc(calc(var(--main-adjuster) * (6/400))/4); /* control the size*/
       --c1: #3b2d38;
       --c2: #f02475;
       
       --g:#0000 66%,var(--c1) 68% 98%,#0000;
       background:
         radial-gradient(30% 30% at 0%   30%,var(--g))
          var(--s) calc(9*var(--s)),
         radial-gradient(30% 30% at 100% 30%,var(--g))
          var(--s) calc(-1*var(--s)),
         radial-gradient(30% 30% at 30% 100%,var(--g))
          calc(10*var(--s)) 0,
         radial-gradient(30% 30% at 30% 0%  ,var(--g))
          var(--c2);
       background-size: calc(20*var(--s)) calc(20*var(--s));
     }

    .genre-effect-30{
       --s: calc(calc(var(--main-adjuster) * (160/400))/4); /* control the size*/
       --c1: #e08e79;
       --c2: #f1d4af;
       --c3: #955e3e;
       
       background:
         conic-gradient(from  15deg at 86.6%,
           var(--c3) 25%,var(--c2) 0 150deg,#0000 0),
         conic-gradient(from -75deg at 50% 13.39%,
           var(--c1) 60deg,var(--c3) 0 150deg,
           var(--c2) 0 210deg,#0000 0),
         conic-gradient(from 15deg at 36.6% 63.4%,
          var(--c1) 60deg,var(--c3) 0 150deg,
          var(--c1) 0 210deg,var(--c2) 0 75%,var(--c3) 0);
       background-size: var(--s) var(--s);
     }

    .genre-effect-31{
       --s: calc(calc(var(--main-adjuster) * (40/400))/4); /* control the size*/
       --c1: #ab3e5b;
       --c2: #f9f2e7;
       
       --_g:#0000 17.5%,var(--c1) 18% 35%,var(--c2) 35.5% 39%,#0000 40%;
       background:
         radial-gradient(at 100% 0,var(--_g))
          0       calc(var(--s)/-2)/calc(2*var(--s)) calc(2*var(--s)),
         radial-gradient(at 0 100%,var(--_g))
          calc(var(--s)/2) var(--s)/calc(2*var(--s)) calc(2*var(--s)),
         conic-gradient(#0000 75%,var(--c1) 0) 0 0/var(--s) var(--s) 
          var(--c2);
     }

    .genre-effect-32{
       --s: calc(calc(var(--main-adjuster) * (70/400))/4); /* control the size*/
       --c1: #655643;
       --c2: #80bca3;
       
       --g:,var(--c1) 25%,var(--c2) 0 50%,#0000 0;
       background:
         repeating-conic-gradient(var(--c1) 0 30deg,#0000 0 150deg,var(--c2) 0 50%)
          calc(1.5*var(--s)) calc(.865*var(--s)),
         conic-gradient(from  30deg at 75% 75%var(--g)),
         conic-gradient(from -30deg at 75% 25%var(--g)),
         conic-gradient(from 150deg at 25% 75%var(--g)),
         conic-gradient(from 210deg at 25% 25%var(--g)),
         repeating-conic-gradient(var(--c1) 0 30deg,var(--c2) 0 60deg);
       background-size: calc(3*var(--s)) calc(1.73*var(--s));
     }

    .genre-effect-33{
       --s: calc(calc(var(--main-adjuster) * (90/400))/4); /* control the size*/
       --c1: #696758;
       --c2: #eee6ab;
       
       --g:at calc(100%/3) 25%,#0000 75%,;
       background:
         conic-gradient(var(--g)var(--c1) 0),
         conic-gradient(var(--g)var(--c2) 0) 0 var(--s),
         repeating-conic-gradient(at calc(200%/3),
           var(--c1) 0 25%,var(--c2) 0 50%);
       background-size: var(--s) calc(4*var(--s)/3);
     }

    .genre-effect-34{
       --s: calc(calc(var(--main-adjuster) * (150/400))/4); /* control the size*/
       --c1: #633d2e;
       --c2: #f7af63;
       
       --l:var(--c1) 20%,#0000 0;
       --g:35%,var(--c2) 0 45%,var(--c1) 0;
       background:
         linear-gradient(45deg,var(--l) 45%,var(--c1) 0 70%,#0000 0),
         linear-gradient(-45deg,var(--l) var(--g) 70%,#0000 0),
         linear-gradient(45deg,var(--c1) var(--g));
       background-size: var(--s) var(--s);
     }

    .genre-effect-35{
       --s: calc(calc(var(--main-adjuster) * (50/400))/4); /* control the size*/
       --c1: #87bdb1;
       --c2: #d3e2b6;
         
       --c:#0000 75%,var(--c1) 0;
       --g1:conic-gradient(at calc(200%/3) 10%,var(--c));
       --g2:conic-gradient(at 10% calc(200%/3),var(--c));
       background:
         var(--g1), var(--g2),
         var(--g1) var(--s) var(--s),
         var(--g2) var(--s) var(--s),
         var(--g1) calc(2*var(--s)) calc(2*var(--s)),
         var(--g2) calc(2*var(--s)) calc(2*var(--s)) var(--c2);
       background-size: calc(3*var(--s)) calc(3*var(--s));
     }

    .genre-effect-36{
       --s: calc(calc(var(--main-adjuster) * (112/400))/4); /* control the size*/
       --c1: #490a3d;
       --c2: #f56991;
       
       --g1:conic-gradient(from -45deg at 60%,#0000 75%,var(--c1) 0);
       --g2:conic-gradient(from -45deg at 30%,#0000 75%,var(--c2) 0);
       background: 
         var(--g2) calc(var(--s)/8) 0,var(--g2) calc(5*var(--s)/8) var(--s),
         var(--g1),var(--g1) calc(var(--s)/2) var(--s) var(--c2);
       background-size: var(--s) calc(2*var(--s));
     }

    .genre-effect-37{
       --s: calc(calc(var(--main-adjuster) * (60/400))/4); /* control the size*/
       --c1: #1c2130;
       --c2: #d14334;
       
       --c:var(--c1) 0 25%,#0000 0;
       --p:0 0/calc(3*var(--s)) calc(2*var(--s));
       background:
         conic-gradient(from -45deg at 75% 62.5%,var(--c)) var(--p),
         conic-gradient(from 135deg at 25% 37.5%,var(--c)) var(--p),
         repeating-conic-gradient(from 90deg,var(--c),var(--c2) 0 50%)
          0 0/var(--s) var(--s);
     }

    .genre-effect-38{
       --s: calc(calc(var(--main-adjuster) * (90/400))/4); /* control the size*/
       --c1: #ecf081;
       --c2: #ab3e5b;
       
       background:
         conic-gradient(at 25% 75%,#0000 25%,var(--c1) 0)
          calc(var(--s)/-8) calc(var(--s)/8)/var(--s) var(--s),
         radial-gradient(50% 50%,var(--c1) 24%,var(--c2) 26% 74%,#0000 76%) 
          0 0/var(--s) var(--s),
         conic-gradient(var(--c1) 75%,var(--c2) 0) 
          calc(var(--s)/2) calc(var(--s)/2)/
          calc(2*var(--s)) calc(2*var(--s));
     }

    .genre-effect-39{
       --s: calc(calc(var(--main-adjuster) * (80/400))/4); /* control the size*/
       --c1: #d95b43;
       --c2: #a7dbd8;
         
       background:
         conic-gradient(from -30deg at 50% calc(100% - var(--s)/2),var(--c1) 60deg,#0000 0)
          calc(var(--s)/2) calc(var(--s)/6),
         conic-gradient(from 150deg at 50% calc(var(--s)/2)       ,var(--c2) 60deg,#0000 0)
          0 calc(var(--s)/-6),
         conic-gradient(from 150deg at 50% 0,var(--c1) 60deg,var(--c2) 0);
       background-size: var(--s) calc(var(--s)*cos(30deg));
     }

    .genre-effect-39{
       --s: calc(calc(var(--main-adjuster) * (120/400))/4); /* control the size*/
       --c1: #53777a;
       --c2: #fc9d9a;
         
       background:
         radial-gradient(var(--c1) 14%,var(--c2) 15% 30%,var(--c1) 31% 44%,var(--c2) 45% 60%,#0000 61%),
         linear-gradient( 45deg,#0000 46%,var(--c2) 0 54%,#0000 0),
         linear-gradient(-45deg,#0000 46%,var(--c2) 0 54%,#0000 0) var(--c1);
       background-size: var(--s) var(--s);
     }

    .genre-effect-40{
       --s: calc(calc(var(--main-adjuster) * (100/400))/4); /* control the size*/
       --c1: #955e3e;
       --c2: #f1d4af;
         
       --_g:var(--c1) 17.67%,#0000 0 82.33%,var(--c1) 0;
       background:
         linear-gradient( 45deg,var(--_g)),
         linear-gradient(-45deg,var(--_g)),
         conic-gradient(var(--c2) 75%,var(--c1) 0) 
          calc(var(--s)/4) calc(var(--s)/4);
       background-size: var(--s) var(--s);
     }


     .genre-effect-41{
     --s: calc(calc(var(--main-adjuster) * (50/400))/4); /* control the size*/
     --c1: #292522;
     --c2: #efd9b4;
     
     --c: #0000 75%,var(--c1) 0;
     --g1: conic-gradient(at 75% 25%,var(--c));
     --g2: conic-gradient(at 25% 75%,var(--c));
     background: 
       var(--g1),var(--g1) var(--s) var(--s),
       var(--g2),var(--g2) var(--s) var(--s) var(--c2);
     background-size: calc(2*var(--s)) calc(2*var(--s));
   }

     .genre-effect-42{
        background:
        radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) calc(var(--main-adjuster) * (9/400)), #613 calc(var(--main-adjuster) * (10/400)), rgba(96, 16, 48, 0) calc(var(--main-adjuster) * (11/400))) calc(var(--main-adjuster) * (0/400)) calc(var(--main-adjuster) * (10/400)),
        radial-gradient(at 100% 100%,      rgba(96, 16, 48, 0) calc(var(--main-adjuster) * (9/400)), #613 calc(var(--main-adjuster) * (10/400)), rgba(96, 16, 48, 0) calc(var(--main-adjuster) * (11/400))),
        #8a3;
        background-size: calc(var(--main-adjuster) * (20/400)) calc(var(--main-adjuster) * (20/400));
     }

     .genre-effect-43{
      background:
      linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, black 75%, black) 0 0,
      linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, white 75%, white) 1em 1em,
      linear-gradient(45deg, black 17%, transparent 17%, transparent 25%, black 25%, black 36%, transparent 36%, transparent 64%, black 64%, black 75%, transparent 75%, transparent 83%, black 83%) 1em 1em;
      background-color: white;
      background-size: 2em 2em;
     }

     .genre-effect-44{
      background-color: hsl(2, 57%, 40%);
      background-image: repeating-linear-gradient(transparent, transparent calc(var(--main-adjuster) * (50/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (50/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (53/400)), transparent calc(var(--main-adjuster) * (53/400)), transparent calc(var(--main-adjuster) * (63/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (63/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (66/400)), transparent calc(var(--main-adjuster) * (66/400)), transparent calc(var(--main-adjuster) * (116/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (116/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (166/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (166/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (169/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (169/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (179/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (179/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (182/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (182/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (232/400)), transparent calc(var(--main-adjuster) * (232/400))),
      repeating-linear-gradient(270deg, transparent, transparent calc(var(--main-adjuster) * (50/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (50/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (53/400)), transparent calc(var(--main-adjuster) * (53/400)), transparent calc(var(--main-adjuster) * (63/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (63/400)), rgba(0,0,0,.4) calc(var(--main-adjuster) * (66/400)), transparent calc(var(--main-adjuster) * (66/400)), transparent calc(var(--main-adjuster) * (116/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (116/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (166/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (166/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (169/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (169/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (179/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (179/400)), rgba(255,255,255,.2) calc(var(--main-adjuster) * (182/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (182/400)), rgba(0,0,0,.5) calc(var(--main-adjuster) * (232/400)), transparent calc(var(--main-adjuster) * (232/400))),
      repeating-linear-gradient(125deg, transparent, transparent calc(var(--main-adjuster) * (2/400)), rgba(0,0,0,.2) calc(var(--main-adjuster) * (2/400)), rgba(0,0,0,.2) calc(var(--main-adjuster) * (3/400)), transparent calc(var(--main-adjuster) * (3/400)), transparent calc(var(--main-adjuster) * (5/400)), rgba(0,0,0,.2) calc(var(--main-adjuster) * (5/400)));
     }

     .genre-effect-45{
        background-color: hsl(34, 53%, 82%);
        background-image: repeating-linear-gradient(45deg, transparent calc(var(--main-adjuster) * (5/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (5/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (10/400)),
          hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (10/400)), hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (35/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (35/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (40/400)),
          hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (40/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (50/400)), hsla(197, 62%, 11%, 0) calc(var(--main-adjuster) * (50/400)), hsla(197, 62%, 11%, 0) calc(var(--main-adjuster) * (60/400)),
          hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (60/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (70/400)), hsla(35, 91%, 65%, 0.5) calc(var(--main-adjuster) * (70/400)), hsla(35, 91%, 65%, 0.5) calc(var(--main-adjuster) * (80/400)),
          hsla(35, 91%, 65%, 0) calc(var(--main-adjuster) * (80/400)), hsla(35, 91%, 65%, 0) calc(var(--main-adjuster) * (90/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (90/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (110/400)),
          hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (110/400)), hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (120/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (120/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (140/400))
          ),
        repeating-linear-gradient(135deg, transparent calc(var(--main-adjuster) * (5/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (5/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (10/400)),
          hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (10/400)), hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (35/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (35/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (40/400)),
          hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (40/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (50/400)), hsla(197, 62%, 11%, 0) calc(var(--main-adjuster) * (50/400)), hsla(197, 62%, 11%, 0) calc(var(--main-adjuster) * (60/400)),
          hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (60/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (70/400)), hsla(35, 91%, 65%, 0.5) calc(var(--main-adjuster) * (70/400)), hsla(35, 91%, 65%, 0.5) calc(var(--main-adjuster) * (80/400)),
          hsla(35, 91%, 65%, 0) calc(var(--main-adjuster) * (80/400)), hsla(35, 91%, 65%, 0) calc(var(--main-adjuster) * (90/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (90/400)), hsla(5, 53%, 63%, 0.5) calc(var(--main-adjuster) * (110/400)),
          hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (110/400)), hsla(5, 53%, 63%, 0) calc(var(--main-adjuster) * (140/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (140/400)), hsla(197, 62%, 11%, 0.5) calc(var(--main-adjuster) * (160/400))
        );    
     }

     .genre-effect-46{
        background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),
         linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),
         linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;
         background-size: calc(var(--main-adjuster) * (25/400)) calc(var(--main-adjuster) * (25/400));
     }

     .genre-effect-47{
        background:
        radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)calc(var(--main-adjuster) * (21/400)) calc(var(--main-adjuster) * (30/400)),
        radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)calc(var(--main-adjuster) * (19/400)) calc(var(--main-adjuster) * (30/400)),
        linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
        linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
        linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
        linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
        background-size: calc(var(--main-adjuster) * (40/400)) calc(var(--main-adjuster) * (60/400));
     }

     .genre-effect-48{
          --s: calc(calc(var(--main-adjuster) * (60/400))/4); /* control the size*/
          --c1: #53777a;
          --c2: #cff09e;
          
          --g1:conic-gradient(at 37.5% 87.5%,#0000 75%,var(--c1) 0);
          --g2:conic-gradient(at 12.5% 62.5%,#0000 75%,var(--c2) 0);
          background:
            var(--g2) calc(  var(--s)/4) calc(  var(--s)/4),
            var(--g2) calc(5*var(--s)/4) calc(5*var(--s)/4),
            var(--g1),var(--g1) var(--s) var(--s) var(--c2);
          background-size: calc(2*var(--s)) calc(2*var(--s));
     }

     .genre-effect-49{
        background-color: #026873;
        background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
        linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
        linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
        linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
        background-size: calc(var(--main-adjuster) * (13/400)), calc(var(--main-adjuster) * (29/400)), calc(var(--main-adjuster) * (37/400)), calc(var(--main-adjuster) * (53/400));
     }

     .genre-effect-50{
        background-color:#556;
        background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
        linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
        linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
        linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
        linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
        linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
        background-size:calc(var(--main-adjuster) * (80/400)) calc(var(--main-adjuster) * (140/400));
        background-position: 0 0, 0 0, calc(var(--main-adjuster) * (40/400)) calc(var(--main-adjuster) * (70/400)), calc(var(--main-adjuster) * (40/400)) calc(var(--main-adjuster) * (70/400)), 0 0, calc(var(--main-adjuster) * (40/400)) calc(var(--main-adjuster) * (70/400));
     }




@media (min-width: calc(var(--main-adjuster) * (500/400))) {
   body{
      display: none;
   }
}