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

/* HIDE MENU ITEMS IF LOGGED IN */
/* Desktop dropdown menu */
body.cal-user-logged-in .menuInner li:has(> .item > a[href*="/dmn"]) {
  display: none !important;
}

/* Sidebar menu */
body.cal-user-logged-in #sticky-sidebar li:has(> a[href*="/dmn"]) {
  display: none !important;
}

/* Mobile menu */
.mobilePanel:has(.buttonLogin.logged) .menuInner ul.secondLevel > li:has(> .item > a[href*="/dmn"]) {
  display: none !important;
}
/* END HIDE MENU ITEMS */

/* =========================================================
   CAL-ISBOA BASE STYLE SYSTEM
   Controls:
   - Sitewide color variables
   - Global fonts and typography
   - Buttons
   - Login styling
   - Desktop menu
   - Mobile panel
   - Sticky header
   - Hero image mask
========================================================= */
/* Login */
#id_CRxxmyW_loginContainer{
  z-index: 999999;
}
.WaGadgetLoginButton .authenticated .loginPanel .loginBoxLogout {
  color: #fff!important;
}
/* END LOGIN */
/* EVENTS */
.WaGadgetEventsStateList .boxesList .boxesListItem {
    margin: 0;
    padding: 20px;
    border: 2px solid #f7f4f1;
    border-radius: 25px;
    box-shadow: 0 0 18px 13px #f7f4f182;
}
/* END EVENTS */

.styledBorderRight {
  border-radius: 100px 10px 20px;
}
.styledBorderRight img {
  margin-bottom: -8px;
}
.styledBorderLeft {
  border-radius: 10px 100px 20px;
}
.styledBorderLeft img {
  margin-bottom: -8px;
}
@media screen and (max-width: 768px) {
.styledBorderLeft, .styledBorderRight {
  border-radius: 20px;
}
}
/* =========================================================
   01. Fonts + Sitewide Variables
========================================================= */
/* Quotes */

.quotedText, .gadgetStyle002 .quotedText  {
    border-left: 0px solid #0f948f;
 font-size: 24px;
 font-weight: 300;
}
.quotedText::after, .gadgetStyle002 .quotedText::after {
  content: close-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: 10px;
  position: relative;
  top: 35px;
  color: #ccc;
font-size: 4em;
font-family: open;
}
.quotedText:before, .gadgetStyle002 .quotedText:before {
  content: open-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: -10px;
  position: relative;
  top: 30px;
  color: #ccc;
font-size: 4em;
font-family: open;
}
/* END QUOTES */




:root {
  --cal-navy: #062b4f;
  --cal-navy-dark: #021d37;
  --cal-coral: #ef6655;
  --cal-coral-dark: #d94f42;
  --cal-cream: #f7f3ef;
  --cal-soft: #fbf8f5;
  --cal-border: #e7e0da;
  --cal-text: #17324d;
  --cal-muted: #5f6f7f;
  --cal-white: #ffffff;

  --cal-heading-font: "Playfair Display", Georgia, serif;
  --cal-body-font: "Inter", Arial, sans-serif;
}


/* =========================================================
   02. Utility Classes + Small Global Helpers
   Controls:
   - Hover lift effect
   - Mobile-only/non-mobile helpers
   - Vertical alignment helpers
========================================================= */
.WaContentDivider.dividerStyle006 {
    height: 2px;
    margin: 1em 0;
    background: #ef6655;
    max-width: 150px;
}
.hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-origin: center center;
  will-change: transform;
}

.hover:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 30px rgba(6, 43, 79, 0.14);
}

.vertAlign td {
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .non-mobile {
    display: none;
  }

  .mobileText {
    text-align: center !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* =========================================================
   03. Stat Item Layout
   Controls:
   - Icon + text stat blocks
   Used by:
   - .stat-item
========================================================= */

.stat-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cal-navy);
}

.stat-item img {
  width: 52px;
  height: auto;
  flex: 0 0 auto;
}

.stat-item > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-item h4 {
  margin: 0 0 4px;
  color: var(--cal-navy);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
}

.stat-item p,
.stat-item span {
  margin: 0;
  color: var(--cal-navy);
  font-size: 14px;
  line-height: 1.2;
}

.stat-item strong {
  font-weight: 700;
}


/* =========================================================
   04. Global Typography
   Controls:
   - Body font
   - Heading font
   - Heading sizes
   - Links
========================================================= */

html,
body {
  font-family: var(--cal-body-font) !important;
  line-height: 1.55;
}

