/* Reset default margin and padding */
/* version check 1.03 */
/* version check 1.03 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define CSS variables for easy customization */
:root {
	--main-logo:url('/theme_light/logo_test.png') no-repeat center/cover;
	--christmas-logo:url('/theme_light/christmas_logo.webp') no-repeat center/cover;
	--title-text:black;
	--white-text:white;
	--seperator-hor: 1px solid grey;
	--seperator-vert: 1px solid rgba(211, 211, 211, 1);
	--our_blue:#05668d;
  --our_blue_075opac:#05668d75;
  --secondary-bg: #505050;
  --border-radius: 8px;
  --text-color: #222;
	--green_playing:#1ed760;
	--orange_playing:orange;
  --header-height: 70px;
  --header-height: min(8vh, 70px);
	--header-height-mobile: 50px;
	--navigation-bar: 50px;
  --radio_box-height:360px;
  --radio_box-height: min(40vh, 360px);
  --radio_box-height-mobile:235px;
	--default-player: 60px;
	--default-player-mobile: 90px;
	--radios-size-mobile:120px;
	--progress-bar-size: 6px;
  --progress-thumb-hitbox: 20px;
  
  --sublist_calc: calc(100vh - var(--default-player) - var(--radio_box-height) );
  --sublist_allfiles: calc(100vh - var(--default-player) - var(--radio_box-height) + 30px );
  --sublist_calc-mobile: calc((var(--vh) * 100) - var(--default-player-mobile) - var(--radio_box-height-mobile)); 
  --bg5:#0b111f;
  --bg4:#17243f;
  --bg3:#4d7ad7;
  --bg-grey1:#b6b5b5;
  --bg-grey2:#b6b5b590;
  --bg-new_lblue:#ecfaff;
  --bg-new_lblue2:#ecfaff86;
  --text-title-d_blue:#0a2c75;
}
:root {
  --vh: 100%;
}

@media (max-width: 768px) {
  :root {
    --vh: 100vh; /* fallback */
  }
}

/* 🌞 Light Mode (Applied when `dark-mode` is OFF) */
body.light-mode {
    --title-text:black; 
	  --seperator-hor: 1px solid grey;
	  --seperator-vert: 1px solid lightgrey;
    --text-color: #222; /* Dark text */
    --color-close-to-bg:white;
    background:url('/theme_light/bg_main_light.webp') no-repeat center/cover; ;
}

body.dark-mode {
	  --title-text:#eeeeee; 
	  --seperator-hor: 1px solid grey;
	  --seperator-vert: 1px solid lightgrey;
    --text-color: #222; /* Dark text */
    background: linear-gradient(135deg, #0a1c31 0%, #4b243e 80%, #911733 150%);
    --color-close-to-bg:#3f233c;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

#bgVideo {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 0;
  opacity: 0.8;
  pointer-events: none; /* makes sure clicks go through */
}

/* Prevent text selection globally */
body, 
div, 
span, 
p, 
a, 
button,  
textarea, 
label {
    -webkit-user-select: none;  /* Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* Internet Explorer/Edge */
    user-select: none;          /* Standard */
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight in mobile browsers */
}
.our_social_title{
padding: 0px;
}
.our_social_title, #contact_info_title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  color: white;
}
.our_social_title h3,
#contact_info_title h3 {
  color: white;
}
.landscape-warning {
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  color: white;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}
#the_adv, #premium{
  display: none;
}
.logo-refresh {
  width: calc(var(--header-height)*2);           /* or whatever your logo size is */
  height: var(--header-height);
  width: calc(var(--header-height)*2 + 20px);    
  height: calc(var(--header-height) + 10px);
  /* height:90px;
  width:200px; */
  /* first try to use the real logo */
  background:var(--main-logo);
  /*background:var(--christmas-logo);*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  
  /* fallback bg color if the image is missing */
  
  
  /* and show the text in the very center */
  position: absolute;
  top:10px;
  left:10px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.25rem;
  color: black;
}



/* Full-width background */
.full-width {
    width: 100dvw;
	 height: var(--header-height);
    display: flex;
	align-items: center;
    justify-content: center; /* Center logo by default */
    position: relative;
    padding: 0;
	/* filter:blur(10px); */
  z-index: 10;
}


/* Ensure the body takes full height */
html, body {
    height: 100%;
    overflow: hidden; /* Prevent scrolling */
    font-family: "Roboto Condensed", sans-serif;
    background: var(--primary-bg);
    color: var(--text-color);
}

body, h1, h2, h3, h4, h5, h6, p, a, span, label, button {
    color: var(--text-color) ;
}

div {
    -webkit-tap-highlight-color: transparent; /* Disables the highlight */
}
#cart_full{
  height: (var(--vh) * 100);
  min-height: 100vh;
  width: 100dvw;
  background: rgba(211, 211, 211, 0.7); /* Semi-transparent background */
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  z-index: 35;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px;
}

#cart_interface{
  top:0;
  left:0;
display: none;
position:fixed;
width:100vw;
height:100vh;
z-index:30;
backdrop-filter: blur(5px);
}
#cart_inner_container{
  display: flex;
  flex-direction: row;
  overflow: clip;
}

#cart_list, #cart_actions{
  display: flex;
  flex-direction: column;
  width:100%;
  padding:10px 10px;
  font-size: 16px;
}
#sel_all{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  width:100%;
  padding:5px 10px;
  min-height:20px;
  cursor: pointer;
}
#sel_all_text{
  display: flex;
  height:20px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding-left: 10px;
}
#cart_display1{
  display: flex;
  width: 100%;
  padding:10px;
  padding-bottom:0px;
  font-size: 16px;
}
#cart_list_out{
  display:flex; 
  flex-direction: column;
  /* padding:15px 5px; */
  padding:10px 10px;
  gap:15px;
}
.discount-title{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding:10px;
  font-size: 18px;
}

.tier-wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;

}

.current-tier{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  height:80%;
  /* border: 1px solid grey; */
  border-radius: 6px;
  padding:3px;
}

.next-tier{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height:100%;
  /* border: 1px solid grey; */
  border-radius: 6px;
  padding:3px;
}
.current-tier{
  background-color:#85db6a;
  color:black;
}

.next-tier{
  background-color:#108c3be5;
  color: white;
}
.current-tier-amount{
  font-size: 18px;
}
.next-tier-amount{
  font-size: 22px;

}
.arrow-tier{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:30px;
  height:40px;
  padding:5px;
  font-size: 18px;
}

#cart_list_out_wrap{

  display: flex;
  background: rgba(255, 255, 250, 1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 10px 5px;
  font-size: 14px;
  min-height:160px;
  flex-direction: column;
}

#cart_player{

  display: flex;
  background: transparent;
  /* background: rgba(255, 255, 250, 0.8); */
  /* border: 1px solid rgba(255,255,255,0.25); */
  border-radius: 12px;
  /* box-shadow: 0 6px 18px rgba(0,0,0,0.12); */
  padding: 0px;
  font-size: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#cart_player_id{
  display: flex;
  width:100%;
  background-color: transparent;
  background: transparent;
  height: 34px;

}

#cart_actions_display{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height:100%;
  gap:20px;

}

#cart_list{
  min-width: 450px;
  max-height:300px;
  overflow-y: auto;
}
#cart_list {
  scrollbar-width: thin;        /* Firefox */
  scrollbar-color: #888 transparent; /* Firefox */
}

/* Chrome, Edge, Safari */
#cart_list::-webkit-scrollbar {
  width: 6px; /* thinner scrollbar */
}

#cart_list::-webkit-scrollbar-track {
  background: transparent; /* no track */
}

#cart_list::-webkit-scrollbar-thumb {
  background: #888;        /* color of bar */
  border-radius: 3px;      /* rounded */
}

#cart_list::-webkit-scrollbar-button {
  display: none; /* removes arrows */
}
.cart-row{
  display: flex;
  flex-direction: row;
  width:100%;
  justify-content: space-between;
  align-items: center;
  gap:15px;
}
.cart-row-wrapper{
    display: flex;
  flex-direction: row;
  width:100%;
  justify-content: space-between;
  overflow: clip;
  gap:15px;
}
.cart-row-name-wrapper{
    display: flex;
  flex-direction: row;
  width:100%;
  justify-content: space-between;
  overflow: clip;
  color:black;
}
.cart-row-name, .cart-row-station{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cart-row-name{
  justify-content: start;
  flex-direction: row;
  max-width:250px;
  font-size: 16px;
  text-overflow: ellipsis;
  cursor:pointer;
}
.get_green{
  color:#1DB954
}
.cart-row-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;          /* avoid font-based intrinsic sizing */
  line-height: 0;         /* no extra height from line box */
  transform: none !important;   /* kill inherited scales */
  zoom: 1 !important;           /* kill CSS zoom if used */


  width: 12px;           /* exact width */
  height: 12px;          /* exact height */
  border: 1px solid grey;
  border-radius: 50%;    /* perfect circle */
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}
.cart-row-checkbox:checked {
  background-color: transparent; /* light blue fill when checked */

}
.cart-row-checkbox:checked::after {
  content: "⬤";
  color: rgba(0, 0, 0, 0.9);
  font-size: 10px;
  position: relative;

}
#checkbox_credit {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;          /* avoid font-based intrinsic sizing */
  line-height: 0;         /* no extra height from line box */
  transform: none !important;   /* kill inherited scales */
  zoom: 1 !important;           /* kill CSS zoom if used */


  width: 14px;           /* exact width */
  height: 14px;          /* exact height */
  border: 1px solid grey;
  border-radius: 50%;    /* perfect circle */
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}
#checkbox_credit:checked {
  background-color: transparent; /* light blue fill when checked */

}

#checkbox_credit:checked::after {
  content: "⬤";
  color: rgba(0, 0, 0, 0.9);
  font-size: 12px;
  position: relative;

}

.cart-select-all-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;          /* avoid font-based intrinsic sizing */
  line-height: 0;         /* no extra height from line box */
  transform: none !important;   /* kill inherited scales */
  zoom: 1 !important;           /* kill CSS zoom if used */


  width: 12px;           /* exact width */
  height: 12px;          /* exact height */
  border: 1px solid grey;
  border-radius: 50%;    /* perfect circle */
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
}
.cart-select-all-checkbox:checked {
  background-color: transparent; /* light blue fill when checked */

}

.cart-select-all-checkbox:checked::after {
  content: "⬤";
  color: rgba(0, 0, 0, 0.9);
  font-size: 10px;
  position: relative;

}

.cart-row-station{
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  max-width: 95px;
}

.cart-row-remove{
  display: flex;
  width: 20px;
  height:20px;
  /* border: 1px solid red; */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color:red;
  font-size: 14px;
}

#cart_inner{
  display:flex;
  position: relative;
  flex-direction: column;
  min-width:800px;
  min-height:150px;
  background: rgba(211, 211, 211, 0.8);

  border-radius:10px;
  /* padding:20px; */
  font-size: 20px;
  overflow: clip;
}

#cart_inner2{
  display:none;
  position: relative;
  flex-direction: column;
  min-width:800px;
  min-height:150px;
  background-color: #ffffff40;
  backdrop-filter: blur(5px);
  border-radius: 8px;

  font-size: 20px;
  overflow: clip;
}

#cart_inner_title{
  padding:15px 15px 15px 15px;
  background:rgba(100, 100, 100, 0.8);
  color:white;
}
#cart_button{
display: flex;
position:fixed;
width:60px;
height:60px;
top:0px;
right:60px;
z-index:11;
/* border:1px solid red; */
cursor:pointer;
background: url('/icon/cart/cart4.svg') no-repeat center center;
background-size: 40%;
 transition: transform 0.2s ease;
padding:12px;
}
#cart_button.white_circle{
  background: url('/icon/cart/cart4_white.svg') no-repeat center center;
  background-size: 45%;
}

#cart_button:not([data-number="0"])::after {
  display: flex;
  content: attr(data-number) "";
  position: absolute;
  width: max-content;
  bottom: 10px;
  right: 0px;
  /* transform: translateX(-50%); */
  background: green;
  color: white;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  /* border: 1px solid green; */
  white-space: nowrap;
}


#cart_button:hover{
  transform: scale(1.05);
}
#cart_button[data-number="0"]{
  cursor: pointer;
  transform: unset;
}
#cart_button[data-d_check="0"]{
  display:none;
}
#big_cart2[data-d_check="0"]{
  display:none;
}
.cart-actions-card, .cart-discount-card{
  display: flex;
  background: rgba(255,255,255,1);
  /* border: 1px solid rgba(255,255,255,0.25); */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 12px 14px;
  font-size: 14px;
  width:300px;
  flex-direction: column;
  height: 100%;
}

#credits_left{
  display: flex;
  background: rgba(255,255,255,1);
  /* border: 1px solid rgba(255,255,255,0.25); */
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 12px 14px;
  font-size: 14px;
  width:300px;
  flex-direction: row;
  height: fit-content;
  justify-content: space-between;
  align-items: center;
}
#credits_left[data-number="0"]{
  display:none;
}
#credits_left[data-number=null]{
  display:none;
}
.cart-discount-card{
  justify-content: space-evenly;

}
#cart_display{
  display: none;
  position: fixed;
  height: 50px;
  top: 10px;
  right: 120px;
  z-index: 31;
  /* border:1px solid red; */
  flex-direction: row;
  justify-content: end;
  align-items: center;
  font-size: 20px;
  transition: transform 1s ease; 
  overflow: clip;
}
.cart_display_inner{
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:center;
  transform:translateX(0);
  transition: transform 1s ease 3s; /* includes the 3s delay */
  will-change: transform;

}
.cart_display_inner.cart_animation{

  transform: translateX(120%);/* move to the right off-screen */
}

.cart-actions-card .the_row, .cart-actions-card .cart_summary, .cart-actions-card .cart_total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}
.cart-actions-card .the_row[data-tracks_number="0"] {
  display: none;
}
.cart-actions-card .title {
  font-weight: 700;
  font-size: 15px;
}
#credits_left .title2 {
  display: flex;
  font-weight: 700;
  font-size: 15px;
  gap:5px;
  justify-content: center;
  align-items: center;
}
.the_price, .you_saved{
  padding-right:5px;
}
#credits_left .pill{
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.35);
}
.for_the_credit .pill{
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.35);
}
.cart-actions-card .pill {
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(59,130,246,0.15);
  border: 1px solid rgba(59,130,246,0.35);
}

.cart-actions-card .discount {
  background: rgba(16,185,129,0.18);
  border-color: rgba(16,185,129,0.35);
}

.cart-actions-card .muted {
  color: rgba(0,0,0,0.9);
}

.cart-actions-card .total {
  font-size: 18px;
  font-weight: 800;
}

.cart-actions-card .sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
  color:black;
}

.cart-actions-card .actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.cart-actions-card .btn {
  flex: 1;
  /* height: 80px; */
  border-radius: 10px;
  background: linear-gradient(180deg, #0f883a, #14a146);
  background: linear-gradient(180deg, #0f3588, #1469a1);
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  border: none;
  cursor: pointer;
  text-wrap: wrap;
  padding: 20px 10px;
}



#follow_the_mouse{
  display:none;
  position:fixed;
  top:10px;
  left:10px;
  pointer-events:none;
  z-index:9999;
  padding:6px 8px;
  /* border: 1px solid red; */
  border-radius:6px;
  background:#cccccc;
  color:#000;
  font-size:14px;
  font-weight: 600;
}



/* Fallback logo styling */
.fallback-logo {
    font-size: 24px;
    font-weight: bold;
    
    
    padding: 10px 20px;
    
}
#login-form {
    height: (var(--vh) * 100);
    min-height: 100vh;
    width: 100dvw;
    background: rgba(211, 211, 211, 0.7); /* Semi-transparent background */
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 25px;
}
#settings-full{
    height: (var(--vh) * 100);
    min-height: 100vh;
    width: 100dvw;
    background: rgba(211, 211, 211, 0.7); /* Semi-transparent background */
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 25;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 25px;
	
}
#settings-full2{
    height: (var(--vh) * 100);
    min-height: 100vh;
    width: 100dvw;
    background: rgba(211, 211, 211, 0.7); /* Semi-transparent background */
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 35;
    flex-direction: row;
    justify-content: end;
    align-items: center;

    /* padding: 25px; */
	
}

#settings-display{

  background: var(--bg3);
  background: white;
  /* background-image: url('/bg-images/female-singer.webp'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  width: 90vw;
  height: 90vh;
  /* height: 220px; */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  overflow: clip;
  position: relative;
  justify-content: flex-start;
  align-items: stretch; 
  box-shadow: 0 0 20px var(--bg4);

}

#settings-display2_out{
  display: flex;
  background: white;
  position: relative;
  width:auto;
  height: 100dvh;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px var(--bg4);
  padding:60px 20px 20px 20px;
  border-radius: 10px 0px 0px 10px;
  overflow: auto;
  overflow-y: auto;
}

#settings-display2{
  /* display: grid; */
  /* grid-template-columns:320px minmax(600px, 830px) 320px; 
  grid-template-columns:320px auto 320px;  */
  grid-template-columns:auto 320px; 
  position: relative;
  gap:20px;
  width: 100%;
  height:100%;
  display: flex;

}
#close-settings-display2{
  display: flex;
  position: absolute;
  top:20px;
  right:20px;
  width:20px;
  height:20px;
  /* background-image: transparent; */
  background-image: url(/icon/small/X1_black.svg);
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
#big_cart{
  display: flex;
  position: absolute;
  top:-35px;
  right:5px;
  width:30px;
  height:30px;
  /* background-image: transparent; */
  background-image: url(/icon/cart/cart4.svg);
  background-position: center;
  background-size: contain;
  cursor: pointer;
}
#wrap_options{
  display: grid;
  display: none;
  grid-template-columns:1fr 1fr;
  gap:15px;
  width: 100%;
}
#big_cart2{
  display: flex;
  position: relative;
  height:45px;
  width: 100%;
  padding:10px;
  padding-right:60px;
  border: 1px solid #8fd0f9e0;
  background-color: var(--bg-new_lblue2);
  box-shadow: 0 0 7px var(--bg-new_lblue);
  border-radius: 10px;
  gap:20px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-title-d_blue);
  cursor: pointer;
}
#go_subs{
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height:45px;
  width: 100%;
  padding:10px;
  border: 1px solid #8fd0f9e0;
  background-color: var(--bg-new_lblue2);
  box-shadow: 0 0 7px var(--bg-new_lblue);
  border-radius: 10px;
  gap:20px;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-title-d_blue);
  cursor: pointer;
}

.big_cart2{
  position: absolute;
  display: flex;
  top:0px;
  right:10px;
  width:40px;
  height:40px;
  /* background-image: transparent; */
  background-image: url(/icon/cart/cart4.svg);
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  padding:0px;
}


