@import url('https://fonts.cdnfonts.com/css/radenes');
@font-face {
    font-family: 'BebasNeueRegular';
    src: url(/fonts/BebasNeueRegular.eot);
    src: url(/fonts/BebasNeueRegular.eot?#iefix) format('embedded-opentype'),
         url(/fonts/BebasNeueRegular.woff) format('woff'),
         url(/fonts/BebasNeueRegular.ttf) format('truetype'),
         url(/fonts/BebasNeueRegular.svg) format('svg');

    font-weight: normal;
    font-style: normal;
}
body {
	background: #fff;
	color:#000;	
	min-width:100%;
	min-height:100%;
	margin:0px !important;
}
/*** Hide Scrollbar ***/
::-webkit-scrollbar { 
    display: none; 
}
p, h1, h2, h3, h4 {
	color:#444;
}


#playlist {


    
}
#playlist li {
	font-family: BebasNeueRegular;
	font-size:1.2em;
	line-height:0.90em;
	cursor:pointer;	
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    text-overflow: ellipsis;
	color:#000;
	text-align:left;
	background:#fff;
	border-bottom:1px solid #444;
/*	margin-bottom:5px; */
	padding:0.40em 0 0 0.40em;
	max-width:95%;
	
}
#playlist li:active {
	color:#fff;
	background-color:#000;
}
#playlist li:active::marker {
  color: #000; /* Change this to your desired color for the number */
}
#playlist .genre:active {
	color:#fff;
	background-color:#000;
}

#playlist li.selected  {
    color:#fff;
    background-color:#000;
    border-radius: 4px;  /* Curved corners */

}
#playlist li.selected::marker {
  color: #000; /* Change this to your desired color for the number */
}
#playlist li:has(+ .selected)  {
    border:0;
}

.row {
	
}
#player {
    position: fixed;
    bottom: 0;
    min-width: 100%; 	
	display:block;
    min-height:100px;
}
#player {
    background: #000;
    text-align: center;
    color: #042E64;
}
#progressContainer { 
	cursor:pointer;	
    background-color:#aaa;
    height: 6px; 
    width:100%; 

    margin-left: 0px;
    border:1px #fff solid;
}
#progressbar {
	background-color: #fff; 
	height:4px; width:0%; 
}
.timecode {
	color:#000; 
	text-align:center;
}
.fa {
	color:#fff;
}
.controls i {
	padding:25px 20px;
	font-size:1.6em;
	cursor:pointer;
	border:0px #fff solid; 
}
#contentData {
    /* background-image: url("/img/juanavila.jpg"); */
    margin-top:9%;
    margin-bottom:0px;

    text-align:center;

}
#cover{
	height:300px;
}	
#cover img {
	border-radius:8px;
	border:1px solid #444;
	box-shadow: 0 5px 9px #aaa; 
	width:300px;
}	
.play {
/*	border-left:1px solid #444;
	margin:30px 0; */
	
}
.media-heading {
    color:#000;
	font-family: BebasNeueRegular;
	font-size:2em;
	margin:10px 0 0 0;
	line-height:0.75em; 
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    text-overflow: ellipsis;
/*	border:1px #000 solid;  */
}
.media-heading-h5 {
	font-family: BebasNeueRegular;
	font-size:1em;
	color: gray;
	padding-top:0.10em;
	line-height:0.85em; 
/*	margin:5px 0 20px 0; */
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    text-overflow: ellipsis;
    border:0px #000 solid;
/*	height:30px;
  */
}

.genre {
	font-family: 'Radenes', sans-serif;
/*	color:#000; */
	font-size:0.75em;
    line-height:0.75em; 
	display:block;
	padding:0.15em 0 0.35em 0;
}

.media-heading .genre {
	margin-top:-0.10em !important; 
	font-family: 'Radenes', sans-serif;
	color:#505050;
	font-size:0.6em;
	line-height:0.6em;
	padding:0;
	display:block;
/*	border:1px #000 solid; */

}
.sub-heading {
	font-family: BebasNeueRegular;
	font-size:1em;
	line-height:0.5em;
	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    text-overflow: ellipsis;

}
.sub-heading a {
	color:#000;
}
.copyright {
    color: gray;
	font-family: BebasNeueRegular;
	text-align:center;
	padding:5em 0 25% 0;
	font-size:1em;
	display:block;
}
h4 .timestatus {
	font-size:0.5em;
}