/*
CORES DIFUSORA
LARANJA FORTE: #f26928
LARANJA MÉDIO: #f47124
LARANJA FRACO: #f7881b
*/

body {
  margin:0px;
  padding:0px;
  /*background:#666;*/
}

#page{
	position:relative;
	margin:auto;
	padding: 0px;
	width:303px;
	margin-top: 0px;
	overflow:hidden;
	border: 0px solid #fff080;
	/*background:#2196F3;*/
}

#corpo_player{
	position:relative;
	float:left; 
	width:302px;
	height:80px;
	margin:0px;
	padding: 0px;
	border: 0px solid #000080;
}

#player{/*Oculta o Player Original do HTML5*/
	text-align:left;
	width: 240px;
	display:none;
}

.ico_logo{
	position:absolute;
	right:0px;
	top:0px;
	width:70px;
	height:75px;
	z-index: 1;
	border: 0px solid #000080;
	transform: rotate(-5deg);	
}

#btn_play_pause{
	position:absolute;
	right:0px;
	width:70px;
	height:70px;
	float:right;
	padding-top:2px;
	display:block;
	border: 0px solid #fff080;
}

#btn_play{
	position:relative;
	float:right;
	width: 70px;
	height:70px;	
	display:none;
}

#btn_pause{
	position:relative;
	float:right;
	width: 70px;
	height:70px;	
	display:block;
}


#bar_volume{
	position:relative;
	float:left;
	width: 230px;
	height:20px;
	margin-top:8px;
	display:block;
	border: 0px solid #fff;
}

#btn_volume_down{
	position:relative;
	float:left;
	width: 13px;
	display:block;
}

#btn_volume_up{
	position:relative;
	float:left;
	width: 13px;
	display:block;
	fill:#ffffff;
}

#btn_volume_mute{
	position:relative;
	float:left;
	width: 13px;
	margin-left:8px;
	display:block;
}

#barra_progresso { 
	position:relative;
	float:left;
	margin-top:4px;
	width:170px; 
	height:13px;
}

progress {
  background-color: transparent;
  height: 13px;
  border-radius: 7px;
}

progress::-webkit-progress-bar {
  background-color: transparent;
  border: 0.3px solid #f9f9f9;/*Cor do fundo da barra de progresso*/
  height: 13px;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: #ffffff;/*Cor da barra de progresso*/
  border: 0;
  height: 11px;
  border-radius: 7px;
}
progress::-moz-progress-bar {
  background-color: #ffffff;/*Cor da barra de progresso*/
  border: 0;
  height: 11px;
  border-radius: 7px;
}

.tocando_agora{
	position:relative;
	float:left;
	width: 100%;
	height:20px;
	overflow: hidden;
}

.tocando_agora_seta{
	position:relative;
	float:left;
	width: 10px;
	height:20px;
	margin-top:0px;
}

#musica_barra{
	position:relative;
	float:left;
	width:215px;
	height:20px;
	text-align:left;
	border:0px solid #f7881b;
}

#musica_nome{
	font-size:16px;
	color:#ffffff;
	font-family:Calibri;
	font-weight:normal;
	line-height:20px;
	padding-top:1px;
	padding-left:5px;
	white-space:nowrap;	
}

/*
.btn_play_fil0 {fill:##ffffff;}
.btn_play_fil1 {fill:#f7881b;}

.btn_pause_fil0 {fill:#ffffff;}
.btn_pause_fil1 {fill:#f7881b;}
*/

svg * {
  transition: all .1s ease-in-out;
}

#btn_volume_down{
	fill:#ffffff;
	}

#btn_volume_down:hover {
	fill:#f7881b;
	cursor: pointer;
	}
	
.btn_volume_down_fil:hover {
	fill:red;
	cursor: pointer;
	}
  
#btn_volume_up{
	fill:#ffffff;
	}

#btn_volume_up:hover {
	fill:#f7881b;
	cursor: pointer;
	}
	
.btn_volume_up_fil:hover {
	fill:red;
	cursor: pointer;
	}

#btn_volume_mute{
	fill:#ffffff;
	}

#btn_volume_mute:hover {
	fill:#f7881b;
	cursor: pointer;
	}
	
.btn_mute_fil:hover{
	fill:red;
	cursor: pointer;
	}

.btn_play_circle_0 {
  fill:transparent;
  stroke:#ffffff;
  stroke-width:8;
}
	
