body {
            font-family: Arial, sans-serif;
            display: flex;
            margin: 0;
            background-color: #c2e0ff;
        }

        /* Sidebar Styling */
        .sidebar-container {
            width: 20%;
            background-color: #20721d; 
            color: white;
            position: fixed;
            display: flex;
            flex-direction: column;
            align-items: justify;
            height: 100%; /* Full-height sidebar */
            top: 0;
            left: 0;
            bottom: 0;
            overflow-y: auto;
            transition: transform 0.3s ease-in-out;
            z-index: 1000;
        }

        .sidebar-active {
          transform: translateX(0) !important;
      }

      .overlay {
        display: none; /* Initially hidden */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Behind sidebar but above content */
    }
    
    .overlay-active {
        display: block; /* Show overlay when sidebar is open */
    }

        .social-icons {
            display: flex; 
            justify-content: center; 
            margin-bottom: 0%; 
            padding: 4%; 
            background-color: rgb(168, 143, 131);

        }

        .social-icons a {
            margin: 3%;
            width: 30px;
            display: flex;
            flex-direction: column;
            height: auto; 
            
        }

        #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);
      }

        .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 */
      }

      .menu-icon {
        display: none; /* Hidden on larger screens */
        position: fixed;
        top: 20px;
        left: 0px;
        width: 30px; /* Adjust size as needed */
        height: 40px;
        cursor: pointer;
        z-index: 1100; /* Above sidebar */
        background: white;
        border-radius: 0%;
        padding: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

        .menu-item {
            margin-bottom: 2%;
        }

        .menu-item > .title {
            display: block;
            margin: 1%;
            padding: 2%;
            text-decoration: none;
            font-size: 10pt;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            color: white;
            background-color: #0e5eb3; /* Medium blue */
            cursor: pointer;
        }

        .menu-item > .title:hover {
            background-color: #3399ff; /* Lighter blue */
        }

        
        .menu-item .dropdown {
            display: block; /* Hidden by default */
            margin: 5px;
            font-size: 10pt;
            padding: 2%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            border-left: 2px solid #58a9fa; /* Line to indicate hierarchy */
        }

        .menu-item .dropdown a {
            display: block;
            padding: 8px;
            text-decoration: none;
            color: white;
            border-radius: 3px;
            background-color: #3399ff; /* Lighter blue for submenus */
            margin-bottom: 5px;
        }

        .menu-item .dropdown a:hover {
            background-color: #1a75d1; /* Slightly darker shade */
        }

        /* Main Content Area */
        .content {
            flex-grow: 1;
            width: 60%;
            margin-left: 25%;
            margin-right: 15%;
            margin-top: 3%;
            margin-bottom: 5%;
            text-align: justify;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            padding: 20px;
            font-size: 9pt;
            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%;
        }

        .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);
  
               }




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

      .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;
     }

  .sidebar-container {
    width: 50%;
    font-size: 6.5pt;
    transform: translateX(-100%);
  }

  #sidebar-toggle {
    position: fixed;
    top: 0px; /* Adjust position as needed */
    left: 0px; /* Adjust position as needed */
    z-index: 1050; /* Make sure it stays on top of the sidebar */
    cursor: pointer;
    transition: transform 0.3s ease-in-out; /* Smooth sliding of the button */
}

  .menu-icon {
    display: block;
}

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

  .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;
  }

  .menu-item, .menu-item > .title, .menu-item .dropdown, .menu-item .dropdown a {
    margin: 1%;
    padding: 2%;
    }

    .social-icons {
        margin-bottom: 0%; 
        padding: 4%; 
        
    }

    .social-icons a {
        margin: 3%;
        width: 15px;
        height: auto; 
        
    }

}

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

      .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;
  }

}