/* here you can put your own css to customize and override the theme */

/***
Rounded Portlets
***/
/*
.portlet {
	border-radius: 4px !important;
}

.portlet .portlet-title {
	border-radius: 4px 4px 0px 0px !important;
}

.portlet .portlet-body,
.portlet .portlet-body .form-actions  {
	border-radius: 0px 0px 4px 4px !important;
}
*/

/* CRM NAV BACKGROUND CUSTOMIZATION - moved from layouts/crm.html.erb */
.page-header.navbar {
    /* left-to-right gradient (with fallbacks & vendor prefixes) */
    /*background-color: #081930 !important; !* fallback solid color *!*/
    /* vendor-prefixed gradients for wider browser support */
    background-image: -webkit-linear-gradient(to right, #081930 0%, #044D66 100%) !important;
    background-image: -moz-linear-gradient(to right, #081930 0%, #044D66 100%) !important;
    /* removed old -o- prefix (not needed) */
    /* modern syntax: left -> right */
    background-image: linear-gradient(to right, #081930 0%, #044D66 100%) !important;
    background-repeat: no-repeat !important;
    border-bottom: none !important;
    display: flex;
    height: 74px !important;
    padding-right: 20px;
    align-items: center;
    gap: 10px;
}

.page-header.navbar .page-header-inner > a,
.page-header.navbar .page-header-inner > .title,
.page-header.navbar .page-header-inner > i,
.page-header.navbar .page-header-inner > .menu-toggler,
.page-header .page-logo > a {
  color: #ffffff !important;
}

.page-header .page-logo img { filter: none; }

.page-header.navbar .page-header-inner .ea-navr {
  margin-left: auto;          /* push this element to the right in a flex container */
  display: flex;             /* allow inner items to align nicely */
  align-items: center;       /* vertical center alignment */
  gap: 8px;                  /* small spacing for inner controls */
  z-index: 1000;             /* ensure it's above header background elements if needed */
}

/* Fallback for non-flex browsers: float right and clear floats */
.page-header.navbar .ea-navr { float: right; }


/* Universal strong override for ea-navr regardless of nesting */
.page-header .ea-navr {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 10000 !important;
  float: none !important;
}

.page-header .ea-navr > ul,
.page-header .ea-navr ul.no-list-style,
.page-header .ea-navr ul.pull-right {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px !important;
  list-style: none !important;
  align-items: center !important;
}

.page-header .ea-navr ul li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 3px;
  height: 32px;
  background: transparent !important; /* ensure no dark background */
}

/* Top-level header/menu items: keep white so icons/labels remain visible on dark header */
.page-header.navbar .page-header-inner > a,
.page-header.navbar .page-header-inner > .title,
.page-header.navbar .page-header-inner > i,
.page-header.navbar .page-header-inner > .menu-toggler,
.page-header .page-logo > a,
.page-header .ea-navr > ul > li > a,
.page-header .ea-navr > ul > li > span {
  color: #ffffff !important;
}

/* Dropdown / submenu styling: readable dark text on light background */
.page-header .ea-navr ul li > ul,
.page-header .ea-navr ul li .dropdown-menu,
body > div.page-header.navbar .ea-navr ul li > ul {
  background: #ffffff !important; /* white background for submenu */
  color: #222222 !important;      /* dark text for readability */
  min-width: 160px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
  border-radius: 4px !important;
  padding: 10px !important;
}

/* Links inside dropdowns */
.page-header .ea-navr ul li > ul a,
.page-header .ea-navr ul li .dropdown-menu a,
body > div.page-header.navbar .ea-navr ul li > ul a {
  color: #222222 !important;
  padding: 8px 14px !important;
  display: block !important;
  text-decoration: none !important;
  width: 100%;
}

/* Hover/focus state for dropdown links */
.page-header .ea-navr ul li > ul a:hover,
.page-header .ea-navr ul li .dropdown-menu a:hover {
  background: #f5f7fa !important;
  color: #000 !important;
}

/* Make sure submenu links are explicitly dark and cover common states. */
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul li,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul span {
  color: #222222 !important;
}

body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a:link,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a:visited,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a:focus,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a:active {
  color: #222222 !important;
}

/* Hover/focus state already defined above; reinforce specificity for the exact selector */
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a:hover,
body > div.page-header.navbar > div > div.ea-navr > ul > li > ul a:focus {
  background: #f5f7fa !important;
  color: #000 !important;
}

/* Active / Selected underline (green) for header and sidebar menus */
/* CSS variable allows runtime/theme overrides (fallback to #35a827) */
:root {
  --ea-active: #0071AD; /* default active underline color (green) */
  --ea-underline-gap: 6px; /* gap used when placing underline via top: calc(100% + gap) */
  --ea-underline-bottom: 8px; /* distance from li bottom to underline for li::after */
  --Primary-200: #78C7F0; /* default primary for badges */
}

/* Targets common active markers (.active, .selected, aria-current) and keeps link color readable */
.page-header .ea-navr ul li > a.active,
.page-header .ea-navr ul li.active > a,
.page-header .ea-navr ul li > a[aria-current="true"],
.page-header .page-header-inner > a.active,
.page-header .page-header-inner > a[aria-current="true"],
.page-header .page-header-inner > .title.active,
.page-header .ea-navr ul li > a.selected,
.page-header .ea-navr ul li > a.current,
.ea-navr__link.is-active,
.page-header .ea-navr ul li > a.is-active {
  position: relative !important;
  color: #ffffff !important;
  background: transparent !important;/* keep text readable on dark header */
}

.page-header .ea-navr ul li > a.active::after,
.page-header .ea-navr ul li.active > a::after,
.page-header .ea-navr ul li > a[aria-current="true"]::after,
.page-header .page-header-inner > a.active::after,
.page-header .ea-navr ul li > a.selected::after,
.page-header .ea-navr ul li > a.current::after,
.ea-navr__link.is-active::after,
.page-header .ea-navr ul li > a.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  background: var(--ea-active, #0071AD) !important;   /* use variable with fallback */
  border-radius: 2px !important;
  transform-origin: center left !important;
  transition: transform 180ms ease, opacity 180ms ease !important;
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* For keyboard focus state when a link is focused but not "active" */
.page-header .ea-navr ul li > a:focus::after,
.page-header .ea-navr ul li > a:focus {
  outline: none !important;
  /* show a thinner green underline on focus for accessibility */
  position: relative !important;
}

/* Sidebar: if using vertical nav, underline appears at the bottom of the link */
.page-sidebar .page-sidebar-menu li.active > a,
.page-sidebar .page-sidebar-menu li > a.active,
.page-sidebar .page-sidebar-menu li > a[aria-current="true"],
.page-sidebar .nav li.active > a,
.page-sidebar .nav li > a.active,
.page-sidebar .nav li > a[aria-current="true"] {
  position: relative !important;
  color: #ffffff !important; /* keep sidebar text readable on dark sidebar */
}

/* Disable sidebar underline pseudo-element: don't show underline on sidebar menu items */
.page-sidebar .page-sidebar-menu li.active > a::after,
.page-sidebar .page-sidebar-menu li > a.active::after,
.page-sidebar .page-sidebar-menu li > a[aria-current="true"]::after,
.page-sidebar .nav li.active > a::after,
.page-sidebar .nav li > a.active::after,
.page-sidebar .nav li > a[aria-current="true"]::after {
  /* remove the pseudo-element entirely for sidebar */
  content: none !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Sidebar selected background override (user-requested):
   Apply the blue color (#0071ADFF) for sidebar active items instead of green.
   This targets the exact selectors the user provided and forces the color. */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a {
  background: #0071ADFF !important;
  margin: 10px;
  border-radius: 4px;
  border-top-color: transparent !important;
  color: #ffffff !important;
}

.page-sidebar-menu-closed li.active.open > a {
  margin: 0px !important;
  border-radius: 0px !important;
}

/* Override: Prevent Dashboard item from turning green when active (more specific than the global rule) */
.page-sidebar .page-sidebar-menu > li.dashboard-nav-item.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.dashboard-nav-item.active > a,
.page-sidebar .page-sidebar-menu > li.dashboard-nav-item.active.open > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.dashboard-nav-item.active.open > a {
  /* use the theme default background (transparent so the theme CSS can control it) */
  background: #0071ADFF !important;
  color: #ffffff !important;
  border-top-color: transparent !important;
}

/* Small hover enhancement: slightly animate underline scale on hover for links that are active or focused */
.page-header .ea-navr ul li > a:hover::after,
.page-header .ea-navr ul li > a:focus::after,
.page-header .ea-navr ul li > a.active:hover::after,
.ea-navr__link.is-active:hover::after {
  transform: scaleX(1.05) !important;
}

/* ea-nav.hor-menu support for underline on active topnav items */
.ea-nav.hor-menu .nav.topnav > li > a > span,
.ea-nav.hor-menu.hor-menu-light .nav.topnav > li > a > span {
  /* Many existing spans already set inline position:relative; keep as-is but ensure it's present */
  position: relative; /* safe to set — if inline style exists this is equivalent */
  display: inline-block; /* allow pseudo element to size to text */
  padding-bottom: 6px; /* provide space for underline */
}

/* Active / selected underline placed on the inner span so it respects inline position:relative and any badges */
.ea-nav.hor-menu .nav.topnav > li.active > a > span::after,
.ea-nav.hor-menu .nav.topnav > li > a.active > span::after,
.ea-nav.hor-menu .nav.topnav > li > a[aria-current="true"] > span::after,
.ea-nav.hor-menu .nav.topnav > li.current > a > span::after,
.ea-nav.hor-menu .nav.topnav > li.selected > a > span::after,
.ea-nav.hor-menu .nav.topnav > li > a > span.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Position the underline just below the span content using top: 100% plus a gap
     This works reliably even when the span (or its parent) has a large line-height (e.g. 42px). */
  top: calc(100% + 6px);
  height: 10px;
  background: var(--ea-active, #0071AD);
  border-radius: 1px;
  transform-origin: center left;
  transition: transform 180ms ease, opacity 180ms ease;
  transform: scaleX(1);
  opacity: 1;
}

/* Hover/focus micro-animation for span-based underline */
.ea-nav.hor-menu .nav.topnav > li > a > span:hover::after,
.ea-nav.hor-menu .nav.topnav > li > a > span:focus::after,
.ea-nav.hor-menu .nav.topnav > li.active > a > span:hover::after {
  transform: scaleX(1.05);
}

/* End ea-nav.hor-menu support */

/* Override: remove solid background for selected/active top/horizontal menu items
   This targets both the theme's .page-header.navbar .hor-menu selectors and the
   .ea-nav.hor-menu .nav.topnav structure used in the repo. Keeps text white. */
.page-header.navbar .hor-menu .navbar-nav > li.active > a,
.page-header.navbar .hor-menu .navbar-nav > li.active > a:hover,
.page-header.navbar .hor-menu .navbar-nav > li.current > a,
.page-header.navbar .hor-menu .navbar-nav > li.current > a:hover,
.ea-nav.hor-menu .nav.topnav > li.active > a,
.ea-nav.hor-menu .nav.topnav > li > a.active,
.ea-nav.hor-menu .nav.topnav > li.current > a,
.ea-nav.hor-menu .nav.topnav > li.selected > a {
  background: transparent !important;
  color: #ffffff !important; /* keep label readable on dark header */
}

.page-header.navbar .hor-menu .navbar-nav > li > a:hover,
.page-header.navbar .hor-menu .navbar-nav > li > a:focus {
  color: #FFFFFF !important
}

/* If the active state is on the <li> itself and earlier rules added a top-border or badge,
   remove strong background remnants. */
.page-header.navbar .hor-menu .navbar-nav > li.active,
.ea-nav.hor-menu .nav.topnav > li.active,
.ea-nav.hor-menu .nav.topnav > li.current,
.ea-nav.hor-menu .nav.topnav > li.selected {
  background: transparent !important;
}

/* End override */

/* Make underline span the full parent li width for hor-menu topnav
   - position the <li> relatively
   - hide the span::after underline (we'll use li::after instead)
   - add li::after for active/current/selected states
*/
.ea-nav.hor-menu .nav.topnav > li {
  position: relative; /* required so li::after is positioned relative to li */
}

/* hide span-based underline for hor-menu so we don't have two lines */
.ea-nav.hor-menu .nav.topnav > li > a > span::after {
  display: none !important;
}

/* underline attached to the li (full width of li) - only for active/current/selected */
.ea-nav.hor-menu .nav.topnav > li.active::after,
.ea-nav.hor-menu .nav.topnav > li.current::after,
.ea-nav.hor-menu .nav.topnav > li.selected::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* place the underline a bit above the bottom of the li; configurable */
  bottom: var(--ea-underline-bottom, 8px);
  height: 2px;
  background: #0071ADFF;
  border-radius: 2px;
  transform-origin: center left;
  transition: transform 180ms ease, opacity 180ms ease;
  transform: scaleX(1);
  opacity: 1;
  z-index: 2;
}

/* keep hover animation for li-based underline */
.ea-nav.hor-menu .nav.topnav > li.active:hover::after {
  transform: scaleX(1.05);
}

/* Also support the .page-header.navbar .hor-menu .navbar-nav markup (theme variant)
   Mirror the li-based underline behavior so the underline spans full <li> width. */
.page-header.navbar .hor-menu .navbar-nav > li {
  position: relative;
}

/* hide potential span-based underline in the theme's structure */
.page-header.navbar .hor-menu .navbar-nav > li > a > span::after {
  display: none !important;
}

.page-header.navbar .hor-menu .navbar-nav > li.active::after,
.page-header.navbar .hor-menu .navbar-nav > li.current::after,
.page-header.navbar .hor-menu .navbar-nav > li.selected::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ea-active, #0071ADFF);
  border-radius: 2px;
  transform-origin: center left;
  transition: transform 180ms ease, opacity 180ms ease;
  transform: scaleX(1);
  opacity: 1;
  z-index: 2;
}

.page-header.navbar .hor-menu .navbar-nav > li.active:hover::after {
  transform: scaleX(1.05);
}

/* Ensure sidebar menu text/icons are white across all states */
.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar .page-sidebar-menu li > a > i,
.page-sidebar .page-sidebar-menu li > a > svg,
.page-sidebar .page-sidebar-menu li > a > span,
.page-sidebar .page-sidebar-menu .sub-menu li > a,
.page-sidebar .page-sidebar-menu .sub-menu li > a > i,
.page-sidebar .page-sidebar-menu .sub-menu li > a > svg {
  fill: #ffffff !important;
  color: #ffffff !important;
  /* removed redundant border-top-color to avoid duplication with border-top */
  border-top: 0 !important;
}

/* Hover and focus states should also keep white text for readability */
.page-sidebar .page-sidebar-menu > li > a:hover,
.page-sidebar .page-sidebar-menu > li > a:focus,
.page-sidebar .page-sidebar-menu .sub-menu li > a:hover,
.page-sidebar .page-sidebar-menu .sub-menu li > a:focus {
  color: #ffffff !important;
}

/* Active/opened items already set earlier, but reinforce white text for those too */
.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar .page-sidebar-menu > li.active.open > a {
  color: #ffffff !important;
}

/* Sub-menu (always-open) background for sidebar: make the open sub-menu have a darker panel */
.page-sidebar .page-sidebar-menu .sub-menu.always-open {
  background: #000 !important;
}

/* Ensure links inside the always-open sub-menu are white/visible */
.page-sidebar .page-sidebar-menu .sub-menu.always-open > li > a,
.page-sidebar .page-sidebar-menu .sub-menu.always-open > li > a > span,
.page-sidebar .page-sidebar-menu .sub-menu.always-open > li > a > i {
  color: #ffffff !important;
}

/* Keep badges visible (adjust if needed) */
.page-sidebar .page-sidebar-menu .sub-menu.always-open .badge {
  /*background-color: rgba(255,255,255,0.12) !important;*/
  color: #000 !important;
  text-align: center !important;
}

/* Sidebar sub-menu badges */
.page-sidebar .page-sidebar-menu .sub-menu li > a .badge,
.page-sidebar .page-sidebar-menu .sub-menu li .badge,
.page-sidebar .page-sidebar-menu .sub-menu li > a .badge.badge-primary,
.page-sidebar .page-sidebar-menu .sub-menu li .badge.badge-primary {
  display: flex !important;
  height: 14px !important;
  padding: 3px 4px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 40px !important;
  background: var(--Primary-200, #78C7F0) !important;
  color: #000 !important; /* typography color */
  text-align: center !important;
  font-family: "Noto Sans", sans-serif !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 16px !important;
  min-width: 20px !important;
  box-sizing: border-box !important;
  /* pin badges to the right so they don't shift when the link gets active/changes padding */
  float: right !important;
  margin-right: 12px !important;
  margin-top: 3px !important;
}


/* Remove the blue divider pseudo-element that created a visible band */
body > div.page-container > div.page-sidebar-wrapper > div::before {
  /* pseudo-element requires content; it will render at the top of the target div */
  content: "";
  display: block;
  width: 178px;
  height: 1px;
  background: #0582C3;
  border-radius: 4px;
  margin: 0 0 5px 15px; /* space below the divider; tweak as needed */
}

/* Page-container background: apply requested gradient to the overall container.
   Header and sidebar have their own backgrounds and will remain as defined above.
   Using high specificity and !important to override other theme defaults when necessary. */
/*body > div.page-container,*/
.page-container {
  background: linear-gradient(to bottom, #081930 0%, #044D66 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/*!* Make sidebar gradient vertical: top -> bottom *!*/
/*.page-sidebar {*/
/*  background: linear-gradient(to bottom, #081930 0%, #044D66 100%) !important;*/
/*  border-bottom: none !important;*/
/*}*/

/* Override: remove left padding on the page logo (force precedence) */
html body .page-header.navbar .page-logo {
  padding-left: 0 !important;
  padding-right: 20px !important;
}

/* Override: use custom sidebar toggler image (dark blue) */
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler,
.page-sidebar .sidebar-toggler {
  /* reference the image in public/assets/admin/layout/img */
  background-image: url("../img/chevron_left.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  /* avoid shorthand `background:` so we don't wipe out background-image */
  background-color: #ffffff !important; /* white pill behind the icon */
  /*!* ensure it's absolute and out of flow *!*/
  position: absolute !important;
  display: flex !important;               /* use flex so inner button centers */
  align-items: center !important;
  justify-content: center !important;
  right: 8px !important;                  /* position inside the sidebar */
  top: 8px !important;
  padding: 0 !important;
  margin: 5px !important;                 /* ensure no margins shift layout */
  float: none !important;                 /* neutralize theme float */
  cursor: pointer !important;
  opacity: 1 !important;                  /* make fully visible by default */
  filter: none !important;
  z-index: 60 !important;
  /* keep sizing concise and non-duplicated */
  width: 20px !important;
  height: 20px !important;
  border-radius: 20px !important;
  box-shadow: 0 0 4.8px 0 rgba(0, 0, 0, 0.25) !important;
}


/* Active link inside an open/active sub-menu should also use the theme active color so selection is clear */
.page-sidebar .page-sidebar-menu .sub-menu li.active > a,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu li.active > a {
  background: var(--ea-active, #0071ADFF) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  /* remove margin so badges do not shift */
  margin: 0 10px !important;
  padding: 5px 5px 5px 33px !important; /* preserve indentation/affordance */
}


/* Ensure the sidebar container is a positioned ancestor so absolute toggler sits at its end */
.page-sidebar {
  position: absolute !important;
  background: linear-gradient(to bottom, #081930 0%, #044D66 100%) !important;
  border-bottom: none !important;
  min-height: 100% !important;
}

/* Place the sidebar toggler at the visual top-right edge of the sidebar.
   Use high specificity and !important so theme rules can't push it into flow. */
.page-sidebar .sidebar-toggler,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler,
html body .page-sidebar .sidebar-toggler,
html body .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler {
  position: absolute !important;
  right: -10px !important; /* half of the toggler's total visual width (20px width + 10px padding each side = 40px total) */
  top: 8px !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 20px !important;
  height: 20px !important;
  padding: 10px !important;
  margin: 0 !important;
  float: none !important;

  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;

  /* Use the file-based SVG as requested and ensure it isn't overwritten */
  background-image: url("../img/chevron_left.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  /*background-color: transparent !important; !* do not mask the SVG with a pill color *!*/

  box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
  border-radius: 20px !important;
  z-index: 60 !important;
}

/* Collapsed state: slightly smaller visual */
body.page-sidebar-closed .page-sidebar .sidebar-toggler,
body.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .sidebar-toggler {
  position: absolute !important;
  right: -10px !important; /* half of the toggler's total visual width (20px width + 10px padding each side = 40px total) */
  top: 8px !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 20px !important;
  height: 20px !important;
  padding: 10px !important;
  margin: 0 !important;
  float: none !important;

  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;

  /* Use the file-based SVG as requested and ensure it isn't overwritten */
  background-image: url("../img/chevron_right.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 16px 16px !important;
  /*background-color: transparent !important; !* do not mask the SVG with a pill color *!*/

  box-shadow: 0 4px 8px rgba(0,0,0,0.12) !important;
  border-radius: 20px !important;
  z-index: 60 !important;
}

/* Ensure the toggler's image or inner elements don't add spacing */
.page-sidebar .sidebar-toggler *,
html body .page-sidebar .sidebar-toggler * {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Strong override: ensure header hor-menu hover/focus color is white regardless of theme load order
   This selector increases specificity and uses !important to beat theme declarations. */
body.page-quick-sidebar-over-content .page-header.navbar .hor-menu .navbar-nav > li > a:hover,
body.page-quick-sidebar-over-content .page-header.navbar .hor-menu .navbar-nav > li > a:focus {
  background-color: #2c3542 !important;
  color: #FFFFFF !important;
}

.page-sidebar-closed.page-sidebar-fixed
.page-sidebar:hover .page-sidebar-menu,
.page-sidebar .page-sidebar-menu{
  padding-top: 20px !important;
}