.big_cart2:not([data-number="0"])::after {
  display: flex;
  content: attr(data-number) "";
  position: absolute;
  width: max-content;
  bottom: 0px;
  right: -5px;
  /* transform: translateX(-50%); */
  background: green;
  color: white;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  /* border: 1px solid green; */
  white-space: nowrap;
}

#left-display, #right-display{
  display: flex;

}


#left-display{
  display: none;
  flex-direction: column;
  width:100%;
  gap:20px;
  justify-content: center;
  align-items: center;
  
}

.sub-displays{
  display: flex;
  width:100%;
  height: 140px;
  border:1px solid #8fd0f9e0;
  border-radius: 15px;
  box-shadow: 0 0 7px var(--bg-new_lblue);

  background-color: #f4fcfe50;

  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  cursor: pointer;

}
.sub_box_button{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top:10px;
  padding:10px 25px;
  border:1px solid #8fd0f9e0;
  border-radius: 15px;
  background: linear-gradient(to top, #e7f6ff, #f1faff);
  font-size: 24px;
  font-weight: 600;
  color:#096fc4;
  width:240px;
  height:75px;
  cursor: pointer;
}


.sub-displays-selected{
  background: linear-gradient(to top, #e2f4ff, #f6fcff);
  cursor: default;
}
#center-display{
  display: none;
  flex-direction: column;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0 0 7px var(--bg4); */
  /* min-width:830px; */
  width: 100%;
  grid-column: 1 / 3;
}


#left-display-sub2{
 display: none;
}

#right-display{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:100%;
  width:100%;
  position: relative;
  gap:15px;
  grid-column: 3 / 4;
}

#right-display-inner{
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding:15px;
  /* border:1px solid black; */
  border-radius: 30px;
  box-shadow: 0 0 7px var(--bg-new_lblue);
  gap:0px;
  background-color: #ecfaff;
  height:100%;
  width:100%;
  position: relative;
}
@media screen and (max-height: 730px) {
  #settings-full2{
    padding: 10px;
  }
  #settings-display2_out{
    height: 100vh;
    width: 100vw;
  }
}

#opened_settings{
  display:none;
  position: relative;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding:15px;
  /* border:1px solid black; */
  border-radius: 30px;
  box-shadow: 0 0 7px var(--bg-new_lblue);
  gap:15px;
  background-color: #ecfaff;
  height:100%;
  min-height: 50vh;
  width:100%;
  width:calc(100dvw - 40px);
  grid-column: 1 / 4;
}
#opened_settings_row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: start;
  width: 100%;
  gap: 20px; /* row gap, column gap */


}

#opened_settings_inner_Account {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto auto;
  gap: 0px; /* row gap, column gap */
  padding: 0px;

}

#opened_settings_inner_Subs{
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto auto;
  grid-auto-rows: minmax(32px, auto);
  gap: 15px; /* row gap, column gap */
  padding: 0px;

}
#opened_settings_inner_License {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto auto auto;
  grid-auto-rows: minmax(32px, auto);
  gap: 15px; /* row gap, column gap */
  padding: 0px;

}

#opened_settings_inner_Subs input{
  display: flex;
 width:100px;
 padding: 0px;
 justify-content: center;
}
#opened_settings_inner strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  padding: 5px;
  margin:0px;
}
.edit_btn{
  height:30px;
  display: flex;
  background-image: url("../icon/small/edit.svg"); /* replace with your icon path */
  background-position: center;
  background-size: 50%;
  background-repeat: no-repeat;
  opacity: 0;
}
.str_red{
  color:red;
}
.str_green{
  color:green;
}
.switch_sub{
  padding:5px 10px; 
  cursor:pointer;
  background-color: #6fd68e;
  border-radius: 6px;
  font-size: 18px;
  color:black;
}
.switch_sub.cancel_sub{
  padding:5px 10px; 
  cursor:pointer;
  background-color: #d62a2a;
  border-radius: 6px;
  font-size: 18px;
  color:white;
}

.settings_input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin:0px !important;
}
#opened_settings h3{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  color:var(--text-title-d_blue);
  width: 100%;
}
.opened_settings_title {
  grid-column: 1 / 4; /* spans from column 2 up to (but not including) 4 */
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 5px 0;
  color: var(--text-title-d_blue);
}
.opened_subs_title{
  grid-column: 1 / 4; /* spans from column 2 up to (but not including) 4 */
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  padding: 5px 0;
  color: var(--text-title-d_blue);
  
}
.none_license{
  grid-column: 1 / 4; /* spans from column 2 up to (but not including) 4 */
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: black;
}
#opened_settings_close{
  display: flex;
  position: absolute;
  bottom:10px;
  left:50%;
  transform: translateX(-50%);
  flex-direction: column;
  cursor: pointer;
  padding:10px 20px;
  border-radius: 10px;
  font-size: 20px;

  background-color:  var(--text-title-d_blue);
  color:white;


}
#settings_close_x{
  display: flex;
  position: absolute;
  top:10px;
  right:10px;
  cursor: pointer;
  width:30px;
  height:30px;
  background: url('/icon/small/X1_black.svg') no-repeat center center;
  background-size: 70%;
  opacity: 0.7;
  padding: 10px;
  cursor: pointer;
  z-index: inherit;
}

#nav-bar-top{
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  height:50px;
  background-color: var(--bg4);
}

.nav-bar-top-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color:#909090;
  /* border:1px solid white; */
  cursor:pointer;
  flex:1 1 30%;
  font-size: 22px;
  font-weight: 600;
}

.nav-bar-top-btn.is_open{
  color:white !important;
  font-size: 24px;
}
#settings_con_wrapper{
  display: flex;
  flex-direction: column;
  width:100%;
  flex:1 1 50%;
}
#settings_con{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  /* flex:1 1 50vh; */
  width:100%;
  padding: 2vh;
  gap:50px;
}

#settings_left{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  background-color: #b6b5b5;
  background-color: var(--bg-grey1);
  border-radius:8px;
}

#profile_card{
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  /* background-color: var(--bg-grey2); */
  border-radius: 5px;
  padding: 10px 0px;
  width:100%;
  gap:10px;
}
#profile_card_title{
  display:flex;
  justify-content: center;
  align-self: center;
  font-size: 30px;
  font-weight: 600;
  color: var(--text-title-d_blue);
  margin-bottom: 30px;
}
#profile_card_pic{
  display: flex;
  width:60px;
  height:60px;
  border:1px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 14px white; /* small white glow */
}
.logged_default{
    width:60px !important;
    height:60px !important;
    background-color: #1DB954;
    background-image: url(/icon/small/icon_black.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#profile_card_info {
  display: grid;

  grid-auto-flow: row;     /* one item per row */
  grid-auto-rows: auto;    /* each row fits content */
  width: max-content;      /* fit to the widest child */
  /* border: 2px solid black; */
 
}

.profile_card_buttons_settings_s{
  display: flex;
  position: absolute;
  top:15px;
  right:10px;
  flex-direction: column;
  width:40px;
  height:40px;
  background-image: url('/icon/small/settings1.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  will-change: transform;
}


.profile_card_buttons_settings_s:hover{
  animation: spin 1s ease-in-out ;
}
@keyframes spin{
  to { transform: rotate(360deg); }
}
.card_info_item{
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  height:30px;
  font-size: 20px;
  color:black;
}
.card_info_item#profile_card_info_log_method{
    font-size: 16px;
}
.card_info_item#profile_card_info_email{
  width:100%;
  display: flex;
  justify-content: start;
  align-items: start;
}

#profile_card_logout{
  display: flex;
  width:100%;
  justify-content: end;
  align-items: center;
  /* text-decoration: underline; */
  color:red;
  cursor: pointer;
}
#profile_card_body{
  margin-top: 20px;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: var(--bg-grey2); */
  border-radius: 5px;
  width:100%;
}

#profile_subscription, #profile_cart_review{
  display: flex;
  position:relative;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 15px;
  color:black;
}
#profile_cart_review{
  flex-direction: row;
}
#profile_cart_review::after {
  content:"Cart: "attr(data-number) " tracks";            /* e.g., 129 */
}
#profile_cart_review[data-number="1"]::after {
  content: "Cart: 1 track";                      /* when it's 0 */
}
#profile_cart_review[data-number="0"]::after {
  content: "Your cart is Empty";                      /* when it's 0 */
}
#profile_cart_review.disabled_for{
  display: none;                   
}

#profile_subscription.valid_sub{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  padding-bottom: 5px;
  color:var(--green_playing);
}
#dis_sub_status.valid_sub{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color:var(--green_playing);
}
#dis_sub_status_wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap:5px;
}
#profile_subscription.invalid_sub{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  color:red;
}
.exp_date{
  display: flex;
  display: none;
  justify-content: center;
  align-items: center;
  color:black;
  padding:0px 15px;
  max-width: 240px;
}
#profile_email_review{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:10px 0px;
  padding:5px;
  width: 100%;
  border: 2px solid red;
  border-radius: 5px;
}
.verification_title{
  font-size: 18px;
  color:red;
}
.verification_subtitle{
  padding-top:10px;
}
.verification_email_print{
  padding-top:5px;
  color: var(--text-title-d_blue);
  font-weight:600;
}
.verification_subtitle2{
  display: none;

}
.verification_wrapper{
  display: flex;
  width: 100%;
  justify-content: end;
  align-items: end;
  padding-top:5px;
}
.verification_send_again{
  display: block;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.verification_send{
  display: none;
  flex-direction: row;
  width: 100%;
  justify-content: end;
  align-items: center;
  padding-top:5px;
  cursor: default;
  color:green;
}


#settings_center_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}

#settings_center {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  gap: 20px;
  height:100%;
  width:100%;

}

#settings_center_title, #cart_center_title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 2.4vh;
  font-weight: 600;
  color:black;
}
#settings_center_title{
  display: none !important;
}
#revolut_placeholder{
  display: none;
}

#settings_center_main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  /* border:1px solid green; */
  gap:20px;
  /* background-color: var(--bg-grey2); */
  border-radius: 5px;
  
}

#settings_center_main h3{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  color:var(--text-title-d_blue);
}
#settings_center_sub_options{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width:100%;
  gap:20px;
}


.sub_option input[type="radio"] {
  display: none; /* hide the default radio button */
}

.sub_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #8fd0f9e0; 
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  flex:1 1 350px;
  max-width: 300px;
  height:570px;
  transition: all 0.2s ease;
  background:transparent;
  color:black;
  gap:1vh;
  /* box-shadow: 0 0 10px grey; */
}
.sub_option input[type="radio"]:checked + .sub_box {
  border-color: var(--green_playing);
  background:white;
  box-shadow: 0 0 14px var(--green_playing);
}
.sub_box_title{
  display: block;

  width:100%;
  color:var(--text-title-d_blue);
  font-size: 30px;
  font-weight: 600;
}
.sub_box_title_wrap{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.sub_box_price{
  width:100%;
  color:var(--text-title-d_blue);
  font-size: 18px;
  font-weight: 400;

}
.sub_box_text{
  display: block;
  width:100%;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
}
.sub_box_text_and_button{
  display: flex;
  width:100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:5px;
}
.sub_option input[type="radio"]:checked + .sub_box .sub_box_title,
.sub_option input[type="radio"]:checked + .sub_box .sub_box_price,
.sub_option input[type="radio"]:checked + .sub_box .sub_box_text {
  color: black;
}
#proceed_terms{
  display: flex;
  position: absolute;
  bottom:3px;
  right:4px;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  color:white;
}
#proceed_terms a{
  color:white;
}
#proceed_button{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* border: 1px solid; */
  border-radius:8px;
  padding:10px 20px;
  background: linear-gradient(180deg, #0f883a, #14a146);
  color:white;
  cursor: pointer;
  width:200px;
  margin-top:2vh;
}


#settings_center_liscence{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  font-size: 20px;
  font-weight: 400;
  background-color: var(--bg-grey2);
  border-radius: 5px;
  width: 100%;
  padding: 2vh;
}

#cart_center{
  display:flex;
  position: relative;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  /* background-color: #ffffff40;*/
  background-color: var(--bg-grey2);  
  background: linear-gradient(to top, #e7f6ff, #f1faff);
  backdrop-filter: blur(4px);
  border-radius:24px;
  padding: 1.5vh 3vh 3.5vh 3vh;

  gap:20px;
  height:100%;

  /* min-width:830px; */
}

#cart_close{
  display:flex;
  position: absolute;
  width:20px;
  height: 20px;
  /* border: 1px solid green; */
  top:1.5dvh;
  right:1.5dvh;
  background: url('/icon/small/X1_black.svg') no-repeat center center;
  background-size: contain;
  opacity: 0.7;
  cursor: pointer;

}

#verify_close{
  display:none;
  position: absolute;
  width:20px;
  height: 20px;
  /* border: 1px solid green; */
  top:1.5dvh;
  right:1.5dvh;
  background: url('/icon/small/X1_black.svg') no-repeat center center;
  background-size: contain;
  opacity: 0.7;
  cursor: pointer;

}

#center-license{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  height: calc(90vh - 120px);  
  gap:20px;
  border-radius: 5px;
  box-sizing: border-box;
  margin-inline: auto; 
}
#center-license h3{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  color:var(--text-title-d_blue);
}
.transfer_site{
  width: 830px;          /* constant width */
  height: 90%;           /* needs parent to have a height */
  box-sizing: border-box;
  margin-inline: auto;   /* center horizontally if wanted */
}
#center-license iframe{
  width: 100%;
  height: 100%;
  border: 0;
}
#center-the-actuall-settings{
  display: none;
}
#cart_results{
  display: none;
  font-size: 26px;
  white-space: pre-line;
  text-align: center;
}
#cart_results h3{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  color:var(--text-title-d_blue);
}
#inner-form {

  background: var(--bg3);
  background: white;
  /* background-image: url('/bg-images/female-singer.webp'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: fill;
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: 100%;
  /* height: 220px; */
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  justify-content: space-between;
  align-items: center; 
  gap:15px;
  flex-wrap: wrap;
  box-shadow: 0 0 20px var(--bg4);

}
#inner-form-top{
  display: flex;
  flex:1 1 50%;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}


#inner-form-l, #inner-form-r{
  display: flex;
  /* max-width: 50%; */
  /* border:1px solid red; */
  flex-direction: column;
  background-color: #ffffff40;
  /* backdrop-filter: blur(5px); */
  min-height:550px;
  min-width:300px;
  justify-content: center;
  align-items: center;
  padding:15px;
  padding-bottom: 30px;

  gap:15px;
  border-radius: 8px;

}

#inner-form-r{
  display: flex;
  position: relative;
  padding-left:50px;
}
#inner-form-l {
  transition: transform 0.7s linear;
  transform-style: preserve-3d;
}
#inner-form-l.spin {
  transform: rotateY(90deg) skewY(5deg) scaleY(0.9);
}
#inner-form-r {
  transition: transform 0.7s linear;
  transform-style: preserve-3d;
}
#inner-form-r.spin {
  transform: rotateY(90deg) skewY(5deg) scaleY(0.9);
}

#new_acc_title{
  padding-right:35px; /* add so that the title is centered */
}
.email-taken-msg{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right:35px; 
  color:white;
}
#email-taken-row1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding:5px;
  font-size: 20px;
  font-weight: 600;
}
#email-taken-row1 span{
  color:red;
  padding:5px;
  font-size: 20px;
  font-weight: 600;
}
#email-taken-row2 span{
    color:white;
   text-decoration: underline;
   cursor: pointer;
}
.social-login-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  gap: 20px;
  text-align: center;
}

.google-btn {
  background-color: #fff;
  color: #444;
}

.apple-btn {
  background-color: #000;
  color: #fff;
}

.fb-btn {
  background-color: #1877f2;
  color: #fff;
  border: none;
}

.social-login-btn:hover {
  opacity: 0.9;
}

.social-login.hide_it {
  display: none !important;
}

#register_form {
  display: grid;
  grid-template-columns: 20px 130px 130px auto; /* desktop: 2 input cols + error col */
  gap: 15px;
}

#first_name {
  grid-column: 2 / 3;
  grid-row: 1;
}
#last_name {
  grid-column: 3 / 4;
  grid-row: 1;
}
#email_register {
  grid-column: 2 / 4;
  grid-row: 2;
}
#email_register.it_is_wrong {
  border: 2px solid red;
}
#email_register.it_is_ok {
  border: 2px solid green;
}

#phone_register {
  grid-column: 2 / 4;
  grid-row: 3;
}
#password1_register {
  grid-column: 2 / 4;
  grid-row: 4;
}
#password1_register .register_input.it_is_wrong {
  border: 2px solid red;
}
#password1_register .register_input.it_is_ok {
  border: 2px solid green;
}
#password2_register {
  grid-column: 2 / 4;
  grid-row: 5;
}
#password2_register .register_input.it_is_wrong {
  border: 2px solid red;
}
#password2_register .register_input.it_is_ok {
  border: 2px solid green;
}
#submit_register_box{
  display: flex;
  flex-direction: column;
  gap:4px;
  color:white;
  font-size: 12px;
  grid-column: 2 / 4;
  grid-row: 6;
}
#submit_register{
  font-size: 16px;
  font-weight: 600;
}
#terms_register{
  color:black;
  font-size: 12px;
  font-weight: 400;
}
#submit_register:disabled {
  cursor: default;
  opacity: 0.6; /* optional: make it look inactive */
}

#register_row2{
  grid-row: 2;
}
#register_row3{
  grid-row: 3;
}
#register_row4{
  grid-row: 4;
}
#register_row5{
  grid-row: 5;
}
/* Error messages all in column 3 */
.register-msg {
  grid-column: 4 / 5;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  align-self: center;
  border-radius: 50%;
}
.register-msg.it_is_ok {
  width: 20px;

  background-image:url('/icon/small/correct_register.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 0 5px green;
}
.register-msg.it_is_wrong {
  width:20px;

  background-image:url('/icon/small/wrong_register.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: 0 0 5px red;
}
#register_form input, #register_form button{
  display: flex;
  height: 40px;
  margin:0px;
  border-radius: 6px;
  padding: 5px 10px;
  border: 1px solid rgb(172, 172, 172);
}
#register_form button{
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#inner-form-bot{
  display: none;

  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color:var(--bg4);
  color:white;
  width:100%;
  min-height:40px;
  /* border:1px solid green; */

  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 35px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,1) 35px);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  padding-top:1.5vh;
}