body,
p,
li,
td,
th,
input,
textarea,
select,
button,
.WaGadget,
.WaGadget * {
  font-family: var(--cal-body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.gadgetStyleTitle,
.pageTitle,
.WaGadgetEventsStateDetails .pageTitleOuterContainer .pageTitleContainer h1,
.WaGadgetBlog .blogEntryOuterContainer .boxHeaderOuterContainer h4,
.WaGadgetBlogStateList .boxHeaderOuterContainer h4 {
  color: var(--cal-navy);
  font-family: var(--cal-heading-font) !important;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: none !important;
      margin: 0em;
}

.promo,
h1.promo,
.gadgetStyle002 h1.promo {
  font-size: clamp(42px, 3.8vw, 60px);
}

h1,
.pageTitle,
.gadgetStyle002 h1:not(.promo):not(.header):not(.h1Alt) {
  font-size: clamp(42px, 3.8vw, 60px);
}

h1.header,
.gadgetStyleNone h1.header,
.gadgetStyle002 h1.header {
  font-size: clamp(42px, 3.8vw, 60px);
}

h1.h1Alt,
.gadgetStyleNone h1.h1Alt,
.gadgetStyle002 h1.h1Alt {
  color: var(--cal-coral);
  font-family: var(--cal-body-font) !important;
  font-weight: 700;
  text-transform: uppercase !important;
  letter-spacing: 0.04em;
}

h2,
.gadgetStyle002 h2 {
  font-size: clamp(32px, 3.8vw, 36px);
}

h3,
.gadgetStyle002 h3 {
  font-size: clamp(24px, 2.5vw, 26px);
}

h4,
.gadgetStyle002 h4 {
  font-size: 21px;
  color: var(--cal-coral);
}

small,
.caption,
.hint,
.fieldSubContainer .fieldBody .fieldItem span.labelSubTitle {
  color: var(--cal-muted);
}

a {
  color: var(--cal-coral);
  text-decoration: none;
}

a:hover {
  color: var(--cal-coral-dark);
  text-decoration: none;
}

.cal-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--cal-coral);
  font-family: var(--cal-body-font);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* =========================================================
   05. Color / Background Helpers
   Controls:
   - Reusable background and text utility classes
========================================================= */

.cal-bg-navy {
  background: var(--cal-navy);
  color: var(--cal-white);
}

.cal-bg-navy h1,
.cal-bg-navy h2,
.cal-bg-navy h3,
.cal-bg-navy h4,
.cal-bg-navy p,
.cal-bg-navy li {
  color: var(--cal-white);
}

.cal-bg-cream {
  background: var(--cal-cream);
}

.cal-bg-soft {
  background: var(--cal-soft);
}

.cal-text-coral {
  color: var(--cal-coral) !important;
}

.cal-text-navy {
  color: var(--cal-navy) !important;
}


/* =========================================================
   06. Buttons
   Controls:
   - Custom .cal-button styles
   - Wild Apricot default submit/button styles
   - ButtonStyle001 through ButtonStyle005
========================================================= */

.cal-button,
a.cal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--cal-coral);
  color: var(--cal-white) !important;
  border: 2px solid var(--cal-coral);
  border-radius: 4px;
  font-family: var(--cal-body-font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-button:hover,
a.cal-button:hover {
  background: var(--cal-coral-dark);
  border-color: var(--cal-coral-dark);
  color: var(--cal-white) !important;
  transform: translateY(-1px);
}

.cal-button-outline,
a.cal-button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: transparent;
  color: var(--cal-navy) !important;
  border: 2px solid var(--cal-navy);
  border-radius: 4px;
  font-family: var(--cal-body-font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cal-button-outline:hover,
a.cal-button-outline:hover {
  background: var(--cal-navy);
  color: var(--cal-white) !important;
}

input[type="submit"],
input[type="button"],
button,
.navigationOuterContainer input.nextButton,
.navigationOuterContainer input.typeButton,
.WaGadgetEvents .registrationInfoContainer input[type="submit"],
.WaGadgetEvents input[type="submit"],
.WaGadgetMembershipApplication input[type="submit"],
.WaGadgetContactProfile input[type="submit"],
.WaGadgetForum input[type="submit"],
.WaGadgetBlog input[type="submit"],
.functionalButton,
.genericButton,
.buttonStyle001,
.buttonStyle001 a,
.buttonStyle002,
.buttonStyle002 a {
  padding: 13px 22px !important;
  background: var(--cal-coral) !important;
  color: var(--cal-white) !important;
  border: 2px solid var(--cal-coral) !important;
  border-radius: 4px !important;
  font-family: var(--cal-body-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.navigationOuterContainer input.nextButton:hover,
.navigationOuterContainer input.typeButton:hover,
.functionalButton:hover,
.genericButton:hover,
.buttonStyle001:hover,
.buttonStyle001 a:hover,
.buttonStyle002:hover,
.buttonStyle002 a:hover {
  background: var(--cal-coral-dark) !important;
  border-color: var(--cal-coral-dark) !important;
  color: var(--cal-white) !important;
}

a.buttonStyle003,
a:link.buttonStyle003 {
  padding: 13px 22px !important;
  background: var(--cal-navy);
  color: var(--cal-white) !important;
  border-radius: 4px !important;
  font-weight: 800;
}

a.buttonStyle003:hover,
a:link.buttonStyle003:hover {
  background: var(--cal-coral) !important;
  color: var(--cal-white) !important;
}

a.buttonStyle004,
a:link.buttonStyle004 {
  padding: 13px 22px !important;
  color: var(--cal-navy);
  background: transparent;
  border: 3px solid var(--cal-navy);
  border-radius: 10px !important;
  font-weight: 800;
}

a.buttonStyle004:hover,
a:link.buttonStyle004:hover {
  color: var(--cal-coral) !important;
  background: transparent;
  border: 3px solid var(--cal-coral) !important;
  border-radius: 10px !important;
}

a.buttonStyle005,
a:link.buttonStyle005 {
  padding: 13px 22px !important;
  color: var(--cal-white);
  background: transparent;
  border: 3px solid var(--cal-white);
  border-radius: 10px !important;
  font-weight: 800;
}

a.buttonStyle005:hover,
a:link.buttonStyle005:hover {
  color: var(--cal-coral) !important;
  background: transparent;
  border: 3px solid var(--cal-coral) !important;
  border-radius: 10px !important;
}

input[type="reset"],
.navigationOuterContainer input.prevButton,
input.cancelButton {
  padding: 13px 22px !important;
  background: transparent !important;
  color: var(--cal-navy) !important;
  border: 2px solid var(--cal-navy) !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
}

input[type="reset"]:hover,
.navigationOuterContainer input.prevButton:hover,
input.cancelButton:hover {
  background: var(--cal-navy) !important;
  color: var(--cal-white) !important;
}


/* =========================================================
   07. Login Button / Login Gadget
   Controls:
   - Header login button
   - Login icon
   - Login dropdown box
========================================================= */

.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink {
  width: 75px;
  font-weight: 800;
}
.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font: normal 12px/50px 'Inter';

  text-align: center;
  text-indent: 0;
  content: 'My Profile';

}
.WaGadgetLoginButton .loginContainer.loginContainer .loginLink::before {
  content: '\E613';
  margin-right: 6px;
  color: var(--cal-coral);
  font-family: WA-theme-icons;
}

.WaGadgetLoginButton .loginLink,
.WaGadgetLoginButton .loginLink:link,
.WaGadgetLoginButton .loginLink:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 !important;
  color: var(--cal-white) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--cal-body-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.WaGadgetLoginButton .loginLink:hover {
  color: var(--cal-coral) !important;
  background: transparent !important;
}

.WaGadgetLoginButton.authenticated .loginLink,
.WaGadgetLoginButton .authenticated .loginLink,
.WaGadgetLoginButton .loggedName,
.WaGadgetLoginButton .loginContainerAuthenticated .loginLink {
  color: var(--cal-navy) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--cal-body-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.WaGadgetLoginButton.authenticated .loginLink:hover,
.WaGadgetLoginButton .authenticated .loginLink:hover,
.WaGadgetLoginButton .loggedName:hover {
  color: var(--cal-coral) !important;
}

.WaGadgetLoginButton .loginBox,
.WaGadgetLoginButton .loginBoxLapsedMembership,
.WaGadgetLoginButton .loginBoxChangePassword {
  background: var(--cal-white) !important;
  color: var(--cal-text) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 16px 36px rgba(6, 43, 79, 0.14) !important;
  font-family: var(--cal-body-font) !important;
}

.WaGadgetLoginButton .loginBox a,
.WaGadgetLoginButton .loginBoxLapsedMembership a,
.WaGadgetLoginButton .loginBoxChangePassword a {
  color: var(--cal-navy) !important;
  font-weight: 700 !important;
}

.WaGadgetLoginButton .loginBox a:hover,
.WaGadgetLoginButton .loginBoxLapsedMembership a:hover,
.WaGadgetLoginButton .loginBoxChangePassword a:hover {
  color: var(--cal-coral) !important;
}

.WaGadgetLoginButton input[type="text"],
.WaGadgetLoginButton input[type="email"],
.WaGadgetLoginButton input[type="password"] {
  padding: 11px 12px !important;
  color: var(--cal-text) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: 4px !important;
  font-family: var(--cal-body-font) !important;
}

.WaGadgetLoginButton .loginBoxLogout,
.WaGadgetLoginButton .logoutLink,
.WaGadgetLoginButton a.logoutLink {
  color: var(--cal-coral) !important;
  font-weight: 800 !important;
}


/* =========================================================
   08. Forms / Inputs
========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
  padding: 11px 13px !important;
  color: var(--cal-text) !important;
  background: var(--cal-white) !important;
  border: 1px solid var(--cal-border) !important;
  border-radius: 4px !important;
  font-family: var(--cal-body-font) !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid rgba(239, 102, 85, 0.25) !important;
  border-color: var(--cal-coral) !important;
}


/* =========================================================
   09. Desktop Menu
   Controls:
   - Main horizontal menu
   - Dropdown menu
========================================================= */

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item > a {
  position: relative;
  display: block;
  height: auto;
  padding: 10px 16px;
  color: var(--cal-navy);
  background: transparent;
  font-family: var(--cal-body-font);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item > a:hover,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.sel > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.selected > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item:hover > a {
  color: var(--cal-coral);
  background: transparent;
  text-decoration: none;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  background: var(--cal-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li > .item > a:hover::after,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.sel > .item > a::after,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.selected > .item > a::after {
  transform: scaleX(1);
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel > li.dir > .item > a span::after {
  font: 20px / 20px "FontAwesome";
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul {
  padding: 8px;
  background: var(--cal-white);
  border: 1px solid var(--cal-border);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(6, 43, 79, 0.12);
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li {
  background: transparent;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li > .item > a {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  color: var(--cal-navy);
  background: transparent;
  border-radius: 10px;
  font-family: var(--cal-body-font);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li > .item > a:hover,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li.sel > .item > a,
.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li.selected > .item > a {
  color: var(--cal-coral);
  background: var(--cal-soft);
  padding-left: 22px;
  text-decoration: none;
}


/* =========================================================
   10. Mobile Panel
   Controls:
   - Wild Apricot mobile menu panel
   - Mobile login panel
========================================================= */

.WaGadgetMobilePanel .mobilePanel .loginInner {
  background: var(--cal-navy-dark);
  border-top: 2px solid var(--cal-coral);
  border-bottom: 2px solid var(--cal-coral);
}

.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm .loginActionRememberMe label::before {
  background: var(--cal-navy-dark);
}

.WaGadgetMobilePanel,
.mobilePanel {
  background: var(--cal-navy) !important;
  color: var(--cal-white) !important;
  font-family: var(--cal-body-font) !important;
}

.WaGadgetMobilePanel .mobilePanelButton,
.mobilePanel .mobilePanelButton,
.mobilePanelButton.buttonMenu,
.mobilePanelButton.buttonLogin {
  background: var(--cal-navy) !important;
  color: var(--cal-white) !important;
  border: 0 !important;
  font-family: var(--cal-body-font) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: none !important;
}

.WaGadgetMobilePanel .mobilePanelButton:hover,
.mobilePanel .mobilePanelButton:hover,
.mobilePanelButton.buttonMenu:hover,
.mobilePanelButton.buttonLogin:hover {
  background: var(--cal-navy-dark) !important;
  color: var(--cal-coral) !important;
}

.mobilePanelButton.buttonLogin.logged,
.WaGadgetMobilePanel .buttonLogin.logged {
  background: var(--cal-navy) !important;
  color: var(--cal-white) !important;
}

.WaGadgetMobilePanel .menuInner,
.mobilePanel .menuInner {
  background: var(--cal-white) !important;
  border-top: 3px solid var(--cal-coral) !important;
}

.WaGadgetMobilePanel .menuInner ul,
.mobilePanel .menuInner ul {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--cal-white) !important;
}

.WaGadgetMobilePanel .menuInner ul li,
.mobilePanel .menuInner ul li {
  border-bottom: 1px solid var(--cal-border) !important;
}

.WaGadgetMobilePanel .menuInner ul li .item a,
.WaGadgetMobilePanel .menuInner ul li a,
.mobilePanel .menuInner ul li .item a,
.mobilePanel .menuInner ul li a {
  display: block !important;
  padding: 15px 22px !important;
  color: var(--cal-navy) !important;
  background: var(--cal-white) !important;
  font-family: var(--cal-body-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.WaGadgetMobilePanel .menuInner ul li.sel > .item > a,
.WaGadgetMobilePanel .menuInner ul li.selected > .item > a,
.mobilePanel .menuInner ul li.sel > .item > a,
.mobilePanel .menuInner ul li.selected > .item > a,
.WaGadgetMobilePanel .menuInner ul li .item a:hover,
.WaGadgetMobilePanel .menuInner ul li a:hover,
.mobilePanel .menuInner ul li .item a:hover,
.mobilePanel .menuInner ul li a:hover {
  color: var(--cal-coral) !important;
  background: var(--cal-soft) !important;
}

.WaGadgetMobilePanel .menuInner ul ul li a,
.mobilePanel .menuInner ul ul li a {
  padding-left: 38px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}


/* =========================================================
   11. Mobile Panel Accordion Submenus
   Controls:
   - Clickable plus/minus toggle buttons
   - Collapsed mobile submenus
========================================================= */

@media screen and (max-width: 768px) {
  .WaGadgetMobilePanel .menuInner li.dir > .item {
    position: relative;
  }

  .WaGadgetMobilePanel .menuInner li.dir > .item > a {
    padding-right: 56px !important;
  }

  .WaGadgetMobilePanel .menuInner li.dir > .item > .wa-mobile-submenu-toggle {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: var(--cal-white);
    color: var(--cal-navy);
    border: 1px solid var(--cal-border);
    border-radius: 50%;
    font-family: var(--cal-body-font);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .WaGadgetMobilePanel .menuInner li.dir > .item > .wa-mobile-submenu-toggle:hover,
  .WaGadgetMobilePanel .menuInner li.dir.is-submenu-open > .item > .wa-mobile-submenu-toggle {
    background: var(--cal-navy);
    color: var(--cal-white);
    border-color: var(--cal-navy);
  }

  .WaGadgetMobilePanel .menuInner li.dir > .item > ul {
    display: none !important;
    margin: 0 !important;
    padding: 6px 0 8px 14px !important;
    background: var(--cal-soft) !important;
    border-left: 3px solid var(--cal-coral);
  }

  .WaGadgetMobilePanel .menuInner li.dir.is-submenu-open > .item > ul {
    display: block !important;
  }

  .WaGadgetMobilePanel .menuInner li.dir > .item > ul li > .item > a {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .WaGadgetMobilePanel .menuInner li.dir > .item > ul li.dir > .item > ul li > .item > a {
    padding-left: 28px !important;
  }
}


/* =========================================================
   12. Small Screen Type Tuning
========================================================= */

@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
  }

  h1,
  .pageTitle {
    font-size: 42px;
  }

  h2 {
    font-size: 34px;
  }

  h3 {
    font-size: 26px;
  }

  .cal-button,
  a.cal-button,
  .cal-button-outline,
  a.cal-button-outline,
  input[type="submit"],
  input[type="button"],
  button {
    width: auto;
    max-width: 100%;
  }
}


/* =========================================================
   13. Sticky Header
   Controls:
   - Header is normal at top
   - Header becomes fixed/shrinks after scroll
   Used by:
   - #id_Header1.cal-sticky-header
   - body.cal-header-is-stuck
========================================================= */

body {
  padding-top: 0 !important;
}

html {
  scroll-padding-top: 120px;
}

#id_Header1.cal-sticky-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 99999 !important;
  width: 100% !important;
  background-color: var(--cal-white) !important;
  box-shadow: none;
  transform: translateY(0);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background-color 0.25s ease;
}

body.cal-header-is-stuck {
  padding-top: var(--cal-header-height, 118px) !important;
}

#id_Header1.cal-sticky-header.is-stuck {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  box-shadow: 0 8px 24px rgba(6, 43, 79, 0.12);
  animation: calHeaderDrop 0.25s ease forwards;
}

@keyframes calHeaderDrop {
  from {
    transform: translateY(-8px);
  }

  to {
    transform: translateY(0);
  }
}

#id_Header1.cal-sticky-header > div {
  width: 100% !important;
  max-width: 1660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#id_Header1.cal-sticky-header,
#id_Header1.cal-sticky-header .WaLayoutContainerOnly,
#id_Header1.cal-sticky-header .WaLayoutTable,
#id_Header1.cal-sticky-header .WaLayoutItem,
#id_Header1.cal-sticky-header .WaLayoutPlaceHolder,
#id_Header1.cal-sticky-header .placeHolderContainer,
#id_Header1.cal-sticky-header .WaGadgetOnly,
#id_Header1.cal-sticky-header .menuInner {
  overflow: visible !important;
}

#id_Header1.cal-sticky-header #id_WVXGqTJ {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  transition: margin 0.25s ease, transform 0.25s ease;
}

#id_Header1.cal-sticky-header.is-stuck #id_WVXGqTJ {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  transform: scale(0.985);
  transform-origin: center center;
}

#id_Header1.cal-sticky-header img {
  display: inline-block;
  width: auto;
  max-height: 78px;
  vertical-align: middle;
  transition: max-height 0.25s ease, transform 0.25s ease;
}

#id_Header1.cal-sticky-header.is-stuck img {
  max-height: 62px;
  transform: scale(0.96);
}


/* =========================================================
   14. Header Menu Positioning
   Controls:
   - Header menu alignment
   - Hide Home since logo is visible
   - Last-child Join button styling
========================================================= */

#id_Header1.cal-sticky-header #id_YR2udDP {
  position: relative;
  z-index: 100000;
}

#id_Header1.cal-sticky-header #id_YR2udDP .menuInner {
  width: 100%;
}

#id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: auto !important;
}

#id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel > li {
  display: inline-flex;
  align-items: center;
}

#id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel > li:first-child {
  display: none !important;
}

#id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel > li > .item > a {
  display: flex;
  align-items: center;
  min-height: 62px;
  white-space: nowrap;
  transition: min-height 0.25s ease;
}

