main.p-2 {
    background-color: #d1f1ff;
    background-image: 
        radial-gradient(at 0% 0%, rgba(240, 244, 255, 1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, rgba(255, 245, 240, 1) 0, transparent 50%);
    min-height: 100vh;
}



/* Main Content Area */
        .content {
            flex-grow: 1;
            text-align: justify;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            padding: 20px;
            font-size: 9pt;
            margin-right: 15%;
            margin-left: 5%;
            margin-bottom: 5%;
            line-height: 16pt;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            background-color: rgb(241, 240, 243);
            transition: margin-left 0.3s ease-in-out;
            text-indent: 3%;
        }

        #scrollToTopBtn {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          cursor: pointer;
          display: none; /* Hidden by default */
          transition: opacity 0.3s ease-in-out;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
          z-index: 9999;   /* Makes it appear above footer & other elements */
      }


.logo-text{
    background:#0d6efd;
    letter-spacing:10%;
    border-radius:9px;
    padding:5px 5px;
    font-size:0.8em;
}

.toggle-arrow {
    transition: transform 0.2s;
    margin-left: 8px;
        font-size: 1.2rem;
}
.toggle-arrow:not(.collapsed) {
    transform: rotate(180deg);
}

#sidebar-container, 
#mobileSidebar,
#mobile-sidebar-container {
    background: linear-gradient(135deg, #cbfcd9 0%, #f5f5f5 100%) !important;
    border-right: 1px solid #e0e0e0 !important;
}

/* Ensure the mobile header matches the body */
#mobileSidebar .offcanvas-header {
    background: #cbfcd9; 
    border-bottom: 2px solid #9058f7;
}

.footer-heading {
  color: #ffffff;
  margin-bottom: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.footer-links li {
  margin-bottom: 6px;
  
}

.footer-links a {
  color: #8fc7ff;               /* Light gray */
  text-decoration: underline;
  font-size: 0.7rem;
  transition: 0.1s ease;
}

.footer-links a:hover {
  color: #ffffff;               /* White on hover */
  text-decoration: none;
font-style: italic;
font-weight: bold;
}

/* Column 4,5,6 (Depth Navigation) */
.footer-depth-links a {
  color: #8fc7ff;               /* Light gray */
  text-decoration: underline;
      font-size: 0.7rem;
    transition: 0.1s ease;
}

.footer-depth-links a:hover {
    color: #ffffff;
  text-decoration: none;
font-style: italic;
font-weight: bold;
}

:root {
    --sidebar-font-size: 14px;         /* Base font size */
    --sidebar-sub-font-size: 12px;     /* Font size for sub-items */
    --sidebar-row-padding: 2px 4px;    /* Internal space of the highlight box */
    --sidebar-row-margin: 2px 4px;     /* Space between rows */
    --sidebar-indent: 1rem;          /* How far sub-items are pushed right */
    --sidebar-active-bg: #0000eb;      /* Navy Blue */
    --sidebar-hover-bg: #b4cef3;       /* Light Blue */
}

/* 1. Universal Row Styles (Root Pages & Folders) */
[id^="sidebar-nav"] .nav-item .d-flex {
    margin: var(--sidebar-row-margin);
    padding: var(--sidebar-row-padding);
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

/* Hover Effect */
[id^="sidebar-nav"] .nav-item .d-flex:hover {
    background-color: var(--sidebar-hover-bg) !important;
}

/* 2. Text Styling (The Links) */
[id^="sidebar-nav"] .nav-link {
    font-size: var(--sidebar-font-size);
    padding: 0 !important; /* We use the d-flex padding instead */
    margin: 0 !important;
    color: #444;           /* Soft dark text */
}

/* 3. Sub-items Styling (Items inside Folders) */
/* This handles pages inside a collapsed menu */
.collapse .nav-item .nav-link {
    font-size: var(--sidebar-sub-font-size);
    color: #666;
}

/* Indentation for nested levels */
.collapse .nav-item .d-flex, 
.collapse .nav-item .nav-link {
    margin-left: 1%; /* Slight push for the first level */
}

/* 4. Active State (Navy Blue) */
[id^="sidebar-nav"] .nav-link.active {
    background-color: var(--sidebar-active-bg) !important;
    color: #ffffff !important;
    border-radius: 4px;
    padding: 2px 8px !important; /* Slight internal padding for the active "pill" */
}

/* Container sizing and background */
#breadcrumb {
    background-color: #ffcbcb; /* Custom hex color */
    padding: 5px 10px;        /* Vertical and horizontal size */
    border-radius: 8px;        /* Rounded corners */
    font-size: 0.8em;           /* Text size */
    margin-bottom: 20px;       /* Space below the breadcrumb */
}

/* Adjust the links inside */
#breadcrumb .breadcrumb-item a {
    color: #0466fa;            /* Link color */
    text-decoration: underline;     /* Remove underline */
    font-weight: 500;
}

