.contener {
  position: absolute; /* postulat de départ */
  top: 50%; left: 50%; /* à 50%/50% du parent référent */
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
 }

.container_current_track {
  text-align: center;
}
#current_track {
  display: flex;
  justify-content: center;
  align-items: center;
	font-size: 200%; /* Augmenter la taille de la police */
  text-align: center; /* Centrage horizontal */
  vertical-align: middle; /* Centrage vertical */
  color: white;
}



#vignettes {
  visibility: hidden;
}

#vignettes img {
	 width: 125px;height: 125px;
}


#current_artist {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 200%;
  text-align: center;
  vertical-align: middle;
  color: #9FB4C6;
  font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif; 
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1.1em;
  position: relative; /* Important pour le positionnement absolu de l'élément enfant */
}

/* #current_artist #copier_artist { 
  display: none;
}

#current_artist:hover #copier_artist { 
  display: inline-block;
}

#copied_popup_artist {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  z-index: 10;
}

#current_artist:hover #copied_popup_artist {
  display: block; 
} 

#copied_popup_artist {
  display: none;
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  z-index: 10;
} */

@media only screen and (max-width: 380px) {

  #current_artist { font-size: 1.4em;}
    .row > * {
          margin-bottom: 0.4em !important;
    }
    .volume-slider-container {
      width: 55%;
    }
    experiment {
      margin-left: 0px;
    }
  }

.row > * {
  width: auto !important;
}

#current_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 200%; /* Augmenter la taille de la police */
    text-align: center; /* Centrage horizontal */
    vertical-align: middle; /* Centrage vertical */
    color: #E7E7F8;
    font-family: Helvetica Neue, Helvetica, Arial, "sans-serif";
    font-size: 1.4em;
    font-weight: 200;
    letter-spacing: 0.05em;
    line-height: 1.1em;
  }

#copier_title { 
  display:none;
}
    
input{min-height: 40px;}

#my_buttons {
		margin-right:20px;
		text-align : right;
		visibility : hidden;
}

#chartdiv {
  width:100%;
  height: 500px;
}

body { 
  margin:0;
  padding:0;
  /* background-color:white; */
}

#bz_nav {
  width: 100%;
}

.container_art_cover {
  display: flex; /* Utilise Flexbox */
  justify-content: center; /* Centre horizontalement */
}

#art_cover {
  width: 400px; 
  height: 400px;
  background-color: lightgrey; /* Pour visualiser le Div */
} 

.controls-container {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px;
}

/* Container for the slider */
.volume-slider-container {
  position: relative;
  width: 100%;
  max-width: 200px; /* Adjust the max-width as needed */
  margin: 20px auto; /* Center the slider */
}

/* Customizing the slider track */
.volume-slider {
  -webkit-appearance: none; /* Override default appearance in WebKit browsers */
  appearance: none; /* Override default appearance */
  width: 100%; /* Full width */
  height: 8px; /* Height of the track */
  /* background: #9FB4C6;  */
  outline: none; /* No outline */
  opacity: 0.7; /* Opacity */
  transition: opacity .2s; /* Smooth transition for opacity */
  border-radius: 10px; /* Round the corners of the track */
}

.volume-slider:hover {
  opacity: 1; /* Full opacity on hover */
}

/* Customizing the slider thumb */
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default appearance in WebKit browsers */
  appearance: none; /* Override default appearance */
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  background: #9FB4C6; /* Color of the thumb */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 50%; /* Rounded thumb */
}

.volume-slider::-moz-range-thumb {
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  background: #9FB4C6; /* Color of the thumb */
  cursor: pointer; /* Pointer cursor on hover */
  border-radius: 50%; /* Rounded thumb */
}

/* Popup display for volume level */
.popup {
  position: absolute;
  top: -35px; /* Adjust this value for vertical distance above the pointer */
  padding: 5px 10px;
  border-radius: 5px;
  background-color: red;
  background: black;
  color: white;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%); /* To center horizontally */
  display: none; /* Hidden by default */
}

/* AudioContext - Visualisation - Start*/
.area { position:relative;
  width:50px; height:50px; 
}

.circularBar { 
  position:absolute;
  width:10px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  min-height:5px;
  background:black;
  -webkit-transition:0.1s ease all;
  border-bottom:3px solid rgb(0,255,0); 
}

.curveBar {
  position:absolute;
  width:10px;
  height:5px;
  background:black;
  border-radius:5px;
  min-height:5px;
  border-bottom:3px solid rgb(0,255,0);
  border-top:3px solid rgb(255,0,0);
  -webkit-transition:0.1s ease all;
}

#circularCenter {
  margin: auto;
  position: absolute;
  top: 0; left: 0; 
  bottom: 0; right: 0; 
  width:74px; 
  height:74px; 
  border-radius:100%; 
  background:rgb(255,0,0); 
}

.circle {
  border-radius:100%; 
  background:rgba(0,0,0,.1);  
  box-shadow:0 0 2px 2px rgb(0,255,0);
  margin: auto; 
  position: absolute; 
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0; 
  -webkit-transition:0.1s ease all;
}

.bar {
  position:absolute;
  bottom:0;
  box-shadow:0px -2px 0 rgb(0,255,0);
  background:black;
  -webkit-transition:0.1s ease all;
}

.dot {
  position:absolute;
  bottom:0; 
  background:black; 
  box-shadow:0 0 1px 1px rgb(0,255,0);
  -webkit-transition:0.1s ease all; height:5px; 
}

.symbar_left {
  position:absolute;
  right:18px;
  background:black;
  -webkit-transition:0.1s ease all;
  border-bottom-left-radius: 15px;
  border-top-left-radius:15px;
  border-left:5px solid rgb(0,255,0);
}

.symbar_right {
  position:absolute; 
  left:18px; 
  background:black; 
  -webkit-transition:0.1s ease all; 
  border-bottom-right-radius:15px; 
  border-top-right-radius:15px; 
  border-right:3px solid rgb(255,0,0);
}

.initiator {
  position:absolute;
  width:50px; height:50px; 
  -webkit-transition:0.5s ease all;
  z-index:10000;
  cursor:pointer;
}

.experiment { 
  position:relative; float:left; margin-left:20px; 
}

/* AudioContext - Visualisation - End */

#tooltip {
  position: absolute;
  display: none;
  background: black;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  z-index: 1000;
}