@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Figtree:wght@300;400;500;600;700&display=swap');

/* ---- TOKENS ---- */
:root {
  --navy:      #0C2340;
  --navy-md:   #163560;
  --navy-lt:   #1E4A82;
  --navy-dk:   #06142A;
  --gold:      #B8972C;
  --gold-lt:   #D4AF5A;
  --gold-pale: #F7EDD0;
  --cream:     #F9F5EC;
  --warm-wh:   #FDFBF7;
  --text:      #0C1B2E;
  --muted:     #4A5568;
  --rule:      #D4C4A0;
}

/* ---- BASE TYPOGRAPHY ---- */
/* html/body use a light background. A navy body fill was tried (to make any
   zone gaps read dark) but it also painted WA's admin content-editor canvas
   navy, making content hard to edit. Light here keeps editing comfortable;
   zones still define their own navy/colored backgrounds explicitly. */
html {
  background-color: var(--warm-wh) !important;
}

body {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: var(--text) !important;
  background-color: var(--warm-wh) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}

/* Content area gets the warm white background */
.zoneContent,
.WaPlaceHolderContent,
.zoneContent .WaLayoutItem,
.zoneContent .gadgetContentEditableArea {
  background-color: var(--warm-wh) !important;
}

/* Consistent heading scale — sizes, weight, and navy color locked site-wide */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--navy) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

h1 { font-size: 36px !important; }
h2 { font-size: 28px !important; }
h3 { font-size: 22px !important; font-weight: 600 !important; }
h4 { font-size: 18px !important; font-weight: 600 !important; }
h5 { font-size: 15px !important; font-weight: 600 !important; }
h6 { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }

/* Override the .promo h1 (site title in header area).
   The original has font color #7a0026 via inline <font> tag;
   we can't remove that tag but we can force the h1 color. */
h1.promo {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 700 !important;
}

h1.promo font {
  color: #fff !important;
}