#id_Header1.cal-sticky-header.is-stuck #id_YR2udDP ul.firstLevel > li > .item > a {
  min-height: 50px;
}

#id_Header1.cal-sticky-header #id_YR2udDP ul ul,
#id_Header1.cal-sticky-header #id_YR2udDP .secondLevel {
  position: absolute;
  z-index: 100001 !important;
}

ul.firstLevel .last-child {
  justify-content: center;
  height: 50px;
  padding-left: 15px !important;
  background: var(--cal-coral);
  border-radius: 30px;
}

ul.firstLevel .last-child a {
  color: var(--cal-white) !important;
}


/* =========================================================
   15. Header Mobile Behavior
========================================================= */

@media screen and (max-width: 768px) {
  body,
  body.cal-header-is-stuck {
    padding-top: 0 !important;
  }

  html {
    scroll-padding-top: 0;
  }

  #id_Header1.cal-sticky-header,
  #id_Header1.cal-sticky-header.is-stuck {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: none;
    animation: none;
  }

  #id_Header1.cal-sticky-header img,
  #id_Header1.cal-sticky-header.is-stuck img {
    max-height: 58px;
    transform: none;
  }

  #id_Header1.cal-sticky-header #id_WVXGqTJ,
  #id_Header1.cal-sticky-header.is-stuck #id_WVXGqTJ {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    transform: none;
  }

  #id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel {
    display: block;
  }

  #id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel > li:first-child {
    display: list-item !important;
  }

  #id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel > li {
    display: block;
  }

  #id_Header1.cal-sticky-header #id_YR2udDP ul.firstLevel > li > .item > a {
    min-height: initial;
  }
}


