body{
    font-family: 'Roboto', sans-serif;
    margin:0px;
	padding:0px;
}

a{
    text-decoration:none;
}
svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}
.player-radio{
	background:var(--player-bg);
	display:flex;
	align-items:center;
	width:350px;
	height:60px;
	padding:0px 15px;
}
.brpl-btns{display:flex;}
.brpl-btns button{background: transparent; font-size:35px; outline: inherit;}
.player-controls{
	display:flex;
	width: 100%;
}
.player-volume{
	display:flex;
	align-items: center;
	margin-left: auto;
}
.player-volume button{background: transparent; border:none; font-size:18px;}


.brpl-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 11px;
  border-radius: 5px;
  background: var(--player-hover);
  outline: none;
}
.brpl-slider:hover {
  opacity:1;
}
.brpl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--player-color);
  cursor: pointer;
}
.brpl-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--player-color);
  cursor: pointer;
}

/* fontawesome */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
	src: url(../fonts/fa-solid-900.woff2) format("woff2"), url(../fonts/fa-solid-900.ttf) format("truetype");
}

@font-face{
	font-family:"Font Awesome 5 Brands";
	font-style:normal;
	font-weight:400;
	font-display:block;
	src: url(../fonts/fa-brands-400.woff2) format("woff2"), url(../fonts/fa-brands-400.ttf) format("truetype");
	}

.fas,
.fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

.fa-item{
    width: 12px;
}

.fas {
    font-family: 'Font Awesome 5 Free';
}

.fab {
    font-family: 'Font Awesome 5 Brands';
}

.fa-1x {
    font-size: 1em;
}

.fa-2x {
    font-size: 2em;
}

.fa-3x {
    font-size: 3em;
}

.fa-4x {
    font-size: 4em;
}

.fa-stop::before {
    content: '\f04d';
}
.brpl-play::before {
    content: '\f144';
}
.brpl-stop::before {
    content: '\f28d';
}
.brpl-volume::before {
	font-family: 'Font Awesome 5 Free';
	content: '\f028';
}
.brpl-mute::before {
	font-family: 'Font Awesome 5 Free';
	content: '\f6a9';
}
.fa-google-play:before {
    content: "\f3ab"; 
}
.fa-apple:before {
    content: "\f179"; 
}
.fa-play::before {
    content: '\f144';
}
.fa-amazon:before {
    content: "\f270"; 
}
.fa-microsoft:before {
    content: "\f3ca"; 
}
.fa-search:before {
    content: "\f002"; 
}
.fa-facebook:before {
    content: "\f39e"; 
}
.fa-instagram:before {
    content: "\f16d"; 
}
.fa-twitter:before {
    content: "\f099"; 
}
.fa-whatsapp:before {
    content: "\f232"; 
}
.fa-tiktok:before {
    content: "\e07b"; 
}
.fa-youtube:before {
    content: "\f167"; 
}
.fa-linkedin:before {
    content: "\f0e1"; 
}
.fa-telegram:before {
    content: "\f2c6"; 
}
.fa-pinterest:before {
    content: "\f0d2"; 
}
.fa-discord:before {
    content: "\f392"; 
}
.fa-spotify:before {
    content: "\f1bc"; 
}
.fa-soundcloud:before {
    content: "\f1be"; 
}
.fa-share:before {
    content: "\f1e0"; 
}
.fa-camera:before {
    content: "\f030"; 
}
.fa-video:before {
    content: "\f03d"; 
}
.fa-image:before {
    content: "\f03e"; 
}
.fa-angle-left:before {
    content: "\f104"; 
}
.fa-angle-right:before {
    content: "\f105"; 
}
.fa-close:before {
    content: "\f00d"; 
}
.fa-microphone-lines:before {
    content: "\f3c9"; 
}
.fa-clock:before {
    content: "\f017"; 
}
.fa-location:before {
    content: "\f3c5"; 
}
.fa-calendar:before {
    content: "\f133"; 
}
.fa-paper-plane:before {
    content: "\f1d8"; 
}
.fa-user:before {
    content: "\f007"; 
}
.fa-users:before {
    content: "\f0c0"; 
}
.fa-bars:before {
    content: "\f0c9"; 
}
.fa-globe:before {
    content: "\f0ac"; 
}
.fa-globe2:before {
    content: "\f57d"; 
}
.fa-music:before {
    content: "\f001"; 
}


/* players */
#player{
    height: 100%;
    line-height: 0;
}

.brpl-play, .brpl-stop{
    font-family: 'Font Awesome 5 Free';
    border: none;
    background: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    -webkit-transition: .15s;
    transition: .15s;
}

.brpl-play:hover, 
.brpl-stop:hover,
.brpl-play:focus{
    color: var(--player-hover);
}