/************************************************************
  1. MENU FONT SIZING (SAFE)
************************************************************/

#id_MenuGadget > div > ul > li > div > a > span,
#id_MenuGadget > div > ul > li > ul > li > div > a > span,
ul.dropdown li,
ul.dropdown li a,
ul.dropdown li a span,
ul.dropdown ul li a span {
  font-size: 14px;
}

ul.dropdown ul {
  width: 220px;
}

ul.dropdown ul ul {
  left: -100%;
}

/************************************************************
  2. LIGHT GREY BACKDROP MASK (THIS SOLVES THE ISSUE)
************************************************************/

/* Light grey site background */
html,
body {
  background-color: #f2f4f7; /* elegant light grey */
  margin: 0;
  padding: 0;
}

/* Full-page overlay ABOVE theme background, BELOW content */
#idWrapper {
  background-color: #f2f4f7 !important;
}

/* White content canvas */
.layout,
.layoutContent,
.mainContainer,
.zoneContent {
  background-color: #ffffff !important;
  position: relative;
  z-index: 2;
}

/************************************************************
  3. ENSURE NO TRANSPARENCY LEAKS
************************************************************/

.pageBackground,
.zoneOuter,
.zoneOuter1,
.zoneOuter2,
.zoneOuter3 {
  background-color: #f2f4f7 !important;
  background-image: none !important;
}

/************************************************************
  4. TOP UTILITY BAR (USER / LOGOUT)
************************************************************/

#idHeader,
#idTopMenu,
.utilityBar,
.topBar,
.authPanel,
.loginPanel,
.headerContainer {
  background-color: #1f2933 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 5;
}

/* Utility text */
#idHeader *,
#idTopMenu *,
.utilityBar *,
.topBar *,
.authPanel *,
.loginPanel *,
.headerContainer * {
  color: #ffffff !important;
  font-weight: 500;
}

/* Utility links */
#idHeader a,
#idTopMenu a,
.utilityBar a,
.topBar a,
.authPanel a,
.loginPanel a,
.headerContainer a {
  color: #e5e7eb !important;
  font-size: 13px;
  text-decoration: none;
}

#idHeader a:hover,
#idTopMenu a:hover,
.utilityBar a:hover,
.topBar a:hover,
.authPanel a:hover,
.loginPanel a:hover,
.headerContainer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/************************************************************
  5. HERO & CONTENT IMAGES (PROTECTED)
************************************************************/

.zoneContent img,
.layout img {
  display: inline-block !important;
  position: relative;
  z-index: 3;
}