.login-left, .login-right {
	
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: start; /* Centers content vertically */
    height: 100%; /* Enforces full height */
    width:350px;
    
}
#social_media{
  position: relative;
  display: flex;
  height: 160px;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  /* border:1px solid red; */
}
#social_media::after {
  content: "";
  position: absolute;
  top: 10%;          /* centers 80% height */
  right: 0;          /* stick to the right edge */
  height: 80%;
  width: 2px;        /* line thickness */
  background: #ffffff7e;  /* white line */
  pointer-events: none;
  border-radius: 1px;
}
.login-left {
display:none;
}
#cover_during_adds{
    position: fixed;
    bottom:0;
    left:0;
    display:none;
    z-index:9999;
    width:100dvw;
    height:100vh;
    background: transparent;
    opacity:1;
    backdrop-filter: grayscale(50%);
}
/* #the_song_container_fullscreen{
    position: fixed;
    bottom:var(--default-player);
    left:0;
    display:none;
    z-index:10;
    width:100dvw;
    height:calc(100dvh - var(--default-player));

    background: transparent;
    opacity:1;
    backdrop-filter: grayscale(100%);
} */
#scrollingContent{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  padding-left:0px;
  gap:8px;
}
/* 
#the_song_container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 11;
    width: 40%;
    max-height: 760px;
    height: 184px;
    min-height:calc(24px + var(--default-player));
    flex-direction: column;
    justify-content: start;
    align-items: center;
    
    background-image: var(--body-bg-image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    background-size: 100vw 100vh;

    
    border-radius: 12px 12px 0px 0px;
    overflow: hidden;
   
    gap:5px;
    padding-top: 0px;
    transition: height 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change:transform, height;
} */

#the_arrows_mobile{
  display: none;
}
#myplayer_cover{
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 12;
    min-width: 40%;
  
    min-height: var(--default-player);
/*     
    
    background-image: var(--body-bg-image);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    background-size: 100vw 100vh; */

    /* Optional extras for appearance */
    
    overflow: hidden;
    
    gap:15px;
    padding-top: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15px);
  mask-image: linear-gradient(to bottom, transparent, black 15px);
}

#info_container{
  height:var(--default-player);
  display:flex;
  flex-direction:column;
  white-space: nowrap;
  font-size: 1.30rem; 
  justify-content:center;
  align-items: center;
  max-width: 450px;
  grid-column: 2;
}
#handlebar{
  display: block;
  position:relative;
  width: 100px;
  min-height: 34px;
  height: 34px;
  background: transparent;
  border-radius:10px;
 
  cursor: grab;

  opacity: 0.7;
}
#handlebar::after {
  content: ''; /* 👈 this is required */
  display: block;
  position: relative;
  width: 100px;
  height: 4px;
  background: grey;
  border-radius: 10px;
 
  top: 13px; /* position it vertically inside the 44px handle */
}
#handlebar:hover::after {
  background: black;
}

#close_container{
 display: none;
}

#the_song{
  display: flex;
  position:relative;
  width: calc(100% - 40px);
  height: calc(760px - var(--default-player) - 44px);
  background: transparent;
  border-radius:10px;
  cursor: default;
  flex-direction: row;
  gap:20px;
  /* border:1px solid grey; */
  
}

#the_song_left, #the_song_right{
  display: flex;
  position:relative;
  width: 100%;
  height: calc(760px - var(--default-player) - 44px);
  background: transparent;
  border-radius:10px;
  cursor: default;
  flex-direction: column;
  gap:10px;
  /* border:1px solid grey; */
  justify-content: start;
  align-items: center;
  
}
#the_song_left{
   border:0px solid grey;
}
#the_song_left_image{
  padding: 20px;
  background: #ccc;
  display: flex;
  position:relative;
  width:360px;
  min-height:360px;
  border-radius:25px;
  background-size: 110% !important;
  background-position: center !important;
  background-repeat: no-repeat;
  
}

#the_song_left_description{

  /* border:1px solid grey; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position:relative;
  width:100%;
  min-height:80px;
  max-height:330px;
}
#now_pl {
  display: inline-block;
  padding: 5px;
  font-size: 18px;
  color: black;
  background: rgba(255, 255, 255, 0.5); /* translucent white */
  backdrop-filter: blur(8px); /* blur what's behind */
  -webkit-backdrop-filter: blur(8px); /* for Safari */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* soft white glow */
}

#the_song_left_inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position:relative;
  width:100%;
  padding: 5px;
  
  
  background: rgba(255, 255, 255, 0.5); /* translucent white */
  backdrop-filter: blur(8px); /* blur what's behind */
  -webkit-backdrop-filter: blur(8px); /* for Safari */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* soft white glow */
}
#description_1, #description_2, #description_3{
  /* border:1px solid red; */
  display: flex;
  position:relative;
  width:100%;
  height: 100%;
  color:black;
  font-size: 25px;
  padding-left: 40px;
  justify-content: start;
  align-items: center;
}

#title_1, #title_2, #title_3{
  /* border:1px solid red; */
  display: flex;
  position:relative;
  width:100%;
  height: 100%;
  color:var(--our_blue);
  font-size: 12px;
  justify-content: start;
  align-items: end;
}
		
#rating, #more_tracks, #Add_to_playlist{
  display: flex;
  position:relative;
  width:340px;
  min-height:20px;
  height: 100%;
  color:var(--our_blue);
  font-size: 22px;
  justify-content: start;
  align-items: start;
  /* border:1px solid black; */
}
			
#rating{
  min-height: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap:10px
  
}			
			
#rating_txt{
  width:100%;
  height: 40px;
  justify-content: center;
  align-items: center;
  color:black;
}					
#ratingup{
  width: 30px;
  height: 40px;
  margin-bottom:5px;
  justify-content: center;
  align-items: center;
  background: url('/icon/small/pl_icons/thumbs-up.svg') no-repeat center center;
	background-size: 75%;
  transition: background-size 0.3s ease;
  cursor:pointer;
}					
#ratingdown{
  width: 30px;
  height: 40px;
  justify-content: center;
  align-items: center;
  background: url('/icon/small/pl_icons/thumbs-down.svg') no-repeat center center;
	background-size: 75%;
  margin-top:5px;
  
  transition: background-size 0.3s ease;
  cursor:pointer;
}	
#ratingdown.voted{
  
  background: url('/icon/small/pl_icons/thumbs-down-red.svg') no-repeat center center;
	background-size: 95%;
}
#ratingup.voted{
  background: url('/icon/small/pl_icons/thumbs-up-green.svg') no-repeat center center;
  background-size: 95%;
}

#ratingup:hover,#ratingdown:hover{
  background-size: 95%;
}

#Add_to_playlist{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color:black;
  font-size: 18px;
}	
#my_playlists_options{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color:black;
  font-size: 18px;
  gap:10px;
  width:100%;
}
#my_playlists_options_text, #my_playlists_options_new,#my_playlists_options_add{
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  min-height: 20px;
}

#my_playlists_options_text{
width:60%;
white-space: nowrap;
justify-content: left;
align-items: center;
}
#my_playlists_options_new_pl{
  display: block;
width:40px;
height:40px;
padding:5px 5px;
cursor: pointer;

font-size: 30px;
}
#my_playlists_options_add{
width: 120px;
padding:5px;
cursor: pointer;
border-radius: 8px;
background: var(--our_blue);
opacity:0.6;
color:white;
}
#my_playlists_options_add:hover{
  opacity:1;
}
#playlist_carousel_container {
  position: relative;
  width: 100%;
  overflow: hidden;
  max-height: 160px; 
  padding: 10px 0;
  text-align: center;
}

#playlist_carousel_track {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}

.carousel-item {
  background-color: #505050;
  border-radius: 25% ;
  width:80px;
  height:80px;
  /* flex: 0 0 20%; */
  opacity: 0.8;
  transform: scale(0.8);
  transition: transform 0.5s ease, opacity 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.carousel-item img {
  width: 100%;
  border-radius: 8px;
}

.carousel-item.center {
  /* flex: 0 0 40%; */
  width:80px;
  height:80px;
  transform: scale(1.1);
  opacity: 1;
  z-index: 2;
  cursor: default;
}

#playlist_caption {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
  color: #000;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-85%);
  font-size: 30px;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 5px;
  padding-bottom:8px;
  padding-top: 2px;
  cursor: pointer;
  z-index: 5;
  user-select: none;
  border-radius: 50%;
  width:40px;
  height:40px;
  justify-content: center;
  align-items: center;
}

.left-arrow {
  left: 10px;
}
.right-arrow {
  right: 10px;
}
#more_tracks,#more_tracks2{
  
  display: flex;
  width: 100%;
  min-height:220px;
  flex-direction: column;
  
  justify-content: center;
  align-items: center;
}


			
#more_tracks_title, #more_tracks2_title{
  display: flex;
  width: 100%;
  flex-direction: column;
  gap:10px;
  justify-content: start;
  align-items: start;
}
		
#more_tracks_tracks, #more_tracks2_tracks{
  display: flex;
  width: 80%;
  flex-direction: column;
  gap:8px;
  justify-content: center;
  align-items: center;
}

#more_tracks-title, #more_tracks2-title{
  display: flex;
  width: 100%;
  color: var(--our_blue);
  gap:5px;
  justify-content: start;
  align-items: center;
  font-size: 24px;
}
.related_single_container{
  /* border:1px solid red; */
  display: flex;
  height:20px;
  width: 100%;
  flex-direction: row;
  gap:5px;
  justify-content: space-between;
  align-items: center;
}
.title_t{
  color:black;
  font-size: clamp(14px, 0.9vw, 18px) !important;
  justify-content:start;
  align-items: start;
  cursor:pointer;
  white-space:nowrap;
  max-width: 230px;
  overflow: hidden;
}

.length_t{
  color:black;
  font-size: 18px;
  justify-content:end;
  align-items: start;
}
.related_audio_player{
  display: none;
}

#add_lists_contaner {
	position:fixed;
	top:0;
	left:0;
  width: 100dvw;
  height:calc( (var(--vh) * 100) - var(--default-player));
  padding: 20px;
  background-color: rgba(243, 243, 243, 0.1); /* 0.0 = fully transparent, 1.0 = fully opaque */
  display: none;
  justify-content: end;
  align-items: center;
  z-index:25;
  color:white;
}

#add_lists {
  
  display: flex;
  position: fixed;
  top:calc(var(--radio_box-height) + 15px);
  right:20px;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 40px;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  /* max-width: 370px; */
  width: calc(25dvw - 40px);
  /* width: 100%; */
  background-color: #50505045;
  background-color: #fff;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px #5c7da1;
  -webkit-backdrop-filter: blur(5px); /* Safari */
  /* max-height: 50dvh; */
}
#add_lists_close{
  display: flex;
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  /* border:1px solid red; */
  background-image: url('/icon/small/X1_black.svg');
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  opacity:0.8;
  cursor: pointer;
}

#add_the,
#delete_the {
	max-height: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  color:white;
}
#delete_the {
  gap:10px;
}
.section-title,
.section-title2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color:black;
}


#create_list_form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#create_list_form input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 100%;
}

#create_list_form button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.radio-image-group input[type="radio"]:checked + img {
  transform: scale(1.15);
  border: 2px solid white; /* Optional: green border for visibility */
}


#create_list_form button:hover {
  background-color: #0056b3;
}

/* Scrollable image list */
.radio-wrapper {
  display: none;
  gap: 10px;
  align-items: center;
}

.radio-scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Internet Explorer 10+ */
  max-width: 780px;
  padding: 5px;
  gap: 10px;
  
  border-radius: 6px;
  
  scroll-behavior: smooth;
}
.radio-image-group input[type="radio"] {
  display: none;
}


.radio-scroll::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}
.radio-image-group {
  display: flex;
  gap: 00px;
}
.radio-image-group img {
  border-radius: 8px;
}

.radio-image-group label {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 5px;
  transition: border 0.2s ease;
}

.radio-image-group input[type="radio"]:checked + img {
  border: 2px solid #007bff;
}

/* Custom add icon */
.add-custom-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  border-radius: 8px;
  width: 77px;
  height: 105px;
  cursor: pointer;
}
 
.add-custom-container input[type="radio"] {
  display: none;
}

.add-custom-box {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  border-radius: 8px;
}


#lists_grid {
  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: auto;
  white-space: nowrap;
  padding: 10px;
  height: auto; /* Optional: define if needed */
  max-height: 200px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  background: #ffffff40;
  border-radius:12px;
}

#lists_grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
 .stay_red {
  padding:2px;
  /* border: 1px solid red; */
  border-radius: 6px; /* Optional: match your image style */
  transition: transform 0.2s ease, border 0.2s ease;
  /* background:grey; */
}
.stay_red_text {
  color:red !important;
  font-size: 16px !important;
}

#delete_selected_list {
	display:none;
  padding: 10px 15px;
  font-size: 16px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#delete_selected_list:hover {
  background-color: #b52a3a;
}


.close-btn {
  display: flex;

    background: url('/icon/small/X1_black.svg') no-repeat center center;
    background-size: contain;
	color:white;
	
	position:absolute;
	top:10px;
	right:10px;
	width:20px;
	height:20px;
	cursor:pointer;
  z-index: 25;
}

#close2{
  top:10px;
  right:5px;
  width: 35px;
  height: 35px; 
  padding: 7px;
  background-size: 60%;
}

#login_form input[type="text"],
#login_form input[type="password"]{
  border: 1px solid rgb(170, 170, 170);
  /* max-width: 330px; */
}
.login-text h3{
  color:var(--text-title-d_blue);
  
  font-size: 20px;
  padding: 10px 0px;
}

.social-login {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 330px;
  border-radius: 6px;
  height: 40px;
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
  
 
  
}
.cl1{
  overflow:clip;
  background-color: #f0f5fe;
}

.apple-btn {
  background-color: #000;
  color: #fff;
  gap:15px;
  justify-content: center;
  padding-top: 3px;
}

.fb-btn {
  background-color: #1877f2;
  color: #fff;
  height: 40px;
  gap:15px;
}
.insta-btn {
  background-color: #fb0188;
  color: #fff;
  border: none;
  gap:15px;
}
.custom_register{
  display: flex;
  color:white;

  background-color:#17243f ;
}

.social-login-btn:hover {
  opacity: 0.9;
}



.login-divider {
	position:relative;
    width: 90%; 
	margin:auto;
	margin-top:20px;
    height: 2px; /* Thickness of the line */
    background: white; /* Match the theme's text color */
   
    border-radius: 2px; /* Optional: smooth edges */
	display:none;
}

.or-divider {
    position: absolute;
    background: gray; /* Match background for seamless blend */
    padding: 5px 15px 3px 15px;  /* Dynamic padding based on content */
    border: 3px solid white;
    border-radius: 30px;  /* Rounded corners for dynamic width */
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;  /* Prevents text from wrapping */
    font-weight: bold;  /* Improve text visibility */
    left: 50%;
    transform: translateX(-50%); /* Perfect center */
    top: -16px;
	display:none;
}

.social-btn {
    width: 100%;
    padding: 10px;
	margin-top: 20px;
    
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
	min-height:40px;
}


.google { background: #DB4437; }
.facebook { background: #3b5998; }
.x { 
	background: white;
	color:black !important; 
	}
.apple { background: #000; }



/* Right Column */
.login-right h3 {
    justify-content: center;
    text-align: center;
}
.login-left h3 {
    margin-bottom: 20px;
    text-align: center;
}
.password-container {
    position: relative;
    width: 100%;
    /* max-width: 330px; */
}

#toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    /* transform: translateY(-50%); */
    width: 24px;  /* Icon size */
    height: 24px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.input_wrapper{
  display: flex;
  position: relative;
  flex-direction: row;
  max-width: 330px;
  gap:15px;
}
.input_name{
  display: flex;
  width:100%;
}
.register_input{
  display: flex;
  position: relative;
  max-width: 330px;
}

#toggle-password1,
#toggle-password2 {
    position: absolute;
    right: 10px;
    top: 50%;
     transform: translateY(-40%);
    width: 24px;  /* Icon size */
    height: 24px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}


input[type="text"],
input[type="password"] {
     width: 100%;
    padding: 10px;
    margin-top: 20px;
    border: none;
    border-radius: 6px;
    cursor: text;
    color: black;
	
    font-weight: bold;
	min-height:40px;
}

.options {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
	font-size: 18px;
    font-family: "Roboto Condensed", sans-serif;
}
#playPauseBtn_hidden{
	width:50px;
	height:30px;
	}

#play_from {
  position: fixed !important;
  top: 50px;
  left: 0px;
  /* transform: translate(-50%, -50%); /* Centers both vertically and horizontally */ 
  height: calc(100vh - 60px);
  width: 350px;
  background: grey;
  display: none;
  flex-direction:column;
  z-index: 25;
  border: 2px solid red;
  justify-content: flex-start;  /* top */
  align-items: stretch;         /* full width children */
  
  overflow-y: scroll;
}
.radio_hidden, .adv_hidden{
  width:320px;
}
#playlist {
    position: fixed !important;
    top: 55px;
    left: 360px;
    /* transform: translate(-50%, -50%); /* Centers both vertically and horizontally */ 
    width:250px;
    min-width: 350px;
	max-height: calc(100vh - 70px);
    background: grey;
    display: none;
	flex-direction:column;
    z-index: 25;
    border: 2px solid red;
	gap: 20px;
  color:white;
}
#local_number_fun{
  display: none;
  position: fixed !important;
  top: 5px;
  left: 310px;
  padding: 5px;
  /* border: 2px solid red; */
  width:300px;
  height:50px;
  flex-direction: row;
  background-color:grey;
  justify-content: space-between;
  align-items: center;
  z-index: 25;
  border-radius: 10px;
}
#local_number_fun_display{
  display:flex;
  position: relative;
  width:245px;
  height:40px;
  color: white;
  justify-content: center;
  align-items: center;
  z-index: 26;
}
#local_number_fun_check{
  display:flex;
  position: relative;
  width:20px;
  height:20px;
  color: white;
  justify-content: center;
  align-items: center;
  z-index: 26;
}
.player_hidden{
	display: flex;
	flex-direction:row;
	width:100%;
	height:100%;
    z-index: 25;
    border: 2px solid red;
	
	
}


.forgot-password {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

.submit-btn {
    width: 100%;
    background: #4CAF50;
    color: white;
	
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #45a049;
}

/* Register Section */
.register-section {
	display:none;
    text-align: center;
    margin-top: 20px;
}

#register-btn {
	width:100%;
    background: #FFA500;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

#register-btn:hover {
    background: #e69500;
}


/* Login Button - Always on the right */
.login-btn {
  position: absolute;
	width:45px;
	height:70px;
	padding: 5px; 
  right: 5px;
  top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
	
  gap: 5px;
  text-decoration: none;
  font-size: 12px;
   
    
  
  transition: transform 0.3s ease;
	cursor:pointer;
}


/* .login-btn:hover {
     transform: translateY(-50%) scale(1.1);
} */

.status{
	position: absolute;
	width: 60px;
	height:60px;
	padding: 12px; 
  right: 0px;
  top: 0px;
  
	transform-origin: center center;
  justify-content: center;
	align-items: center;	
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
    
  transition: transform 0.3s ease;
	cursor:pointer;	
	display:none;	
}

.status:hover{
	transform: scale(1.1);
}
	
