.PMC {
    margin-top: 0%;
    margin-bottom: 0%;
    max-width: 950px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 5px rgb(0, 255, 0);
  }

  .PMC span {
    height: 150px;
    display: block;
    overflow: hidden;
  }
  
  .PMC span {
    text-align: center;
  }

  .PMC img {
    width: 100%;
    width: 200px;
    height: auto;
    display: block;
    border: 23px solid black;
    background-color: #000000;
  }
  
  .PMC-Header {
    padding: 40px;
    background-color: #000000;
    color: red;
  }
  
  .PMC-Header p {
    margin: 0;
    font-size: 22px;
    color: #ff0000;
    display: flexbox;
  }

  div.PMC-Body {
    background-color: black;
  }

  p.Genre {
    font-size: 22px;
    font-weight: bolder;
    float: right;
    margin-top: -100px;
    color: yellow;
    font-weight: bold;
    padding: 19.5px;
  }

  p.Genre:hover {
    font-size: 22px;
    float: right;
    margin-top: -100px;
    color: yellow;
    text-decoration: underline;
    font-weight: bold;
    padding: 19.5px;
  }

  .Artist {
    float: left;
    font-weight: bold;
    
  }

  .Title {
    float: right;
    font-weight: bold;
  }

  p.Description {
    float: center;
    color: rgb(0, 255, 0);
    background-color: rgb(0, 0, 0);
    font-weight: bold;
    padding: 1px;
    border-bottom: 5px solid rgb(0, 255, 0);
    padding-bottom: 2%;
    margin-left: -5%;
    width: 108%;
  }

  p.Description:hover {
    float: center;
    color: rgb(0, 255, 0);
    background-color: rgb(0, 0, 0);
    font-weight: bold;
    padding: 1px;
    text-decoration: overline;
    border-bottom: 5px solid rgb(0, 255, 0);
    padding-bottom: 2%;
    margin-left: -5%;
    width: 108%;
  }

  p.Description:focus {
    float: center;
    color: rgb(0, 255, 0);
    background-color: rgb(0, 0, 0);
    font-weight: bold;
    padding: 1px;
    text-decoration: overline underline;
    border-bottom: 5px solid rgb(0, 255, 0);
    padding-bottom: 2%;
    margin-left: -5%;
    width: 108%;
  }
  
  
  .PMC-Body {
    padding: 20px;
    background-color: whitesmoke;
  }
  
  .player-controls {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  
  .player-controls button {
    padding: 8px 16px;
    margin-right: 10px;
    background-color: #ff0000;
    color: #fff;
    border: 2px solid black;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .seek-bar {
    width: 100%;
  }
  
  .PMC-Footer {
    padding: 10px;
    color: white;
    background-color: rgb(255, 0, 0);
}

.PMC-Footer span {
  display: inline-block;
  margin: 10px;
  padding-right: 10px;
  height: 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  text-decoration: underline;
}

.PMC-Footer span:hover {
  display: inline-block;
  margin: 10px;
  padding-right: 10px;
  height: 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  text-decoration: underline;
}

.Footer-Button2 {
  text-decoration: underline !important;
}

.Description {
  color:rgb(255, 0, 0);
}

.NextTrackButton {
  color:  yellow;
  background-color: black;
  border: 5px solid  rgb(0, 255, 0);
  border-radius: 15px;
  max-width: 100%;
  width: 1050px;
  font-weight: bold;
  font-size: 22px;
}
  
.NextTrackButton:hover {
  color:  rgb(0, 255, 0);
  background-color: rgb(0, 0, 0);
  border: 5px solid  yellow;
  border-radius: 31px;
  max-width: 100%;
  width: 1050px;
  font-weight: bold;
  font-size: 22px;
}

.NextTrackButton:focus {
  color: rgb(255, 0, 0);
  background-color: rgb(0, 0, 0);
  border: 5px solid  red;
  border-radius: 31px;
  max-width: 100%;
  width: 1050px;
  font-weight: bold;
  font-size: 22px;
}

/* CSS for smooth transition */

.player-controls {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

/* Footer Button Styling */
.Footer-Button {
  background-color: rgb(255, 0, 0);
  color: #ffffff;
  border-radius: none;
  cursor: pointer;
  text-decoration: underline;
}

/* Hover and Focus Effects for Footer Button */
.Footer-Button:hover,
.Footer-Button:focus {
  background-color: rgb(255, 0, 0);
  color: rgb(255, 255, 255); /* Change text color on hover/focus */
  outline: none; /* Remove focus outline */
  border: 2.5px solid rgb(255, 0, 0);
}


.play-button:hover {
  margin-right: 10px;
  background-color: black;
  color: rgb(0, 255, 0);
  border-width: 5px; 
}

.pause-button:hover {
  margin-right: 10px;
  background-color: black;
  color: rgb(255, 0, 0);
  border-width: 5px; 
} 

.play-button:focus {
  margin-right: 10px;
  background-color: rgb(0, 0, 0);
  color: rgb(0, 255, 0);
  border-width: 5px;  
}

.pause-button:focus {
  margin-right: 10px;
  background-color: black;
  color: rgb(255, 0, 0);
  border-width: 5px; 
}

.gas-button {
  position: relative;
  bottom: -72px;
  left: -23px;
  font-family: monospace;
  margin-left: 7px;
  margin-right: 10px;
  background-color: black !important;
  color: rgb(255, 255, 255) !important;
  border-color: rgb(255, 89, 0) !important;
  background-color: black;
  border-width: 5px; 
}

.gas-button:hover {
  position: relative;
  bottom: -72px;
  left: -23px;
  font-family: monospace;
  margin-left: 7px;
  margin-right: 10px;
  background-color: black;
  color: rgb(0, 255, 255) !important;
  border-color: rgb(255, 89, 0) !important;
  border-width: 5px; 
}

.gas-button:focus {
  position: relative;
  bottom: -72px;
  left: -23px;
  font-family: monospace;
  margin-left: 7px;
  margin-right: 10px;
  background-color: black;
  color: red !important;
  border-color: rgb(0, 255, 255);
  border-width: 5px; 
}

.gas-button2 {
  color: rgb(255, 255, 255);
}

.gas-button2:hover {
  color: rgb(0, 255, 255);
  text-decoration: overline !important;
}

.gas-button2:focus {
  color: rgb(255, 0, 0);
}

.mccc-button {
  position: relative;
  left: -153px;
  bottom: -62px;
  font-family: monospace;
  margin-left: 657px;
  margin-right: 10px;
  background-color: black !important;
  color: rgb(0, 255, 255) !important;
  border-color: rgb(0, 255, 255) !important;
  background-color: black;
  border-width: 5px; 
}

.mccc-button:hover {
  margin-left: 657px;
  margin-right: 10px;
  background-color: black;
  color: rgb(0, 255, 0) !important;
  border-color: rgb(0, 255, 255) !important;
  border-width: 5px; 
}

.mccc-button:focus {
  margin-left: 657px;
  margin-right: 10px;
  background-color: black;
  color: red !important;
  border-color: rgb(0, 255, 255);
  border-width: 5px; 
}

.mccc-button2 {
  color: rgb(0, 255, 255);
}

.mccc-button2:hover {
  color: rgb(0, 255, 0);
  text-decoration: overline !important;
}

.mccc-button2:focus {
  color: rgb(255, 0, 0);
}

/* General Button Styling */
.player-controls button,
.like-button,
.repost-button,
.download-button,
.comment-button,
.follow-button,
.next-track-button {
    padding: 8px;
    margin-right: 10px;
    background-color: #ff0000;
    color: #fff;
    border: 5px solid rgb(0, 0, 0);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* Smooth transition */
}

/* Hover and Focus Effects */
button:hover,
button:focus,
.like-button:hover,
.repost-button:hover,
.download-button:hover,
.comment-button:hover,
.follow-button:hover,
.like-button:focus,
.repost-button:focus,
.download-button:focus,
.comment-button:focus,
.follow-button:focus,
.next-track-button  {
    background-color: black;
    color: rgb(0, 255, 0);
    border-color: rgb(255, 0, 0); /* Keep border width same */
    outline: none; /* Remove focus outline */
}

.favourite {
  padding: 6px 6px;
  margin: 61px 6px;
  font-size: 31px;
  background-color: black;
  color: rgb(0, 255, 0);
  border: none;
  border-bottom: 6px solid transparent; /* reserve space */
}

.favourite:hover {
  color: yellow;
  border-bottom-color: rgb(0, 255, 0); /* only change color */
}

.favourite:focus {
  color: rgb(255, 255, 0);
  border-bottom-color: rgb(255, 255, 0);
}

.unfavourite {
  padding: 6px 6px;
  margin: 61px 6px;
  font-size: 31px;
  background-color: black;
  color: rgb(255, 255, 0);
  box-shadow: 0 0 9px 3px rgb(255, 255, 0);
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
  border: none;
  border-bottom: 6px solid transparent;
}

.unfavourite:hover {
  color: rgb(255, 0, 0);
  border-bottom-color: red;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

.unfavourite:focus {
  color: rgb(0, 255, 0);
  border-bottom-color: red;
  box-shadow: 0 0 9px 3px rgb(255, 0, 0);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}


.next-track-button {
  float: right;
  font-size: 20px;
  margin: 10px;
  border-color: rgb(0, 255, 0);
  padding: 10px;
}

.next-track-button:hover {
  float: right;
  font-size: 20px;
  margin: 10px;
}

.next-track-button:focus {
  float: right;
  font-size: 20px;
  margin: 10px;
  color: rgb(0, 255, 0);
}

/* Specific states where the button is active (liked, reposted, followed, etc.) */
#liked,
#reposted,
#downloaded,
#followed,
#commented {
    border-color: rgb(0, 255, 0); /* Green border when active */
    background-color: #000000; /* Keep the same background */
    color: rgb(0, 255, 0); /* Keep text color white */
}

span.button-text {
  height: 15px;
}

/* Ensure the green border remains on hover for active states */
.liked:hover,
.reposted:hover,
.downloaded:hover,
.followed:hover,
.commented:hover,
.liked:focus,
.reposted:focus,
.downloaded:focus,
.followed:focus,
.commented:focus {
    border-color: rgb(0, 255, 0);
}

/* For play/pause specific buttons */
.play-button:hover,
.play-button:focus
{
    background-color: black;
    color: rgb(0, 255, 0);
    border-color: rgb(0, 255, 0); /* Ensure border width doesn't change */
}
.pause-button:focus 
.pause-button:hover {
    background-color: black;
    color: rgb(255, 0, 0);
    border-color: rgb(255, 0, 0); /* Ensure border width doesn't change */
}
div.playtime-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0; 
  padding: 0; 
  width: 100%;
  height: 5%; 
}

.playtime1, .playtime2 {
  font-size: 20px; /* Adjust as needed */
  line-height: 1; /* Ensure no extra height is added by line-height */
  font-family: Roboto;
}

div.playtime-container span {
  margin: 0; /* Remove any default margin */
  padding: 0; /* Remove any default padding */
  height: 5%;
}

.playtime {
  color: rgb(0, 255, 0); /* Adjust text color as needed */
}

.playtime1 {
  color: rgb(0, 255, 0); /* Adjust text color as needed */
}

.playtime2 {
  color: rgb(255, 0, 0); /* Adjust text color as needed */
}


/* Seek bar */
.seek-bar {
    flex: 1;
}

#commentPopup {
  height: 160px;
  color: rgb(255, 89, 0);
  background-color: rgb(255, 0, 0);
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */

}

    /* Basic styling for the popup */
    dialog {
      color: rgb(255, 89, 0);
      background-color: black;
      padding: 20px;
      height: 20px;
      width: 863px;
      border: 5px solid black;
      border-radius: 5px;
      box-shadow: 0px 0px 5px rgb(0, 255, 0);
      opacity: 0.75;
  }
  
  textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
      color: rgb(255, 89, 0);
      background-color: rgb(0, 0, 0);
      border: 2px solid rgb(0, 255, 0);
  }

  textarea::placeholder {
    color: rgb(0, 255, 0); /* Change placeholder text color to green */
    opacity: 1; /* Optional: ensure placeholder text is fully opaque */
  }
  
  #commentText {
    color:rgb(0, 255, 0);
    border: 2px solid rgb(0, 255, 0);
  }

  #submitButtonComment {
    background-color: rgb(0, 255, 0);
    color: rgb(0, 0, 0);
    border: 3.5px solid rgb(0, 0, 0);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
  }

  /* Style for Cancel Button */
  button#cancelButton {
      background-color: rgb(0, 0, 0);
      color: rgb(0, 255, 0);
      border: 3.5px solid rgb(0, 255, 0);
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
  }

  .waveform-container{
    width: 100%;
    height: 69px; /* Match this with the height in WaveSurfer options */
    overflow: hidden;
}

