.book-white:hover {
  box-shadow: 0px 0px 16px var(--bs-light);
}

.book:hover {
  box-shadow: 0px 0px 16px var(--bs-blue);
}

book-white:hover {
  /*box-shadow: 0px 0px 16px var(--bs-blue);*/
}

.book-info:hover {
  box-shadow: 0px 0px 16px var(--bs-teal);
}

.book-orange:hover {
  box-shadow: 0px 0px 16px var(--bs-orange);
}

.book-yellow:hover {
  box-shadow: 0px 0px 16px var(--bs-yellow);
}

#history {
  position: relative;
  flex: 0 0 45%;
  transform: translate3d(-5%, 49%, 0);
}

@media (min-width: 1200px) {
  #minor-p {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(11%, 130%, 0);
  }
}

@media (min-width: 992px) {
  #gospels {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(25%, 225%, 0);
  }
}

@media (min-width: 1200px) {
  #history-acts {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(35%, 53%, 0);
  }
}

@media (max-width: 992px) {
  #history-acts {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(35%, 105%, 0);
  }
}

@media (min-width: 1200px) {
  #epistisles-to-churches {
    position: relative;
    flex: 0 0 100%;
    transform: translate3d(0%, -44%, 0);
    z-index: 110;
  }
}

@media (min-width: 1200px) {
  #general {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(-150%, 24%, 0);
  }
}

@media (min-width: 992px) {
  #general {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(-150%, 96%, 0);
  }
}

@media (min-width: 1200px) {
  #general {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(-150%, 24%, 0);
  }
}

@media (min-width: 1200px) {
  #gospels {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(25%, 123%, 0);
  }
}

#major-p {
  position: relative;
  flex: 0 0 59%;
  transform: translate3d(-70%, 25%, 0);
  z-index: 11;
}

@media (min-width: 768px) {
  #minor-p {
    position: relative;
    flex: 0 0 45%;
    transform: translate3d(104%, 19%, 0);
  }
}

a {
}

.unavailible {
  pointer-events: none;
  /*color: var(--bs-black);*/
  opacity: 0.4;
}

a {
  color: var(--bs-table-color);
}

#law {
  position: relative;
  flex: 0 0 45%;
  transform: translate3d(-15%, 91%, 0);
}

.list-group-item.active:hover {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}
.list-group-item:hover {
  background-color: var(--bs-danger) !important;
  color: var(--bs-white) !important;
}
        .circle-img {
            border-radius: 50%;
            width: 80px;
            height: 80px;
            object-fit: cover;
            filter: grayscale(100%); /* Make the image grayscale initially */
            transition: all 0.3s ease; /* Transition effect for smooth change */
        }

        .circle-img:hover {
            filter: grayscale(0%); /* Full color on hover */
            transform: scale(1.1); /* Slight zoom on hover */
        }
    /*.container {*/

    /*}*/
/*.gradient {*/
/*  background: linear-gradient(180deg, rgba(39, 64, 88, 0.48) 0%, white 100%) !important;*/
/*}*/
        
        main {
            background-color: transparent;
            /*padding-top: calc(env(safe-area-inset-top, 0px) + 20px);*/
            /*padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);*/
        }
        
               /* Custom hover effect */

        
        .article-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.article-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.article-item .article-content {
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg);
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.article-image {
  width: 150px;
  height: 100px;
  object-fit: cover;
}

.article-details {
  padding: 10px;
  overflow: hidden;
}

.article-title {
  font-family: 'Aldrich', sans-serif;
  font-size: 1.25rem;
  color: #333;
  margin: 0 0 5px;
}

.article-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 5px;
}

.article-description {
  font-family: 'Libre Baskerville', serif;
  font-size: 0.9rem;
  color: #555;
}

.article-item.expanded .article-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  overflow: auto;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1060;
}


