/* This is the class for the semi-transparent overlay */
.overlay {
  position: fixed; /* Positions it relative to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* White with 80% transparency */
  display: none; /* Initially hidden */
  z-index: 1000; /* Ensures it's on top of other content */
}

/* This is the class for the category that becomes highlighted */
.highlighted-category {
  position: relative; /* Keep it in the normal document flow */
  z-index: 1001; /* Higher z-index than the overlay */
  background-color: white; /* The white box you requested */
  padding: 20px;
  border-radius: 8px; /* Optional: adds a nice rounded corner effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
}

/* Ensure the positioning context is set on every item that holds a nested menu */
.nested-category {
    position: relative;
}

/* Style for all nested menus */
.nested-category .dropend-menu {
    display: none; /* Hidden by default */
    
    position: absolute;
    top: 0;
    left: 100%; /* Position to the right edge of the parent */
    margin-left: 0rem; /* Small gap */
}

/* Show the menu when the 'show' class is added */
.nested-category .dropend-menu.show {
    display: block;
}
body.dark .dropdown-menu,
body.dark .dropend-menu {
    /* Set the background color for the dark mode dropdown */
    background: #060818; 
    
    /* Optional: Adjust the border color to fit the dark theme */
    border-color: #3b4260; 
}
body.dark .dropdown-menu .dropdown-item:hover,
body.dark .dropend-menu .dropdown-item:hover,
body.dark .dropdown-menu .dropdown-item:focus,
body.dark .dropend-menu .dropdown-item:focus {
    background-color: #1a2233; /* Slightly lighter shade for hover */
    color: #ffffff;
}
.category-dropdown-wrapper {
	border-top: 1px solid grey;
	padding: 1em 1em;
	font-size: medium;}
.category-dropdown{
	width: 9.375em;
}