/* ===== Top-level menu: orange, white text, no hover change ===== */
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover > .item,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:hover,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:focus,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover > .item > a,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:hover > .item > a > span {
  background-color: #FF861C !important;
  background-image: none !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ===== Current section: blue ===== */
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel:hover,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a:hover,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a > span,
html body .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel:hover > .item > a > span {
  background-color: #258BB0 !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* ===== Dropdown menus: orange, white text ===== */
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li:hover,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item a,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item a:link,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item a:visited,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item a:hover,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item a:focus,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel li .item a span,
html body .WaGadgetMenuHorizontal .menuInner li.phantom ul li .item a,
html body .WaGadgetMenuHorizontal .menuInner li.phantom ul li .item a span {
  background-color: #FF861C !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

/* ===== Current page in dropdown: blue ===== */
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel > li.sel > .item > a,
html body .WaGadgetMenuHorizontal .menuInner ul.secondLevel > li.sel > .item > a > span {
  background-color: #258BB0 !important;
  color: #FFFFFF !important;
}

/* ===== Links in page content in blue ===== */
html body .gadgetContentEditableArea a,
html body .gadgetContentEditableArea a:link,
html body .gadgetContentEditableArea a:visited,
html body .gadgetContentEditableArea a:hover,
html body .gadgetContentEditableArea a:focus,
html body .gadgetContentEditableArea a:active,
html body .gadgetContentEditableArea a font,
html body .gadgetContentEditableArea a span {
  color: #258BB0 !important;
}

/* ===== Login gadget links (name, Change password, Log out) ===== */
html body [class*="WaGadgetLogin"] a,
html body [class*="WaGadgetLogin"] a:link,
html body [class*="WaGadgetLogin"] a:visited,
html body [class*="WaGadgetLogin"] a:hover,
html body [class*="WaGadgetLogin"] a:focus,
html body [class*="WaGadgetLogin"] a span {
  color: #258BB0 !important;
}

/* ===== Application form buttons (Next, Back, Submit), site-wide ===== */
html body #idGeneralFormContainer .navigationContainer input[type="submit"],
html body #idGeneralFormContainer .navigationContainer input[type="button"],
html body #idGeneralFormContainer .navigationContainer input[type="submit"]:hover,
html body #idGeneralFormContainer .navigationContainer input[type="button"]:hover,
html body #idGeneralFormContainer .navigationContainer input[type="submit"]:focus,
html body #idGeneralFormContainer .navigationContainer input[type="button"]:focus,
html body input.nextButton,
html body input.nextButton:hover,
html body input.nextButton:focus {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #FF861C !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid #FF861C !important;
  border-radius: 4px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}
/* ===== Wild Apricot system buttons (Edit profile, Change membership level, etc.) ===== */
html body input.typeButton,
html body input.typeButton:hover,
html body input.typeButton:focus,
html body input.typeButton:active {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #FF861C !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid #FF861C !important;
  border-radius: 4px !important;
  padding: 10px 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}

/* ===== Profile tabs ===== */
html body ul.memberDetailsTabMenu {
  border-bottom: 1px solid #DDDDDD !important;
  margin-bottom: 24px !important;
}

html body ul.memberDetailsTabMenu li a,
html body ul.memberDetailsTabMenu li a:link,
html body ul.memberDetailsTabMenu li a:visited,
html body ul.memberDetailsTabMenu li a:hover,
html body ul.memberDetailsTabMenu li > span,
html body ul.memberDetailsTabMenu li > div > span {
  display: inline-block !important;
  color: #545454 !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  border-bottom: 3px solid transparent !important;
}

/* Current tab */
html body ul.memberDetailsTabMenu li.selected a,
html body ul.memberDetailsTabMenu li.selected span {
  color: #258BB0 !important;
  font-weight: 600 !important;
  border-bottom: 3px solid #258BB0 !important;
}

/* ===== Hide unused tabs ===== */
html body #memberPhotoGalleryShowLink,
html body #donationsShowLink {
  display: none !important;
}
/* ===== Profile section bars (Membership details, etc.) ===== */

/* Clear the peach from every layer of the bar */
html body .captionOuterContainer,
html body .captionOuterContainer .captionContainer,
html body .captionOuterContainer .captionContainer div {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* Hide the old rounded-corner pieces */
html body .captionOuterContainer .cornersContainer {
  display: none !important;
}

/* New light grey bar */
html body .captionOuterContainer > .captionContainer {
  background: #F4F7F9 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin: 24px 0 16px !important;
}

/* Align the title to the left edge */
html body .captionOuterContainer .fieldLabel {
  display: none !important;
}

html body .captionOuterContainer .fieldBody {
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Section title */
html body .captionOuterContainer h4 {
  color: #258BB0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
}

html body .captionOuterContainer .membershipActionButtonRow {
  margin: 0 !important;
}

/* Hide empty bars with no title */
html body .captionOuterContainer:not(:has(h4)) {
  display: none !important;
}
/* ===== Social login buttons: keep text white ===== */
html body [class*="WaGadgetLogin"] a:has(img),
html body [class*="WaGadgetLogin"] a:has(svg),
html body [class*="WaGadgetLogin"] a:has(img) *,
html body [class*="WaGadgetLogin"] a:has(svg) *,
html body [class*="WaGadgetLogin"] button,
html body [class*="WaGadgetLogin"] button * {
  color: #FFFFFF !important;
}