/* ✅ Content area scrolling fix */
#content {
    overflow-y: auto !important;
    max-height: calc(100vh - 48px) !important;
}
 
 

/* ✅ START: Chapter Navigation Styling */
.chapter-navigation {
    display: flex;
    justify-content: space-between;
    margin: 20px;
    gap: 20px;
}

.chapter-nav-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    border: 1px solid #e0d9cb;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    text-align: left;
    width: 48%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.chapter-nav-btn:hover {
    border-color: #3498db;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.chapter-nav-btn.next {
    justify-content: flex-end;
    text-align: right;
}

.chapter-nav-btn .nav-text {
    display: flex;
    flex-direction: column;
}

.chapter-nav-btn small {
    font-size: 12px;
    color: #777;
}

.chapter-nav-btn .nav-text span {
    font-weight: bold;
    color: #333;
    font-size: 15px;
}

.chapter-nav-btn .arrow {
    font-size: 24px;
    color: #3498db;
}
/* ✅ END: Chapter Navigation Styling */

 
/* ...existing code... */

/* ✅ FIXED: Ensure tab content is scrollable when it overflows */
.tabBody.uk-active {
    /* This calculates the height based on the viewport, minus the header/other elements.
       You may need to adjust the 180px value to match your layout perfectly. */
    height: calc(100vh - 150px); 
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile devices */
}
/* ...existing code... */

/* ✅ FIXED: Reliable Sticky Menu Header CSS */



/* ✅ NEW: Library Menu Level-specific styling */
#libraryMenuRoot .level-1 > label {
    background-color: #f0f4f8; /* Level 1: Book Title */
    border-left: 4px solid #1e88e5;
    font-weight: bold;
}

#libraryMenuRoot .level-2 > label {
    background-color: #f1f8e9; /* Level 2: Volume/Chapter */
    padding-left: 28px !important;
    border-left: 4px solid #43a047;
}

#libraryMenuRoot .level-3 > label {
    background-color: #fff8e1; /* Level 3: Section */
    padding-left: 42px !important;
    border-left: 4px solid #fdd835;
}

#libraryMenuRoot .level-4 > label {
    background-color: #fbe9e7; /* Level 4: Sub-section */
    padding-left: 56px !important;
    border-left: 4px solid #ff8a65;
}

/* ✅ NEW: Level-specific icons */
#libraryMenuRoot .level-1 > label.calif::before {
    content: '📚'; /* Book Icon */
    margin-right: 8px;
}
#libraryMenuRoot .level-2 > label.calif::before {
    content: '📖'; /* Open Book Icon */
}
#libraryMenuRoot .level-3 > label.calif::before {
    content: '📄'; /* Page Icon */
}

 
 
 /* =================================================================== */
/* ✅ START: NEW LIBRARY MENU V3 STYLES                             */
/* =================================================================== */
#v2-library-menu { list-style: none; padding: 0; margin: 0; font-family: 'Kalpurush', sans-serif; }
#v2-library-menu ul { list-style: none; padding-left: 15px; border-left: 1px solid #e0e0e0; }
#v2-library-menu li { margin: 2px 0; }
#v2-library-menu input[type="checkbox"] { display: none; }
#v2-library-menu label { display: block; padding: 8px 12px; cursor: pointer; transition: all 0.2s ease; border-radius: 4px; }
#v2-library-menu label:hover { background-color: #f0f0f0; }
#v2-library-menu input:checked + label + ul { display: block; }
#v2-library-menu input:not(:checked) + label + ul { display: none; }
#v2-library-menu label.has-children::before { content: '📁'; margin-right: 8px; font-size: 14px; }
#v2-library-menu label.has-content::before { content: '📄'; margin-right: 8px; }
#v2-library-menu li.act_item > label { background-color: #e3f2fd !important; border-left-color: #2196f3 !important; font-weight: bold; }
#v2-library-menu .sticky-header { position: -webkit-sticky; position: sticky; top: 0; background-color: #fff; z-index: 2; }

 

