@import '_content/Zeal.Razor.Ui/Zeal.Razor.Ui.syo845ua7l.bundle.scp.css';

/* /Components/Layout/ConnectedLayoutHost.razor.rz.scp.css */
.zeal-info[b-ou7lkd4aqk] {
  font-size: 10pt;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 90%;
}
/* /Components/Layout/HelpModal.razor.rz.scp.css */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*#region LOCAL VARIABLES*/
/* HEIGHT SHOULD COVER SLIGHTLY MORE THAN THE TOP HALF */
/* EXTENDED HEIGHT TO REMOVE ANY TOP GAP */
/* ANGLE SETTINGS (RIGHT SIDE LOWER FOR ORIGINAL DIAGONAL) */
/*#endregion LOCAL VARIABLES*/
/* PAGE WRAPPER THAT CENTERS CHILDREN */
.zeal-main-content-page[b-9m82p4wr8d] {
  display: flex;
  align-items: start; /* VERTICAL ALIGN */
  justify-content: center; /* HORIZONTAL ALIGN */
  background: #777777;
  position: relative; /* ESTABLISH CONTAINING BLOCK FOR Z-INDEX */
  overflow: hidden; /* HIDE ANY BACKGROUND OVERFLOW */
  padding-top: 2vh;
  border-radius: 5px;
}
@media only screen and (max-width: 640px) {
  .zeal-main-content-page[b-9m82p4wr8d] {
    padding-top: 0.75vh;
  }
}

/*GREY CARD THAT SITS OVER TOP OF THE WAVES*/
.zeal-content-card[b-9m82p4wr8d] {
  position: relative;
  width: 92vw;
  border-radius: 20px;
  background-color: transparent !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
  padding: 0 0 1em 0;
  z-index: 3;
  margin-bottom: 81px;
  min-height: 100vh;
  border: 10pt solid #777777;
}
@media only screen and (max-width: 768px) {
  .zeal-content-card[b-9m82p4wr8d] {
    min-width: 95vw;
  }
}
@media only screen and (max-width: 640px) {
  .zeal-content-card[b-9m82p4wr8d] {
    min-width: 98vw;
    padding-top: 1.5vh;
  }
}

/*#region WAVES*/
/* PAGE CONTAINER ABOVE WAVES */
.zeal-content-page[b-9m82p4wr8d] {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  z-index: 2;
}

/* FULLSCREEN WAVE CONTAINER */
.zt-waves[b-9m82p4wr8d] {
  position: fixed;
  top: -80vh; /* MOVES THE WAVES UP AND DOWN THE SCREEN */
  left: 0;
  width: 100%;
  height: 160vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  /* ANGLED BOTTOM EDGE LIKE ORIGINAL */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 90%);
}
@media only screen and (max-width: 1024px) {
  .zt-waves[b-9m82p4wr8d] {
    height: 150vh;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 87%);
  }
}

/* EACH WAVE LAYER FULLY FILLS CONTAINER */
.wave-layer[b-9m82p4wr8d] {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  filter: saturate(115%) contrast(105%);
}
.wave-layer.w-gold-1[b-9m82p4wr8d] {
  opacity: 0.9;
}
.wave-layer.w-gray-1[b-9m82p4wr8d] {
  opacity: 0.6;
}
.wave-layer.w-gold-2[b-9m82p4wr8d] {
  opacity: 0.55;
}
.wave-layer.w-gray-2[b-9m82p4wr8d] {
  opacity: 0.45;
}

/* SVG: STRETCH HIGHER AND RAISE TO FILL TOP AREA */
.wave-svg[b-9m82p4wr8d] {
  position: absolute;
  left: 0;
  top: -15%; /* LIFT THE SVG SHAPES HIGHER VISUALLY */
  width: 220%; /* KEEP SEAMLESS ANIMATION WIDTH */
  height: 130%; /* MAKE WAVES TALLER TO FILL THE SCREEN */
}
@media only screen and (max-width: 1024px) {
  .wave-svg[b-9m82p4wr8d] {
    width: 325%;
    height: 140%;
  }
}
@media only screen and (max-width: 640px) {
  .wave-svg[b-9m82p4wr8d] {
    width: 350%;
    height: 140%;
  }
}
@media only screen and (max-width: 480px) {
  .wave-svg[b-9m82p4wr8d] {
    width: 400%;
    height: 140%;
  }
}
@media only screen and (max-width: 360px) {
  .wave-svg[b-9m82p4wr8d] {
    width: 900%;
    height: 150%;
  }
}

/* WAVE SLIDE ANIMATION */
@keyframes wave-slide-b-9m82p4wr8d {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* DIFFERENT SPEEDS FOR PARALLAX DEPTH */
.w-gold-1 .wave-svg[b-9m82p4wr8d] {
  animation: wave-slide-b-9m82p4wr8d 40s linear infinite;
}

.w-gray-1 .wave-svg[b-9m82p4wr8d] {
  animation: wave-slide-b-9m82p4wr8d 32s linear infinite reverse;
}

.w-gold-2 .wave-svg[b-9m82p4wr8d] {
  animation: wave-slide-b-9m82p4wr8d 22s linear infinite;
}

.w-gray-2 .wave-svg[b-9m82p4wr8d] {
  animation: wave-slide-b-9m82p4wr8d 28s linear infinite reverse;
}

/*#endregion WAVES*/
/* /Components/Layout/ServerLayoutHost.razor.rz.scp.css */
.zeal-info[b-s2e17zhnva] {
  font-size: 10pt;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 90%;
}
/* /Components/Layout/WaveEditorLayout.razor.rz.scp.css */
/* ============================================
  CENTERED CONTAINER
  ============================================ */
/* RESET FULL-HEIGHT LAYOUT SO FLEX CENTERING WORKS */
html[b-zf0x793c8n], body[b-zf0x793c8n] {
  /* ENSURE THE PAGE CAN FILL THE VIEWPORT */
  height: 100%;
  /* REMOVE DEFAULT MARGINS THAT CAN OFFSET CENTERING */
  margin: 0;
}

/* ROOT COLOR TOKENS FOR BLACK/GOLD THEME */
:root[b-zf0x793c8n] {
  /* BRAND COLORS */
  --zeal-bg: #000000; /* PURE BLACK BACKDROP */
  --zeal-gold: #d4af37; /* PRIMARY GOLD */
  --zeal-gold-2: #b88900; /* SECONDARY GOLD (DEEPER) */
  --zeal-card: #0e0e0e; /* NEAR-BLACK CARD */
  --zeal-card-border: #1f1f1f; /* SUBTLE BORDER */
  --zeal-text: #eaeaea; /* HIGH-CONTRAST TEXT */
}

/* PAGE WRAPPER THAT CENTERS CHILDREN */
.zeal-content-page[b-zf0x793c8n] {
  /* FULL-VIEWPORT FLEX BOX */
  min-height: 100%;
  display: flex;
  align-items: center; /* VERTICAL CENTER */
  justify-content: center; /* HORIZONTAL CENTER */
  background: var(--zeal-bg);
  position: relative; /* ESTABLISH CONTAINING BLOCK FOR Z-INDEX */
  overflow: hidden; /* HIDE ANY BACKGROUND OVERFLOW */
}

/* CARD THAT HOSTS YOUR RAZOR UI */
.zeal-content-card[b-zf0x793c8n] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: min(97vw, 1024px);
  height: 85vh;
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid #999999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
  color: var(--zeal-text);
  padding: clamp(10px, 2vw, 10px);
  z-index: 1; /* KEEP CARD ABOVE THE LAVA BACKGROUND */
}

/* SCROLLABLE CONTENT AREA - PUT YOUR DYNAMIC RAZOR CONTENT HERE */
.zeal-content-scroll[b-zf0x793c8n] {
  /* FILL REMAINING SPACE AFTER HEADER/FOOTER */
  flex: 1 1 auto; /* GROW AND SHRINK AS NEEDED */
  min-height: 0; /* IMPORTANT FOR FLEX CHILD TO SCROLL */
  overflow-y: auto; /* VERTICAL SCROLL ONLY WHEN NEEDED */
  overflow-x: hidden; /* PREVENT HORIZONTAL SCROLL UNLESS WANTED */
  padding: clamp(10px, 2vw, 20px); /* INNER PADDING FOR CONTENT */
  /* OPTIONAL: NICE SCROLLBAR STYLING FOR MODERN LOOK */
  scrollbar-width: thin;
  scrollbar-color: #999 #f0f0f0;
}

.zeal-content-scroll[b-zf0x793c8n]::-webkit-scrollbar {
  width: 8px;
}

.zeal-content-scroll[b-zf0x793c8n]::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

.zeal-content-scroll[b-zf0x793c8n]::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

/* OPTIONAL: MAKE FORM ELEMENTS LOOK CRISP ON DARK */
.zeal-content-card input[b-zf0x793c8n],
.zeal-content-card button[b-zf0x793c8n] {
  font: inherit;
}

/* ============================================
   ZT-WAVES: FULL-TOP COVER, RAISED POSITION, ANGLED CUT
   ============================================ */
/* HEIGHT SHOULD COVER SLIGHTLY MORE THAN THE TOP HALF */
/* EXTENDED HEIGHT TO REMOVE ANY TOP GAP */
/* ANGLE SETTINGS (RIGHT SIDE LOWER FOR ORIGINAL DIAGONAL) */
/* PAGE CONTAINER ABOVE WAVES */
.zeal-content-page[b-zf0x793c8n] {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  z-index: 2;
}

/* FULLSCREEN WAVE CONTAINER */
.zt-waves[b-zf0x793c8n] {
  position: fixed;
  top: -80vh; /* MOVES THE WAVES UP AND DOWN THE SCREEN */
  left: 0;
  width: 100%;
  height: 160vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  /* ANGLED BOTTOM EDGE LIKE ORIGINAL */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 90%);
}
@media only screen and (max-width: 1024px) {
  .zt-waves[b-zf0x793c8n] {
    height: 150vh;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 87%);
  }
}

/* EACH WAVE LAYER FULLY FILLS CONTAINER */
.wave-layer[b-zf0x793c8n] {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  filter: saturate(115%) contrast(105%);
}
.wave-layer.w-gold-1[b-zf0x793c8n] {
  opacity: 0.9;
}
.wave-layer.w-gray-1[b-zf0x793c8n] {
  opacity: 0.6;
}
.wave-layer.w-gold-2[b-zf0x793c8n] {
  opacity: 0.55;
}
.wave-layer.w-gray-2[b-zf0x793c8n] {
  opacity: 0.45;
}

/* SVG: STRETCH HIGHER AND RAISE TO FILL TOP AREA */
.wave-svg[b-zf0x793c8n] {
  position: absolute;
  left: 0;
  top: -15%; /* LIFT THE SVG SHAPES HIGHER VISUALLY */
  width: 220%; /* KEEP SEAMLESS ANIMATION WIDTH */
  height: 130%; /* MAKE WAVES TALLER TO FILL THE SCREEN */
}
@media only screen and (max-width: 1024px) {
  .wave-svg[b-zf0x793c8n] {
    width: 325%;
    height: 140%;
  }
}
@media only screen and (max-width: 640px) {
  .wave-svg[b-zf0x793c8n] {
    width: 350%;
    height: 140%;
  }
}
@media only screen and (max-width: 480px) {
  .wave-svg[b-zf0x793c8n] {
    width: 400%;
    height: 140%;
  }
}
@media only screen and (max-width: 360px) {
  .wave-svg[b-zf0x793c8n] {
    width: 900%;
    height: 150%;
  }
}

/* WAVE SLIDE ANIMATION */
@keyframes wave-slide-b-zf0x793c8n {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* DIFFERENT SPEEDS FOR PARALLAX DEPTH */
.w-gold-1 .wave-svg[b-zf0x793c8n] {
  animation: wave-slide-b-zf0x793c8n 40s linear infinite;
}

.w-gray-1 .wave-svg[b-zf0x793c8n] {
  animation: wave-slide-b-zf0x793c8n 32s linear infinite reverse;
}

.w-gold-2 .wave-svg[b-zf0x793c8n] {
  animation: wave-slide-b-zf0x793c8n 22s linear infinite;
}

.w-gray-2 .wave-svg[b-zf0x793c8n] {
  animation: wave-slide-b-zf0x793c8n 28s linear infinite reverse;
}

/* CARD ABOVE WAVES */
.zeal-content-card[b-zf0x793c8n] {
  z-index: 3;
  position: relative;
}
/* /Components/Layout/WaveLayout.razor.rz.scp.css */
/* ============================================
  CENTERED CONTAINER
  ============================================ */
/* RESET FULL-HEIGHT LAYOUT SO FLEX CENTERING WORKS */
html[b-qjvmjmcs4m], body[b-qjvmjmcs4m] {
  /* ENSURE THE PAGE CAN FILL THE VIEWPORT */
  height: 100%;
  /* REMOVE DEFAULT MARGINS THAT CAN OFFSET CENTERING */
  margin: 0;
}

/* ROOT COLOR TOKENS FOR BLACK/GOLD THEME */
:root[b-qjvmjmcs4m] {
  /* BRAND COLORS */
  --zeal-bg: #000000; /* PURE BLACK BACKDROP */
  --zeal-gold: #d4af37; /* PRIMARY GOLD */
  --zeal-gold-2: #b88900; /* SECONDARY GOLD (DEEPER) */
  --zeal-card: #0e0e0e; /* NEAR-BLACK CARD */
  --zeal-card-border: #1f1f1f; /* SUBTLE BORDER */
  --zeal-text: #eaeaea; /* HIGH-CONTRAST TEXT */
}

/* PAGE WRAPPER THAT CENTERS CHILDREN */
.zeal-content-page[b-qjvmjmcs4m] {
  /* FULL-VIEWPORT FLEX BOX */
  min-height: 100%;
  display: flex;
  align-items: center; /* VERTICAL CENTER */
  justify-content: center; /* HORIZONTAL CENTER */
  background: var(--zeal-bg);
  position: relative; /* ESTABLISH CONTAINING BLOCK FOR Z-INDEX */
  overflow: hidden; /* HIDE ANY BACKGROUND OVERFLOW */
}

/* CARD THAT HOSTS YOUR RAZOR UI */
.zeal-content-card[b-qjvmjmcs4m] {
  /* RESPONSIVE, MAX-WIDTH BASED ON VIEWPORT */
  width: min(92vw, 520px);
  border-radius: 16px;
  background-color: #ffffff;
  border: 1px solid #999999;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(255, 255, 255, 0.02) inset;
  color: var(--zeal-text);
  padding: clamp(20px, 4vw, 32px);
  z-index: 1; /* KEEP CARD ABOVE THE LAVA BACKGROUND */
}

/* OPTIONAL: MAKE FORM ELEMENTS LOOK CRISP ON DARK */
.zeal-content-card input[b-qjvmjmcs4m],
.zeal-content-card button[b-qjvmjmcs4m] {
  font: inherit;
}

/* ============================================
   ZT-WAVES: FULL-TOP COVER, RAISED POSITION, ANGLED CUT
   ============================================ */
/* HEIGHT SHOULD COVER SLIGHTLY MORE THAN THE TOP HALF */
/* EXTENDED HEIGHT TO REMOVE ANY TOP GAP */
/* ANGLE SETTINGS (RIGHT SIDE LOWER FOR ORIGINAL DIAGONAL) */
/* PAGE CONTAINER ABOVE WAVES */
.zeal-content-page[b-qjvmjmcs4m] {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  z-index: 2;
}

/* FULLSCREEN WAVE CONTAINER */
.zt-waves[b-qjvmjmcs4m] {
  position: fixed;
  top: -80vh; /* MOVES THE WAVES UP AND DOWN THE SCREEN */
  left: 0;
  width: 100%;
  height: 160vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  /* ANGLED BOTTOM EDGE LIKE ORIGINAL */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 90%);
}
@media only screen and (max-width: 1024px) {
  .zt-waves[b-qjvmjmcs4m] {
    height: 150vh;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 87%);
  }
}

/* EACH WAVE LAYER FULLY FILLS CONTAINER */
.wave-layer[b-qjvmjmcs4m] {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  filter: saturate(115%) contrast(105%);
}
.wave-layer.w-gold-1[b-qjvmjmcs4m] {
  opacity: 0.9;
}
.wave-layer.w-gray-1[b-qjvmjmcs4m] {
  opacity: 0.6;
}
.wave-layer.w-gold-2[b-qjvmjmcs4m] {
  opacity: 0.55;
}
.wave-layer.w-gray-2[b-qjvmjmcs4m] {
  opacity: 0.45;
}

/* SVG: STRETCH HIGHER AND RAISE TO FILL TOP AREA */
.wave-svg[b-qjvmjmcs4m] {
  position: absolute;
  left: 0;
  top: -15%; /* LIFT THE SVG SHAPES HIGHER VISUALLY */
  width: 220%; /* KEEP SEAMLESS ANIMATION WIDTH */
  height: 130%; /* MAKE WAVES TALLER TO FILL THE SCREEN */
}
@media only screen and (max-width: 1024px) {
  .wave-svg[b-qjvmjmcs4m] {
    width: 325%;
    height: 140%;
  }
}
@media only screen and (max-width: 640px) {
  .wave-svg[b-qjvmjmcs4m] {
    width: 350%;
    height: 140%;
  }
}
@media only screen and (max-width: 480px) {
  .wave-svg[b-qjvmjmcs4m] {
    width: 400%;
    height: 140%;
  }
}
@media only screen and (max-width: 360px) {
  .wave-svg[b-qjvmjmcs4m] {
    width: 900%;
    height: 150%;
  }
}

/* WAVE SLIDE ANIMATION */
@keyframes wave-slide-b-qjvmjmcs4m {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* DIFFERENT SPEEDS FOR PARALLAX DEPTH */
.w-gold-1 .wave-svg[b-qjvmjmcs4m] {
  animation: wave-slide-b-qjvmjmcs4m 40s linear infinite;
}

.w-gray-1 .wave-svg[b-qjvmjmcs4m] {
  animation: wave-slide-b-qjvmjmcs4m 32s linear infinite reverse;
}

.w-gold-2 .wave-svg[b-qjvmjmcs4m] {
  animation: wave-slide-b-qjvmjmcs4m 22s linear infinite;
}

.w-gray-2 .wave-svg[b-qjvmjmcs4m] {
  animation: wave-slide-b-qjvmjmcs4m 28s linear infinite reverse;
}

/* CARD ABOVE WAVES */
.zeal-content-card[b-qjvmjmcs4m] {
  z-index: 3;
  position: relative;
}
/* /Components/Pages/Admin/ChargeConnectedAccount.razor.rz.scp.css */
/* /Components/Pages/Admin/ZealAnalytics.razor.rz.scp.css */
.analytics-summary[b-v140yis4gb] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: 14px;
}
.analytics-summary > div[b-v140yis4gb] {
  min-width: 0;
}
.analytics-summary[b-v140yis4gb]  .zt-content-item {
  min-width: 0;
}
.analytics-summary[b-v140yis4gb]  .zt-content-item > span[class*="fa-"] {
  text-align: left;
}

.ca-row[b-v140yis4gb] {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
  gap: 7px;
  padding: 4px 0;
  align-items: center;
}
.ca-row > div[b-v140yis4gb] {
  min-width: 0;
}
.ca-row .ca-name[b-v140yis4gb] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-row .ca-last[b-v140yis4gb] {
  text-align: right;
}

.ca-header[b-v140yis4gb] {
  border-bottom: 1px solid #dedede;
}

.breakdown[b-v140yis4gb] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.breakdown-head[b-v140yis4gb],
.breakdown-line[b-v140yis4gb] {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  column-gap: 8px;
  align-items: center;
  min-width: 0;
}

.breakdown-line[b-v140yis4gb] {
  padding: 1px 0;
}

.breakdown-ico[b-v140yis4gb] {
  text-align: center;
  color: #08bab5;
}
.breakdown-ico[b-v140yis4gb]  span[class*="fa-"] {
  width: 100%;
}

.breakdown-head-text[b-v140yis4gb] {
  font-weight: bold;
}