/* =========================================================
   16. Admin View Safety
========================================================= */

body:has(.adminPanel),
body:has(#idAdminPanelContainer),
body:has(.adminView) {
  padding-top: 0 !important;
}

body:has(.adminPanel) #id_Header1.cal-sticky-header,
body:has(#idAdminPanelContainer) #id_Header1.cal-sticky-header,
body:has(.adminView) #id_Header1.cal-sticky-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}


/* =========================================================
   17. Hide Join Menu Item When User Is Logged In
   Requires:
   - JS adding body.cal-user-logged-in
========================================================= */

body.cal-user-logged-in .menuInner ul.firstLevel > li:has(a[href*="Join-CAL-ISBOA"]),
body.cal-user-logged-in .menuInner ul.secondLevel > li:has(a[href*="Join-CAL-ISBOA"]),
body.cal-user-logged-in .cal-hide-join-menu-item {
  display: none !important;
}


/* =========================================================
   18. Curved Animated Underline
   Used by:
   - .cal-curved-underline
========================================================= */

.cal-curved-underline {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.cal-curved-underline::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.18em;
  height: 0.38em;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 19 Q150 7 294 19' fill='none' stroke='%23ef6655' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left center;
  animation: calCurveDraw 0.85s ease-out 0.35s forwards;
}

@keyframes calCurveDraw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}


/* =========================================================
   19. Hero Image / Slider Mask
   Controls:
   - Hero slider background
   - Desktop fixed height crop
   - Mobile fixed height crop
   Used by:
   - .hero-image-mask
   - .camera_wrap
========================================================= */

.camera_wrap {
  background: var(--cal-navy-dark);
}

@media screen and (min-width: 769px) {
  .hero-image-mask {
    height: 610px;
    min-height: 610px;
    max-height: 610px;
    overflow: hidden;
  }

  .hero-image-mask .gadgetStyleBody,
  .hero-image-mask .camera_wrap,
  .hero-image-mask .camera_fakehover,
  .hero-image-mask .camera_target,
  .hero-image-mask .camera_target_content,
  .hero-image-mask .cameraContent,
  .hero-image-mask .cameraSlide {
    height: 610px !important;
    min-height: 610px;
    max-height: 610px;
    overflow: hidden;
    clip-path: ellipse(98% 92% at 100% 50%);
  }

  .hero-image-mask img {
    width: 100%;
    height: 610px !important;
    object-fit: cover;
    object-position: center center;
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .hero-image-mask {
    height: 320px;
    min-height: 320px;
    overflow: hidden;
    border-radius: 10px;
  }

  .hero-image-mask .gadgetStyleBody,
  .hero-image-mask .camera_wrap,
  .hero-image-mask .camera_fakehover,
  .hero-image-mask .camera_target,
  .hero-image-mask .camera_target_content,
  .hero-image-mask .cameraContent,
  .hero-image-mask .cameraSlide {
    height: 320px !important;
    min-height: 320px;
    overflow: hidden;
    border-radius: 32px;
  }

  .hero-image-mask img {
    width: 100%;
    height: 320px !important;
    object-fit: cover;
    object-position: center center;
    margin-top: 0 !important;
  }
}




/* 
*************************************************
20. Cards
*************************************************
 */

 .survey-access-card {
    background: var(--cal-white);
    border: 1px solid var(--cal-border);
    border-top: 5px solid var(--cal-coral);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(6, 43, 79, 0.07);
}
/* =========================================================
   Equal Height Cards in Wild Apricot 2-Column Layout
   Add class "cardGrid" to the Wild Apricot Layout gadget

   Works with WA structure:
   .cardGrid
     .WaLayoutTable
       .WaLayoutRow
         .WaLayoutItem
           .WaLayoutPlaceHolder
             .WaGadgetContent.survey-access-card
========================================================= */

.cardGrid,
.cardGrid * {
  box-sizing: border-box;
}

/* Turn the WA table layout into a real 2-column grid */
.cardGrid .WaLayoutTable,
.cardGrid .WaLayoutTable > tbody,
.cardGrid .WaLayoutRow {
  display: block !important;
  width: 100% !important;
}

/* This is the key part */
.cardGrid .WaLayoutRow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch !important;
}

/* Hide the Wild Apricot separator column */
.cardGrid .WaLayoutSeparator {
  display: none !important;
}

/* Make each WA column stretch */
.cardGrid .WaLayoutItem {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  min-height: 100% !important;
  padding: 0 !important;
}

/* Stretch the WA placeholder wrappers */
.cardGrid .WaLayoutPlaceHolder,
.cardGrid .placeHolderContainer,
.cardGrid .WaLayoutItem > div,
.cardGrid .WaLayoutItem > div > div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* Stretch the actual content gadget that has your card class */
.cardGrid .WaGadgetContent.survey-access-card,
.cardGrid .survey-access-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
}