#sidebar_main .menu_section>ul>li.submenu_trigger li ul
 {
    margin-left: 4px;
}

#sidebar_main .menu_section>ul>li.submenu_trigger li ul {
    margin-left: 5px;
}


/* স্তর অনুযায়ী ভিন্ন ভিন্ন রঙ */
#v2-library-menu .level-1 > label { background-color: #f5f5f5; border-left: 4px solid #757575; }
#v2-library-menu .level-2 > label { background-color: #fafafa; border-left: 4px solid #9e9e9e; }
#v2-library-menu .level-3 > label { background-color: #ffffff; border-left: 4px solid #bdbdbd; }
#v2-library-menu .level-4 > label { background-color: #ffffff; border-left: 4px solid #e0e0e0; }
#v2-library-menu .level-1 > label:hover { background-color: #e0e0e0; }
#v2-library-menu .level-2 > label:hover { background-color: #f0f0f0; }
#v2-library-menu .level-3 > label:hover { background-color: #f5f5f5; }

.v2-loader-container { text-align: center; padding: 20px; }
.v2-loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 30px; height: 30px; animation: v2-spin 1s linear infinite; display: inline-block; }
@keyframes v2-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 @keyframes v2-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

 
 /* ✅ ULTIMATE FIX: স্টিকি হেডার সমস্যার চূড়ান্ত সমাধান */

  

/* সব menu item এর জন্য stacking context reset */
#v2-library-menu li {
    position: relative;
    z-index: auto;
}

/* চাইল্ড ul গুলোর জন্য নিম্ন z-index */
#v2-library-menu ul {
    position: relative;
    z-index: 1;
}

/* স্টিকি label এর জন্য সর্বোচ্চ z-index */
#v2-library-menu label.is-sticky {
    position: sticky !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    /* z-index জাভাস্ক্রিপ্ট থেকে সেট হবে */
}

/* চাইল্ড আইটেমগুলোকে স্টিকি হেডারের নিচে রাখা */
#v2-library-menu label.is-sticky + ul {
    z-index: 1 !important;
}

/* Dark mode support */
body.dark-mode #v2-library-menu label.is-sticky {
    background: #2c3e50 !important;
    border-bottom-color: #34495e !important;
    color: #ecf0f1 !important;
}

/* ✅ ULTIMATE STICKY HEADER SYSTEM */

/* মেনু কন্টেইনারের জন্য */
 

/* সব menu item এর জন্য */
#v2-library-menu li {
    position: relative;
    z-index: auto;
}

/* চাইল্ড ul গুলোর জন্য নিম্ন z-index */
#v2-library-menu ul {
    position: relative;
    z-index: 1;
}

/* স্টিকি হেডার বেস স্টাইল */
#v2-library-menu label.sticky-header {
    display: block;
    padding: 8px 10px;
    margin: 0;
    transition: all 0.2s ease;
}

/* স্টিকি অবস্থায় */
#v2-library-menu label.sticky-header.is-sticky {
    position: sticky !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    width: 100% !important;
    margin: 0 !important;
    /* z-index এবং top JavaScript থেকে সেট হবে */
}

/* চাইল্ড আইটেমগুলোকে স্টিকি হেডারের নিচে রাখা */
#v2-library-menu label.is-sticky + ul {
    position: relative;
    z-index: 1 !important;
}

/* Dark mode support */
body.dark-mode #v2-library-menu label.sticky-header.is-sticky {
    background: #2c3e50 !important;
    border-bottom-color: #34495e !important;
    color: #ecf0f1 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #v2-library-menu label.sticky-header.is-sticky {
        padding: 6px 8px;
        font-size: 14px;
    }

    #library-book-view .breadcrumb-text {
    font-size: 12px;
  
}
}


 /* ✅ ULTIMATE STICKY HEADER FIX - Final Version */

 /* =============================================== */
/* ✅ WORKING STICKY HEADER - সঠিক সমাধান */
/* =============================================== */

/* মেনু কন্টেইনার সেটআপ */


/* সব menu item এর জন্য বেস স্টাইল */
#v2-library-menu li {
    position: relative;
    z-index: auto;
}

