@import "tailwindcss";

:root {
    --radius-base:12px;


    --color-body: var(--color-gray-400);
  --color-body-subtle: var(--color-gray-400);
  --color-heading: var(--color-white);
  --color-fg-brand-subtle: var(--color-blue-200);
  --color-fg-brand: var(--color-blue-500);
  --color-fg-brand-strong: var(--color-blue-400);
  --color-fg-success: var(--color-emerald-600);
  --color-fg-success-strong: var(--color-emerald-300);
  --color-fg-danger: var(--color-rose-500);
  --color-fg-danger-strong: var(--color-rose-300);
  --color-fg-warning-subtle: var(--color-orange-500);
  --color-fg-warning: var(--color-orange-300);
  --color-fg-yellow: var(--color-yellow-400);
  --color-fg-disabled: var(--color-gray-600);
  --color-fg-purple: var(--color-purple-500);
  --color-fg-cyan: var(--color-cyan-500);
  --color-fg-indigo: var(--color-indigo-500);
  --color-fg-pink: var(--color-pink-500);
  --color-fg-lime: var(--color-lime-500);
  --color-neutral-primary-soft: var(--color-gray-900);
  --color-neutral-primary: var(--color-gray-950);
  --color-neutral-primary-medium: var(--color-gray-800);
  --color-neutral-primary-strong: var(--color-gray-700);
  --color-neutral-secondary-soft: var(--color-gray-900);
  --color-neutral-secondary: var(--color-gray-950);
  --color-neutral-secondary-medium: var(--color-gray-800);
  --color-neutral-secondary-strong: var(--color-gray-700);
  --color-neutral-secondary-strongest: var(--color-gray-600);
  --color-neutral-tertiary-soft: var(--color-gray-900);
  --color-neutral-tertiary: var(--color-gray-800);
  --color-neutral-tertiary-medium: var(--color-gray-700);
  --color-neutral-quaternary: var(--color-gray-700);
  --color-neutral-quaternary-medium: var(--color-gray-600);
  --color-gray: var(--color-gray-600);
  --color-brand-softer: var(--color-blue-950);
  --color-brand-soft: var(--color-blue-900);
  --color-brand: var(--color-blue-600);
  --color-brand-medium: var(--color-blue-900);
  --color-brand-strong: var(--color-blue-700);
  --color-success-soft: var(--color-emerald-950);
  --color-success: var(--color-emerald-600);
  --color-success-medium: var(--color-emerald-900);
  --color-success-strong: var(--color-emerald-700);
  --color-danger-soft: var(--color-rose-950);
  --color-danger: var(--color-rose-700);
  --color-danger-medium: var(--color-rose-900);
  --color-danger-strong: var(--color-rose-800);
  --color-warning-soft: var(--color-orange-950);
  --color-warning: var(--color-orange-600);
  --color-warning-medium: var(--color-orange-900);
  --color-warning-strong: var(--color-orange-700);
  --color-dark-soft: var(--color-gray-700);
  --color-dark: var(--color-gray-800);
  --color-dark-strong: var(--color-gray-700);
  --color-disabled: var(--color-gray-800);
  --color-purple: var(--color-purple-500);
  --color-sky: var(--color-sky-500);
  --color-teal: var(--color-teal-500);
  --color-pink: var(--color-pink-500);
  --color-cyan: var(--color-cyan-500);
  --color-fuchsia: var(--color-fuchsia-500);
  --color-indigo: var(--color-indigo-500);
  --color-orange: var(--color-orange-400);
  --color-buffer: var(--color-gray-950);
  --color-buffer-medium: var(--color-gray-900);
  --color-buffer-strong: var(--color-gray-800);
  --color-muted: var(--color-gray-900);
  --color-light-subtle: var(--color-gray-900);
  --color-light: var(--color-gray-800);
  --color-light-medium: var(--color-gray-700);
  --color-default-subtle: var(--color-gray-900);
  --color-default: var(--color-gray-800);
  --color-default-medium: var(--color-gray-700);
  --color-default-strong: var(--color-gray-600);
  --color-success-subtle: var(--color-emerald-900);
  --color-danger-subtle: var(--color-rose-900);
  --color-warning-subtle: var(--color-orange-900);
  --color-brand-subtle: var(--color-blue-900);
  --color-brand-light: var(--color-blue-600);
  --color-dark-subtle: var(--color-gray-700);
  --color-dark-backdrop: var(--color-gray-950);
    
    --color-brand: #134160;
    --color-brand-medium: var(--color-blue-900);
    --color-brand-strong: var(--color-blue-600);
    --color-highlight: #ff8;
    
    --color-success-soft:var(--color-emerald-50);
    --color-success:var(--color-emerald-700);
    --color-success-medium:var(--color-emerald-100);
    --color-success-strong:var(--color-emerald-800);
    --color-danger-soft:var(--color-rose-50);
    --color-danger:var(--color-rose-700);
    --color-danger-medium:var(--color-rose-100);
    --color-danger-strong:var(--color-rose-800);
    --color-warning-soft:var(--color-orange-50);
    --color-warning:var(--color-orange-500);
    --color-warning-medium:var(--color-orange-100);
    --color-warning-strong:var(--color-orange-700);
    --color-dark-soft:var(--color-gray-800);
    --color-dark:var(--color-gray-800);
    --color-dark-strong:var(--color-gray-900);

    --container-2xl: 42rem;
    --color-default-strong: var(--color-gray-600);
    

    --radius-0:0px;
    --radius-xxs:2px;
    --radius-base:12px;
    --color-lime-500: #3fa611;
    
  }

  .max-w-2xl{max-width:var(--container-2xl)}

  .bg-neutral-primary-soft {
    background-color: var(--color-neutral-primary-soft);
  }
  @view-transition {
    navigation: auto;
  }
  .rounded-s-base {
    border-start-start-radius: var(--radius-base);
    border-end-start-radius: var(--radius-base);
  }
  .rounded-e-base {
    border-start-end-radius:var(--radius-base);
    border-end-end-radius:var(--radius-base)
  }
  .bg-dark {
    background-color: var(--color-dark);
  }
  .bg-brand {
    background-color: var(--color-brand);
  }
  .bg-brand-strong {
    background-color: var(--color-brand-strong);
  }


  .bg-neutral-100 {
    background-color:var(--color-neutral-100)
  }
  .bg-neutral-primary {
    background-color:var(--color-neutral-primary)
  }
  .bg-neutral-primary-medium {
    background-color:var(--color-neutral-primary-medium)
  }
  .bg-neutral-primary-soft {
    background-color:var(--color-neutral-primary-soft)
  }
  .bg-neutral-primary-strong {
    background-color:var(--color-neutral-primary-strong)
  }
  .bg-neutral-primary\/95 {
    background-color:color-mix(in oklab,var(--color-neutral-primary)95%,transparent)
  }
  .bg-neutral-quaternary {
    background-color:var(--color-neutral-quaternary)
  }
  .bg-neutral-secondary {
    background-color:var(--color-neutral-secondary)
  }
  .bg-neutral-secondary-medium {
    background-color:var(--color-neutral-secondary-medium);
  }
  .bg-neutral-secondary-soft {
    background-color:var(--color-neutral-secondary-soft)
  }
  .bg-neutral-secondary-strong {
    background-color:var(--color-neutral-secondary-strong)
  }
  .bg-neutral-tertiary {
    background-color:var(--color-neutral-tertiary)
  }
  .bg-neutral-tertiary-medium {
    background-color:var(--color-neutral-tertiary-medium)
  }

  .border-default {
    border-color:var(--color-default)
  }
  .border-default-medium {
    border-color:var(--color-default-medium)
  }
  .border-default-strong {
    border-color:var(--color-default-strong);
  }

  .bg-neutral-primary-soft {
    background-color: var(--color-neutral-primary-soft);
  }.text-body {
    color: var(--color-body);
  }
  .text-body-subtle {
    color: var(--color-body-subtle);
  }
  .text-danger {
    color: var(--color-danger);
  }
  .text-danger-medium {
    color: var(--color-danger-medium);
  }
  .text-fg-brand {
    color: var(--color-fg-brand);
  }
  .text-fg-brand-strong {
    color: var(--color-fg-brand-strong);
  }
  .text-fg-brand-subtle {
    color: var(--color-fg-brand-subtle);
  }
  .text-fg-brand\/25 {
    color: color-mix(in oklab, var(--color-fg-brand) 25%, transparent);
  }
  .text-fg-brand\/50 {
    color: color-mix(in oklab, var(--color-fg-brand) 50%, transparent);
  }
  .text-fg-brand\/75 {
    color: color-mix(in oklab, var(--color-fg-brand) 75%, transparent);
  }
  .text-fg-brand\/100 {
    color: color-mix(in oklab, var(--color-fg-brand) 100%, transparent);
  }
  .text-fg-danger {
    color: var(--color-fg-danger);
  }
  .text-fg-danger-strong {
    color: var(--color-fg-danger-strong);
  }
  .text-fg-disabled {
    color: var(--color-fg-disabled);
  }
  .text-fg-success {
    color: var(--color-fg-success);
  }
  .text-fg-success-strong {
    color: var(--color-fg-success-strong);
  }
  .text-fg-warning {
    color: var(--color-fg-warning);
  }
  .text-fg-warning-subtle {
    color: var(--color-fg-warning-subtle);
  }
  .text-fg-yellow {
    color: var(--color-fg-yellow);
  }
  .text-neutral-primary {
    color: var(--color-neutral-primary);
  }
  .text-neutral-quaternary {
    color: var(--color-neutral-quaternary);
  }
  .text-neutral-tertiary {
    color: var(--color-neutral-tertiary);
  }
  .text-heading {
    color: var(--color-heading);
  }
  .rounded-base {
    border-radius: var(--radius-base);
  }
  .rounded-t-base {
    border-top-left-radius: var(--radius-base);
    border-top-right-radius: var(--radius-base);
  }
  .rounded-b-base {
    border-bottom-right-radius: var(--radius-base);
    border-bottom-left-radius: var(--radius-base);
  }
  .rounded-se-base {
    border-start-end-radius: var(--radius-base);
  }
  .rounded-ss-base {
    border-start-start-radius: var(--radius-base);
  }
  .rounded-es-base {
    border-end-start-radius: var(--radius-base);
  }
  .rounded-ee-base {
    border-end-end-radius: var(--radius-base);
  }
  

  html {
    font-family:"proxima nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .label--mp3 {
    background: #74b000;
    color: #fff;
  }
  .label {
    text-transform: uppercase;
    font-weight: 400;
    background: #f2ca27;
    color: #000;
    border: 0 solid transparent !important;
    padding: 0 4px;

    font-size: 100%;
    line-height: 20px;
  font-size: 100%;
  font-size: 16px;
  color: black;
  }
  .highlight {
    background-color: #ff8;
}
.highlight2 {
  background-color: #dda335;
}
  .label {
    display: inline;
    padding: .2em .6em .3em;
    
    font-weight: 400;
    line-height: 1;
  
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
  }
  .label {
    text-transform:uppercase;
    background:#f2ca27;
    color:#000;
    border:0 solid transparent!important;
    padding:0 4px;
    line-height:20px;
    font-size:100%
  }
  .label--wav {
    background:#006eb8;
    color:#fff
  }
  .label--zip {
    background:#f2ca27
  }
  .label--rar {
    background:#f2ca27
  }
  .label--mp3 {
    background:#74b000;
    color:#fff
  }
  .label--m4a {
    background:#40d47e
  }
  .zip:before {
    content:"found in:";
    display:block;
    font-size:12px;
    margin-bottom:-4px
  }

  .label--mp4 {
    background: linear-gradient(270deg, 
                 #ff0000,  
                 #ff7f00,  
                 #0000ff,  
                 #4b0082,  
                 #8f00ff, 
                 #ff0000,
                 #ff0000,
                 #ff0000
               );
     animation: rainbowShift 10s linear infinite; 
     color: white;
   text-shadow: 0 1px 2px rgba(0,0,0,0.4);
     background-size: 400% 400%;
     animation: rainbowShift 8s linear infinite;
   }