.card-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.card-item {
  display: flex;
  flex-direction: row;
  background: var(--bs-body-bg);
  border-radius: 0.75rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.card-image {
  width: 150px;
  height: 100px;
  object-fit: cover;
}

.card-content {
  flex-grow: 1;
}

.card-title {
  margin: 0;
}

.card-subtitle {
  margin: 5px 0;
}

.card-date {
  color: #888;
}
.episode-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px; /* Space between badges and episode number */
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.episode-number {
  font-size: 0.7em;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  color: #555;
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
  white-space: nowrap;
}

.live-now-badge {
  background: red;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

.upcoming-badge {
  background: gray;
  color: white;
}

.processing-badge {
  background: var(--bs-secondary);
  color: white;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
}



html, body {
  height: 100%;
  min-height: 100vh; /* Ensure it covers at least the full viewport height */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main-navigation {

 padding-bottom: 20px;  /* Ensure it accounts for the bottom safe area */

}

        .markers-list {
		  /* max-height: calc(3.5 * var(--marker-item-height)); */ /* Set the height based on 3.5 items */
          max-height: 600px;
		  overflow-y: auto; /* Enable vertical scrolling */
          padding: 0;
          list-style-type: none;
        }
        
        .marker-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 5px;
          margin-bottom: 10px;
          background-color: #f9f9f9;
        }
		:root {
		  --marker-item-height: 55px; /* Adjust this based on your design */
		}
        
        .marker-label {
          font-weight: bold;
        }
        
        .marker-time {
          color: #6c757d; /* Muted text */
          font-size: 0.9em;
        }

        .plyr-marker {
          position: absolute;
          height: 100%;
          width: 2px;
          background-color: red;
          cursor: pointer;
        }
        
        .plyr-marker-tooltip {
          position: absolute;
          bottom: 20px; /* Adjust as needed */
          background-color: rgba(0, 0, 0, 0.8);
          color: white;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 12px;
          white-space: nowrap;
          transform: translateX(-50%);
          pointer-events: none;
          display: none;
          z-index: 10;
        }


        .expanded-sidebar {
            width: 450px;
        }

        .mini-sidebar {
            width: 100px;
        }

        .hidden-sidebar {
            display: none;
        }
        @media (max-width: 767.98px) {
            .navbar {
                padding-bottom: calc(env(safe-area-inset-bottom, 0px));
            }
        }
        @media (max-width: 767.98px) {
            .sidenavbar {
                 padding-top: calc(env(safe-area-inset-bottom, 0px) + 20px);
                padding-bottom: calc(env(safe-area-inset-bottom, 0px + 20px));
            }
        }
        /* Full width on mobile */
        @media (max-width: 767.98px) {
            #sidebar {
                width: 100vw;
            }

            .content {
                margin-left: 0;
            }
        }

        .navbar-brand-icon {
            font-size: 1.5rem;
            color: black;
        }

        .sidebar-nav-icon img {
            width: 95%;
            height: auto;
        }

        /* Main content area */
        .content {
            transition: margin-left 0.3s;
        }

        .ml-450px {
            margin-left: 450px;
        }

        .ml-90px {
            margin-left: 90px;
        }
        /* Sidebar Styling */
        @media (min-width: 992px) {
            #sidebar {
                height: 100%;
                position: fixed;
                top: 80px;
                left: 0;
                z-index: 1000;
                transition: width 0.3s, margin-left 0.3s;
                padding: 0.5rem;
            }
        }
        
        @media (max-width: 992px) {
            #sidebar {
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0;
                z-index: 1000;
                transition: width 0.3s, margin-left 0.3s;
                padding: 0.5rem;
            }

        }
        /* Sidebar Styling End*/
        
        @media (min-width: 992px) {
          .clean-navbar {
            position: fixed;
            right: 0;
            top: 0;
            left: 0;
          }
        }
        
        @media (max-width: 992px) {
          .clean-navbar {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
          }
        }
        @media (min-width: 992px) {
        .sidebar-toggle {
            position: fixed;
            top: 100px;
            left: 9px;
            z-index: 1100;
			font-size: 13px;
        }
        }
        
        @media (max-width: 992px) {
          .sidebar-toggle {
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + 10px);;
            left: 9px;
            right: 9px;
            z-index: 1100;
			font-size: 13px;
        }
        }

        /*@media (min-width: 992px) {*/
        /*    main {*/
        /*        margin-top:88px;*/
        /*    }*/
        /*}*/
        header {
            padding-top: 50px;
        }
        @media (min-width: 768px) {
            header {
              padding-top: 150px;
            }
        }

        
[data-bs-theme="dark"] .sidebar-toggle {
  --background-color: rgb(var(--bs-success-rgb));
  --text-color: white;
  --hover-background-color: rgba(var(--bs-success-rgb), 0.8); /* Slightly transparent */
}

[data-bs-theme="light"] .sidebar-toggle {
  --background-color: rgb(var(--bs-success-rgb));
  --text-color: white;
  --hover-background-color: rgba(0, 0, 0, 0.1); /* Light grey hover */
      backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sidebar-toggle {
  background-color: var(--background-color);
  color: var(--text-color);
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-toggle:hover {
  background-color: var(--hover-background-color);
}

    /*html, body {*/
    /*    height: 100vh;*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*}*/
    
    /*#app {*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    flex-grow: 1;*/
    /*}*/

    /*    section.clean-block {*/
    /*        flex: 1;*/
    /*        display: flex;*/
    /*    }*/
        .accordion-button {
        background-color: transparent !important; /* Removes blue background */
        color: inherit; /* Keeps text color consistent */
        box-shadow: none !important; /* Removes Bootstrap's default focus shadow */
    }

    .accordion-button:not(.collapsed) {
        background-color: transparent !important; /* Keeps it transparent when opened */
    }
        /* Change arrow color to Bootstrap's text-success (green) */
    .accordion-button::after {
        filter: brightness(0) saturate(100%) invert(43%) sepia(92%) saturate(391%) hue-rotate(84deg) brightness(90%) contrast(86%);
    }
    .plyr--video {
        border-radius: 10px; 
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }
#nav-img {
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Dark mode: grayscale and white */
[data-bs-theme="dark"] #nav-img {
  filter: grayscale(100%) invert(100%) brightness(100%);
  opacity: 0.9;
}

/* Light mode: normal */
[data-bs-theme="light"] #nav-img {
  filter: none;
  opacity: 1;
}





.navbar-bottom .nav-link.active {
  color: var(--bs-danger) !important;
  font-weight: bold;
}
.topical-sticky-toggle {
  position: sticky;
  z-index: 9999;
  background: var(--bs-body-bg);
  padding: 10px 0;
  top: 70px; /* default for larger screens */
}

@media (max-width: 767.98px) {
  .topical-sticky-toggle {
    top: 0; /* on small screens, stick to top */
  }
}
.episode-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 0.75rem;
}

.episode-image {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

@media (max-width: 767.98px) {
  .episode-card {
    display: flex !important;
    align-items: flex-start;
    gap: 16px;
  }

  .episode-image-wrapper {
    width: 40%;
    padding-top: 0;
    aspect-ratio: 16/9;
    min-width: 120px;
    height: auto;
    flex-shrink: 0;
  }

  .episode-image {
    position: static;
    width: 100%;
    height: auto;
  }
}

.live-badge-glow {
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.7); /* Bootstrap danger color glow */
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%   { box-shadow: 0 0 6px rgba(220, 53, 69, 0.4); }
  50%  { box-shadow: 0 0 16px rgba(220, 53, 69, 0.9); }
  100% { box-shadow: 0 0 6px rgba(220, 53, 69, 0.4); }
}