#non_login_avatar {
	display:flex;
	width:35px;
	height:35px;
  border-radius:50%;
  background-color: #dd0000; /* ← Add your desired background color here */
  background-image: url('/icon/small/icon_black.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#LoginStatus_bar{
	width:100%;
	display:flex;
	/* border:3px solid rgb(241, 0, 0);  */
	flex-direction:row;
	justify-content:flex-start;
	
}

#username_displayed{
	width:100%;
	display:none;
	justify-content:center;
}

#username_displayed_bar{
	width:100%;
	display:flex;
	justify-content:center;
  align-items: center;
}

/* Circular avatar */
.avatar {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Avatar Icon */
#side_avatar {
	display:flex;
	width:32px;
	height:32px;
    background: url('/icon/small/avatar.svg') no-repeat center center;
    background-size: contain;
}
#logged_avatar {
	display:flex;
	width:35px;
	height:35px;
  border-radius:50%;
  background-color: #1DB954; /* ← Add your desired background color here */
  background-image: url('/icon/small/icon_black.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
   
}



#sidebar_head{

	position:absolute;
	top:30px;
	right:25px;
	display: none;
	background: var(--secondary-bg);
	height:50px;
	width:50px;
  color:#000;
  border-radius: 10px 10px 0px 0px;
  color: white;
	
}


.sidebar-row {
	  display:flex;
	  box-sizing: border-box;
	  height: 60px;
	  width: 100%;
	  justify-content:center;
	  align-items: center;
	  /*border-bottom: 1px solid gray;  optional visual separator */
}
.divider_sidebar{
	width:90%;
	height:0px;
	border:1px solid gray;
	border-radius:3px;
	box-sizing: border-box;
	
}

#sidebar-options{
	 flex: 1;
	display: none;
	width:100%;
	flex-direction:column;
	justify-content:flex-start;
	align-items: center;
	 box-sizing: border-box;
	/* height:calc(100% - 60px - 14px); */
	
}

#sidebar-social {
  padding: 10px 0px 10px 0px;
  display: flex;
  flex-direction: column;
  gap:10px;
  width: 100%;
  box-sizing: border-box;
}
#sidebar-social_out {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  grid-auto-rows: 60px;                 /* row height */

  width: 180px;
  padding: 0;
  box-sizing: border-box;
  place-items: center; /* ✅ centers both vertically and horizontally */
}
#sidebar-social_out a{
  display: flex !important;

}
#contact_info {
  display: flex;
  
  flex:1 1 70%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap:20px;
  padding:2.5vh;
  padding-bottom:1.5vh;
}
.each_country{
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap:0.5vh;
  background-color: #ffffff10;
  border-radius: 10px;
  padding:1vh 0px;
}
.tel-row{
  display: flex;
  flex-direction: row;
  gap:25px;
  justify-content: space-evenly;
  align-items: center;
}
.info-tab{
  display: flex;
  color:white;
  width: 100%;
  
}
.info-tab.countries{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

}
.info-tab.countries h4{

  display: flex;
  width:100%;
  justify-content: center;
  align-items: center;
  padding:5px 20px;
  color:white;
  font-size:22px;
  
}

.info-tab.phone_num h4{
  display: flex;
  width:100%;
  justify-content: center;
  align-items: center;
  color:white;
  cursor: pointer;
  
}
.info-tab.address a, .info-tab.address h4{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  cursor: pointer;
  padding:0px;
  text-align: center;
  text-decoration: none;
}
.info-tab.email_num h4{
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color:white;
  cursor: pointer;
  padding:0px;
  text-align: center;
  text-decoration: none;
}
.info-tab.email_num h4::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1em;
  margin-right: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') no-repeat center / contain;
}
#contact_info_in{
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius:8px;
  overflow: clip;
  background-color: #ffffff;
  gap:10px;
  /* padding-bottom:15px; */
}
.info-tab.phone_num h4::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.7 11.7 0 003.68.59 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.27.21 2.5.59 3.68a1 1 0 01-.24 1.05l-2.23 2.23z"/></svg>') no-repeat center / contain;
}
.info-tab.address h4::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1em;
  margin-right: 6px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/></svg>') no-repeat center / contain;
}
.info-tab.phone_num h4 a {
  text-decoration: none; /* removes underline */
  color: white;          /* keep text black */
}
.info-tab.tab_empty {
  min-height:15px; /* removes underline */
  background-color: transparent;
}

#sidebar-social_out a{

  padding:0px;
  display: flex;
  flex-direction: row;
  width: 50px;
  height:50px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}

#f_social {
  display:flex;
    background: 
        url('/icon/small/facebook_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 60%;  /* Adjust play button size */
    
}
#f_social:hover {
    background: 
        url('/icon/small/facebook_color.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 70%;  /* Adjust play button size */ 
}


#y_social {
  display:flex;
    background: 
        url('/icon/small/youtube_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 50%;  /* Adjust play button size */
    
}
#y_social:hover {
    background: 
        url('/icon/small/youtube_color.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 60%;  /* Adjust play button size */ 
}



#tik_social {
  display:flex;
    background: 
        url('/icon/small/tiktok_white.svg') no-repeat center center,  
        transparent; /* Gray background */
    background-size: 45%;  /* Adjust play button size */
    
}
#tik_social:hover {
    /* background: 
        url('/icon/small/tiktok_white.svg') no-repeat center center,  
        transparent; Gray background */
    background-size: 55%;  /* Adjust play button size */ 
}



#insta_social {
  display:flex;
    background: 
        url('/icon/small/instagram_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 55%;  /* Adjust play button size */
    
}
#insta_social:hover {
    background: 
        url('/icon/small/instagram_color.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 65%;  /* Adjust play button size */ 
}


#x_social {
  display:flex;
    background: 
        url('/icon/small/X_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 45%;  /* Adjust play button size */
    
}
#x_social:hover {
    background: 
        url('/icon/small/X_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 55%;  /* Adjust play button size */ 
}
#l_social {
  display:flex;
    background: 
        url('/icon/small/linkedin_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 55%;  /* Adjust play button size */
    
}
#l_social:hover {
    background: 
        url('/icon/small/linkedin_color.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 65%;  /* Adjust play button size */ 
}

.social-icon {
   /* border: 1px solid red;  */
  aspect-ratio: 1 / 1;    /* square cells */
  width: 80%;
  box-sizing: border-box;
  height: 40px;
  cursor: pointer;
}


#contact_information1 {
    display:flex;
    position: relative;
    background: 
        url('/icon/small/telephone_white.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 35%;  /* Adjust play button size */
    cursor: pointer;
}
#contact_information1:hover {
    display:flex;
    background: 
        url('/icon/small/telephone.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 35%;  /* Adjust play button size */
    
}
#contact_information1.tel_open{
    background: 
        url('/icon/small/telephone.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 35%;  /* Adjust play button size */
}
#contact_container{
  display: none;
  position: absolute;
  /* width:100%;
  height:100%; */
  bottom:-10px;
  right:50px;
  color: #000;
  background-color: #50505080;
  border-radius: 8px 0px 0px 8px;
  overflow: clip;
}
#contact_container.tel_open{
  display: flex;
}
#contact_container #contact_info_in{
  border-radius: 8px 0px 0px 8px;
}

#sidebar-logout{
	position:absolute;
  left:10px;
  top:0px;
	 box-sizing: border-box;
	 /* border-top: 1px solid gray;  */
	 display: flex;
	height: 50px;
	width: 50px;
	justify-content:center;
	cursor:pointer;
	align-items: center;
	font-size: 18px;
  font-weight: bold;
  }
  
 #logout-icon{

	display:flex;
	width:28px;
	height:28px;
    background: url('/icon/small/white_logout.svg') no-repeat center center;
    background-size: contain;
	
	}
	
#sidebar-logout:hover #logout-icon {
  background: url('/icon/small/red_logout.svg') no-repeat center center;
  background-size: contain;
}
.theme-toggle {
	display:none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    -webkit-mask-image: url('/icon/small/sun.svg');
    mask-image: url('/icon/small/sun.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    border: none;
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background 0.3s ease;
}

body.light-mode .theme-toggle {
    background: black !important;
    -webkit-mask-image: url('/icon/small/moon.svg');
    mask-image: url('/icon/small/moon.svg');
    
}

/* 🌙 Dark Mode - Moon Icon Stays White */
body.dark-mode .theme-toggle {
    background: white;
    -webkit-mask-image: url('/icon/small/moon.svg');
    mask-image: url('/icon/small/moon.svg');
}

/* 🔆 Scale Up on Hover */
.theme-toggle:hover {
    transform: translateY(-50%) scale(1.3);
}


/* Container styling */
.container {
  position: fixed;
  top:0;
  left:0;
  width: 100dvw;
  display: flex;       /*<--*/
  flex-direction: row; /* Default: Row layout */
  flex-wrap: wrap;
  /* align-items: top; */
  justify-content: center;
  align-items: start;
  /* 40px so that the container goes behind the player*/
  height: calc((var(--vh) * 100) - var(--default-player) + 40px); 
  overflow: hidden; /* Prevent scrolling inside the container */
	padding-bottom:0px;
	flex:1;
	min-height:0;
	background:transparent;
}
#Library_Search{
  display: flex;
  flex-direction: row;
  position: fixed;
  padding:5px 15px;
  /* width:360px; */
  width: 20vw;
  top:var(--radio_box-height);
  top:calc(var(--radio_box-height) + 20px);
  left:calc(50vw - 20vw - 40px);
  /* border: 1px solid grey; */
  border-radius: 25px;
  justify-content: start;
  align-items: start;
  z-index: 11;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  /* border: 1px solid grey; */
  flex-wrap: wrap;
  gap:3px 10px;
   box-shadow: 0 6px 18px rgba(0,0,0,0.05); /* gentle shadow */
}
.Library_Search_icon{
  display: block;
  position: relative;
  background-color: transparent;
  background-image: url('/icon/small/pl_icons/search.svg');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 70% 50%;
  
  width:20px;
  height:40px;
  z-index: 13;
}

#librarySearchInput{
  display: flex;
  position: relative;
  width:260px;
  width: 13vw;
  margin:0px;
  border:1px solid lightgrey;
  background-color:transparent;
  /* opacity:0; */
  z-index: 12;
  border: 1px solid transparent;      /* keep layout stable */
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 8px;
}
#librarySearchInput:focus,
#librarySearchInput:focus-visible,
#librarySearchInput:active{
  outline: none;
  box-shadow: none;
  border-color: transparent;          /* no focus border change */
}

#the_x{
  display: none;
  position: absolute;
  top:15px;
  right:20px;
  width: 20px;
  height: 20px;
  background-color: transparent;
  background-image: url('/icon/small/pl_icons/close_icon.svg');
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 17;
  /* border: 2px solid red; */
  cursor: pointer;
}
.Library_Search_results{
  position: relative;
  width:340px;
  max-height: 300px;
  /* padding-top:45px; */
  display: none;
  padding:10px;

  font-size: 14px;
  border-radius: 10px;
  flex-direction: column;
  gap:5px;
  overflow-y: auto;
}


#librarySearchInput:focus ~ .Library_Search_results{
  display: flex;
}
#librarySearchInput:focus ~ #the_x{
  display: flex;
}
#s_mob_only{
  display: none;
}
#s_desk_only{

    display: flex;
    position: absolute;
    top:15px;
    right:60px;
    width:20px;
    height:20px;
    /* border:1px solid grey; */
    z-index: 15;
    background-color: transparent;
    background-image: url(/icon/small/pl_icons/search.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer; 
    transition: transform .6s ease; /* optional */
}
#s_desk_only.s_desk_only_opened{
  transform: translateX(-330px); /* move 330px left */
  cursor: default; 
}

.Library_Search_results {

  scrollbar-width: thin;   /* Firefox */
  scrollbar-color: #99999960 transparent; /* Firefox */
}

/* Chrome, Safari, Edge */
.Library_Search_results::-webkit-scrollbar {
  width: 4px; /* thinner vertical scrollbar */
  height: 0px; /* hides horizontal scrollbar if it tries to appear */
}

.Library_Search_results::-webkit-scrollbar-track {
  background: transparent;
}

.Library_Search_results::-webkit-scrollbar-thumb {
  background-color: #99999960;
  border-radius: 2px;
}


.search-result {
  display: flex;
  flex-direction: row;
  height:30px;
  cursor: default;
  justify-content: space-between;
  align-items: center;
  color:black;
  gap:10px;
  cursor: pointer;
}
.search-result span{
  color:black;
}
.the_title{
  display: flex;
  flex-direction: row;
  width: 100%;
  height:30px;
  justify-content: space-between;
  align-items: center;
  color:black;
  font-size: 16px;
}

span.title-result_is_playing{
  color: var(--green_playing) !important;
}

span.station-name{
  font-size: 14px;
  white-space: nowrap;
}
/* Enable smooth interpolation of an angle custom property */
@property --s {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.search_focus {
  position: relative;
}

.search_focus::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px; /* border thickness */
  /* red sector is 60deg long; start at --s */
  background: conic-gradient(
    var(--green_playing) var(--s) calc(var(--s) + 60deg),
    transparent 0 0
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0); /* standard property */
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  /* animate only the angle, not the element */
  animation: sweep 4s infinite;
}

/* keyframe changes the degrees */
@keyframes sweep {
  to { --s: 360deg; }
}


#list_name{
	padding-top:12px;
	padding-right:20px;

	position:relative;
	display:none;
	width: 50%;
	min-height:25px;
	font-size:24px; 
	color:black;
	justify-content:center;
	text-align:center;
	padding-bottom: 12px;
	margin: 0 auto;
}

#list_name::after {
	  content: "";
	  position: absolute;
	  left: 0; 
	  bottom: 0;
	  width: 100%;
	  height: 2px;
	  background: grey;
	}

.navigation{
	position:relative;
	display:none;
	width:100dvw;
	height:var(--navigation-bar);
	
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: start;
	color:black;
	font-size:0.7rem;
	padding-bottom:15px;
}
.nav-item {
  width: 100%;
  height: 25px;
 
}

.nav_1{
	transition: background-position 0.3s ease, background-size 0.3s ease;
	 background: transparent no-repeat bottom/90%;
	background-image: url('/icon/small/navigation/radio-icon-grey.svg');
}
.nav_2{
	transition: background-position 0.3s ease, background-size 0.3s ease;
	 background: transparent no-repeat bottom/80%;
	background-image: url('/icon/small/navigation/library-round-grey.svg');
}
.nav_3{
	transition: background-position 0.3s ease, background-size 0.3s ease;
	 background: transparent no-repeat bottom/80%;
	background-image: url('/icon/small/navigation/mylist-icon-grey.svg');
}

.nav_1.nav_open{
	 background: transparent no-repeat bottom/100%;
	background-image: url('/icon/small/navigation/radio-icon.svg');
}
.nav_2.nav_open{
	 background: transparent no-repeat bottom/90%;
	background-image: url('/icon/small/navigation/library-round.svg');
}
.nav_3.nav_open{
	 background: transparent no-repeat bottom/90%;
	background-image: url('/icon/small/navigation/mylist-icon.svg');
}

.navigation::before,
.navigation::after {
  content: "";
  position: absolute;
  top: 10%;            /* leaves 10% gap above */
  height: 80%;         /* line spans 80% of container */
  width: 2px;
  background: lightgrey; /* grey */
  border-radius:2px;
}

.navigation::before {
  left: calc(33.333% - 1px);  /* between col 1 & 2 */
}

.navigation::after {
  left: calc(66.666% - 1px);  /* between col 2 & 3 */
}
/* .nav_1::before { content: url('/icon/small/navigation/radio-icon.svg'); } */
/* .nav_2::before { content: url('/icon/small/navigation/library-round.svg'); } */
/* .nav_3::before { content: url('/icon/small/navigation/mylist-icon.svg'); } */

.radio_box {
	position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:space-around;

	height:var(--radio_box-height); 

  min-height: 0;
	-ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
  width:100vw;
  /* background-color: rgb(9, 9, 75); */
  overflow: visible;
}

.my_player{
  position: fixed;
  bottom: 0;
  left: 0;

  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr  1fr;

  width: 100vw;
  height: var(--default-player);

  align-items: center;
  background: transparent;
  background-color: white;
  z-index: 20;
  gap: 10px;
  box-shadow: 0 0 40px rgba(255,255,255);

}

.bottom_player {
	
	width: 100%;
    width: 100%;

    
    display: flex;
	flex-direction:column;
    align-items: center;
    justify-content: space-between;
   
    box-sizing: content-box; /* Optional: Allows padding to expand size */
    z-index:10;
}

.controls_container{
	overflow: visible;
	position: relative;
	z-index: 1;
	display:flex; 
	flex:0 0 25vw; 
	flex-direction:column;
	justify-content:space-between;
	max-height:60px;
	gap:50px; 
	
}

#radio_name_con{
	width:100%;
	display:flex;
	flex-direction:row;
	white-space: nowrap;
	font-size: 1.30rem; /* ~20px */
	justify-content:center;
	align-items: center;
}

#radio_name{
	width:100%;
	display:flex;
	flex-direction:row;
	white-space: nowrap;
	font-size: 1.50rem; /* ~20px */
}

#now_playing_title{
  font-size: 22px;
}
.wrapper_buttons{
  display:flex;
  flex-direction: row;
  padding-right:5px;
}

#scrollingContent.scrolling {
  display: inline-flex;
  /* animation: scrollLeft 20s linear infinite; */
  white-space: nowrap; 
  padding-right:60px;
  padding-left:60px;
}


#trackTitle {
  height: calc(var(--default-player)/2);
  display: flex;
  justify-content: start;
  align-items: start;

  font-size: 1.5rem;
  padding-right: 0px;
}

#info1{
  display: none;
  align-items: center;
  font-size: 1.5rem;
}
/* Marquee effect */
@keyframes scrollLeft {
  0% {
    transform: translateX(calc(100% - 60px));
  }
  100% {
    transform: translateX(calc(-100% + 60px));
  }
}
#all_radios{
  border:5px solid green;
  color:white;
}
#all_libraries{
  border:5px solid red;
    color:white;
}
#all_mylists{
  border:5px solid blue;
    color:white;

}
.player_controls {
	
  display: flex;
  gap: 18px;
	justify-content: space-between;
	align-items: center;
  position: relative;
  z-index: 1; /* Ensure it stays above the pseudo-element */
	
}
/* 
.player_controls::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 120%;
  background: linear-gradient(to top, var(--color-close-to-bg) 0%, var(--color-close-to-bg) 70%, transparent 100%);
  
  z-index: -1; 
  pointer-events: none; 
} */

#ppn{

	display:flex;
  height: 50px;
	flex-direction:row;
	justify-content: space-evenly;
	align-items: center;
  gap:12px;
}
.player_info{
	height: var(--default-player);
	display:flex;
  flex-direction:row;
  justify-content: start;
  align-items: center;
	gap:5px;
	color:grey;
  padding: 0px;
  width:100%;
}