/* WA's theme and editor embed <font> and <span> tags inside headings with
   their own face/color attributes. Force all inline children to inherit
   both font-family and color from the heading — covers any nesting depth. */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 font, h2 font, h3 font, h4 font, h5 font, h6 font {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* Higher-specificity sweep for headings inside WA content gadgets,
   in case the WA theme stylesheet wins the global h1–h6 rule above. */
.gadgetContentEditableArea h1,
.gadgetContentEditableArea h2,
.gadgetContentEditableArea h3,
.gadgetContentEditableArea h4,
.gadgetContentEditableArea h5,
.gadgetContentEditableArea h6 {
  color: var(--navy) !important;
}

p {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

a {
  color: var(--navy) !important;
  transition: color 0.15s !important;
}

a:hover {
  color: var(--gold) !important;
  text-decoration: none !important;
}

/* ---- BROAD FIGTREE SWEEP — system page gadgets ---- */
/* WA system pages (events, directory, profiles, forum, blog) render content
   in gadget-specific containers that may not include .gadgetContentEditableArea.
   Without this, div/span text in those containers can inherit Playfair Display
   from h1-h6 via ancestor elements if the markup nests content inside headings. */
.WaGadget p,
.WaGadget li,
.WaGadget span,
.WaGadget div,
.gadgetBody p,
.gadgetBody li,
.gadgetBody span,
.gadgetBody div,
.gadgetBodyNoBorder p,
.gadgetBodyNoBorder li,
.gadgetBodyNoBorder span,
.gadgetBodyNoBorder div {
  font-family: 'Figtree', 'Arial', sans-serif !important;
}

/* Headings inside system gadgets still use Playfair Display */
.WaGadget h1, .WaGadget h2, .WaGadget h3, .WaGadget h4,
.gadgetBody h1, .gadgetBody h2, .gadgetBody h3, .gadgetBody h4,
.gadgetBodyNoBorder h1, .gadgetBodyNoBorder h2, .gadgetBodyNoBorder h3, .gadgetBodyNoBorder h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* ---- CONTENT TYPOGRAPHY NORMALIZATION ---- */
/* WA's editor can output <font> tags, <span> elements with inline styles,
   and bare <p> tags — all potentially with different families/sizes baked in.
   These rules enforce Figtree 16px for all normal body text regardless of
   how WA serializes it.                                                       */
.gadgetContentEditableArea {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 16px !important;
}

/* Legacy <font face="..." size="..."> tags WA still emits */
.gadgetContentEditableArea font {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: inherit !important;
}

/* Inline <span> elements the editor wraps around styled text */
.gadgetContentEditableArea p > span,
.gadgetContentEditableArea li > span,
.gadgetContentEditableArea td > span {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: inherit !important;
}

/* Spans inside headings: descendant selector (not >) catches nested spans */
.gadgetContentEditableArea h1 span,
.gadgetContentEditableArea h2 span,
.gadgetContentEditableArea h3 span,
.gadgetContentEditableArea h4 span {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ---- HORIZONTAL NAV (zoneHeader2 / WaGadgetMenuHorizontal) ----
   Theme defaults: background #384244, links #d6dde1, active #e87f6d
   Override to: navy background, white links, gold active              */

.menuInner {
  background: var(--navy) !important;
  border-top: 3px solid var(--gold) !important;
  border-bottom: none !important;
}

.menuInner ul.firstLevel {
  background: var(--navy) !important;
}

/* Top-level link — keep original height/padding structure to preserve alignment */
.menuInner ul.firstLevel > li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  height: 26px !important;
  padding: 14px 11px 14px !important;
  line-height: 26px !important;
}

/* Hover */
.menuInner ul.firstLevel > li > .item:hover > a {
  background: var(--navy-md) !important;
  color: #fff !important;
}

/* Active / selected — inset shadow pins the indicator flush to the bottom edge */
.menuInner ul.firstLevel > li.sel > .item > a {
  color: var(--gold-lt) !important;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--gold) !important;
}

.menuInner ul.firstLevel > li.sel > .item:hover > a {
  color: var(--gold-lt) !important;
  background: var(--navy-md) !important;
}

/* Dropdown background */
.menuInner ul ul {
  background: var(--navy-dk) !important;
  border-top: 2px solid var(--gold) !important;
}

/* Dropdown links */
.menuInner ul ul li > .item > a {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  background: var(--navy-dk) !important;
}

.menuInner ul ul li > .item:hover > a {
  background: var(--navy-md) !important;
  color: var(--gold-lt) !important;
}

.menuInner ul ul li.sel > .item > a {
  color: var(--gold-lt) !important;
}

/* ---- HEADER ZONES ----
   zoneHeader1 = logo/title row, zoneHeader2 = nav bar
   Must target ALL intermediate containers — WA uses inline
   background-color:transparent on several child divs.             */
.zoneHeader1,
.zoneHeader2,
.WaPlaceHolderHeader,
.WaPlaceHolderHeader1,
.zoneHeader1 .WaLayoutContainerOnly,
.zoneHeader2 .WaLayoutContainerOnly,
.zoneHeader1 .WaLayoutItem,
.zoneHeader2 .WaLayoutItem,
.zoneHeader1 .WaLayoutPlaceHolder,
.zoneHeader2 .WaLayoutPlaceHolder,
.zoneHeader1 .WaGadgetOnly,
.zoneHeader2 .WaGadgetOnly {
  background-color: var(--navy) !important;
}

/* Remove any gap between header zones and below nav */
.zoneHeader1,
.zoneHeader2 {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.zoneHeader2 .WaLayoutContainerOnly,
.zoneHeader2 .WaLayoutItem,
.zoneHeader2 .WaLayoutPlaceHolder,
.zoneHeader2 .WaGadgetOnly,
.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .placeHolderContainer,
.zoneHeader2 > div,
.menuInner,
.menuInner ul.firstLevel {
  border-bottom: none !important;
}

.zoneHeader2 .WaPlaceHolder,
.zoneHeader2 .placeHolderContainer,
.zoneHeader2 > div {
  background-color: var(--navy) !important;
}

/* Text inside header zone */
.zoneHeader1 p,
.WaPlaceHolderHeader p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.zoneHeader1 a,
.WaPlaceHolderHeader a {
  color: var(--gold-lt) !important;
}

/* ---- MOBILE PANEL (hamburger menu) ---- */
.mobilePanel {
  /* Transparent: on mobile this panel is lifted out of flow and overlaid on the
     eye+title lockup (see the ONE-ROW HEADER rules in the 768px block). The
     hamburger/login buttons sit over the navy lockup zone, and the open menu
     list carries its own navy background, so the panel itself paints nothing. */
  background: transparent !important;
  border-bottom: none !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.mobilePanelButton {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: var(--navy) !important;
  /* Prevent iOS double-tap zoom on the hamburger button */
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.mobilePanelButton:hover {
  background: var(--navy-md) !important;
  color: var(--gold-lt) !important;
}

/* ----------------------------------------------------------------------
   MOBILE MENU LAYOUT OVERRIDE  (the important part)

   WA's mobile panel reuses the SAME .menuInner > ul.firstLevel markup as
   the desktop horizontal nav. Without these overrides, the desktop rules
   below (NAV CENTERING: display:inline-flex, and the fixed height:26px
   link rule) leak in and render the mobile menu HORIZONTALLY — it then
   overflows the viewport and the dropdowns float as overlapping boxes.

   These rules force a clean VERTICAL, full-width, stacked menu. They are
   scoped to .mobilePanel and use 3+ classes so they win on specificity
   against the desktop .menuInner rules (both use !important).
   ---------------------------------------------------------------------- */

/* The menu container + lists: vertical, full width, no centering/flex */
.mobilePanel .menuInner {
  text-align: left !important;
  border-top: none !important;
}
.mobilePanel .menuInner ul.firstLevel,
.mobilePanel .menuInner ul.secondLevel,
.mobilePanel .menuInner ul ul {
  display: block !important;
  width: 100% !important;
  background: var(--navy) !important;
}
.mobilePanel .menuInner ul.firstLevel > li,
.mobilePanel .menuInner ul li {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Submenus: stack inline (static), don't float as absolute boxes */
.mobilePanel .menuInner ul.secondLevel,
.mobilePanel .menuInner ul ul {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border-top: none !important;
  background: var(--navy-dk) !important;
}

/* The .item wrapper: full width block */
.mobilePanel .menuInner .item {
  display: block !important;
  width: 100% !important;
}

/* First-level links: full width, left-aligned, auto height (kills 26px) */
.mobilePanel .menuInner ul.firstLevel > li > .item > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: left !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid rgba(184, 151, 44, 0.15) !important;
  padding: 15px 20px !important;
  box-shadow: none !important;
  touch-action: manipulation !important;
}
.mobilePanel .menuInner ul.firstLevel > li > .item > a > span {
  display: inline !important;
}

/* Selected first-level item */
.mobilePanel .menuInner ul.firstLevel > li.sel > .item > a {
  color: var(--gold-lt) !important;
  background: transparent !important;
  box-shadow: inset 3px 0 0 var(--gold) !important;
}

/* Submenu links: indented, slightly smaller, darker bg */
.mobilePanel .menuInner ul ul li > .item > a {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-align: left !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-transform: none !important;
  background: var(--navy-dk) !important;
  border-bottom: 1px solid rgba(184, 151, 44, 0.1) !important;
  padding: 13px 20px 13px 38px !important;
}
.mobilePanel .menuInner ul ul li > .item > a > span {
  display: inline !important;
}

/* Tap feedback */
.mobilePanel .menuInner .item:hover > a,
.mobilePanel .menuInner .item > a:active {
  background: var(--navy-md) !important;
  color: #fff !important;
}

/* ---- CONTENT BLOCKS — recolor the 3 home panels ----
   Original inline colors: green #48A956, purple #9790BE, blue #2F88B8
   Override to navy shades. Uses attribute contains selector.          */
.WaLayoutItem[style*="#48A956"],
.WaLayoutItem[style*="48A956"] {
  background-color: var(--navy) !important;
}

.WaLayoutItem[style*="#9790BE"],
.WaLayoutItem[style*="9790BE"] {
  background-color: var(--navy-md) !important;
}

.WaLayoutItem[style*="#2F88B8"],
.WaLayoutItem[style*="2F88B8"] {
  background-color: var(--navy-lt) !important;
}

/* Text and headings inside dark content panels — scoped to the three
   background overrides so gadgetStyle002 on light backgrounds stays dark */
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea h4,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h1,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h2,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h3,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea h4 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
}

.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea li,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea p,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea li {
  color: rgba(255, 255, 255, 0.8) !important;
}

.WaLayoutItem[style*="#48A956"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="48A956"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="#9790BE"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="9790BE"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="#2F88B8"] .gadgetContentEditableArea a,
.WaLayoutItem[style*="2F88B8"] .gadgetContentEditableArea a {
  color: var(--gold-lt) !important;
}


/* Ensure light-background content always reads dark */
.zoneContent .gadgetContentEditableArea p,
.zoneContent .gadgetContentEditableArea li {
  color: var(--text) !important;
}
.zoneContent .gadgetContentEditableArea h1,
.zoneContent .gadgetContentEditableArea h2,
.zoneContent .gadgetContentEditableArea h3,
.zoneContent .gadgetContentEditableArea h4 {
  color: var(--navy) !important;
}

/* gadgetStyle002 on transparent/light backgrounds — WA theme defaults this
   to light text; override to dark and include the legacy <font> wrapper     */
.gadgetStyle002 .gadgetContentEditableArea font,
.gadgetStyle002 .gadgetContentEditableArea p,
.gadgetStyle002 .gadgetContentEditableArea li {
  color: var(--text) !important;
}
.gadgetStyle002 .gadgetContentEditableArea h1,
.gadgetStyle002 .gadgetContentEditableArea h2,
.gadgetStyle002 .gadgetContentEditableArea h3,
.gadgetStyle002 .gadgetContentEditableArea h4 {
  color: var(--navy) !important;
}

/* Dark panels win back white text — more specific due to parent attribute selector */
.WaLayoutItem[style*="#48A956"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="48A956"]  .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="#9790BE"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="9790BE"]  .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="#2F88B8"] .gadgetStyle002 .gadgetContentEditableArea font,
.WaLayoutItem[style*="2F88B8"]  .gadgetStyle002 .gadgetContentEditableArea font {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ---- BUTTONS ---- */
input[type="submit"],
input[type="button"],
button[type="submit"],
.buttonLink,
.WaButtonText,
.sysButton,
a.button,
.button {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: var(--gold) !important;
  color: #fff !important;
  border: none !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  text-decoration: none !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover,
.buttonLink:hover,
.WaButtonText:hover,
a.button:hover {
  background-color: #A0811F !important;
  color: #fff !important;
}

/* ---- FOOTER ---- */

/* Footer zones match the warm-white page background. WA wraps the footer
   in a transparent container that showed a light "band" once body went light;
   rather than chase that wrapper, the whole footer is light so nothing
   contrasts. The gold border-top stays as a clean divider from page content. */
.zoneFooter1,
.WaPlaceHolderFooter {
  background-color: var(--warm-wh) !important;
  border-top: 3px solid var(--gold) !important;
}

/* Footer zone 2 — override the inline #566467 background */
.zoneFooter2,
.WaPlaceHolderFooter1,
#id_Footer1 {
  background-color: var(--warm-wh) !important;
}

.zoneFooter1 p,
.zoneFooter2 p,
.WaPlaceHolderFooter p,
.WaPlaceHolderFooter1 p {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: #4A5568 !important;
}

.zoneFooter1 a,
.zoneFooter2 a,
.WaPlaceHolderFooter a,
.WaPlaceHolderFooter1 a {
  color: #64748B !important;
}

.zoneFooter1 a:hover,
.zoneFooter2 a:hover,
.WaPlaceHolderFooter a:hover,
.WaPlaceHolderFooter1 a:hover {
  color: #94A3B8 !important;
}

.zoneFooter1 h1, .zoneFooter1 h2, .zoneFooter1 h3,
.zoneFooter2 h1, .zoneFooter2 h2, .zoneFooter2 h3 {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  color: var(--gold) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* ---- FORMS ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
textarea,
select {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 15px !important;
  border: 1.5px solid var(--rule) !important;
  padding: 9px 13px !important;
  color: var(--text) !important;
  background-color: #fff !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.08) !important;
}

label {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--navy) !important;
}

/* ---- TABLES ---- */
th {
  background-color: var(--navy) !important;
  color: #fff !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 11px 14px !important;
}

td {
  border-bottom: 1px solid var(--rule) !important;
  padding: 11px 14px !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
}

/* ---- EVENTS GADGET ---- */
.WaGadgetUpcomingEvents .eventTitle,
.WaGadgetUpcomingEvents h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
}

.WaGadgetUpcomingEvents a {
  color: var(--gold-lt) !important;
}

.WaGadgetUpcomingEvents a:hover {
  color: #fff !important;
}

/* ---- WA BRANDING BAR ---- */
.zoneWAbranding {
  background-color: var(--warm-wh) !important;
  border-top: 1px solid var(--warm-wh) !important;
}

.zoneWAbranding a {
  color: #334155 !important;
}

/* ---- SYSTEM / ALERT MESSAGES ---- */
.systemMessage,
.WaSystemMessage,
.errorMessage {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  border-left: 4px solid var(--gold) !important;
  background-color: var(--gold-pale) !important;
  color: var(--navy) !important;
  padding: 12px 16px !important;
}

/* ---- TOPBAR (HTML gadget injected above logo zone) ----
   Classes used by wildapricot-header-html.html snippet            */
.iao-topbar {
  background: var(--navy) !important;
  border-bottom: 2px solid var(--gold) !important;
  padding: 7px 0 !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
}
.iao-topbar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.iao-topbar-announce {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}
.iao-topbar-announce a {
  color: var(--gold-lt) !important;
  text-decoration: none !important;
}
.iao-topbar-announce a:hover { color: #fff !important; }
.iao-topbar-links {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
}
.iao-topbar-links a {
  color: #94A3B8 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.iao-topbar-links a:hover { color: var(--gold-lt) !important; }
.iao-topbar-divider {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  display: inline-block !important;
}

/* ---- STICKY NAV ---- */
.zoneHeader2 {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 4px 16px rgba(12,35,64,0.10) !important;
}

/* ---- LOGO ZONE — height + vertical centering ---- */
/* Only target the innermost gadget container — avoids breaking WA's layout grid */
.zoneHeader1 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.zoneHeader1 .gadgetContentEditableArea {
  display: flex !important;
  align-items: center !important;
}
/* Logo image — cap height, preserve aspect ratio */
.zoneHeader1 img {
  max-height: 64px !important;
  width: auto !important;
  display: block !important;
}
h1.promo {
  margin: 0 !important;
  line-height: 1.1 !important;
}

/* ---- NAV CENTERING ---- */
.menuInner {
  text-align: center !important;
}
.menuInner ul.firstLevel {
  display: inline-flex !important;
  justify-content: center !important;
}

/* ---- DROPDOWN CHEVRONS ---- */
/* WA renders expand arrows as border triangles on .item or via span.arrow */
.menuInner .hasChildren > .item::after,
.menuInner .hasChildren > .item > a::after {
  border-top-color: var(--gold-lt) !important;
  border-bottom-color: var(--gold-lt) !important;
}
.menuInner .hasChildren.open > .item::after,
.menuInner .hasChildren.open > .item > a::after {
  border-top-color: var(--gold) !important;
}
.menuInner .hasChildren > .item .arrow {
  border-top-color: var(--gold-lt) !important;
  opacity: 0.85 !important;
}

/* ---- FOCUS RINGS ---- */
/* Restore visible focus for keyboard users (navy outline removed by theme) */
.menuInner a:focus-visible,
.menuInner a:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}
.mobilePanel a:focus-visible,
.mobilePanel a:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px !important;
}

/* ---- WA LOGIN GADGET ---- */
/* ROOT CAUSE OF THE "NAVY BANDS IN THE POPUP":
   The login icon lives in the logo zone (above the nav). When the popup
   drops down it crosses over .zoneHeader2, which is position:sticky with
   z-index:1000. The nav therefore PAINTS ON TOP of the middle of the popup
   — that's the navy band (and you can see the nav's gold top border and
   menu items inside it). It was never a background-color problem.
   Fix: lift the login gadget + its popup above the sticky nav.            */
.loginContainer,
.WaGadgetLogin {
  position: relative !important;
  z-index: 1100 !important;
}

.loginPanel {
  z-index: 1100 !important;
}

/* Panel cosmetics — white card matching the redesign */
.loginPanel {
  background-color: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--rule) !important;
  box-shadow: 0 8px 32px rgba(12,35,64,0.18) !important;
  border-radius: 4px !important;
}

