#remote {
  border-radius: 30px;
}

#remote button span {
  font-size: 80%;
}

.small_icon {
  font-size: 6px;
}
.icon-red {
  color: red;
}
.icon-green {
  color: green;
}
.icon-yellow {
  color: yellow;
}
.icon-blue {
  color: blue;
}

#video-wrapper {
  position: relative;
}

.video-layout {
  display: flex;
}

.video-layout #video-container {
  flex-grow: 1;
}

.video-layout #remote-panel {
  width: 350px;
  margin-left: 1rem;
}

#video-wrapper.fullscreen-active {
  display: flex;
  background-color: black;
}

#video-wrapper.fullscreen-active.cursor-hidden {
  cursor: none;
}

/* Also hide the cursor on the button itself */
#video-wrapper.fullscreen-active.cursor-hidden .fullscreen-button {
  cursor: none;
}

#video-wrapper.fullscreen-active #video-container {
  flex-grow: 1;
}

#video-wrapper.fullscreen-active #remote-panel {
  width: 350px;
  overflow-y: auto;
  background-color: #f8f9fa;
  padding: 1rem;
}

.remote-hidden {
  display: none;
}

#video-container {
  position: relative;
}

.fullscreen-button {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1001;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s;
}

.fullscreen-button.visible {
  opacity: 1;
}

@media (min-width: 992px) {
  /* Large screens and up */
  #video-wrapper.fullscreen-active #remote-panel {
    width: 350px;
    overflow-y: auto;
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    padding: 1rem;
  }

  /* Adjust button colors for dark background */
  #video-wrapper.fullscreen-active #remote-panel .btn-outline-secondary {
    color: #fff;
    border-color: #6c757d;
  }

  #video-wrapper.fullscreen-active #remote-panel .btn-outline-secondary:hover {
    background-color: #6c757d;
  }

  /* Adjust channel input for dark background */
  #video-wrapper.fullscreen-active #remote-panel .form-control {
    background-color: #343a40;
    color: #fff;
    border-color: #6c757d;
  }
}

#quality-display {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 400px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s;
  /* Force this element onto its own rendering layer to ensure it's on top of the video */
  transform: translateZ(0);
  /* Make sure the overlay itself doesn't block clicks to the video */
  pointer-events: none;
}

#quality-display.visible {
  opacity: 1;
}