.btn_play_circle {
  fill:transparent;
  stroke:#ffffff;
  stroke-width:8;
  stroke-dasharray: 527;
  stroke-dashoffset: 527;  
  transition: stroke-dashoffset 1s linear;
}
.btn_play_circle:hover {
  stroke-dashoffset: 0;
  stroke:#F5D71A;
  cursor: pointer;
}
.btn_play_polygon{
  fill:#F5D71A;
  transition: fill .5s ease-in;
}	

.btn_play_polygon:hover {
	fill:#F5D71A;
	cursor: pointer;
}

.btn_pause_circle_0 {
  fill:transparent;
  stroke:#ffffff;
  stroke-width:8;
}

.btn_pause_circle {
  fill:transparent;
  stroke:#ffffff;
  stroke-width:8;
  stroke-dasharray: 527;
  stroke-dashoffset: 527;  
  transition: stroke-dashoffset 1s linear;
}

.btn_pause_circle:hover,.btn_pause_circle:active {
  stroke-dashoffset: 0;
  stroke:#F5D71A;
  cursor: pointer;
}

.btn_pause_rect{
  fill:#F5D71A;
  transition: fill .5s ease-in;
}	

.btn_pause_rect:hover {
	fill:#F5D71A;
	cursor: pointer;
}

.aovivo{
	position:relative;
	float:left; 
	width:230px;
	height:95px;
	border:0px dotted #84C74F;
	margin-bottom:0px;
	overflow:hidden;
}

.noar_agora{
	float:left; 
	width:100%; 
	height:45px;
	border:0px dotted #84C74F;
	margin-bottom:0px;
}

#programa{
	position:relative;
	float:left;
	width:230px;
	border:0px solid #D5E426;
	overflow:hidden;	
}

#programa_barra{
	position:relative;
	float:left;
	width:180px;
	height:20px;
	text-align:left;
	border:0px solid #f7881b;
}

#programa_ico{
	position:relative;
	float:left;
	width:42px;
	height:20px;
	background:#ffffff;
	border-right:0px solid #f7881b;
}

#programa_nome{
	font-size:18px;
	color:#ffffff;
	font-family:Calibri;
	font-weight:normal;
	line-height:20px;
	padding-top:3px;
	padding-left:5px;
	white-space:nowrap;	
}

#locutor{
	position:relative;
	float:left;
	width:230px;
	height:70px;
	padding-top:5px;
	padding-left:0px;	
	border:0px solid #D5E426;
	overflow:hidden;
	display:none;
}

#locutor_barra{
	position:relative;
	float:left;
	width:180px;
	height:20px;
	text-align:left;
	border:0px solid #f7881b;
}

#locutor_ico{
	position:relative;
	float:left;
	width:39px;
	height:20px;
	padding-top:0px;
	padding-left:7px;
	margin:0px;
	border-right:0px solid #f7881b;
}

#locutor_nome{
	font-size:18px;
	color:#ffffff;
	font-family:Calibri;
	font-weight:normal;
	line-height:20px;
	padding-top:2px;
	padding-left:0px;
	white-space:nowrap;
}

#participe{
	position:relative;
	float:left; 
	width:100%; 
	height:35px;
	margin-top: 15px;
	border:0px dotted #84C74F;
	overflow:hidden;
}

.espaco{
	position:relative;
	float:left;
	width:75px; 
	height:30px;
	border:0px dotted #FF9814;	
}

.whats_logo{
	position:relative;
	float:left;
	width:30px; 
	height:30px;
	border:0px dotted #FF9814;	
	fill:#ffffff;
}

.whats_logo_fill2{
	fill:#f1f1f1;
	stroke:#f7881b;
	stroke-width:1;
	cursor: pointer;	
}

.whats_logo:hover{
	fill:#f7881b;
}

.whats_texto{
	position:relative;
	float:left;
	width:110px; 
	height:30px;
	margin-left:7px;
	border:0px dotted #FF9814;	
	text-align:left;
	text-decoration:none;
	color: #ffffff;
	font-size: 20px;
	font-family:Calibri;
	font-weight: bold;
	text-align:left;
}

.whats_texto:hover{
	color:#f7881b;
}

.microfone {
	fill:#F5D71A;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* Ajuste removido ou mantido, mas a lógica da animação é o que importa */
  /* Remove a animação anterior */
  animation: scroll-left 15s linear infinite; /* Tempo e tipo de animação conforme sua preferência */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%); /* Ajuste para cobrir a largura de uma das cópias */
  }
}