* {

	margin:0;

	padding:0;

	border:0;

	outline:none;

}

a{ 

	text-decoration: none; 

}
/* 
body,html{

	background-color: #d6d6d6;

}
 */








#mrp-wrapper{

	position:relative;

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

	max-width:360px;

	margin: 100px auto;

}

.mrp-skin-mini{

	opacity: 0;

	transition: opacity 0.3s;

	line-height: normal!important;

	direction: ltr!important;

	margin: 0 auto;

	position:relative;

}

.mrp-skin-mini .mrp-player-wrap{

    position: relative;

    width:100%; 

    box-shadow: 1px 1px 15px #949494;

}

.mrp-skin-mini .mrp-player-holder{

	position: relative;

	left:0;

	top:0;

	overflow:hidden;

	height:100px;

	display:flex;

	flex-direction:row;

	background-color: #006397;

}

.mrp-skin-mini .mrp-contr-btn{

	color:#eee !important;

}

.mrp-skin-mini .mrp-contr-btn svg{

	position: absolute;

	height: 15px;

	top: 50%;

    left: 50%;

    padding: 0!important;

	margin: 0!important;

    fill:currentColor;

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

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

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

}

.mrp-skin-mini .mrp-player-thumb-wrap{

	position: relative;

	top:0;

	left:0;

	width:100px;

	height:100px;

	background-position: 50% 50%;

    background-size: cover;

    transition: opacity 0.3s ease-in-out;

    flex-shrink:0;

}

.mrp-skin-mini .mrp-player-thumb1,

.mrp-skin-mini .mrp-player-thumb2{

	position: absolute;

	top:0;

	left:0;

	width:100%;

	height:100%;

	background-position: 50% 50%;

    background-size: cover;

    transition: opacity 0.3s ease-in-out;

}

.mrp-skin-mini .mrp-thumb-hidden{

	opacity: 0;

}

.mrp-skin-mini .mrp-info{

	position: relative;

	padding: 10px 20px;

}

.mrp-skin-mini .mrp-player-title{

	font-size:18px;

	color:#eee;

	margin:0 0 3px 0;

	padding:0;

}

.mrp-skin-mini .mrp-player-artist{

	font-size:14px;

	margin:0;

	color:#eee;

	padding:0;

}

.mrp-skin-mini .mrp-playback-toggle{

	position:absolute;

	background: rgba(32, 32, 32, 0.30);

	left:25px;

	top:50%;

	width:50px;

	height:50px;

	margin-top: -25px;

	border-radius: 100%;

  	display: flex;

  	justify-content:center;

	align-items: center; 

	box-sizing: border-box;

}

.mrp-skin-mini .mrp-playback-toggle svg{

	height: 20px;

}

.mrp-skin-mini .mrp-pause-icon{

	display: none;

}

.mrp-skin-mini .mrp-player-content{

	position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 30px;

    background: #7d7a8f;

    width: 100%;

}



.mrp-skin-mini .mrp-player-controls-right{

	position: absolute;

    bottom:5px;

    right: 5px;

    display: flex;

    flex-direction: row;

}

.mrp-skin-mini .mrp-player-controls-right .mrp-contr-btn{

    position: relative;

    width:30px;	

	height:30px;

	right: 0;

	top:0;

	margin-right: 5px;

    float: right;

    filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .2)) 

}



.mrp-skin-mini .mrp-volume-toggle{

	height: 100%;

	width: 100%;

}

.mrp-skin-mini .mrp-mute-icon{

	display: none;

}

.mrp-skin-mini .mrp-volume-seekbar{

	position: absolute;

	top:0px;

	right:30px;

	width:90px;

	height:30px;

	cursor: pointer;

	touch-action: none;

	display: none;

}

.mrp-skin-mini .mrp-volume-bg{

	position:absolute;

	top:14px;

	left:10px;

	width:70px;

	height:2px;

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

}

.mrp-skin-mini .mrp-volume-level{

	position:absolute;

	top:14px;

	left:10px;

	width:0px;

	height:2px;

	background:#fff;

}

.mrp-skin-mini .mrp-volume-drag{

	position: relative;

	top:-9px;

    width: 20px;

    height: 20px;

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

}





/* share */



.mrp-skin-mini .mrp-share-holder{

    max-width: 450px;

    width:100%;

    position: fixed;

    top: 50%;

    left: 50%;

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

    z-index: 10;

    display: none;

    background: #fff;

    box-shadow: 1px 1px 15px #9494942e;

    opacity: 0;

    transition: opacity 0.3s;

}

.mrp-skin-mini .mrp-share-holder-inner{

    padding: 20px 40px 20px 20px;

}

.mrp-skin-mini .mrp-share-close,

