/* Dark mode styling */
 body.dark-mode,
 .container.dark-mode,
 .card.dark-mode,
 footer.dark-mode {
   background-color: #121212 !important;
   color: #ffffff;
 }

 /* Light mode styling */
 body.light-mode,
 .container.light-mode,
 .card.light-mode,
 footer.light-mode {
   background-color: #f8f9fa;
   color: #000000;
 }

.audio-section > img {
  width: 100%;
}

.audio-section > audio {
  width: 100%;
}

 /* Additional card styling */
 .card.dark-mode {
  background-color: #2b2b2b !important;
  border: 1px solid #444;
}

.dark-mode .card {
  background-color: #2b2b2b !important; /* Dark gray background */
  border: 1px solid #444; /* Subtle border to define card edges */
}

 .card.light-mode {
   background-color: #ffffff;
   color: #000000;
   border: 1px solid #ddd;
 }

 /* Dark mode adjustments for button background and color */
.btn-outline-danger,
.btn-outline-secondary,
.btn-outline-success {
  border-color: #555 !important;
}

.btn-outline-danger:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover {
  color: #fff !important;
  background-color: #444 !important;
  border-color: #666 !important;
}

 /* Input field styling for dark mode */
 .dark-mode .form-control,
 .dark-mode .form-select {
   background-color: #333 !important;
   color: #ffffff !important;
   border: 1px solid #555;
 }

 /* Video styling */
 video {
   width: 100% !important;
   height: auto !important;
   max-width: 100%;
 }

 /* Button styling */
 .btn-dark-mode {
   position: absolute;
   top: 20px;
   right: 20px;
 }

 .loading-message {
   color: #ff9900;
   font-weight: bold;
   text-align: center;
 }

 /* Custom styling for video cards */
 .video-card {
   position: relative;
   margin-bottom: 20px;
 }

 .delete-btn {
   position: absolute;
   top: 5px;
   right: 5px;
 }

 /* CSS to limit title to a single line with ellipsis */
 .video-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.5em; /* Adjust as needed for two lines */
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  .vjs-pip-button .fas {
    font-size: 1.2em;
    color: white;
}

.vjs-pip-button:hover .fas {
    color: #ff9900;  /* Hover color */
}

.vjs-pip-button .vjs-control-text {
    display: none;
}

  
.btn-outline-primary .fas {
  color: #007bff;
}

.btn-outline-primary:hover .fas {
  color: #0056b3;
}