/* CSS for sidebar */
   .sidebar {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #f1f1f1;
    overflow-x: hidden;
  }

  .sidebar-draggable-links {
    cursor: grab;
    font-weight: bold;
    font-size: 12px;
  }

  #settings-sidebar {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #f1f1f1;
    overflow-x: hidden;
    padding-top: 20px;
    padding: 0 20px;
    display: none;
  }
  
  /* Style the sidebar links */
  .sidebar h2 {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
  }
  
  /* Style the sidebar links on hover */
  .sidebar a:hover {
    background-color: #ddd;
  }
  
  /* Header style */
  .header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    padding: 0 16px;
  }
  
  /* Typography style */
  .typography {
    padding: 0 16px;
    margin-bottom: 16px;
  }
  
  /* Button style */
  .button {
    margin: 16px;
    padding: 12px 24px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
  }
  
  /* Button style on hover */
  .button:hover {
    background-color: #3e8e41;
  }

  .dropdown-menu {
    display: none; /* Hide the dropdown menu by default */
    position: absolute;
    top: 100%; /* Position the dropdown menu below the parent element */
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .sidebar li {
    
    list-style-type: none;
  }
  .sidebar .dropdown-parent {
    padding: 0;
    margin: 0;
  }
  .dropdown-menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .dropdown-parent {
    position: relative; /* Ensure the parent container is relatively positioned */
}