#player_normal {
  position: fixed; /* ou 'fixed' se preferir que ele fique fixo na tela */
  width: 100%;
  display: flex;
  bottom: 0; /* Alinha o player à parte inferior da tela */
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  align-items: center;
  background-color: #111;
  padding: 0;
  margin: 0;
  color: white;
}

.player_controls {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #111; /* Cor de fundo do painel de controle */
  width: 95%;
  max-width: 650px;
  gap: 23px;
}

.player_controls2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: #111; /* Cor de fundo do painel de controle */
  width: 95%;
  max-width: 650px;
  gap: 23px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Botões de controle (play, pause, próximo, anterior) */
.control-buttons button {
  background: transparent;
  border: none;
  cursor: pointer;
  gap: 20px;
  font-size: 18px; /* Ajuste o tamanho do ícone */
  color: white;
  transition: transform 0.3s ease, color 0.3s ease;
}

.control-buttons button:hover {
  transform: scale(1.2); /* Aumenta o tamanho do ícone ao passar o mouse */
  color: #ffcc00; /* Cor ao passar o mouse */
}
#div_timer {
  display: flex;
  align-items: center;
  gap: 2px;
}

#cuTimer,
#slashTimer,
#toTimer {
  font-size: 14px;
  margin: 0 1px;
}

/* Estilo Geral para Barras de Progresso */
/* Barra de Progresso Horizontal (Player Normal) */
#progress-bar {
  width: 100%; /* Ocupa toda a largura do player */
  height: 10px;
  border-radius: 5px;
  margin: 0; /* Remove margens */
}

#progress-bar::-webkit-progress-bar {
  background-color: #333;
  border-radius: 5px;
}

#progress-bar::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 5px;
}

/* Barra de Progresso Vertical (Player Compacto) */
.vertical-progress-bar {
  height: 200px; /* Altura do player compacto */
  width: 6px;
  position: absolute;
  transform: rotate(-180deg); /* Rotaciona a barra para preenchimento de baixo para cima */
  left: 0;
  bottom: 0;
  background-color: #333;
}

.vertical-progress-fill {
  width: 100%; /* Largura total do contêiner */
  height: 0%; /* Preenchimento inicial */
  background-color: #4caf50;
  transition: height 0.2s; /* Transição suave */
}

/* Estilo para o botão de repetição */
#repeat_button, #repeat_button_compact {
  background-color: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

#repeat_button.active, #repeat_button_compact.active {
  color: #00ff00; /* Verde para indicar que o modo de repetição está ativo */
}

#repeat_button:hover, #repeat_button_compact:hover {
  color: #ffd700; /* Amarelo dourado ao passar o mouse */
  transform: scale(1.1);
}

.compact-toggle-btn {
  background-color: transparent;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

.compact-toggle-btn svg {
    transform: scale(1.1); /* Aumenta levemente o tamanho ao passar o mouse */
    color: #007bff; /* Muda a cor ao passar o mouse (você pode mudar para a cor que preferir) */
}
/* Player Compacto */
.player_compact {
  width: 40px;
  height: 200px;
  position: fixed;
  bottom: 20px;
  right: 10px;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  gap: 50px;
  background-color: #111;
  color: white;
}

/* Estilização do controle de volume */
/* Estilização do controle de volume vertical */
.volume {
  display: flex;
  align-items: center;
  position: relative;
}

.volume .icon-size {
  font-size: 1.2rem;
  cursor: pointer;
}

.volume .bar-hoverbox {
  position: absolute;
  bottom: 30px; /* Ajuste conforme necessário */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width: 10px;
  height: 120px; /* Altura da barra vertical */
  background: #999;
  border-radius: 5px;
  overflow: hidden;
  transition: opacity 0.2s;
  cursor: pointer;
}

.volume:hover .bar-hoverbox {
  opacity: 1;
}

.volume .bar {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ddd;
}

.volume .bar-fill {
  width: 100%;
  height: 50%; /* Valor inicial */
  background: #3498db; /* Cor do preenchimento */
  position: absolute;
  bottom: 0;
}

/* Botões gerais */
button {
    background: transparent;
    border: none;
    cursor: pointer;
}

button:focus {
    outline: none;
}

#info {
   font-size: 12px;
   color: #ff8c00;
   margin-top: 6px;
   letter-spacing: 1.5px;
}