.title_sub_box {

    height: auto;
    min-height: 40px;
    max-height: 100px;
    display: flex;
	flex-direction:column;
    align-items: start;
    justify-content: end;
    white-space: nowrap; /* Prevents text from wrapping */
   
    font-size: 28px; /* Adjust as needed */
    
    color: var(--title-text); /* Default text color */
    text-align: center;
    margin: 0; /* Remove default margins */
	  gap:10px;
    padding-left:0dvw;
    /* font-family: "Lucida Calligraphy", cursive; */
    /* font-family: "Dancing Script", cursive;
    font-weight: 600; */
    /* titles-font */
    
}
#files_all .title_sub_box{
		width: 100%;
		 padding-left:3dvw;
	}
.allfiles{
  width:100%;
}
.radio_title{
  max-width:450px ;
  display:none;
  height: 70px;
  justify-content: end;
  align-items: center;
  
}
.seperator{
	display: none;
	width:80%;
	height:2px;
	border:var(--seperator-hor);
	
	border-radius:8px;
}
.seperator_vert{
	display: flex;
	width:2px;
	height:calc(var(--sublist_calc) - 80px);
	border:var(--seperator-vert);
	margin-top:40px;
	border-radius:8px;
	
}
.seperator_vert.s1{
	display: none;
}

.radio_sub_box {
  position: relative;
  /* display: flex;
  flex-direction: row;
  width: 100%;
  height:100%; */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: center;
  overflow-y: visible;
  overflow-x: auto;
  margin: 0;
  scroll-behavior: smooth;
  box-sizing: border-box; 
  width: 100dvw; 
} 
.radio_sub_box_wrapper{
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;

  
  min-height: 180px;
  justify-content: center;
  overflow: visible;
  gap:0px;
  box-sizing: border-box;  
  padding:20px;
  padding-top:40px;

} 
.radio_sub_box::-webkit-scrollbar {
    display: none;
}
.cont_radios{
  width: calc(var(--radio_box-height) - var(--header-height) - 3vh);
  max-height: calc(var(--radio_box-height) - var(--header-height));
	overflow:visible;
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transition: transform  0.5s ease-in-out;
	pointer-events: auto;
  gap:1vh;
}
.cont_radios * {
  pointer-events: auto;
}
.radios {
	flex:1;
  position: relative;
	max-width:220px;
	max-height:220px;
    /* background: lightgray; */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: padding  0.5s ease-in-out, filter  0.5s ease-in-out,opacity  0.5s ease-in-out;
	border-radius: 15px;
	color:black;
	/* background-color: rgba(211, 211, 211, 0.9); */
	font-size: 1.8rem;
	/* opacity:0.8; */
	overflow: hidden;
	/* filter:blur(2px); */
}



.radios {
  pointer-events: auto;
}

.radio_info {
  
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  /* width: 100%; */
  height: 2vh;
  color: var(--title-text);
  object-fit: cover;
  z-index: 1;
  font-size:2vh;
  opacity:1;
  white-space: nowrap;
  transition: all 0.5s ease;
  
}
.cont_radios:hover,
.cont_radios:has(.radio_active) {
  transform: scale(1.15);
}

.cont_radios:has(.radios[data-logged="need_account"]) {
  transform: scale(0.95);
}

.cont_radios:hover .radio_info,
.cont_radios:has(.radio_active) .radio_info{
 opacity:1;
 
}



.radios.radio_active{
	 padding:0px;
   
}





.library_square_container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;           /* Allow wrapping to new rows */
  gap: 3vh;                 /* Space between squares */
  padding:5.6vh 2vh 5.6vh 2vh;
  background:transparent;
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  justify-content: center;
  overflow-y: scroll;
}

.library_square_container {

  scrollbar-width: thin;   /* Firefox */
  scrollbar-color: #99999960 transparent; /* Firefox */
}

/* Chrome, Safari, Edge */
.library_square_container::-webkit-scrollbar {
  width: 4px; /* thinner vertical scrollbar */
  height: 0px; /* hides horizontal scrollbar if it tries to appear */
}

.library_square_container::-webkit-scrollbar-track {
  background: transparent;
}

.library_square_container::-webkit-scrollbar-thumb {
  background-color: #99999960;
  border-radius: 2px;
}


.library_square_container{
  -webkit-mask-image: linear-gradient(
      to top,
      transparent 0px,
      black 40px,
      black calc(100% - 40px),
      transparent 100%
    );
  mask-image: linear-gradient(
    to top,
    transparent 0px,
    black 40px,
    black calc(100% - 40px),
    transparent 100%
  );
}

.library_square {
  position: relative;
  width: min(18vh,150px);
  height: min(18vh,150px);
  background-color: #fff;
  background-size: cover;
  background-position: center;
  /* border: 1px solid #ccc; */
  border-radius: 18px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.library_square[station_id='46'] {
  border:2px solid black;

}

.library_square.L_open{
  transform: scale(1.10);
  border-color: #999;
}
.library_square.pulse_Library{
  animation: pulse-border2 1.7s infinite;
  border:1px solid var(--green_playing);
}
.library_square:hover {
  background-color: #f0f0f0;
  transform: scale(1.10);
  border-color: #999;
}

.radios.radio_active{
  
  
  animation: pulse-border 1.7s infinite;
  border-radius: 15%;
  
}

@keyframes pulse-border {
  /* 0% { box-shadow: 0 0 0 0 #00000057; } */
  0% { box-shadow: 0 0 0 0 var(--green_playing); }
  70% { box-shadow: 0 0 15px 15px rgba(0, 255, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}

@keyframes pulse-border2 {
  0%   { box-shadow: 0 0 0 0 var(--green_playing); }
  70%  { box-shadow: 0 0 15px 15px rgba(0,115,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,115,255,0); }
}

#all_songs {
	gap:15px;
	max-height: (var(--vh) * 60);   /* or any height you want */
	overflow-y: auto;    /* enables vertical scrolling */
	padding: 10px;
}

.radios[data-logged="need_account"] img {
  filter: grayscale(95%);
}




.in_cate[data-logged="need_account"]{
  filter: grayscale(100%);
  position: relative;
}

.in_cate[data-logged="expired"]{
  filter: grayscale(100%);
  position: relative;
}

.in_cate[data-logged="need_account"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background: url('/icon/small/lock.svg') no-repeat center/contain;
  pointer-events: none;
}



/* .radios[data-logged="true"]:hover img { */
    /* transform: scale(1.01); */
/* } */
/* .radios[data-logged="true"].radio_active img { */
    /* transform: scale(1.01); */
    /* border: 3px solid #DDDDDD; */
    /* box-shadow: 0 0 20px rgba(255, 255, 255, 0.9); */
/* } */



.radios img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    border-radius: 15%; 
    transition: transform 0.2s ease-in-out, border-radius 0.2s ease-in-out;
	 
}
 
.lists {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    padding: 0 28px;
    overflow-y: auto; /* Allows scrolling */
    overflow-x: hidden; /* Prevents horizontal overflow */
    max-height: 100%; /* Ensures it doesn't exceed viewport */
	scrollbar-width: none; /* For Firefox */

}
.arrow-icon {
    font-family: 'Arial', 'Segoe UI Symbol', sans-serif; /* Fonts that support arrows */
}




.mini_row_scroll {
	position:relative;
    display: flex;           /* Flexbox for horizontal layout */
    flex-direction: row;     /* Ensures items are in one row */
    gap: 15px;                /* Spacing between items */
    overflow-x: auto;        /* Enable horizontal scrolling */
    overflow-y: hidden;      /* Prevent vertical scrolling */
    white-space: nowrap;     /* Prevents items from wrapping */
    width: 100%;             /* Full width */
    padding-left: 10px;     /* Right padding for clean edge */
    /* mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0)); */
    /* -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0)); */
    height:90px;
	align-items: center;
    justify-content: start;
    -ms-overflow-style: none; /* Hides scrollbar in IE */
    scrollbar-width: none;   /* Hides scrollbar in Firefox */
	padding:0px 15px;
	 scroll-behavior: smooth;
}

.mini_row_scroll::-webkit-scrollbar {
    display: none;           /* Hides scrollbar in Chrome, Safari, and Edge */
}



.mini_row_scroll2 {
	position:relative;
  display: flex;           /* Flexbox for horizontal layout */
  flex-direction: column;     /* Ensures items are in one row */
  gap: 5px;                /* Spacing between items */
  overflow-x: hidden;        /* Enable horizontal scrolling */
  overflow-y: scroll;      /* Prevent vertical scrolling */
  /* white-space: nowrap;     Prevents items from wrapping */
  width: 100%;             /* Full width */
  max-height:calc( var(--sublist_calc) - 70px);
  
	align-items: center;
  justify-content: start;
  scrollbar-width: none;    

	scroll-behavior: smooth;
  /* margin:2px; */
  padding:15px 5px 5px 5px;
  
}


.mini_row_scroll2::-webkit-scrollbar {
  display: none;                      /* Chrome, Safari, Edge */
}






#mini_row_add {
	
	position: absolute;
	top:15px;
	right:10px;
    width: 55px;         /* Ensures items stay in a row */
    height: 70px;            /* Fixed height */
    display: flex; /* Flex ensures centering */
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-bg); /* Background color */
    background-image: url('/icon/small/plus.svg'); /* SVG icon */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%; /* Adjust SVG size if needed */
    border-radius: 8px;
	cursor:pointer;
}


#mini_row_add_end {
	min-width: 55px;
	width: 55px;         /* Ensures items stay in a row */
    height: 55px;            /* Fixed height */
    display: flex; /* Flex ensures centering */
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-bg); /* Background color */
    background-image: url('/icon/small/plus.svg'); /* SVG icon */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%; /* Adjust SVG size if needed */
    border-radius: 8px;
	cursor:pointer;
}


#mini_row_add_end2 {
	position: absolute;
  top: 5px;
  right: 30px;

	width: 30px;         /* Ensures items stay in a row */
  height: 30px;            /* Fixed height */
  display: flex; /* Flex ensures centering */


  background-image: url(/icon/small/settings1.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  
	cursor:pointer;
  /* border:1px solid red; */
  font-family: "Roboto Condensed", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: black;
  /* border: 1px solid red; */
  z-index:10;
  white-space: nowrap;
}
#mini_row_add_end2:hover{
  animation: spin 1.5s ease-in-out ;
}

.list_icon {
  flex: 0 0 auto;          /* Prevents shrinking */
  width: 55px;         /* Ensures items stay in a row */
  height: 55px;            /* Fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #505050;     /* Sample background */
  color: #fff;
  border-radius: 25%;
	cursor:pointer;
	transition: transform 0.3s ease;
}

.list_icon2 {                       /* 1 */
  flex: 0 0 auto;          /* Prevents shrinking */
  flex-direction: row;
  width: 100%;         /* Ensures items stay in a row */
  height: 40px;            /* Fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff30;  
  color: #000000;
  border-radius: 10px;
	cursor:pointer;
  padding-left:0px;
  font-size: 18px;
  font-weight: 600;
  font-family: "Lucida Calligraphy", cursive;
  transition: all 0.2s ease-in-out;
  gap:10px;
}

.list_icon2:hover{
  background: #ffffffaa;
}
.list_icon2_title{
  /* flex: 0 0 auto;  */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; 
  height: 100%;
  font-family: "Lucida Calligraphy", cursive;
  /* font-family: "Lucida Handwriting", cursive; */
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.list_icon2_title:hover{
  transform: scale(1.05);
}
.list_icon2_buttons {
  display: none;
  flex-direction: row;
  width:100px;
  height: 100%;
  /* border:1px solid rgb(255, 0, 0); */
  gap:10px;
  justify-content: space-evenly;
  align-items: center;
}
.list_icon2.mini_active .list_icon2_buttons {
  display:flex;
}
.list_icon2_shuffle, .list_icon2_edit  {
  display: flex;
  width:40px;
  height: 100%;
}
.list_icon2_edit {
  display:none;
  border:1px solid green;
}

#favorites, #favorites2{
  display: none;
}

#favorites.preselected, #favorites2.preselected{
  display: flex;
  font-size: 22px;
}

.list_icon2.mini_active {
  position: relative;
  /* border: 1px solid grey; */
  background: white;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Bright white glow */
  font-size: 18px;
  font-weight: 500;
}
.list_icon2.mini_active .list_icon2_title{
  justify-content: center;
}
.list_icon2.mini_active .list_icon2_buttons{
  position: absolute;
  right:0px;
  top:0px;
  width:40px;
  height:40px;
}
.list_icon2.mini_active::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -4px;             /* tweak as needed */
  width: 80%;
  height: 2px;
  border-radius: 1px;
  background: #bfbfbf;      /* grey */
  pointer-events: none;
}

.list_icon2.hidden_playlist_button {
  display:none;

}
/* 
.list_icon:not(.mini_active):not(#favorites):hover {
    transform: scale(1.2); /* Smaller hover effect 
} 

*/
.list_icon#favorites{
    transform: scale(1.10); 
}

.list_icon img{

    border-radius: 25%;
}

.list_icon_last {
    flex: 0 0 auto;          /* Prevents shrinking */
    width: 15px;         /* Ensures items stay in a row */
    height: 70px;            /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
   
    border-radius: 8px;
}

.scroll_lists {
	 background: var(--primary-bg);
	 border:var(--transparent-border);
	 border-radius:16px;
	 grid-auto-rows: 100px; /* Creates one fixed row */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Flexible columns */
	grid-auto-rows: calc(140px * (4 / 3)); /* Maintain 4:3 ratio */
    width: 100%;
    max-height: 100%; /* Ensures it doesn't overflow its container */
    overflow-y: auto; /* Enables vertical scrolling when needed */
    overflow-x: hidden;
    align-items: start; /* Keeps everything aligned properly */
    justify-content: space-between; /* Ensures even spacing between items */
	
	scrollbar-width: none; /* For Firefox */
 }



.lists_icons {
    position: relative;
    width: 100%;
    height: 100%;
    /* background: lightgray; */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    transition: padding 0.2s ease-in-out;
}

	
.lists_sub_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Aligns content to the top */
    justify-content: space-between; /* Ensures both sides remain within the container */
    gap: 28px;
   
    overflow: hidden; /* Prevents overflow */
    max-height: 100%;
}





.list-divider {
    width: 92%; 
	margin:auto;
    height: 2px; /* Thickness of the line */
    background: gray; /* Match the theme's text color */
   
    border-radius: 2px; /* Optional: smooth edges */
}

.list-divider2 {
    width: 100%; 
    height: 9px; /* Thickness of the line */
     /* Match the theme's text color */
    background: var(--primary-bg);
    border-radius: 2px; /* Optional: smooth edges */

}

#mini_row{
	position: relative;
	
	height:90px;
	display:flex;
	flex: 0 0 auto;
}

#mini_row2{

	position: relative;
  min-height:60px;
  max-height:calc( 100vh - var(--default-player-mobile) - var(--header-height-mobile) - 260px);
	display:flex;
	/* border:1px solid green; */
  overflow: hidden;
  scrollbar-width: none;      /* Firefox */

}
#mini_row2::-webkit-scrollbar {
    display: none;              /* Chrome, Safari */
}
.titles {
	position: relative;
	z-index: 1;
	flex: 0 0 auto; /* Ensures sufficient height for content */
         /* Allow the height to adjust based on content */
  display: flex;
	flex-direction:column;
	justify-content: center;
  align-items: center; /* Ensures text is vertically centered */ 
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
 
  height:4.4vh;
}


#title_right{
	display:none;
}
.title {
    min-height: 40px; /* Ensures sufficient height for content */
    height: auto;     /* Allow the height to adjust based on content */
    display: flex;
    align-items: center; /* Ensures text is vertically centered */
    justify-content: center;
    padding-top: 5px; /* Extra spacing */
}

.my_listA, .my_listB {
	
	
    background: var(--primary-bg);
    border: var(--transparent-border);
    border-radius: 0px;
    align-items: start; /* Ensures proper alignment */
    scrollbar-width: none; /* For Firefox */
    color: gray;
    /* padding-bottom: 15px; */
	box-sizing: border-box;   /* Includes padding in width */
}

.my_listA{
	display: none;
    grid-template-columns: 1fr; /* Single column layout */
    grid-auto-rows: minmax(40px, 40px); /* Maintains minimum height for each row */
    width: 100%;
	
	height:calc(((var(--vh) * 100) - var(--header-height) - var(--default-player) - 200px)); /* 50px My lists 90px mini _ row 40px list name total 180*/
  height:calc( var(--sublist_calc) - 130px);
	overflow-y: auto;
  overflow-x: visible; /* Prevents horizontal overflow */
	align-items: center;
  padding-right: 20px;
	padding-bottom:60px; /* used for creating space under the list, makes it obvious which is the last song*/
  margin:0px 5px;
}
.my_listA_open{
  display: grid;
}
.my_listA_not_logged.preselected{
  display: grid;
}

.not_logged{
  display:none;
}
.my_listB {
	display: none;
  grid-template-columns: 1fr; /* Single column layout */
  grid-auto-rows: minmax(60px, auto); /* Maintains minimum height for each row */
  width: 100%;
	max-height:calc(100% - 40px);
  overflow-y: auto; /* Enables scrolling if content overflows */
  overflow-x: clip; /* Prevents horizontal overflow */
	padding-top:0px;
	position: relative;
	z-index: 2;
  gap:0px;
}

.categories, #category_button{
	position:relative;
  width: 100%;
  min-height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:15px 0px 0px 0px;
	flex-direction:column;
  overflow-y: hidden; /* Enables scrolling if content overflows */
  overflow-x: auto; /* Prevents horizontal overflow */
  max-height: 100%; /* Restricts height dynamically */
	overflow: hidden; /* prevent scrolling here */
	cursor:default;
}
#category_button{
  border:1px solid grey;
  display:none;
}
#category_button::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background-image: url(/icon/small/pl_icons/back-arrow.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}


.categories.sub_cate .in_cate{
  cursor:pointer;
}
.categories:not(.open), .in_cate.open{
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
}
.categories:not(.open){
  padding: 10px;
  display: none;
}
.in_cate.pulse_Library{
  animation: pulse-border 1.7s infinite;
}

/* 
.carter-one-regular {
  font-family: "Carter One", system-ui;
  font-weight: 400;
  font-style: normal;
} */