/* Let the editable content fill the card */
.cardGrid .survey-access-card .gadgetStyleBody {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* Optional: keeps the button from stretching weirdly */
.cardGrid .survey-access-card .stylizedButton,
.cardGrid .survey-access-card .cal-button {
  align-self: flex-start;
}

/* Mobile stack */
@media screen and (max-width: 768px) {
  .cardGrid .WaLayoutRow {
    grid-template-columns: 1fr;
  }

  .cardGrid .WaLayoutItem {
    min-height: 0 !important;
  }

  .cardGrid .survey-access-card {
    height: auto !important;
  }
}


/* =========================================================
   HERO CONTAINER
   Controls:
   - Background image hero layout
   - 75vh minimum desktop height
   - Smaller mobile hero height
   - Stronger bottom gradient overlay
   - Automatically positions nested content above bottom
   - Enlarges hero content

   Used by:
   - .heroContainer

   Notes:
   - Uses min-height instead of fixed height so content is not cut off.
   - Targets Wild Apricot wrappers generically because nested IDs/classes change.
========================================================= */

.heroContainer {
  --hero-min-height: 60vh;
  --hero-content-bottom: 22.5vh;

  position: relative;
  min-height: var(--hero-min-height);
  overflow: visible;
  isolation: isolate;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* Stronger gradient, limited to the lower portion of the image */
.heroContainer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 31, 66, 0.82) 0%,
    rgba(0, 31, 66, 0.58) 42%,
    rgba(0, 31, 66, 0) 100%
  );
}

