*{

	margin:0;

	padding:0;

	border:0;

	outline:none;

}

a{ 

	text-decoration: none; 

}

body,html{

	/*height: 100%;*/

}

body {

	background: #07080A; 

	font-family: Arial, Helvetica, sans-serif;

}



td  { font-size: 14px; font-family: "Roboto"; margin-left: 0px; text-transform: uppercase; color: #ffffff; font-weight: bold; margin-top: -15px

 }

td { vertical-align:top }



#hap-wrapper{

	position:relative;

	width:100%;

	height: 100%;



	max-height:560px;

	min-height:560px;

	min-width:370px;

	max-width:370px;

	margin: 0px auto;

}

.hap-player-wrapper{

	position: absolute;

	width:100%;

	height:100%;

	overflow: hidden;

	

}

.hap-player-holder{

    position: relative;

    left: 0;

    height: 100%;

    top: -100%;

    background: #000000;

    overflow: hidden;

    display: flex;

    flex-direction: column;

}

.hap-icon-color{

	color:#FFFF00 !important;

	-webkit-transition: color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out; 

}

.hap-icon-rollover-color{

	color:#FFFFFF;

	-webkit-transition: color 0.3s ease-in-out;

    transition: color 0.3s ease-in-out; 

}



.hap-middle-cont{

    width: 370px;

    height: 10px;

    margin-top: 30px;

}



.hap-middle-cont3{

    width: 370px;

    height: 30px;

    margin-top: -110px;

}



.hap-bottom-cont{

    position: relative;

    left: -100;

    width: 360px;

    height: 80px;

    background: #000;

    top: 0px;

}



.hap-player-controls{

    position: relative;

    margin-top: -15px;

    margin-bottom: 0px;

    height: 0px;

}



.hap-player-controls-center{

    position: absolute;

    top: 70px;

    width: 370px;

    height: 100px;

    left: 55%;

    -webkit-transform: translate(-50%, 0);

    -ms-transform: translate(-50%, 0);

    transform: translate(-50%, 0);

}



.hap-playback-toggle{

    position: absolute;

    top: 0;

    width: 138px;

    height: 40px;

    left: 48%;

    -webkit-transform: translate(-50%, 0);

    -ms-transform: translate(-50%, 0);

    transform: translate(-50%, 0);

}

.hap-playback-toggle i{

    width: 40px;

    height: 40px;

    font-size: 120px!important;

    line-height: 82px!important;

}



.hap-volume-wrapper{

	position: absolute;

	right:0px;

	bottom:10px;

	width:320px;

	height:50px;

}

.hap-volume-wrapper:hover .hap-volume-seekbar{

	display: block;

}



#hap-playlist-list{

	display:none;

}

.hap-playlist-holder{

	position: relative;

	left:-100%;

	width:100%;

	height: 100%;

	background: #FFF;

	overflow:hidden;

}



.hap-tooltip{

	position:absolute;

	background:#000;

	color:#fff!important;

	text-align:center;

	z-index:10000;

	pointer-events:none;

	-moz-box-shadow: 1px 1px 8px #111;

	-webkit-box-shadow: 1px 1px 8px #111;

	box-shadow: 1px 1px 8px #111;

	border-radius: 1px;

	display:none;

}

.hap-tooltip p {

	width:inherit;

	font-size:13px!important;

	margin:0 5px !important;

	padding:0 !important;

	line-height:20px !important;

	white-space:nowrap;

	color:inherit;

}

.hap-preloader {

	position:absolute;

	top:50%;

	left:50%;

    width: 40px;

    height: 40px;

    margin-left:-20px;

	margin-top:-20px;

    background-color: #f56a6f;

    -webkit-animation: hap_preloader 1.2s infinite ease-in-out;

    animation: hap_preloader 1.2s infinite ease-in-out;

}

@-webkit-keyframes hap_preloader {

    0% { -webkit-transform: perspective(120px) }

    50% { -webkit-transform: perspective(120px) rotateY(180deg) }

    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }

}

@keyframes hap_preloader {

    0% { 

	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);

	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 

    } 50% { 

	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 

    } 100% { 

	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

    }

}



.hap-hidden {

	opacity: 0; 

	filter: alpha(opacity=0); 

}

.hap-visible {

	opacity: 1;

	-webkit-transition: opacity 500ms ease-out;

	-moz-transition: opacity 500ms ease-out;

	transition: opacity 500ms ease-out;

}



/* scroll */

.hap-playlist-inner .mCSB_inside > .mCSB_container {

    margin-right: 30px;

}

.hap-mCSB_full{/* hide scroll area when no scroll */

	margin-right: 0!important;

}





.hap-volume-seekbar{

    position: relative;

    margin-top: 320px;

    margin-left: 14px;

    margin-right: auto;

    margin-bottom: 12px;

    width: 340px;

    height: 14px;

    cursor: pointer;

    touch-action: none;

}

.hap-volume-bg{

	position:absolute;

	top:-7px;

	left:7px;

	width:320px;

	height:6px;

	background:#FFFFFF;

}

.hap-volume-level{

	position:absolute;

	top:-7px;

	left:5px;

	width:0px;

	height:6px;

	background:#FFFF00;

	-webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out; 

}

.hap-volume-drag{

    position: relative;

	top:-16px;

    width: 38px;

    height: 38px;

	border-radius: 100%;

	background:#000;

	-webkit-transform: scale( 0.3 );

    transform: scale( 0.3 );

	-webkit-box-sizing: border-box; 

    -moz-box-sizing: border-box;    

   	box-sizing: border-box;    

   	-webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out; 

    float: right;

 	margin-right: -20px;

}

.hap-volume-drag:hover,

.hap-volume-drag:active {

    -webkit-transform: scale(1);

    transform: scale(1);

}