/* চাইল্ড ul গুলোর জন্য নিম্ন z-index */
#v2-library-menu ul {
    position: relative;
    z-index: 1;
}

/* স্টিকি হেডার বেস স্টাইল */
#v2-library-menu label.sticky-header {
    display: block;
    padding: 8px 10px;
    margin: 0;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* ✅ FIXED: স্টিকি অবস্থায় - JavaScript এর জন্য প্রস্তুত */
#v2-library-menu label.sticky-header.is-sticky {
    position: sticky !important;
    background: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    /* ✅ গুরুত্বপূর্ণ: CSS থেকে top দেওয়া হচ্ছে না, JavaScript থেকে আসবে */
}

/* Dark mode support */
body.dark-mode #v2-library-menu label.sticky-header.is-sticky {
    background: #2c3e50 !important;
    border-bottom-color: #34495e !important;
    color: #ecf0f1 !important;
}

/* Hover effect */
#v2-library-menu label.sticky-header.is-sticky:hover {
    background: #e9ecef !important;
}

body.dark-mode #v2-library-menu label.sticky-header.is-sticky:hover {
    background: #34495e !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #v2-library-menu label.sticky-header.is-sticky {
        padding: 6px 8px !important;
        font-size: 14px !important;
    }
}

/* =============================================== */
/* ✅ MANUAL LEVEL-WISE STICKY HEADERS - CSS ONLY */
/* =============================================== */

/* মেনু কন্টেইনার সেটআপ */
 
/* সাধারণ label স্টাইল */
#v2-library-menu label.sticky-header {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0;
    position: relative;
}

/* ✅ LEVEL 1 STICKY HEADERS */
#v2-library-menu .level-1 > label.sticky-header {
    position: sticky !important;
    top: 0px !important;
    z-index: 1010 !important;
    border-bottom: 1px solid #8cc5ff !important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 19%) !important;
    width: 100% !important;
    margin: 5px 0px !important;
    padding: 7px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 19px !important;
    background-image: linear-gradient(261deg, #e5f3f9 0%, #f5d7ff 100%);
}

/* ✅ LEVEL 2 STICKY HEADERS */
#v2-library-menu .level-2 > label.sticky-header {
    position: sticky !important;
    top: 40px !important;
    z-index: 1009 !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10) !important;
    width: 100% !important;
    margin: 3px 0px !important;
    padding: 10px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background-color: linear-gradient(261deg, #e5f3f9 0%, #f5d7ff 100%);
    background-image: linear-gradient(261deg, #f9ede5 0%, #ddffd7 100%);
}

/* ✅ LEVEL 3 STICKY HEADERS */
#v2-library-menu .level-3 > label.sticky-header {
    position: sticky !important;
    top: 80px !important;
    z-index: 1008 !important;
    border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    margin: 3px 0px !important;
    padding: 10px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background-color: #d6edff;
}

/* ✅ LEVEL 4 STICKY HEADERS */
#v2-library-menu .level-4 > label.sticky-header {
    position: sticky !important;
    top: 120px !important;
    z-index: 1007 !important;
     border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    margin: 3px 0 !important;
    padding: 9px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background-color: #fffcfc;
}

/* ✅ LEVEL 5 STICKY HEADERS */
#v2-library-menu .level-5 > label.sticky-header {
    position: sticky !important;
    top: 160px !important;
    z-index: 1006 !important;
     border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 8px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
}

/* ✅ LEVEL 6 STICKY HEADERS */
#v2-library-menu .level-6 > label.sticky-header {
    position: sticky !important;
    top: 200px !important;
    z-index: 1005 !important;
     border-bottom: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
}

/* ✅ আরও লেভেল যদি প্রয়োজন হয় (Level 7-10) */
#v2-library-menu .level-7 > label.sticky-header {
    position: sticky !important;
    top: 240px !important;
    z-index: 1004 !important;
    background: #f8f9fa !important;
}