@keyframes rainbowShift {
     0% { background-position: 0% 50%; }
     100% { background-position: 100% 50%; }
   }

   .col-label {
    flex: 1 1 auto !important;
  padding-right: 0px !important;
  width: auto !important;
  margin: 0 15px;
   }
   .col-label::before {
    display: block;
    content: attr(data-label);
    font-size: 70%;
    text-transform: uppercase;
    opacity: .75;
    font-size:80%
  }

   .decoration-dotted,    .decoration-dashed {
    text-underline-offset: 5px;
   }

   .selected {
    background-color: var(--color-gray-700);
    background-color: color-mix(in oklab, var(--color-gray-600) 50%, transparent);
  }
   
   .pagination {
    
     align-items: center;
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
       margin-inline-start: calc(-1px * var(--tw-space-x-reverse));
       margin-inline-end: calc(-1px * calc(1-var(--tw-space-x-reverse)));
     }
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .pagination li.prev {
   
     border-start-start-radius: var(--radius-base);
     border-end-start-radius: var(--radius-base); 
   }
   .pagination li.next {
 
     border-start-end-radius: var(--radius-base);
     border-end-end-radius: var(--radius-base);
   }
   .pagination li {
     display: flex;
     cursor: pointer;
     align-items: center;
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: color-mix(in srgb, oklch(87.2% 0.01 258.338) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-gray-300) 30%, transparent);
     }
     background-color: var(--color-gray-600);
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 2);
     color: var(--color-gray-100);
     &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-900);
      }
    }
   }
   .pagination li.active {
     z-index: 10;
     background-color: var(--color-gray-50);
     color: var(--color-gray-900);
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-gray-100);
       }
     }
   }
   .pagination li.disabled, .pagination li.disabled a {
     cursor: not-allowed;
     opacity: 50%;
   }

   #LayoutSidebar ul li span { font-weight: bold; color: #d1d5dc }

   .hide {
    display:none !important;
   }

   .similarlistings .rounded,
   .tracklistings .rounded {
    border-radius: 0 !important;
   }
   button[aria-current=true] {
    color: orange;
   }

   .fa-fw {
    margin-right: 10px;
   }

   .border-buffer {
    border-color:var(--color-buffer)
  }
  .border-buffer-medium {
    border-color:var(--color-buffer-medium)
  }
  .border-danger {
    border-color:var(--color-danger)
  }
  .border-danger-strong {
    border-color:var(--color-danger-strong)
  }
  .border-danger-subtle {
    border-color:var(--color-danger-subtle)
  }
  .border-dark-strong {
    border-color:var(--color-dark-strong)
  }
  .border-default {
    border-color:var(--color-default)
  }
  .border-default-medium {
    border-color:var(--color-default-medium);
  }
  .border-default-strong {
    border-color:var(--color-default-strong)
  }

  h5, h3, h5 a, h3 a {
   /* font-weight: normal;*/
    /*color:var(--color-gray-100);*/
    
  }
  h5 span, h3 span {
   /* font-weight: bold;
    color:var(--color-gray-400);*/
  }

  .highlight, .highlight2 { 
    background-color: var(--color-yellow-200);
    border-radius: 5px;
    padding-inline: 4px;
    color: #000000;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.3) 0px 20px 25px -5px, oklab(0 0 0 / 0.3) 0px 8px 10px -6px;
/*    box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;*/
  }



  
  .waveform-animation {
    --size:112px;
    display:flex;
    justify-content:space-between;
    gap:calc(var(--size)/(var(--form-amount)*var(--form-amount)));
    width:calc(var(--size)/(var(--form-amount)*1.01)*var(--form-amount))
  }
  .waveform-animation.waveform-animation-stop span {
    animation-play-state:paused;
    -webkit-animation-play-state:paused
  }
  .waveform-animation span {
    height:100%;
    width:calc(var(--size)/var(--form-amount));
    background:rgba(255,255,255,.8196078431);
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    border-radius:8px
  }
  .waveform-animation.waveform-animation_even__oFONn {
    transform:rotate(180deg);
    height:var(--size)
  }
  .waveform-animation.waveform-animation_even__oFONn span:first-of-type {
    animation-name:waveform-animation_even-quiet__Yn24X
  }
  .waveform-animation.waveform-animation_even__oFONn span:nth-of-type(1n) {
    animation-name:waveform-animation_even-normal__jmrbP
  }
  .waveform-animation.waveform-animation_even__oFONn span:nth-of-type(2n+2) {
    animation-name:waveform-animation_even-quiet__Yn24X
  }
  .waveform-animation.waveform-animation_even__oFONn span:nth-of-type(3) {
    animation-name:waveform-animation_even-loud___J3Vt
  }
  @keyframes waveform-animation_even-quiet__Yn24X {
    25% {
      height:60%
    }
    50% {
      height:40%
    }
    75% {
      height:80%
    }
  }
  @keyframes waveform-animation_even-normal__jmrbP {
    25% {
      height:100%
    }
    50% {
      height:80%
    }
    75% {
      height:60%
    }
  }
  @keyframes waveform-animation_even-loud___J3Vt {
    25% {
      height:100%
    }
    50% {
      height:80%
    }
    75% {
      height:calc(100% + var(--form-amount)*1px)
    }
  }
  .waveform-animation.waveform-uneven {
    height:calc(var(--size)*1.2)
  }
  .waveform-animation.waveform-uneven span {
    transform:scaleY(.4)
  }
  .waveform-animation.waveform-uneven span:first-of-type {
    animation-name:waveform-quiet
  }
  .waveform-animation.waveform-uneven span:nth-of-type(1n) {
    animation-name:normal
  }
  .waveform-animation.waveform-uneven span:nth-of-type(2n+2) {
    animation-name:waveform-quiet
  }
  .waveform-animation.waveform-uneven span:nth-of-type(3) {
    animation-name:waveform-loud
  }
  @keyframes waveform-quiet {
    25% {
      transform:scaleY(.6)
    }
    50% {
      transform:scaleY(.4)
    }
    75% {
      transform:scaleY(.8)
    }
  }
  @keyframes waveform-normal {
    25% {
      transform:scaleY(1)
    }
    50% {
      transform:scaleY(.4)
    }
    75% {
      transform:scaleY(.6)
    }
  }
  @keyframes waveform-loud {
    25% {
      transform:scaleY(1)
    }
    50% {
      transform:scaleY(.4)
    }
    75% {
      transform:scaleY(1.2)
    }
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8 {
    position:fixed;
    left:env(safe-area-inset-left,0);
    width:100%;
    z-index:3;
    display:flex;
    justify-content:center
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8.waveform-animation_top__orBaX {
    top:calc(var(--nav-height) + 8px)
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8.waveform-animation_bottom__ZVqkI {
    bottom:calc(var(--player-height) + 8px)
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8.waveform-animation_right__MVUCg {
    justify-content:flex-end;
    padding:0 24px
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8.waveform-animation_left__h4Mpz {
    justify-content:flex-start;
    padding:0 24px
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8 .waveform-animation_WaveFormMessage__BLcKo {
    background:var(--color-white);
    padding:7px 15px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:8px
  }
  @supports((-webkit-backdrop-filter:none) or (backdrop-filter:none)) {
    .waveform-animation_WaveFormMessageContainer__hgtR8 .waveform-animation_WaveFormMessage__BLcKo {
      background:rgba(255,255,255,.8196078431);
      -webkit-backdrop-filter:blur(12px);
      backdrop-filter:blur(12px)
    }
  }
  .waveform-animation_WaveFormMessageContainer__hgtR8 .waveform-animation_WaveFormMessage__BLcKo p {
    font-size:12px
  }
  .music-showcase-list_MusicShowcaseList__tyT0C {
    display:flex;
    justify-content:space-between;
    align-items:center;
    transition:all .2s ease-in;
    padding:12px 20px;
    cursor:pointer;
    text-align:left;
    width:100%
  }
  @media(max-width:767.98px) {
    .music-showcase-list_MusicShowcaseList__tyT0C {
      padding:8px 0
    }
  }

  #waveform span[part="hover-label"] {
    transform: translateY(100%);
  }



  /* Hide default range styling */
       #filter_bpm input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            position: absolute;
            background: transparent;
            pointer-events: none;
            z-index: 2;
        }

        /* Custom track (hidden default) */
        #filter_bpm input[type="range"]::-webkit-slider-runnable-track {
            height: 2px;
        }

        /* Custom thumb styling (Centered) */
        #filter_bpm input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: white;
            border: 3px solid #23a9f7;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: auto;
            position: relative;
            z-index: 3;
            transform: translateY(-30%);
        }

        #filter_bpm input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: white;
            border: 3px solid #23a9f7;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: auto;
            z-index: 3;
            transform: translateY(-30%);
        }

        #filter_bpm input[type="range"]::-moz-range-progress {
          background: none;
        }

        /* Centering the range input itself */
        .slider-container {
            position: relative;
            height: 18px; /* Adjust height to fit thumb */
        }

        #Trending ol li:marker,
        .home ol li:marker {
          display: none
        }
        #Trending ol,
        .home ol {
          counter-reset: trending-list;
        }
        #Trending ol li,
        .home ol li {
          display: flex;
          counter-increment:  trending-list;
        }
        #Trending ol li::before , 
        .home ol li::before {
          content: counter(trending-list);
          position: relative;
          width: 60px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: rgba(255,255,255,.2);
            background-color: rgba(255, 255, 255, 0.2);
            background-position-x: 0%;
            background-position-y: 0%;
            background-repeat: repeat;
            background-attachment: scroll;
            background-image: none;
            background-size: auto;
            background-origin: padding-box;
            background-clip: border-box;
          color: #fff;
          margin-right: 8px;
          text-shadow: 0 0 2px rgba(0,0,0,.5);
          font-size: 20px;
          vertical-align: middle;
          padding: 0px 20px;
          border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
          border-width: 1px;
          border-style: solid;
          display: inline-block;
          min-width: 60px;
        }

        @media screen and (max-width: 1024px) {
          /* CSS rules to be applied when the screen width is 1024px or less */
          #Trending ol li::before , 
          .home ol li::before {
            display:none;
          }
          #Trending ol li , 
          .home ol li {
            border-bottom: 1px solid color-mix(in oklab, var(--color-white) 20%, transparent);
            padding-bottom: 6px;
          }
          
        }

        .secondline:empty {
          display:none;
        }

        body[data-page=INDEX] .bg-blend-multiply {
          background-blend-mode: overlay;
        }


        .index-top::before {
          content: "";
          width: 486px;
          height: 486px;
          border-radius: 486px;
          position: absolute;
          top: -14%;
          left: -30%;
          transform: rotate(105deg) translate3d(0, 0, 0);
          z-index: 0;
          background: linear-gradient(220deg, #b86fff 49.49%, #00a9ff 70.25%);
          filter: blur(127px);
        }
      /*  .index-top::before {
          opacity: .6;
          filter: blur(75px);
          box-shadow: 0 0 120px rgba(184,111,255,.6),0 0 200px rgba(0,169,255,.4);
        }*/

        .index-toolkits-slider::after {
        right: 0;
  background: linear-gradient(268.98deg, #421983 0.87%, rgba(66, 25, 131, 0) 69.85%);
        }

        .index-toolkits-slider::before, .index-toolkits-slider::after {
          content: "";
          position: absolute;
          bottom: 0;
          width: 146px;
          min-height: 600px;
          z-index: 3;
        }

        .tracklistings p, .similarlistings p {
          display: none;
        }


        #SearchPanel {
          animation: backgroundScroll 150s  ease-in-out infinite; 
          position: relative;
        
        }

       /* #SearchPanel::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          
          background-color: #000;
         
          
          transition: fadeInOutSpecific 10s ease-in-out;
        }*/
       

        @keyframes backgroundScroll {
          0% {
            background-position: 0 0; /* Start position */
          }
          50% {
            background-position: 100% 0; /* End position, moves one full width */
          }
          100% {
            background-position: 0 0; /* End position, moves one full width */
          }
        }
        @keyframes fadeInOutSpecific {
          0% {
            opacity: 0; /* Start completely invisible */
          }
          10% {
            opacity: 1; /* Fully visible at 10% of the animation duration */
          }
          90% {
            opacity: 1; /* Remains fully visible until 80% */
          }
          100% {
            opacity: 0; /* Fades out and is invisible by the end of the animation */
          }
        }
        


        .remixname span {
          font-weight: bolder;
        }

        .liquid {
          backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     
       box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      
        }


        .HeaderBottom, .HeaderBottom2 {
          background-image: linear-gradient(90deg,#c00 10%,#f28f68 20%,#e6d450 30%,#8bcf69 40%,#719fd1 50%,#cf82bf 60%,#4b4b4b 70%,#4b4b4b 80%,#000 90%,#000 100%);
          display: block;
          height: 5px;
          left: 0;
          /*opacity: .4;*/
          position: absolute;
          top: 55px;
          width: 100%;
          z-index: 6;
          position: relative;
  top: auto;
  left: auto;
        }


        .video-title {
          display: inline-block;
          white-space: nowrap;
       /*   animation: scroll-text 10s linear infinite;*/
        }
        
        @keyframes scroll-text {
          0% { transform: translateX(0%); }
          50% { transform: translateX(-100%); }
          100% { transform: translateX(0%); }
        }

        
        .marquee {
          margin: 0 auto;
          white-space: nowrap;
          overflow: hidden;
          position: absolute;
        }
        
        .marquee span {
          display: inline-block;
          padding-left: 100%;
        
        }

        .marquee:hover span {
    
          animation: marquee 5s linear infinite;
        }
        
        .marquee2 span {
          animation-delay: 2.5s;
        }
        
        @keyframes marquee {
          0% {
            transform: translate(0, 0);
          }
          100% {
            transform: translate(-100%, 0);
          }
        }



        .Videos {
          display: block;
          height: auto;
          width: 100%;
        }
        .Videos div.thumbnail {
          border: 1px solid #999;
          display: block;
          float: left;
          height: 110px;
          margin: 0px 10px 10px 0px;
          overflow: hidden;
          position: relative;
          width: 160px;
        }
        .Videos div.thumbnailBig {
          border: 1px solid #999;
          display: block;
          float: left;
          height: 240px;
          margin: 0px 10px 10px 0px;
          overflow: hidden;
          position: relative;
          width: 320px;
        }




        .middle {
          top: 50%;
          left: 0;
          -webkit-transform: translate3d(-50%, -50%, 0px);
          transform: translate3d(-50%, -50%, 0px);
          text-align: center;
          width: 100%;
          left: 50%;
          margin: 0 auto;
          position: fixed;
          -webkit-transition: all 2s ease-in;
          transition: all 2s ease-in;
          text-align: center;
          z-index: 999;
        }
        @-webkit-keyframes dirrty-spin {
          25% {
            -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                    transform: perspective(100px) rotateX(180deg) rotateY(0); }
        
          50% {
            -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                    transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
        
          75% {
            -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                    transform: perspective(100px) rotateX(0) rotateY(180deg); }
        
          100% {
            -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                    transform: perspective(100px) rotateX(0) rotateY(0); } }
        
        @keyframes dirrty-spin {
          25% {
            -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
                    transform: perspective(100px) rotateX(180deg) rotateY(0); }
        
          50% {
            -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
                    transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
        
          75% {
            -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
                    transform: perspective(100px) rotateX(0) rotateY(180deg); }
        
          100% {
            -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
                    transform: perspective(100px) rotateX(0) rotateY(0); }
        }
        @-webkit-keyframes flashingfade { 0%   { opacity:1; } 50%  { opacity:0; } 100% { opacity:1; } }
        @-moz-keyframes flashingfade { 0%   { opacity:1; } 50%  { opacity:0; } 100% { opacity:1; } }
        @keyframes flashingfade { 0%   { opacity:1; } 50%  { opacity:0; } 100% { opacity:1; } }
        
        .dirrty-spin img {
          display: inline-block;
          -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
          width: 60px;
          height: auto;
          -webkit-animation: dirrty-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
          animation: dirrty-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
        }
        .loading-text {
          font-size: 16px;
          margin-top: 10px;
          -webkit-animation: flashingfade 2s 0s ease-in-out infinite;
          animation: flashingfade 2s 0s ease-in-out infinite;
        }

        .video-container {
          position: relative;
          width: 100%;
          height: 320px;
          overflow: hidden;
        }

        .video-container video {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          transform: translate(-50%, -50%);
          object-fit: cover; /* This makes it behave like background-size: cover */
          z-index: -1;
        }
        ul.tracklistings {
          position:relative;
          counter-reset: trackitemx;
        } 

        .trackitemx {
          position: relative;
          list-style: none;
        }

        ul.tracklistings .trackitemx {
        padding-right: 20px;
        padding: calc(var(--spacing)*4) calc(var(--spacing)*10) calc(var(--spacing)*4) calc(var(--spacing)*4) !important;
        }

        ul.tracklistings > li.trackitemx::before {
          counter-increment: trackitemx;
          content: counter(trackitemx, decimal-leading-zero);
          height: 100%;
          
          max-width: 60px;
          width: 60px;
  
        
          display: inline-block;
          font-size: 30px;
          line-height: 60px;
          text-align: center;
          
          margin-right: 20px;
        }

        input[type="range"]
        {
          border-width: 0px !important;
        }

        .active {
          color:var(--color-orange-400);
          font-weight: var(--font-weight-bold);
        }


        #sitelist .site-title {
          line-height: 35px;
         /* font-size: 35px; */
          display: inline-block !important;
          font-family: proxima,helvetica neue,Helvetica,Arial,sans-serif;
          font-weight: 600;
          text-transform: none;
          vertical-align: middle;
          margin-left: -5px;
          color: #4962f4 !important;
          background-image: linear-gradient(90deg, #4464f4, #f309fe);
          background-size: 100%;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          -moz-background-clip: text;
          -moz-text-fill-color: transparent;
      }
      #sitelist { /* padding: 25px 0 25px; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; */}
      #sitelist .site-title { margin-left: 4px; /*font-size: 30px;*/ text-shadow: 1px 1px 3px rgba(0,0,0,0.1); }
      #sitelist .list-inline > li { margin-left: 10px !important;  margin-right: 10px !important; }
      #sitelist .site-logo { width: 30px; height: 30px; }
      .site-edmfresh .site-title { background-image: linear-gradient(90deg, #4464f4, #f309fe); margin-left: 2px; !important }
      .site-freshremix .site-title { background-image: linear-gradient(90deg, #fb8e01, #f9cb56) !important; }
      .site-beatport .site-title { background-image: linear-gradient(90deg, #8ccb09, #286f00) !important; }
      .site-scenedl .site-title { background-image: linear-gradient(90deg, #97d07e, #0088ff) !important; }
      .site-traxsource .site-title { background-image: linear-gradient(90deg, #3ea1ff, #073968) !important; }
      .site-zip .site-title { background-image: linear-gradient(90deg, #eded5a, #b06f1a) !important; }
      .site-musicdl .site-title { background-image: linear-gradient(90deg, #cc0000 0%, #cc0000 80%, #8f0000 100%) !important  ; }
      .site-zip .site-title { background-image: linear-gradient(90deg, #eded5a, #b06f1a) !important; }

.site-edmwaves .site-title { background-image: linear-gradient(90deg, #ccc, #999) !important; }
.site-videopool .site-title { background-image: linear-gradient(90deg, #ff3948 0 20%, #ff9800 20% 25%, #ffeb3b 30% 50%, #60b9fe 50% 75%, #92df93 75% 100%) !important }
.site-lossless .site-title { background-image: linear-gradient(90deg, #777, #ddd) !important }
.site-spotify .site-title { background-image: linear-gradient(90deg, #1ed760, #1ed760) !important; -webkit-text-stroke: 1px rgba(30,42,57,0.5,); }

.site-junodl .site-title::after {
  content: "dl";
  font-family: 'proxnov-light';
  color: #fff !important;
  background-image: none !important;
  position: fixed;
  top: 0;
  right: -10px;
  left: auto;
  bottom: 0;
  background: #7aa54b;
    background-image: none;
  -webkit-text-fill-color: white;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 25%;
  letter-spacing: 2px;
  position: absolute;
  right: 0;
  margin-right: -15px;
  line-height: 1.2;
}


.text-rotate {
  vertical-align:bottom;
  white-space:nowrap;
  --duration:var(--tw-duration);
  transition-property:none;
  display:inline-block;
  overflow:hidden
}
.text-rotate>* {
  height:calc(var(--items,1)*100%);
  justify-items:start;
  display:grid
}
.text-rotate>:has(:nth-child(2)) {
  --items:2;
  animation:rotator var(--duration,10s)linear(0 0% 49%,.5 50% 99%,1 100% 100%)infinite
}
.text-rotate>:has(:nth-child(3)) {
  --items:3;
  animation:rotator var(--duration,10s)linear(0 0% 32%,.333333 33% 65%,.666666 66% 99%,1 100% 100%)infinite
}
.text-rotate>:has(:nth-child(4)) {
  --items:4;
  animation:rotator var(--duration,10s)linear(0 0% 24%,.25 25% 49%,.5 50% 74%,.75 75% 99%,1 100% 100%)infinite
}
.text-rotate>:has(:nth-child(5)) {
  --items:5;
  animation:rotator var(--duration,10s)linear(0 0% 19%,.2 20% 39%,.4 40% 59%,.6 60% 79%,.8 80% 99%,1 100% 100%)infinite
}
.text-rotate>:has(:nth-child(6)) {
  --items:6;
  animation:rotator var(--duration,10s)linear(0 0% 15%,.16666 16% 32%,.333333 33% 49%,.5 50% 65%,.666666 66% 82%,.833333 83% 99%,1 100% 100%)infinite
}
.text-rotate>*>* {
  clip-path:inset(.5px 0);
  align-content:baseline
}
.text-rotate>*>:first-child {
  translate:var(--first-item-position)
}
.text-rotate:hover>* {
  animation-play-state:paused
}
.text-rotate {
  height:1lh
}


@keyframes rotator {
  89.9999%,
  to {
    --first-item-position:0 0%
  }
  90%,
  99.9999% {
    --first-item-position:0 calc(var(--items)*100%)
  }
  to {
    translate:0 -100%
  }
}