/* Make the Wild Apricot table structure fill the hero */
.heroContainer > .WaLayoutTable {
  position: relative;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  min-height: var(--hero-min-height);
}

.heroContainer > .WaLayoutTable > tbody {
  display: block !important;
  width: 100% !important;
  min-height: var(--hero-min-height);
}

.heroContainer > .WaLayoutTable > tbody > .WaLayoutRow {
  display: flex !important;
  width: 100% !important;
  min-height: var(--hero-min-height);
}

.heroContainer > .WaLayoutTable > tbody > .WaLayoutRow > .WaLayoutItem {
  display: flex !important;
  width: 100% !important;
  min-height: var(--hero-min-height);
}

/* This is the key positioning layer */
.heroContainer .WaLayoutPlaceHolder,
.heroContainer .placeHolderContainer,
.heroContainer .placeHolderContainer > div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end!important;
  align-items: center !important;
  width: 100% !important;
  min-height: var(--hero-min-height);
  padding: 0 0 50px 0;
}

/* Targets whatever content/gadget div gets added inside the layout */
.heroContainer .placeHolderContainer > div > div,
.heroContainer .WaGadgetOnly,
.heroContainer .WaGadgetContent,
.heroContainer .gadgetStyleBody {
  width: 100% !important;
  max-width: 1100px;
  text-align: center;
}