.breakdown-text[b-v140yis4gb] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdown-val[b-v140yis4gb] {
  font-weight: bold;
}
/* /Components/Pages/Admin/ZealExecutiveSummary.razor.rz.scp.css */
/* HEADLINE COUNTS AND CHART STATS STACK IN A SINGLE COLUMN, ONE ITEM PER LINE. */
.exec-onecol[b-vsn3kuhd3g] {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

	.exec-onecol[b-vsn3kuhd3g]  .zt-content-item {
		min-width: 0;
	}

	.exec-onecol[b-vsn3kuhd3g]  .zt-content-item > span[class*="fa-"] {
		text-align: left;
	}

/* CONNECTED ACCOUNT LISTS: ONE ALIGNED TABLE PER CARD. */
.exec-account-row[b-vsn3kuhd3g] {
	display: grid;
	grid-template-columns: 2.4fr 1.6fr 0.8fr 1fr 1.1fr 1.1fr 1.1fr;
	gap: 6px;
	padding: 3px 0;
	align-items: center;
	font-size: 0.8rem;
}

	.exec-account-row > div[b-vsn3kuhd3g] {
		min-width: 0;
	}

	.exec-account-row > div:nth-child(n + 3)[b-vsn3kuhd3g] {
		text-align: right;
	}

	.exec-account-row .exec-account-name[b-vsn3kuhd3g],
	.exec-account-row .exec-account-owner[b-vsn3kuhd3g] {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

.exec-account-header[b-vsn3kuhd3g] {
	border-bottom: 1px solid #dedede;
}

/* ACTIVE ACCOUNTS: THE SECTION (.zt-page-section, THE WHITE PANEL) STAYS THE NORMAL WIDTH LIKE
   EVERY OTHER SECTION.  ONLY THE ACTION CARD INSIDE GROWS TO FILL IT - THE DEFAULT CARD IS A FIXED
   600px THAT LEAVES EMPTY WHITE SPACE TO ITS RIGHT. */
.exec-wide[b-vsn3kuhd3g]  .zt-action-card {
	width: 100%;
	max-width: none;
}

/* NAME-ONLY LIST (NEW / ACTIVE ACCOUNTS) */
.exec-name-row[b-vsn3kuhd3g] {
	padding: 3px 0;
	font-size: 0.85rem;
}

/* NAME + OWNER LIST (INACTIVE ACCOUNTS) */
.exec-nameowner-row[b-vsn3kuhd3g] {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 8px;
	padding: 3px 0;
	font-size: 0.85rem;
}

	.exec-nameowner-row > div[b-vsn3kuhd3g] {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

.exec-nameowner-header[b-vsn3kuhd3g] {
	border-bottom: 1px solid #dedede;
}

	.exec-nameowner-header > div[b-vsn3kuhd3g] {
		font-weight: bold;
	}

/* TITLE ABOVE EACH TWO-COLUMN MONTH HISTORY GRID (GRID USES THE GLOBAL .two-column-grid HELPER) */
.month-title[b-vsn3kuhd3g] {
	font-weight: bold;
	margin-bottom: 4px;
}

/* DISPOSITION LISTS (UPCOMING DEMOS + CONTACT US): DETAILS LEFT, UPDATE BUTTON RIGHT. */
.exec-disposition-row[b-vsn3kuhd3g] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #dedede;
}

	.exec-disposition-row:last-child[b-vsn3kuhd3g] {
		border-bottom: none;
	}

.exec-disposition-details[b-vsn3kuhd3g] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 0.85rem;
}

	.exec-disposition-details > div[b-vsn3kuhd3g] {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

.exec-disposition-action[b-vsn3kuhd3g] {
	flex: 0 0 auto;
}
/* /Components/Pages/ConnectedAccounts/CheckInCards.razor.rz.scp.css */
.check-in-cards-container[b-dr2q7tgvvd] {
  background-color: #444444;
  display: block;
  box-sizing: border-box;
  padding: 2%;
  border-radius: 7px;
  margin: 0;
}

/* ON PHONES THE DARK CONTAINER SHOULD FILL THE SCREEN EDGE-TO-EDGE (NO LIGHT-GREY GUTTER AROUND IT).
   FULL-BLEED VIA NEGATIVE MARGINS SO IT BREAKS OUT OF THE LAYOUT'S PADDING; DROP THE ROUNDED CORNERS. */
@media only screen and (max-width: 480px) {
  .check-in-cards-container[b-dr2q7tgvvd] {
    border-radius: 0;
    padding: 1.5%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* PULL UP OVER THE LAYOUT FRAME (zeal-content-card 10pt #777 BORDER + ITS padding-top + THE
       PAGE-WRAPPER padding-top) SO THE DARK FILLS TO THE VERY TOP.  THE WRAPPER'S overflow:hidden
       CLIPS ANY OVER-PULL, SO THERE'S NO GREY SLIVER LEFT. */
    margin-top: calc(-2.25vh - 14px);
  }
}

.check-in-cards-list[b-dr2q7tgvvd] {
  grid-template-columns: 32% 32% 32%;
  display: grid;
  column-gap: 7px;
  row-gap: 7px;
}
@media only screen and (max-width: 1280px) {
  .check-in-cards-list[b-dr2q7tgvvd] {
    grid-template-columns: 32% 32% 32%;
  }
}
@media only screen and (max-width: 1024px) {
  .check-in-cards-list[b-dr2q7tgvvd] {
    grid-template-columns: 49% 49%;
  }
}
@media only screen and (max-width: 640px) {
  .check-in-cards-list[b-dr2q7tgvvd] {
    grid-template-columns: 1fr;
  }
}

.check-in-toolbar[b-dr2q7tgvvd] {
  background-color: #444444;
  display: block;
  box-sizing: border-box;
  margin-bottom: 7px;
}

[b-dr2q7tgvvd] .check-in-search-bar .zt-input-field {
  color: #4c4c4c;
  background-color: #ffffff !important;
}
[b-dr2q7tgvvd] .check-in-search-bar .zt-input-header {
  color: #ffffff;
  background-color: #4c4c4c;
}

/* SHRINK CHECK-IN MODALS (RANK, PROFILE) TO FIT THEIR CONTROLS (LIB FORCES min-width:380/max:620). */
.checkin-fit-modal[b-dr2q7tgvvd]  .zt-modal-content {
  min-width: 0;
  width: fit-content;
  max-width: 95vw;
}

/* ALIGN FOOTER BUTTONS' RIGHT EDGE WITH THE FORM CONTROLS.  THE FOOTER IS INSIDE THE 1rem-PADDED
   BODY, SO ITS OWN PADDING PUSHES BUTTONS OFF THE FIELD EDGE - ZERO IT + FULL-WIDTH FLEX-END. */
.checkin-fit-modal[b-dr2q7tgvvd]  .zt-modal-footer {
  width: 100%;
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 0;
}

/* CENTER THE RANK / PROFILE MODALS ON EVERY SCREEN (THE LIB PINS THEM AT top:10vh AND ONLY
   HORIZONTALLY CENTERS).  SCOPE TO THE *SHOWN* STATE (.d-a-block) - AN UNCONDITIONAL display:flex
   WOULD OUTRANK .d-a-none AND FORCE EVERY HIDDEN MODAL VISIBLE. */
.checkin-fit-modal[b-dr2q7tgvvd]  .zt-modal.d-a-block {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 2vh 0;
}

.checkin-fit-modal[b-dr2q7tgvvd]  .zt-modal.d-a-block .zt-modal-dialog {
  margin: auto;
}

/* PHONES: PIN TO A FIXED 92vw SO THE FIT-CONTENT MODAL DOESN'T OVERFLOW + DRIFT OFF-CENTER. */
@media only screen and (max-width: 768px) {
  .checkin-fit-modal[b-dr2q7tgvvd]  .zt-modal-content {
    width: 92vw;
    min-width: 0;
    max-width: 92vw;
  }
}
/* /Components/Pages/ConnectedAccounts/CheckInKiosk.razor.rz.scp.css */
.kiosk-container[b-fqlc66myax] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
  background-color: #333333;
  min-width: 100vw;
  min-height: 100vh;
}
@media only screen and (max-width: 480px) {
  .kiosk-container[b-fqlc66myax] {
    padding: 10px;
  }
}

.zeal-logo[b-fqlc66myax] {
  height: 100px;
  margin: 20px;
}

[b-fqlc66myax] .zt-input-container {
  background-color: #ffffff;
  width: 348px;
  border-radius: 6px;
}

[b-fqlc66myax] .zt-input-field-icon {
  font-size: 32px;
}

@media only screen and (max-width: 480px) {
  [b-fqlc66myax] .zt-input {
    width: 27.5em;
  }
}

[b-fqlc66myax] .zt-input input {
  font-size: 40px;
  font-weight: bold;
  width: 247px;
}

[b-fqlc66myax] .zt-input-field-clear {
  font-size: 32px;
}

[b-fqlc66myax] .input-container {
  display: flex;
  flex-wrap: nowrap; /* prevents wrapping to next line */
  gap: 7px; /* space between input and button */
  align-items: center;
  width: 100%;
}

[b-fqlc66myax] .ztbtn-menu-large {
  margin-top: 0.5em;
}
[b-fqlc66myax] .ztbtn-menu-large span {
  font-size: 70px;
}

[b-fqlc66myax] .detection-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px;
  background-color: #333333;
  min-width: 100vw;
  min-height: 100vh;
}
[b-fqlc66myax] .detection-container video {
  width: 640px;
  height: 480px;
  border: 2px solid #555555;
  border-radius: 9px;
}
/* /Components/Pages/ConnectedAccounts/CheckInKioskCards.razor.rz.scp.css */
.check-in-cards-container[b-w2dghgaw1z] {
  background-color: #333333;
  display: block;
  box-sizing: border-box;
  padding: 2%;
  min-height: 100vh;
  min-width: 100vw;
}

.check-in-cards-list[b-w2dghgaw1z] {
  grid-template-columns: 32% 32% 32%;
  display: grid;
  column-gap: 7px;
  row-gap: 7px;
}
@media only screen and (max-width: 1280px) {
  .check-in-cards-list[b-w2dghgaw1z] {
    grid-template-columns: 32% 32% 32%;
  }
}
@media only screen and (max-width: 1024px) {
  .check-in-cards-list[b-w2dghgaw1z] {
    grid-template-columns: 49% 49%;
  }
}
@media only screen and (max-width: 640px) {
  .check-in-cards-list[b-w2dghgaw1z] {
    grid-template-columns: 99%;
  }
}

.check-in-toolbar[b-w2dghgaw1z] {
  background-color: #333333;
  display: block;
  box-sizing: border-box;
  margin-bottom: 10px;
}

[b-w2dghgaw1z] .check-in-search-bar .zt-input-field {
  color: #4c4c4c;
  background-color: #ffffff !important;
}
[b-w2dghgaw1z] .check-in-search-bar .zt-input-header {
  color: #ffffff;
  background-color: #4c4c4c;
}
/* /Components/Pages/ConnectedAccounts/CheckIns.razor.rz.scp.css */
[b-fs4psrmmxm] .check-ins-container {
  width: 100%;
  border-radius: 15px;
}

[b-fs4psrmmxm] .check-in-button {
  font-size: 16pt;
}

[b-fs4psrmmxm] .check-in-name {
  font-size: 16pt;
}
/* /Components/Pages/ConnectedAccounts/ConnectedAccountHome.razor.rz.scp.css */
.ca-calendar[b-k9h7zglr1z] {
  width: 520px;
  max-width: 100%;
  margin: 0 0 12px 0;
}

.ca-calendar-nav[b-k9h7zglr1z] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  margin-bottom: 4px;
  font-size: 22px;
}

.ca-calendar-title[b-k9h7zglr1z] {
  font-size: 18px;
  font-weight: 600;
  color: #666666;
}

.ca-calendar-grid[b-k9h7zglr1z] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.ca-calendar-dow[b-k9h7zglr1z] {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  padding: 2px 0;
}

.ca-calendar-cell[b-k9h7zglr1z] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  font-size: 15px;
  color: #333333;
}

.ca-calendar-empty[b-k9h7zglr1z] {
  visibility: hidden;
}

.ca-calendar-daynum[b-k9h7zglr1z] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-sizing: border-box;
}

.ca-calendar-today .ca-calendar-daynum[b-k9h7zglr1z] {
  border: 1.5px solid #bbbbbb;
}

.ca-calendar-has-class[b-k9h7zglr1z] {
  cursor: pointer;
}

.ca-calendar-has-class .ca-calendar-daynum[b-k9h7zglr1z] {
  background-color: #2d602d;
  color: #ffffff;
  font-weight: 600;
}

.ca-calendar-has-class:hover .ca-calendar-daynum[b-k9h7zglr1z] {
  background-color: #1f431f;
}

.ca-calendar-selected .ca-calendar-daynum[b-k9h7zglr1z] {
  background-color: #1f431f;
  color: #ffffff;
  font-weight: 600;
  outline: 3px solid #ffcb04;
  outline-offset: 1px;
}

.ca-calendar-caption[b-k9h7zglr1z] {
  font-size: 12px;
  color: #666666;
  margin-top: 4px;
}
/* /Components/Pages/ConnectedAccounts/ConnectedSiteAnalytics.razor.rz.scp.css */
.analytics-summary[b-p09uqyntp6] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: 14px;
}
.analytics-summary > div[b-p09uqyntp6] {
  min-width: 0;
}
.analytics-summary[b-p09uqyntp6]  .zt-content-item {
  min-width: 0;
}
.analytics-summary[b-p09uqyntp6]  .zt-content-item > span[class*="fa-"] {
  text-align: left;
}

.breakdown[b-p09uqyntp6] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.breakdown-head[b-p09uqyntp6],
.breakdown-line[b-p09uqyntp6] {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  column-gap: 8px;
  align-items: center;
  min-width: 0;
}

.breakdown-line[b-p09uqyntp6] {
  padding: 1px 0;
}

.breakdown-ico[b-p09uqyntp6] {
  text-align: center;
  color: #08bab5;
}
.breakdown-ico[b-p09uqyntp6]  span[class*="fa-"] {
  width: 100%;
}

.breakdown-head-text[b-p09uqyntp6] {
  font-weight: bold;
}

.breakdown-text[b-p09uqyntp6] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdown-val[b-p09uqyntp6] {
  font-weight: bold;
}

.top-page-row[b-p09uqyntp6] {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr;
  gap: 7px;
  padding: 4px 0;
  align-items: center;
}
.top-page-row > div[b-p09uqyntp6] {
  min-width: 0;
}
.top-page-row .top-page-path[b-p09uqyntp6] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-page-header[b-p09uqyntp6] {
  border-bottom: 1px solid #dedede;
}

.funnel-step[b-p09uqyntp6] {
  display: grid;
  grid-template-columns: minmax(90px, 170px) 1fr 36px;
  gap: 7px;
  align-items: center;
  padding: 2px 0;
}
.funnel-step .funnel-step-name[b-p09uqyntp6] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funnel-step .funnel-step-track[b-p09uqyntp6] {
  background-color: #efefef;
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}
.funnel-step .funnel-step-fill[b-p09uqyntp6] {
  background-color: rgba(75, 192, 124, 0.55);
  border-radius: 4px;
  height: 100%;
}
.funnel-step .funnel-step-count[b-p09uqyntp6] {
  text-align: right;
  font-weight: bold;
}
/* /Components/Pages/ConnectedAccounts/Insights.razor.rz.scp.css */
.overdue-container[b-3qpidq6hs7] {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
}

.member-summary[b-3qpidq6hs7] {
  display: flex;
}
.member-summary div[b-3qpidq6hs7] {
  flex: 1;
}
.member-summary[b-3qpidq6hs7]  .member-value-icon {
  text-align: left !important;
}

.chart-buttons[b-3qpidq6hs7] {
  padding: 7px;
  background-color: #dedede;
  border-radius: 4px;
  margin-top: 7px;
  margin-bottom: 5px;
}
/* /Components/Pages/ConnectedAccounts/Revenue.razor.rz.scp.css */
.spanlink[b-c8m4dh119c] {
  color: var(--zeal-color-primary);
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}

.user-profile-picture[b-c8m4dh119c] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -7.5pt;
}
/* /Components/Pages/ConnectedAccounts/Sms.razor.rz.scp.css */
/* SENT-TEXTS TOOLBAR — SAME VERIFIED LAYOUT AS THE EMAIL PAGE (align-items: stretch makes the buttons
   match the filter-box height at every width; the flex/centering override targets ONLY the visible
   .zt-show-inline button so the hidden alt stays hidden; !important beats .zt-show-inline's inline-block). */
.sms-toolbar[b-dzzbts1qes] {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 4px;
}

.sms-filter[b-dzzbts1qes] {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 28rem;
}

.sms-filter[b-dzzbts1qes]  form {
	margin: 0;
}

.sms-filter[b-dzzbts1qes]  .zt-input-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

.sms-filter[b-dzzbts1qes]  .zt-input {
	width: 100%;
	max-width: none;
	/* LIGHTER, MORE DISCRETE BORDER (THE COMPONENT DEFAULT #666 READS TOO HEAVY AS A LINE). */
	border-color: #bbbbbb;
}

.sms-filter[b-dzzbts1qes]  .zt-input-header {
	display: none;
}

.sms-filter[b-dzzbts1qes]  .zt-validation-message-container {
	display: none;
}

.sms-toolbar[b-dzzbts1qes]  button {
	flex: 0 0 auto;
}

.sms-toolbar[b-dzzbts1qes]  button.zt-show-inline {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.sms-toolbar[b-dzzbts1qes]  button > div {
	float: none;
}

/* THE ICON div RENDERS WIDER THAN THE GLYPH — CONSTRAIN IT SO THE LABEL SITS RIGHT NEXT TO THE ICON. */
.sms-toolbar[b-dzzbts1qes]  button > div:first-child {
	width: 9pt;
	text-align: center;
}

/* MIN AGE / MAX AGE SHARE ONE ROW THE SAME WIDTH AS THE FULL-WIDTH ROWS ABOVE (CAPPED AT 350px).
   EACH INPUT FLEXES TO HALF THE ROW (OVERRIDING THE COMPONENT'S OWN 350px max-width). */
.age-row[b-dzzbts1qes] {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	max-width: 350px;
}

.age-row[b-dzzbts1qes]  .zt-input-container {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
}

/* ACCEPTABLE-USE MODAL PARAGRAPHS — EVEN VERTICAL GAP BETWEEN EACH BLOCK (para1->para2 == para2->fine print). */
.sms-policy-para[b-dzzbts1qes] {
	margin: 0 0 0.85rem 0;
}

.sms-policy-fine[b-dzzbts1qes] {
	margin: 0;
	font-size: 9pt;
	color: #666666;
}

/* MODAL SPACING + DELIVERY-DETAILS / BODY LAYOUT (SCOPED CLASSES — NO INLINE STYLES). */
.sms-modal-action[b-dzzbts1qes] {
	margin-top: 1rem;
}

.sms-details-info[b-dzzbts1qes] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 10pt;
}

/* "RECIPIENTS" BUTTON IN THE DELIVERY DETAILS MODAL — A LITTLE BREATHING ROOM ABOVE IT. */
.sms-recipients-button[b-dzzbts1qes] {
	margin-top: 1rem;
}

/* RECIPIENTS MODAL — COMPACT, SCROLLABLE LIST (~3-4 ROWS VISIBLE, TIGHTER THAN THE DETAILS SUMMARY). */
.sms-recipients-legend[b-dzzbts1qes] {
	font-size: 9pt;
	color: #666666;
	margin-bottom: 0.65rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid #e2e2e2;
}

.sms-recipients-list[b-dzzbts1qes] {
	max-height: 150px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 4px;
	font-size: 10pt;
}

