/* ============================================
   iSAMS Theme for Parents Booking
   Color scheme: White, Navy Blue, and Pink (#ce415c)
   ============================================ */

/* ========== SIDEBAR STYLING ========== */
/* Left sidebar background - iSAMS dark gray (#3f404e) */
div.a,
#header div.a,
.header div.a,
div.a.a {
  background-color: #3f404e !important; /* iSAMS dark gray */
}

div.d,
#header div.d,
.header div.d {
  background-color: #3f404e !important; /* iSAMS dark gray */
}

/* ========== HEADER STYLING ========== */
/* Top header bar - iSAMS dark gray matching sidebar */
#hedr {
  background-color: #3f404e !important; /* iSAMS dark gray */
  color: #ffffff !important; /* White text for all header content */
}

.b-c-hdiv {
  background-color: #3f404e !important; /* iSAMS dark gray */
}

/* Header text elements - white for readability */
#hedr .scnholder,
#hedr .admnnameholder,
#hedr .sn,
#hedr .sntxt {
  color: #ffffff !important; /* White text for school name and username */
}

/* Header right side elements - white text */
#hedr .ln-lt,
#hedr .ln-lt > div,
#hedr .lan,
#hedr .lout {
  color: #ffffff !important; /* White text for Back to Superadmin, Language, Logout */
}

/* Log Out link - white by default, pink on hover */
#hedr .lout:hover,
.lout:hover {
  color: #ce415c !important; /* Pink on hover */
  transition: color 0.2s ease !important;
}

/* Header icons - white (excluding school and language icons) */
#hedr svg,
#hedr .louticon {
  filter: brightness(0) invert(1) !important; /* Make icons white */
  opacity: 0.95 !important;
}

/* School icon - keep original colors */
#hedr .schoolicon,
.schoolicon,
.snimg img {
  filter: none !important; /* Keep original colors */
  opacity: 1 !important;
}

/* Language icon - keep original colors */
#hedr .lanicon,
.lanicon {
  filter: none !important; /* Keep original colors */
  opacity: 1 !important;
}

/* Parents Booking logo in top right corner - keep original colors */
#hedr .ico,
#hedr img.ico,
.ln-lt .ico,
.ln-lt img.ico {
  filter: none !important; /* Keep original colors */
  opacity: 1 !important;
}

/* Header separator */
#hedr .sep {
  background-color: rgba(255, 255, 255, 0.3) !important; /* Light white separator */
}

/* ========== MENU ITEMS ========== */
/* Menu list items background - slightly darker than sidebar for contrast */
.list-h ul li {
  background-color: #353642 !important; /* Slightly darker gray for menu items */
  font-weight: 600 !important; /* Increased font weight for better visibility */
  letter-spacing: 0.3px !important; /* Slight letter spacing for clarity */
}

/* Active/Hover menu items - pink with enhanced visibility */
.list-h ul li:hover,
.list-h ul li.active {
  background: #ce415c !important; /* Pink for active/hover - override gradient */
  background-color: #ce415c !important; /* Pink for active/hover */
  background-image: none !important; /* Remove any gradient */
  color: #ffffff !important; /* White text on pink background */
  font-weight: 700 !important; /* Bolder font weight on hover/active for emphasis */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Active menu item indicator - enhanced pink bar on left */
.list-h ul li.active {
  position: relative;
  font-weight: 700 !important; /* Bolder font for active item */
}

.list-h ul li.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px !important; /* Increased width from 4px to 5px for better visibility */
  background-color: #ce415c !important;
  box-shadow: 0 0 3px rgba(206, 65, 92, 0.5) !important; /* Subtle glow for visibility */
}

/* ========== FOOTER ========== */
.footer {
  background-color: #3f404e !important; /* iSAMS dark gray to match sidebar */
}

/* ========== BUTTONS ========== */
/* Primary buttons - #395ea3 with white text */
.c1e {
  background-color: #395ea3 !important; /* Button blue */
  color: #ffffff !important; /* White text */
  border: 0px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.c1e:hover,
.c1e:active {
  background-color: #2d4a7a !important; /* Slightly darker blue on hover */
  color: #ffffff !important; /* White text */
}

/* Links inside buttons - ensure white text on hover for Notification Centre buttons */
.c1e a,
.c1e > a,
button.c1e a,
button.c1e > a {
  color: #ffffff !important; /* White text for links inside buttons */
  text-decoration: none !important;
}

.c1e:hover a,
.c1e:active a,
.c1e:hover > a,
.c1e:active > a,
button.c1e:hover a,
button.c1e:active a,
button.c1e:hover > a,
button.c1e:active > a {
  color: #ffffff !important; /* White text on hover - ensures readability */
}

/* Text-light class inside buttons should remain white */
.c1e .text-light,
button.c1e .text-light {
  color: #ffffff !important;
}

.c1e:hover .text-light,
.c1e:active .text-light,
button.c1e:hover .text-light,
button.c1e:active .text-light {
  color: #ffffff !important; /* White text on hover for Notification Centre buttons */
}

/* Notification Centre specific button hover - darker blue background with white text */
.b1 .c1e:hover,
.b1 button.c1e:hover,
#hid .c1e:hover,
#hid button.c1e:hover {
  background-color: #2d4a7a !important; /* Darker blue background on hover for Notification Centre */
  color: #ffffff !important; /* White text */
}

