* { padding: 0px; margin :0px; }

:root {--music_width : 100%;}

.album_menu {
  width: 100%;
  display: flex;
  padding-left: 1%;
  padding-right: 1%;
  margin-bottom: 2.5%;
  margin-top: 1%;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  }
  
  .album_icon {
  font-size: 0.5rem;
  height: 20px;
  padding-left: 5px;
  padding-right: 5px;
  min-width: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 2px;
  padding-top: 0.1%;
  padding-bottom: 0.1%;
  font-weight: bold;
  border: 1px solid ;
}
  
  .mp3_title {
  	width: 100%;
  	display: flex;
  	align-items: center;
  	padding-left: 0.2rem;
  	padding-right: 0.2rem;
  	box-sizing: border-box;
  	border: 0px solid #000000;
  	margin: auto;
  	font-size: 0.8rem;
  	font-weight: bold;
  	padding-bottom: 0.5rem;
  }
  
  .yen3d img {
  border-radius: 6px;
  margin-left: 10px;
  height: 40px;
  width: 42px;
  margin-top: 6px;
  }
  
    @media only screen and (min-width: 780px){
  .album_icon {
    font-size: 0.9rem;
    height: 30px;
  }  }

.containerPlayer{ 
width: var(--music_width);
margin: auto;
margin-top: 10px;
}

/* Player Controls */
#playerContainer { 
margin: auto;
background-color:#333333;  
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.controls {
display: flex;
justify-content: space-between;
align-items: center;
}

.nav {
width: 130px;
padding-right: 0.5rem;
padding-left: 1rem;
}

.volumeControl { 
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 0.5rem;
 }

.progress_bar {
padding-top: 0.5rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
}

.playAudio,.play { background: url('../images/audio_icons.png') no-repeat -2px -35px; width: 32px; height: 32px; }
.playAudio:hover { background: url('../images/audio_icons.png') no-repeat -2px -3px; }
.pauseAudio { background: url('../images/audio_icons.png') no-repeat -36px -35px; width: 32px; height: 32px; }
.pauseAudio:hover { background: url('../images/audio_icons.png') no-repeat -36px -3px; }
.shuffle { background: url('../images/audio_icons.png') no-repeat -28px -96px; width: 32px; height: 32px;  }
.shuffleActive, .shuffle:hover { background: url('../images/audio_icons.png') no-repeat -28px -71px; width: 32px; height: 32px;  }
.left { background: url('../images/audio_icons.png') no-repeat -60px -99px; width: 24px; height: 24px;  opacity:0.4;}
.left:not(.disabled):hover { opacity:1; }
.left.disabled, .right.disabled { opacity:0.4; cursor:default; }
.right { background: url('../images/audio_icons.png') no-repeat -88px -75px; width: 24px; height: 24px;  opacity:0.4; }
.right:not(.disabled):hover { opacity:1; }
.repeat { background: url('../images/audio_icons.png') no-repeat -4px -103px; width: 21px; height: 21px; margin-top:7px; }
.repeat:hover, .repeat.loopActive { background: url('../images/audio_icons.png') no-repeat -4px -79px; }

.volume { 
width: 20px; 
height: 20px; 
margin-left:5px; 
margin-right:5px; 
float:left; 
background: url('../images/audio_icons.png') no-repeat; 
}
.volume1 { background-position: -5px -150px; }
.volume2 { background-position: -5px -198px; }
.volume3 { background-position: -5px -246px; }
.mute { background-position: -34px -127px; }

.progress { clear:both; height:4px; background-color:#666666; width:100%; cursor:pointer; position:relative; }
.progress .updateProgress { width:0px; background-color:#00BD9B; height:100%; float:left; position:relative; }

.music_lyrics {
display: flex;
align-items: center;
justify-content: right;
padding-right: 0.5rem;
}

.music_row {
	display: flex;
	align-items: center;
}

.volumeControl .updateProgress { display:inline-block; vertical-align:middle; margin-top:2px; }
.volumeControl input[type="range"] { 
width: 70px;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #00BD9B;
height: 3px;
margin-top: 4px;
}

/* Chrome, Safari, Edge, and Opera */
.volumeControl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 13px; /* Adjust this to make it smaller */
  width: 13px;  /* Adjust this to make it smaller */
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4px; /* Centers the thumb on the track */
}

/* Firefox */
.volumeControl input[type="range"]::-moz-range-thumb {
  height: 13px; /* Matches Chrome size */
  width: 13px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.audioDetails { color:#00bd9b; font-size:12px; }
.audioTime { display: inline-block; text-align: right; float: right; }
.songPlay { display:inline-block; }
.seekableTrack { width: 0%; background-color:#666666; height: 4px; position: absolute; z-index: 0; display: block; }
.seekableTrack, .progress .updateProgress { -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; }

/* Playlist */
#listContainer { 
display: grid;
max-height: 400px;
overflow: scroll;
background-color:#fafafa;  
grid-template-columns: 90% auto;}


#listContainer div, #listContainer li {min-height:30px;}
#listContainer li, #listContainer .music_lyrics  {
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	cursor: pointer; 
}


#listContainer li a { text-decoration: none; color:#4e4f4f; }