figure, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
  }
  
  
/*SIDEBAR MENU*/  
  
.fixed-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 5.1vw; /* era 70px */
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: black;
 /* backdrop-filter: blur(2vh);*/
  overflow-x: hidden;
  padding-top: 2vh;
}

.fixed-sidebar span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vh 0.5vw;
  text-decoration: none;
  font-size: 1vw;
  color: white;
  margin: 1vh 1vw;
  overflow: hidden;
  background-color: transparent;
}

.fixed-menu {
  background-color: transparent;
  margin: 0 1vw;
  border-radius: 1vw;
 
}

.fixed-menu.active {
  color:green;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  width: 20vw; 
  position: fixed;
  z-index: 999;
  top: 0;
  left: 5.1vw;
  background: linear-gradient(to right, black 0%, black 30%,   transparent 100%);
  overflow-x: hidden;
  padding-top: 2vh;
  transition: transform 0.5s ease;
  transform: translateX(-25vw);
}

/* Sidebar aperta */
.sidebar.open {
  transform: translateX(0);
}

.sidebar a {
  padding: 2vh 1vw;
  text-decoration: none;
  font-size: 1vw;
  color: white;
  display: block;
  font-weight: normal;
  outline: none;
  transition: all 0.5s ease;
}

.sidebar a:hover, .sidebar a:focus {
  font-weight: bolder;
  cursor: pointer;
  color:#00ff00;
}

.sidebar a.focused {
  font-weight: bolder;
}



.close-btn:hover {
  background-color: #575757;
}

.open-btn, .close-btn {
  
  padding: 1vh;
  background: #333;
  color: white;
  cursor: pointer;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  
}

.open-btn:hover {
  background: #575757;
}


/*    */


.content {
 
}




#mainContent {
  width: 100vw;
  margin: 0;
  min-height: 100vh;
  position: relative; 
  overflow: hidden;
  position:relative;z-index:0;

}

#mainContentBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background:url("../images/sfondo1.jpg");
  /*
  object-position: center;
  filter: brightness(3.2) saturate(0.2) opacity(0.2);
  pointer-events: none;
  transition: filter 0.6s ease;*/
}


.home-top-section {
    width: 82vw;
    height: 20vh;
    padding: 0 1vw;
    position: fixed;
    top: 1vw !important;
    left: 16vw;
    z-index: 10;
    background: transparent;
    color: white;

    display: table;
}


.home-info-section {
   display: table-cell;
    vertical-align: middle;
    padding:0.3vw;
    min-height: 100%;


}

.home-content-down {
  position: absolute;
  top: 40vh;
  left: 0;
  width: 100vw;
  height: 60vh;
  overflow: hidden;
  padding-left: 3vw;
  padding-bottom: 20vh;
  background: transparent;
  z-index: 10;
  transform: none !important;
}

.home-content-down .item-wrapper {
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.home-content-down .home-class figure {
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
}

.home-content-down .home-class figure.fade-out {
  opacity: 0;
  pointer-events: none;
}


/*
.home-player-section {
    width: 50%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
*/

#home-info h2 {
display:block;
    font-size: 2vw;
    margin-bottom: 1vw; transition: all 0.5s ease;
}

#home-info p {
    font-size: 1.2vw;
    margin: 0.5vw 0;transition: all 0.5s ease;
}

#home-info .slogan {
    color: gray;
    font-style: italic;transition: all 0.5s ease;
}

#home-info .song-title, #home-info .artist {
    font-weight: bold;transition: all 0.5s ease;
}


.home-player-container {
  position: absolute;top:0;left:0;bottom:0;right:0;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}

.home-player-video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background-color: transparent;
  position:fixed;top:0;left:0;bottom:0;right:0;z-index:3;background:transparent;
  transition: all 0.8s ease;
}

.overvideo {
  position: fixed !important;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  width: 100vw;
  height: 100vh;
  z-index: 4;
  background: radial-gradient(circle at top left, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 40%, transparent 70%);
}

.video-overlay {
 position: fixed !important;top:1vw;left:6vw;z-index:10;

width:10vw;height:auto;max-height:10vw;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.5s ease;background:black;
  display:none;
}

.video-overlay.hidden {
  opacity: 0;
}


.player-controls-overlay {

  
}

.player-controls-overlay img {
  


}

.player-controls-overlay img.focusable:focus,
.player-controls-overlay img.focusable:hover {
  
  transform: scale(1.2);
}

.player-container.hide-controls .player-controls-overlay {
  opacity: 0;
}





.fullscreen-container {
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra orizzontalmente */
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #0072ff, #000000); /* Esempio di sfondo gradiente */

  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Assicura che padding e bordi siano inclusi nel calcolo delle dimensioni */
}

.centered-text {
  /* Stilizzazione del testo */
  text-align: center;
}


[id^="item-radio"].home-class {
    margin-left: 0.5vw;
    margin-bottom:2vh;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    padding: 0.8vw 0;
    padding-right:10vh;
    transition: opacity 0.3s ease;

    
}
#item-only-1 {position:fixed;bottom:0.5vh;left:6vw;width:calc(100vw - 6vw);z-index:99;}

[id^="item-radio"].home-class::-webkit-scrollbar {
  display: none;
}

[id^="item-radio"].home-class [id^="figure-"][id$="-1"] {
    margin-left: 2vw;
}


[id^="item-radio"].home-class [id^="figure-"] {
    filter: brightness(0.4);
}


figure {
    outline: none;

}