.b1 .c1e:hover a,
.b1 .c1e:hover > a,
.b1 button.c1e:hover a,
.b1 button.c1e:hover > a,
#hid .c1e:hover a,
#hid .c1e:hover > a,
#hid button.c1e:hover a,
#hid button.c1e:hover > a {
  color: #ffffff !important; /* White text on hover - ensures accessibility */
}

.b1 .c1e:hover .text-light,
.b1 button.c1e:hover .text-light,
#hid .c1e:hover .text-light,
#hid button.c1e:hover .text-light {
  color: #ffffff !important; /* White text on hover for Notification Centre buttons */
}

/* Action buttons - #395ea3 with white text */
.a-btn,
.a-btn2 {
  background-color: #395ea3 !important; /* Button blue */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.a-btn:hover,
.a-btn:active,
.a-btn2:hover,
.a-btn2:active {
  background-color: #2d4a7a !important; /* Slightly darker blue on hover */
  color: #ffffff !important;
}

/* ========== ACCENT COLORS ========== */
/* Pink divider between header and main content area */
.divline {
  background-color: #ce415c !important; /* Pink */
}

/* Section titles - pink */
.ic2f1 {
  background-color: #ce415c !important; /* Pink for section titles */
  color: #ffffff !important; /* White text */
}

/* Pink for sidebar headers and category sections */
.ic2f2 {
  background-color: #ce415c !important; /* Pink for headers */
}

/* ========== PROGRESS BARS ========== */
/* Progress bar - pink */
.percentage-progress {
  background-color: #ce415c !important; /* Pink */
}

/* Progress bar container border */
.percentage-div {
  border: 2px solid #1a3a5f !important; /* Navy blue border */
  background-color: #f5f5f5 !important; /* Light gray/white background */
}

/* ========== ALERT BORDERS ========== */
.alert-border {
  border: 3px solid #ce415c !important; /* Pink */
}

/* ========== PAGINATION ========== */
.page-item.active .page-link {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
  color: #ffffff !important;
}

.black-line {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
}

/* ========== RADIO BUTTONS ========== */
.table input[type="radio"]:checked,
[name="block"]:checked {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
  border: 2px solid #5ac1d2 !important; /* iSAMS medium blue border */
}

/* ========== BACKGROUND COLORS ========== */
/* Main content area - white */
body {
  background-color: #ffffff !important; /* White background */
}

/* Content boxes - white */
div.b1,
div.b2,
div#c {
  background-color: #ffffff !important; /* White for content boxes */
}

.bg-gray {
  background-color: #f5f5f5 !important; /* Very light gray (almost white) */
}

/* ========== SEPARATOR LINES ========== */
.sep {
  background-color: #e0e0e0 !important; /* Light gray separator */
}

.uline {
  background-color: #e0e0e0 !important; /* Light gray underline */
}

.sline {
  background-color: #e0e0e0 !important; /* Light gray separator line */
}

/* ========== TEXT COLORS ========== */
/* Main text - dark/black for readability */
body,
div.b1,
div.b2 {
  color: #000000 !important; /* Black text */
}

/* Links - navy blue */
a {
  color: #1a3a5f !important; /* Navy blue for links */
}

a:hover {
  color: #ce415c !important; /* Pink on hover */
}

/* ========== FORM ELEMENTS ========== */
/* Input fields */
[type="text"],
input,
textarea,
select {
  background-color: #ffffff !important;
  border: 1px solid #5ac1d2 !important; /* iSAMS medium blue border */
  color: #000000 !important;
}

[type="text"]:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #5ac1d2 !important; /* iSAMS medium blue on focus */
  box-shadow: 0 0 0 0.2rem rgba(90, 193, 210, 0.25) !important;
  outline: none !important;
}

