*{

	margin:0;

	padding:0;

	border:0;

	outline:none;

}

a{ 

	text-decoration: none; 

}

body,html{

	/*height: 100%;*/



	/*background: url("../data/pattern/bg9.jpg") no-repeat center center fixed;*/

	background: black;

	-webkit-background-size: cover;

	-moz-background-size: cover;

	-o-background-size: cover;

	background-size: cover;

}



#hap-wrapper{

	position:relative;

	width:100%;

	height: 100%;

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

	max-width: 800px;

	max-height: 520px;

	margin: 15px auto;

	/*-moz-box-shadow: 1px 1px 15px #333;

	-webkit-box-shadow: 1px 1px 15px #333;

	box-shadow: 1px 1px 15px #333;*/

}

.hap-player-holder{

	position: relative;

	left: 0;

	top: 0;

	overflow: hidden;

	display: inline-block;

	width: 100%;

	background-image: linear-gradient(to left, #111 , #003f86 );

}

.hap-contr-btn > i{

	color:#eee;

}
.fa-play::before, .fa-pause::before {
	border: 2px solid white;
	border-radius: 50%;
	padding: 15px 16px 15px 16px;

}
.fa-step-backward::before {
    padding: 15px 16px 15px 16px;
}
.fa-step-forward::before {
    padding: 15px 16px 15px 16px;
}

.hap-contr-btn:hover > i,
.hap-contr-btn-hover{

	color: #3FBAF3!important;

} 

.hap-contr-btn i{

	position: absolute;

    top: 0;

    left: 0;

	width:30px;

	height:30px;

	text-align: center;

	display: inline-block;

	font-size: 22px!important;

	line-height: 30px!important;

}

.hap-player-thumb-wrapper{

	top:0;

	left:0;

	float: left;

	overflow:hidden;

	pointer-events:none;

	width: 180px;

	height: 180px;

}

.hap-player-thumb{

	position: absolute;

	top:0;

	left:0;

}

.hap-player-thumb img{

	display: block;

	width: 100vh;

	height: 100vh;

	max-width: 180px;

	max-height: 180px;

	padding: 5px;

	margin: 0;

	box-sizing: border-box;

}

.hap-player-thumb-cover{

	position: absolute;

	top:0;

	left:0;

	width:100%;

	height:100%;

}



.hap-player-holder .header {

	white-space: nowrap;

	overflow: hidden;

	margin: auto;

	max-width: 100%;

	padding: 12px;

}







/* Make it a marquee */

.marquee {

 height: 50px;	

 overflow: hidden;

 position: relative;

 width: fit-content;

 height: 100%;

 margin: 0;

 line-height: 50px;

 text-align: center;

 /* Starting position */

 -moz-transform:translateX(30%);

 -webkit-transform:translateX(30%)	

 transform:translateX(30%);

 /* Apply animation to this element */	

 -moz-animation: marquee 5s linear infinite;

 -webkit-animation: marquee 5s linear infinite;

 animation: marquee 5s linear infinite;

}

/* Move it (define the animation) */

@-moz-keyframes marquee {

 0%   { -moz-transform: translateX(30%); }

 100% { -moz-transform: translateX(-100%); }

}

@-webkit-keyframes marquee {

 0%   { -webkit-transform: translateX(30%); }

 100% { -webkit-transform: translateX(-100%); }

}

@keyframes marquee {

 0%   { 

 -moz-transform: translateX(30%); /* Firefox bug fix */

 -webkit-transform: translateX(30%); /* Firefox bug fix */

 transform: translateX(30%); 		

 }

 100% { 

 -moz-transform: translateX(-100%); /* Firefox bug fix */

 -webkit-transform: translateX(-100%); /* Firefox bug fix */

 transform: translateX(-100%); 

 }

}

/* Make it pretty */

.microsoft {

    padding-left: 1.5em;

    position: relative;

    font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;

}





.hap-player-content{

	position: relative;

	bottom: 0;

	margin: 0 auto;

	overflow: hidden;

}



.hap-info{

	position: relative;

	margin:0 20px 5px 20px;

	pointer-events:none;

}

.hap-player-title{

	font-size:20px;

	color:#eee;

	margin:0;

	margin-bottom: 3px;

	padding:0;

}

.hap-player-artist{

	font-size:13px;

	margin:0;

	color:#eee;

	padding:0;

}



.hap-player-controls{

	position: relative;

	margin-top:10px;

	margin-bottom: 20px;

	width:210px;

	height: 30px;

	left: calc(50% - 8px);

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

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

  	transform: translate(-50%, 0);

}

.hap-prev-toggle{

	position: absolute;

	width:30px;

	height:30px;

	left:0px;

}

.hap-playback-toggle{

	position:absolute;

	top:0px;

	width:30px;

	height:30px;

	left:50%;

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

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

  	transform: translate(-50%, 0);

}

.hap-next-toggle{

	position:absolute;

	width:30px;

	height:30px;

	right:0px;

}







.hap-seekbar{

	position: relative;

	margin-left: 20px;

	margin-right: 20px;

	height: 45px;

	cursor: pointer;

	touch-action: none;

}

.hap-progress-bg{

	position:absolute;

	background-color: rgba(150, 150, 150, 0.5);

	width:100%;

	top:10px;

	height:15px;

}

.hap-load-level{

	position:absolute;

	background-color: rgba(150, 150, 150, 0.5);

	top:0;

	height:100%;

}

.hap-progress-level{

	position:absolute;

	background: #3FBAF3;

	top:0;

	height:100%;

}



.hap-player-holder .footer {

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	padding: 12px;

	position: relative;

	font-weight: 600;

}





.hap-volume-wrapper{

	position:absolute;

	width:30px;	

	height:30px;

	top:10px;

	right:20px;

}

.hap-volume-toggle{

	position:absolute;

	width:30px;	

	height:30px;

}

.hap-player-volume i{

	position:absolute;

	top:0;	

	left:0;

}

.hap-volume-seekbar{

	position: absolute;

	top:0px;

	right:30px;

	width:90px;

	height:30px;

	cursor: pointer;

	touch-action: none;

}

.hap-volume-bg{

	position:absolute;

	top:14px;

	left:10px;

	width:70px;

	height:2px;

	background-color: #ddd;

}

.hap-volume-level{

	position:absolute;

	top:0;

	left:0;

	height:100%;

	background: #3FBAF3;

}

.hap-volume-drag{

	position: relative;

	top:-9px;

    width: 18px;

    height: 18px;

	border-radius: 100%;

	background:#fff;

	/*pointer-events:none;*/

	-webkit-transform: scale( 0.5 );

    transform: scale( 0.5 );

	-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: -9px;

}

.hap-volume-drag:hover,

.hap-volume-drag:active {

    -webkit-transform: scale(1);

    transform: scale(1);

}





.hap-media-time-current {

    position: relative;

    top: 0;

    left: 0;

    line-height: 20px !important;

    margin: 0 5px !important;

    padding: 0 !important;

    color: #fff !important;

    font-size: 12px !important;

    pointer-events: none;

    width: auto;

}

.hap-media-time-total {

    position: relative;

    top: 0;

    right: 0;

    line-height: 20px !important;

    margin: 0 5px !important;

    padding: 0 !important;

    color: #fff !important;

    font-size: 12px !important;

    pointer-events: none;

    width: auto;

}



#hap-playlist-list{

	display:none;

}