#v2-library-menu .level-8 > label.sticky-header {
    position: sticky !important;
    top: 280px !important;
    z-index: 1003 !important;
    background: #e9ecef !important;
}

#v2-library-menu .level-9 > label.sticky-header {
    position: sticky !important;
    top: 320px !important;
    z-index: 1002 !important;
    background: #f1f3f4 !important;
}

#v2-library-menu .level-10 > label.sticky-header {
    position: sticky !important;
    top: 360px !important;
    z-index: 1001 !important;
    background: #f8f9fa !important;
}

/* ✅ Dark Mode Support */
body.dark-mode #v2-library-menu .level-1 > label.sticky-header,
body.dark-mode #v2-library-menu .level-3 > label.sticky-header,
body.dark-mode #v2-library-menu .level-5 > label.sticky-header {
    background: #2c3e50 !important;
    color: #ecf0f1 !important;
    border-bottom-color: #34495e !important;
}

body.dark-mode #v2-library-menu .level-2 > label.sticky-header,
body.dark-mode #v2-library-menu .level-4 > label.sticky-header,
body.dark-mode #v2-library-menu .level-6 > label.sticky-header {
    background: #34495e !important;
    color: #ecf0f1 !important;
    border-bottom-color: #2c3e50 !important;
}

 

/* Dark mode hover */
body.dark-mode #v2-library-menu label.sticky-header:hover {
    background: #445a75 !important;
}

/* ✅ Mobile Responsive */
@media (max-width: 768px) {
    #v2-library-menu .level-1 > label.sticky-header,
    #v2-library-menu .level-2 > label.sticky-header,
    #v2-library-menu .level-3 > label.sticky-header,
    #v2-library-menu .level-4 > label.sticky-header,
    #v2-library-menu .level-5 > label.sticky-header,
    #v2-library-menu .level-6 > label.sticky-header {
        padding: 8px 8px !important;
        font-size: 14px !important;
    }

     #v2-library-menu .level-1 > label.sticky-header {
        padding: 10px 8px !important;
        font-size: 14px !important;
    }
    
    /* Mobile এ কম height */
    #v2-library-menu .level-2 > label.sticky-header { top: 35px !important; }
    #v2-library-menu .level-3 > label.sticky-header { top: 70px !important; }
    #v2-library-menu .level-4 > label.sticky-header { top: 105px !important; }
    #v2-library-menu .level-5 > label.sticky-header { top: 140px !important; }
    #v2-library-menu .level-6 > label.sticky-header { top: 175px !important; }
}


/* ✅ Responsive Design */
@media (max-width: 768px) {
#library-book-view .md-card {
     
    padding: 0px 2px 20px 2px;
    margin: 20px 8px;
}

#library-book-view {
    padding: 0px;
}

}

/* =============================================== */
/* ✅ END MANUAL LEVEL-WISE STICKY HEADERS */
/* =============================================== */


/* =================================================================== */
/* ✅ ENHANCED: Level-wise Library Menu Colors & Folders             */
/* =================================================================== */

/* ✅ LEVEL 1: Main Categories (Books/Collections) - Deep Blue */
#v2-library-menu .level-1 > label {
     color: #070707ff !important;
    font-weight: bold !important;
    border-left: 5px solid #b983ff !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
}

 

#v2-library-menu .level-1 > label:hover
 {
    background: linear-gradient(135deg, #89ffe0, #64adff) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
}

/* ✅ LEVEL 2: Volumes/Parts - Green */
#v2-library-menu .level-2 > label {
     color: #070707ff !important;
    font-weight: 600 !important;
    border-left: 5px solid #2e7d32 !important;
    padding: 10px 20px !important;
    padding-left: 35px !important;
    font-size: 15px !important;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.3) !important;
    margin-left: 10px !important;
}

 

#v2-library-menu .level-2 > label:hover {
     transform: translateX(2px) !important;
     background: linear-gradient(135deg, #89ffe0, #64adff) !important;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4) !important;
}