select {
  border: 2px solid #5ac1d2 !important; /* iSAMS medium blue border */
}

select:focus {
  border-color: #5ac1d2 !important; /* iSAMS medium blue on focus */
}

/* ========== TABLE STYLING ========== */
/* Table headers - light gray/white background */
th {
  background-color: #f5f5f5 !important; /* Very light gray for table headers */
  color: #000000 !important; /* Black text */
  border: 1px solid #e0e0e0 !important;
}

/* Table cells */
td {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #e0e0e0 !important;
}

/* ========== MODAL STYLING ========== */
.parent-details-modal .c1e {
  background-color: #395ea3 !important; /* Button blue - consistent with primary buttons */
  color: #ffffff !important;
}

.parent-details-modal .c1e:hover,
.parent-details-modal .c1e:active {
  background-color: #2d4a7a !important; /* Slightly darker blue on hover */
  color: #ffffff !important;
}

/* ========== DELETE BUTTON ========== */
.delete {
  background-color: #395ea3 !important; /* Button blue - consistent with other buttons */
  color: #ffffff !important;
}

.delete:hover {
  background-color: #2d4a7a !important; /* Darker blue for delete hover */
  color: #ffffff !important;
}

/* ========== DROPDOWN MENUS ========== */
.second-drop ol,
.third-drop ol,
.forth-drop ol,
.form-div-4 ol {
  background: #ffffff !important;
  border: 1px solid #1a3a5f !important; /* Navy blue border */
  box-shadow: 0 2px 8px rgba(26, 58, 95, 0.2) !important;
}

.second-drop ol li a:hover,
.third-drop ol li a:hover,
.forth-drop ol li a:hover,
.form-div-4 ol li a:hover {
  background-color: #f5f5f5 !important; /* Light gray hover */
  color: #1a3a5f !important; /* Navy blue text */
}

/* ========== ACCORDION ========== */
.accordion-button:not(.collapsed) {
  background-color: #f5f5f5 !important; /* Very light gray */
  color: #1a3a5f !important; /* Navy blue text */
  box-shadow: inset 0 -1px 0 rgba(206, 65, 92, 0.3) !important;
}

.accordion-button {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* ========== ACTIVE TAB STYLING ========== */
/* Pink underline for active tabs */
.active-tab,
.tab-active {
  border-bottom: 3px solid #ce415c !important; /* Pink */
  color: #ffffff !important;
}

/* ========== RESPONSIVE STYLING (Tablet & Mobile) ========== */
/* Tablet and below - maintain all color changes */
@media (max-width: 1000px) {
  div.a {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray on tablet */
  }
  
  .exp {
    background-color: #3f404e !important; /* iSAMS dark gray for mobile menu */
  }
  
  /* Ensure hover states work on touch devices */
  .list-h ul li:hover,
  .list-h ul li.active {
    background-color: #ce415c !important;
    color: #ffffff !important;
    font-weight: 700 !important; /* Maintain bold font on hover/active */
  }
  
  .list-h ul li {
    font-weight: 600 !important; /* Maintain increased font weight on tablet */
  }
  
  .list-h ul li.active::before {
    width: 5px !important; /* Maintain wider active indicator on tablet */
  }
  
  .c1e:hover,
  .c1e:active {
    background-color: #2d4a7a !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
  }
}

/* Mobile devices - maintain all color changes */
@media (max-width: 700px) {
  div.a {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray on mobile */
  }
  
  .exp {
    background-color: #3f404e !important; /* iSAMS dark gray for mobile menu */
  }
  
  #hedr {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray header */
    color: #ffffff !important;
  }
  
  .b-c-hdiv {
    background-color: #3f404e !important; /* Maintain iSAMS dark gray header */
  }
  
  /* Ensure header text remains white on mobile */
  #hedr .scnholder,
  #hedr .admnnameholder,
  #hedr .ln-lt,
  #hedr .lan,
  #hedr .lout {
    color: #ffffff !important;
  }
  
  /* Log Out link hover on mobile */
  #hedr .lout:hover,
  .lout:hover {
    color: #ce415c !important; /* Pink on hover */
  }
  
  /* Help button on mobile */
  .c1e.help:hover,
  .help.c1e:hover,
  div.c1e.help:hover,
  button.c1e.help:hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  /* Book Live Training button on mobile */
  .c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  div.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  button.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  .d-flex.justify-content-between > .c1e:first-child:not(.help):hover,
  .d-flex > .c1e:first-child:not(.help):hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  .divline {
    background-color: #ce415c !important; /* Maintain pink divider */
  }
  
  /* Ensure all button hover states work */
  .a-btn:hover,
  .a-btn:active,
  .a-btn2:hover,
  .a-btn2:active {
    background-color: #2d4a7a !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  /* Maintain all color changes on small screens */
  div.a,
  div.d,
  .footer {
    background-color: #3f404e !important; /* iSAMS dark gray */
  }
  
  #hedr,
  .b-c-hdiv {
    background-color: #3f404e !important; /* iSAMS dark gray */
    color: #ffffff !important;
  }
  
  /* Ensure header text remains white on small screens */
  #hedr .scnholder,
  #hedr .admnnameholder,
  #hedr .ln-lt,
  #hedr .lan,
  #hedr .lout {
    color: #ffffff !important;
  }
  
  /* Log Out link hover on small screens */
  #hedr .lout:hover,
  .lout:hover {
    color: #ce415c !important; /* Pink on hover */
  }
  
  /* Help button on small screens */
  .c1e.help:hover,
  .help.c1e:hover,
  div.c1e.help:hover,
  button.c1e.help:hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  /* Book Live Training button on small screens */
  .c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  div.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  button.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
  .d-flex.justify-content-between > .c1e:first-child:not(.help):hover,
  .d-flex > .c1e:first-child:not(.help):hover {
    background-color: #3f404e !important; /* Dark gray on hover */
  }
  
  .divline {
    background-color: #ce415c !important;
  }
  
  .list-h ul li {
    background-color: #353642 !important; /* Slightly darker gray for menu items */
    font-weight: 600 !important; /* Maintain increased font weight on small screens */
  }
  
  .list-h ul li:hover,
  .list-h ul li.active {
    background-color: #ce415c !important;
    color: #ffffff !important;
    font-weight: 700 !important; /* Maintain bold font on hover/active */
  }
  
  .list-h ul li.active::before {
    width: 5px !important; /* Maintain wider active indicator on small screens */
  }
  
  .c1e {
    background-color: #395ea3 !important; /* Button blue */
  }
  
  .c1e:hover,
  .c1e:active {
    background-color: #2d4a7a !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
  }
}