figure.podcast, figure.rubrica {
  width: 10vw;
  height: 12vw;
  margin: 0.4vh 0.2vw;
  display: inline-block;
  transition: all 0.3s ease;
  transform-origin: center center;
  border: 0.3vw solid white;
  position: relative;


}

figure.radio {
   width:12vw;
  height: 12vw;
  margin: 0.4vh 0.2vw;
  display: inline-block;
  transition: all 0.3s ease;
  transform-origin: center center;
  border: 0.3vw solid white;
  position: relative;


}
figure.tv, figure.onlyradio {


  width: 20vw;height: auto!important;
  margin: 0 -1.8vw 0 0;
  display: inline-block;
  transition: all 0.3s ease;
  transform-origin: center center;
  border: 0.3vw solid white;
  position: relative;
  overflow: hidden;
  transform: scale(0.88) !important;
}

figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  display: block;
}
figure.tv figcaption,figure.radio figcaption,figure.onlyradio figcaption { display:none;}
figure.podcast figcaption,
figure.rubrica figcaption {
  position: absolute;
  bottom: -1vh;
  left: 0;
  right: 0;
  background: rgba(0,0,0,1);
  color: white;
  font-size: 1.1vw;
  font-weight: bold;
  padding: 1vw;
  border-radius: 0;
  z-index: 2;

  word-break: break-word;
  white-space: normal;
  text-align: center;

}


figure.home-class:focus figcaption,
figure.home-class:hover figcaption {
color:red;
}

figure.home-class:focus,figure.home-class:hover{

  border:0.3vw solid #ff0000;

}

figure.radio:hover,
figure.radio:focus,
figure.podcast:hover,
figure.podcast:focus,
figure.rubrica:hover,
figure.rubrica:focus {
  transform: scale(1.12) !important;
  z-index: 100;
}

figure.onlyradio:hover,
figure.onlyradio:focus,
figure.tv:hover,
figure.tv:focus {
  transform: scale(0.98) !important;
  z-index: 100;
}
figure:hover {
  cursor: pointer;

}

figure img{
  filter: brightness(0.7);
  transition: filter 0.3s ease;

}

figure:hover img,
figure:focus img {
  filter: brightness(1);
}
div#figure-0{width:10px !important;height:100vh;background:transparent;position:fixed;left:0;top:0;bottom:0;border-color:transparent;outline-color:transparent;opacity:0;border:none !important;box-shadow:none !important;}
div#figure-0:hover{background:transparent;border-color:transparent;outline-color:transparent;opacity:0;}







.figure {
    
    height: 10vh;
    width: 10vw;
    margin:0 0.1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #000; /* testo scuro */
    font-size:120%;
    background-color: lightgray; /* di default, poi viene sovrascritto da JS */
    transition: all 0.3s ease;
    border:0.3vw solid white;
    position:relative;
    
}


.figure:focus, .home-class:focus,.figure:hover, .home-class:hover {
 
}







figure.focusable.home-class img {
  background:lightgray;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

figure.focusable.home-class:hover img,
figure.focusable.home-class:focus-within img {
  box-shadow: 0 0 2vw rgba(255, 255, 255, 0.5);
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: scale(0.8);
}

figure.focusable.home-class {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.home-class {
  overflow: hidden;
  position: relative;
}








.spinner-global {
  width: 4vw;
  height: 4vw;
  border: 0.2vw solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-top: 2vh;
  margin-left: calc(50% - 5.1vw); /* centro meno 5.1vw */
}

.spinner-center {
  width: 4vw;
  height: 4vw;
  border: 0.2vw solid rgba(255, 255, 255, 0.2);
  border-top: 0.3vw solid white;
  
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 20vh;
  left: calc(50% - 2vw);
  z-index: 100;
}

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

/*
.home-class figure {
  width: 10vw;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: none;
}

.home-class figure:focus,
.home-class figure:hover {
 filter: saturate(1.2) brightness(1.05);
  box-shadow: 0 0 2vw rgba(255, 255, 255, 0.3);
}

.home-class figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

*/
h2.carousel-title {
  font-size: 1.2vw;
  margin-left: 6vw;
  color: white;
}


.riga-categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  width:100vw;

}

.etichetta-categoria {
  position:absolute;height:2.5vh;left:0;
  font-weight: bold;
  font-size: 1.2vw;
  color: white;
  padding-left:2.5vw;
  text-align: left; margin-top:calc(-12vw - 2vh);
min-width:20vw;
   background: linear-gradient(to right, rgba(0,0,0,0.4) 20%, transparent 100%);
  
}

.contenuto-categoria {
  
  overflow-x: hidden;

}



#dettagliRubricaPage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 1000;
  padding: 2vw;
  display: flex;
  flex-direction: row;
  gap: 2vw;
}

/*#rubricaDettagliImage {
  width: 30vw;
  height: auto;
}
*/
#rubricaDettagliInfo{
color:white;
}

#rubricaDettagliElenco {
  margin:4vh 5vw 10vh 5vw;
  height: 84vh; width:40vw;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.podcast-entry {
  margin: 0.5vh 0.1vw;
  font-size: 1.3vw;
}

#rubricaDettagliElenco div {
color:white;

}
 #rubricaDettagliElenco div:focus{
color:yellow; outline:none;

}

#backItem {position:fixed;top:1vh;}


.etichetta-riga {
  position: relative;
  font-size: 1.2vw;
  font-weight: bold;
  color: #fff;
  margin-left: 2.5vw;
  margin-bottom: -1vh;
}
figure.blacklisted {
  background:darkgrey !important;
}
figure.blacklisted img{
  display:none !important;
}