/* ✅ LEVEL 3: Chapters - Orange */
#v2-library-menu .level-3 > label {
     color: #000000ff !important;
    font-weight: 500 !important;
    border-left: 4px solid #ef6c00 !important;
    padding: 9px 25px !important;
    padding-left: 50px !important;
    font-size: 14px !important;
    box-shadow: 0 2px 5px rgba(255, 152, 0, 0.3) !important;
    margin-left: 20px !important;
}

 

#v2-library-menu .level-3 > label:hover {
    background: linear-gradient(135deg, #89ffe0, #64adff) !important;
    transform: translateX(2px) !important;
    box-shadow: 0 3px 8px rgba(255, 152, 0, 0.4) !important;
}

/* ✅ LEVEL 4: Sub-chapters - Red */
#v2-library-menu .level-4 > label {
     color: #000000ff !important;
    font-weight: 500 !important;
    border-left: 4px solid #c62828 !important;
    padding: 8px 30px !important;
    padding-left: 65px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.3) !important;
    margin-left: 30px !important;
}

 

#v2-library-menu .level-4 > label:hover {
    background: linear-gradient(135deg, #d32f2f, #c62828) !important;
    transform: translateX(1px) !important;
    box-shadow: 0 2px 6px rgba(244, 67, 54, 0.4) !important;
}

/* ✅ LEVEL 5: Sub-sections - Purple */
#v2-library-menu .level-5 > label {

    color: #000000ff !important;
    font-weight: 400 !important;
    border-left: 3px solid #6a1b9a !important;
    padding: 7px 35px !important;
    padding-left: 80px !important;
    font-size: 12px !important;
    box-shadow: 0 1px 3px rgba(156, 39, 176, 0.3) !important;
    margin-left: 40px !important;
}

 

#v2-library-menu .level-5 > label:hover {
    background: linear-gradient(135deg, #7b1fa2, #6a1b9a) !important;
    transform: translateX(1px) !important;
    box-shadow: 0 2px 5px rgba(156, 39, 176, 0.4) !important;
}

/* ✅ LEVEL 6: Details - Teal */
#v2-library-menu .level-6 > label {
    color: #080808ff !important;
    font-weight: 400 !important;
    border-left: 3px solid #00695c !important;
    padding: 6px 40px !important;
    padding-left: 95px !important;
    font-size: 11px !important;
    box-shadow: 0 1px 2px rgba(0, 150, 136, 0.3) !important;
    margin-left: 50px !important;
}

 

#v2-library-menu .level-6 > label:hover {
    background: linear-gradient(135deg, #00796b, #00695c) !important;
    box-shadow: 0 2px 4px rgba(0, 150, 136, 0.4) !important;
}

/* ✅ CONTENT ITEMS: Final level with content - Gradient */
#v2-library-menu label.has-content {
    color: #050505ff !important;
    font-weight: normal !important;
    border-left: 4px solid #4527a0 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
}

 

#v2-library-menu label.has-content:hover {
    background: linear-gradient(135deg, #e1f7c3ff, #7aebffff) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 15px rgba(103, 58, 183, 0.5) !important;
}

/* ✅ ACTIVE ITEM: Currently selected */
#v2-library-menu li.act_item > label {
   background: linear-gradient(135deg, #ffa6a6, #77fff9) !important;
    color: #070707ff !important;
    border-left-color: #bf360c !important;
    font-weight: bold !important;
    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.6) !important;
    transform: scale(1.05) !important;
    border-radius: 8px !important;
}

/* ✅ FOLDER CONTAINERS: Styling for ul elements */
#v2-library-menu .level-1 + ul {
    border-left: 3px solid #2196f3 !important;
    margin-left: 15px !important;
    padding-left: 10px !important;
    background: rgba(33, 150, 243, 0.05) !important;
}

#v2-library-menu .level-2 + ul {
    border-left: 3px solid #4caf50 !important;
    margin-left: 20px !important;
    padding-left: 8px !important;
    background: rgba(76, 175, 80, 0.05) !important;
}

#v2-library-menu .level-3 + ul {
    border-left: 2px solid #ff9800 !important;
    margin-left: 25px !important;
    padding-left: 6px !important;
    background: rgba(255, 152, 0, 0.05) !important;
}