.loginPanel input[type="text"],
.loginPanel input[type="password"] {
  background-color: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--rule) !important;
  /* WA renders a person/lock icon as a left background-image inside the
     input; pad the text over so it no longer overlaps the icon */
  padding-left: 24px !important;
  background-repeat: no-repeat !important;
  background-position: 11px center !important;
}

.loginPanel input[type="submit"],
.loginPanel .loginButton {
  background-color: var(--gold) !important;
  color: #fff !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  width: 100% !important;
  padding: 11px 26px !important;
  cursor: pointer !important;
}

.loginPanel label {
  color: var(--navy) !important;
}

.loginPanel a {
  color: var(--navy) !important;
}
.loginPanel a:hover {
  color: var(--gold) !important;
}

/* Eye icon for password toggle */
.loginPanel .toggle-password {
  color: var(--muted) !important;
  cursor: pointer !important;
}

/* The "Log in" trigger link in the header stays as a white ghost button */
.loginContainer .loginLink,
.loginContainer .logoutLink,
.loginContainer .memberLink {
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  background-color: transparent !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  padding: 7px 16px !important;
  transition: all 0.15s !important;
  display: inline-block !important;
}
.loginContainer .loginLink:hover,
.loginContainer .logoutLink:hover,
.loginContainer .memberLink:hover {
  border-color: var(--gold-lt) !important;
  color: var(--gold-lt) !important;
}