.in_cate {
	position:relative;
  min-width: calc(100%);
	margin: 0 0px;
	height: 40px;
  display: flex;
	flex-shrink: 0; 
  flex-direction: row;
	justify-content:space-between;
  align-items: center;
  border-radius: 8px;
  color: var(--title-text);
    
	cursor:pointer;
	
	font-size: clamp(1.0rem, 2vw, 1.4rem);

	padding-left:20px;
	text-align: center;
	font-weight:400;
	color: black;
	transition:all 0.3s linear 0.05s;
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.in_cate.open{
  	background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.in_cate_left{
  display: none;
  width:100%;
  flex-direction: row;
  justify-content:start;
  align-items: center;
  transition: all ease-in-out 0.3s;
  
}

.in_cate.open {
	justify-content:end;
  padding-left:0px;
  min-height:40px;
  cursor: default;
}


.in_cate_buttons{
	display:flex; 
	flex-direction:row;
	align-items:center;
	justify-content:end;
	gap:20px;
	width:100%;
	max-width:100px;
	height:40px;
	padding-right:15px;
}


.in_cate_shuffle{
	/* flex:1; */
  display: flex;
  flex-direction: row;
	min-width:80px;
	height:40px;
	/* border:1px solid black; */
	z-index:2;
  /* border: 2px solid red; */
  background: transparent;
  border-radius: 5px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  gap:0px;
  justify-content: space-evenly;
} 
.shuffle_inrow{
  width:40px;
	height:40px;
  /* border: 1px solid red; */
}
.shuffle_random{
  width:40px;
	height:40px;
  /* border: 1px solid red; */
}

.in_cate_shuffle.random_pick .shuffle_inrow{
  background-image: url(/icon/small/pl_icons/repeat.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
}
.in_cate_shuffle.random_pick .shuffle_random{
  background-image: url(/icon/small/pl_icons/shuffle-green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
}
.in_cate_shuffle.next_in_row .shuffle_inrow{
  background-image: url(/icon/small/pl_icons/repeat-green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
}
.in_cate_shuffle.next_in_row .shuffle_random{
  background-image: url(/icon/small/pl_icons/shuffle.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
}

.in_cate_play{
  display: none !important;
  width:40px;
	height:40px;
	/* border:1px solid black; */
	z-index:2;
  /* border: 2px solid red; */
  background: transparent;
  border-radius: 5px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  padding:10px;
	background-image:url('/icon/small/pl_icons/play-black.svg') no-repeat center center;  
    background-size: 85%;
    /* display: none; */
}
.in_cate_play.L_paused{
	background:url('/icon/small/pl_icons/pause-black.svg') no-repeat center center;  
    background-size: 85%;
}
.in_cate_play.already_play{
	display:none;
}
.in_cate_shuffle.random_pick{
  /* background-image: url('/icon/small/pl_icons/shuffle.svg'); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
  z-index: 2;
}
.list_icon2_shuffle.playlist_in_row{
  /* background-color: red; */
  background-image: url('/icon/small/pl_icons/repeat-black.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
  z-index: 2;
}
.list_icon2_shuffle.playlist_shuffled{
  /* background-color: red; */
  background-image: url('/icon/small/pl_icons/shuffle-black.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
  z-index: 2;
}

.in_cate_shuffle.next_in_row{
  /* background-image: url('/icon/small/pl_icons/repeat.svg'); */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
  z-index: 2;
}

.in_cate_close{
	background:url('/icon/small/pl_icons/close_icon.svg') no-repeat center center;  
  background-size: max(20px,20%);
	display:none; 
	flex-direction:row;
	align-items:center;
	justify-content:center;

	width:100%;
	min-width:30px;
	max-width:100px;
	height:70px;
	padding-left:15px;

}
.in_cate_symbol{
  display: flex;
  min-width:35px;
  min-height:35px;
  /* border: 1px solid red; */
  z-index: 10;
}

.in_cate:not(.open) .in_cate_shuffle{
   display: none; 
}

.in_cate:not(.open) .in_cate_play{
  display:none;
   opacity:0.4; 
}

.in_cate:not(.open) .in_cate_play:hover{
   opacity:1; 
}
.in_cate:not(.open) .in_cate_left:hover{
  transform:scale(1.2);
  transform-origin: left center;
}
.cate_list{
	display:none;
	 box-sizing: border-box;
	/* border: 2px solid red; */
	width:100%;
	  flex: 1;
  overflow-x: visible;
	overflow-y: hidden;    /* Enable scrolling */
	padding-bottom:calc(20px);
	
	 max-height: 1300px; 
   contain: content;
	
}
/* .the_play{
  display: flex;
  position: absolute;
  bottom:5px;
  right:5px;
  width:35%;
  height:35%;
  border:1px solid grey;
  border-radius:50%;
  background-color: #a5a5a550;
  transition: all 0.5s ease-in-out;
}
.the_play:hover{
  background-color:var(--green_playing);
}
.library_square.pulse_Library .the_play{
  background-color:var(--green_playing);
} */
.the_play {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 35%;
  height: 35%;
  /* border: 1px solid grey; */
  border-radius: 50%;
  background-color: transparent;
  background-image: url(/icon/small/pl_icons/play-black.svg);
  background-size: 50% 50%;
  background-position: center;
  background-repeat: no-repeat;

  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease;
  opacity: 0;
}
.library_square.L_open .the_play {
  opacity: 1;
}
.the_play.the_pause{
  background-color: transparent;
  background-image: url(/icon/small/pl_icons/pause-black.svg);
  background-size: 50% 50%;
  background-position: center;
  background-repeat: no-repeat;
  opacity:1 !important;
}
.subplaytotal{
  display: flex;
  flex-direction: column;
  
  align-items: center;
  justify-content: end;
  position: absolute;
  bottom: 0px;
  right: 0px;
  width:100%;
  height:25%;
  /* border:1px solid grey; */
  padding:5px;
  transition: height 1.0s ease-in-out, opacity 0.3s ease-in-out;
  opacity:0;
  overflow-y: clip;
  gap:5px
}
.multigategories[data-type='multi']:hover .subplaytotal{
  opacity:1;
}
.multigategories[data-type='multi']:hover .the_icon_play{
  opacity:0.5;
}
.the_icon_play{
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: transparent;
  background-image: url(/icon/small/pl_icons/play-black.svg);
  background-size: 50% 50%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}
.subplaytotal:hover .the_icon_play{
 opacity: 0 !important;
}
.subplaytotal:hover {
  height:100%;
}
.subplaytotal:hover .the_play.subplay{
  opacity: 0.5;
}
.subrow{
  display: flex;
  position: relative;
  width:100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffffAA;
  border-radius:5px;
  /* border:1px solid red; */
  opacity:0;
}
.subplaytotal:hover .subrow{
  opacity:1;
}
.sub_title{
  padding-left:10px;
  font-size: 14px;
}

.the_play.subplay{
  position: relative;
  width: 30px;
  height:30px;
  border-radius: 50%;
  background-color: transparent;
  background-image: url(/icon/small/pl_icons/play-black.svg);
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}


.library_square:not(.multigategories):hover .the_play{
  opacity: 0.5;
}
.library_square.multigategories[data-type=single]:hover .the_play{
  opacity: 0.5;
}

.the_play:hover {

  transform: scale(1.20);
  opacity: 1 !important;
}


.library_square.pulse_Library .the_play {

  background-position: center, center;
  background-repeat: no-repeat;

  animation: pulse 1.5s infinite;
  opacity: 1;
}


/* Chrome, Safari, Edge */
.cate_list::-webkit-scrollbar {
  width: 4px; /* thinner vertical scrollbar */
  height: 0px; /* hides horizontal scrollbar if it tries to appear */
}

.cate_list::-webkit-scrollbar-track {
  background: transparent;
}

.cate_list::-webkit-scrollbar-thumb {
  background-color: #99999960;
  border-radius: 2px;
}

/* Hide scrollbar for a cleaner look */
.my_listA::-webkit-scrollbar {
    width: 0px;
}

.my_listA::-webkit-scrollbar-thumb {
    background: #555; /* Scrollbar color */
    border-radius: 10px;
}

.my_listA::-webkit-scrollbar-thumb:hover {
    background: #777;
}



/* Hide scrollbar for a cleaner look */
.my_listB::-webkit-scrollbar {
    width: 0px;
}

.my_listB::-webkit-scrollbar-thumb {
    background: #555; /* Scrollbar color */
    border-radius: 10px;
}

.my_listB::-webkit-scrollbar-thumb:hover {
    background: #777;
}
.row {
	height: 40px;
	position: relative;
  display: flex;
	flex-direction:row;
  width:100%;
	overflow-x: hidden;
	overflow-y: hidden;
	box-sizing: border-box;   /* Includes padding in width */
	gap:5px;
	/* justify-content:center; */
	text-align:center;
	  
	align-items: center; 
  background: #ffffff30;
}

.row, .song-name, .song-name2, .nav-item {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.play-btn{
	width:35px;
	height:35px;
	display: flex;
	align-items: center;
	justify-content: center;
	
}


.Add-btn {
  /* remove browser default padding */
  

  /* include any padding/border in your 45×40 box */
  box-sizing: border-box;
  
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:auto;
}
.buy-btn {
  /* remove browser default padding */
  /* include any padding/border in your 45×40 box */
  box-sizing: border-box;
  width: 30px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:auto;
  background: url('/icon/cart/download.svg') no-repeat center center;
	background-size: 65%;
  opacity:0.5;
}
.buy-btn[data-dcheck="0"] {
  display: none;
}
.buy-btn:hover{
  opacity:1;
  
}

.small_pic{
  width: 40px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  margin:auto;
  /* border:1px solid black; */
 opacity:0;
}

.small_pic img {
  width: 35px;
  height: 35px;
  object-fit: cover;
  border-radius: 25%;
  filter: grayscale(90%);
  transition: filter 0.5s ease, opacity 0.5s ease;
  /* opacity:0; */
}

.Add-btn object {
	
	
  /* treat the <object> as a block-level flex-item */
  display: block;
  /* force it to centre if anything odd is happening */
  
  transition: transform 0.3s ease;
}

@keyframes slideRight {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(0); }
  50%  { transform: translateX(10px); }
  75%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* apply it to every <object> in .Add-btn */
.Add-btn object {
  /* duration, easing, and run once */
  /* animation: slideRight 1.2s ease-in-out both; */
  animation: slideRight 2s ease-in-out both;
}



.my_listB .Add-btn {
    opacity: 0.4;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.my_listA .delete-btn {
    opacity: 0.5;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.my_listA .row, 
.my_listB .row {
    color: black; /* Default text color */
    cursor: pointer; /* Indicate clickable rows */
    transition: color 0.3s ease; /* Smooth transition */
}

/* Active Row */
.my_listA .row.my_active, 
.my_listB .row.active {
    color: black;
    background-color: rgba(255, 255, 255, 0.1); /* Highlight clicked row */
}

.row.my_playing .song-name {
  color: var(--green_playing);
}

.row.my_paused .song-name {
  color: var(--orange_playing);
}
.row.now_playing .song-name {
   color: var(--green_playing); 
}

.row.paused .song-name {
   color: var(--orange_playing) !important; 
}


/* Inactive Rows */
.my_listA .row.inactive, 
.my_listB .row.inactive {
    color: gray;
}


/* Play Button Styles */
.my_listA .play-btn, 
.my_listB .play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
    /* transform: translateY(-10%); */
    transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
	opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}



.my_listA .row.my_active .play-btn,
.my_listA .row.my_active .delete-btn {
    opacity: 1; /* Stay visible */
    visibility: visible;
    
}

.row.my_active{
  overflow-x: visible !important;
}
.my_listB .row.active .play-btn,
.my_listB .row.active .Add-btn {
    opacity: 1;
    visibility: visible;
}


.my_listA .row:hover .delete-btn,
.my_listB .row:hover .Add-btn {
    opacity: 1;
    visibility: visible;
}

/* 

.my_listA .play-btn:hover, 
.my_listB .play-btn:hover {
    
    transform: scale(1.2);
} */


.my_listA .play-btn.active, 
.my_listB .play-btn.active {
   /* color: green;*/
    opacity: 1; /* Ensure the active play button is always visible */
    visibility: visible;
}


.my_listA .play-btn.hidden, 
.my_listB .play-btn.hidden {
    color: white; /* Turn white */
    opacity: 0; /* Hidden but still exists in the DOM */
    visibility: hidden;
}

.my_listA .row:hover .play-btn,
.my_listA .row:hover .delete-btn,
.my_listB .row:hover .play-btn,
.my_listB .row:hover .Add-btn {
    opacity: 1;
    visibility: visible;
}


.my_listA .row:hover {
    color: black; /* Change text color to white */
    transition: color 0.3s ease; /* Smooth transition effect */
}


.my_listB .row:hover {
    color: black; /* Change text color to white */
    transition: color 0.3s ease; /* Smooth transition effect */
}
#A_list {
		display: block; /* Show A_list by default */
     padding: 0px 20px;
     position: relative;
	}
#A_list::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;          /* stick to the left */
    width: 2px;       /* thin vertical line */
    height: 80%;
    background-color: rgba(0,0,0,0.15); /* soft color */
    border-radius: 50%;
}
#B_list {
		display: flex; /* Hide B_list by default */
    /* background: #ebdcd2; */
    padding: 0px 20px;
	}
#title_leftA{display:none;}
#title_rightB{display:none;}
#title_gap{display:none;}

.delete-btn {
	color:grey;
  width:35px;
  height:40px;
    /* position: absolute; */
    /* right: 10px;  */
    /* top: 45%;  */
    /* transform: translateY(-50%);  */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    user-select: none;
	/* padding-left:15px; */
    background-image: url(/icon/small/X1_black.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35%;
  opacity: 0.6;
}

.delete-btn:hover {
    color: red; /* Change text color to red */
    background-color: transparent; /* Optional: Keep background clear */
    background-image: url(/icon/small/X1_red.svg);
    transition: color 0.3s ease; /* Smooth transition */	
    opacity: 1;
}
.arrow-icon {
  color: white;            /* default fill color */
  transform-origin: center;
  transform: scale(-1, 1);
}


.btn-scaled img{
  display: inline-block;
  transform-origin: center center;
  animation: poppp 3.2s ;
}

@keyframes poppp {
  0%   { transform: scale(1);            }
  10%   { transform: scale(1);            }
  70%  { transform: scale(2); 
		 box-shadow: 0 12px 24px rgba(0,0,0,0.25); }
  100% { transform: scale(1.1) ;      }
}

@keyframes scroll-text {
    0% {
        transform: translateX(0);  /* Start from original position */
    }
	15% {
        transform: translateX(calc(-100% + 180px)); /* Scroll stops when full text is visible */
    }
	30% {
        transform: translateX(0);  /* Start from original position */
    }
    100% {
        transform:  translateX(0); /* Scroll stops when full text is visible */
    }
}

.song-name {

    font-size: 16px; 
	height:40px;
	margin: auto 20px;
	padding-right:0px;
	flex: 1;                   /* Expands to fill available space */
	white-space: nowrap;       /* Prevents text from wrapping */
    overflow-x: hidden;          /* Hides overflow text */ 
    text-overflow: ellipsis;   /* Adds "..." if text overflows */
	position: relative;          /* Required for overflow control */
	max-width: calc(100% - 80px );
	display: flex;
	transition:transform 0.3s ease;
  justify-content: start;
	align-items:center;
  z-index: 1;
  padding-left: 15px;
  padding-left: 0px;
}

.row:hover .song-name{
  transform:scale(1.15);
}
.row *{
  z-index: 1;
}
.row .wrapper_buttons{
  z-index: 2;
}
span.name_only {
  display: flex;
  flex-direction: column;
	height:50px;
	position:relative;
  color: black;
  align-content:center;
  justify-content:center;
	padding:0px 10px;
	white-space:nowrap;
  font-family: "Roboto Condensed", sans-serif;
}


.row.fake{
	cursor:default;
}

/* #listB { */
    /* padding-bottom: 50px; */
/* } */
.my_listA{
	min-width: 100%;
  padding-right: 0px;
}
.my_listA .row{
  min-width:100%;
  justify-content: space-between;
}

.my_listA {
    counter-reset: songIndex;
}

.my_listA .row {
    counter-increment: songIndex;
    position: relative;
}

.my_listA .row::before {
    content: counter(songIndex);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-weight: bold;
}
.my_listA .song-name{
  margin:auto 0px auto 40px;
}
.song-name{
  transform-origin: left center;
}

.my_listA .play-btn {
	
	padding-left:10px;
}

#recommended{
	margin:auto;
}

.more_list {
	background: var(--primary-bg);
  border: var(--transparent-border);
	border-radius: 8px;
	height:100%;
	width: 100%;
	padding: 13px;
}

.player-btn {
	display: flex;
  width: 40px;
  height: 40px;
  background-position: center;
  cursor: pointer;
	border-radius:50%;
	
}

.pl-play-btn {
	display:flex;
  background-color: var(--our_blue);
  background-color: transparent;
  background-image: url('/icon/small/pl_icons/play.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
	width:  min(45px, 25vw);
	height: min(45px, 25vw);
	border:1px solid black;
    border-radius: 50%; /* Optional rounded corners */
}


.pl-pause-btn {
	position: relative;
	display:flex;
	justify-content: center;
	align-items: center; 
  background-color: var(--our_blue);
  background-color: transparent;

  background-image: url('/icon/small/pl_icons/pause1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
	width:  min(45px, 25vw);
  height: min(45px, 25vw);
  border:1px solid black;
  border-radius: 50%; /* Optional rounded corners */
	z-index: 1;
}
.pl-stop-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--our_blue);
  background-color: transparent;
  background-image: url('/icon/small/pl_icons/pause1.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
  width: min(45px, 25vw);
  height: min(45px, 25vw);
  border:1px solid black;
  border-radius: 50%;
  overflow: visible;
  z-index: 1;
}

.pl-next-btn {
	display:flex;
    background: 
        url('/icon/small/pl_icons/skip.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 65%;  /* Adjust play button size */
	width:  min(35px, 12vw);
	height:  min(35px, 12vw);
	border:1px solid black;
    border-radius: 50%; /* Optional rounded corners */
}



.pl-previous-btn {
	display:flex;
    background: 
        url('/icon/small/pl_icons/previous.svg') no-repeat center center,  /* Play button */
        transparent; /* Gray background */
    background-size: 65%;  /* Adjust play button size */
	width:  min(35px, 12vw);
	height:  min(35px, 12vw);
	border:1px solid black;
    border-radius: 50%; /* Optional rounded corners */
}

.pause-btn { background: gray; }


#add_to_list{
	display:none;
	width: 60px;
    height: 70px;
	background:url('/icon/small/3_dot.svg') no-repeat center center;  
    background-size: 45%;
	cursor:pointer;

	
}
#add_to_list2, #add_to_list2_cont {
	display: flex;
	width: 50px;
	height: 50px;
	position: relative;
	cursor: pointer;
}
#add_to_list2_cont {
  justify-content: center;
  align-items: center;
}
#add_to_list2{
  display:none;
}
/* Add icon (default shown) */
#add_to_list2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/icon/small/add.svg') no-repeat center center;
	background-size: 45%;
	opacity: 1;
	transform: rotate(0deg);
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	pointer-events: none;
}

/* Tick icon (default hidden) */
#add_to_list2::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/icon/small/tick-circle.svg') no-repeat center center;
	background-size: 55%;
	opacity: 0;
	transform: rotate(-180deg);
	transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	pointer-events: none;
}

/* Transition to tick icon */
#add_to_list2.added::before {
	opacity: 0;
	transform: rotate(180deg);
}

#add_to_list2.added::after {
	opacity: 1;
	transform: rotate(0deg);
}



#volume_percentage{
  color:var(--our_blue);
  color: black;
  display: none;
}