#v2-library-menu .level-4 + ul {
    border-left: 2px solid #f44336 !important;
    margin-left: 30px !important;
    padding-left: 4px !important;
    background: rgba(244, 67, 54, 0.05) !important;
}

#v2-library-menu .level-5 + ul {
    border-left: 1px solid #9c27b0 !important;
    margin-left: 35px !important;
    padding-left: 3px !important;
    background: rgba(156, 39, 176, 0.05) !important;
}

 

/* ✅ RESPONSIVE: Mobile optimization */
@media (max-width: 768px) {
    #v2-library-menu .level-1 > label,
    #v2-library-menu .level-2 > label,
    #v2-library-menu .level-3 > label,
    #v2-library-menu .level-4 > label,
    #v2-library-menu .level-5 > label,
    #v2-library-menu .level-6 > label {
        padding: 8px 12px !important;
        font-size: 14px !important;
        margin-left: 5px !important;
    }
    
    #v2-library-menu .level-2 > label { padding-left: 25px !important; }
    #v2-library-menu .level-3 > label { padding-left: 35px !important; }
    #v2-library-menu .level-4 > label { padding-left: 45px !important; }
    #v2-library-menu .level-5 > label { padding-left: 55px !important; }
    #v2-library-menu .level-6 > label { padding-left: 65px !important; }
}

/* ✅ ANIMATION: Smooth transitions */
#v2-library-menu label {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#v2-library-menu label:hover {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ✅ LOADING STATE */
#v2-library-menu .v2-loader-wrapper {
    text-align: center !important;
    padding: 30px !important;
    background: linear-gradient(135deg, #f5f5f5, #eeeeee) !important;
    border-radius: 8px !important;
    margin: 10px !important;
}

#v2-library-menu .v2-loader {
    border: 4px solid #f3f3f3 !important;
    border-top: 4px solid #2196f3 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    animation: v2-spin 1s linear infinite !important;
}

@keyframes v2-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* ...existing code... */

/* Level-wise closed book icons and colors */
#v2-library-menu .level-1 > label.has-children::before { content: '📚 '; color: #1976d2; font-size: 19px; }
#v2-library-menu .level-2 > label.has-children::before { content: '📗'; color: #388e3c; }
#v2-library-menu .level-3 > label.has-children::before { content: '📙'; color: #f57c00; }
#v2-library-menu .level-4 > label.has-children::before { content: '📕'; color: #d32f2f; }
#v2-library-menu .level-5 > label.has-children::before { content: '📔'; color: #7b1fa2; }
#v2-library-menu .level-6 > label.has-children::before { content: '📒'; color: #009688; }

/* Level-wise open book icons when expanded */
#v2-library-menu li.level-1.expanded > label.has-children::before { content: '📖'; color: #1976d2; }
#v2-library-menu li.level-2.expanded > label.has-children::before { content: '📖'; color: #388e3c; }
#v2-library-menu li.level-3.expanded > label.has-children::before { content: '📖'; color: #f57c00; }
#v2-library-menu li.level-4.expanded > label.has-children::before { content: '📖'; color: #d32f2f; }
#v2-library-menu li.level-5.expanded > label.has-children::before { content: '📖'; color: #7b1fa2; }
#v2-library-menu li.level-6.expanded > label.has-children::before { content: '📖'; color: #009688; }

/* Content leaf node: page icon */
#v2-library-menu label.has-content::before { content: '📄'; color: #512da8; }

/* Example: active item highlight */
#v2-library-menu li.act_item > label { box-shadow: 0 0 8px #ff9800; }

/* ...existing code... */


#loadrequlist {
    height: 79vh;
}

.suranameCaliHolder-suraName13 {
    font-size: 16px !important;
    margin-top: -3px;
}

@media (max-width: 768px) {
#header_main {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

body {
    padding-top: 36px;
}

}


.library-chapter-title {
    font-size: large;
    text-align: center;
    font-weight: 600;
    font-style: italic;
    content: '📄';
    color: #512da8;
}