.navigationOuterContainer .navigationContainer input.nextButton, .navigationOuterContainer .navigationContainer input.typeButton, .navigationOuterContainer .navigationContainer input[type=submit], .loginButton, .typeButton, input[type=submit] {background-color: #5A5BF5 !important; color:#ffffff !important;} /* button color */
.navigationOuterContainer .navigationContainer input.nextButton:hover, .navigationOuterContainer .navigationContainer input.typeButton:hover, .navigationOuterContainer .navigationContainer input[type=submit]:hover, .loginButton:hover, .typeButton:hover, input[type=submit]:hover {background-color: #5A5BF5 !important;} /* hover color */
/* Login button */
.WaGadgetLoginButton .loginLink, .WaGadgetLoginForm .loginLink {
    background: #29303E !important;
    color: white !important;
}
/* Login button on hover */
.WaGadgetLoginButton .loginLink:hover, .WaGadgetLoginForm .loginLink:hover {
    background: #FFCF60 !important;
}
/* Logout button */
.WaGadgetLoginButton .authenticated .loginLink, .WaGadgetLoginForm .authenticated .loginLink {
    background: 0 !important;
    color: #ffffff !important;
}
/* Logout button on hover */
.WaGadgetLoginButton .authenticated .loginLink:hover, .WaGadgetLoginButton .authenticated .loginLink.hover, .WaGadgetLoginForm .authenticated .loginLink:hover, .WaGadgetLoginForm .authenticated .loginLink.hover {
    background: #FFCF60 !important;
    color: white !important;
}
/* =========================================================
   TPMA Event Details Sidebar + Layout (Wild Apricot safe)
   Fixes overlap by overriding WA's float:right; width:70% rule
========================================================= */

:root{
  --tpma-sidebar-w: 380px;
  --tpma-gap: 36px;
}

/* ---------------------------
   1) LAYOUT: two columns that always fit
--------------------------- */
@media (min-width: 1024px){

  /* Make sure width math behaves */
  .WaGadgetEventsStateDetails .boxOuterContainer,
  .WaGadgetEventsStateDetails .boxOuterContainer *{
    box-sizing: border-box !important;
  }

  /* LEFT: sidebar outer container (this is the real column wrapper) */
  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer{
    float: left !important;
    width: var(--tpma-sidebar-w) !important;
    margin-right: var(--tpma-gap) !important;
  }

  /* Keep the inner decorated container from enforcing a conflicting width */
  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer .boxBodyInfoContainer{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* RIGHT: content outer container (override WA float:right; width:70%) */
  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContentOuterContainer{
    float: left !important; /* not right */
    width: calc(100% - var(--tpma-sidebar-w) - var(--tpma-gap)) !important;
    margin-left: 0 !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
  }

  /* Ensure the inner content container can shrink without pushing */
  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContentOuterContainer .boxBodyContentContainer{
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Clear floats at the end of the body block */
  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyOuterContainer .clearEndContainer{
    clear: both !important;
  }
}

/* Stack on smaller screens */
@media (max-width: 1023px){
  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer{
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;
  }

  .WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContentOuterContainer{
    float: none !important;
    width: auto !important;
    overflow: visible !important;
  }
}

/* Prevent body images from forcing overflow */
.WaGadgetEventsStateDetails .boxBodyContentContainer img{
  max-width: 100% !important;
  height: auto !important;
}

/* ---------------------------
   2) SIDEBAR VISUAL DESIGN
--------------------------- */

/* Card base */
.WaGadgetEventsStateDetails .boxBodyInfoContainer{
  background: #eaf4ff !important;
  border-radius: 14px !important;
  padding: 16px 22px !important;
  box-shadow: none !important; /* removed */
  position: relative !important;
}

/* DETAILS header */
.WaGadgetEventsStateDetails .boxBodyInfoContainer::before{
  content: "DETAILS";
  display: block;
  margin: 2px 0 12px 2px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #0f172a;
}

/* Reset centering inside widget */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfoContainer,
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo,
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo li,
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo label,
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo .eventInfoBoxValue{
  text-align: left !important;
}

/* Reset list */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Two-column rows */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo > li{
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
}

/* Label */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo > li > .eventInfoBoxLabel{
  flex: 0 0 92px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: rgba(15, 23, 42, 0.70) !important;
  display: block !important;
}

/* Value */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .boxInfo > li > .eventInfoBoxValue{
  flex: 1 1 auto !important;
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.35 !important;
  color: #0f172a !important;
  text-align: right !important;
}

/* Date weight */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .eventInfoStartDate .eventInfoBoxValue strong{
  font-weight: 900 !important;
}

/* Time row (blank label in HTML) */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .eventInfoStartTime .eventInfoBoxLabel{
  display: none !important;
}
.WaGadgetEventsStateDetails .boxBodyInfoContainer .eventInfoStartTime .eventInfoBoxValue{
  font-weight: 700 !important;
  color: rgba(15, 23, 42, 0.90) !important;
}

/* Registrants link */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .eventInfoBoxRegisterLink{
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Registration header */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .infoTitle{
  margin: 18px 0 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
}

/* Registration list */
.WaGadgetEventsStateDetails .boxBodyInfoContainer .registrationInfo{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.WaGadgetEventsStateDetails .boxBodyInfoContainer .registrationInfo > li{
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin: 10px 0 !important;
}

.WaGadgetEventsStateDetails .boxBodyInfoContainer .registrationInfo > li.disabled{
  opacity: 0.55 !important;
}

/* Button */
.WaGadgetEventsStateDetails .joinWaitlistButton,
.WaGadgetEventsStateDetails .typeButton.joinWaitlistButton{
  width: 100% !important;
  border-radius: 14px !important;
  padding: 14px 14px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  background: #5A5BF5 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 26px rgba(90, 91, 245, 0.28) !important;
}
/* =========================================================
   Global Font Override — Poppins everywhere
========================================================= */

/* Define once */
:root{
  --tpma-font: "Poppins", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Hard reset for everything inside Wild Apricot content */
.WaLayoutContainerLast,
.WaGadgetEventsStateDetails,
.WaGadgetEventsStateDetails *{
  font-family: var(--tpma-font) !important;
}

/* Explicitly cover common problem elements */
body,
p,
span,
div,
li,
label,
a,
strong,
em,
small,
h1, h2, h3, h4, h5, h6,
button,
input,
select,
textarea{
  font-family: var(--tpma-font) !important;
}

/* Optional: tighten typography slightly for Poppins */
body{
  letter-spacing: -0.01em;
}

/* Headings look better a touch tighter in Poppins */
h1, h2, h3, h4, h5, h6{
  letter-spacing: -0.015em;
}

/* Buttons: keep weight intentional */
button,
.typeButton,
.joinWaitlistButton{
  font-weight: 600 !important;
}