/*CRIATIVA FM CORES PADRÃO
Azul: #153269  RGB: 21,50,105
Amarelo: #FFF212

*/
#page{
	position:relative;
	margin:auto;
	padding: 0px;
	width:300px;
	margin-top: 50px;
	overflow:hidden;
	border: 0px solid #fff080;
}

.noar_agora{
	float:left; 
	width:100%; 
	height:100px;
	border:0px dotted #84C74F;
	margin-bottom:15px;
	background: rgba(255,255,255, 0.1);
}

.logo_app{
	float:left; 
	width:300px; 
	height:150px;
	border:0px dotted #FF9814;	
	background: rgba(0, 0, 0, 0) url("../../assets/player/images/logo2.png") no-repeat top center;
	background-size:280px;
}

#corpo_player{
	position:relative;
	float:left; 
	width:300px;
	height:450px;	
	border: 0px solid #000080;
}

#painel_controle{
	position:relative;
	float:left;
	width: 300px;
	height:220px;	
	margin-top:40px;
	border-radius: 7px;
	display:block;
	overflow:hidden;	
	text-align:center;
	border: 0px solid #fff;
}

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

#btn_play_pause{
	width:150px;
	height:150px;
	margin: 0px auto;
	display:block;
}

#btn_play{
	position:relative;
	float:left;
	width: 150px;
	height:150px;	
	display:none;
}

#btn_pause{
	position:relative;
	float:left;
	width: 150px;
	height:150px;	
	display:block;
}

#bar_volume{
	position:relative;
	float:left;
	width: 300px;
	height:40px;
	margin-top:15px;
	display:block;
	border: 0px solid #fff;
}

#btn_volume_down{
	position:relative;
	float:left;
	width: 23px;
	height:35px;	
	display:block;
}

#btn_volume_up{
	position:relative;
	float:left;
	width: 23px;
	height:35px;	
	display:block;
	fill:#153269;
}

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

#barra_progresso { 
	position:relative;
	float:left;
	margin-top:7px;
   width:220px; 
   height:21px;
}

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

progress::-webkit-progress-bar {
  background-color: transparent;
  border: 1px solid #FFFFFF;/*Cor da borda da barra de progresso*/
  height: 21px;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: #153269;/*Cor da barra de progresso*/
  border: 0;
  height: 18px;
  border-radius: 7px;
}
progress::-moz-progress-bar {
  background-color: #153269;/*Cor da barra de progresso*/
  border: 0;
  height: 18px;
  border-radius: 7px;
}

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

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

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

#btn_volume_down{
	fill:#153269;
	}

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

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

#btn_volume_mute{
	fill:#153269;
	}

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

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

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

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

.btn_pause_circle {
  fill:transparent;
  stroke:#153269;
  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:#ffffff;
  cursor: pointer;
}

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

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

#participe{
	position:relative;
	float:left; 
	width:100%; 
	height:35px;
	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:#153269;
	stroke-width:2;
	cursor: pointer;	
}

.whats_logo:hover{
	fill:#153269;
}

.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:#153269;
}