#volume_cont{
  position: relative;
	display: flex;
  justify-content: center;
  align-items: center;
	width: 50px;
	height: 50px;
  /* bottom: 3px;
  right: 30px; */
  grid-column: 5 / 6;
}

#volume_cont_replacement{
  position: relative;
	display: flex;
  justify-content: center;
  align-items: center;
	width: 50px;
	height: 50px;
}
#volume {
	position: relative;
	display: flex;
	width: 40px;
	height: 40px;
	background: url('/icon/small/pl_icons/speaker.svg') no-repeat center center;
	background-size: 55%;
	cursor: pointer; 
	padding: 10px 10px;
	background-color: transparent;
	overflow: visible;
	z-index: 2;
}

#volume.low {
    background: url('/icon/small/pl_icons/volume_low2.svg') no-repeat center center;
	 background-size: 55%;
	
	}

#volume.mute {
    background: url('/icon/small/pl_icons/volume_mute3.svg') no-repeat center center;
	 background-size: 55%;
	
	}
	
#volume_expanded {
	position: absolute;
	left: 0; /* Position above the speaker */
	top: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 3;
  height:40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform-origin: top left;
  transform: rotate(-90deg);
}


#volume_container {
  position: relative;
	display: flex;
	flex-direction: column;
	background: var(--secondary-bg);
  background: transparent;
	
	
	/* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); */
	height: 40px;
	min-width: 70px;
	justify-content: center;
	text-align: center;
}

    #volume_bar {
      width: 100px;
      height: 8px;
      appearance: none; /* Remove default styling */
      background: white;
      border-radius: 5px;
      outline: none;
      border:1px solid var(--our_blue_075opac);
      cursor: pointer;
    }

    /* Track styling */
    #volume_bar::-webkit-slider-runnable-track {
      height: 6px;
      background: #fff;
      border-radius: 5px;
    }

    #volume_bar::-moz-range-track {
      height: 6px;
      background: #fff;
      border-radius: 5px;
    }

    /* Thumb styling */
    #volume_bar::-webkit-slider-thumb {
      appearance: none;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--our_blue);
      background: black;
      cursor: pointer;
      margin-top: -1px; /* Align with track */
    }

    #volume_bar::-moz-range-thumb {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--our_blue);
      background: black;
      cursor: pointer;
    }


#volume:hover #volume_expanded {
	opacity: 1;
	pointer-events: auto;
}

.player_progress {
	
  width: 100%;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	padding-top:0px;
	
}
.timeDisplay{
	flex:1;
    width: 100%;
	display:flex;
	gap:20px;
	text-align: center;
	justify-content:space-between;
}
.timeDisplay1, .timeDisplay2{
	padding:0 5px;
  color:var(--title-text);
  font-size: 14px;
}
#progressBar {
  width: 100%;
  height: var(--progress-bar-size);               /* track height */
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, red 0%, #50505070 0%);
  border-radius:6px;
  accent-color: grey;
  cursor: pointer;
}

#progressBar::-webkit-slider-thumb {
  position: relative;
  -webkit-appearance: none;
  /* width: calc(var(--progress-bar-size) + 2px);
  height: calc(var(--progress-bar-size) + 2px); */
  width: calc(var(--progress-bar-size) + 2px);
  height: calc(var(--progress-bar-size) + 22px);
  background: radial-gradient(
    circle at center,
    grey 0%,
    grey calc((var(--progress-bar-size) ) / 2),
    transparent calc((var(--progress-bar-size) ) / 2 + 1px)
  );
  /* border: 1px solid grey; */
  border-radius: 0%;

  cursor: pointer;
  box-shadow: 0 0 0 0 grey; /* fallback */
  opacity:0;
}

/* Firefox */
#progressBar::-moz-range-thumb {
  width: var(--progress-thumb-hitbox);
  height: var(--progress-thumb-hitbox);
  margin-top:10px;
  margin-bottom:10px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* IE/Edge */
#progressBar::-ms-thumb {
  width: var(--progress-bar-size);
  height: var(--progress-bar-size);
  background: grey;
  border-radius: 50%;
  cursor: pointer;
}

.custom-alert {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Transparent background */
  justify-content: center;
  align-items: center;
  z-index:1000;
  color:white;
}
p#alertMessage{
  color:white;
}
.alert-content {
  border:3px solid var(--primary-bg);
  background: var(--secondary-bg);
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}

#closeAlert {
  padding: 10px 20px;
  margin-top:20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}


/* Modal Background */
.custom-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* High z-index to display on top */
}

/* Modal Content */
.custom-modal-content {
    background: var(--secondary-bg);
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
}

/* Modal Message */
#modalMessage {
    font-size: 18px;
    margin-bottom: 20px;
    color: white;
}

/* Button container */
.modal-buttons {
    display: flex;
    justify-content: space-between;
}

/* Confirm Button */
.confirm-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    background-color: #4CAF50; /* Green */
    color: white;
    transition: background-color 0.3s;
}

.confirm-btn:hover {
    background-color: #45a049; /* Darker green */
    opacity: 0.8;
}

/* Cancel Button */
.cancel-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    background-color: #f44336; /* Red */
    color: white;
    transition: background-color 0.3s;
}

.cancel-btn:hover {
    background-color: #e53935; /* Darker red */
    opacity: 0.8;
}



#closeAlert:hover {
  background-color: #0056b3;
}


.header {
    justify-content: space-between; /* Move elements to edges */
padding: 0 0px;
}

.header div {
    justify-content: flex-start; /* Align logo to the left */
    width: auto;
}

.header img, .fallback-logo {
    margin-left: 20px; /* Add spacing from the left */
}


.timeDisplay{justify-content:space-between;
}
.class_remove_border{
  border:0px;
}

#to_get_premium{
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #d5edf8, #bce2fa);
  color: #222;
  font-size: 24px;
  padding: 40px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.35s ease-in-out;
}
#to_get_premium:hover {
  filter: brightness(0.95);
}

#premium.view_this{
  position:absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 220px;
  top:10px;
  right:360px;
  color:black;
  font-size: 20px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  background: linear-gradient(to bottom, #d5edf8, #bce2fa);
  border-radius: 10px;
}
#get_liscence{
  position:absolute;
  display: flex;
  flex-direction: column;
  width: 220px;
    justify-content: center;
  align-items: center;
  text-align: center;
  top:10px;
  right:130px;
  color:black;
  font-size: 20px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  background: linear-gradient(to bottom, #dce8c8, #c7d7a7);
  border-radius: 10px;
}

#premium_outter{
  height: (var(--vh) * 100);
  min-height: 100vh;
  width: 100dvw;
  background: rgba(211, 211, 211, 0.7); /* Semi-transparent background */
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#premium_inner{
  display:flex;
  position: relative;
  flex-direction: column;
  min-width:350px;
  min-height:300px;
  background-color: white;
  border-radius: 20px;
  padding: 40px 20px 20px 20px;
  gap:20px;
}
#premium_inner_step1{
  display:flex;
  position: relative;
  flex-direction: column;
  gap:20px;
}
#premium_inner_step2{
  display:none;
  position: relative;
  flex-direction: column;
  gap:20px;
}

.print_option{
  display: flex;
  flex-direction: row;
  font-size: 18px;
  font-weight: 600;
  color:var(--text-title-d_blue);
  gap:25px;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.print_option_change{
  padding-top: 4px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
.print_option_label_1, .print_option_label_12{
  display:none;
}
.print_option_label_1[data-option='1']{
  display: flex !important;
}
.print_option_label_12[data-option='12']{
  display: flex !important;
}

#premium_inner_step3{
  display:none;

  position: relative;
  min-height:250px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap:20px;
}
#verify_instructions{
  font-weight: 400;
  color:var(--text-title-d_blue);
  width:100%;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 20px;
  white-space: pre-line;
}
#verify_instructions_wrapper{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap:20px;
}

#verify_input_field_wrap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:20px;
}
#verify_input_field_wrap span{
  color:var(--text-title-d_blue);
}
#verify_input_field {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#verify_input_field input {
  width: 45px;
  height: 45px;
  text-align: center;
  font-size: 22px;
  border: 1px solid var(--text-title-d_blue);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin:unset;
}

#verify_input_field input:focus {
  border: 1.5px solid var(--text-title-d_blue);
  box-shadow: 0 0 4px var(--text-title-d_blue);
}
#code_error{
  display:none;
  font-size:20px;
  font-weight:600;
  color:red;
}
#pay_button_wrap_wrap{
  display: flex;
  flex-direction: column;
  width:100%;
  justify-content: center;
  align-items: center;
  gap:25px;
}

#pay_button_wrap{
  display:none;
  flex-direction:column;
  justify-content:start;
  align-items:start;
  gap:3px;
  width: fit-content;
}
#pay_button_wrap span{
  display:flex;
  font-size:12px;
  font-weight:400;

}
#pay_button{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: linear-gradient(135deg, #1e7e34, #28a745);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  transition: all 0.2s ease;
}
#verify_submit{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 36px;
  background: linear-gradient(135deg, #1e7e34, #28a745);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  transition: all 0.2s ease;
}
#resend_email{
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px 36px;
  background: linear-gradient(135deg, #1e7e34, #28a745);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
  transition: all 0.2s ease;
}

#pay_button:hover {
  /* transform: translateY(px); */
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
  background: linear-gradient(135deg, #218838, #34c759);
}
#revolut_msg{
  display:none;
  margin-top:15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 400;
  color:var(--text-title-d_blue);
}
#premium_inner h3{
  display: flex;
    width:100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
  color:var(--text-title-d_blue);

}
#premium_inner_close{
  position:absolute;
  top:5px;
  right:5px;
  width:40px;
  height:40px;
  z-index: 1;
  background-image: url('/icon/small/X1_black.svg');
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;
  opacity:0.6;
  cursor: pointer;
}
#premium_inner_close:hover{
  opacity:1;
}


#to_revpay {
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom, #dce8c8, #c7d7a7);
  color: #222;
  font-size: 24px;
  padding: 40px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.35s ease-in-out;
}
#to_revpay:hover {
  filter: brightness(0.90);
}

#revpay_outter{
  height: (var(--vh) * 100);
  min-height: 100vh;
  width: 100dvw;
  background: rgba(211, 211, 211, 0.7); /* Semi-transparent background */
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}
#revpay_inner{
  display:flex;
  width:90dvw;
  height:95dvh;
  position: relative;
  background-color: white;
  border-radius: 20px;
  overflow: clip;
  padding: 10px;
}
#revpay_inner_iframe{
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
}
#revpay_inner_close{
  position:absolute;
  top:15px;
  right:25px;
  width:40px;
  height:40px;
  z-index: 1;
  background-image: url('/icon/small/X1_black.svg');
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;
  opacity:0.6;
  cursor: pointer;
}
#revpay_inner_close:hover{
  opacity:1;
}

.container{
  display:grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  gap:0px 10px;
  padding:20px;
}
.radio_box {
	position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:space-around;

	height:var(--radio_box-height); 

  min-height: 0;
	-ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;     /* Firefox */
  width:100vw;
  /* background-color: rgb(9, 9, 75); */
  overflow: visible;
  grid-column: 1 / 6;
}

.sub_list {
  position: relative;
  background: var(--primary-bg);
  border: var(--transparent-border);
	border-radius: 8px;
	display: flex;
  flex-direction: column;
  height: var(--sublist_calc); 
  overflow-y: hidden; /* Ensures it does not overflow */
	scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
	overflow-x: visible;
	
}

.sub_list::-webkit-scrollbar {
    display: none;  /* Hide the scrollbar */
}

#files_all{
  display: flex;
  grid-column: 1 / 3;
  height:var(--sublist_allfiles) ;
}
#B_list{
  grid-column: 4 / 5;
}
#A_list{
  grid-column: 5 / 6;
}
#the_adv.view_this{
  /* display: flex; */
  display: none;
  position: relative;
  flex-direction: column;
  grid-column: 3 / 4;
  width:1dvw;
  height: 80px;
  /* border:1px solid black; */
  grid-row: 2 / 3;
  overflow: visible;

}

#revpay_adv {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);  /* centers it */
  
  width: 20vh;
  height: 20vh;
  padding: 5%;
  z-index: 20;

  display: flex;
  justify-content: center;
  align-items: center;
}

#revpay_adv_icon {
  position: relative;
  width: 20vh;
  height: 20vh;


  background: url('/icon/webp/center_revpay.webp') center/contain no-repeat;
  backdrop-filter: blur(10px);

  /*----- the alt --- */

  background-color: white; 
  background-image: url('/icon/webp/center_revpay.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  backdrop-filter:unset;

  /* --the alt finish-- */ 
  border-radius: 50%;
  cursor: pointer;
}

#revpay_adv_icon::after {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: url('/icon/webp/ring_revpay.webp') center/contain no-repeat;
  animation: spin 18s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}



#email_step {
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  align-items: center;
}
#email_step_wrap{
  display: flex;
  flex-direction: row;
  gap:15px;
}

#code_step_precode{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:10px;
  font-size: 1.8vh;
  width: 100%;
}
#code_step_precode_email{
  display: flex;
  flex-direction: column;
  border: 1px solid #ebebeb;
  font-size: 2vh;
  height: 40px;
  width: 100%;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: #ebebeb;
}
#code_step_resend_wrap{
  display: flex;
  flex-direction: row;
  gap:20px;
}
#code_step_resend_btn{
  display: flex;
  font-weight: 600;
  color:var(--text-title-d_blue);
  cursor: pointer;
}
#pay_step{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:20px;
}
#pay_step_msg{
  font-size: 18px;
}
#pay_step_continue{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 120px;
  font-weight: 600;
  background: var(--text-title-d_blue);
  
  color:white;
  cursor: default;
  border-radius:6px;
  
}
#right-display-sidebar-options{
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  margin-top:20px;
  width: 100%;
  /* border: 1px solid red; */
  gap:15px;
}

.sidebar_options{
  display: flex;
  width:100%;
  height:60px;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  /* border:1px solid grey; */
  border-radius: 10px;
}
#right-display-options1{
  background: linear-gradient(to bottom, #d5edf8, #bce2fa);
  background: linear-gradient(to bottom, #dce8c8, #c7d7a7);
  transition: filter 0.35s ease-in-out;
}
#right-display-options1:hover{
  filter: brightness(0.95);
}
#right-display-options2{
  display: none;
  transition: filter 0.35s ease-in-out;
}
#right-display-options1:hover{
  filter: brightness(0.95);
}

#right-display-options3{
  
  background: linear-gradient(to bottom, #cbe9dc80, #c2e5d580);
  transition: filter 0.35s ease-in-out;
}
#right-display-options3[data-dcheck="0"]{
  
  display: none;
}

#right-display-options3:hover{
  filter: brightness(0.95);
}


.price_option{
  color:var(--text-title-d_blue);
  font-size: 20px;
  font-weight: 600;
}

#cart_email_ver {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

#cart_email_ver span {
  color: var(--text-title-d_blue);
}

/* Email step */


#email_input {
  padding: 8px 12px;
  min-width: 220px;
  border-radius: 6px;
  border: 1px solid var(--text-title-d_blue);
  font-size: 16px;
  outline: none;
  margin: unset;
}

#email_input:focus {
  border: 1.5px solid var(--text-title-d_blue);
  box-shadow: 0 0 4px var(--text-title-d_blue);
}

#send_email_btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--text-title-d_blue);
  background: var(--text-title-d_blue);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
}

#send_email_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Code step – similar to #verify_input_field */
#code_step {
  display: none; /* JS sets to flex */
  flex-direction: column;        /* stack inputs + button vertically */
  justify-content: center;
  align-items: center;
  gap: 14px;                     /* space between inputs and button */
  padding: 12px;               /* top & bottom padding */
}

/* Inputs (6 digits) */
#code_step .code-input {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 22px;
  border: 1px solid var(--text-title-d_blue);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin: unset;
}

/* Focus style */
#code_step .code-input:focus {
  border: 1.5px solid var(--text-title-d_blue);
  box-shadow: 0 0 4px var(--text-title-d_blue);
}

/* Full row of inputs stays centered */
#code_step .code-input-row {
  display: flex;
  gap: 10px;
}

/* The verify button under the inputs */
#verify_code_btn {
  height: 40px;                 /* match input height */
  padding: 0 20px;              /* horizontal padding */
  border-radius: 6px;
  border: 1px solid var(--text-title-d_blue);
  background: var(--text-title-d_blue);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;          /* vertical centering */
  justify-content: center;
  width: 100%;
}

#verify_code_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.in_cate[data-station-name="Piese"]::after {
    content: 'Piese';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Lucida Calligraphy", cursive;
    font-size: 22px;
    pointer-events: none;
}


