/* Set the body defaults */
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	background-color: #fff;
}

html, body {
}

body {
	margin:0 auto
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display:block
}

a {
	background:0 0
}

a:active, a:hover {
	outline:0
}

b, strong {
	font-weight:700
}

img {
	border:0
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box
}

body {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-family: helvetica neue, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: #555;
	background-color: #fff;
	z-index:1
}

a {
	color: #aaa;
	text-decoration: none;
	-webkit-tap-highlight-color:transparent
}

a:active {
	color:#aaa
}



/* Player Styles */



div#amplitude-player{
	position: relative;
	  max-width: 400px;
	  margin: auto;
	  padding: 0px 10px 0px 10px;
}

div#amplitude-left div#player-left-bottom div#control-container{
	height: 120px;
}

div#head{
	height: 50px;
	cursor: pointer;
	background: #fff;
	background-repeat: no-repeat;
	margin: 0px auto 40px auto;
}

div#logo{
	height: 57px;
	width: 140px;
	cursor: pointer;
	background: url('../resources/ella.svg');
	background-repeat: no-repeat;
	margin: 60px auto;
}


div#share{
	width: 48px;
	height: 48px;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px' fill='rgb(229 36 37)'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: cover;
	margin: auto;
}

div#source{
	font-size: 12px;
	text-align: center;
	color:#aaa;
	position:fixed;
	   left:0px;
	   bottom:0px;
	   height:40px;
	   width:100%;
}



div#prevtop{
	display: inline-block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background: url('../img/prevtop.svg');
	background-repeat: no-repeat;
	float: right;
}

progress.amplitude-song-played-progress {
  background-color: #fff;
  -webkit-appearance: none;
  appearance: none;
  width: 70%;
  	margin: auto;
  height: 12px;
  cursor: pointer;
  border: 0px;
  
  }
  
  progress.amplitude-song-played-progress:not([value]) {
    background-color: #fff; }

progress[value]::-webkit-progress-bar {
  background-color: #607d8b; }

progress[value]::-moz-progress-bar {
  background-color: #607d8b; 	
    height: 12px;}

progress[value]::-webkit-progress-value {
  background-color: #ccc;
    height: 12px; }
	
progress[value]::-moz-progress-value {
	  background-color: #ccc;
		height: 12px; }

.time-container {
  font-weight: 400;
  font-size: 12px;
  color: #808080;
  background-color: #fff;
  height: 40px; 
  width: 85%;
  margin: auto; 
  }
  
.time-container span.current-time {
	width: 15%;
	float:left;
	
}
   
.time-container span.duration {
	float: right;
}

div#volume-container {
	width: 45%;
	margin: auto;
	height: 50px;
	padding-top: 10px; }

  div#volume-container div.amplitude-mute {
	cursor: pointer;
	width: 25px;
	height: 19px;
	float: left; }
	div#volume-container div.amplitude-mute.amplitude-not-muted {
	  background: url("../img/volume.svg");
	  background-repeat: no-repeat; }
	  
	 div#volume-container  div.amplitude-mute.amplitude-muted {
	  background: url("../img/mute.svg");
	  background-repeat: no-repeat; }

