@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#000;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}

/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
#dar button,#dar input,#dar img{border:0;}
#dar {
	max-width:100%;
	font-size:14px;
	font-family:"Segoe UI", Tahoma, sans-serif;
	text-align:initial;
	line-height:initial;
	background:#ffe3ef;
	color:#000;
	margin:0 auto;
	border-radius:0px;
	overflow:hidden;}

#dar .dar-album {height: 50px; padding:10px 0px 0px 0px;}
#dar .dar-album .dar-cover{visibility:hidden;margin-right:0px;}
#dar .dar-album .dar-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#dar .dar-album .dar-title{font-size:100%;font-weight:bold;}
#dar .dar-album .dar-artist{font-size:80%;color:#192A52;}
#dar .dar-controls{padding:15px;}
#dar .dar-controls button{
	font-size:130%; 
	width:32px;
	height:32px;
	background:none;
	color:#000;
	padding:7px;
	cursor:pointer;
	border:0;
	border-radius:3px;}

#dar .dar-controls button[disabled]{color:#000;cursor:initial;}
#dar .dar-controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#dar .dar-controls .dar-prev,#dar .dar-controls .dar-next{font-size:100%;}
#dar .dar-controls .dar-tracker,#dar .dar-controls .dar-volume{flex:1;margin-left:10px;position:relative;}
#dar .dar-controls .dar-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#dar .dar-controls .dar-loading .dar-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#dar .dar-controls .dar-time,#dar .dar-controls .dar-others{margin-left:10px;}
#dar .dar-controls .dar-volume{max-width:110px;}
#dar .dar-controls .dar-volume .dar-mute{margin-right:5px;}
#dar .dar-controls .dar-others .dar-active{background:#242f3d;}
#dar .dar-controls .dar-others .dar-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#dar .dar-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#dar .dar-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#dar .dar-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#dar .dar-controls .dar-load .dar-progress::-webkit-slider-runnable-track{background:#2f3841;}
#dar .dar-controls .dar-load .dar-progress::-moz-range-track{background:#2f3841;}
#dar .dar-controls .dar-loading .dar-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#dar .dar-controls .dar-loading .dar-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#dar .dar-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#dar .dar-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#dar .dar-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#dar .dar-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#dar .dar-hide{max-height:0;}
/* playlist */
#dar ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
#dar ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#dar ul li:last-child{padding-bottom:13px;}
#dar ul li:nth-child(odd){}
#dar ul li:hover{background:#1C5239;color:#fff;}

#dar ul li.dar-active{background:#4082bc;color:#fff;}
#dar ul li .dar-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
#dar ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
#dar ul::-webkit-scrollbar-track{background-color:#2f3841;}
#dar ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#dar ul::-webkit-scrollbar-thumb{background-color:#73797f;}
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#dar .dar-controls .dar-volume,#dar .dar-controls .dar-others{display:none;}
#dar .dar-controls .dar-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#dar .dar-time .dar-slash,#dar .dar-time .end-time{display:none;}
}





#pageaudio { 
	border-radius: 0px;
	background-color:aquamarine;
	color: chocolate;
	
}

  #player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 350px;
	  height: 100px;
    margin: 0 auto;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
	  
  }
#player-container h5{color:black}
  #player-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 30%;
    margin-top: 2px;
  }

  .player-btn {
    background-color: #777;
    border: none;
    color: white;
    padding: 6px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 2px;
    cursor: pointer;
    border-radius: 2px;
  }

  .player-btn:hover {
    background-color:orange;
  }

  audio {
    width: 100%;
    margin-top: 2px;
  }

 body.screenshot-detected {
            filter: blur(10px); /* Blur effect */
            transition: filter 0.5s ease;
        }

.fake-screenshot {
    width: 300px;
    height: 600px;
    background-image: url("../../newqy/img/fake.png");
    background-size: cover;
  }