.hap-playlist-holder{

	position: relative;

	left:0;

	width:100%;

	height: 345px;

	background: #333;

	overflow:hidden;

}

.hap-playlist-inner{

	height: 315px;

}

.hap-playlist-item{

	position: relative;

	top:0px;

	left:0px;

	overflow: hidden;

	/*line-height: 60px;*/

	background: #191919;

	border-bottom: 1px solid #2d2d2d;

	-webkit-box-sizing: border-box; 

	-moz-box-sizing: border-box;    

	box-sizing: border-box; 

	/*display: flex;*/

    width: 100%;

    padding: 8px 10px;

}

.hap-playlist-item:last-child {  

	border-bottom:none;

}



.hap-playlist-item-content {

	cursor: pointer;

	display: flex;
	flex:1;
	flex-direction: row;

	overflow: hidden;

	color: #c6c6c6;

}

.hap-playlist-info{
	flex:1;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow: hidden;
    margin-right: 10px;
}
.hap-playlist-info2{
	position: relative;
    margin-left: auto;
	flex-shrink:0;
	display: flex;
	flex-direction:column;
	justify-content: space-evenly;
    text-align: right;
}
.hap-playlist-duration{
	font-size: 12px;
	color: #939393;
}
.hap-playlist-pubdate{
	font-size: 11px;
	color: #939393;
}

.hap-playlist-item-selected{

	background: #212121 !important;

}

.hap-playlist-item-selected .hap-playlist-title-num,

.hap-playlist-item-selected .hap-playlist-title{

	color: #2362ff;

}

.hap-playlist-title-num,