input[type=range].amplitude-volume-slider {
	  -webkit-appearance: none;
	  width: calc( 100% - 33px);
	  float: left;
	  margin-top: 10px;
	  margin-left: 5px; }
	
	@-moz-document url-prefix() {
	  input[type=range].amplitude-volume-slider {
		margin-top: 0px; } }
	@supports (-ms-ime-align: auto) {
	  input[type=range].amplitude-volume-slider {
		margin-top: 3px;
		height: 12px;
		background-color: rgba(255, 255, 255, 0) !important;
		z-index: 999;
		position: relative; }
	
	  div.ms-range-fix {
		height: 1px;
		background-color: #A9A9A9;
		width: 67%;
		float: right;
		margin-top: -6px;
		z-index: 9;
		position: relative; } }
	@media all and (-ms-high-contrast: none) {
	  *::-ms-backdrop, input[type=range].amplitude-volume-slider {
		margin-top: -24px;
		background-color: rgba(255, 255, 255, 0) !important; } }
	input[type=range].amplitude-volume-slider:focus {
	  outline: none; }
	
	input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
	  width: 75%;
	  height: 1px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: #CFD8DC; }
	
	input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
	  height: 10px;
	  width: 10px;
	  border-radius: 10px;
	  background: #fff;
	  cursor: pointer;
	  margin-top: -4px;
	  -webkit-appearance: none; }
	
	input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
	  background: #fff; }
	
	input[type=range].amplitude-volume-slider::-moz-range-track {
	  width: 100%;
	  height: 1px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: #fff; }
	
	input[type=range].amplitude-volume-slider::-moz-range-thumb {
	  height: 10px;
	  width: 10px;
	  border-radius: 10px;
	  background: #fff;
	  cursor: pointer;
	  margin-top: -4px; }
	
	input[type=range].amplitude-volume-slider::-ms-track {
	  width: 100%;
	  height: 1px;
	  cursor: pointer;
	  animate: 0.2s;
	  background: transparent;
	  /*leave room for the larger thumb to overflow with a transparent border */
	  border-color: transparent;
	  border-width: 15px 0;
	  /*remove default tick marks*/
	  color: transparent; }
	
	input[type=range].amplitude-volume-slider::-ms-fill-lower {
	  background: #fff;
	  border-radius: 10px; }
	
	input[type=range].amplitude-volume-slider::-ms-fill-upper {
	  background: #CFD8DC;
	  border-radius: 10px; }
	
	input[type=range].amplitude-volume-slider::-ms-thumb {
	  height: 10px;
	  width: 10px;
	  border-radius: 10px;
	  background: #fff;
	  cursor: pointer;
	  margin-top: 2px; }
	
	input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
	  background: #CFD8DC; }
	
	input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
	  background: #CFD8DC; }
	
	input[type=range].amplitude-volume-slider::-ms-tooltip {
	  display: none; }
	

/* Player Left Styles */
div#amplitude-left{
	padding: 0px;
	background: #fff;
	-webkit-backface-visibility: hidden;
	backface-visibility:hidden;
}

div#menu-container{
height: 50px;
}

div#amplitude-left div#player-left-bottom{
	padding: 40px 0px 10px 0px;
}


div#amplitude-left div#player-left-bottom div#time-container:after{
	content: "";
	display: table;
	clear: both;
}

div#amplitude-left div#player-left-bottom div#control-container{

}


div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container{

}

div#amplitude-left div#player-left-bottom div#control-container	div#prev-container{
	float: left;
	width: 15%;
	height: 60px;
	padding-top: 52px;

}

div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container div#central-controls{
	margin: auto;
	width: 300px;
}

div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container div#central-controls div#previous{
	display: inline-block;
	width: 34px;
	height: 34px;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(2.66785 0 0 2.90924 -29.3464 -32.0016)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cpath id='Shape' d='M16.131 18.254L16.131 12.3C16.131 11.581 15.554 11 14.841 11L12.289 11C11.577 11 11 11.581 11 12.3L11 26.2C11 26.921 11.577 27.499 12.289 27.499L14.841 27.499C15.555 27.499 16.131 26.921 16.131 26.2L16.131 20.246L27.433 27.248C28.291 27.809 28.992 27.399 28.992 26.327L28.992 12.172C28.993 11.104 28.291 10.689 27.433 11.252L16.131 18.254Z' style='fill:rgb(96 125 139)%3B'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: cover;
	float: right;
}

div#amplitude-left div#player-left-bottom div#control-container	div#play-pause-container{
width: 70%;
float: left;
height: 60px;

}

div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container div#central-controls div#play-pause{
	width: 140px;
	height: 140px;
	cursor: pointer;
	margin: auto;
}