/* ---- MEMBERS-ONLY INLINE LOGIN ---- */
/* On WA's members-only gate page the login gadget is embedded directly in
   the content zone (not a header dropdown). The header position/z-index
   rules above would push it behind the page background — reset them here. */
/* WA flags this login gadget as full-site-only (.WaGadgetOnly) and its mobile
   theme collapses the whole gadget wrapper to display:none — so on phones the
   inner-panel un-hide below has nothing to show (panel computes to w:0 h:0).
   Force the content-zone login GADGET wrapper visible so the members-only gate
   renders on mobile too. (Scoped to the content zone; header gadgets that are
   correctly mobile-hidden are untouched.) */
.zoneContent .WaGadgetLoginForm,
.WaPlaceHolderContent .WaGadgetLoginForm {
  display: block !important;
}

.zoneContent .loginContainer,
.WaPlaceHolderContent .loginContainer {
  position: static !important;
  z-index: auto !important;
  display: flex !important;
  justify-content: center !important;
  padding: 40px 16px !important;
}

.zoneContent .loginPanel,
.WaPlaceHolderContent .loginPanel {
  position: static !important;
  z-index: auto !important;
  display: block !important;
  /* WA builds .loginPanel as a header dropdown that ships visibility:hidden +
     opacity:0 until a click "opens" it. Inline on the members-only gate there
     is no trigger, so the whole form (OAuth buttons, email/password inputs,
     submit) stays painted-but-invisible — boxes have correct size and color
     yet nothing shows. visibility:hidden inherits, so this one reset un-hides
     the entire form. (Scoped to the content zone so the header popup, which
     SHOULD start hidden, is untouched.) */
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 36px !important;
}