.mrp-skin-mini .mrp-embed-close{

    position: absolute!important;

    width: 34px!important;

    height: 34px!important;

    top: 0!important;

    right: 0!important;

}

.mrp-skin-mini .mrp-share-close svg,

.mrp-skin-mini .mrp-embed-close svg{

	color:#cbcbcb!important;

}

.mrp-skin-mini .mrp-share-container{

    display: flex;

    flex-direction: row;

    white-space: nowrap;

    overflow-y: hidden;

    overflow-x: auto;

    padding-bottom: 10px;

}

.mrp-skin-mini .mrp-share-container::-webkit-scrollbar {

    width: 9px; 

    height: 9px; 

}

.mrp-skin-mini .mrp-share-container::-webkit-scrollbar-thumb {

    background: #999; 

}

.mrp-skin-mini .mrp-share-container::-webkit-scrollbar-track {

    background: #eee; 

}

.mrp-skin-mini .mrp-share-item{

    position:relative;

    width:40px;

    height:40px;

    text-align: center;

    float: left;

    margin-right: 5px;

    flex-shrink: 0;

}



.mrp-share-item svg{

    color: #fff;

}

.mrp-share-item[data-type="facebook"]{

    background: #3b5998!important;

}

.mrp-share-item[data-type="twitter"]{

    background: #00aced!important;

}

.mrp-share-item[data-type="tumblr"]{

    background: #34526f!important;

}

.mrp-share-item[data-type="whatsapp"]{

    background: #25D366!important;

}

.mrp-share-item[data-type="linkedin"]{

    background: #007bb6!important;

}

.mrp-share-item[data-type="reddit"]{

    background: #FF4301!important;

}

.mrp-share-item[data-type="digg"]{

    background: #005be2!important;

}

.mrp-share-item[data-type="pinterest"]{

    background: #cb2027!important;

}



/* embed */

.mrp-skin-mini .mrp-embed-holder{

    position: fixed;

    top: 50%;

    left: 50%;

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

    z-index: 10;

    display: none;

    max-width: 500px;

    width: 100%;

    max-height: 200px;

    height: 100%;

    background: #fff;

    box-shadow: 1px 1px 15px #9494942e;

    opacity: 0;

    transition: opacity 0.3s;

}

.mrp-skin-mini .mrp-embed-holder-inner{

    position: absolute;

    top: 50%;

    left: 50%;

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

    display: flex;  

    width: 80%;

    height: 80%;

}

.mrp-skin-mini .mrp-embed-data{

    width: 100%;

    height: 100%;

    position: relative;

}

.mrp-skin-mini .mrp-embed-box{

    display: flex;

}

.mrp-skin-mini .mrp-embed-field-wrap{

    display: flex;

    align-items: center;

    position: relative;

    margin:0;

    line-height: normal;

    white-space: nowrap;

    overflow: hidden;

    width: 100%;

    font-size: 12px;

    padding: 5px;

    color: #999;

    border-radius: 0;

    border: 1px solid #e6e6e6;

}

.mrp-skin-mini .mrp-embed-title{

    font-size: 18px;

    margin: 10px 0;

    color: #fff;

}

.mrp-skin-mini .mrp-embed-copy{

    display: inline-block;

    padding: 8px 12px!important;

    font-size: 13px;

    cursor: pointer;

    float: right;

    align-self: flex-start;

    margin-left: 5px;

    margin-right: 5px;

    white-space: nowrap;

    background: #ff2a67;

    color: #fff;

    border-radius: 0;

    transition: opacity 0.3s ease-out; 

}

.mrp-skin-mini .mrp-embed-field-wrap-selected{

    background: #b9b9b9;

    color: #fff;

}

















#mrp-playlist-list{

	display:none;

}

.mrp-skin-mini .mrp-tooltip{

	position:absolute;

	background: #fff;

    color: #555!important;

	text-align:center;

	z-index:10000;

	font-weight: 600;

	pointer-events:none;

	box-shadow: 1px 1px 3px #888;

	display:none;

	font-size:12px!important;

	padding:4px 8px !important;

	white-space:nowrap;

	user-select: none; 

}

.mrp-skin-mini .mrp-preloader {

	position:absolute;

	top:50%;

	left:50%;

    width: 40px;

    height: 40px;

    margin-left:-20px;

	margin-top:-20px;

    background-color: #ffafb6;

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

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

}

@-webkit-keyframes mrp_preloader {

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

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

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

}

@keyframes mrp_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);

    }

}





/* stats */



.mrp-skin-mini .mrp-server-stat-wrap{

	position: absolute;

    box-sizing: border-box;

    background: rgba(40, 40, 40, 0.9);

    padding: 10px;

    top: 50%;

    left: 50%;

    width: 250px;

    height: 220px;

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

    overflow-y: auto;

    display: none;

    opacity: 0;

    transition: opacity 0.3s;

}