div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container div#central-controls div#play-pause.amplitude-paused{
	background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 0 0)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:rgb(229 36 37)%3B'/%3E%3Cpath id='Play' d='M43.625 29.803L23.646 17.426C22.189 16.474 21 17.173 21 18.988L21 43.011C21 44.823 22.188 45.529 23.646 44.573L43.625 32.198C43.625 32.198 44.336 31.698 44.336 31.001C44.336 30.302 43.625 29.803 43.625 29.803Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container div#central-controls div#play-pause.amplitude-playing{
	background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude' transform='matrix(1 0 0 1 10 10)'%3E%3Cg id='HD_05.100.00-521Website_OpenSource-Amplitude'%3E%3Cg id='Lead-in'%3E%3Cg id='Player'%3E%3Cg id='Controllers-Status-Info' serif:id='Controllers/Status/Info'%3E%3Cg id='Controls'%3E%3Cg id='Play-Pause' serif:id='Play/Pause'%3E%3Cg id='Oval-1'%3E%3Cg transform='matrix(1.33333 0 0 1.33333 -10 -10)'%3E%3Ccircle cx='30' cy='30' r='30' style='fill:rgb(229 36 37)%3B'/%3E%3C/g%3E%3Cpath id='Shape' d='M40.587 16.61L36.257 16.61C35.048 16.61 34.069 17.59 34.069 18.811L34.069 42.403C34.069 43.624 35.048 44.61 36.257 44.61L40.587 44.61C41.8 44.61 42.775 43.624 42.775 42.403L42.775 18.811C42.783 17.595 41.8 16.61 40.587 16.61Z' style='fill:white%3B'/%3E%3Cpath id='Shape1' serif:id='Shape' d='M24.2 16.61L19.872 16.61C18.661 16.61 17.679 17.59 17.679 18.811L17.679 42.403C17.679 43.624 18.661 44.61 19.872 44.61L24.2 44.61C25.411 44.61 26.388 43.624 26.388 42.403L26.388 18.811C26.388 17.595 25.411 16.61 24.2 16.61Z' style='fill:white%3B'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

div#amplitude-left div#player-left-bottom div#control-container	div#next-container{
	float: right;
	width: 15%;
	height: 60px;
	padding-top: 52px;

}

div#amplitude-left div#player-left-bottom div#control-container	div#central-control-container div#central-controls div#next{
	display: inline-block;
	width: 34px;
	height: 34px;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cg transform='matrix(2.67201 0 0 2.91432 -29.3921 -32.0575)'%3E%3Cg id='_05.100.00-OpenSource-Amplitude' serif:id='05.100.00-OpenSource-Amplitude'%3E%3Cpath id='Shape' d='M27.677 11L25.131 11C24.416 11 23.844 11.58 23.844 12.298L23.844 18.242L12.557 11.251C11.699 10.691 11 11.101 11 12.169L11 26.3C11 27.366 11.699 27.782 12.557 27.219L23.844 20.229L23.844 26.173C23.844 26.893 24.42 27.47 25.131 27.47L27.677 27.47C28.39 27.47 28.964 26.893 28.964 26.173L28.964 12.298C28.965 11.582 28.389 11 27.677 11Z' style='fill:rgb(96 125 139)%3B'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: cover;
}



div#amplitude-left div#player-left-bottom div#control-container:after{
	content: "";
	display: table;
	clear: both;
}

div#amplitude-left div#player-left-bottom div#meta-container{
	text-align: center;
	margin: 70px auto 10px auto;
	width: 80%;
	color: #808080;
}

div#meta-container span.song-name{
	display: block;
	color: #808080;
	font-size: 20px;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div#amplitude-left div#player-left-bottom div#meta-container div.song-artist-album{
	color: #808080;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div#amplitude-left div#player-left-bottom div#meta-container div.song-artist-album span{
	display: block;
}

/* Player right styles */
div#amplitude-right{
	padding: 0px;
	overflow-y: scroll;
}

div#amplitude-right	div.song{
	cursor: pointer;
	padding: 10px;
}


