.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.authenticated .loginLink:hover
 {
    background: #9b6a6c;
    color: white;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.authenticated .loginLink
 {
    background: #b09398;
    color: white;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.loginLink:hover
 {
    background: #9b6a6c;
    color: white;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.authenticated.loginContainer.authenticated .loginLink.hover {
    background: #9b6a6c;
    color: white;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink {
    background: #b09398;
    color: white;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink.hover {
    background: #9b6a6c;
    color: white;
}
.WaGadgetLoginForm.LoginFormStyle002 .loginContainer.loginContainer .loginLink:hover {
    background: #9b6a6c;
    color: white;
}
.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner {
    position: relative;
    margin: 0;
    background: #9b6a6c;
}
.WaGadgetMobilePanel .mobilePanel {
    position: relative;
    height: 50px;
    background: #9b6a6c;
    color: white;
}
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton:active, .WaGadgetMobilePanel .mobilePanel .mobilePanelButton.active {
    background: #86bbd8;
    color: white;
}

/* ====== MiTiN member profile styling ======================================
   Public profile  .WaGadgetMemberPublicProfile
   My profile / Edit profile  .WaGadgetContactProfile
   Targets Wild Apricot's template structure, never field IDs, so fields
   added later are styled automatically.
   Doubled classes (td.left.left, input.typeButton.typeButton) raise
   specificity; WA's own stylesheets load after this file and otherwise win.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600&family=Libre+Franklin:wght@400;500;600&display=swap");

.WaGadgetMemberPublicProfile,
.WaGadgetContactProfile {
  --mp-baltic: #33658A;
  --mp-rose: #9B6A6C;
  --mp-ink: #1B2735;
  --mp-ink-soft: #67778A;
  --mp-rule: #E3DCD4;
  --mp-chip: #F3EBE3;
  --mp-surface: #FFFFFF;
  --mp-paper: #FAF7F3;
  --mp-display: "Literata", Georgia, "Times New Roman", serif;
  --mp-ui: "Libre Franklin", "Lato", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--mp-ui);
  color: var(--mp-ink);
}

.WaGadgetMemberPublicProfile .cornersContainer,
.WaGadgetContactProfile .cornersContainer,
.WaGadgetMemberPublicProfile .clearEndContainer,
.WaGadgetContactProfile .clearEndContainer { display: none; }

.WaGadgetMemberPublicProfile .d1, .WaGadgetMemberPublicProfile .d2,
.WaGadgetMemberPublicProfile .d3, .WaGadgetMemberPublicProfile .d4,
.WaGadgetMemberPublicProfile .d5, .WaGadgetMemberPublicProfile .d6,
.WaGadgetMemberPublicProfile .d7, .WaGadgetMemberPublicProfile .d8,
.WaGadgetMemberPublicProfile .d9,
.WaGadgetContactProfile .d1, .WaGadgetContactProfile .d2,
.WaGadgetContactProfile .d3, .WaGadgetContactProfile .d4,
.WaGadgetContactProfile .d5, .WaGadgetContactProfile .d6,
.WaGadgetContactProfile .d7, .WaGadgetContactProfile .d8,
.WaGadgetContactProfile .d9 { background: none; padding: 0; margin: 0; }

.WaGadgetMemberPublicProfile .pageBackContainer a,
.WaGadgetContactProfile .pageBackContainer a {
  font-size: 13px; font-weight: 500; color: var(--mp-ink-soft);
  text-decoration: none; letter-spacing: .02em;
}
.WaGadgetMemberPublicProfile .pageBackContainer a:hover,
.WaGadgetContactProfile .pageBackContainer a:hover { color: var(--mp-baltic); }

.WaGadgetMemberPublicProfile .profileHeaderContainer,
.WaGadgetContactProfile .profileHeaderContainer {
  border-bottom: 2px solid var(--mp-baltic);
  padding-bottom: 14px; margin-bottom: 26px;
}
.WaGadgetMemberPublicProfile .memberDirectoryDetailsHeaderContainer h2,
.WaGadgetContactProfile .memberDirectoryDetailsHeaderContainer h2 {
  font-family: var(--mp-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 600; line-height: 1.15; color: var(--mp-ink);
  text-transform: none; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}

/* Tab strip: padding and underline sit on the li, never the a or span --
   WA toggles those with inline display styles. */
.WaGadgetContactProfile ul.memberDetailsTabMenu {
  display: flex; flex-wrap: wrap; gap: 2px;
  list-style: none; margin: 0 0 24px; padding: 0;
  border-bottom: 1px solid var(--mp-rule);
}
.WaGadgetContactProfile ul.memberDetailsTabMenu li {
  margin: 0; padding: 9px 15px; background: none; list-style: none;
  border-bottom: 2px solid transparent;
}
.WaGadgetContactProfile ul.memberDetailsTabMenu li.selected { border-bottom-color: var(--mp-baltic); }
.WaGadgetContactProfile ul.memberDetailsTabMenu li a,
.WaGadgetContactProfile ul.memberDetailsTabMenu li span {
  font-family: var(--mp-ui); font-size: 13px; font-weight: 500;
  letter-spacing: .02em; color: var(--mp-ink-soft); text-decoration: none;
}
.WaGadgetContactProfile ul.memberDetailsTabMenu li.selected span { color: var(--mp-ink); font-weight: 600; }
.WaGadgetContactProfile ul.memberDetailsTabMenu li a:hover { color: var(--mp-baltic); }

.WaGadgetMemberPublicProfile .captionOuterContainer .fieldBody h4,
.WaGadgetContactProfile .captionOuterContainer .fieldBody h4 {
  font-family: var(--mp-ui); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--mp-ink-soft); margin: 24px 0 0;
}
.WaGadgetMemberPublicProfile .captionOuterContainer .fieldLabel,
.WaGadgetContactProfile .captionOuterContainer .fieldLabel { display: none; }

.WaGadgetMemberPublicProfile .sectionContainer,
.WaGadgetContactProfile .sectionContainer {
  background: var(--mp-surface); border: 1px solid var(--mp-rule);
  border-radius: 4px; padding: 4px 20px; margin: 10px 0 20px;
}
.WaGadgetMemberPublicProfile .fieldContainer,
.WaGadgetContactProfile .fieldContainer { padding: 0; margin: 0; border: 0; }

/* Flex, not grid: some rows hold label and value as siblings, others wrap
   them in a two-cell table. Flex handles both without telling them apart. */
.WaGadgetMemberPublicProfile .fieldSubContainer,
.WaGadgetContactProfile .fieldSubContainer {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 26px; padding: 8px 0;
  border-top: 1px solid var(--mp-rule);
}
.WaGadgetMemberPublicProfile .sectionContainer .fieldContainer:first-of-type .fieldSubContainer,
.WaGadgetContactProfile .sectionContainer .fieldContainer:first-of-type .fieldSubContainer { border-top: 0; }
.WaGadgetMemberPublicProfile .fieldSubContainer .fieldLabel,
.WaGadgetContactProfile .fieldSubContainer .fieldLabel { flex: 0 0 215px; }
.WaGadgetMemberPublicProfile .fieldSubContainer .fieldBody,
.WaGadgetContactProfile .fieldSubContainer .fieldBody { flex: 1 1 0; }

.WaGadgetContactProfile .fieldSubContainer table {
  flex: 1 1 100%; width: 100%; margin: 0;
  border-collapse: collapse; table-layout: fixed;
}
.WaGadgetContactProfile .fieldSubContainer table td { border: 0; background: none; vertical-align: top; }
.WaGadgetContactProfile .fieldSubContainer table td.left.left { width: 215px; padding: 0 26px 0 0; }
.WaGadgetContactProfile .fieldSubContainer table td.right.right { width: auto; padding: 0; }

.WaGadgetMemberPublicProfile .fieldLabel,
.WaGadgetContactProfile .fieldLabel {
  float: none !important; width: auto !important; text-align: left !important;
  margin: 0 !important; padding: 0 !important;
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mp-ink-soft); line-height: 1.5;
}
.WaGadgetMemberPublicProfile .fieldBody,
.WaGadgetContactProfile .fieldBody {
  float: none !important; width: auto !important;
  margin: 0 !important; padding: 0 !important;
  font-size: 15.5px; line-height: 1.55; color: var(--mp-ink); min-width: 0;
}
.WaGadgetMemberPublicProfile .fieldBody a,
.WaGadgetContactProfile .fieldBody a { color: var(--mp-baltic); text-decoration: underline; }
.WaGadgetContactProfile .fieldLabel .mandatorySymbol { color: var(--mp-rose); margin-right: 3px; }
.WaGadgetContactProfile .fieldLabel .mandatoryLabel { font-weight: 600; color: var(--mp-ink-soft); }

.WaGadgetMemberPublicProfile .fieldBody ul.list,
.WaGadgetContactProfile .fieldBody ul.list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.WaGadgetMemberPublicProfile .fieldBody ul.list li,
.WaGadgetContactProfile .fieldBody ul.list li { margin: 0; padding: 0; list-style: none; background: none; }
.WaGadgetMemberPublicProfile .fieldBody ul.list li span.label,
.WaGadgetContactProfile .fieldBody ul.list li span.label {
  display: inline-block; font-size: 13px; line-height: 1.4;
  padding: 4px 11px; border-radius: 999px;
  background: var(--mp-chip); border: 1px solid var(--mp-rule); color: var(--mp-ink);
}

/* .typeText is Wild Apricot's own class on text inputs and textareas. */
.WaGadgetContactProfile .fieldBody input.typeText,
.WaGadgetContactProfile .fieldBody textarea.typeText,
.WaGadgetContactProfile .fieldBody select {
  font-family: var(--mp-ui); font-size: 15px; color: var(--mp-ink);
  background: var(--mp-paper); border: 1px solid var(--mp-rule);
  border-radius: 3px; padding: 8px 10px; max-width: 100%; box-sizing: border-box;
}
.WaGadgetContactProfile .fieldBody textarea.typeText { line-height: 1.5; }
.WaGadgetContactProfile .fieldBody input.typeText:focus,
.WaGadgetContactProfile .fieldBody textarea.typeText:focus,
.WaGadgetContactProfile .fieldBody select:focus {
  outline: 2px solid var(--mp-baltic); outline-offset: 1px; border-color: var(--mp-baltic);
}
.WaGadgetContactProfile .fieldBody .fieldItem { margin: 0 0 3px; font-size: 14.5px; }

.WaGadgetMemberPublicProfile input.typeButton.typeButton,
.WaGadgetContactProfile input.typeButton.typeButton {
  font-family: var(--mp-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: none;
  padding: 9px 18px; border: 0; border-radius: 3px;
  background: var(--mp-baltic); color: #fff; cursor: pointer; line-height: 1.2;
}
.WaGadgetMemberPublicProfile input.typeButton.typeButton:hover,
.WaGadgetContactProfile input.typeButton.typeButton:hover { background: #2A5473; }

.WaGadgetMemberPublicProfile .pictureViewContainer .fieldBody img,
.WaGadgetContactProfile .pictureViewContainer .fieldBody img {
  border-radius: 4px; border: 1px solid var(--mp-rule);
  max-width: 180px; height: auto; display: block;
}

@media (max-width: 640px) {
  .WaGadgetMemberPublicProfile .fieldSubContainer .fieldLabel,
  .WaGadgetContactProfile .fieldSubContainer .fieldLabel { flex: 0 0 100%; }
  .WaGadgetContactProfile .fieldSubContainer table,
  .WaGadgetContactProfile .fieldSubContainer table tbody,
  .WaGadgetContactProfile .fieldSubContainer table tr,
  .WaGadgetContactProfile .fieldSubContainer table td.left.left,
  .WaGadgetContactProfile .fieldSubContainer table td.right.right {
    display: block; width: auto;
  }
  .WaGadgetContactProfile .fieldSubContainer table td.left.left { padding: 0 0 2px; }
  .WaGadgetContactProfile ul.memberDetailsTabMenu li { padding: 8px 11px; }
  .WaGadgetMemberPublicProfile .sectionContainer,
  .WaGadgetContactProfile .sectionContainer { padding: 4px 14px; }
}

/* Checkbox and radio groups flow into columns rather than one per line.
   "Work Languages" alone offers 217 options, which Wild Apricot stacks
   vertically. The column width is a minimum, so short groups (2 or 3
   options) sit side by side too, and any multi-select added later behaves
   the same way. */
.WaGadgetContactProfile .fieldBody .groupBodyVertical,
.WaGadgetContactProfile .fieldBody .groupBodyHorizontal {
  columns: 170px;
  column-gap: 20px;
}
.WaGadgetContactProfile .fieldBody .groupBodyVertical .fieldItem,
.WaGadgetContactProfile .fieldBody .groupBodyHorizontal .fieldItem {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 0 2px; font-size: 14.5px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}

@media (max-width: 640px) {
  .WaGadgetContactProfile .fieldBody .groupBodyVertical,
  .WaGadgetContactProfile .fieldBody .groupBodyHorizontal {
    columns: 145px; column-gap: 14px;
  }
}