/* CSS for the sticky player */

/* Sticky player */
.sticky-player {
  position: fixed;
  bottom: 0;
  /* left: 20px;  Adjusted to 20px left margin
  width: calc(100% - 40px); /* Adjusted to accommodate the left margin */
  width:100%;
  max-width: 460px;
  background: rgb(255, 255, 255);
  background: linear-gradient(300deg, rgba(240, 240, 240, 1) 0%, rgba(245, 245, 245, 1) 100%);
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 0 0 2px;
}

#audio-player-placeholder {
  display: flex;
  flex-direction: row;
}

/* Styles for the player */

#player-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.3s ease;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.5); /* Dark background */
}

#player-section:hover #player-container,
#player-container.show {
  opacity: 1;
  visibility: visible;
}

#play-pause-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 25px; /* Larger triangle */
  border-color: transparent transparent transparent white;
}

#player-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  visibility: hidden;
  height: 100%;
  width: 100%;
}
#player-section:hover #player-container,
#player-container.show {
  opacity: 1;
  visibility: visible;
}
#play-pause-btn {
  width: 100%;
  height: 100%;
  border: none;
  color: white;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  position: relative;
  background-color: transparent;
}
#play-pause-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #CCC;
}
#play-pause-btn.pause::before {
  content: '';
  width: 10px;
  height: 40px;
  background-color: #ccc;
  box-shadow: 15px 0 0 #ccc;
  border: none;
  left: 120px;
  transition: opacity .2s;
}

#volume-control {
  width: 80%;
  margin-top: 10px;
  display: block;
  margin: 10px auto;
  bottom: 6px;
  left: 25px;
  position: absolute;
}

/* 'Listen Live' Text */
.listen-live {
  color: #555;
  margin-left: 10px;
}

#audio-player-placeholder {
  display: flex;
  flex-direction: row;
  padding-top: 6px;
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Align 'Listen Live' to the right */
}

.radioco-playButton-paused::before,
.radioco-playButton-paused::after {
  background-color: transparent; /* Set color to black */
}

/* 'Listen Live' Text */
.listen-live {
  color: #555; /* Set color to white */
  margin-left: 10px; /* Add left margin for spacing */
}


/* Add padding to the body to prevent content from being hidden behind the player */
body {
  padding-bottom: 60px; /* Adjust as needed based on player height */
}

  .radioco-image, .radioco-bg {
			display: none;
		}

    .player-text-container {
      padding-top: 0px;
      width: 80%;
      overflow: hidden;

      white-space: nowrap;
  }
  
  .player-text {
      white-space: nowrap;
  }
  
  p.player-text {
      color: #555;
      margin-bottom: 0px;
      white-space: nowrap; /* Prevent text wrapping */
      display: inline-block; /* Ensure it behaves as an inline block for correct width handling */
    }

.player-show-title {
  background: transparent;
  font-size: 0.9em;
}

.player-show-name {
  font-size: 1em;
  font-weight: 600;
}

/* Arrange .radioplayer and .radioco-information in a row */
#audio-player {
  display: flex;
  align-items: center; /* Center items vertically */
}

.radioplayer {
  margin-right: 10px; /* Add margin between .radioplayer and .radioco-information */
}

.player-text {
  display: flex;
  align-items: center; /* Center items vertically */
}

/* Play Button */
.radioco-playButton {
    width: 60px; /* Adjust width as needed */
    height: 60px; /* Adjust height as needed */
    position: relative;
    cursor: pointer;
}

.playing .radioplayer {
  display: flex;
  align-items: center;
}

.radioco-information {
  margin-left: 10px; /* Adjust margin as needed */
}

.radioco-information {
  display: none;
  flex-direction: column;
}

.radioco-playButton-playing {
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 0 16px 32px; /* Adjust size of the triangle */
    border-color: transparent transparent transparent #555; /* Set color to black */
}

/* Pause Button */

.radioco-playButton-paused::before,
.radioco-playButton-paused::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 30px;
    background-color: #555;
    margin-top: -20px;
}

.radioco-playButton-paused::before {
    left: 32%; /* Adjust position of the first line */
}

.radioco-playButton-paused::after {
    right: 25%; /* Adjust position of the second line */
}


.radioco-playButton-paused {
    position: absolute;
    top: 60%;
    left: 52%;
    transform: translate(-50%, -50%);
    width: 60px;
    background-color: transparent;
    /* border-radius: 3px; */
}

		#audio-player {
   			text-align: left; /* Center the content inside audio-player div */
		}

		.radioco-image, .radioco-bg {
			display: none;
		}


		#playerbox {
  display: flex;
  align-items: center;
}

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

.radioplayer {
  margin-right: 10px; /* Adjust as needed */
}

.now-playing-row {
  display: flex;
  align-items: center;
  font-size: 24px;
  padding-bottom: 6px;
}

.now-playing-label {
  margin-right: 5px; /* Adjust as needed */
}

        /* Logo styles */
        #logo {
            text-align: center;
            margin: 20px 0;
            z-index: 0; /* Ensure the logo is behind #wrapper */
        }

        #logo img {
            max-width: 60%;
            height: auto;
        }

  /* General styles for the range input */
#volume-control {
  -webkit-appearance: none; /* Override default appearance */
  width: 80%; /* Adjust the width as needed */
  height: 8px; /* Adjust the height as needed */
  background: #ccc; /* Background color of the track */
  border-radius: 0; /* No border-radius */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency */
  transition: opacity .2s;
}

#volume-control:hover {
  opacity: 1; /* Full opacity on hover */
}

/* Styling the thumb/handle */
#volume-control::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default appearance */
  appearance: none;
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  border-radius: 50%; /* Circular thumb */
  background: #fff; /* Color of the thumb */
  cursor: pointer; /* Cursor style on hover */
}

#volume-control::-moz-range-thumb {
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  border-radius: 50%; /* Circular thumb */
  background: #fff; /* Color of the thumb */
  cursor: pointer; /* Cursor style on hover */
}

/* Styling the track in Firefox */
#volume-control::-moz-range-track {
  background: #ccc; /* Background color of the track */
  border-radius: 0; /* No border-radius */
}

/* Styling the thumb/handle for IE */
#volume-control::-ms-thumb {
  width: 20px; /* Width of the thumb */
  height: 20px; /* Height of the thumb */
  border-radius: 50%; /* Circular thumb */
  background: #4CAF50; /* Color of the thumb */
  cursor: pointer; /* Cursor style on hover */
}

/* Styling the track for IE */
#volume-control::-ms-track {
  width: 100%;
  height: 8px;
  background: transparent; /* Transparent track */
  border-color: transparent; /* Transparent border */
  color: transparent; /* Transparent color */
}

#volume-control::-ms-fill-lower {
  background: #ccc; /* Background color of the lower track */
  border-radius: 0; /* No border-radius */
}

#volume-control::-ms-fill-upper {
  background: #ccc; /* Background color of the upper track */
  border-radius: 0; /* No border-radius */
}