.no-pointer {
  pointer-events: none; /* Disable pointer events */
  opacity: 0.5; /* Optional: Make the element look inactive */
}

/* WebKit browsers (Chrome, Safari) */
#volume-{{ track.id }}::-webkit-slider-runnable-track {
  background: rgb(0, 255, 0);
  height: 5px; /* Adjust height if needed */
}

#volume-{{ track.id }}::-webkit-slider-thumb {
  background: rgb(0, 255, 0);
  border: 1px solid #000; /* Optional: Adds a border around the thumb */
  height: 15px; /* Height of the thumb */
  width: 15px; /* Width of the thumb */
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px; /* Centers the thumb on the track */
}

#volume-{{ track.id }}::-moz-range-track {
  background: rgb(0, 255, 0);
  height: 5px; /* Adjust height if needed */
}

#volume-{{ track.id }}::-moz-range-thumb {
  background: rgb(0, 255, 0);
  border: 1px solid #000; /* Optional: Adds a border around the thumb */
  height: 15px; /* Height of the thumb */
  width: 15px; /* Width of the thumb */
  cursor: pointer;
}

#volume-{{ track.id }}::-ms-track {
  background: rgb(0, 255, 0);
  height: 5px; /* Adjust height if needed */
  border-color: transparent; /* Removes the default border */
  color: transparent; /* Removes the default track color */
}