.sms-recipients-row[b-dzzbts1qes] {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* SINGLE LINE PER RECIPIENT — "Name (phone)", TEXT LEFT, STATUS ICON RIGHT. */
.sms-recipients-line[b-dzzbts1qes] {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* SMS BODY IS PLAIN TEXT — PRESERVE LINE BREAKS, WRAP LONG LINES, SCROLL IF TALL. */
.sms-body-box[b-dzzbts1qes] {
	max-height: 55vh;
	overflow-y: auto;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	padding: 14px;
	background: #ffffff;
	white-space: pre-wrap;
	word-break: break-word;
	font-size: 10pt;
}
/* /Components/Pages/ConnectedAccounts/Smtp.razor.rz.scp.css */
/* SENT-EMAILS TOOLBAR: SEARCH BOX + SEARCH BUTTON + NEW BUTTON ON ONE ROW AT EVERY WIDTH.
   VERIFIED IN A RENDER HARNESS AGAINST THE REAL zeal-ui.css (desktop + 390px): the input box and both
   buttons are the SAME height with even 4px gaps, from the largest desktop to the smallest phone.

   THREE THINGS MAKE IT WORK:
   1) align-items: stretch makes the buttons match the filter box height automatically (no fixed px).
   2) The flex/centering override targets ONLY the visible (.zt-show-inline) button, so the hidden
      busy/disabled alt button that ZtButton also renders stays display:none.
   3) display: inline-flex !important is required to beat .zt-show-inline { display:inline-block !important }. */
.email-toolbar[b-y8sthno2r6] {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 4px;
}

/* THE FILTER FILLS THE LEFTOVER ROOM (CAPPED ON LARGE SCREENS) AND SHRINKS ON SMALL ONES. */
.email-filter[b-y8sthno2r6] {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 28rem;
}

/* THE INPUT FILLS ITS WRAPPER (OVERRIDE THE COMPONENT'S 350px CAP + MARGINS) AND HIDES THE EMPTY
   LABEL HEADER + VALIDATION SLOT SO IT IS A CLEAN SINGLE ROW. */
.email-filter[b-y8sthno2r6]  form {
	margin: 0;
}

.email-filter[b-y8sthno2r6]  .zt-input-container {
	width: 100%;
	max-width: none;
	margin: 0;
}

.email-filter[b-y8sthno2r6]  .zt-input {
	width: 100%;
	max-width: none;
	/* LIGHTER, MORE DISCRETE BORDER (THE COMPONENT DEFAULT $zealMediumGrey #666 READS TOO HEAVY AS A LINE). */
	border-color: #bbbbbb;
}

.email-filter[b-y8sthno2r6]  .zt-input-header {
	display: none;
}

.email-filter[b-y8sthno2r6]  .zt-validation-message-container {
	display: none;
}

/* BUTTONS KEEP THEIR NATURAL WIDTH AND (VIA THE STRETCH ABOVE) MATCH THE FILTER-BOX HEIGHT. */
.email-toolbar[b-y8sthno2r6]  button {
	flex: 0 0 auto;
}

/* ONLY THE VISIBLE BUTTON BECOMES A FLEX BOX THAT CENTERS ITS ICON + LABEL.  THE !important BEATS
   .zt-show-inline's inline-block; THE HIDDEN .zt-hide ALT IS LEFT ALONE SO IT STAYS display:none. */
.email-toolbar[b-y8sthno2r6]  button.zt-show-inline {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.email-toolbar[b-y8sthno2r6]  button > div {
	float: none;
}

/* THE ICON div RENDERS WIDER THAN THE GLYPH (~17px FOR A ~12px FIXED-WIDTH ICON), WHICH PUSHED THE LABEL
   TOO FAR RIGHT.  CONSTRAIN IT TO HUG THE ICON; text-align:center KEEPS THE FixedWidth ICON CENTERED IN
   THE TIGHT div (SO THE ICON-ONLY SEARCH BUTTON STAYS CENTERED TOO). */
.email-toolbar[b-y8sthno2r6]  button > div:first-child {
	width: 9pt;
	text-align: center;
}

/* MIN AGE / MAX AGE SHARE ONE ROW THAT IS THE SAME WIDTH AS THE FULL-WIDTH ROWS ABOVE (CAPPED AT 350px).
   EACH INPUT FLEXES TO TAKE HALF THE ROW (OVERRIDING THE COMPONENT'S OWN 350px max-width). */
.age-row[b-y8sthno2r6] {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	max-width: 350px;
}

.age-row[b-y8sthno2r6]  .zt-input-container {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
}
/* /Components/Pages/ConnectedSites/ConnectedSiteHome.razor.rz.scp.css */
[b-9je10q4i1t] .site-builder-toolbar {
  position: fixed;
  background-color: #333333;
  top: auto;
  bottom: 60px;
  left: 0;
  right: 0;
  border-top: 1pt solid #444444;
  border-bottom: none;
  z-index: 9000;
  display: flex;
  align-items: center; /* CENTER CHILDREN VERTICALLY */
  gap: 5px; /* SPACE BETWEEN MENU, LOGO, ICON CLUSTER, MIN-MAX */
  padding: 10px 10px;
  pointer-events: auto;
  height: 60px;
  min-width: 100vw;
}

[b-9je10q4i1t] .editor-container {
  /* Let the container grow naturally with all the ZtConnectedSection children */
  min-height: 100vh;
  box-sizing: border-box;
  /* CRITICAL: Extra bottom padding so content isn't hidden behind the fixed toolbar */
  padding: 10px 10px 150px 10px !important; /* 60px toolbar + 60px safety + 20px breathing room */
  /* Optional but recommended for clean scrolling */
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
}
/* /Components/Pages/ConnectedSites/ConnectedSitePreview.razor.rz.scp.css */
/* /Components/Pages/ConnectedSites/DynamicTenantPage.razor.rz.scp.css */
/* LAVA GOO LOADING SCREEN */
@property --vignette-color {
  syntax: "<color>";
  initial-value: #111111;
  inherits: false;
}
.zt-tenant-loading-container[b-mrte60ho1y] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  /* Use the variable inside the gradient */
  background: radial-gradient(circle at center, var(--vignette-color) 0%, #000000 85%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  /* Animate the variable itself */
  animation: bg-pulse-b-mrte60ho1y 4s ease-in-out infinite alternate !important;
}

@keyframes bg-pulse-b-mrte60ho1y {
  from {
    --vignette-color: #222222;
  }
  to {
    --vignette-color: #050505;
  }
}
.zt-tenant-loading-spinner[b-mrte60ho1y] {
  position: relative !important;
  width: 450px !important;
  height: 450px !important;
}

.lava-goo-wrapper[b-mrte60ho1y] {
  position: absolute !important;
  inset: 0 !important;
  filter: blur(5px); /* SOFTENS THE EDGES FOR A LAVA FEEL */
}

.goo[b-mrte60ho1y] {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
  mix-blend-mode: screen !important;
  opacity: 0.7;
  /* ORGANIC BORDER RADIUS CREATES THE GOO SHAPE */
  border-radius: 40% 60% 70% 30%/50% 60% 30% 70% !important;
  animation: goo-spin-b-mrte60ho1y linear infinite !important;
}

/* INDIVIDUAL GOO BALL CONFIGURATION */
.goo-1[b-mrte60ho1y] {
  width: 320px;
  height: 340px;
  background: radial-gradient(circle, #d4af37, transparent); /* ZEAL GOLD */
  animation-duration: 8s !important;
}

.goo-2[b-mrte60ho1y] {
  width: 280px;
  height: 300px;
  background: radial-gradient(circle, #ff4500, transparent); /* LAVA RED/ORANGE */
  animation-duration: 12s !important;
  animation-direction: reverse !important;
  opacity: 0.5;
}

.goo-3[b-mrte60ho1y] {
  width: 350px;
  height: 310px;
  background: radial-gradient(circle, #b88900, transparent); /* DEEP GOLD */
  animation-duration: 15s !important;
}

.goo-4[b-mrte60ho1y] {
  width: 250px;
  height: 260px;
  background: radial-gradient(circle, #777, transparent); /* SILVER/GRAY SHEEN */
  animation-duration: 6s !important;
  animation-direction: reverse !important;
  opacity: 0.4;
}

.goo-5[b-mrte60ho1y] {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #d4af37, #ffcc00);
  animation-duration: 20s !important;
  opacity: 0.3;
}

/* THE ANIMATION: ROTATE + MORPH SHAPE */
@keyframes goo-spin-b-mrte60ho1y {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70% !important;
  }
  33% {
    border-radius: 70% 30% 50% 50%/30% 30% 70% 70% !important;
    transform: translate(-50%, -50%) rotate(120deg) scale(1.1);
  }
  66% {
    border-radius: 30% 70% 70% 30%/50% 40% 70% 40% !important;
    transform: translate(-50%, -50%) rotate(240deg) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70% !important;
  }
}
/* LOGO CONTAINER */
.logo-container[b-mrte60ho1y] {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 30 !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.85) !important; /* DARKENED TO POP AGAINST LAVA */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
  border: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-container img[b-mrte60ho1y] {
  width: 85% !important;
  height: 85% !important;
  object-fit: contain !important;
}
/* /Components/Pages/ConnectedSites/EditConnectedPage.razor.rz.scp.css */
[b-kojas9ebuw] .help-text {
  font-size: 9pt;
  width: 100%;
}

/* SECURITY "CLICK HERE" LINK — BOLD, BLUE, OBVIOUSLY CLICKABLE */
.security-link[b-kojas9ebuw] {
  color: #0d6efd;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.security-link:hover[b-kojas9ebuw] {
  color: #0a58ca;
}
/* /Components/Pages/ConnectedSites/EditConnectedSection.razor.rz.scp.css */
/* SECURITY "CLICK HERE" LINK — BOLD, BLUE, OBVIOUSLY CLICKABLE */
.security-link[b-0iqkgj9amx] {
	color: #0d6efd;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.security-link:hover[b-0iqkgj9amx] {
	color: #0a58ca;
}
/* /Components/Pages/ConnectedSites/LiabilityWaiver.razor.rz.scp.css */
.waiver-header[b-dyhkesbyi8] {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px;
}
.waiver-header div:first-of-type[b-dyhkesbyi8] {
  flex-shrink: 0;
}
.waiver-header div:first-of-type img[b-dyhkesbyi8] {
  display: block;
  max-width: 100%;
  object-fit: contain;
  height: 75px;
}
@media only screen and (max-width: 480px) {
  .waiver-header div:first-of-type img[b-dyhkesbyi8] {
    height: 60px;
  }
}
.waiver-header div:last-of-type[b-dyhkesbyi8] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  gap: 2px;
  font-size: 24px;
  font-weight: 600;
  color: #666666;
}
.waiver-header div:last-of-type div:first-of-type[b-dyhkesbyi8] {
  color: #666666;
}
@media only screen and (max-width: 480px) {
  .waiver-header div:last-of-type[b-dyhkesbyi8] {
    line-height: 1;
    font-size: 14px;
  }
}
/* /Components/Pages/ConnectedSites/ScheduleTrialClass.razor.rz.scp.css */
.trial-header[b-n9i9779zpp] {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 15px;
}
.trial-header div:first-of-type[b-n9i9779zpp] {
  flex-shrink: 0;
}
.trial-header div:first-of-type img[b-n9i9779zpp] {
  display: block;
  max-width: 100%;
  object-fit: contain;
  height: 75px;
}
@media only screen and (max-width: 480px) {
  .trial-header div:first-of-type img[b-n9i9779zpp] {
    height: 60px;
  }
}
.trial-header div:last-of-type[b-n9i9779zpp] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  gap: 2px;
  font-size: 24px;
  font-weight: 600;
  color: #666666;
}
.trial-header div:last-of-type div:first-of-type[b-n9i9779zpp] {
  color: #666666;
}
@media only screen and (max-width: 480px) {
  .trial-header div:last-of-type[b-n9i9779zpp] {
    line-height: 1;
    font-size: 14px;
  }
}

.trial-program[b-n9i9779zpp] {
  margin-bottom: 6px;
  cursor: pointer;
}
.trial-program[b-n9i9779zpp]  .zt-action-item {
  display: flex;
  align-items: center;
  width: 100%;
}
.trial-program[b-n9i9779zpp]  .zt-action-item > span:last-child {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trial-program-name[b-n9i9779zpp] {
  font-size: 16px;
  font-weight: 600;
}

.trial-program-select[b-n9i9779zpp] {
  flex-shrink: 0;
}

.trial-calendar[b-n9i9779zpp] {
  max-width: 360px;
  margin: 0 0 4px 0;
}

.trial-calendar-nav[b-n9i9779zpp] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  margin-bottom: 2px;
  font-size: 20px;
}

.trial-calendar-title[b-n9i9779zpp] {
  font-size: 18px;
  font-weight: 600;
  color: #666666;
}

.trial-calendar-grid[b-n9i9779zpp] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.trial-calendar-dow[b-n9i9779zpp] {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  padding: 2px 0;
}

.trial-calendar-cell[b-n9i9779zpp] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  color: #333333;
}

.trial-calendar-empty[b-n9i9779zpp] {
  visibility: hidden;
}

.trial-calendar-daynum[b-n9i9779zpp] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-sizing: border-box;
}

.trial-calendar-past .trial-calendar-daynum[b-n9i9779zpp] {
  color: #bbbbbb;
}

.trial-calendar-today .trial-calendar-daynum[b-n9i9779zpp] {
  border: 1.5px solid #bbbbbb;
}

.trial-calendar-has-class[b-n9i9779zpp] {
  cursor: pointer;
}

.trial-calendar-has-class .trial-calendar-daynum[b-n9i9779zpp] {
  background-color: #2d602d;
  color: #ffffff;
  font-weight: 600;
}

.trial-calendar-has-class:hover .trial-calendar-daynum[b-n9i9779zpp] {
  background-color: #1f431f;
}

.timeslot-buttons[b-n9i9779zpp] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/*#region VARIABLES*/
/*#endregion VARIABLES*/
/*#region FONTS*/
@font-face {
  font-family: "WhitneySSmBold";
  src: url("/css/fonts/Whitney-Bold.woff2") format("woff2"), url("/css/fonts/Whitney-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  src: url("/css/fonts/fa-solid-900.woff2") format("woff2");
}
/*#endregion FONTS*/
/*#region HTML ELEMENTS*/
h2[b-1l0ez5iyw1] {
  font-family: WhitneySSmBold;
  font-size: 32pt;
}
@media only screen and (max-width: 1024px) {
  h2[b-1l0ez5iyw1] {
    font-size: 19pt;
  }
}
@media only screen and (max-width: 640px) {
  h2[b-1l0ez5iyw1] {
    font-size: 18pt;
  }
}
@media only screen and (max-width: 480px) {
  h2[b-1l0ez5iyw1] {
    font-size: 21pt;
  }
}
@media only screen and (max-width: 320px) {
  h2[b-1l0ez5iyw1] {
    font-size: 18pt;
  }
}

ul[b-1l0ez5iyw1] {
  list-style: none;
  padding-top: 0;
  padding-left: 15px;
  margin-top: 0;
  text-align: left;
}
@media only screen and (max-width: 1024px) {
  ul[b-1l0ez5iyw1] {
    padding-left: 8.5px;
  }
}
@media only screen and (max-width: 640px) {
  ul[b-1l0ez5iyw1] {
    padding-left: 10.5px;
  }
}
ul li[b-1l0ez5iyw1] {
  position: relative;
  padding-left: 1.5em;
  font-size: 17pt;
}
@media only screen and (max-width: 1440px) {
  ul li[b-1l0ez5iyw1] {
    font-size: 17pt;
  }
}
@media only screen and (max-width: 1280px) {
  ul li[b-1l0ez5iyw1] {
    font-size: 16pt;
  }
}
@media only screen and (max-width: 1024px) {
  ul li[b-1l0ez5iyw1] {
    font-size: 13pt;
  }
}
@media only screen and (max-width: 768px) {
  ul li[b-1l0ez5iyw1] {
    font-size: 11.5pt;
  }
}
@media only screen and (max-width: 640px) {
  ul li[b-1l0ez5iyw1] {
    font-size: 11pt;
  }
}
ul li[b-1l0ez5iyw1]::before {
  content: "\f058";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: gold;
}

/*#endregion HTML ELEMENTS*/
/*#region DOUBLE SECTIONS */
.section[b-1l0ez5iyw1] {
  position: relative;
  height: 100vh;
  display: flex; /* FLEXBOX FOR ALIGNMENT */
  align-items: center; /* VERTICALLY CENTER CONTENT */
  justify-content: center; /* HORIZONTALLY CENTER SECTION CONTENT */
}
@media only screen and (max-width: 1280px) {
  .section[b-1l0ez5iyw1] {
    height: 100vh;
  }
}
@media only screen and (max-width: 1024px) {
  .section[b-1l0ez5iyw1] {
    height: 75vh;
  }
}
@media only screen and (max-width: 720px) {
  .section[b-1l0ez5iyw1] {
    height: 50vh;
  }
}
@media only screen and (max-width: 640px) {
  .section[b-1l0ez5iyw1] {
    height: auto;
    display: grid;
    text-align: left;
  }
}

/* MAIN CONTENT AREA WITH LEFT AND RIGHT PANES */
.section-content[b-1l0ez5iyw1] {
  position: relative; /* NEW: ESTABLISH STACKING CONTEXT ABOVE WAVES */
  z-index: 2; /* CONTENT ABOVE WAVES */
  display: flex; /* PLACE LEFT/RIGHT SIDE BY SIDE */
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 640px) {
  .section-content[b-1l0ez5iyw1] {
    flex-direction: column;
    text-align: left;
  }
}

/* CONTENT COLUMNS */
.section-content-col[b-1l0ez5iyw1] {
  flex: 1; /* TAKE UP HALF OF THE SPACE */
  display: flex;
  flex-direction: column;
  justify-content: center; /* CENTER CONTENT VERTICALLY */
  align-items: flex-start; /* ALIGN LEFT */
  padding: 4rem; /* ADD SOME SPACING */
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}
.section-content-col img[b-1l0ez5iyw1] {
  max-width: 100%;
  max-height: 95%;
  height: auto;
}
@media only screen and (max-width: 1024px) {
  .section-content-col[b-1l0ez5iyw1] {
    padding: 3rem;
  }
}
@media only screen and (max-width: 768px) {
  .section-content-col[b-1l0ez5iyw1] {
    padding: 2.2rem;
  }
}
@media only screen and (max-width: 640px) {
  .section-content-col[b-1l0ez5iyw1] {
    width: 100%;
    flex: none; /* REMOVE FLEX GROW TO STACK CLEANLY */
    padding: 1rem 2rem 1rem 2rem;
    align-items: flex-start;
    text-align: left; /* ALIGN TEXT LEFT */
  }
  .section-content-col:first-child[b-1l0ez5iyw1] {
    order: 1;
    padding-top: 5vh;
    padding-bottom: 0;
  }
  .section-content-col:last-child[b-1l0ez5iyw1] {
    order: 2;
    padding-top: 0;
    padding-bottom: 5vh;
  }
  .reverse-section .section-content-col:first-child[b-1l0ez5iyw1] {
    padding-top: 0;
    padding-bottom: 5vh;
    order: 2;
  }
  .reverse-section .section-content-col:last-child[b-1l0ez5iyw1] {
    padding-top: 5vh;
    padding-bottom: 0;
    order: 1;
  }
}

/*#endregion SECTIONS*/
/*#region FULL WIDTH SECTION*/
.section-full[b-1l0ez5iyw1] {
  position: relative;
  min-height: 100vh;
  width: 100%;
  color: #ffffff;
  transition: background-image 1s ease-in-out;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
}
@media only screen and (max-width: 768px) {
  .section-full[b-1l0ez5iyw1] {
    min-height: 50vh;
  }
}

.full-backdrop[b-1l0ez5iyw1] {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(90, 90, 90, 0.82);
  z-index: 1; /* PLACE BELOW CONTENT */
}

.section-full-content[b-1l0ez5iyw1] {
  position: relative;
  display: inline-block;
  text-align: left;
  z-index: 999;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
  padding: 2rem;
}

/*#endregion FULL WIDTH */
/*#region SECTION COLORS*/
.dark-section[b-1l0ez5iyw1] {
  background-color: #333333;
  color: #ffffff;
}

.tiffany-section[b-1l0ez5iyw1] {
  background-color: rgb(241, 250, 255);
  color: #222222;
}

.white-section[b-1l0ez5iyw1] {
  background-color: #fafafa;
  color: #222222;
}

.connected-section[b-1l0ez5iyw1] {
  background: linear-gradient(135deg, #1b1f2a 0%, #2a3140 45%, #1d2733 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.connected-section[b-1l0ez5iyw1]::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -10%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(235, 180, 31, 0.2) 0%, rgba(235, 180, 31, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.connected-section[b-1l0ez5iyw1]::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -12%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(39, 179, 170, 0.16) 0%, rgba(39, 179, 170, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.documents-section[b-1l0ez5iyw1] {
  background: linear-gradient(135deg, #12212a 0%, #1c3340 45%, #14242e 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.documents-section[b-1l0ez5iyw1]::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -10%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(39, 179, 170, 0.2) 0%, rgba(39, 179, 170, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.documents-section[b-1l0ez5iyw1]::after {
  content: "";
  position: absolute;
  bottom: -25%;
  right: -12%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(235, 180, 31, 0.15) 0%, rgba(235, 180, 31, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.welcome-section[b-1l0ez5iyw1] {
  background: linear-gradient(135deg, #211c16 0%, #3a2f20 45%, #1f1d18 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  margin-bottom: 60px;
}
.welcome-section[b-1l0ez5iyw1]::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -10%;
  width: 62vmax;
  height: 62vmax;
  background: radial-gradient(circle, rgba(235, 180, 31, 0.22) 0%, rgba(235, 180, 31, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.welcome-section[b-1l0ez5iyw1]::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -12%;
  width: 52vmax;
  height: 52vmax;
  background: radial-gradient(circle, rgba(39, 179, 170, 0.13) 0%, rgba(39, 179, 170, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.billing-section[b-1l0ez5iyw1] {
  background: linear-gradient(135deg, #14182a 0%, #232c4a 45%, #161b2e 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.billing-section[b-1l0ez5iyw1]::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -10%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(235, 180, 31, 0.2) 0%, rgba(235, 180, 31, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.billing-section[b-1l0ez5iyw1]::after {
  content: "";
  position: absolute;
  bottom: -25%;
  right: -12%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(39, 179, 170, 0.15) 0%, rgba(39, 179, 170, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.communications-section[b-1l0ez5iyw1] {
  background: linear-gradient(135deg, #1b1726 0%, #2d2442 45%, #191a2e 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.communications-section[b-1l0ez5iyw1]::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -10%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(39, 179, 170, 0.2) 0%, rgba(39, 179, 170, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.communications-section[b-1l0ez5iyw1]::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -12%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(235, 180, 31, 0.14) 0%, rgba(235, 180, 31, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

.programs-section[b-1l0ez5iyw1] {
  background: linear-gradient(135deg, #102220 0%, #1b3a32 45%, #122420 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}
.programs-section[b-1l0ez5iyw1]::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -10%;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, rgba(235, 180, 31, 0.2) 0%, rgba(235, 180, 31, 0) 60%);
  pointer-events: none;
  z-index: 0;
}
.programs-section[b-1l0ez5iyw1]::after {
  content: "";
  position: absolute;
  bottom: -25%;
  left: -12%;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(39, 179, 170, 0.15) 0%, rgba(39, 179, 170, 0) 60%);
  pointer-events: none;
  z-index: 0;
}

/*#endregion SECTION COLORS*/
/*#region HERO SECTION*/
.hero-section .section-content .section-content-col img[b-1l0ez5iyw1] {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.hero-section .section-content .section-content-col .hero-intro[b-1l0ez5iyw1] {
  margin-top: 15px;
  padding-left: 25px;
  font-weight: bolder;
}
@media only screen and (max-width: 640px) {
  .hero-section .section-content .section-content-col .hero-intro[b-1l0ez5iyw1] {
    padding-left: 15px;
  }
}
.hero-section .section-content .section-content-col .hero-buttons[b-1l0ez5iyw1] {
  padding-left: 25px;
}
@media only screen and (max-width: 640px) {
  .hero-section .section-content .section-content-col .hero-buttons[b-1l0ez5iyw1] {
    padding-left: 15px;
  }
}

/*#endregion HERO SECTION*/
/*#region DOCUMENTS SECTION*/
.document-section[b-1l0ez5iyw1] {
  background-image: url("/images/home/Documents1024.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.75);
  background-blend-mode: multiply;
  margin-bottom: 60px;
}
/*#endregion DOCUMENTS SECTION*/
/*#region WAVES*/
.zt-waves[b-1l0ez5iyw1] {
  position: absolute;
  top: 0;
  inset: 0; /* fill .waves-host completely */
  width: 100%;
  height: 39vh; /* key: follow host height */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 75%);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  opacity: 0.3;
  /*border: 3px red green;*/
}
@media only screen and (max-width: 1440px) and (orientation: landscape) {
  .zt-waves[b-1l0ez5iyw1] {
    height: 50vh;
  }
}
@media only screen and (max-width: 1280px) and (orientation: landscape) {
  .zt-waves[b-1l0ez5iyw1] {
    height: 47vh;
  }
}
@media only screen and (max-width: 1024px) and (orientation: portrait) {
  .zt-waves[b-1l0ez5iyw1] {
    height: 25vh;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .zt-waves[b-1l0ez5iyw1] {
    height: 25vh;
  }
}
@media only screen and (max-width: 640px) {
  .zt-waves[b-1l0ez5iyw1] {
    height: 19vh;
  }
}

.wave-layer[b-1l0ez5iyw1] {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  filter: saturate(160%) contrast(125%);
  top: -26vh;
}
@media only screen and (max-width: 1440px) and (orientation: landscape) {
  .wave-layer[b-1l0ez5iyw1] {
    top: -28vh;
  }
}
@media only screen and (max-width: 1280px) and (orientation: landscape) {
  .wave-layer[b-1l0ez5iyw1] {
    top: -28vh;
  }
}
@media only screen and (max-width: 1024px) and (orientation: portrait) {
  .wave-layer[b-1l0ez5iyw1] {
    top: -15vh;
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .wave-layer[b-1l0ez5iyw1] {
    top: -17vh;
  }
}
@media only screen and (max-width: 640px) {
  .wave-layer[b-1l0ez5iyw1] {
    top: -12vh;
  }
}
.wave-layer.w-gold-1[b-1l0ez5iyw1] {
  opacity: 0.99;
}
.wave-layer.w-gray-1[b-1l0ez5iyw1] {
  opacity: 0.6;
}
.wave-layer.w-gold-2[b-1l0ez5iyw1] {
  opacity: 0.75;
}
.wave-layer.w-gray-2[b-1l0ez5iyw1] {
  opacity: 0.45;
}

.wave-svg[b-1l0ez5iyw1] {
  position: absolute;
  top: 0;
  left: 0;
  width: 330%; /* wide so the slide can loop */
  height: 90%; /* slight vertical overscan */
}

/* motion */
@keyframes wave-slide-b-1l0ez5iyw1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.w-gold-1 .wave-svg[b-1l0ez5iyw1] {
  animation: wave-slide-b-1l0ez5iyw1 33s linear infinite;
}

.w-gray-1 .wave-svg[b-1l0ez5iyw1] {
  animation: wave-slide-b-1l0ez5iyw1 22s linear infinite reverse;
}

.w-gold-2 .wave-svg[b-1l0ez5iyw1] {
  animation: wave-slide-b-1l0ez5iyw1 14s linear infinite;
}

.w-gray-2 .wave-svg[b-1l0ez5iyw1] {
  animation: wave-slide-b-1l0ez5iyw1 18s linear infinite reverse;
}

/*#endregion WAVES*/
/*#region DEMO / CALL / CONTACT UI*/
.hero-buttons[b-1l0ez5iyw1] {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

.hero-buttons-primary[b-1l0ez5iyw1] {
  display: flex;
}

.hero-buttons-primary[b-1l0ez5iyw1]  .ztbtn.zt-show-inline {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
}

.hero-buttons-primary[b-1l0ez5iyw1]  .ztbtn.zt-show-inline > div {
  float: none;
  margin: 0;
}

.hero-buttons-secondary[b-1l0ez5iyw1] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-modal-host[b-1l0ez5iyw1]  .zt-modal-dialog {
  width: 620px;
  max-width: 94vw;
}
/*#endregion DEMO / CALL / CONTACT UI*/
/* /Components/Pages/Landing.razor.rz.scp.css */
/* ============================================
  CENTERED CONTAINER
  ============================================ */
/* RESET FULL-HEIGHT LAYOUT SO FLEX CENTERING WORKS */
html[b-be6qfiy5r2], body[b-be6qfiy5r2] {
  /* ENSURE THE PAGE CAN FILL THE VIEWPORT */
  height: 100%;
  /* REMOVE DEFAULT MARGINS THAT CAN OFFSET CENTERING */
  margin: 0;
}

/* ROOT COLOR TOKENS FOR BLACK/GOLD THEME */
:root[b-be6qfiy5r2] {
  /* BRAND COLORS */
  --zeal-bg: #000000; /* PURE BLACK BACKDROP */
  --zeal-gold: #d4af37; /* PRIMARY GOLD */
  --zeal-gold-2: #b88900; /* SECONDARY GOLD (DEEPER) */
  --zeal-card: #0e0e0e; /* NEAR-BLACK CARD */
  --zeal-card-border: #1f1f1f; /* SUBTLE BORDER */
  --zeal-text: #eaeaea; /* HIGH-CONTRAST TEXT */
}

/* PAGE WRAPPER THAT CENTERS CHILDREN */
.zeal-content-page[b-be6qfiy5r2] {
  /* FULL-VIEWPORT FLEX BOX */
  min-height: 100%;
  display: flex;
  align-items: center; /* VERTICAL CENTER */
  justify-content: center; /* HORIZONTAL CENTER */
  background: var(--zeal-bg);
  position: relative; /* ESTABLISH CONTAINING BLOCK FOR Z-INDEX */
  overflow: hidden; /* HIDE ANY BACKGROUND OVERFLOW */
}

/* CARD THAT HOSTS YOUR RAZOR UI */
.zeal-content-card[b-be6qfiy5r2] {
  /* RESPONSIVE, MAX-WIDTH BASED ON VIEWPORT */
  width: min(92vw, 520px);
  color: var(--zeal-text);
  padding: clamp(20px, 4vw, 32px);
  z-index: 1; /* KEEP CARD ABOVE THE LAVA BACKGROUND */
}

/* OPTIONAL: MAKE FORM ELEMENTS LOOK CRISP ON DARK */
.zeal-content-card input[b-be6qfiy5r2],
.zeal-content-card button[b-be6qfiy5r2] {
  font: inherit;
}

/* ============================================
   ZT-WAVES: FULL-TOP COVER, RAISED POSITION, ANGLED CUT
   ============================================ */
/* HEIGHT SHOULD COVER SLIGHTLY MORE THAN THE TOP HALF */
/* EXTENDED HEIGHT TO REMOVE ANY TOP GAP */
/* ANGLE SETTINGS (RIGHT SIDE LOWER FOR ORIGINAL DIAGONAL) */
/* PAGE CONTAINER ABOVE WAVES */
.zeal-content-page[b-be6qfiy5r2] {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
  z-index: 2;
}

/* FULLSCREEN WAVE CONTAINER */
.zt-waves[b-be6qfiy5r2] {
  position: fixed;
  top: -80vh; /* MOVES THE WAVES UP AND DOWN THE SCREEN */
  left: 0;
  width: 100%;
  height: 160vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
  /* ANGLED BOTTOM EDGE LIKE ORIGINAL */
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 90%);
}
@media only screen and (max-width: 1024px) {
  .zt-waves[b-be6qfiy5r2] {
    height: 150vh;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 87%);
  }
}

/* EACH WAVE LAYER FULLY FILLS CONTAINER */
.wave-layer[b-be6qfiy5r2] {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  filter: saturate(115%) contrast(105%);
}
.wave-layer.w-gold-1[b-be6qfiy5r2] {
  opacity: 0.9;
}
.wave-layer.w-gray-1[b-be6qfiy5r2] {
  opacity: 0.6;
}
.wave-layer.w-gold-2[b-be6qfiy5r2] {
  opacity: 0.55;
}
.wave-layer.w-gray-2[b-be6qfiy5r2] {
  opacity: 0.45;
}

/* SVG: STRETCH HIGHER AND RAISE TO FILL TOP AREA */
.wave-svg[b-be6qfiy5r2] {
  position: absolute;
  left: 0;
  top: -15%; /* LIFT THE SVG SHAPES HIGHER VISUALLY */
  width: 220%; /* KEEP SEAMLESS ANIMATION WIDTH */
  height: 130%; /* MAKE WAVES TALLER TO FILL THE SCREEN */
}
@media only screen and (max-width: 1024px) {
  .wave-svg[b-be6qfiy5r2] {
    width: 325%;
    height: 140%;
  }
}
@media only screen and (max-width: 640px) {
  .wave-svg[b-be6qfiy5r2] {
    width: 350%;
    height: 140%;
  }
}
@media only screen and (max-width: 480px) {
  .wave-svg[b-be6qfiy5r2] {
    width: 400%;
    height: 140%;
  }
}
@media only screen and (max-width: 360px) {
  .wave-svg[b-be6qfiy5r2] {
    width: 900%;
    height: 150%;
  }
}

/* WAVE SLIDE ANIMATION */
@keyframes wave-slide-b-be6qfiy5r2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* DIFFERENT SPEEDS FOR PARALLAX DEPTH */
.w-gold-1 .wave-svg[b-be6qfiy5r2] {
  animation: wave-slide-b-be6qfiy5r2 40s linear infinite;
}

.w-gray-1 .wave-svg[b-be6qfiy5r2] {
  animation: wave-slide-b-be6qfiy5r2 32s linear infinite reverse;
}

.w-gold-2 .wave-svg[b-be6qfiy5r2] {
  animation: wave-slide-b-be6qfiy5r2 22s linear infinite;
}

.w-gray-2 .wave-svg[b-be6qfiy5r2] {
  animation: wave-slide-b-be6qfiy5r2 28s linear infinite reverse;
}

/* CARD ABOVE WAVES */
.zeal-content-card[b-be6qfiy5r2] {
  z-index: 3;
  position: relative;
}

/*ZEAL LOGO*/
.zeal-logo[b-be6qfiy5r2] {
  width: 50vw;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* /Components/Pages/RequiredDocuments/EditRequiredDocument.razor.rz.scp.css */
/* /Components/Pages/RequiredDocuments/RequiredDocumentSignedPreview.razor.rz.scp.css */
/* /Components/Pages/ScheduleDemo.razor.rz.scp.css */
.demo-header[b-gzpjvdlqnk] {
  display: flex;
  padding: 2px 0 8px 0;
}
.demo-header img[b-gzpjvdlqnk] {
  display: block;
  height: 74px;
  max-width: 100%;
  object-fit: contain;
}
@media only screen and (max-width: 480px) {
  .demo-header img[b-gzpjvdlqnk] {
    height: 56px;
  }
}

.demo-calendar[b-gzpjvdlqnk] {
  max-width: 360px;
  margin: 0 0 4px 0;
}

.demo-calendar-nav[b-gzpjvdlqnk] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 6px;
  margin-bottom: 2px;
  font-size: 20px;
}

.demo-calendar-title[b-gzpjvdlqnk] {
  font-size: 18px;
  font-weight: 600;
  color: #666666;
}

.demo-calendar-grid[b-gzpjvdlqnk] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.demo-calendar-dow[b-gzpjvdlqnk] {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #999999;
  padding: 2px 0;
}

.demo-calendar-cell[b-gzpjvdlqnk] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  color: #333333;
}

.demo-calendar-empty[b-gzpjvdlqnk] {
  visibility: hidden;
}

.demo-calendar-daynum[b-gzpjvdlqnk] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-sizing: border-box;
}

.demo-calendar-past .demo-calendar-daynum[b-gzpjvdlqnk] {
  color: #bbbbbb;
}

.demo-calendar-today .demo-calendar-daynum[b-gzpjvdlqnk] {
  border: 1.5px solid #bbbbbb;
}

.demo-calendar-has-slot[b-gzpjvdlqnk] {
  cursor: pointer;
}

.demo-calendar-has-slot .demo-calendar-daynum[b-gzpjvdlqnk] {
  background-color: #2d602d;
  color: #ffffff;
  font-weight: 600;
}

.demo-calendar-has-slot:hover .demo-calendar-daynum[b-gzpjvdlqnk] {
  background-color: #1f431f;
}

.demo-timeslot-buttons[b-gzpjvdlqnk] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}
/* /Components/Pages/Users/ChargeCustomer.razor.rz.scp.css */
.profile-pic[b-6lw1kbqj9z] {
  border-radius: 5px;
  height: 150px;
}
/* /Components/Pages/Users/EditProgramMembership.razor.rz.scp.css */
/* /Components/Pages/Users/UserAccounts.razor.rz.scp.css */
.profile-pic[b-35d7pciy2o] {
  border-radius: 5px;
  height: 100px;
  margin-bottom: 10px;
}
/* /Components/Pages/Users/UserEditPhone.razor.rz.scp.css */
/* /Components/Pages/Users/UserHome.razor.rz.scp.css */
@font-face {
  font-family: "WhitneySSmBold";
  src: url("/css/fonts/Whitney-Bold.woff2") format("woff2"), url("/css/fonts/Whitney-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  src: url("/css/fonts/fa-solid-900.woff2") format("woff2");
}
.programQrCode[b-95d4nwkc0y] {
  border-radius: 5px;
  margin-top: 5px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  padding: 20px;
  cursor: pointer;
  background-color: #dddddd;
}
@media only screen and (max-width: 480px) {
  .programQrCode[b-95d4nwkc0y] {
    width: 100%;
    padding: 30px;
  }
}

.programCode[b-95d4nwkc0y] {
  margin-top: 0;
  font-weight: bold;
  text-align: center;
  font-size: 14pt;
}

.doc-section[b-95d4nwkc0y] {
  margin-top: 10px;
  font-size: 12pt;
  font-weight: bold;
}

.exec-summary-host[b-95d4nwkc0y]  .zt-modal.d-a-block {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  height: calc(100vh - 60px);
}

.exec-summary-host[b-95d4nwkc0y]  .zt-modal-dialog {
  width: min(1040px, 90vw);
  max-width: min(1040px, 90vw);
  max-height: calc(100vh - 80px);
}

.exec-summary-host[b-95d4nwkc0y]  .zt-modal-content {
  max-width: none;
  max-height: calc(100vh - 80px);
}

.exec-summary-host[b-95d4nwkc0y]  .zt-modal-body {
  max-height: none;
  overflow: hidden;
}

.exec-summary-host[b-95d4nwkc0y]  .exec-summary-frame {
  display: block;
  width: 100%;
  height: 65vh;
  border: 0;
}

.exec-summary-host[b-95d4nwkc0y]  .exec-summary-actions {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.75em;
}

.exec-confirm-actions[b-95d4nwkc0y] {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75em;
}
/* /Components/Shared/ConnectedAccounts/ConnectedAccountUserActionCard.razor.rz.scp.css */
@charset "UTF-8";
.connected-container[b-9rqau1cobf] {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  max-width: 600px;
  margin-bottom: 10px;
}
@media only screen and (max-width: 640px) {
  .connected-container[b-9rqau1cobf] {
    max-width: 95vw;
  }
}
@media only screen and (max-width: 480px) {
  .connected-container[b-9rqau1cobf] {
    max-width: 99vw;
  }
}
@media only screen and (max-width: 320px) {
  .connected-container[b-9rqau1cobf] {
    max-width: 99vw;
  }
}

.connected-header[b-9rqau1cobf] {
  display: flex;
  align-items: center; /* VERTICALLY CENTER PROFILE + NAME */
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.6);
}
@media only screen and (max-width: 640px) {
  .connected-header[b-9rqau1cobf] {
    padding: 8px 10px;
  }
}
@media only screen and (max-width: 480px) {
  .connected-header[b-9rqau1cobf] {
    padding: 8px 10px;
  }
}
@media only screen and (max-width: 320px) {
  .connected-header[b-9rqau1cobf] {
    padding: 8px 10px;
  }
}

.connected-profile[b-9rqau1cobf] {
  width: 58px;
  height: 58px;
  flex-shrink: 0; /* DO NOT ALLOW IMAGE TO SHRINK */
  display: flex;
  align-items: center;
  justify-content: center;
}

.connected-profile-picture[b-9rqau1cobf] {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover; /* PREVENT STRETCHING */
  display: block;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.conected-name[b-9rqau1cobf] {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
@media only screen and (max-width: 640px) {
  .conected-name[b-9rqau1cobf] {
    font-size: 18pt;
  }
}
@media only screen and (max-width: 480px) {
  .conected-name[b-9rqau1cobf] {
    font-size: 12pt;
  }
}
@media only screen and (max-width: 320px) {
  .conected-name[b-9rqau1cobf] {
    font-size: 10pt;
  }
}

.connected-details[b-9rqau1cobf] {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px; /* SPACE BETWEEN ZtContentItem ROWS */
}

.connected-footer[b-9rqau1cobf] {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 👈 LEFT ALIGN BUTTONS */
  gap: 7px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}
@media only screen and (max-width: 640px) {
  .connected-footer[b-9rqau1cobf] {
    gap: 5px;
    padding: 10px 12px;
  }
}
@media only screen and (max-width: 480px) {
  .connected-footer[b-9rqau1cobf] {
    padding: 8px 10px;
    gap: 5px;
  }
}
@media only screen and (max-width: 320px) {
  .connected-footer[b-9rqau1cobf] {
    padding: 8px 10px;
    gap: 5px;
  }
}

/* OPTIONAL: FORCE FOOTER BUTTONS TO A CONSISTENT WIDTH */
.connected-footer > *[b-9rqau1cobf] {
  flex: 1 1 110px; /* GROW/SHRINK, MIN WIDTH */
  display: flex;
  justify-content: start;
}
/* /Components/Shared/ConnectedAccounts/EmailItem.razor.rz.scp.css */
/* MATCHES THE TRIAL-CLASS / PROSPECTIVE-MEMBER ITEM STYLE: ONE ROW PER DATA POINT, ICON ON THE LEFT */
.email-item-container[b-hkkk46t36b] {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 1rem;
	background-color: #f8fcf7;
	border: 1px solid #cfe9d4;
	border-left: 4px solid #2d602d;
	border-radius: 5px;
	margin-bottom: 4px;
}

.email-item-details[b-hkkk46t36b] {
	display: flex;
	flex-direction: column;
	font-size: 10pt;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.email-item-details > div:not(.mt-2)[b-hkkk46t36b] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* /Components/Shared/ConnectedAccounts/MissingPaymentMethodItem.razor.rz.scp.css */
[b-3kbslguq1h].missing-payment-method {
  cursor: pointer;
  margin-bottom: 4px;
  background-color: #ffffeb;
  border: 1px solid #f0c2c2;
  border-left: 4px solid #971b1e;
  padding: 8px;
  border-radius: 5px;
}

[b-3kbslguq1h].user-profile-picture {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -7.5pt;
}
/* /Components/Shared/ConnectedAccounts/ProspectiveMemberItem.razor.rz.scp.css */
.prospective-member-container[b-togydfricw] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem;
  background-color: #f8fcf7;
  border: 1px solid #cfe9d4;
  border-left: 4px solid #2d602d;
  border-radius: 5px;
  margin-bottom: 4px;
  width: 520px;
  max-width: 100%;
}

.prospective-member-container.missing-waiver[b-togydfricw] {
  background-color: #fffbea;
  border-color: #f3e6b0;
  border-left-color: #ffcb04;
}

.user-profile-container[b-togydfricw] {
  flex-shrink: 0;
}

.user-profile-picture[b-togydfricw] {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
}

.details-container[b-togydfricw] {
  display: flex;
  flex-direction: column;
  font-size: 10pt;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.details-container > div:not(.mt-2):not(.waiver-line)[b-togydfricw] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spanlink[b-togydfricw] {
  color: var(--zeal-color-primary);
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}
/* /Components/Shared/ConnectedAccounts/SmsItem.razor.rz.scp.css */
/* MATCHES THE EMAIL ITEM STYLE: ONE ROW PER DATA POINT, ICON ON THE LEFT, GREEN LEFT "TAB". */
.sms-item-container[b-eklpxxkx1y] {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 1rem;
	background-color: #f8fcf7;
	border: 1px solid #cfe9d4;
	border-left: 4px solid #2d602d;
	border-radius: 5px;
	margin-bottom: 4px;
}

.sms-item-details[b-eklpxxkx1y] {
	display: flex;
	flex-direction: column;
	font-size: 10pt;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.sms-item-details > div:not(.mt-2)[b-eklpxxkx1y] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* /Components/Shared/ConnectedAccounts/TrialClassItem.razor.rz.scp.css */
.trial-class-container[b-qlwkenxpcj] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem;
  background-color: #f8fcf7;
  border: 1px solid #cfe9d4;
  border-left: 4px solid #2d602d;
  border-radius: 5px;
  margin-bottom: 4px;
  width: 520px;
  max-width: 100%;
}

.trial-class-container.missing-waiver[b-qlwkenxpcj] {
  background-color: #fffbea;
  border-color: #f3e6b0;
  border-left-color: #ffcb04;
}

.user-profile-container[b-qlwkenxpcj] {
  flex-shrink: 0;
}

.user-profile-picture[b-qlwkenxpcj] {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  object-fit: cover;
}

.details-container[b-qlwkenxpcj] {
  display: flex;
  flex-direction: column;
  font-size: 10pt;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.details-container > div:not(.mt-2):not(.waiver-line)[b-qlwkenxpcj] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spanlink[b-qlwkenxpcj] {
  color: var(--zeal-color-primary);
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}
/* /Components/Shared/ConnectedAccounts/UpcomingChargeItem.razor.rz.scp.css */
.upcoming-charge-container[b-1lsubopwwy] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem;
  background-color: #f8fcf7;
  border-radius: 5px;
  margin-bottom: 4px;
}

.user-profile-container[b-1lsubopwwy] {
  flex-shrink: 0;
}

.user-profile-picture[b-1lsubopwwy] {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
}

.details-container[b-1lsubopwwy] {
  display: flex;
  flex-direction: column;
  font-size: 10pt;
  gap: 1px;
  flex: 1;
}
/* /Components/Shared/ConnectedAccounts/UserCheckinCard.razor.rz.scp.css */
.check-in-card[b-qp52xeu3jn] {
  padding: 2.5% 2%;
  border-radius: 4px;
  width: 100%;
  user-select: none;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 14pt;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
@media only screen and (max-width: 1280px) {
  .check-in-card[b-qp52xeu3jn] {
    font-size: 14pt;
  }
}
@media only screen and (max-width: 1024px) {
  .check-in-card[b-qp52xeu3jn] {
    font-size: 14pt;
  }
}
@media only screen and (max-width: 768px) {
  .check-in-card[b-qp52xeu3jn] {
    font-size: 12pt;
  }
}
@media only screen and (max-width: 640px) {
  .check-in-card[b-qp52xeu3jn] {
    font-size: 12pt;
  }
}

.user-checkin-card-header[b-qp52xeu3jn] {
  display: flex;
  align-items: stretch;
  max-width: 100%;
}

.user-checkin-card-picture[b-qp52xeu3jn] {
  margin-right: 10px;
}

.user-checkin-card-header-details[b-qp52xeu3jn] {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 480px) {
  .user-checkin-card-header-details[b-qp52xeu3jn] {
    width: 220px;
  }
}

.user-checkin-card-lines[b-qp52xeu3jn] {
  flex: 0.95;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 13pt;
  line-height: 1.1;
}

[b-qp52xeu3jn] .user-checkin-card-header-details .zt-content-item {
  margin-top: 0;
  margin-bottom: 0;
}

.user-profile-picture[b-qp52xeu3jn] {
  width: 115px;
  height: 115px;
  border-radius: 5px;
}

.not-checked-in[b-qp52xeu3jn] {
  background: #dedede;
  color: #333333;
}

.checked-in[b-qp52xeu3jn] {
  background-color: #5cb85c;
  color: #ffffff;
}

.near-promotion[b-qp52xeu3jn] {
  box-shadow: inset 4px 0 0 0 #e0b400, inset 0 4px 0 0 #e0b400;
}

.has-errors[b-qp52xeu3jn] {
  box-shadow: inset -4px 0 0 0 #c9302c, inset 0 -4px 0 0 #c9302c;
}

.near-promotion.has-errors[b-qp52xeu3jn] {
  box-shadow: inset 4px 0 0 0 #e0b400, inset 0 4px 0 0 #e0b400, inset -4px 0 0 0 #c9302c, inset 0 -4px 0 0 #c9302c;
}

.user-checkin-card-footer[b-qp52xeu3jn] {
  margin-top: 8px;
  background-color: #bbbbbb;
  border-radius: 4px;
  padding: 7px 6px 6px 8px;
}

.user-checkin-card-actions[b-qp52xeu3jn] {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 18pt;
}

.user-checkin-card-action[b-qp52xeu3jn] {
  cursor: pointer;
  color: #333333;
}

/* ON PHONES THERE ISN'T ROOM FOR ALL THE FOOTER BUTTONS (CHECKOUT / RANK / DETAILS / POINTS +/- /
   ERRORS) AT FULL SIZE.  KEEP EVERY BUTTON THE SAME *NATURAL* SIZE CARD-TO-CARD (flex:0 0 auto = NO
   STRETCH) AND SCALE THE MENU INTERNALS DOWN UNIFORMLY SO THEY ALL FIT.  STRETCHING (flex:1) WAS
   WRONG - IT MADE BUTTON WIDTH VARY BY COUNT AND PUSHED THE FIXED 40px LABEL BOX OFF-CENTRE. */
@media only screen and (max-width: 480px) {
  .user-checkin-card-footer[b-qp52xeu3jn] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 5px 4px;
  }

  /* NATURAL WIDTH, NO STRETCH - SAME ON EVERY CARD; CONTENT STAYS CENTERED.  WRAP IF A CARD HAS
     EXTRA BUTTONS (E.G. THE OWNER'S HOME BUTTON). */
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn {
    flex: 0 0 auto;
  }

  /* SHRINK THE MENU-LARGE BUTTONS UNIFORMLY: SMALLER ICON, LABEL BOX AND PADDING SO 6-7 FIT IN A ROW. */
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large {
    padding: 0.25rem 0.25rem 0.3rem 0.25rem;
  }

  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large .fa,
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large .fas,
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large .fad,
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large .fab,
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large .fal,
  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large .far {
    font-size: 0.95rem;
  }

  .user-checkin-card-footer[b-qp52xeu3jn]  .ztbtn-menu-large div:last-of-type {
    width: 32px;
    font-size: 0.42rem;
  }
}
/* /Components/Shared/ConnectedAccounts/UserKioskCard.razor.rz.scp.css */
.check-in-card[b-lethao9kox] {
  padding: 2.5% 2%;
  border-radius: 4px;
  width: 100%;
  user-select: none;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 20pt;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}

@media only screen and (max-width: 1280px) {
  .check-in-card[b-lethao9kox] {
    font-size: 18pt;
  }
}
@media only screen and (max-width: 1024px) {
  .check-in-card[b-lethao9kox] {
    font-size: 16pt;
  }
}
@media only screen and (max-width: 640px) {
  .check-in-card[b-lethao9kox] {
    font-size: 14pt;
  }
}
.user-checkin-card-header[b-lethao9kox] {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
}

.user-checkin-card-picture[b-lethao9kox] {
  margin-right: 10px;
}

.user-checkin-card-header-details[b-lethao9kox] {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 480px) {
  .user-checkin-card-header-details[b-lethao9kox] {
    width: 220px;
  }
}
.user-profile-picture[b-lethao9kox] {
  width: 115px;
  height: 115px;
  border-radius: 5px;
}

.not-checked-in[b-lethao9kox] {
  background: #dedede;
  color: #333333;
}

.checked-in[b-lethao9kox] {
  background-color: #5cb85c;
  color: #ffffff;
}
/* /Components/Shared/ConnectedSites/ConnectedAlbumComments.razor.rz.scp.css */
/* ALBUM COMMENTS — SCOPED STYLES.  Facebook/Reddit-style thread with votes + reactions. */

/* Spacing uses var(--ca-space) inherited from .ztlb-panel, with a 0.5rem fallback for standalone use. */
.ca-comments[b-vhpzb03bo2] {
    width: 100%;
    /* NO border-top / margin here — the panel's own gap separates the caption from the comments. */
}

.ca-comment-compose[b-vhpzb03bo2],
.ca-reply-compose[b-vhpzb03bo2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--ca-space, 0.5rem) * 0.5);
    margin-bottom: var(--ca-space, 0.5rem);
}

/* SEND / REPLY BUTTON SITS BELOW THE TEXT AREA, RIGHT-ALIGNED. */
.ca-comment-compose > .ca-send-btn[b-vhpzb03bo2],
.ca-reply-compose > .ca-send-btn[b-vhpzb03bo2] {
    align-self: flex-end;
}

/* NEW-COMMENT ACTION ROW: EMOJI (LEFT) + SEND (RIGHT), RIGHT-ALIGNED BELOW THE TEXT AREA. */
.ca-compose-actions[b-vhpzb03bo2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4em;
}

/* GREEN PLUS-IN-CIRCLE EMOJI BUTTON — MATCHES THE SEND BUTTON'S SIZE. */
.ca-emoji-btn[b-vhpzb03bo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75em;
    height: 1.75em;
    border: none;
    border-radius: 50%;
    background: #2e9e5b;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.ca-emoji-btn:hover[b-vhpzb03bo2] {
    background: #278a4f;
}

/* EMOJI GRID (INSERTS INTO THE COMMENT AS PLAIN TEXT). */
/* PICKER PANEL — a filter bar on top, then a scrollable grid of Twemoji images. */
.ca-emoji-panel[b-vhpzb03bo2] {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 0.5em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: #fff;
}

/* FILTER BAR — mirrors the multi-select filter (magnifier + input). */
.ca-emoji-search[b-vhpzb03bo2] {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 0.6em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    color: #888;
}

.ca-emoji-filter[b-vhpzb03bo2] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    color: #222;
    min-width: 0;
}

.ca-emoji-grid[b-vhpzb03bo2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.1em, 1fr));
    gap: 0.1em;
    max-height: 11em;
    overflow-y: auto;
}

.ca-emoji[b-vhpzb03bo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.25em;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s ease, transform 0.1s ease;
}

.ca-emoji:hover[b-vhpzb03bo2] {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.15);
}

.ca-emoji-empty[b-vhpzb03bo2] {
    grid-column: 1 / -1;
    padding: 0.8em;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

/* TWEMOJI IMAGE — sized to sit inline with text; 1.4em in the picker buttons. */
.ca-tw[b-vhpzb03bo2] {
    width: 1.4em;
    height: 1.4em;
    vertical-align: -0.2em;
    display: inline-block;
}

/* IN A POSTED COMMENT the emoji <img> is injected via MarkupString, so it has NO scoped-CSS
   attribute — ::deep is required to size it (otherwise the SVG renders at its natural, huge size). */
.ca-comment-body[b-vhpzb03bo2]  .ca-tw {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.2em;
    display: inline-block;
    margin: 0 0.02em;
}

/* ---- MODERATION (EDIT / DELETE) ---------------------------------------- */

/* EDIT / DELETE ICON BUTTONS IN THE ACTIONS ROW. */
.ca-mod-btn[b-vhpzb03bo2] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: #999;
    font-size: 0.9rem;
}

.ca-mod-btn:hover[b-vhpzb03bo2] {
    color: #555;
}

.ca-mod-danger:hover[b-vhpzb03bo2] {
    color: #b3261e;
}

/* INLINE EDIT BOX. */
.ca-edit[b-vhpzb03bo2] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ca-space, 0.5rem) * 0.4);
    margin: calc(var(--ca-space, 0.5rem) * 0.25) 0;
}

.ca-edit-actions[b-vhpzb03bo2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.4em;
}

/* DELETE CONFIRMATION ROW. */
.ca-delete-confirm[b-vhpzb03bo2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: calc(var(--ca-space, 0.5rem) * 0.3) 0;
    font-size: 0.85rem;
    color: #444;
}

/* SMALL TEXT BUTTONS (SAVE / CANCEL / DELETE). */
.ca-mini-btn[b-vhpzb03bo2] {
    padding: 0.25em 0.7em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 0.8rem;
    cursor: pointer;
}

.ca-mini-btn:hover[b-vhpzb03bo2] {
    background: #f0f0f0;
}

.ca-mini-green[b-vhpzb03bo2] {
    background: #2e9e5b;
    border-color: #2e9e5b;
    color: #fff;
}

.ca-mini-green:hover[b-vhpzb03bo2] {
    background: #278a4f;
}

.ca-mini-danger[b-vhpzb03bo2] {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

.ca-mini-danger:hover[b-vhpzb03bo2] {
    background: #9a201a;
}

/* ---- COMMENT "WHO REACTED" POPUP --------------------------------------- */

/* REACTION COUNT AS A BUTTON. */
.ca-react-count-btn[b-vhpzb03bo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.4em;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.ca-react-count-btn:hover[b-vhpzb03bo2] {
    background: rgba(0, 0, 0, 0.16);
}

.ca-reactors-overlay[b-vhpzb03bo2] {
    position: fixed;
    inset: 0;
    z-index: 20010; /* ABOVE THE LIGHTBOX */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.ca-reactors[b-vhpzb03bo2] {
    width: min(420px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.ca-reactors-head[b-vhpzb03bo2] {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.75em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ca-reactors-title[b-vhpzb03bo2] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1rem;
    color: #222;
}

.ca-reactors-close[b-vhpzb03bo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    cursor: pointer;
    font-size: 0.85rem;
}

.ca-reactors-close:hover[b-vhpzb03bo2] {
    background: rgba(0, 0, 0, 0.12);
}

.ca-reactors-filters[b-vhpzb03bo2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.6em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ca-rfilter[b-vhpzb03bo2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.7em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    background: #f5f5f5;
    color: #444;
    font-size: 0.8rem;
    cursor: pointer;
}

.ca-rfilter:hover[b-vhpzb03bo2] {
    background: #ececec;
}

.ca-rfilter-on[b-vhpzb03bo2] {
    background: #e8f3ff;
    border-color: #4a76c4;
    color: #1a4b8f;
}

.ca-reactors-list[b-vhpzb03bo2] {
    overflow-y: auto;
    padding: 0.4em 0.5em 0.8em;
}

.ca-reactor[b-vhpzb03bo2] {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.4em 0.6em;
}

.ca-reactor-icon[b-vhpzb03bo2] {
    font-size: 1.1rem;
    display: inline-flex;
}

.ca-reactor-name[b-vhpzb03bo2] {
    font-size: 0.9rem;
    color: #333;
}

.ca-reactors-empty[b-vhpzb03bo2] {
    padding: 1em;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

.ca-no-comments[b-vhpzb03bo2] {
    color: #999;
    font-size: 0.85rem;
    margin: 0;
}

.ca-comment[b-vhpzb03bo2] {
    display: flex;
    gap: var(--ca-space, 0.5rem);
    padding: calc(var(--ca-space, 0.5rem) * 0.6) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* VOTE COLUMN */
.ca-vote[b-vhpzb03bo2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2em;
    color: #888;
    font-size: 1.05rem;
}

.ca-vote-sum[b-vhpzb03bo2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    padding: 0.1em 0;
}

/* THE HIGHLIGHT CLASS IS ON OUR OWN <span> WRAPPER (always re-renders); THE ZtIcon inherits the color. */
.ca-vote-btn[b-vhpzb03bo2],
.ca-react-btn[b-vhpzb03bo2] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.ca-voted[b-vhpzb03bo2] {
    color: #2e9e5b; /* GREEN — SELECTED VOTE */
}

.ca-comment-main[b-vhpzb03bo2] {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-comment-head[b-vhpzb03bo2] {
    font-size: 0.9rem;
}

.ca-time[b-vhpzb03bo2] {
    color: #999;
    font-size: 0.75rem;
    margin-left: 0.4em;
}

.ca-comment-body[b-vhpzb03bo2] {
    font-size: 0.95rem;
    line-height: 1.35;
    margin: calc(var(--ca-space, 0.5rem) * 0.25) 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.ca-comment-actions[b-vhpzb03bo2] {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.95rem;
    color: #999;
}

.ca-reacted[b-vhpzb03bo2] {
    color: #2e9e5b; /* FALLBACK — OVERRIDDEN BY THE PER-REACTION COLORS BELOW */
}

/* PER-REACTION HIGHLIGHT COLORS (IDs: 1 Like, 2 Love, 3 Laugh, 4 Wow, 5 Sad, 6 Strong). */
.ca-reacted.ca-react-1[b-vhpzb03bo2] { color: #1877f2; } /* LIKE  — BLUE */
.ca-reacted.ca-react-2[b-vhpzb03bo2] { color: #e0245e; } /* LOVE  — RED */
.ca-reacted.ca-react-3[b-vhpzb03bo2] { color: #d4a017; } /* LAUGH — GOLD */
.ca-reacted.ca-react-4[b-vhpzb03bo2] { color: #f5a623; } /* WOW   — AMBER (not specified) */
.ca-reacted.ca-react-5[b-vhpzb03bo2] { color: #08bab5; } /* SAD   — ZEAL TIFFANY */
.ca-reacted.ca-react-6[b-vhpzb03bo2] { color: #555555; } /* STRONG— DARK GRAY */

.ca-react-count[b-vhpzb03bo2] {
    font-size: 0.8rem;
    color: #666;
}

.ca-reply-link[b-vhpzb03bo2] {
    font-size: 0.8rem;
    color: #4a76c4;
}

/* REPLIES — INDENTED UNDER THEIR PARENT */
.ca-reply[b-vhpzb03bo2] {
    margin: calc(var(--ca-space, 0.5rem) * 0.6) 0 0 var(--ca-space, 0.5rem);
    padding: calc(var(--ca-space, 0.5rem) * 0.4) 0 calc(var(--ca-space, 0.5rem) * 0.4) var(--ca-space, 0.5rem);
    border-left: 2px solid rgba(0, 0, 0, 0.08);
}

.ca-input[b-vhpzb03bo2] {
    width: 100%;
    padding: 0.5em 0.65em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.ca-input:focus[b-vhpzb03bo2] {
    outline: none;
    border-color: #4a76c4;
}

.ca-textarea[b-vhpzb03bo2] {
    resize: vertical;
    min-height: 2.4em;
}

/* CIRCULAR SEND / REPLY BUTTON — MATCHES THE CAPTION-BAR ICON BUTTONS. */
.ca-send-btn[b-vhpzb03bo2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75em;   /* ~20% SMALLER THAN BEFORE (was 2.2em) */
    height: 1.75em;
    border: none;
    border-radius: 50%;
    background: #2e9e5b;
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.ca-send-btn:hover[b-vhpzb03bo2] {
    background: #278a4f;
}

/* CENTER THE ICON IN XS ICON-ONLY BUTTONS (the base .ztbtn is inline-block + an empty text div). */
[b-vhpzb03bo2] .ztbtn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Shared/ConnectedSites/ConnectedAlbumLightbox.razor.rz.scp.css */
/* FULL-SCREEN MEDIA VIEWER — orientation-responsive (rotates with the device via CSS media queries). */

.ztlb-overlay[b-h9163wvcyd] {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.93);
    display: flex;
}

/* MEDIA AREA — flex-basis 0 so the pane is sized by FREE SPACE ONLY (never by the photo).  It is
   just a positioning context: the STAGE fills it absolutely, so there is no flex/padding math that
   could push the photo off-center.  NO internal flex, NO padding. */
.ztlb-media[b-h9163wvcyd] {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.ztlb-img[b-h9163wvcyd] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* SLIDE STAGE — ABSOLUTELY FILLS THE MEDIA BOX (inset 0), then a single-cell grid with
   place-items:center centers whatever photo lands in it.  Because the stage is EXACTLY the media
   box, "centered in the stage" == "centered in the media" — perfectly, at every screen size and
   orientation, for any photo dimensions.  No measurement, no JS, no drift.  Ever. */
.ztlb-stage[b-h9163wvcyd] {
    position: absolute;
    inset: 0;
    display: grid;
    /* ONE full-size cell (1fr x 1fr).  Without an explicit template the implicit track would be
       auto-sized to the photo and placed at the start — that was the horizontal-off-center bug.
       minmax(0,1fr) fills the box AND lets a large photo shrink to fit instead of overflowing. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    padding: 0.75em;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    box-sizing: border-box;
}

/* BOTH FRAMES SHARE THE ONE GRID CELL — each is centered by the grid, and they naturally stack
   during the slide.  No absolute positioning, no translate(-50%) hacks, nothing to mis-measure. */
.ztlb-frame[b-h9163wvcyd] {
    grid-area: 1 / 1;
    display: block;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    will-change: transform;
}

/* OUT-FRAMES ARE INVISIBLE BY DEFAULT — ONLY THE SLIDE ANIMATION EVER SHOWS ONE. */
.ztlb-frame-out[b-h9163wvcyd] {
    opacity: 0;
    pointer-events: none;
}

/* SLIDE DIRECTIONS — the stage carries .ztlb-slide-next / .ztlb-slide-prev while paging.  (These are
   deliberately NOT named ztlb-next/ztlb-prev — those belong to the nav arrows and would collide,
   applying the arrow's `right:12px` to the stage and pushing the photo off-center.)
   NEXT: new enters from the right, old exits left.  PREV: mirrored. */
.ztlb-stage.ztlb-slide-next .ztlb-frame-in[b-h9163wvcyd] {
    animation: ztlbInFromRight-b-h9163wvcyd 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ztlb-stage.ztlb-slide-next .ztlb-frame-out[b-h9163wvcyd] {
    animation: ztlbOutToLeft-b-h9163wvcyd 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.ztlb-stage.ztlb-slide-prev .ztlb-frame-in[b-h9163wvcyd] {
    animation: ztlbInFromLeft-b-h9163wvcyd 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ztlb-stage.ztlb-slide-prev .ztlb-frame-out[b-h9163wvcyd] {
    animation: ztlbOutToRight-b-h9163wvcyd 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes ztlbInFromRight-b-h9163wvcyd {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
}

/* OUT-FRAMES SLIDE ASIDE AND FADE TO NOTHING — `forwards` PARKS THEM INVISIBLE, so a wide outgoing
   photo can never linger around a narrower incoming one. */
@keyframes ztlbOutToLeft-b-h9163wvcyd {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-110%); opacity: 0; }
}

@keyframes ztlbInFromLeft-b-h9163wvcyd {
    from { transform: translateX(-110%); }
    to   { transform: translateX(0); }
}

@keyframes ztlbOutToRight-b-h9163wvcyd {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(110%); opacity: 0; }
}

/* RESPECT REDUCED-MOTION — SHOW THE NEW PHOTO WITHOUT THE SLIDE (AND NO STACKED OUT-FRAME). */
@media (prefers-reduced-motion: reduce) {
    .ztlb-frame[b-h9163wvcyd] {
        animation: none !important;
    }

    .ztlb-frame-out[b-h9163wvcyd] {
        display: none;
    }
}

/* HIDDEN NEIGHBOR PRELOADER — KEEPS NEXT / PREV IN CACHE SO PAGING IS INSTANT. */
.ztlb-preload[b-h9163wvcyd] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* CLOSE (RIGHT) + LAYOUT TOGGLE (LEFT) + DOWNLOAD + COPY-LINK (LEFT, BESIDE THE TOGGLE). */
.ztlb-close[b-h9163wvcyd],
.ztlb-toggle[b-h9163wvcyd],
.ztlb-download[b-h9163wvcyd],
.ztlb-share[b-h9163wvcyd] {
    position: absolute;
    top: 0.75em;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3em;
    height: 2.3em;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.ztlb-close[b-h9163wvcyd] {
    right: 0.75em;
}

.ztlb-toggle[b-h9163wvcyd] {
    left: 0.75em;
}

/* DOWNLOAD SITS RIGHT OF THE TOGGLE; COPY-LINK SITS RIGHT OF DOWNLOAD (each 2.3em + a whisper of gap). */
.ztlb-download[b-h9163wvcyd] {
    left: calc(0.75em + 2.3em + 0.25em);
}

.ztlb-share[b-h9163wvcyd] {
    left: calc(0.75em + 2 * (2.3em + 0.25em));
}

.ztlb-close:hover[b-h9163wvcyd],
.ztlb-toggle:hover[b-h9163wvcyd],
.ztlb-download:hover[b-h9163wvcyd],
.ztlb-share:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.8);
}

/* PREV / NEXT ARROWS — big but see-through so the photo shows underneath. */
.ztlb-nav[b-h9163wvcyd] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8em;
    height: 2.8em;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ztlb-nav:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.45);
}

/* ARROWS PIN TO THE MEDIA EDGES (FACEBOOK-STYLE) — same inset left and right, vertically centered
   by the container.  Pure CSS: symmetric and centered BY CONSTRUCTION on every screen size. */
.ztlb-prev[b-h9163wvcyd] {
    left: 12px;
}

.ztlb-next[b-h9163wvcyd] {
    right: 12px;
}

.ztlb-processing[b-h9163wvcyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
}

.ztlb-processing span[b-h9163wvcyd] {
    font-size: 1rem;
}

/* DETAILS / COMMENTS PANEL */
.ztlb-panel[b-h9163wvcyd] {
    /* ONE SPACING UNIT (rem = identical at every screen size / orientation).  The nested comments
       component inherits it, so the whole panel shares a single, consistent vertical rhythm. */
    --ca-space: 0.5rem;

    background: #fff;
    overflow-y: auto;
    overflow-x: hidden; /* NOTHING IN THE PANEL MAY FORCE A SIDEWAYS SCROLLBAR */
    padding: var(--ca-space);
    display: flex;
    flex-direction: column;
    gap: var(--ca-space);
    box-sizing: border-box;
}

/* ---- LAYOUT MODES (toggle cycles combo -> photo -> controls) ---------- */
/* PHOTO-ONLY: hide the panel, media fills the screen. */
.ztlb-overlay.ztlb-mode-photo .ztlb-panel[b-h9163wvcyd] {
    display: none;
}

/* CONTROLS-ONLY: hide the photo, the panel fills the screen. */
.ztlb-overlay.ztlb-mode-controls .ztlb-media[b-h9163wvcyd] {
    display: none;
}

.ztlb-overlay.ztlb-mode-controls .ztlb-panel[b-h9163wvcyd] {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: none;
    /* PUSH CONTENT BELOW THE OVERLAY-LEVEL TOGGLE BUTTON (top ~0.75em + 2.3em tall) + a 5px whisper. */
    padding-top: calc(3.5em + 5px);
}

/* CAPTION-AS-TITLE BANNER */
.ztlb-title[b-h9163wvcyd] {
    display: flex;
    align-items: center;
    gap: var(--ca-space);
    padding: calc(var(--ca-space) * 0.75) var(--ca-space);
    border-radius: 8px;
    background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ztlb-title-text[b-h9163wvcyd] {
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ztlb-title-actions[b-h9163wvcyd] {
    display: flex;
    gap: 0.3em;
    flex: 0 0 auto;
}

.ztlb-title-edit .ztlb-input[b-h9163wvcyd] {
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.95);
}

.ztlb-icon-btn[b-h9163wvcyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.ztlb-icon-btn:hover[b-h9163wvcyd] {
    background: rgba(255, 255, 255, 0.35);
}

.ztlb-icon-danger:hover[b-h9163wvcyd] {
    background: rgba(220, 53, 69, 0.85);
}

/* SAVE-CAPTION ICON BUTTON — GREEN, CONSISTENT WITH THE OTHER CAPTION ICON BUTTONS. */
.ztlb-icon-save[b-h9163wvcyd] {
    background: #2e9e5b;
}

.ztlb-icon-save:hover[b-h9163wvcyd] {
    background: #278a4f;
}

.ztlb-input[b-h9163wvcyd] {
    width: 100%;
    padding: 0.5em 0.65em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.ztlb-input:focus[b-h9163wvcyd] {
    outline: none;
    border-color: #4a76c4;
}

.ztlb-manage-actions[b-h9163wvcyd] {
    display: flex;
    gap: var(--ca-space);
    margin-top: calc(var(--ca-space) * 0.75);
}

/* PHOTO REACTION ROW — REACT TO THE ITEM ITSELF.  Sits between the caption and the comments; the
   panel's own gap (var(--ca-space)) spaces it, so the rhythm matches everything else in the panel. */
.ztlb-reactions[b-h9163wvcyd] {
    display: flex;
    flex-wrap: wrap; /* NARROW PANELS WRAP TO A SECOND LINE INSTEAD OF OVERFLOWING SIDEWAYS */
    align-items: center;
    gap: var(--ca-space);
    padding-left: 4px; /* WHISPER OF LEFT PADDING SO THE ICONS DON'T HUG THE EDGE */
    color: #888;
    font-size: 1.2rem;
}

/* THE HIGHLIGHT CLASS IS ON OUR OWN <span> WRAPPER (always re-renders); THE ZtIcon inherits the color. */
.ztlb-react-btn[b-h9163wvcyd] {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform 0.1s ease;
}

.ztlb-react-btn:hover[b-h9163wvcyd] {
    transform: scale(1.15);
}

/* PER-REACTION HIGHLIGHT COLORS (IDs: 1 Like, 2 Love, 3 Laugh, 4 Wow, 5 Sad, 6 Strong). */
.ztlb-reacted.ztlb-react-1[b-h9163wvcyd] { color: #1877f2; } /* LIKE  — BLUE */
.ztlb-reacted.ztlb-react-2[b-h9163wvcyd] { color: #e0245e; } /* LOVE  — RED */
.ztlb-reacted.ztlb-react-3[b-h9163wvcyd] { color: #d4a017; } /* LAUGH — GOLD */
.ztlb-reacted.ztlb-react-4[b-h9163wvcyd] { color: #f5a623; } /* WOW   — AMBER */
.ztlb-reacted.ztlb-react-5[b-h9163wvcyd] { color: #08bab5; } /* SAD   — ZEAL TIFFANY */
.ztlb-reacted.ztlb-react-6[b-h9163wvcyd] { color: #555555; } /* STRONG— DARK GRAY */

.ztlb-react-count[b-h9163wvcyd] {
    font-size: 0.85rem;
    color: #666;
    margin-left: calc(var(--ca-space) * 0.4);
}

/* REACTION COUNT AS A CIRCLE BUTTON — OPENS THE "WHO REACTED" POPUP. */
.ztlb-react-count-btn[b-h9163wvcyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    height: 1.7em;
    padding: 0 0.45em;
    margin-left: calc(var(--ca-space) * 0.4);
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    color: #444;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ztlb-react-count-btn:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.16);
}

/* ---- "WHO REACTED" POPUP ------------------------------------------------ */
.ztlb-reactors-overlay[b-h9163wvcyd] {
    position: fixed;
    inset: 0;
    z-index: 20010; /* ABOVE THE LIGHTBOX (20000) */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.ztlb-reactors[b-h9163wvcyd] {
    width: min(420px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.ztlb-reactors-head[b-h9163wvcyd] {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.75em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ztlb-reactors-title[b-h9163wvcyd] {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1rem;
    color: #222;
}

/* "N VIEWS" IS A BUTTON — CLICK TO FILTER THE LIST TO WHO VIEWED; LIGHTS UP WHEN ACTIVE. */
.ztlb-views-btn[b-h9163wvcyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0.6em;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #666;
    font-size: 0.85rem;
    cursor: pointer;
}

.ztlb-views-btn:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.05);
}

.ztlb-views-on[b-h9163wvcyd] {
    background: #e8f3ff;
    border-color: #4a76c4;
    color: #1a4b8f;
}

.ztlb-viewer-icon[b-h9163wvcyd] {
    color: #4a76c4;
}

/* ---- PHOTO DETAILS (info button + popup rows) -------------------------- */
.ztlb-info-btn[b-h9163wvcyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    cursor: pointer;
    font-size: 0.8rem;
}

.ztlb-info-btn:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.12);
    color: #222;
}

.ztlb-info-list[b-h9163wvcyd] {
    padding: 0.6em 1em 1em;
    overflow-y: auto;
}

.ztlb-info-row[b-h9163wvcyd] {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 0.45em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.9rem;
}

.ztlb-info-key[b-h9163wvcyd] {
    color: #777;
    flex: 0 0 auto;
}

.ztlb-info-val[b-h9163wvcyd] {
    color: #222;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.ztlb-info-link[b-h9163wvcyd] {
    color: #1a4b8f;
    text-decoration: underline;
}

.ztlb-info-note[b-h9163wvcyd] {
    padding: 0.8em 0;
    color: #999;
    font-size: 0.85rem;
    text-align: center;
}

.ztlb-reactors-close[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}

.ztlb-reactors-close:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.12);
}

.ztlb-reactors-filters[b-h9163wvcyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0.6em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ztlb-filter[b-h9163wvcyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25em 0.7em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    background: #f5f5f5;
    color: #444;
    font-size: 0.8rem;
    cursor: pointer;
}

.ztlb-filter:hover[b-h9163wvcyd] {
    background: #ececec;
}

.ztlb-filter-on[b-h9163wvcyd] {
    background: #e8f3ff;
    border-color: #4a76c4;
    color: #1a4b8f;
}

.ztlb-reactors-list[b-h9163wvcyd] {
    overflow-y: auto;
    padding: 0.4em 0.5em 0.8em;
}

.ztlb-reactor[b-h9163wvcyd] {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.4em 0.6em;
}

.ztlb-reactor-icon[b-h9163wvcyd] {
    font-size: 1.1rem;
    display: inline-flex;
}

.ztlb-reactor-name[b-h9163wvcyd] {
    font-size: 0.9rem;
    color: #333;
}

.ztlb-reactors-empty[b-h9163wvcyd] {
    padding: 1em;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

/* ---- PHOTO EDITOR ------------------------------------------------------- */

/* EDIT-PHOTO PENCIL — PUSHED TO THE FAR RIGHT OF THE REACTION ROW. */
.ztlb-edit-photo[b-h9163wvcyd] {
    margin-left: auto;
    /* ALIGN THE PENCIL'S RIGHT EDGE WITH THE CAPTION BANNER'S DELETE BUTTON (WHICH IS INSET BY THE
       BANNER'S OWN RIGHT PADDING = var(--ca-space)). */
    margin-right: var(--ca-space);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9em;
    height: 1.9em;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    cursor: pointer;
    font-size: 0.8rem;
}

.ztlb-edit-photo:hover[b-h9163wvcyd] {
    background: rgba(0, 0, 0, 0.12);
    color: #222;
}

/* EDITOR PANEL — REPLACES THE REACTIONS + COMMENTS WHILE EDITING. */
.ztlb-editor[b-h9163wvcyd] {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space);
}

.ztlb-editor-head[b-h9163wvcyd] {
    display: flex;
    align-items: center;
    gap: var(--ca-space);
}

.ztlb-editor-title[b-h9163wvcyd] {
    flex: 1 1 auto;
    padding-left: 0.4em; /* A LITTLE BREATHING ROOM SO "Edit Photo" DOESN'T HUG THE LEFT EDGE */
    font-weight: 600;
    font-size: 1rem;
    color: #333;
}

.ztlb-editor-hint[b-h9163wvcyd] {
    margin: 0;
    font-size: 0.8rem;
    color: #777;
    text-align: center;
}

/* TOOL MENU — LABELLED BUTTON GRID.  The button font-size drives the (inherited) icon size. */
.ztlb-tools[b-h9163wvcyd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ca-space);
}

.ztlb-tool[b-h9163wvcyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: calc(var(--ca-space) * 1.1) var(--ca-space);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #f7f7f7;
    color: #333;
    cursor: pointer;
    font-size: 1.3rem; /* ICON SIZE (INHERITED BY THE ZtIcon <i>) */
}

.ztlb-tool span[b-h9163wvcyd] {
    font-size: 0.8rem; /* LABEL — SMALLER THAN THE ICON */
}

.ztlb-tool:hover[b-h9163wvcyd] {
    background: #ededed;
}

/* THE TOOL THAT'S CURRENTLY "ON" (e.g. THIS PHOTO IS ALREADY THE ALBUM COVER). */
.ztlb-tool-on[b-h9163wvcyd] {
    background: #e8f8ee;
    border-color: #2e9e5b;
    color: #1d7a44;
}

.ztlb-tool-danger[b-h9163wvcyd] {
    color: #b3261e;
    border-color: rgba(179, 38, 30, 0.35);
}

.ztlb-tool-danger:hover[b-h9163wvcyd] {
    background: #fbe9e7;
}

/* DELETE CONFIRMATION */
.ztlb-confirm[b-h9163wvcyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ca-space);
    color: #b3261e;
    font-size: 1.6rem; /* WARNING ICON SIZE */
}

.ztlb-confirm-text[b-h9163wvcyd] {
    margin: 0;
    font-size: 0.9rem;
    color: #444;
}

/* ACTION ROW (SAVE / CANCEL / CONFIRM) */
.ztlb-editor-actions[b-h9163wvcyd] {
    display: flex;
    justify-content: flex-end;
    gap: var(--ca-space);
}

.ztlb-btn[b-h9163wvcyd] {
    padding: 0.4em 0.9em;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 0.85rem;
}

.ztlb-btn:hover[b-h9163wvcyd] {
    background: #f0f0f0;
}

/* CLEAR, LABELLED "DONE" — THE OBVIOUS WAY OUT OF THE EDITOR. */
.ztlb-btn-done[b-h9163wvcyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
}

.ztlb-btn-green[b-h9163wvcyd] {
    background: #2e9e5b;
    border-color: #2e9e5b;
    color: #fff;
}

.ztlb-btn-green:hover[b-h9163wvcyd] {
    background: #278a4f;
}

.ztlb-btn-danger[b-h9163wvcyd] {
    background: #b3261e;
    border-color: #b3261e;
    color: #fff;
}

.ztlb-btn-danger:hover[b-h9163wvcyd] {
    background: #9a201a;
}

/* THUMBNAIL FOCAL EDITOR — PAN THE PHOTO INSIDE A SQUARE FRAME (WYSIWYG WITH THE GALLERY THUMB). */
.ztlb-thumb-editor[b-h9163wvcyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ca-space);
}

.ztlb-thumb-frame[b-h9163wvcyd] {
    width: min(72%, 240px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    touch-action: none;
    cursor: grab;
}

.ztlb-thumb-frame:active[b-h9163wvcyd] {
    cursor: grabbing;
}

.ztlb-thumb-frame img[b-h9163wvcyd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    pointer-events: none; /* THE FRAME OWNS THE POINTER, NOT THE IMG */
    -webkit-user-drag: none;
}

/* CROP EDITOR — DRAG THE BOX TO MOVE, DRAG THE CORNER TO RESIZE. */
.ztlb-crop-editor[b-h9163wvcyd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ca-space);
}

.ztlb-crop-wrap[b-h9163wvcyd] {
    position: relative;
    display: inline-block;
    overflow: hidden; /* CLIP THE DIMMING MASK TO THE IMAGE */
    line-height: 0;
    touch-action: none;
    max-width: 100%;
}

.ztlb-crop-wrap img[b-h9163wvcyd] {
    display: block;
    max-width: 100%;
    max-height: 45vh;
    user-select: none;
    -webkit-user-drag: none;
}

.ztlb-crop-box[b-h9163wvcyd] {
    position: absolute;
    border: 2px solid #fff;
    /* THE HUGE SPREAD DIMS EVERYTHING OUTSIDE THE BOX (CLIPPED BY THE WRAP). */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.45);
    cursor: move;
    box-sizing: border-box;
    touch-action: none;
}

.ztlb-crop-handle[b-h9163wvcyd] {
    position: absolute;
    right: -9px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #2e9e5b;
    cursor: nwse-resize;
    touch-action: none;
}

/* CENTER THE ICON IN XS ICON-ONLY BUTTONS. */
[b-h9163wvcyd] .ztbtn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* LANDSCAPE — MEDIA LEFT, PANEL RIGHT.  flex 0 0 auto LOCKS the panel width — it can never be
   squeezed or stretched by whatever photo happens to be showing. */
@media (orientation: landscape) {
    .ztlb-overlay[b-h9163wvcyd] {
        flex-direction: row;
    }

    .ztlb-panel[b-h9163wvcyd] {
        flex: 0 0 auto;
        width: 380px;
        max-width: 42vw;
        height: 100%;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* PORTRAIT — MEDIA TOP, PANEL BOTTOM.  flex 0 0 auto LOCKS the panel height the same way. */
@media (orientation: portrait) {
    .ztlb-overlay[b-h9163wvcyd] {
        flex-direction: column;
    }

    .ztlb-panel[b-h9163wvcyd] {
        flex: 0 0 auto;
        width: 100%;
        height: 45vh;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* SMALL SCREENS (PHONES) — TIGHTER CHROME SO THE PHOTO GETS THE SPACE. */
@media (max-width: 640px), (max-height: 480px) {
    .ztlb-media[b-h9163wvcyd] {
        padding: 0.4em;
    }

    .ztlb-close[b-h9163wvcyd],
    .ztlb-toggle[b-h9163wvcyd],
    .ztlb-download[b-h9163wvcyd],
    .ztlb-share[b-h9163wvcyd] {
        width: 2em;
        height: 2em;
        font-size: 0.95rem;
        top: 0.5em;
    }

    .ztlb-close[b-h9163wvcyd] {
        right: 0.5em;
    }

    .ztlb-toggle[b-h9163wvcyd] {
        left: 0.5em;
    }

    .ztlb-download[b-h9163wvcyd] {
        left: calc(0.5em + 2em + 0.25em);
    }

    .ztlb-share[b-h9163wvcyd] {
        left: calc(0.5em + 2 * (2em + 0.25em));
    }

    .ztlb-nav[b-h9163wvcyd] {
        width: 2.3em;
        height: 2.3em;
        font-size: 1.05rem;
    }

    .ztlb-panel[b-h9163wvcyd] {
        --ca-space: 0.4rem;
    }

    .ztlb-reactions[b-h9163wvcyd] {
        font-size: 1.05rem;
    }

    /* THE CONTROLS-ONLY PADDING TRACKS THE SMALLER TOGGLE BUTTON. */
    .ztlb-overlay.ztlb-mode-controls .ztlb-panel[b-h9163wvcyd] {
        padding-top: calc(3em + 5px);
    }
}

/* SHORT LANDSCAPE PHONES — SLIM THE PANEL SO THE PHOTO KEEPS A USABLE WIDTH. */
@media (orientation: landscape) and (max-height: 480px) {
    .ztlb-panel[b-h9163wvcyd] {
        width: 300px;
        max-width: 48vw;
    }
}
/* /Components/Shared/ConnectedSites/ConnectedAlbumView.razor.rz.scp.css */
/* PHOTO & VIDEO ALBUM — SCOPED STYLES.  Responsive from the smallest phone to the largest desktop. */

.ca-album[b-02fvy6wgzr] {
    width: 100%;
    min-height: 80vh;
}

/* ALBUM HEADER — ICON + TITLE (LEFT) + UPLOAD (RIGHT), ABOVE THE THUMBNAILS. */
.ca-header[b-02fvy6wgzr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.1em 0.25em 0.6em;
    margin-bottom: 0.25em;
}

.ca-album-title[b-02fvy6wgzr] {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.9rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}

/* HEADER ACTIONS — EDIT + UPLOAD, GROUPED TO THE RIGHT AND VERTICALLY CENTERED WITH THE TITLE. */
.ca-header-actions[b-02fvy6wgzr] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

.ca-header-upload[b-02fvy6wgzr] {
    display: inline-flex;
    align-items: center;
}

/* SHRINK THE COMPACT UPLOAD FAB TO SIT INLINE WITH THE TITLE (VERTICALLY COMPACT). */
.ca-header-upload[b-02fvy6wgzr]  .ztmu-fab {
    width: 2.5em;
    height: 2.5em;
    min-width: 0;
    min-height: 0;
    font-size: 1.15rem;
}

/* EDIT-ALBUM BUTTON — SAME FOOTPRINT AS THE UPLOAD FAB, SUBTLE (SECONDARY) STYLING. */
.ca-header-edit[b-02fvy6wgzr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.ca-header-edit:hover[b-02fvy6wgzr] {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* REORDER TOGGLE — LIT (GREEN) WHILE REORDER MODE IS ACTIVE. */
.ca-header-edit.ca-reorder-on[b-02fvy6wgzr] {
    background: #2e9e5b;
    box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.35);
}

.ca-header-edit.ca-reorder-on:hover[b-02fvy6wgzr] {
    background: #278a4f;
}

/* REORDER MODE HINT BAR — SHOWN ABOVE THE GALLERY WHILE THE MODE IS ON. */
.ca-reorder-hint[b-02fvy6wgzr] {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 0.75em;
    padding: 0.5em 0.8em;
    border-radius: 8px;
    background: rgba(46, 158, 91, 0.18);
    border: 1px solid rgba(46, 158, 91, 0.45);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
}

/* REORDER MODE — TILES ADVERTISE THEY'RE MOVABLE: dashed outline, gentle sway.  touch-action stays
   AUTO so a press-drag on a NON-selected tile SCROLLS the page (critical on mobile — otherwise there
   is nowhere to touch to scroll).  Only the SELECTED tile is drag-locked (below). */
.ca-gallery.ca-reordering .ca-tile[b-02fvy6wgzr] {
    cursor: pointer;
    touch-action: auto;
    outline: 2px dashed rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
    animation: caReorderPulse-b-02fvy6wgzr 1.8s ease-in-out infinite;
}

/* THE SELECTED TILE IS THE ONE YOU CAN DRAG — lock its touch gestures so the drag isn't hijacked
   by native scrolling, and show the grab cursor. */
.ca-gallery.ca-reordering .ca-tile.ca-selected[b-02fvy6wgzr] {
    cursor: grab;
    touch-action: none;
}

/* STAGGER THE SWAY SO THE GRID SHIMMERS INSTEAD OF MARCHING IN LOCKSTEP. */
.ca-gallery.ca-reordering .ca-tile:nth-child(2n)[b-02fvy6wgzr] {
    animation-delay: 0.2s;
}

.ca-gallery.ca-reordering .ca-tile:nth-child(3n)[b-02fvy6wgzr] {
    animation-delay: 0.4s;
}

/* PULSE THE OUTLINE COLOR — NOT a transform, so it never fights the inline preview transforms
   (a transform-based animation overrides them, which was making the drop replay). */
@keyframes caReorderPulse-b-02fvy6wgzr {
    0%, 100% { outline-color: rgba(255, 255, 255, 0.5); }
    50% { outline-color: rgba(46, 158, 91, 0.85); }
}

/* ACTIVE DRAG — freeze the pulse and glide tiles between slots for the live drop preview. */
.ca-gallery.ca-reordering.ca-drag-active .ca-tile[b-02fvy6wgzr] {
    animation: none;
    transition: transform 0.18s ease;
}

/* THE SELECTED PHOTO — BOLD GREEN FRAME + LIFT.  No transform (scale) here on purpose: a transform
   would fight the drag preview and re-animate on drop.  The shadow alone reads as "picked up". */
.ca-gallery.ca-reordering .ca-tile.ca-selected[b-02fvy6wgzr] {
    outline: 3px solid #2e9e5b;
    outline-offset: 2px;
    animation: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

/* AN EXPLICIT SQUARE BOX — THE FA GLYPH'S EM-BOX ISN'T SQUARE, SO WITHOUT FIXED EQUAL DIMENSIONS
   THE WHITE DISC RENDERS AS AN OVAL BEHIND THE CIRCULAR CHECK. */
.ca-selected-badge[b-02fvy6wgzr] {
    position: absolute;
    top: 0.4em;
    right: 0.4em;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: #2e9e5b;
    background: #ffffff;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* RESPECT REDUCED MOTION — NO SWAY, THE OUTLINES ALONE MARK THE MODE. */
@media (prefers-reduced-motion: reduce) {
    .ca-gallery.ca-reordering .ca-tile[b-02fvy6wgzr] {
        animation: none;
    }
}

/* SELECT MODE — TILES READ AS CHECKABLE (POINTER + DASHED OUTLINE, NO SWAY). */
.ca-gallery.ca-selecting .ca-tile[b-02fvy6wgzr] {
    cursor: pointer;
    outline: 2px dashed rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.ca-gallery.ca-selecting .ca-tile.ca-selected[b-02fvy6wgzr] {
    outline: 3px solid #2e9e5b;
    outline-offset: 2px;
    transform: scale(0.97);
    z-index: 2;
}

/* SELECT BAR — COUNT + ALL/NONE + DELETE (SHARES THE HINT-BAR SHELL). */
.ca-select-bar[b-02fvy6wgzr] {
    gap: 0.75em;
}

.ca-select-count[b-02fvy6wgzr] {
    font-weight: 700;
}

.ca-select-spacer[b-02fvy6wgzr] {
    flex: 1 1 auto;
}

.ca-bar-btn[b-02fvy6wgzr] {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.35em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.ca-bar-btn:hover[b-02fvy6wgzr] {
    background: rgba(255, 255, 255, 0.25);
}

.ca-bar-btn:disabled[b-02fvy6wgzr] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ca-bar-danger[b-02fvy6wgzr] {
    background: #b3261e;
    border-color: #b3261e;
}

.ca-bar-danger:hover:enabled[b-02fvy6wgzr] {
    background: #9a201a;
}

/* ALBUM COVER CHIP — MARKS THE OWNER-CHOSEN COVER PHOTO IN THE GRID. */
.ca-cover-chip[b-02fvy6wgzr] {
    position: absolute;
    top: 0.4em;
    left: 0.4em;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffd54a;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* LAZY GRID SENTINEL — A QUIET SPINNER THAT TRIGGERS THE NEXT BATCH WHEN SCROLLED NEAR. */
.ca-more-sentinel[b-02fvy6wgzr] {
    display: flex;
    justify-content: center;
    padding: 1.25em 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.3rem;
}

/* ---- ALBUM SETTINGS MODAL FORM ---------------------------------------- */
.ca-edit-form[b-02fvy6wgzr] {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.ca-edit-label[b-02fvy6wgzr] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
}

.ca-edit-check[b-02fvy6wgzr] {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 0.4em;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    cursor: pointer;
}

.ca-edit-check input[b-02fvy6wgzr] {
    width: 1.1em;
    height: 1.1em;
    cursor: pointer;
}

.ca-edit-hint[b-02fvy6wgzr] {
    margin: 0;
    font-size: 0.8rem;
    color: #777;
    line-height: 1.3;
}

.ca-edit-actions[b-02fvy6wgzr] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5em;
    margin-top: 0.6em;
}

/* RESPONSIVE GALLERY GRID — AUTO-FILLS AS MANY COLUMNS AS FIT, MINIMUM 150px EACH. */
.ca-gallery[b-02fvy6wgzr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75em;
    width: 100%;
}

@media (min-width: 992px) {
    .ca-gallery[b-02fvy6wgzr] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

.ca-tile[b-02fvy6wgzr] {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ca-tile:hover[b-02fvy6wgzr] {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* THE ORIGINAL TILE DIMS IN PLACE WHILE ITS GHOST FOLLOWS THE CURSOR. */
.ca-tile.ca-dragging[b-02fvy6wgzr] {
    opacity: 0.3;
    cursor: grabbing;
}

/* THE FLOATING CLONE THAT TRACKS THE CURSOR DURING A DRAG. */
.ca-ghost[b-02fvy6wgzr] {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* GREEN INSERTION INDICATOR ON THE DROP-TARGET TILE (LEFT = before, RIGHT = after). */
.ca-tile.ca-drop-before[b-02fvy6wgzr] {
    box-shadow: -4px 0 0 0 #2e9e5b;
}

.ca-tile.ca-drop-after[b-02fvy6wgzr] {
    box-shadow: 4px 0 0 0 #2e9e5b;
}

/* SQUARE THUMBNAILS THAT COVER THEIR TILE.  Native image drag + text selection are disabled so the
   pointer-event drag reorder owns the gesture (a native drag fires pointercancel and kills it). */
.ca-thumb[b-02fvy6wgzr] {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.ca-video-thumb[b-02fvy6wgzr] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a;
}

.ca-play[b-02fvy6wgzr] {
    font-size: 2.75rem;
    color: #fff;
    opacity: 0.9;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ca-processing[b-02fvy6wgzr] {
    color: #fff;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.35em 0.6em;
    border-radius: 4px;
}

.ca-caption[b-02fvy6wgzr] {
    padding: 0.4em 0.55em;
    font-size: 0.85rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-empty[b-02fvy6wgzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    padding: 2.5em 1em;
    color: #f2f2f2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.75rem;
}

.ca-empty span[b-02fvy6wgzr] {
    font-size: 1rem;
}

/* LIGHTBOX */
.ca-lightbox-body[b-02fvy6wgzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
}

.ca-full[b-02fvy6wgzr] {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 6px;
}

.ca-lightbox-caption[b-02fvy6wgzr] {
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
    color: #444;
}

.ca-processing-full[b-02fvy6wgzr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
    padding: 2em 1em;
    color: #555;
    text-align: center;
}

.ca-lightbox-actions[b-02fvy6wgzr] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.ca-manage[b-02fvy6wgzr] {
    width: 100%;
    padding: 0.6em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ca-manage-actions[b-02fvy6wgzr] {
    display: flex;
    gap: 0.5em;
    margin-top: 0.4em;
}

.ca-input[b-02fvy6wgzr] {
    width: 100%;
    padding: 0.5em 0.65em;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.ca-input:focus[b-02fvy6wgzr] {
    outline: none;
    border-color: #4a76c4;
}
/* /Components/Shared/ConnectedSites/ConnectedProgramSchedule.razor.rz.scp.css */
/* PAGE HEADER: ACCOUNT LOGO + NAME + "PROGRAM SCHEDULE", LEFT-ALIGNED (MATCHES TRIAL CLASS PAGE). */
.cps-header[b-oufbkifk8t] {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-top: 18px;
}

/* FRIENDLY "HOW TO USE THIS PAGE" BLURB UNDER THE HEADER. */
.cps-intro[b-oufbkifk8t] {
	max-width: 100%;
	margin: 6px 0 0 0;
	color: #555555;
	line-height: 1.5;
}

.cps-header > div:first-of-type[b-oufbkifk8t] {
	flex-shrink: 0;
}

.cps-header > div:first-of-type img[b-oufbkifk8t] {
	display: block;
	max-width: 100%;
	object-fit: contain;
	height: 75px;
}

.cps-header > div:last-of-type[b-oufbkifk8t] {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.1;
	gap: 2px;
	font-size: 24px;
	font-weight: 600;
	color: #666666;
}

@media only screen and (max-width: 480px) {
	.cps-header > div:first-of-type img[b-oufbkifk8t] {
		height: 60px;
	}

	.cps-header > div:last-of-type[b-oufbkifk8t] {
		line-height: 1.0;
		font-size: 14px;
	}
}

/* LEFT-ALIGN THE PROGRAM (SECTION) TITLE TO LINE UP WITH THE FULL-WIDTH SCHEDULE ROWS. */
/* THE CONNECTED-SITE DEFAULT CENTERS .zt-page-section-title IN A 640px COLUMN, WHICH LEAVES */
/* THE TITLE OFFSET FROM THE ROWS ON THIS DATA-STYLE PAGE. */
.cps[b-oufbkifk8t]  .zt-page-section-title {
	justify-content: flex-start;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* PROGRAM DESCRIPTION, SHOWN DIRECTLY UNDER THE PROGRAM NAME. */
.cps-description[b-oufbkifk8t] {
	margin: 2px 0 6px 0;
	color: #666666;
	white-space: pre-wrap;
}

/* DAY HEADER: ICON + DAY NAME ON ONE LEFT-ALIGNED LINE. */
/* GENEROUS TOP MARGIN SEPARATES EACH DAY GROUP FROM THE ROW ABOVE IT. */
.cps-day[b-oufbkifk8t] {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 26px 0 6px 0;
}

.cps-day-name[b-oufbkifk8t] {
	font-size: 1.1rem;
	font-weight: 600;
	color: #555555;
	line-height: 1;
}

/* "SCHEDULE A TRIAL CLASS" CALL TO ACTION (USED IN THE PROGRAM HEADER AND THE INFO MODAL). */
.cps-trial-link[b-oufbkifk8t] {
	color: #2e7d32;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

.cps-trial-link:hover[b-oufbkifk8t] {
	text-decoration: none;
}

/* PROGRAM-LEVEL VARIANT: SLIGHTLY LARGER, SITS UNDER THE DESCRIPTION. */
.cps-trial-link-program[b-oufbkifk8t] {
	display: inline-block;
	margin: 2px 0 4px 0;
	font-size: 1.05rem;
}
/* /Components/Shared/ConnectedSites/EmojiPicker.razor.rz.scp.css */
/* FULL-CATALOG EMOJI PICKER — category tabs + search + a lazy-loaded Twemoji grid. */
.ep-panel[b-55mpy9armm] {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding: 0.5em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* CATEGORY TABS */
.ep-tabs[b-55mpy9armm] {
    display: flex;
    gap: 0.15em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

.ep-tab[b-55mpy9armm] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    padding: 0.2em;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.1s ease, background 0.1s ease;
}

.ep-tab:hover[b-55mpy9armm] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.ep-tab-on[b-55mpy9armm] {
    opacity: 1;
    background: rgba(46, 158, 91, 0.15);
    box-shadow: inset 0 -2px 0 0 #2e9e5b;
}

/* SEARCH BAR (mirrors the multi-select filter). */
.ep-search[b-55mpy9armm] {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.35em 0.6em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    color: #888;
}

.ep-filter[b-55mpy9armm] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-family: inherit;
    color: #222;
    min-width: 0;
}

.ep-clear[b-55mpy9armm] {
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    padding: 0 0.2em;
}

/* GRID */
.ep-grid[b-55mpy9armm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.1em, 1fr));
    gap: 0.1em;
    max-height: 13em;
    overflow-y: auto;
    padding-right: 0.15em;
}

.ep-emoji[b-55mpy9armm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0.25em;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s ease, transform 0.1s ease;
}

.ep-emoji:hover[b-55mpy9armm] {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(1.15);
}

.ep-tw[b-55mpy9armm] {
    width: 1.5em;
    height: 1.5em;
    display: block;
}

.ep-empty[b-55mpy9armm] {
    grid-column: 1 / -1;
    padding: 1em;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}

.ep-more[b-55mpy9armm] {
    padding: 0.25em 0.2em 0;
    text-align: center;
    color: #999;
    font-size: 0.75rem;
}
/* /Components/Shared/ConnectedSites/LavaLoader.razor.rz.scp.css */
/* LAVA GOO LOADING SCREEN */
@property --vignette-color {
  syntax: "<color>";
  initial-value: #111111;
  inherits: false;
}
.zt-tenant-loading-container[b-magnmm4ci3] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  /* Use the variable inside the gradient */
  background: radial-gradient(circle at center, var(--vignette-color) 0%, #000000 85%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  /* Animate the variable itself */
  animation: bg-pulse-b-magnmm4ci3 4s ease-in-out infinite alternate !important;
}

@keyframes bg-pulse-b-magnmm4ci3 {
  from {
    --vignette-color: #222222;
  }
  to {
    --vignette-color: #050505;
  }
}
.zt-tenant-loading-spinner[b-magnmm4ci3] {
  position: relative !important;
  width: 450px !important;
  height: 450px !important;
}

.lava-goo-wrapper[b-magnmm4ci3] {
  position: absolute !important;
  inset: 0 !important;
  filter: blur(5px); /* SOFTENS THE EDGES FOR A LAVA FEEL */
}

.goo[b-magnmm4ci3] {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
  mix-blend-mode: screen !important;
  opacity: 0.7;
  /* ORGANIC BORDER RADIUS CREATES THE GOO SHAPE */
  border-radius: 40% 60% 70% 30%/50% 60% 30% 70% !important;
  animation: goo-spin-b-magnmm4ci3 linear infinite !important;
}

/* INDIVIDUAL GOO BALL CONFIGURATION */
.goo-1[b-magnmm4ci3] {
  width: 320px;
  height: 340px;
  background: radial-gradient(circle, #d4af37, transparent); /* ZEAL GOLD */
  animation-duration: 8s !important;
}

.goo-2[b-magnmm4ci3] {
  width: 280px;
  height: 300px;
  background: radial-gradient(circle, #ff4500, transparent); /* LAVA RED/ORANGE */
  animation-duration: 12s !important;
  animation-direction: reverse !important;
  opacity: 0.5;
}

.goo-3[b-magnmm4ci3] {
  width: 350px;
  height: 310px;
  background: radial-gradient(circle, #b88900, transparent); /* DEEP GOLD */
  animation-duration: 15s !important;
}

.goo-4[b-magnmm4ci3] {
  width: 250px;
  height: 260px;
  background: radial-gradient(circle, #777, transparent); /* SILVER/GRAY SHEEN */
  animation-duration: 6s !important;
  animation-direction: reverse !important;
  opacity: 0.4;
}

.goo-5[b-magnmm4ci3] {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #d4af37, #ffcc00);
  animation-duration: 20s !important;
  opacity: 0.3;
}

/* THE ANIMATION: ROTATE + MORPH SHAPE */
@keyframes goo-spin-b-magnmm4ci3 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70% !important;
  }
  33% {
    border-radius: 70% 30% 50% 50%/30% 30% 70% 70% !important;
    transform: translate(-50%, -50%) rotate(120deg) scale(1.1);
  }
  66% {
    border-radius: 30% 70% 70% 30%/50% 40% 70% 40% !important;
    transform: translate(-50%, -50%) rotate(240deg) scale(0.9);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70% !important;
  }
}
/* LOGO CONTAINER */
.logo-container[b-magnmm4ci3] {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 30 !important;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.85) !important; /* DARKENED TO POP AGAINST LAVA */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
  border: 2px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-container img[b-magnmm4ci3] {
  width: 85% !important;
  height: 85% !important;
  object-fit: contain !important;
}
/* /Components/Shared/ConnectedSites/ZtConnectedSection.razor.rz.scp.css */
[b-gtssf3as9g].archived-section {
  background: #fffef7;
  border-radius: 7px;
  position: relative;
}
[b-gtssf3as9g].archived-section .zt-page-section {
  background: rgba(255, 254, 247, 0.4) !important;
}
[b-gtssf3as9g].archived-section .button-bar {
  opacity: 1 !important;
  background-color: #eeeeee !important;
  padding: 10px;
  border-radius: 5px;
  margin-left: 0;
  max-width: 300px;
  margin-top: -8px;
  position: relative;
  z-index: 10;
}
[b-gtssf3as9g].archived-section .button-bar button {
  opacity: 1 !important;
}

.button-bar[b-gtssf3as9g] {
  background-color: #eeeeee;
  padding: 10px;
  border-radius: 5px;
  margin-left: 0;
  max-width: 300px;
  margin-top: -8px;
}

.button-bar-title[b-gtssf3as9g] {
  font-weight: bold;
  color: #ffffff;
  padding: 3px;
  padding-left: 10px;
  background-color: #666666;
  border-radius: 4px;
  margin-bottom: 7px;
}

.active-section[b-gtssf3as9g] {
  padding: 0;
}
/* /Components/Shared/ConnectedSites/ZtConnectedSite.razor.rz.scp.css */
[b-syfzlake5i] .site-builder-toolbar {
  position: fixed;
  background-color: #333333;
  top: auto;
  bottom: 60px;
  left: 0;
  right: 0;
  border-top: 1pt solid #444444;
  border-bottom: none;
  z-index: 9000;
  display: flex;
  align-items: center; /* CENTER CHILDREN VERTICALLY */
  gap: 5px; /* SPACE BETWEEN MENU, LOGO, ICON CLUSTER, MIN-MAX */
  padding: 10px 10px;
  pointer-events: auto;
  height: 60px;
  min-width: 100vw;
}

/* THREE SECTIONS: PAGE | SITE | EXIT — DIVIDER BETWEEN GROUPS. */
[b-syfzlake5i] .site-builder-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

[b-syfzlake5i] .site-builder-group + .site-builder-group {
  margin-left: 6px;
  padding-left: 11px;
  border-left: 1px solid #555555;
}
/* /Components/Shared/NavBar/ZtContextButton.razor.rz.scp.css */
.context-navbar-button[b-g4wspqvyxf] {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: #ffffff;
  padding: 5px 10px 5px 10px;
  height: 50px;
  align-content: center;
  align-items: center;
  text-align: center;
  max-width: 55px;
  width: 55px;
}
@media only screen and (max-width: 768px) {
  .context-navbar-button[b-g4wspqvyxf] {
    max-width: 48px;
    width: 48px;
  }
}
.context-navbar-button div:first-of-type[b-g4wspqvyxf] {
  font-size: 13pt;
}
@media only screen and (max-width: 768px) {
  .context-navbar-button div:first-of-type[b-g4wspqvyxf] {
    font-size: 11pt;
  }
}
.context-navbar-button div:last-of-type[b-g4wspqvyxf] {
  font-size: 6.5pt;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .context-navbar-button div:last-of-type[b-g4wspqvyxf] {
    font-size: 6pt;
  }
}
.context-navbar-button:hover[b-g4wspqvyxf] {
  color: #ffcb04;
  opacity: 1;
}
.context-navbar-button:hover div[b-g4wspqvyxf] {
  color: #ffcb04;
}
.context-navbar-button:hover div:first-child[b-g4wspqvyxf] {
  color: #ffcb04;
  transform: scale(1.2);
}

.navbutton-selected[b-g4wspqvyxf] {
  background-color: #aaaaaa;
  color: #111111;
}
/* /Components/Shared/NavBar/ZtContextNavbar.razor.rz.scp.css */
.context-navbar[b-7ihfjwev9s] {
  margin-left: 135px;
  display: flex;
  gap: 6px;
}
@media only screen and (max-width: 480px) {
  .context-navbar[b-7ihfjwev9s] {
    display: none;
    visibility: hidden;
  }
}
/* /Components/Shared/NavBar/ZtNavBarConnected.razor.rz.scp.css */
[b-lcrdczrh8r] .context-navbar {
  margin-left: 0;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
@media only screen and (max-width: 480px) {
  [b-lcrdczrh8r] .context-navbar {
    display: flex !important;
    visibility: visible !important;
  }
}
[b-lcrdczrh8r] .context-navbar-button {
  flex: 0 0 auto;
}
[b-lcrdczrh8r] .context-navbar-button.ctx-hidden {
  display: none !important;
}
/* /Components/Shared/NavBar/ZtNavButton.razor.rz.scp.css */
/*#region NAVIGATION BUTTON*/
.navbutton[b-ik99mvmiyj] {
  display: flex;
  flex-direction: column; /* ICON ABOVE TEXT */
  align-items: center; /* CENTER HORIZONTALLY */
  justify-content: center; /* CENTER VERTICALLY */
  width: 68px;
  height: 68px;
  margin: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0.9;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}
@media only screen and (max-width: 320px) {
  .navbutton[b-ik99mvmiyj] {
    width: 48px !important;
    height: 48px !important;
  }
}
.navbutton div:first-child[b-ik99mvmiyj] {
  font-size: 14pt;
  margin-bottom: 0;
  opacity: 1;
}
@media only screen and (max-width: 320px) {
  .navbutton div:first-child[b-ik99mvmiyj] {
    font-size: 12pt;
  }
}
.navbutton div:last-child[b-ik99mvmiyj] {
  font-size: 7pt;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 54.6666666667px;
  opacity: 1;
}
@media only screen and (max-width: 320px) {
  .navbutton div:last-child[b-ik99mvmiyj] {
    font-size: 6pt;
    width: 57.3333333333px;
  }
}
.navbutton:hover[b-ik99mvmiyj] {
  color: #ffcb04;
  opacity: 1;
}
.navbutton:hover div[b-ik99mvmiyj] {
  color: #ffcb04;
}
.navbutton:hover div:first-child[b-ik99mvmiyj] {
  color: #ffcb04;
  transform: scale(1.2);
}

.navbutton-selected[b-ik99mvmiyj] {
  background-color: #aaaaaa;
  color: #111111;
}

/*#endregion NAVIGATION BUTTON*/
/* /Components/Shared/NavBar/ZtNavGroup.razor.rz.scp.css */
.navgroup[b-z8prusss4m] {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: center;
  margin: 20px 0 0 0;
  /* TITLE APPEARS IN THE FIRST DIV*/
  /* BUTTONS APPEAR IN THE SECOND DIV */
}
@media only screen and (max-width: 640px) {
  .navgroup[b-z8prusss4m] {
    width: calc(296px + 2vw) !important;
  }
}
.navgroup div:first-child[b-z8prusss4m] {
  color: #ffffff;
  font-weight: 600;
  font-size: 10pt;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 10px;
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}
.navgroup div:last-child[b-z8prusss4m] {
  display: grid;
  justify-content: center; /* CENTER THE GRID BLOCK */
  align-content: start; /* START AT TOP */
  gap: 10px 10px; /* ROW / COLUMN GAPS */
}
@media only screen and (max-width: 640px) {
  .navgroup div:last-child[b-z8prusss4m] {
    grid-template-columns: repeat(4, max-content) !important;
    width: 282px !important;
    justify-content: start;
  }
}
/* /Components/Shared/ReconnectModal.razor.rz.scp.css */
/* ============================================================ */
/* SIGNALR RECONNECT MODAL - LAVA LOADER (CSS-ISOLATED)         */
/* SEPARATE COPY OF THE CONNECTED-SITES LavaLoader LOOK; THAT    */
/* COMPONENT IS NOT MODIFIED. UNIQUE KEYFRAME / @property NAMES  */
/* (zr-*) AVOID COLLISION WITH THE ORIGINAL LOADER.             */
/* ============================================================ */
@property --zr-vignette {
  syntax: "<color>";
  initial-value: #111111;
  inherits: false;
}
@-webkit-keyframes zr-bg-pulse {
  from {
    --zr-vignette: #222222;
  }
  to {
    --zr-vignette: #050505;
  }
}
@keyframes zr-bg-pulse-b-o2wwdypgfm {
  from {
    --zr-vignette: #222222;
  }
  to {
    --zr-vignette: #050505;
  }
}
/* THE ANIMATION: ROTATE + MORPH SHAPE (MELTING GOO) */
@-webkit-keyframes zr-goo-spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70%;
  }
  33% {
    -webkit-transform: translate(-50%, -50%) rotate(120deg) scale(1.14);
            transform: translate(-50%, -50%) rotate(120deg) scale(1.14);
    border-radius: 70% 30% 50% 50%/30% 30% 70% 70%;
  }
  66% {
    -webkit-transform: translate(-50%, -50%) rotate(240deg) scale(0.9);
            transform: translate(-50%, -50%) rotate(240deg) scale(0.9);
    border-radius: 30% 70% 70% 30%/50% 40% 70% 40%;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
            transform: translate(-50%, -50%) rotate(360deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70%;
  }
}
@keyframes zr-goo-spin-b-o2wwdypgfm {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70%;
  }
  33% {
    -webkit-transform: translate(-50%, -50%) rotate(120deg) scale(1.14);
            transform: translate(-50%, -50%) rotate(120deg) scale(1.14);
    border-radius: 70% 30% 50% 50%/30% 30% 70% 70%;
  }
  66% {
    -webkit-transform: translate(-50%, -50%) rotate(240deg) scale(0.9);
            transform: translate(-50%, -50%) rotate(240deg) scale(0.9);
    border-radius: 30% 70% 70% 30%/50% 40% 70% 40%;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
            transform: translate(-50%, -50%) rotate(360deg) scale(1);
    border-radius: 40% 60% 70% 30%/50% 60% 30% 70%;
  }
}
.zeal-reconnect[b-o2wwdypgfm] {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30000;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem; /* TWEAK 1: TIGHTER SPACE BETWEEN LAVA AND TEXT */
  background: radial-gradient(circle at center, var(--zr-vignette) 0%, #000000 85%);
  -webkit-animation: zr-bg-pulse 4s ease-in-out infinite alternate;
          animation: zr-bg-pulse-b-o2wwdypgfm 4s ease-in-out infinite alternate;
  font-family: "Montserrat", system-ui, sans-serif;
  /* ANY ACTIVE RECONNECT STATE REVEALS THE OVERLAY */
}
.zeal-reconnect.components-reconnect-show[b-o2wwdypgfm], .zeal-reconnect.components-reconnect-retrying[b-o2wwdypgfm], .zeal-reconnect.components-reconnect-failed[b-o2wwdypgfm], .zeal-reconnect.components-reconnect-paused[b-o2wwdypgfm], .zeal-reconnect.components-reconnect-resume-failed[b-o2wwdypgfm], .zeal-reconnect.components-reconnect-rejected[b-o2wwdypgfm] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.zeal-reconnect[b-o2wwdypgfm] {
  /* RECONNECTED -> ALWAYS HIDE */
}
.zeal-reconnect.components-reconnect-hide[b-o2wwdypgfm] {
  display: none;
}

/* LAVA STAGE - TWEAK 3: BIGGER OVERALL FOOTPRINT */
.zeal-reconnect-stage[b-o2wwdypgfm] {
  position: relative;
  width: 300px;
  height: 300px;
}

.zeal-reconnect-lava[b-o2wwdypgfm] {
  position: absolute;
  inset: 0;
  -webkit-filter: blur(10px);
          filter: blur(10px); /* TWEAK 3: MORE MELT / GOOEY EDGES */
}

.zeal-goo[b-o2wwdypgfm] {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  mix-blend-mode: screen;
  /* ORGANIC BORDER RADIUS CREATES THE GOO SHAPE */
  border-radius: 40% 60% 70% 30%/50% 60% 30% 70%;
  -webkit-animation: zr-goo-spin linear infinite;
          animation: zr-goo-spin-b-o2wwdypgfm linear infinite;
}

/* TWEAK 2 + 3: BIGGER, HOTTER, DENSER BLOBS WHOSE BRIGHT CORE  */
/* REACHES THE LOGO (COLOR HELD TO ~35-40% BEFORE FADING OUT).  */
.zeal-goo-1[b-o2wwdypgfm] {
  width: 255px;
  height: 270px;
  background: radial-gradient(circle, #d4af37 38%, transparent 74%);
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  opacity: 0.85;
}

.zeal-goo-2[b-o2wwdypgfm] {
  width: 220px;
  height: 235px;
  background: radial-gradient(circle, #ff4500 34%, transparent 72%);
  -webkit-animation-duration: 12s;
          animation-duration: 12s;
  animation-direction: reverse;
  opacity: 0.65;
}

.zeal-goo-3[b-o2wwdypgfm] {
  width: 275px;
  height: 240px;
  background: radial-gradient(circle, #c8920a 38%, transparent 74%);
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  opacity: 0.8;
}

.zeal-goo-4[b-o2wwdypgfm] {
  width: 205px;
  height: 215px;
  background: radial-gradient(circle, #ff7a00 32%, transparent 70%);
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  animation-direction: reverse;
  opacity: 0.6;
}

.zeal-goo-5[b-o2wwdypgfm] {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, #ffd24a, #ffae00);
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  opacity: 0.5;
}

/* ROUND ZEAL LOGO - TWEAK 2: SLIGHTLY LARGER + TIGHTER DARK    */
/* HALO SO THE LAVA SITS RIGHT UP AGAINST IT.                   */
.zeal-reconnect-logo[b-o2wwdypgfm] {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 30;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  -webkit-box-shadow: 0 0 22px rgba(0, 0, 0, 0.55);
          box-shadow: 0 0 22px rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(212, 175, 55, 0.35);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.zeal-reconnect-logo img[b-o2wwdypgfm] {
  width: 85%;
  height: 85%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50%;
}

/* CLEAN WHITE STATUS TEXT */
.zeal-reconnect-text[b-o2wwdypgfm] {
  text-align: center;
}

.zeal-reconnect-msg[b-o2wwdypgfm] {
  display: none;
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.zeal-reconnect-attempt[b-o2wwdypgfm] {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

/* PER-STATE MESSAGE VISIBILITY */
.zeal-reconnect.components-reconnect-show .zeal-reconnect-trying[b-o2wwdypgfm],
.zeal-reconnect.components-reconnect-failed .zeal-reconnect-trying[b-o2wwdypgfm],
.zeal-reconnect.components-reconnect-paused .zeal-reconnect-trying[b-o2wwdypgfm],
.zeal-reconnect.components-reconnect-resume-failed .zeal-reconnect-trying[b-o2wwdypgfm] {
  display: block;
}

/* RETRYING COEXISTS WITH show -> COUNTDOWN MESSAGE WINS */
.zeal-reconnect.components-reconnect-retrying .zeal-reconnect-trying[b-o2wwdypgfm] {
  display: none;
}

.zeal-reconnect.components-reconnect-retrying .zeal-reconnect-retrying-msg[b-o2wwdypgfm] {
  display: block;
}

.zeal-reconnect.components-reconnect-rejected .zeal-reconnect-rejected-msg[b-o2wwdypgfm] {
  display: block;
}

.zeal-reconnect-rejected-msg a[b-o2wwdypgfm] {
  color: #ffcb04;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
/*# sourceMappingURL=Components\Shared\ReconnectModal.razor.css.map */
/* /Components/Shared/RequiredDocuments/RequiredDocumentActionItem.razor.rz.scp.css */
.doc-item-container[b-klbdg6n8ln] {
  width: 50vw;
  border: 1pt solid #bbbbbb;
  border-radius: 4px;
  padding: 0;
  margin: 0 0 10px 0;
}
.doc-item-container.success[b-klbdg6n8ln] {
  border: 1pt solid #152c15;
}
.doc-item-container.success .doc-name[b-klbdg6n8ln] {
  background-color: #f7fbf7;
}
@media only screen and (max-width: 1024px) {
  .doc-item-container[b-klbdg6n8ln] {
    width: 60vw;
  }
}
@media only screen and (max-width: 768px) {
  .doc-item-container[b-klbdg6n8ln] {
    width: 70vw;
  }
}
@media only screen and (max-width: 640px) {
  .doc-item-container[b-klbdg6n8ln] {
    width: 85vw;
    font-size: 10pt;
  }
}

.doc-item-container:first-of-type[b-klbdg6n8ln] {
  margin: 10px 0 10px 0;
}

.doc-item-container:last-of-type[b-klbdg6n8ln] {
  margin: 0;
}

.doc-name[b-klbdg6n8ln] {
  background-color: #f4f4f4;
  padding: 5px 0 5px 8px;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-data-container[b-klbdg6n8ln] {
  padding: 5px 12px;
}

.doc-data[b-klbdg6n8ln] {
  width: 100%;
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-buttons[b-klbdg6n8ln] {
  padding: 10px;
  background-color: #f4f4f4;
  color: #282828;
  border-radius: 0 0 4px 4px;
  margin-top: 5px;
}
/* /Components/Shared/RequiredDocuments/RequiredDocumentPreviewAccept.razor.rz.scp.css */
/* /Components/Shared/Security/ZtAuthorizeView.razor.rz.scp.css */
.not-authorized-container[b-9qfln5nnr2] {
  min-width: 100vw;
  min-height: 100vh;
  background-color: #222222;
  z-index: 9999;
}
/* /Components/Shared/Stripe/BankAccountActionCard.razor.rz.scp.css */
/* /Components/Shared/Stripe/CreditCardActionCard.razor.rz.scp.css */
/* /Components/Shared/Stripe/DisputeAppealForm.razor.rz.scp.css */
/* /Components/Shared/Stripe/ViewStripeChargeActionCard.razor.rz.scp.css */
/* /Components/Shared/Users/EditConnectedAccountRoleModal.razor.rz.scp.css */
/* /Components/Shared/Users/EditMembershipProgramroleModal.razor.rz.scp.css */
/* /Components/Shared/Users/MemberRankHistoryActionCard.razor.rz.scp.css */
.rank-container[b-x710gebmlf] {
  padding: 0;
  border-radius: 5px;
  border: 1pt, solid, #dddddd;
  margin-bottom: 10px;
}
.rank-container.warning[b-x710gebmlf] {
  border: 1pt, solid, #ffcb04;
}

.rank-title[b-x710gebmlf] {
  background-color: #eeeeee;
  color: #333333;
  padding: 8px 10px;
  font-weight: bolder;
  border-radius: 5px 5px 0 0;
}
.rank-title.warning[b-x710gebmlf] {
  background-color: #ffcb04;
}
@media only screen and (max-width: 480px) {
  .rank-title[b-x710gebmlf] {
    font-size: 11pt;
  }
}

.rank-details-container[b-x710gebmlf] {
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .rank-details[b-x710gebmlf] {
    font-size: 11pt;
  }
}

.rank-buttons[b-x710gebmlf] {
  padding: 8px;
  background-color: #eeeeee;
  border-radius: 0 0 5px 5px;
}
.rank-buttons.warning[b-x710gebmlf] {
  background-color: #ffcb04;
}
/* /Components/Shared/Users/ProgramAttendanceActionCard.razor.rz.scp.css */
/* /Components/Shared/Users/ProgramMembershipActionCard.razor.rz.scp.css */
[b-fvy6z20ugv] .scrollable-div {
  max-height: 225px; /* FIXED HEIGHT */
  overflow-y: auto; /* ENABLES VERTICAL SCROLLING */
  overflow-x: hidden; /* HIDES HORIZONTAL SCROLLING */
  border: 1px solid #ccc; /* OPTIONAL: ADDS A BORDER FOR VISIBILITY */
  padding: 6px; /* OPTIONAL: ADDS PADDING INSIDE THE DIV */
  border-radius: 5px 0px 0px 5px;
  border: 1pt solid #dddddd;
}
/* /Components/Shared/Users/UploadUserProfileControl.razor.rz.scp.css */
.zt-upload-profile-preview[b-spo4qn9aah] {
	border-radius: 6px;
	max-width: 100%;
	display: block;
	/* A WHISPER OF SPACE BETWEEN THE PREVIEW AND THE GREY TOOLBAR BELOW. */
	margin-bottom: 10px;
}
/* /Components/Shared/Users/UserAddressActionCard.razor.rz.scp.css */
/* /Components/Shared/Users/UserDetailsControl.razor.rz.scp.css */
/* BULLETPROOF CENTERING (BOTH AXES, EVERY SCREEN SIZE).  THE LIB DOESN'T VERTICALLY CENTER - IT
   PINS THE MODAL AT top:10vh AND ONLY HORIZONTALLY CENTERS THE DIALOG.  WE FLEX-CENTER IT INSTEAD.
   CRITICAL: SCOPE THIS TO THE *SHOWN* STATE (.d-a-block) ONLY.  ZTMODAL TOGGLES VISIBILITY VIA
   .d-a-none (display:none) / .d-a-block (display:block); AN UNCONDITIONAL display:flex HERE OUTRANKS
   .d-a-none AND MAKES *EVERY* HIDDEN MODAL VISIBLE (ALL MODALS STACK + LOCK THE SCREEN).  TARGETING
   .d-a-block LEAVES HIDDEN MODALS (.d-a-none) UNTOUCHED SO THEY STAY HIDDEN. */
.user-details-control[b-6h7br4ymvy]  .zt-modal.d-a-block {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 2vh 0;
}

/* margin:auto CENTERS THE DIALOG IN THE FLEX OVERLAY AND STAYS SCROLL-SAFE WHEN A MEMBER'S LIST IS
   TALLER THAN THE SCREEN (NO CLIPPED TOP). */
.user-details-control[b-6h7br4ymvy]  .zt-modal.d-a-block .zt-modal-dialog {
	margin: auto;
}

/* MAIN MODAL: COMFORTABLE READABLE WIDTH (THE EMAIL CAN BE LONG); HEIGHT IS CONTENT-DRIVEN AND
   CAPPED FOR SCROLL SO THE MODAL STAYS WITHIN THE VIEWPORT AND CENTERED. */
.udc-main[b-6h7br4ymvy]  .zt-modal-content {
	width: 520px;
	max-width: 95vw;
}

.udc-main[b-6h7br4ymvy]  .zt-modal-body {
	max-height: 75vh;
}

/* EDIT SUB-MODALS (USER / PHONE / ADDRESS): SHRINK TO FIT THE FORM, EXACTLY LIKE THE CHECK-IN RANK
   MODAL.  THE LIB FORCES min-width:380/max:620 ON .zt-modal-content, LEAVING DEAD SPACE ON THE
   RIGHT; fit-content KILLS IT SO THE MODAL HUGS THE FIELDS AND CENTERS HORIZONTALLY. */
.udc-sub[b-6h7br4ymvy]  .zt-modal-content {
	min-width: 0;
	width: fit-content;
	max-width: 95vw;
}

/* CAP THE BODY SO THE TALL ADDRESS FORM SCROLLS INSIDE A VERTICALLY-CENTERED MODAL INSTEAD OF
   SPILLING OFF-SCREEN (THE .zt-modal top:0/height:100vh RULE ABOVE DOES THE CENTERING). */
.udc-sub[b-6h7br4ymvy]  .zt-modal-body {
	max-height: 75vh;
}

/* ALIGN THE FOOTER BUTTONS' RIGHT EDGE WITH THE FORM CONTROLS ABOVE - ZERO THE FOOTER'S OWN
   HORIZONTAL PADDING SO THE BUTTONS HIT THE FIELD EDGE, MATCHING THE RANK MODAL. */
.udc-sub[b-6h7br4ymvy]  .zt-modal-footer {
	width: 100%;
	justify-content: flex-end;
	padding-left: 0;
	padding-right: 0;
}

/* TIGHT, CONSISTENT RHYTHM BETWEEN THE THREE GROUPS (USER / PHONES / ADDRESSES) */
.udc-section[b-6h7br4ymvy] {
	margin-bottom: 1rem;
}

.udc-section:last-child[b-6h7br4ymvy] {
	margin-bottom: 0;
}

/* GROUP HEADING (PHONES / ADDRESSES) */
.udc-heading[b-6h7br4ymvy] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #2e7d32;
	margin-bottom: 0.35rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid #e6e6e6;
}

/* ACTION BUTTON ROW (EDIT / ADD PHONE / ADD ADDRESS) */
.udc-actions[b-6h7br4ymvy] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

/* ONE PHONE / ADDRESS: INFO LEFT, EDIT BUTTON RIGHT */
.udc-row[b-6h7br4ymvy] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.35rem 0;
}

.udc-row + .udc-row[b-6h7br4ymvy] {
	border-top: 1px solid #f0f0f0;
}

.udc-row-info[b-6h7br4ymvy] {
	min-width: 0;
}

.udc-empty[b-6h7br4ymvy] {
	color: #888;
	font-style: italic;
	padding: 0.25rem 0;
}

/* TIGHTEN THE CONTENT-ITEM ROWS - THE LIB ADDS GENEROUS MARGINS BY DEFAULT */
.user-details-control[b-6h7br4ymvy]  .zt-content-item {
	margin-top: 0.15rem;
	margin-bottom: 0.15rem;
}

/* PHONES / SMALL TABLETS: fit-content SIZES THE MODAL TO THE WIDEST FIELD'S INTRINSIC WIDTH, AND A
   LONG EMAIL PUSHES PAST 95vw → THE MODAL OVERFLOWS RIGHT AND LOOKS OFF-CENTER.  PIN BOTH THE MAIN
   AND THE EDIT SUB-MODALS TO A FIXED 92vw SO MARGINS ARE SYMMETRIC AND THEY CENTER CLEANLY, AND
   FORCE THE FIELDS TO SHRINK TO FIT INSTEAD OF OVERFLOWING. */
@media only screen and (max-width: 768px) {
	.udc-main[b-6h7br4ymvy]  .zt-modal-content,
	.udc-sub[b-6h7br4ymvy]  .zt-modal-content {
		width: 92vw;
		min-width: 0;
		max-width: 92vw;
	}

	.user-details-control[b-6h7br4ymvy]  .zt-input-container {
		width: 100%;
		min-width: 0;
		max-width: 100%;
	}
}
/* /Components/Shared/Users/UserInfo.razor.rz.scp.css */
.user-info-container[b-sxcsfqj2jz] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5pt;
}
.user-info-container .user-image[b-sxcsfqj2jz] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-info-container .user-image img[b-sxcsfqj2jz] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.user-info-container .user-info-details[b-sxcsfqj2jz] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.user-info-container .user-info-details[b-sxcsfqj2jz]  .zt-content-item {
  gap: 4px;
}
/* /Components/Shared/Users/UserNavigationButtons.razor.rz.scp.css */
/* /Components/Shared/Users/UserPhoneActionCard.razor.rz.scp.css */
/* /Components/Shared/Users/ViewUserActionCard.razor.rz.scp.css */
.user-action-card-header[b-1xem5spbqp] {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  padding: 0px 5px 5px 10px;
}

.user-action-card-picture[b-1xem5spbqp] {
  margin-right: 10px;
}

.user-action-card-header-details[b-1xem5spbqp] {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 480px) {
  .user-action-card-header-details[b-1xem5spbqp] {
    width: 220px;
  }
}

.user-profile-picture[b-1xem5spbqp] {
  width: 115px;
  height: 115px;
  border-radius: 5px;
}