/* Enlarge hero content */
.heroContainer .gadgetStyleBody {
  font-size: 150% !important;
}

/* Improve readability over the image */
.heroContainer .gadgetStyleBody,
.heroContainer .gadgetStyleBody p,
.heroContainer .gadgetStyleBody li,
.heroContainer .gadgetStyleBody a,
.heroContainer .gadgetStyleBody span,
.heroContainer .gadgetStyleBody strong,
.heroContainer .gadgetStyleBody em,
.heroContainer .gadgetStyleBody h1,
.heroContainer .gadgetStyleBody h2,
.heroContainer .gadgetStyleBody h3,
.heroContainer .gadgetStyleBody h4 {
  color: var(--cal-white, #ffffff) !important;
  text-shadow: 0 4px 18px rgba(0, 31, 66, 0.55);
}

/* Larger hero heading */
.heroContainer .gadgetStyleBody h1 {
  margin: 0;
  font-size: clamp(63px, 5.7vw, 90px) !important;
}

/* Mobile tuning */
@media screen and (max-width: 768px) {
  .heroContainer {
    --hero-min-height: 28vh;
    --hero-content-bottom: 12vh;

    min-height: var(--hero-min-height);
  }

  .heroContainer::before {
    height: 56%;
    background: linear-gradient(
      to top,
      rgba(0, 31, 66, 0.86) 0%,
      rgba(0, 31, 66, 0.62) 48%,
      rgba(0, 31, 66, 0) 100%
    );
  }

  .heroContainer > .WaLayoutTable,
  .heroContainer > .WaLayoutTable > tbody,
  .heroContainer > .WaLayoutTable > tbody > .WaLayoutRow,
  .heroContainer > .WaLayoutTable > tbody > .WaLayoutRow > .WaLayoutItem,
  .heroContainer .WaLayoutPlaceHolder,
  .heroContainer .placeHolderContainer,
  .heroContainer .placeHolderContainer > div {
    min-height: var(--hero-min-height);
  }

  .heroContainer .placeHolderContainer > div {
    padding: 0 0 30px 0;
  }

  .heroContainer .gadgetStyleBody {
    font-size: 130% !important;
  }

  .heroContainer .gadgetStyleBody h1 {
    font-size: clamp(42px, 11vw, 58px) !important;
  }
}



/* =========================================================
   CAL-ISBOA MEMBERSHIP FORM STYLING
   Controls:
   - Wild Apricot membership level selection form
   - Form title
   - Mandatory field text
   - Membership level radio cards
   - Navigation / Next button

   Uses CAL-ISBOA foundation variables:
   - --cal-navy
   - --cal-coral
   - --cal-soft
   - --cal-border
   - --cal-white
   - --cal-text
   - --cal-muted
   - --cal-heading-font
   - --cal-body-font

   Does NOT change:
   - Wild Apricot layout configuration
   - Form field structure
   - Radio inputs
========================================================= */


/* =========================================================
   01. Remove Old Wild Apricot Corner Graphics
========================================================= */

#idGeneralFormContainer .cornersContainer {
  display: none !important;
}

#idGeneralFormContainer .d1,
#idGeneralFormContainer .d2,
#idGeneralFormContainer .d3,
#idGeneralFormContainer .d4,
#idGeneralFormContainer .d5,
#idGeneralFormContainer .d6,
#idGeneralFormContainer .d7,
#idGeneralFormContainer .d8,
#idGeneralFormContainer .d9 {
  background: transparent !important;
  border: 0 !important;
}


/* =========================================================
   02. Main Form Shell
========================================================= */

#idGeneralFormContainer {
  color: var(--cal-text, #17324d);
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif);
}

#idGeneralFormContainer,
#idGeneralFormContainer * {
  box-sizing: border-box;
}

#idGeneralFormContainer .generalFormContainer,
#idGeneralFormContainer .formOuterContainer,
#idGeneralFormContainer .formContainer,
#idGeneralFormContainer .generalFieldsOuterContainer,
#idGeneralFormContainer .generalFieldsContainer,
#idGeneralFormContainer .sectionOuterContainer,
#idGeneralFormContainer .sectionContainer {
  background: transparent !important;
  border: 0 !important;
}


/* =========================================================
   03. Form Title Area
========================================================= */

#idGeneralFormContainer .formTitleOuterContainer,
#idGeneralFormContainer .formTitleContainer {
  background: transparent !important;
  border: 0 !important;
}

#idGeneralFormContainer .formTitleContainer .inner {
  padding: 0 0 24px !important;
}

#idGeneralFormContainer .formTitle {
  margin: 0 0 10px !important;
  color: var(--cal-navy, #062b4f) !important;
  font-family: var(--cal-heading-font, "Playfair Display", Georgia, serif) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  text-transform: none !important;
}

