:root {
  /* --- TOP BANNER --- */
  --conf-theme-header-bg: linear-gradient(90deg, rgba(1, 109, 104, 1) 0%, rgba(87, 171, 229, 1) 100%);
  --conf-theme-header-border-bottom: #014A46; /* A darker teal for a grounded border */

  /* --- BOX BELOW THE BANNER (Subtitle/Menu Area) --- */
  --conf-theme-subtitle-bg: #E2EFF5; /* Soft, clean cool-grey that compliments blue */
  --conf-theme-subtitle-border: #D1E1E9; /* Soft border matching the background */

  /* --- MENU / HOVER STATES --- */
  --conf-theme-hover-bg: #57ABE5; /* Uses the light blue from your gradient for menu hovers */
  --conf-theme-hover-color: #FFFFFF;
  
  --conf-theme-title-sprite-bg: none; 
  --conf-theme-announcement-sprite-bg: none;
  --conf-theme-announcement-border-top: none;
  --conf-theme-announcement-border-bottom: 1px solid #D1E1E9;
}

/* Cleans up the background of the box below the banner */
.confSubTitleBox {
  background: var(--conf-theme-subtitle-bg);
  border-bottom: 1px solid var(--conf-theme-subtitle-border);
  border-top: 1px solid var(--conf-theme-subtitle-border);
  color: #016D68;
}

/* Default text in the subtitle box (dates, location) */
.confSubTitle {
  color: #34495E; /* A dark slate-grey. Much softer on the eyes than pure black */
}

/* Timezone - Now uses your brand teal with a subtle highlight box */
.confSubTitle .timezone {
  color: #016D68 !important; 
  font-weight: 600; 
  background-color: #E2EFF5; /* Subtle blue tint behind the timezone */
  padding: 2px 6px;
  border-radius: 4px;
}

/* Menu Links in the subtitle box */
.confSubTitleBox a {
  color: #016D68; /* Ties the links to your main teal */
  text-decoration: none;
}

.confSubTitleBox a:hover {
  color: #004A47; /* Slightly darker teal when hovering */
}

.confSubTitleBox,
.confSubTitle,
.confSubTitle span {
  color: #016D68 !important; /* Replace this hex code with your chosen color */
}