@media (max-width: 940px) {
  .in_cate[data-station-name="Piese"]::after {
    font-size: 16px;
  }
	#inner-form {
		flex-direction:Column;
	    width: 95dvw;
		height: auto;
		max-height:(var(--vh) * 95);
		justify-content:space-between;}
	.social-btn{margin-top:5px;}
	.google{ margin-top: 10px;}
	#username{margin-top: 30px;}
	#password{margin-top: 10px;}
	.login-left, .login-right {
		padding:15px 0px;
		height: auto; /* Allows each section to expand only as needed */
        flex: unset; /* Removes equal height enforcement */}
	.login-left{padding-top:35px;}
	.login-divider{display:none;
	}
	/* .login-text{display:none;} */
	.options {
		font-size:12px;
	}
	#toggle-password {top: 40%;}
  
  #sidebar-social_out {
    width: 100% !important;;
    grid-template-columns: repeat(6, 1fr) !important; /* 3 equal-width columns */
  }
  .container {
		width: 100dvw;
		display: flex;       /*<--*/
		flex-direction: row; /* Default: Row layout */
		flex-wrap: wrap;
		
		justify-content: center;
    align-items: start;
		height: calc((var(--vh) * 100) - var(--default-player-mobile));
		overflow: hidden; /* Prevent scrolling inside the container */
		
	}
  #follow_the_mouse{
    display:none;
    position:fixed;
    top:10px;
    left:10px;
    pointer-events:none;
    z-index:9999;
    padding:3px 4px;
    /* border: 1px solid red; */
    border-radius:3px;
    background:#cccccc;
    color:#000;
    font-size:10px;
  }
  .list_icon2.mini_active .list_icon2_title{
    justify-content: center;
  }
  .list_icon2_buttons {
    height:30px !important;
    width:50px !important;
    gap:10px;
  }
  .list_icon2_shuffle{
    height:30px !important;
    width:30px !important;
  }
  .list_icon2_shuffle, .list_icon2_edit  {
    width:20px;
  }
	.my_listA{
    
    grid-auto-rows: minmax(30px, 30px); /* Maintains minimum height for each row */
    width: 100%;
  }
	.navigation{
		
		display:none;
		width:100dvw;
		height:50px;
		
		
	}
	.navigation-table td {
	  text-align: center;
	  vertical-align: middle;
	}
	.navigation-table .nav-item {
	  width: 30px;   /* or whatever your icon size is */
	  height: 30px;
	  margin: 0 auto;
	  background-repeat: no-repeat;
	  background-position: center center;
	}
	.seperator_vert.s2{
		
		height:200px;
		display:block;
		width:2px;
		background:grey;
		border:1px solid lightgrey;
		transform: translateY(10%);
    opacity: 0.5;
		
	}
		.seperator_vert.s1{
		
		height:150px;
		display:none;
		width:2px;
		background:grey;
		border:2px solid lightgrey;
		/* transform: translateY(22%); */
		
	}
	


	#radio_name_con, #trackTitle_con{
		width:50%;
		display:flex;
		flex-direction:row;
		white-space: nowrap;
		font-size: 1.00rem; 
		justify-content:center;
		align-items: center;
	}		
	
	#volume, #add_to_list{
		position: relative;
		display:flex;
		width: 20px;
		height: 20px;
		
		background-size: contain;
		cursor:pointer;
		padding: 0px;
		background-color: transparent; /* Ensures no unwanted background */
		
	}
		
	.pl-previous-btn, .pl-next-btn {
		width:  min(30px, 12vw);
		height:  min(30px, 12vw);
	}	
	.pl-play-btn,.pl-stop-btn,.pl-pause-btn {
		width:  min(40px, 12vw);
		height:  min(40px, 12vw);
	}	
		
	.radio_box {
		position:relative;
		flex: 0 0 calc(100dvw - 20px );
		max-height:235px;
		align-items:start;
    max-width:calc(100dvw - 10px );
      /* Fading transparency mask */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 20px,
      black calc(100% - 15px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0px,
      black 20px,
      black calc(100% - 15px),
      transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .titles {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
    }
	
	.title_sub_box {
		position:relative;
		width: 100%; 
		height:100%;
		min-height: 25px;
		display: flex;
		flex-direction:column;
		align-items: start;
		justify-content: center;
		white-space: nowrap; /* Prevents text from wrapping */
	   
		font-size: 18px; /* Adjust as needed */
		
		color: var(--title-text); /* Default text color */
		text-align: left;
		margin: 0; /* Remove default margins */
		gap:10px;
    
		
	}
  .title_sub_box:not(.radio_title)  {
		padding-left:10px;
		
	}
    
  #mini_row_add_end2 {
    position: absolute;
    top:5px;
    right: 5px;
    width: 55px;         /* Ensures items stay in a row */
    height: 25px;            /* Fixed height */
    padding: 5px;

  }
    
  .radio_title{
    display: none;
    height: 60px;
    width:100%;
    justify-content: end;
    align-items: center;
  }
  .radio_title .titles{
    justify-content: end;
    align-items: center;
  }

	.seperator, .s1{
		display:none;
	}	
	.radio_sub_box {
    position: relative;
    display: block;
    gap: 0; /* or a smaller mobile-appropriate value */
    overflow-x: scroll;
    overflow-y: hidden;
    min-height: calc(var(--radios-size-mobile) + 40px);
    padding:25px 0 10px 0;
    
    
  }


	.radio_info {
	  padding:0px;
    /* padding-top:10px; */
    width:var(--radios-size-mobile) ;
    height: 40px;
    white-space: wrap;
    font-size:14px;
    text-align: center;
  }
  .cont_radios{
    display: flex;
    max-width:140px;
    height:160px;
    justify-content: center;
    gap:0px;
  }

	.cont_radios:hover .radio_description {
	  opacity: 1;
	  height: 105px;
	  padding-top:10px;
	}

	.radios, .radios img{
		width:var(--radios-size-mobile);
		max-height:var(--radios-size-mobile);
	}
	
	
	.sub_list {
    position: relative;
		display:flex;
		height:var(--sublist_calc-mobile);
		flex: 0 0 calc(50dvw - 0px);
		
		background: var(--primary-bg);
		border: var(--transparent-border);
		
		border-radius: 8px;
		overflow-y: hidden; /* Ensures it does not overflow */
		scrollbar-width: none; /* For Firefox */
		-ms-overflow-style: none;  /* For Internet Explorer and Edge */
		overflow-x: visible;
		padding:0px;
	}

	
	.btn-right {

		display:block;
		min-width:30px;
		height:30px;
		background: 
        url('/icon/small/pl_icons/play.svg') no-repeat center center; /* Gray background */
		background-size: 100%;  /* Adjust play button size */
		margin:5px;
		
	}
	
		
	.full-width {
		width: 100dvw;
		height: var(--header-height-mobile);
    /* height: ;
    max-height: var(--header-height-mobile); */
		display: flex;
		align-items: center;
    
		justify-content: center; /* Center logo by default */
		position: relative;
		padding: 0;
		/* filter:blur(10px); */
	}
		
	.logo-refresh {
		width: 100px;           /* or whatever your logo size is */
		height:calc(var(--header-height-mobile) - 10px);
    top:5px;
    left:5px;
	}
	#B_list{
		padding-bottom: 0;
    padding: 0px 0px;
	}
	.in_cate {
    padding-left:0px;
    font-size: clamp(1.0rem, 2vw, 1.4rem); 
    height: 30px;
    }
	

	.my_listB {
		
		max-height:100%;
		padding-bottom:0 !important;
    padding-left:0px;
    padding-right:0px;
	}
	.my_listA{
		/* height:100%; */
		height:calc(var(--sublist_calc-mobile) - 85px);

	}
	#A_list{
		padding-left:7px;
		padding-right:7px;
	}
	#mini_row2{
    max-height:calc( 100vh - var(--default-player-mobile) - var(--header-height-mobile) - 240px);
  }
		
	.delete-btn {
		max-height:30px;
		max-width:25px;
		padding-right:0px;
    padding-left:0px;
		overflow: hidden;
		align-items: center;
		justify-content: center;
		font-size: 12px; /* adjust if needed */
		line-height: 1;
    background-image: url(/icon/small/X1_black.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
	}
  .delete-btn:hover {
    background-image: url(/icon/small/X1_red.svg);
  }
	.thin-x {
	  font-weight: 100;
	  font-family: "Roboto Condensed", sans-serif;
	}
		
	.radio_description {
	  font-size: clamp(11px,4vw,18px); 
	}
  #scrollingContent{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    width:100vw;
  }
  #add_to_list2{
    width: 40px;
		height: 40px;
		
		background-size: contain;
    
  }
  .inner_scroll {
    padding-right: 10px;
  } 
  #trackTitle {
    color:var(--title-text);
    display: flex;
    align-items: center;
    padding-right: 0px;
  }

  .my_listB {
      grid-auto-rows: minmax(40px, auto); /* Maintains minimum height for each row */
  }
  .in_cate_symbol{
    display: flex;
    min-width:20px;
    min-height:20px;
    /* border: 1px solid red; */
    z-index: 10;
  }
  .in_cate_buttons{
    max-width:50px;
    height:40px;
    padding-right:5px;
    gap:5px;
  }

  .in_cate_shuffle, .in_cate_play{
    /* flex:1; */
    min-width:60px;
    height:30px;
    /* border:1px solid black; */
    z-index:2;
  } 
  .in_cate_play{
    /* display: none !important; */
    display: flex;

    padding:5px;
    background:url('/icon/small/pl_icons/play-white.svg') no-repeat center center;  
    background-size: 85%;
    
  }
  .in_cate_play.L_paused{
    background:url('/icon/small/pl_icons/pause-white.svg') no-repeat center center;  
    background-size: 85%;
  }
 
  
  .in_cate_shuffle.random_pick{
 
    /* background-image:url('/icon/small/pl_icons/shuffle.svg') no-repeat center center;   */
    background-size: 55%;
    z-index:2;
  }

  .in_cate_shuffle.next_in_row{

    background-image:url('/icon/small/pl_icons/repeat.svg') no-repeat center center;  
    background-size: 55%;
    z-index:2;
  }
  .row{
    height: 30px;
    gap:2px;
    padding-left: 0px;
    justify-content: space-between;
  } 
  .song-name {
    display: flex;
    /* font-size: 12px;  */
    font-size: clamp(10px, 3.5vw, 14px);
    height:30px;
    margin: 0;
    padding-right:0px;
     text-align: left;
    white-space: nowrap;       /* Prevents text from wrapping */
    overflow-x: hidden;          /* Hides overflow text */ 
    text-overflow: ellipsis;  /* Adds "..." if text overflows */
    position: relative;          /* Required for overflow control */
    
    width: calc(100% - 40px);
    padding-left: 0px;
    
    white-space: nowrap;
  }

  
	.Add-btn, .delete-btn {
		opacity: 0.5 !important;
		visibility: visible !important;
		transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 3;
	}
	.Add-btn{
    margin:0;
    max-width:30px;
    height:30px;
  }
  .Add-btn img{
    margin:0;
    width:15px;
    height:15px;
  }
  .in_cate:not(.open) .in_cate_buttons {
    display:none;
  }
  .in_cate.open .in_cate_play{
    width: 20px;
  }
  .in_cate.open .in_cate_shuffle{
    width: 20px;
  }
  .in_cate_shuffle.random_pick, .in_cate_shuffle.next_in_row{
    background-size: 80%;
  }
    
  .in_cate.open {
    min-height:30px;
  }
  span.name_only {
    height:40px;
    max-width: calc(50vw  - 25px);
    overflow-x: hidden;
    padding-right:5px;
    padding-left:5px;
    font-size: clamp(12px, 5vw, 16px);
  }
  span.name_only.is_open{
    max-width: 90px;
  }

  .list_icon2 {
    position: relative;
    flex: 0 0 auto;          /* Prevents shrinking */
    width: 100%;         /* Ensures items stay in a row */
    height: 30px;            /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff70;     /* Sample background */
    color: #000000;
    border-radius: 5px;
    /* border:2px solid purple; */
    cursor:pointer;
    transition: all 0.3s ease;
    padding-left:10px;
    font-size: 5vw;
    font-weight: 400;
    font-family: "Lucida Calligraphy", cursive;
    transition: all 0.2s ease-in-out;
  }


  #volume {
    display:none;
  }
  .my_listA{
    min-width: calc(50vw - 40px);
    padding-right: 0px;
  }

  #the_arrows_mobile{
    padding:0px 5px;
    top:55px;
    left:0;
    display: flex;
    position: absolute;
    width: 100vw;
    height: 120px;
    /* border:3px solid black; */
    z-index: 12;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
     pointer-events: none;
  }
  .ios-pwa{
    display: none;
    width:100vw;
    min-height: 15px;
    /* border:3px solid red; */
  }
  .categories.open {
    /* padding: 0px;
    padding-right: 10px; */
    padding: 5px 10px;
  }
  .categories:not(.open){
    padding: 5px 10px;
  }
  #category_button{
    padding:0px 0px 0px 0px;
  }
  #left_arrow_small, #right_arrow_small{
    position: relative;
    display: flex;
    
    width: 40px;
    height: 200px;

    pointer-events: auto;
    cursor: pointer;
    /* border:2px solid black; */
    /* border: 1px solid grey; */
    z-index: 12;
    background: url("/icon/small/pl_icons/arrow-left-simple.svg") no-repeat center center,transparent;
    background-position: calc(50% - 4px) calc(50% - 8px);
    background-size: 50%;
  }
  #right_arrow_small {
    transform: scaleX(-1);
  }
  
 
  .login-btn{
    font-size: 14px;
    gap:3px;
    justify-content: start;
    padding: 3px;
    transform-origin: top right;
    transform: scale(0.75);
  }
  .in_cate:not(.open) .in_cate_left:hover, .in_cate:not(.open) .in_cate_left:focus{
    transform:scale(1);
    transform-origin: left center;
  }
  
  .in_cate.open .in_cate_left:hover, .in_cate:not(.open) .in_cate_left:focus{
    max-width: 120px;
  }
  #mini_row2{
    min-height:40px;
    padding-top: 5px;
    padding-bottom: 0px;
  }
  .mini_row_scroll2{
    max-height:100%;
    padding: 0px 0px 0px 0px ;
    gap:10px;
  }
  .mini_row_scroll2.not_logged2{
    padding-top:5px;

  }
  .in_cate_left{
    transform: scale(1);
  }
  #files_all {
    display: none !important;
  }
  #listB{
    display: grid !important;
    padding-top: 0px;
    gap:0px;
    }

  
  .radio_sub_box_wrapper{
    display: flex;
    flex-direction: row;
    min-height: 160px;
    justify-content: center;
    overflow-y: visible;
    overflow-x: visible;
    gap:20px;
    box-sizing: border-box;  
    padding:0px 20px 0px 20px;

  } 
    
  .my_player{
    display:flex;
    width:100vw;
    height:var(--default-player-mobile);
    flex-direction: column;
    justify-content:center;
    align-items:center; 
    z-index: 20;
    gap:5px;
    color:var(--title-text);
    /* background: var(--body-bg); */
  }
    
  #info_container{
    width:100vw;
    height:15px;
    flex:0 0 15px;
    display:flex;
    flex-direction:column;
    white-space: nowrap;
    font-size: 1.30rem; 
    justify-content:center;
    align-items: start;
  }
  #now_playing_title{
    display: none;
  }
  #info1{
    display: none;
    align-items: center;
    font-size: 0.9rem;
  }
  .controls_container{
    overflow: visible;
    position: relative;
    z-index: 1;
    display:flex; 
    flex-direction:column;
    justify-content:space-between;
    max-height:40px;
    width:100vw;
    gap:5px; 
    
  }
  
		
	.player_progress {
		font-size:0.7rem;
    padding:0px 0px 6px 0px;
	}
    
  #trackTitle {
    height: 15px;
    display: flex;
    justify-content: start;
    align-items: start;

    font-size: 0.9rem;
    padding-right: 0px;
  }
  #volume_cont, #add_to_list2_cont{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
  }
    
  #ppn{
    display:flex;
    height: 40px;
    flex-direction:row;
    justify-content: space-evenly;
    align-items: center;
    gap:12px;
  }
  
  .player_info{
    height:20px;
    width:100vw;
    display:flex;
    flex:0 0 20px;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    gap:5px;
    color:grey;
    padding: 0px;
  }
    
  #progressBar {
    height: 4px;               /* track height */
    border-radius:2px;

  }
  .row:hover .song-name{
    transform:scale(1);
  }
  
  #login-form {
      align-items: center;
      justify-content: center;
  }
  .categories:not(.open){
  display: flex;
  }
    
  #f_social {
    display:flex;
      background: 
          url('/icon/small/facebook_color.svg') no-repeat center center,  /* Play button */
          transparent; /* Gray background */
      background-size: 50%;  /* Adjust play button size */
      
  }
  #y_social {
    display:flex;
      background: 
          url('/icon/small/youtube_color.svg') no-repeat center center,  /* Play button */
          transparent; /* Gray background */
      background-size: 40%;  /* Adjust play button size */
      
  }



  #tik_social {
    display:flex;
      background: 
          url('/icon/small/tiktok_color.svg') no-repeat center center,  /* Play button */
          transparent; /* Gray background */
      background-size: 35%;  /* Adjust play button size */
      
  }
  


  #insta_social {
    display:flex;
      background: 
          url('/icon/small/instagram_color.svg') no-repeat center center,  /* Play button */
          transparent; /* Gray background */
      background-size: 45%;  /* Adjust play button size */
      
  }


  #x_social {
    display:flex;
      background: 
          url('/icon/small/X_color.svg') no-repeat center center,  /* Play button */
          transparent; /* Gray background */
      background-size: 25%;  /* Adjust play button size */
      
  }
  #l_social {
      display:flex;
      background: 
          url('/icon/small/linkedin_color.svg') no-repeat center center,  /* Play button */
          transparent; /* Gray background */
      background-size: 35%;  /* Adjust play button size */
      
  }
  
  .Library_Search_container{
    top:10px;
    right:90px;
    width:40px;


  }
  .Library_Search_container.s_open{
    top:10px !important;
    right:10px !important;
    width:calc(100vw - 20px);


  }
  .Library_Search_results.s_open{
    width:100%;
    gap:5px;
    max-height: calc(var(--header-height-mobile) + 235px - 30px );
    overflow-y: scroll;
  }

  #s_mob_only{
    display: flex;
    position: absolute;
    top:10px;
    right:10px;
    width:20px;
    height:20px;
    /* border:1px solid grey; */
    z-index: 15;
    background-color: transparent;
    background-image: url(/icon/small/pl_icons/search.svg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
  }
  #s_desk_only{
    display: none;
  }
  #Library_Search{
    top:50px;
    left:10px;
    z-index: 25;
    background-color: transparent;
    max-height: 220px;
    display: none;
    width: calc(100% - 20px);
  }
  #librarySearchInput{
    background-color: transparent;
    width: calc(100% - 60px);
  }
  .Library_Search_results{
    position: relative;
    width:340px;
    max-height: 160px;
    /* padding-top:45px; */
    display: none;
    padding:10px;

    font-size: 14px;
    border-radius: 10px;
    flex-direction: column;
    gap:5px;
    overflow-y: auto;
  }
  .info-tab{

 
    width: 100%;

  }

  .info-tab.phone_num h4{
  width: 100%;
  }
  

  #the_adv.view_this{
    display: none;
    position: fixed;
    bottom: 32dvh;
    right: 25dvw;
    z-index:400;
  }
  #the_adv.view_this #revpay_adv{
    width: min(45dvw, 220px);
    height: min(45dvw, 220px);
    z-index:400;
  }
  #revpay_adv_icon{
      width:100%;
      height:100%;
      z-index:300;
  }


  .container{
    padding: 0px;
    gap:0px 0px;
  }
  .shuffle_inrow{
    width:30px;
    height:30px;
    /* border: 1px solid red; */
  }
  .shuffle_random{
    width:30px;
    height:30px;
    /* border: 1px solid red; */
  }

  #add_lists {
    display: flex;
    position: fixed;
    top:calc(var(--radio_box-height-mobile));
    right:20px;
    width: calc(100dvw - 40px);
    flex-direction: column;
    flex-wrap: wrap;
    gap: 40px;
    padding: 15px;
    border-radius: 12px;
    background-color: #fff;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 15px #5c7da1;
  }

  .buy-btn {

    width: 25px;
    height:30px;

  }
  #cart_full{
    padding: 5px;
  }
  .my_listA .song-name{
    margin:auto 0px auto 30px;
  }

}