.mrp-skin-mini .mrp-server-stat-close{

	position: absolute;

    top: 0;

    right: 0;

    width: 40px;

    height: 40px;

}

.mrp-skin-mini .mrp-server-stat-close svg{

	position: absolute;

	height: 15px;

	top: 50%;

    left: 50%;

    padding: 0!important;

	margin: 0!important;

    fill:currentColor;

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

}

.mrp-skin-mini .mrp-server-stat-wrap::-webkit-scrollbar {

    width: 9px; 

    height: 9px; 

}

.mrp-skin-mini .mrp-server-stat-wrap::-webkit-scrollbar-thumb {

    background: #999; 

}

.mrp-skin-mini .mrp-server-stat-wrap::-webkit-scrollbar-track {

    background: #eee; 

}

.mrp-skin-mini .mrp-server-stat{

	padding: 6px 0;

	font-size: 13px;

	display: flex;

    flex-direction: row;

    color: #ccc;

}

.mrp-skin-mini .mrp-server-stat-wrap svg{

	position: relative;

	height: 14px;

	width: 20px;

    padding: 0!important;

    fill:currentColor;

    margin: 0 10px 0 0!important;

    color: #e7e7e7;

    flex-shrink: 0;

}

.mrp-skin-mini .mrp-server-title{

	font-size: 20px;

	margin: 8px;

	color: #fff;

}

.mrp-skin-mini .mrp-server-url{

	color:inherit;

}

.mrp-skin-mini .mrp-server-genre-tag{

	padding: 3px 5px;

	background-color: #9e9e9e;

	border-radius: 6px;

	color: #fff;

	font-size: 11px;

	margin: 0 5px 5px 0;

	display: inline-block;

}





/* minimize on scroll */



.mrp-minimize-bl{

    top:auto!important;

    position: fixed!important;

    z-index: 2147483648;

    bottom: 20px!important;

    left: 20px!important;

    margin: 0!important;

    box-shadow: 0 0 10px rgba(0,0,0,0.5);

}

.mrp-minimize-br{

    top:auto!important;

    position: fixed!important;

    z-index: 2147483648;

    bottom: 20px!important;

    left:auto!important;

    right: 20px!important;

    margin: 0!important; 

    box-shadow: 0 0 10px rgba(0,0,0,0.5);

}



.mrp-skin-mini .mrp-minimize-bl,

.mrp-skin-mini .mrp-minimize-br{

	max-width: 360px;

}



/* on narrow screen */

@media(max-width: 500px) {

	.mrp-minimize-bl,

	.mrp-minimize-bl{

		left:auto!important;

		right: auto!important;

	}

}

.mrp-minimize-close{

	position: absolute!important;

	top: -40px!important;

	width: 40px!important;

	height: 40px!important;

	display: none;

}

.mrp-minimize-close{

	background: #fff;

}

.mrp-minimize-close svg{

	color: #999;

}



.mrp-minimize-bl .mrp-minimize-close{

	display: block;

	left: 0;

}

.mrp-minimize-br .mrp-minimize-close{

	display: block;

	right: 0;

}









/*  wave */

.mrp-canvas{

	position: absolute;

	left: 0;

	bottom: 0;

}



.mrp-dialog-visible{

	opacity: 1!important;

}

.mrp-visible {

	opacity: 1!important;

}

.mrp-force-hide{

	display: none!important;

}



.mrp-filter-hidden{

    height: 0!important;

    min-height: 0!important;

    opacity: 0!important;

    transition: all 0.3s;

    padding: 0!important;

    margin: 0!important;

}







.mrp-playlist-options{

	display: none;

}



/* ad interface */



.mrp-skin-mini .mrp-ad-interface{

	position: absolute;

    background: #ffc107;

    top: 0;

    width: calc(100% - 100px);

    left: 100px;

    height: 100%;

    color: #fff;

    opacity: 0;

    display: none;

    transition: opacity 0.3s;

}

.mrp-skin-mini .mrp-ad-interface .mrp-ad-interface-inner{

	width: 100%;

	height: 100%;

    display: flex;

    flex-direction: column;

    margin: 15px;

}

.mrp-skin-mini .mrp-ad-interface-mini{

	position: absolute;

	background: #7d7a8f;

    top: 0;

    width: 100%;

    left: 0;

    height: 100%;

    color: #ffeb3b;

    font-size: 14px;

    opacity: 0;

    display: none;

    transition: opacity 0.3s;

}

.mrp-skin-mini .mrp-ad-interface-mini .mrp-ad-interface-inner{

	width: 100%;

	height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

}

.mrp-skin-mini .mrp-ad-interface-timer{

	padding:0 3px;

}

.mrp-skin-mini .mrp-ad-interface-shown{

	opacity: 1;

}