/* The "Log in" trigger link is a header-only affordance — hide it inline */
.zoneContent .loginLink,
.WaPlaceHolderContent .loginLink {
  display: none !important;
}

/* ---- OAUTH SOCIAL BUTTONS (Google, Microsoft, Apple) ----
   WildApricot ships these as solid brand-colored buttons (Apple = black,
   Google = blue #4285f4, Microsoft = #2f2f2f) with WHITE text and white/
   brand logos — a matched, accessible, brand-guideline-compliant set.
   We deliberately DO NOT recolor the backgrounds. The previous version
   forced `background:#fff`, which left WA's white text + Apple's white
   logo washed out on white. Here we only adjust LAYOUT (full-width,
   spacing, radius, font) and keep the brand backgrounds intact.

   Text must be set white EXPLICITLY and with high specificity: the global
   `a { color: var(--navy) !important }` rule (line ~103) otherwise turns
   this text navy-on-dark and re-creates the invisibility. WA itself uses
   no !important on these, so this wins cleanly. */
.wa-authenticateLoginLink {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 16px !important;
  margin-bottom: 8px !important;
  border-radius: 4px !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.15s !important;
}

/* Keep WA's intended white text/logo on the brand backgrounds, beating the
   global navy `a` rule. */
.oAuthButtonsContainer a.wa-authenticateLoginLink,
.oAuthButtonsContainer a.wa-authenticateLoginLink .authenticateLoginText,
.wa-authenticateLoginLink,
.wa-authenticateLoginLink .authenticateLoginText {
  color: #fff !important;
}