#volume-{{ track.id }}::-ms-thumb {
  background: rgb(0, 255, 0);
  border: 1px solid #000; /* Optional: Adds a border around the thumb */
  height: 15px; /* Height of the thumb */
  width: 15px; /* Width of the thumb */
  cursor: pointer;
}

/* slider */
#volume-1::-webkit-slider-runnable-track {
  background: #00ff00; /* Dark green color */
  height: 5px; /* Adjust height if needed */
}

#volume-1::-webkit-slider-thumb {
  background: #ff0000; /* Darker shade for the thumb */
  border: 1px solid #000; /* Optional: Adds a border around the thumb */
  height: 15px; /* Height of the thumb */
  width: 15px; /* Width of the thumb */
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px; /* Centers the thumb on the track */
}

#volume-1::-moz-range-track {
  background: #00ff00; /* Dark green color */
  height: 5px; /* Adjust height if needed */
}

#volume-1::-moz-range-thumb {
  background: #e40000; /* Darker shade for the thumb */
  border: 1px solid #000; /* Optional: Adds a border around the thumb */
  height: 15px; /* Height of the thumb */
  width: 15px; /* Width of the thumb */
  cursor: pointer;
}

#volume-1::-ms-track {
  background: #00ff00; /* Dark green color */
  height: 5px; /* Adjust height if needed */
  border-color: transparent; /* Removes the default border */
  color: transparent; /* Removes the default track color */
}

#volume-1::-ms-thumb {
  background: #ff0000; /* Darker shade for the thumb */
  border: 1px solid #000; /* Optional: Adds a border around the thumb */
  height: 15px; /* Height of the thumb */
  width: 15px; /* Width of the thumb */
  cursor: pointer;
}

textarea#commentText {
  text-align: center;
}

input[id^="volume-"] {
  background-color: black;
}