/* ========== ADDITIONAL STYLING ========== */
/* Ensure white text on dark sidebar backgrounds */
div.a,
div.d,
.footer,
.list-h ul li {
  color: #ffffff !important; /* White text for readability on dark background */
}

/* Active menu item text color - enhanced visibility */
.list-h ul li.active a,
.list-h ul li:hover a {
  color: #ffffff !important; /* White text on pink background */
  font-weight: 700 !important; /* Bolder font weight for active/hover items */
}

/* Icon colors - white on dark sidebar background */
div.a img,
div.a svg {
  filter: brightness(0) invert(1); /* Make icons white on dark sidebar for visibility */
  opacity: 0.95; /* Slight opacity for better visibility */
}

/* ========== ENHANCED HOVER STATES ========== */
/* Enhanced roll-over states for all interactive elements */
button:hover {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Additional button hover states */
button.c1e:hover,
button.a-btn:hover,
button.a-btn2:hover {
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Dropdown item hover states */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5f5f5 !important;
  color: #1a3a5f !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Override any gradient backgrounds with pink */
.hov-active {
  background: #ce415c !important; /* Pink - override gradient */
  background-color: #ce415c !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* ========== FOCUS STATES ========== */
/* Focus rings in pink */
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #ce415c !important;
  outline-offset: 2px !important;
}

/* ========== NAVIGATION MENU LINKS ========== */
.list-h ul li a {
  color: #ffffff !important; /* White text on dark sidebar */
  text-decoration: none !important;
  font-weight: 600 !important; /* Increased font weight for better contrast */
}

.list-h ul li.active a,
.list-h ul li:hover a {
  color: #ffffff !important; /* White text when active/hovered */
  font-weight: 700 !important; /* Bolder font weight for active/hover items */
}

/* ========== BANNER/ALERT STYLING ========== */
/* Pink banner for alerts */
#red-banner {
  background-color: #ce415c !important; /* Pink */
  color: #ffffff !important;
}

/* ========== CHECKBOXES ========== */
[type="checkbox"] {
  border: 2px solid #5ac1d2 !important; /* iSAMS medium blue */
}

[type="checkbox"]:checked {
  background-color: #5ac1d2 !important; /* iSAMS medium blue - consistent with buttons */
  border-color: #5ac1d2 !important;
}

/* ========== SEARCH INPUTS ========== */
.form-input {
  border: 1px solid #5ac1d2 !important; /* iSAMS medium blue */
  background-color: #ffffff !important;
}

.form-input:focus {
  border-color: #5ac1d2 !important; /* iSAMS medium blue on focus */
  box-shadow: 0 0 0 0.2rem rgba(90, 193, 210, 0.25) !important;
}

/* ========== DROPDOWN ITEMS ========== */
.dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #1a3a5f !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f5f5f5 !important;
  color: #1a3a5f !important;
}