.wa-authenticateLoginLink:hover {
  opacity: 0.85 !important;
}

/* Divider between OAuth block and email/password form */
.oAuthButtonsContainer {
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--rule) !important;
}

/* Field row spacing */
.loginUserName,
.loginPassword {
  margin-bottom: 14px !important;
}

/* Remember me checkbox row */
.loginActionRememberMe {
  margin: 12px 0 !important;
  font-family: 'Figtree', 'Arial', sans-serif !important;
  font-size: 14px !important;
  color: var(--muted) !important;
}

/* Forgot password link */
.loginPasswordForgot {
  margin-top: 14px !important;
  text-align: center !important;
  font-size: 13.5px !important;
}

.loginPasswordForgot a {
  color: var(--muted) !important;
  text-decoration: underline !important;
}

.loginPasswordForgot a:hover {
  color: var(--navy) !important;
}

/* ---- CONTENT EDITOR — navy bleed-through fix ---- */
/* WA's TinyMCE editor copies the page's custom CSS into its editing iframe.
   Our body{background:navy} follows it in, making typed text invisible.
   .mceContentBody = TinyMCE 4; .mce-content-body = TinyMCE 5+.
   Reset the editor frame body to white so the editor remains usable.     */
.mceContentBody,
body.mceContentBody,
.mce-content-body,
body.mce-content-body {
  background-color: #fff !important;
  color: var(--text) !important;
}

/* Catch any inline contenteditable gadgets WA uses outside TinyMCE */
[contenteditable="true"],
[contenteditable=""] {
  background-color: #fff !important;
  color: var(--text) !important;
}

/* ---- BACKGROUND IMAGE GADGETS ---- */
/* WA content gadgets can have background-image set via inline style.
   Our warm-white rule on .gadgetContentEditableArea would cover the image;
   this resets the inner body to transparent so the image shows through. */