.hap-playlist-title{

	position: relative;

	vertical-align: middle;

	text-align: left;

	color: #d1d1d1;

	font-size: 12px;

	font-weight: 600;

	display: block;

	white-space: nowrap;

	text-overflow: ellipsis;

	overflow: hidden;

}

.hap-playlist-description{

	position: relative;

	vertical-align: middle;

	text-align: left;

	color: #939393;

	font-size: 11px;

	display: block;

	white-space: nowrap;

	text-overflow: ellipsis;

	overflow: hidden;

}

.hap-playlist-description:hover, .hap-playlist-description:active {
	color: #dbdbdb;
}

.hap-download, .hap-link{

    color:#ccc!important;

	font-size: 16px!important;

	margin-left: 15px;

	margin-right: 4px;

	display: flex;

	justify-content: center;

	border: 0!important;

	box-shadow: none!important;

	height: 15px;
	float: right;
	padding-right: 10px;

}

.fa-download i, .hap-link i{

	color:inherit;

	line-height: 60px;

}

.hap-download:hover, .hap-link:hover{

	color:#fff!important;

}

.hap-playlist-thumb{

display: block;



position: relative;

top: 0px;

left: 0px;

height: 46px;

width: 46px;

border-radius: 4px;

margin-right: 10px;

background: #111;

overflow: hidden;

flex-shrink:0;

}

.hap-playlist-thumb img{

	display: block;

    height: 46px;

	width: 46px!important;

    min-width: 100%;

    margin: 0 auto;

}





.hap-playlist-filter-msg{

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    display: none;

}

.hap-playlist-filter::placeholder { 

    color: inherit!important;

}

.hap-playlist-filter-msg span{

    position: relative;

    float: left;

    top: 50%;

    left: 50%;

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

    font-size: 16px;

	color: #ff2a67;

}	

.hap-bottom-bar{

	position:relative;

	bottom:0px;

	left: 0;

	height:30px;

	width:100%;

	overflow:hidden;

	background: #141414; 

}

.hap-search-filter{

	position:relative;

	width:100px!important;

	height:18px!important;

	padding:0!important;

	top:50%;

	margin:-9px 0 0 20px!important;

	border:0!important;

	-moz-border-radius:0 !important;

    -webkit-border-radius:0 !important;

	border-radius:0 !important;

	background:#222 !important;

	border:1px solid #333!important;

	color:#ccc !important;

	box-shadow:none!important; 

	line-height:1!important; 

	float: left;

	-webkit-box-sizing: border-box; 

	-moz-box-sizing: border-box;    

	box-sizing: border-box; 

}

.hap-sort-alpha{

	position:relative;

	left:5px;

	top:0;

	width:25px;

	height:100%;

	text-align: center;

	float: left;

}

.hap-sort-alpha i{

	display: inline-block;

	font-size: 18px!important;

	line-height: 30px!important;

}

.hap-random-toggle{

	position: absolute;

	top:10px;

	left:20px;

	width:30px;

	height:30px;

	text-align: center;

}





.hap-share-toggle{

	position:absolute;

	top:0;

	right:15px;

	width:30px;

	height:100%;

}

.hap-share-holder{

	position:absolute;

	top:0px;

	right:30px;

	width:450px;

	height:100%;

	background: #222; 

	display: none;

}

.hap-share-toggle:hover .hap-share-holder{

	display: block;
	background-color: transparent;
}

.hap-share-item{

	position: relative;

	width:25px;

	height:100%;

	top:0;

	float: right;

	margin-right:10px;

}

.hap-share-toggle i{

	display: inline-block;

	font-size:20px!important;

	line-height: 28px;

}

.hap-share-item i{

	display: inline-block;

	font-size:21px!important;

	line-height: 30px;

}







.hap-tooltip{

	position:absolute;

	background:#ff2a67;

	color:#fff!important;

	text-align:center;

	z-index:10000;

	pointer-events:none;

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

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

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

	border-radius: 1px;

	display:none;

	font-size:13px!important;

	padding:2px 5px !important;

	line-height:20px !important;

	white-space:nowrap;

}

.hap-preloader {

	position:absolute;

	top:50%;

	left:50%;

    width: 40px;

    height: 40px;

    margin-left:-20px;

	margin-top:-20px;

    background-color: #ff2a67;

    -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;

}









@media (max-width: 400px) {

	.hap-player-thumb-wrapper {

		width: 100px;

		height: 100px;

	}

	.hap-player-thumb img {

		max-width: 100px;

		max-height: 100px;

	}

}





fa-download:before{content:"\f019"}