* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
  }
  
  body {
    background-color: #f5f5f5;
	
  }
  
  html {
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
  }
  
  .player {
	  position: relative;
    max-width: 480px;
    margin: 0 auto;
  }
  
  .player .icon-pause {
    display: none;
  }
  
  .player.playing .icon-pause {
    display: inline-block;
  }
  
  .player.playing .icon-play {
    display: none;
  }
  
  .dashboard {
   position: fixed;
    top: 0;
    width: 100%;
	height:338px;
    max-width: 480px;
	  padding: 16px 16px 14px;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
	z-index:10;
  }
  

  
  /* CD */
  .cd {
    display: flex;
    margin: auto;
    width: 200px;
  }
  
  .cd-thumb {
    width: 100%;
    padding-top: 100%;
    border-radius: 50%;
    background-color: #333;
    background-size: cover;
    margin: 0;
	background-repeat: no-repeat;
   background-position: center center;
  
 
  }
  .audio {
   
    padding:  0;
	margin: 0;
  }
  
  /* CONTROL */
  .control {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding:  0;
	margin: 0;
  }
  
  .control .btn {
    color: #666;
    padding: 18px;
    font-size: 18px;
  }
  
  .control .btn.active {
    color: red;
  }
  
  #playbtn,#pausebtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:red;
  }
  
  
  
  /* PLAYLIST */
  .playlist {
  margin-top: 340px;
  max-width: 480px;
   
  }
  
  .song {
	  
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    background-color: #fff;
    padding: 8px 8px;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
	 margin:  3px;
	 border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  transform: translateZ(0);
  
 
	
  }
  
  .song.active {
    background-color: green;
  }
  
  .song:active {
    opacity: 0.8;
  }
  
  .song.active .option,
  .song.active .author,
  .song.active .title {
    color: #fff;
  }
  
  .song .thumb {
    
    border-radius: 50%;
    color:red;
    margin: 0 8px;
  }
  
  .song .body {
    flex: 1;
   
    padding: 5px 5px 10px 5px;
  }
  
  .song .title {
    font-size: 18px;
    color: #333;
  }
  
  .song .author {
    font-size: 12px;
    color: #999;
  }
  
  .song .option {
    padding: 16px 8px;
    color: #999;
    font-size: 18px;
  }
  
  
  
  
  

/* Plyr Overrides
================================================== */


:root {
  --plyr-color-main: red;
  --plyr-range-track-height:2px;
--plyr-range-thumb-height:25px;
--plyr-range-thumb-background:red;
--plyr-line-height:1px;
--plyr-audio-progress-buffered-background:rgba(137, 196, 244, .4);
--plyr-audio-range-thumb-active-shadow-color:rgba(53, 134, 255, 0.3);
}









input[type=search] {
  
	
	
	position:fixed;
	width:60px;
	height:60px;
	top:0px;
	right:2px;
	background-color:white;
	color:#6495ED;
	border:none;
	z-index:999;
	border-radius:50px;

	
	font-size: 25px;
	margin-top:4px;
     
}
input[type=search]:focus {
  width: 100%;
  border-radius:20px;
  font-size: 25px;
  border: 2px solid #ccc;
  background-color:white;
}
::placeholder {
  color: DodgerBlue;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: DodgerBlue;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: DodgerBlue;
}