/* Change color of the "Home" icon or active text */
#breadcrumb .breadcrumb-item.active {
    color: #282828;            /* Darker gray for current page */
}

/* Optional: Change the separator (the / or >) */
#breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #000000;            /* Change color of the '/' */
    content: ">";              /* Change '/' to '>' if desired */
}

.image-container {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px; /* Optional: Add some padding around the image */
      }
      
      .imgcontent {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          max-width: 100%; /* Makes sure the image fits inside the container */
          height: auto; /* Maintains the aspect ratio */
      }

.blueheading {
            margin-top: 1%;
             margin-bottom:1%;
             text-align:justify; 
             line-height:150%; 
             box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
             font-size: 10pt; 
             background-color: rgba(15, 15, 56, 0.8); 
             text-decoration: underline;
             padding: 5px;
             text-align: center; 
             color: rgb(255, 255, 255);
             font-weight: bold;
            }
          
            .yellowheading {
              background-color: rgb(6, 172, 116); 
              font-style: italic;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              font-weight: bold;
              text-decoration: underline;
              padding: 4px;
              font-size: 9pt;
              text-align:justify;
              }
             .subheading {
              background-color: rgb(207, 74, 74); 
              color: #fff;
              font-style: italic;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              text-align: center;
              font-size: 9pt;
              text-decoration: underline;
              padding: 4px;
              font-weight: bold;    
             } 
             .question {
              background-color: rgb(205, 196, 228); 
              color: #000000;
              font-style: italic;
              text-align: justify;
              font-size: 9pt;
              border-radius: 8px;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              padding: 4px;
              line-height: 150%;
              margin: 2%;
             }
             .blackheading {
              background-color: rgb(161, 243, 106); 
              color: #000000;
              font-style: italic;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              font-size: 9pt;
              text-decoration: underline;
              padding: 8px;
              border-radius: 10px;
              margin-left: 4%;
              font-weight: bold;
              text-align:justify;    
             }

             .answer {
              background-color: rgb(255, 255, 255); 
              color: #000000;
              text-align: justify;
              font-size: 8pt;
              border: 2px solid #000000;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              padding: 4px;    
              line-height: 150%;
             }

             .que 
             {
              background-color: rgba(250, 235, 215); 
              padding: 1%;
              text-align: justify;
              font-size: 9pt;
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
              padding: 4px;   
              line-height: 150%;
              text-indent: 3%;
             }

              .paraheading 
              {
                padding-top: 1%;
                padding-bottom: 1%;
                font-style: italic;
                text-decoration: underline;
                font-weight: bold;
                font-size: 9pt;
               }

               table, th, td 
               {
                 border: 3px solid rgb(255, 255, 255);
                 border-collapse: collapse;
               }
           
               table 
               {
                 width: 100%;
                 box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
                 text-align: center;
               }
           
               .anstable
               {
                border-collapse: collapse;
                border: 2px solid rgb(0, 0, 0);
               }

               .anstable th 
               {
                border: 2px solid rgb(0, 0, 0);
               }

               .anstable td 
               {
                border: 2px solid rgb(0, 0, 0);
               }

               .main th 
               {
                 background-color: brown;
                 color: aliceblue;
                 font-weight: bold;
               }
           
               .main td 
               {
                 background-color:skyblue;
                 color: black;
                 font-weight: bold;
               }
           
               .chapter th 
               {
                 background-color: rgb(18, 10, 29);
                 color: aliceblue;
                 font-weight: bold;
               }
           
               .chapter td 
               {
                 background-color:rgb(160, 201, 218);
                 color: black;
                 font-weight: bold;
               }
               
               .items th 
               {
                 background-color: rgb(14, 7, 58);
                 color: aliceblue;
                 font-weight: bold;
               }
           
               .items td 
               {
                 background-color:rgb(160, 201, 218);
                 color: rgb(31, 13, 63);
                 font-weight: bold;
               }


.ledger { 
    border-collapse: collapse; 
    width: 100%; 
    margin-bottom: 2%; 
    border: solid 1px rgb(0, 0, 0); 
    
}

.ledger th
{
border: 1px solid rgb(0, 0, 0);
  padding: 0.5%; 
  text-align: left; 
}
.ledger td { 
  border-right: 1px solid rgb(0, 0, 0);
  border-left: 1px solid rgb(0, 0, 0);
    border-bottom: 0px solid rgb(0, 0, 0);
  border-top: 0px solid rgb(0, 0, 0);
  padding: 0.25%; 
  vertical-align: top;
  text-align: left; 
}

.journal { 
    border-collapse: collapse; 
    width: 100%; 
    margin-bottom: 2%; 
    border: solid 1px rgb(0, 0, 0); 
    
}