[style*="background-image"] .gadgetStyleBody,
[style*="background-image"] .gadgetContentEditableArea {
  background-color: transparent !important;
}

/* ---- HEADER BANNER FIX ---- */
/* Hide the banner gif that appears on inner pages */
img[src*="Banner-2"] {
  display: none !important;
}

/* Inject org name — target the <p> that holds the hidden image */
.zoneHeader1 p:has(img[src*="Banner-2"])::after {
  content: 'Indiana Academy of Ophthalmology';
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  display: block !important;
}

/* ---- MOBILE ---- */
@media (max-width: 768px) {
  h1 { font-size: 28px !important; }
  h1.promo { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 19px !important; }
  h4 { font-size: 16px !important; }

  /* Topbar: hide announcement, keep links right-aligned */
  .iao-topbar-announce { display: none !important; }
  .iao-topbar-inner { justify-content: flex-end !important; }

  /* Hide the desktop horizontal nav on mobile — the .mobilePanel hamburger
     handles navigation. This also removes the stray inset gold line, which
     was this nav's leftover border-top floating in the header. */
  .zoneHeader2 { display: none !important; }

  /* RESPONSIVE MEDIA — the key overflow fix.
     A fixed-width iframe (event embed/video, ~560px) and oversized promo
     images push the page wider than the viewport; mobile Safari then shrinks
     the whole page to fit, which is what makes the right side look
     "pixelated"/blurry. Constrain all embedded media to the column width. */
  img,
  iframe,
  embed,
  object,
  video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* WA LAYOUT TABLES — the remaining overflow source.
     WA builds multi-column layouts (header logo row, footer columns, home
     content panels) with <table class="WaLayoutTable"> whose cells render at
     fixed content-box widths (~370–398px), overrunning the viewport's right
     edge. Block-stack every layout table on mobile so each cell becomes a
     full-width single-column block — fixes the overflow site-wide and is the
     correct responsive behavior for these columns. (Data tables use a
     separate rule below: .gadgetContentEditableArea table -> overflow-x.) */
  .WaLayoutTable,
  .WaLayoutTable > tbody,
  .WaLayoutTable > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .WaLayoutItem {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header LOGO LOCKUP — eye + title side by side in one centered group.
     The global rule above block-stacks every .WaLayoutItem; here we override
     the header's row to flex so the eye logo cell and the title cell sit on
     one line, vertically centered, packed together as a single brand lockup
     (instead of stacked cells separated by gold rules and dead space). */
  .zoneHeader1 .WaLayoutTable > tbody > tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }
  .zoneHeader1 .WaLayoutItem {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Eye cell never shrinks; drop the empty layout cell (no logo, no title) */
  .zoneHeader1 .WaLayoutItem:has(img) { flex: 0 0 auto !important; }
  .zoneHeader1 .WaLayoutItem:not(:has(img)):not(:has(h1)) { display: none !important; }
  /* Zero out the wrapper padding/margins WA bakes into the header gadgets. The
     unnamed div inside .WaPlaceHolderHeader carries a padding-top:20px that
     pushes the eye+title ~15px below the zone's vertical center (so they sat
     lower than the hamburger/login icons); zero the placeholder subtree so the
     lockup centers on the same line as the buttons. */
  .zoneHeader1 .WaLayoutContainerOnly,
  .zoneHeader1 .WaLayoutPlaceHolder,
  .zoneHeader1 .placeHolderContainer,
  .zoneHeader1 .WaGadgetContent,
  .zoneHeader1 .gadgetStyleBody,
  .zoneHeader1 .WaPlaceHolderHeader,
  .zoneHeader1 .WaPlaceHolderHeader > div {
    padding: 0 !important;
    margin: 0 !important;
  }
  .zoneHeader1 .WaLayoutSeparator { display: none !important; }

  /* GOLD RULE under the lockup — ONE clean full-width line. WA bakes a pale 1px
     border-bottom (rgb(212,196,160)) onto each layout cell; kill those (the
     single zone border below replaces them). */
  .zoneHeader1 .WaLayoutItem { border-bottom: none !important; }

  /* ONE-ROW HEADER — hamburger + eye + title + login on a single fixed-height
     row. WA renders the hamburger/login bar (.mobilePanelContainer) as its own
     band ABOVE the eye+title lockup (.zoneHeader1); both are children of the
     position:relative .mLayout.layoutMain. Lift the bar out of flow (absolute)
     so the lockup rises to the top, pin the buttons to the left/right edges, and
     give the zone a FIXED height so the buttons and the eye+title share one
     vertical center. Side padding clears the buttons; the gold line sits under
     the whole row. */
  .zoneHeader1 {
    height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 50px !important;
    box-sizing: border-box !important;
    border-bottom: 2px solid var(--gold) !important;
    /* Stick the header to the top on scroll. No ancestor has overflow!=visible,
       so sticky resolves against the viewport; the fixed button bar above rides
       along at the same top:0. z-index keeps it above scrolling content. */
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
  }
  /* WA wraps the eye gadget in an unnamed div with padding:12px 0 0 50px — that
     50px left padding shoves the eye ring to the right of its cell, so the
     visible eye+title group sat ~25px right of center. Zero the horizontal
     padding (keep the top padding; vertical alignment is already tuned) so the
     lockup centers in the viewport between the hamburger and login. */
  .zoneHeader1 .placeHolderContainer > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Title: compact so it fits two lines beside the eye within the row height */
  .zoneHeader1 h1.promo {
    font-size: 16px !important;
    line-height: 1.15 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .zoneHeader1 img { max-height: 50px !important; }
  /* WA's header table sits ~5px below the zone's geometric center (uneven box
     metrics in the gadget wrappers), leaving the eye+title slightly low vs the
     hamburger/login icons. Nudge the lockup up so all four share one centerline. */
  .zoneHeader1 .WaLayoutTable {
    transform: translateY(-5px) !important;
  }

  /* position:fixed (not absolute) so the hamburger/login bar STAYS pinned to the
     top of the viewport on scroll, together with the sticky lockup below. */
  .mobilePanelContainer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50 !important;
  }
  /* Buttons anchor to .mobilePanel (position:relative); full row height so the
     icons line up with the eye/title vertical center. */
  .mobilePanelButton.buttonMenu,
  .mobilePanelButton.buttonLogin {
    position: absolute !important;
    top: 0 !important;
    height: 90px !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
  }
  .mobilePanelButton.buttonMenu  { left: 0 !important; }
  .mobilePanelButton.buttonLogin { right: 0 !important; }
  /* The icons are ::before pseudo-elements WA pins at top:0 (a 50x50 box), so
     flex centering on the button can't move them. Center the pseudo itself so
     the hamburger/login glyphs line up with the eye + title vertical center. */
  .mobilePanelButton.buttonMenu::before,
  .mobilePanelButton.buttonLogin::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  /* Open menu drops BELOW the row. WA positions .menuInner absolute when open;
     pin it flush under the 90px header row (its auto top otherwise leaves a gap
     where the content background shows through). */
  .mobilePanel .menuInner {
    position: absolute !important;
    top: 90px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    /* The bar is fixed, so the open menu is effectively viewport-pinned. Cap it
       to the space below the header and scroll internally, so a long menu's
       lower items stay reachable instead of being cut off the bottom.
       iOS Safari: 100vh = the LARGEST viewport (toolbar retracted), so it runs
       the menu's bottom behind the visible Safari toolbar and the last item gets
       lost/unreachable. 100dvh tracks the CURRENTLY VISIBLE height (dynamic
       toolbar excluded) and fixes it; the vh line stays first as a fallback for
       browsers without dvh. Bottom padding clears the home indicator. */
    max-height: calc(100vh - 90px) !important;
    max-height: calc(100dvh - 90px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  /* Bigger touch targets in the WA mobile panel (min ~44px per WCAG) */
  .mobilePanel .firstLevel > li > .item > a {
    padding: 16px 20px !important;
    font-size: 15px !important;
  }

  /* iOS Safari auto-zoom prevention: inputs below 16px trigger zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Tables: horizontal scroll instead of overflowing the viewport */
  .gadgetContentEditableArea table,
  .WaGadgetEvents table,
  .WaGadgetUpcomingEvents table,
  .eventTable,
  table.tablesorter {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Buttons: full width for easy tapping */
  input[type="submit"],
  .buttonLink,
  .WaButtonText,
  a.button {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Content zones: tighter side padding */
  .zoneContent,
  .WaPlaceHolderContent {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Very small phones: hide topbar entirely, tighten further */
@media (max-width: 480px) {
  .iao-topbar { display: none !important; }

  h1 { font-size: 24px !important; }
  h1.promo { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 17px !important; }
  h4 { font-size: 15px !important; }

  .zoneHeader1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .zoneHeader1 img { max-height: 44px !important; }

  /* Stack WA multi-column content cells on very narrow screens */
  td[style*="width: 50%"],
  td[style*="width:50%"],
  td[style*="width: 33%"],
  td[style*="width:33%"] {
    display: block !important;
    width: 100% !important;
  }

  .zoneContent,
  .WaPlaceHolderContent {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}