#idGeneralFormContainer .mandatoryFieldsTitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cal-muted, #5f6f7f) !important;
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.3;
}

#idGeneralFormContainer .mandatorySymbol {
  color: var(--cal-coral, #ef6655) !important;
  font-weight: 900 !important;
}


/* =========================================================
   04. Field Labels
========================================================= */

#idGeneralFormContainer .fieldLabel {
  margin-bottom: 14px !important;
  color: var(--cal-navy, #062b4f) !important;
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.35;
  font-weight: 900 !important;
}

#idGeneralFormContainer .mandatoryLabel {
  color: var(--cal-navy, #062b4f) !important;
  font-weight: 900 !important;
}


/* =========================================================
   05. Membership Level Card List
========================================================= */

#idGeneralFormContainer .groupBodyVertical {
  display: block !important;
}

#idGeneralFormContainer .groupBodyVertical .fieldItem {
  position: relative;
  margin: 0 0 16px !important;
  padding: 10px 20px !important;
  background: var(--cal-white, #ffffff) !important;
  border: 1px solid var(--cal-border, #e7e0da) !important;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(6, 43, 79, 0.07);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

#idGeneralFormContainer .groupBodyVertical .fieldItem:hover {
  border-color: var(--cal-coral, #ef6655) !important;
  box-shadow: 0 12px 30px rgba(6, 43, 79, 0.11);
  transform: translateY(-2px);
}

#idGeneralFormContainer .groupBodyVertical .fieldItem:has(input[type="radio"]:checked) {
  background: var(--cal-soft, #fbf8f5) !important;
  border-color: var(--cal-coral, #ef6655) !important;
  box-shadow: 0 12px 30px rgba(239, 102, 85, 0.18);
}


/* =========================================================
   06. Radio Button Area
========================================================= */

#idGeneralFormContainer .typeRadioContainer {
  position: absolute;
  top: 24px;
  left: 5px;
  z-index: 2;
}

#idGeneralFormContainer input.typeRadio {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--cal-coral, #ef6655);
  cursor: pointer;
}


/* =========================================================
   07. Membership Level Label Content
========================================================= */

#idGeneralFormContainer .groupBodyVertical .fieldItem > .label {
  display: block !important;
}

#idGeneralFormContainer .levelProperties {
  display: block !important;
  margin: 0 !important;
  padding: 22px 24px 22px 58px !important;
  cursor: pointer;
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif) !important;
}

#idGeneralFormContainer .textLine {
  display: block !important;
  margin: 0 0 6px !important;
}

#idGeneralFormContainer .textLine:last-child {
  margin-bottom: 0 !important;
}

#idGeneralFormContainer .labelTitle {
  display: inline-block;
  margin-right: 8px;
  color: var(--cal-navy, #062b4f) !important;
  font-family: var(--cal-heading-font, "Playfair Display", Georgia, serif) !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

#idGeneralFormContainer .labelSubTitle,
#idGeneralFormContainer .levelPrice {
  color: var(--cal-coral, #ef6655) !important;
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

#idGeneralFormContainer .typeInstruction,
#idGeneralFormContainer .levelRenewal,
#idGeneralFormContainer .levelRecurring,
#idGeneralFormContainer .levelBundle {
  color: var(--cal-muted, #5f6f7f) !important;
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

#idGeneralFormContainer .levelBundle {
  display: inline-block;
  color: var(--cal-navy, #062b4f) !important;
  font-weight: 800 !important;
}


/* =========================================================
   08. Navigation / Next Button Area
========================================================= */

#idGeneralFormContainer .navigationOuterContainer,
#idGeneralFormContainer .navigationContainer {
  margin-top: 24px !important;
  background: transparent !important;
  border: 0 !important;
}

#idGeneralFormContainer .navigationContainer .inner {
  padding: 0 !important;
}

#idGeneralFormContainer .navigationContainer .right {
  text-align: right;
}

#idGeneralFormContainer input.nextButton {
  /* display: inline-flex !important; */
  align-items: center;
  justify-content: center;

  padding: 14px 26px !important;
  background: var(--cal-coral, #ef6655) !important;
  color: var(--cal-white, #ffffff) !important;
  border: 2px solid var(--cal-coral, #ef6655) !important;
  border-radius: 4px !important;
  font-family: var(--cal-body-font, "Inter", Arial, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

#idGeneralFormContainer input.nextButton:hover {
  background: var(--cal-coral-dark, #d94f42) !important;
  border-color: var(--cal-coral-dark, #d94f42) !important;
  color: var(--cal-white, #ffffff) !important;
  transform: translateY(-1px);
}


/* =========================================================
   09. Mobile
========================================================= */

@media screen and (max-width: 640px) {
  #idGeneralFormContainer .formTitle {
    font-size: 38px !important;
  }

  #idGeneralFormContainer .levelProperties {
    padding: 20px 18px 20px 52px !important;
  }

  #idGeneralFormContainer .typeRadioContainer {
    top: 22px;
    left: 18px;
  }

  #idGeneralFormContainer .labelTitle {
    display: block;
    margin: 0 0 4px;
    font-size: 24px !important;
  }

  #idGeneralFormContainer .labelSubTitle,
  #idGeneralFormContainer .levelPrice {
    display: block;
    font-size: 15px !important;
  }

  #idGeneralFormContainer .navigationContainer .right {
    text-align: left;
  }

  #idGeneralFormContainer input.nextButton {
    width: 100%;
  }
}