.journal th
{
border: 1px solid rgb(0, 0, 0);
  padding: 0.5%; 
  text-align: left; 
  text-align: center;
}
.journal td { 
  border-right: 1px solid rgb(0, 0, 0);
  border-left: 1px solid rgb(0, 0, 0);
    border-bottom: 0px solid rgb(0, 0, 0);
  border-top: 0px solid rgb(0, 0, 0);
  padding: 0.5%; 
  vertical-align: top;
  text-align: left; 
}

.bigtable 
               {
                border-collapse: collapse;
                border: 1px solid rgb(0, 0, 0);
               }

               .bigtable th 
               {
                border: 1px solid rgb(0, 0, 0);
               }

               .bigtable td 
               {
                  border-right: 1px solid rgb(0, 0, 0);
  border-left: 1px solid rgb(0, 0, 0);
    border-bottom: 0px solid rgb(0, 0, 0);
  border-top: 0px solid rgb(0, 0, 0);
  
               }

               .link-table-wrapper {
  background: #ffffff;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.link-table-heading {
  font-weight: 600;
  font-size: 1.3em;
  margin-bottom: 15px;
  border-left: 4px solid #0d6efd;
  padding-left: 10px;
}

.link-table {
  margin-bottom: 0;
}

.link-table td {
  vertical-align: middle;
  text-align: center;
  padding: 0;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
}

.link-table-cell a {
  display: block;
  padding: 1%;
  text-decoration: none;
  
  font-weight: 500;
  color: #212529;
  transition: all 0.2s ease;
}

.link-table-cell:hover {
  background-color: #cfe6fd;
}

.link-table-cell:hover a {
  color: #0d6efd;
}

.active-cell {
  background-color: #e7f1ff;
}

.active-cell a {
  color: #000000;
  background-color: #8fc7ff;
  font-weight: 600;
}


               @media screen and (max-width: 768px) 
{
  body {
  padding-top: 60px; /* adjust based on height */
}

.link-table-cell a {
    font-size: 1.1em;
    padding: 4%;
  }

    .bigtable
    {
        font-size: 7px;
    }
               .bigtable th 
               {
                padding: 0.25%;
                margin: 0.25%;
               }

               .bigtable td 
               {
padding: 0.25%;
                margin: 0.25%;
               }

     .journal 
     {
font-size: 8.5px;
     }          
          .ledger 
     {
font-size: 8.5px;
     }

    .yellowheading, .paraheading, .blackheading, .question, .que, .answer {
    font-size: 6.75pt;
    padding: 1%;
    line-height: 130%;
    text-align: justify;
    margin: 2%;
  }

  .blackheading {margin-left: 4%;}
  .blueheading, .subheading {
    font-size: 7pt;
    padding: 1%;
    line-height: 100%;
    text-align: center;
    margin: 2%;
  }

  .main, .chapter, .items {
    font-size: 6.5pt;
  }

  .content {
            flex-grow: 1;
            text-align: justify;
            width: 100%;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            padding: 20px;
                margin-left: 1%;
    margin-right: 1%;
            font-size: 7pt;
            line-height: 16pt;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            background-color: rgb(241, 240, 243);
            transition: margin-left 0.3s ease-in-out;
            text-indent: 3%;
        }



        /* Container sizing and background */
#breadcrumb {
    padding: 5px 5px;        /* Vertical and horizontal size */
    font-size: 0.6em;           /* Text size */
    margin-bottom: 10px;       /* Space below the breadcrumb */
}

}

@media (min-width: 768px) {
    #sidebar-container {
        position: sticky;
        top: 0; 
        height: 100vh; /* Full viewport height */
        overflow-y: auto; /* Adds the separate scroller */
        padding-bottom: 2rem; /* Extra space at the bottom */
    }

    /* Optional: Make the scrollbar look cleaner */
    #sidebar-container::-webkit-scrollbar {
        width: 4px;
    }
    #sidebar-container::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 10px;
    }
}

@media screen and (max-width: 500px) 
{

    .content {
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 14%;
    font-size: 6.75pt;
    line-height: 140%;
    padding: 10px;
    text-align: justify;
  }


      .bigtable
    {
        font-size: 5.75px;
    }
               .bigtable th 
               {
                padding: 0.1%;
                margin: 0.1%;
                font-size: 5.75px;
               }

               .bigtable td 
               {
padding: 0.1%;
                margin: 0.1%;
                font-size: 5.75px;
               }

     .journal 
     {
font-size: 7.5px;
     }          
          .ledger 
     {
font-size: 7.5px;
     }

    }

@media print {
  .content {
            width: 100%;
            margin: 1%;
  }

  .sidebar-container {
            display: none;
  }

}