div#amplitude-right	div.song.amplitude-active-song-container div.song-now-playing-icon-container img.now-playing{
	display: block;
}
div#amplitude-right	div.song.amplitude-active-song-container div.song-now-playing-icon-container:hover img.now-playing div.play-button-container{
	display: none;
}
div#amplitude-right	div.song div.song-meta-data{
	float: left;
	width: calc( 100% - 40px );
}
div#amplitude-right	div.song div.song-meta-data span.song-title{
	color: #fff;
	font-size: 16px;
	display: block;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
div#amplitude-right	div.song div.song-meta-data span.song-artist{
	color: #fff;
	font-size: 14px;
	font-weight: bold;

	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


div#amplitude-right	div.song span.song-duration{
	float: left;
	width: 55px;
	text-align: center;
	line-height: 45px;
	color: #808080;
	font-size: 16px;
	font-weight: 500;
}

div#amplitude-right	div.song:after{
	content: "";
	display: table;
	clear: both;
}

@media only screen and (max-width: 260px) {
	div#shuffle-container{display: none;}
	div#bar-mp3{width:80%;}
	div#repeat-container{width:20%;}
	div#central-controls {float: right;}
}


/* Small only */
@media screen and (max-width: 39.9375em) {
	div#amplitude-player div#amplitude-left img[amplitude-song-info="cover_art_url"]{
		width: auto;
		height: auto;
	}
}

/* Medium and up */
@media screen and (min-width: 40em) {

}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {

}

/* Large and up */
@media screen and (min-width: 64em) {

}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {

}

/* Existing styles remain unchanged */

/* Class to hide elements */
.hidden {
  display: none !important;
}

/* Menu Toggle Button (upper right, above the logo) */
#menu-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background-color: transparent;
  padding: 10px 15px;
  border: none;
  z-index: 101;
}

/* Ensure the SVG scales properly */
#menu-toggle svg {
  display: block;
}

#menu-logo{
	height: 20px;
	cursor: pointer;
	background: url('../resources/ella.svg');
	background-repeat: no-repeat;
	margin: 30px 15px;
}

/* Sliding Playlist Menu (slides in from the right) */
#playlist-menu {
  position: fixed;
  top: 0;
  right: -300px; /* Hidden off-screen initially */
  width: 300px;
  height: 100%;
  background-color: #fff;  /* White background when menu opens */
  box-shadow: -2px 0 5px rgba(0,0,0,0.3);
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 100;
}

#playlist-menu.open {
  right: 0; /* Slides in when open */
}

/* Close Button inside the Menu */
#playlist-menu #menu-close {
  text-align: right;
  padding: 15px;
  font-size: 32px;
  cursor: pointer;
  color: rgb(229,36,37); /* Red close button for consistency */
}

/* Menu List Styles */
#playlist-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#playlist-menu ul li {
  border-bottom: 1px solid #eee;
}

#playlist-menu ul li a {
  display: block;
  padding: 15px;
  color: rgb(229,36,37);  /* Red links */
  text-decoration: none;
}

#playlist-menu ul li a:hover {
  background-color: #f2f2f2;
}


		/* Modal container - hidden by default */
		.modal {
		  display: none; /* Hidden by default */
		  position: fixed;
		  z-index: 1000; /* Above everything else */
		  left: 0;
		  top: 0;
		  width: 100%;
		  height: 100%;
		  overflow: auto;
		  background-color: rgba(0,0,0,0.5); /* Black with opacity for dimming */
		}
		/* Modal content box */
		.modal-content {
		  background-color: #fff;
		  margin: 15% auto;
		  padding: 20px;
		  border-radius: 4px;
		  width: 90%;
		  max-width: 500px;
		  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
		}
		/* Close button */
		.modal-content .close {
		  color: #aaa;
		  float: right;
		  font-size: 28px;
		  font-weight: bold;
		  cursor: pointer;
		}
		.modal-content .close:hover,
		.modal-content .close:focus {
		  color: #000;
		  text-decoration: none;
		}
		/* About button style (customize as needed) */
		#about-button {
		  position: fixed;
		  bottom: 20px;
		  right: 20px;
		  background-color: rgb(229,36,37);
		  color: #fff;
		  padding: 10px 16px;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		  z-index: 110; /* Above the modal backdrop if needed */
		}