/* The music-player */

/* Image Control Section */
.icons-holder span img {
  cursor: pointer;
}

img.play-icon,
img.pause-icon,
img.refresh-icon,
img.lyrics-icon {
  height: 30px !important;
  display: block !important;
  width: fit-content !important;
  object-fit: contain !important; /* This prevents the icons from being stretched */
}

/* Span Control Section */
.icons-holder span {
  margin-right: 40px;
}

/* holds images */
.icons-holder {
  display: flex;
  align-items: center;
}

/* Lyrics Modal Styles Section*/
/* This is used to remove overflow of the main page*/
body.lyrics-open {
  overflow: hidden;
}

/* This is the entire overlay container */
div.lyrics-overlay {
  display: none;
  align-items:center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000cc;
  z-index: 1000;
  justify-content: center;
}

	/* Container that will add padding between the top and bottom of the smaller overlay wherein all text is */
#lyric-menu-container {
  height: 80% !important;
  padding: 10px 0; /* Top and bottom padding */
}

/* The parent container of the text and X menu */
.close-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

/* Add a pseudo-element for the border with padding */
.close-container::before {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
/*   background-color: #fff; */
  background-color: rgba(255,255,255, 1);
}

/* This container contains the text on the close-container */
#close-text-container {
  justify-content: left;
  padding: 10px 10px;
  width: 90%;
}

/* This container contains the X-icon on the close-container */
#close-x-container {
  padding: 10px 10px;
  display: flex;
  width: 10%;
  justify-content: center;
  align-items: center;
  align-self: start;
  margin-right: 10px;
}

.lyrics_close_icon{
	font-size: 2em;
}

/* text on the close-text-container */
#close-text-container #title {
  color: rgb(51,51,51);
  font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  font-size: 23px;
  font-weight: 600;
  padding-bottom: 2px;
}

/* text on the close-text-container */
 #sub-title {
  color: rgb(51,51,51);
  font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* text on the close-x-container */
#close-x-container .x-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 0px;
  /* margin-right: -2px; */
  background-color: transparent;
  cursor: pointer;
}

.lyrics_close_icon{
    position
	font-size: 2em;
}

/* comination of close and text container */
.close-container,
.text-container {
  width: 100%;
/*   margin: auto !important; */
/*   background-color: #00000086; */
  background-color: rgba(255,255,255,1);
  backdrop-filter: invert(10%);
}

/* The parent container of the Text Area */
.text-container {
  display: flex;
  height: 85%;
  color: rgb(51,51,51);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
  
}

/* Hide scrollbar in WebKit-based browsers (Chrome, Safari, Edge) */
.lyrics-textarea::-webkit-scrollbar {
  display: none;
}

/* The text area */
#lyrics-textarea {
  text-align: left;
  padding: 10px;
  width: 100%;
  height: 100%; /* Adjust the height as needed */
  border: none;
  overflow-y: auto; /* Allow vertical scrolling */
  overflow-x: hidden; /* Disable horizontal scrolling */
  box-sizing: border-box;
  border-top: 2px solid rgb(51, 51, 51);
  border-bottom-right-radius: 20px; /* Correction for scroll bar */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE 10+ */
}


/* h3 tags in textarea */
#lyrics-textarea h3 {
/*   color: #ffffff; */
  color:  rgb(51,51,51);
  font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  font-size: 22px;
}

/* div tags in textarea */
#lyrics-textarea div.lyricSpacer {
  padding: 10px 0px 10px;
/*   color: #ffffff; */
  color:  rgb(51,51,51);
  font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px !important;
}

/* div tags in textarea */
#lyrics-textarea div.lyricSpacerAnomaly {
  padding: 10px 0px 0px;
/*   color: #ffffff; */
  color:  rgb(51,51,51);	
  font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px !important;
}

/* Media Queries*/

/* Player Control Section */
@media screen and (min-width: 200px) and (max-width: 500px) {
  /* Span Control Section */
  .icons-holder span {
    margin-right: 30px;
  }
}

@media screen and (max-width: 1024px) {
  /* for the size of the icons */
  img.play-icon,
  img.pause-icon,
  img.refresh-icon,
  img.lyrics-icon {
    height: 20px !important;
  }
}

/* Lyrics Modal Styles Section*/


/* @media screen and (min-width: 500px) and (max-width: 1200px) {
  .close-container {
    height: 
  }
} */

@media screen and (min-width: 500px) and (max-width: 1200px) {
  .close-container {
    width: 100%;
  }

  .text-container {
    width: 100%;
  }
}

@media screen and (min-width: 300px) and (max-width: 500px) {
  .close-container {
    width: 100%;
  }

  .text-container {
    width: 100%;
  }
}

/* For Galaxy fold */
@media screen and (max-width: 300px) {
  .close-container {
    width: 90%;
    height: 10%;
  }

  .text-container {
    width: 90%;
    height: 75%;
  }
}

/* Mobile */
@media screen and (min-width: 200px) and (max-width: 600px) {
  #close-text-container h2 {
    font-size: 20px !important;
  }
}

@media screen and (min-height: 390px) and (max-height: 640px) {
  .close-container {
    height: 25%;
  }

  .text-container {
    height: 75%;
  }
}

@media screen (min-width:391px) and (max-width: 768px) {
  #close-text-container #title h2 {
    font-size: 20px;
  }
}

@media screen and (max-height: 390px) {
  #close-text-container #title {
    font-size: 20px;
  }

  .close-container {
    height: 30%;
  }

  .text-container {
    height: 70%;
  }
}

/* Width Control for responsiveness */
@media screen and (max-width: 390px) {
  #close-text-container #title {
    font-size: 20px;
  }
}

@media (min-width: 1281){
	#lyric-menu-container{
		width: 35%;
		 transition: width 0.53s ease;
	}
}

@media (min-width: 1025px) and (max-width: 1280px){
	#lyric-menu-container{
		width: 60%;
		 transition: width 0.53s ease;
	}
}

@media (min-width: 769px) and (max-width: 1024px){
	#lyric-menu-container{
		width: 80%;
		 transition: width 0.3s ease;
	}
}


@media (max-width: 768px){
	#lyric-menu-container{
		width: 90%;
		 transition: width 0.3s ease;
	}
}


/* Control Divider width */
@media (max-width: 768px){
	#lyrics-textarea{
		  border-top: 1px solid rgb(51, 51, 51);
	}
}