	<style>
	  h1 {
	    text-align: left;
	  }

	  <style>.sidebar {
	    box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2) !important;
	    /* Right side shadow */
	  }

	  /* Optional: Add custom margin or padding for the content */
	  .toggle-panel {
	    padding: 20px;
	    background-color: #f8f9fa;
	    border: 1px solid #ccc;
	    margin-top: 10px;
	  }

	  /* CSS to make navbar-toggler float at top-right corner */
	  .navbar-toggler {
	    position: fixed;
	    /* Fixes the button's position */
	    top: 10px;
	    /* Adjust top margin as needed */
	    right: 20px;
	    /* Adjust right margin as needed */
	    padding: 20px;
	    z-index: 9999;
	    /* Ensures the button is always on top of other elements */
	  }

	  #btn-back-to-top {
	    position: fixed;
	    bottom: 100px;
	    right: 20px;
	    display: block;

	    z-index: 9999;
	    /* Ensure it's on top of other content */
	  }

  #btn-page {
	   position: fixed;
	    /* Fixes the button's position */
	    top: 100px;
	    /* Adjust top margin as needed */
	    right: 20px;
	    /* Adjust right margin as needed */
	    z-index: 9999;
	    /* Ensures the button is always on top of other elements */
	  }

  
 #btn-course {
	   position: fixed;
	    /* Fixes the button's position */
	    top: 160px;
	    /* Adjust top margin as needed */
	    right: 20px;
	    /* Adjust right margin as needed */
	    z-index: 9999;
	    /* Ensures the button is always on top of other elements */
	  }

 #btn-embededu {
	   position: fixed;
	    /* Fixes the button's position */
	    top: 220px;
	    /* Adjust top margin as needed */
	    right: 20px;
	    /* Adjust right margin as needed */
	    z-index: 9999;
	    /* Ensures the button is always on top of other elements */
	  }



	  #btn-back-to-bot {
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	    display: none;

	    z-index: 9999;
	    /* Ensure it's on top of other content */
	  }

	  #btn-m-link {
	    position: fixed;
	    bottom: 180px;
	    right: 20px;
	    display: none;
	    z-index: 9999;
	    /* Ensure it's on top of other content */
	  }

	  /* Remove inherited button styles and reset the accordion button */
	  .accordion .accordion-button {
	    background-color: transparent !important;
	    /* Remove background */
	    color: inherit !important;
	    /* Inherit text color */
	    border: none !important;
	    /* Remove border */
	    padding: 0.375rem 1.25rem !important;
	    /* Ensure proper padding */
	    box-shadow: none !important;
	    /* Remove shadow */
	    font-weight: normal !important;
	    /* Reset to normal font weight */
	  }

	  /* Inactive (collapsed) tab styling */
	  .accordion .accordion-button.collapsed {
	    background-color: #f8f9fa !important;
	    /* Light grey for inactive */
	    color: #6c757d !important;
	    /* Grey text */
	    border-color: #ccc !important;
	    /* Lighter border */
	    font-weight: normal !important;
	    /* Normal weight */
	  }

	  /* Active (expanded) tab styling */
	  .accordion .accordion-button:not(.collapsed) {
	    background-color: #f56a6a !important;
	    /* Blue background for active */
	    color: white !important;
	    /* White text */
	    border-color: #007bff !important;
	    /* Blue border */
	    font-weight: bold !important;
	    /* Bold text */
	  }

	  /* This CSS will allow you to provide some custom styles for dragging */
	  [draggable] {
	    user-select: none;
	  }

	  tr {
	    cursor: move;
	    transition: background-color 0.3s;
	  }

	  td {
	    padding: 10px;
	    border: 1px solid #ddd;
	  }

	  td:hover {
	    background-color: #f1f1f1;
	  }

	  tr.dragging td {
	    background-color: #e0e0e0;
	  }

	  .btn-primary {
	    color: #f56a6a;
	    /* Orange text */
	    background-color: #ffffff;
	    /* White background */
	    border: 2px solid #f56a6a;
	    /* Orange border */
	  }

	  .btn-primary:hover {
	    color: #f56a6a;
	    /* White text when hovered */
	    background-color: #ECECEC;
	    /* Orange background on hover */
	    border-color: #f56a6a;
	    /* Maintain orange border on hover */
	  }

	  .btn-primary:focus,
	  .btn-primary.focus {
	    box-shadow: 0 0 0 0.2rem rgba(245, 106, 106, 0.5);
	    /* Optional: a focus shadow for accessibility */
	  }



    /* Styling for the pills */
    .nav-pills {
        margin-bottom: 0 !important; /* Remove bottom margin of the pills */
        border-radius: 8px 8px 0 0; /* Round the top corners */
        padding: 0; /* Remove any padding inside the pill container */
        display: flex; /* Ensure pills are displayed in a row */
    }

    .nav-pills .nav-link {
        border-radius: 0 !important; /* Remove border-radius for individual pills */
        padding: 10px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-bottom: 0; /* Remove bottom margin for the pills */
        border: 1px solid transparent; /* Default transparent border */
        color: #000000; /* Set the tab text color to black */
    }

    .nav-pills .nav-link.active {
        background-color: #FAFAFA;
        color: #000000; /* Set the active tab text color to black */
        border-color: #D4D4D4; /* Border color for the active tab */
        border-bottom: 2px solid #FAFAFA; /* Make the active tab border flush with the content */
    }

    /* Hover effect for the pills */
    .nav-pills .nav-link:hover {
        background-color: #DEDEDE;
        color: #000000; /* Set the text color on hover to black */
        border-color: #0056b3;
    }

    /* Styling for the tab content panels */
    .tab-content {
        padding: 10px;
        border: 1px solid #ddd; /* Border for the tab content */
        background-color: #FAFAFA;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-top: -1px; /* Remove the gap between pills and content */
        width: 100%; /* Ensure the content takes up full width */
        transition: all 0.3s ease;
    }

    /* Active tab content panel */
    .tab-pane.show {
        background-color: #FAFAFA;
    }

    /* Remove margin and padding from individual tab panels */
    .tab-pane {
        padding-top: 0; /* Remove any padding at the top of the panel */
    }

    .btn-smaller {
  font-size: 0.8rem;   /* Decrease font size */
  width: 1.rem;       /* Set a smaller width */
  height: 1.rem;      /* Set a smaller height */
  padding: 0.1rem;    /* Adjust padding for better fit */
}

    /* Add responsiveness if needed */
    @media (max-width: 768px) {
        .nav-pills {
            flex-direction: column;
        }
    }



ul ul {
  margin-left: 30px; /* Indent bullet + text together */
  padding-left: 0;   /* Optional: reset default padding */
  margin-top: 10px;  /* Controls space before the nested <ul> */

}

/* Make sidebar scrollable only on large screens */
@media screen and (min-width: 1281px) {
    #sidebar > .inner {
        position: fixed;      /* stick to viewport */
        height: 100vh;        /* full viewport height */
        overflow-y: auto;     /* enable vertical scrolling */
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    
}

.btn-edit-page {
    position: fixed;
    top: 10px; /* adjust to float below the menu button */
    right: 90px; /* same as other buttons */
	    /* Adjust right margin as needed */
	    padding: 20px;
	    z-index: 9999;
	    /* Ensures the button is always on top of other elements */}





</style>

