.elementor-2006 .elementor-element.elementor-element-27ea4cf{--display:flex;--padding-top:4%;--padding-bottom:4%;--padding-left:4%;--padding-right:4%;}.elementor-2006 .elementor-element.elementor-element-27ea4cf:not(.elementor-motion-effects-element-type-background), .elementor-2006 .elementor-element.elementor-element-27ea4cf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}/* Start custom CSS for html, class: .elementor-element-e673e6c */#custom-audio-player {
    display: flex;
    position: relative;
    align-items: center;
  width: 100%;
  border-radius: 10px;
    padding: 8px;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    background-color: rgba(255,255,255, 0.092);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 1px rgba(255,255,255,0.4) solid;
    border-bottom: 1px rgba(40,40,40,0.35) solid;
    border-right: 1px rgba(40,40,40,0.35) solid;
}

#play-pause-button {
  margin-right: 20px; /* Espacement entre le bouton Play/Pause et les autres éléments */
}

#timeline-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
#timeline{
    width: calc(100% - 20px);
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 5px;
    height: 2px;
    outline: none;
}
#timeline {
  width: 100%; /* La barre de lecture prend toute la largeur disponible */
  margin: 0 10px; /* Espacement autour de la barre de lecture */
  height: 2px; /* Hauteur de la barre de lecture */
  -webkit-appearance: none; /* Supprime les styles par défaut du navigateur */
  appearance: none;
  background: #ffffff; /* Couleur de fond de la barre de lecture */
  border-radius: 5px; /* Bordure arrondie */
}

#timeline::-webkit-slider-thumb {
  -webkit-appearance: none; /* Supprime les styles par défaut du navigateur */
  appearance: none;
  width: 12px; /* Largeur du curseur de la barre de lecture */
  height: 12px; /* Hauteur du curseur de la barre de lecture */
  background:#F2B705; /* Couleur de fond du curseur de la barre de lecture */
  border-radius: 50%; /* Curseur de forme circulaire */
  cursor: pointer; /* Curseur de la souris */
}

#timeline::-moz-range-thumb {
  width: 16px; /* Largeur du curseur de la barre de lecture */
  height: 16px; /* Hauteur du curseur de la barre de lecture */
  background: #F2B705; /* Couleur de fond du curseur de la barre de lecture */
  border-radius: 50%; /* Curseur de forme circulaire */
  cursor: pointer; /* Curseur de la souris */
}


#timeline::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}

#timeline, #current-time, #total-time {
  margin-right: 10px; /* Espacement entre les éléments de la timeline */
}
#current-time, #total-time {
  color: white;
  font-size: 12px;
}

#play-pause-button:hover .icon::before {
  transform: scale(1.5);
}
#play-pause-button {
  background-color: rgba(255, 255, 255, 0.3);
  display: flex; /* Utiliser un modèle de boîte flexible */
  align-items: center; /* Aligner les éléments verticalement au centre */
  justify-content: center; /* Aligner les éléments horizontalement au centre */
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: #F2B705;
  font-size: 12px;
  cursor: pointer;
  outline: none;
}

#play-pause-button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color:white;
}/* End custom CSS */