/* ========== BADGES AND LABELS ========== */
.badge,
.label {
  background-color: #ce415c !important;
  color: #ffffff !important;
}

/* ========== CARD STYLING ========== */
.card {
  background-color: #ffffff !important;
  border: 1px solid #1a3a5f !important;
}

.card-header {
  background-color: #f5f5f5 !important;
  border-bottom: 1px solid #1a3a5f !important;
  color: #000000 !important;
}

/* ========== SUBJECT SELECTION STYLING ========== */
/* Subject names/chips - white by default */
.subject-item,
.subject-name,
.subject-chip,
.subject-tag,
[class*="subject"] {
  color: #ffffff !important;
  background-color: transparent !important;
  padding: 5px 10px !important;
  margin: 3px !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  border: 1px solid transparent !important;
}

/* Selected subject - pink */
.subject-item.selected,
.subject-name.selected,
.subject-chip.selected,
.subject-tag.selected,
[class*="subject"].selected {
  color: #ce415c !important;
  background-color: transparent !important;
}

/* Hover state for non-selected subjects - pink */
.subject-item:hover:not(.selected),
.subject-name:hover:not(.selected),
.subject-chip:hover:not(.selected),
.subject-tag:hover:not(.selected),
[class*="subject"]:hover:not(.selected) {
  color: #ce415c !important;
  transition: color 0.2s ease !important;
}

/* Subject pills/badges styling */
.subject-pill {
  display: inline-block !important;
  padding: 5px 15px !important;
  margin: 3px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  color: #ffffff !important;
  background-color: transparent !important;
  transition: color 0.2s ease !important;
}

.subject-pill.selected {
  color: #ce415c !important;
}

.subject-pill:hover:not(.selected) {
  color: #ce415c !important;
}

/* ========== HELP BUTTON STYLING ========== */
/* Help button - pink by default, dark gray on hover */
.c1e.help,
.help.c1e,
div.c1e.help,
button.c1e.help {
  background-color: #ce415c !important; /* Pink by default */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.c1e.help:hover,
.help.c1e:hover,
div.c1e.help:hover,
button.c1e.help:hover,
.c1e.help:active,
.help.c1e:active,
div.c1e.help:active,
button.c1e.help:active {
  background-color: #3f404e !important; /* Dark gray (header/left nav color) on hover */
  color: #ffffff !important; /* White text */
}

/* ========== BOOK LIVE TRAINING BUTTON STYLING ========== */
/* Book Live Training button - same design as Help button */
/* Target c1e buttons that contain the Book Live Training icon (Asset 10mdpi.png) */
.c1e img[src*="Asset 10mdpi.png"],
.c1e:has(img[src*="Asset 10mdpi.png"]),
div.c1e:has(img[src*="Asset 10mdpi.png"]),
button.c1e:has(img[src*="Asset 10mdpi.png"]) {
  background-color: #ce415c !important; /* Pink by default */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Target the parent container when it contains the Book Live Training icon */
.c1e img[src*="Asset 10mdpi.png"] {
  /* Icon styling handled by parent */
}

/* Hover state for Book Live Training button */
.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
div.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
button.c1e:has(img[src*="Asset 10mdpi.png"]):hover,
.c1e:has(img[src*="Asset 10mdpi.png"]):active,
div.c1e:has(img[src*="Asset 10mdpi.png"]):active,
button.c1e:has(img[src*="Asset 10mdpi.png"]):active {
  background-color: #3f404e !important; /* Dark gray (header/left nav color) on hover */
  color: #ffffff !important; /* White text */
}

/* Fallback for browsers that don't support :has() - target by sibling relationship */
.d-flex.justify-content-between > .c1e:first-child:not(.help),
.d-flex > .c1e:first-child:not(.help) {
  background-color: #ce415c !important; /* Pink by default */
  color: #ffffff !important; /* White text */
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.d-flex.justify-content-between > .c1e:first-child:not(.help):hover,
.d-flex > .c1e:first-child:not(.help):hover,
.d-flex.justify-content-between > .c1e:first-child:not(.help):active,
.d-flex > .c1e:first-child:not(.help):active {
  background-color: #3f404e !important; /* Dark gray (header/left nav color) on hover */
  color: #ffffff !important; /* White text */
}