html{}
	
body{
	display: flex;
	flex-direction: column;
	font-size: 14px;}
	
:focus-visible {
	  outline: none;
		box-shadow: 1px 1px 5px rgba(1, 1, 0, .0);
	}
	  
	/* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
	:focus:not(:focus-visible) {
	  outline: none;
	  box-shadow: 1px 1px 5px rgba(1, 1, 0, .0);
	}

.col-logo{
	-ms-flex: 0 0 54px;
	flex: 0 0 54px;
	max-width: 54px;}
	
.container-lg{
	width: 1800px;
	max-width: 100%;}
	
.container-fluid{	
	flex: 1 0 auto;}
.container-fullwidth{
	padding-left: 0;
	padding-right: 0;
	width: 100%;}


.loadingDiv {
	position: fixed;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 10000;
	color: #fff;}
.loadingDiv p{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-bottom: 0;
	}
.p-relative{
	position: relative;}
.lh-sm{
	line-height: 1.15!important;}

.lh-md{
	line-height: 2rem!important;}
		
.btn-link{
	padding: 0;
	border: 0;}

.border-reset {
	border-color: inherit !important;}
	
.jumbotron-start-line{
	background: #ccc; 
	margin-bottom: 0;
	color: #f1f1f1;
	border-radius: 0;
	text-align: center;
	padding: 1rem 0 0 0;}
.jumbotron-start-line h1{
	font-size: 3rem;}
.jumbotron-start-line .logo{
	max-width: 10rem;
	margin-top: 2rem;
	margin-bottom: 0rem;}
.jumbotron-overlay{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cccccc+1,666666+100 */
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,.5) 1%, rgba(102,102,102,.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(204,204,204,.5) 1%,rgba(102,102,102,.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(204,204,204,.5) 1%,rgba(102,102,102,.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
	box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	padding: 0.7rem 2rem 2rem 2rem;}

.jumbotron-data-protection{
	background: #ffc107;
	color: #000;
}

.footerpadding{
	height: 120px;}

.modal-dialog-bottom {
	  position: fixed !important;
	  bottom: 0 !important;
	  left: 0% !important;
	  right: 0% !important;}
	  
	.bg-cloud{
		background-color: #f1c537 !important;}
	  
form{
}
#primary{
	margin-top: -1rem;
	background: #e84b3c;
	overflow: hidden;
	position: relative;
	width: 100%;}
#primary a{
	color:#ffc107;
	text-decoration: underline;}

.section:before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 10rem;
	height: 40rem;
	background: #e14031;
	transform: skew(0, -12deg);}
	
.fs-tiny{
	font-size: .75em !important;}
.fs-counter{
	font-size: 10px !important;}

.table-responsive-lg {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;}
	
.terms{
	font-size: 0.8rem;
	max-height: 280px;
	overflow-y: scroll;}
.terms-agree{
	background: #888;
	color: #fff;
	padding: 1rem;
	border-radius: 0 0 3px 3px;
}

.select-mode .member-item { cursor: pointer; }

.table-membership td{
	vertical-align: middle;
}

.calc-card, .calc-card .card-footer{
	background: transparent;
}
.calc-card .card-header{
	color: #373a3c;
	background: white;
}

.calc-card .table td, .table th{
	border-top: 1px solid rgba(255,255,255,0.05);}

.btn-relative{
	position: relative;} 
	
.custom-file-control{
	text-align: left;}
.text-center{
	text-align: center;}
.text-shadow{
	text-shadow: 0px 0px 15px rgba(0,0,0,.3);
}
form .yesnoswitch{
	margin-top: 2px;}
.card-header legend{
	margin-bottom: 0;}

.mh-100{
	min-height: 100vh;}
	
/*	MODULES */
.fullwidth-hero{
	height: 300px;
	width: 100%;}
	
.img-fit {
	height: 100%;
	width: 100%;
	-o-object-fit: cover!important;
	object-fit: cover!important;
	object-position: center center;}
.chat-img{
	height: 100vh;
	object-position: center center;}
.nowrap{
	white-space: nowrap;}

[data-bs-toggle="collapse"] i {
	transition: transform 0.2s ease;
}

[data-bs-toggle="collapse"]:not(.collapsed) i {
	transform: rotate(180deg);
}


/* ═══════════════════════════════════════════════════════════════
   WEATHER & WATER MODALS
   Used by #weatherModal and #waterModal.
   All classes prefixed with .cm- (conditions modal) for isolation.
   Chart rendering and badge generation lives in event-safety-client.js
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal shell ─────────────────────────────────────────── */

.cm-modal .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cm-modal .modal-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.cm-modal .modal-title small {
  font-weight: 400;
  color: #6b7280;
}
.cm-modal .modal-body {
  padding: 1.25rem;
  background: #fafafa;
}
.cm-modal .modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8125rem;
  color: #6b7280;
  background: #fff;
}

/* ── Section labels ──────────────────────────────────────── */
.cm-section { margin-bottom: 1.5rem; }
.cm-section:last-child { margin-bottom: 0; }
.cm-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 12px;
}

/* ── Headline strip (5 metric cards) ─────────────────────── */
.cm-cards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.cm-cards-grid > .cm-metric-card:nth-child(1),
.cm-cards-grid > .cm-metric-card:nth-child(2),
.cm-cards-grid > .cm-metric-card:nth-child(3) {
  grid-column: span 2;
}
.cm-cards-grid > .cm-metric-card:nth-child(4),
.cm-cards-grid > .cm-metric-card:nth-child(5) {
  grid-column: span 3;
}

@media (max-width: 1100px) {
  .cm-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-cards-grid > .cm-metric-card:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 420px) {
  .cm-cards-grid { grid-template-columns: 1fr; }
}

/* ── Station map link ────────────────────────────────────── */
.cm-station-name-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.12s ease;
}
.cm-station-name-link:hover {
  color: #0e7c86;
  text-decoration: none;
}
.cm-station-card.is-active .cm-station-name-link:hover { color: #5a3415; }
.cm-station-card.is-recent .cm-station-name-link:hover { color: #92400e; }

.cm-station-link-icon {
  font-size: 9px;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.cm-station-name-link:hover .cm-station-link-icon {
  opacity: 1;
}

.cm-metric-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.cm-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}
.cm-metric-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
  font-weight: 500;
}
.cm-metric-value {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #111827;
}
.cm-metric-value-sm { font-size: 24px; }
.cm-metric-unit {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  margin-left: 2px;
}
.cm-metric-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.4;
}
.cm-metric-context {
  margin-top: auto;
  padding-top: 10px;
}

/* ── Context badges ──────────────────────────────────────── */
.cm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}
.cm-badge-temp-cold     { background: #ecfeff; color: #155e75; }
.cm-badge-temp-cool     { background: #f0fdfa; color: #115e59; }
.cm-badge-temp-mild     { background: #fefce8; color: #854d0e; }
.cm-badge-temp-warm     { background: #fef3c7; color: #92400e; }
.cm-badge-wind-low      { background: #dcfce7; color: #166534; }
.cm-badge-wind-mod      { background: #fef3c7; color: #854d0e; }
.cm-badge-wind-strong   { background: #fee2e2; color: #991b1b; }
.cm-badge-uv-low        { background: #dcfce7; color: #166534; }
.cm-badge-uv-mod        { background: #fef3c7; color: #854d0e; }
.cm-badge-uv-high       { background: #fed7aa; color: #9a3412; }
.cm-badge-uv-vhigh      { background: #fee2e2; color: #991b1b; }
.cm-badge-uv-extreme    { background: #ede9fe; color: #5b21b6; }
.cm-badge-cloud         { background: #f1f5f9; color: #475569; }
.cm-badge-seastate      { background: #ccfbf1; color: #115e59; }
.cm-badge-current       { background: #f1f5f9; color: #475569; }
.cm-badge-quality-good  { background: #dcfce7; color: #166534; }
.cm-badge-quality-mod   { background: #fef3c7; color: #854d0e; }
.cm-badge-quality-poor  { background: #fee2e2; color: #991b1b; }
.cm-badge-alert         { background: #fee2e2; color: #991b1b; }

/* ── Visual support elements ─────────────────────────────── */

/* Bar trend (Sea State card) */
.cm-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  margin-top: 8px;
}
.cm-bar { flex: 1; background: #0e7c86; border-radius: 1px; }

/* Gradient track (UV, water temp) */
.cm-track {
  height: 4px;
  border-radius: 2px;
  margin-top: 12px;
  position: relative;
}
.cm-track-uv {
  background: linear-gradient(to right,
	#22c55e 0%, #facc15 27%, #fb923c 55%, #ef4444 73%, #a855f7 100%);
}
.cm-track-temp {
  background: linear-gradient(to right,
	#1e3a8a 0%, #06b6d4 30%, #14b8a6 60%, #f59e0b 85%, #dc2626 100%);
}
.cm-track-marker {
  position: absolute;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #111827;
  border: 2px solid #fff;
  transform: translateX(-50%);
}

/* ── Hourly strip ────────────────────────────────────────── */
.cm-hourly-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
@media (max-width: 700px) {
  .cm-hourly-strip {
	grid-template-columns: repeat(6, 80px);
	overflow-x: auto;
	padding-bottom: 6px;
  }
}

.cm-hour-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
.cm-hour-card.is-event { border-color: #0e7c86; background: #f0fdfa; }
.cm-hour-card.is-now   { border-color: #f59e0b; background: #fffbeb; }
.cm-hour-time {
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 6px;
}
.cm-hour-icon {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #6b7280;
}
.cm-hour-card.is-event .cm-hour-icon { color: #0e7c86; }
.cm-hour-card.is-now .cm-hour-icon   { color: #f59e0b; }
.cm-hour-primary {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}
.cm-hour-secondary {
  font-size: 10px;
  color: #6b7280;
  margin-top: 4px;
}
.cm-hour-pill {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #0e7c86;
  color: white;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.cm-hour-pill.now { background: #f59e0b; }

/* ── Chart card ──────────────────────────────────────────── */
.cm-chart-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px 18px;
}
.cm-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.cm-chart-title { font-size: 13px; font-weight: 500; color: #111827; }
.cm-chart-legend { display: flex; gap: 14px; font-size: 11px; color: #6b7280; }
.cm-chart-legend-item { display: flex; align-items: center; gap: 5px; }
.cm-legend-swatch { width: 12px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cm-chart-footnote {
  margin-top: 8px;
  font-size: 11px;
  color: #6b7280;
  line-height: 1.5;
}

/* ── Detail rows ─────────────────────────────────────────── */
.cm-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 40px;
  row-gap: 0;
}
@media (max-width: 600px) {
  .cm-details-grid { grid-template-columns: 1fr; }
}

.cm-detail-row-empty {
	/* Empty filler cell — invisible but holds the grid slot */
	border: none !important;
	background: transparent !important;
}
.cm-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
}
.cm-detail-row:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 600px) {
  .cm-detail-row:not(:last-child) { border-bottom: 0.5px solid rgba(0, 0, 0, 0.06); }
}
.cm-detail-label { color: #6b7280; padding-right: 12px; }
.cm-detail-value { color: #111827; font-weight: 500; text-align: right; }

/* ── Empty state ─────────────────────────────────────────── */
.cm-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: #6b7280;
  font-size: 13px;
}
.cm-empty-state strong { color: #111827; display: block; margin-bottom: 4px; }

/* ── Compass arrow helper ────────────────────────────────── */
.cm-compass-arrow {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Sewage station cards ────────────────────────────────── */
.cm-station-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .cm-station-grid { grid-template-columns: 1fr; }
}

.cm-station-card {
  background: #fff;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm-station-card.is-active {
  border: 1px solid #b08968;
  background: #faf5ef;
}
.cm-station-card.is-recent {
  border: 1px solid #fcd34d;
  background: #fffbeb;
}

.cm-station-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cm-station-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #6b7280;
}
.cm-station-card.is-active .cm-station-icon {
  background: #e9dccd;
  color: #6b3e1f;
}
.cm-station-card.is-recent .cm-station-icon {
  background: #fef3c7;
  color: #b45309;
}

.cm-station-meta {
  flex: 1;
  min-width: 0;
}
.cm-station-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.2;
}
.cm-station-card.is-active .cm-station-name { color: #5a3415; }
.cm-station-watercourse {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-station-distance {
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

.cm-station-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 12px;
}
.cm-station-card.is-active .cm-station-status-row {
  border-top-color: rgba(107, 62, 31, 0.2);
}
.cm-station-card.is-recent .cm-station-status-row {
  border-top-color: rgba(180, 83, 9, 0.2);
}

.cm-station-status-text { color: #6b7280; }
.cm-station-card.is-active .cm-station-status-text {
  color: #5a3415; font-weight: 500;
}
.cm-station-card.is-recent .cm-station-status-text {
  color: #92400e; font-weight: 500;
}

.cm-station-duration {
  font-weight: 500;
  color: #111827;
  font-size: 12px;
  padding: 2px 8px;
  background: #f1f5f9;
  border-radius: 999px;
}
.cm-station-card.is-active .cm-station-duration {
  background: #6b3e1f; color: #fff;
}
.cm-station-card.is-recent .cm-station-duration {
  background: #f59e0b; color: #fff;
}

.cm-station-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b3e1f;
  flex-shrink: 0;
  animation: cm-pulse 1.5s ease-in-out infinite;
}
@keyframes cm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── Quality card discharge states ───────────────────────── */
.cm-metric-card-link {
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cm-metric-card-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
}

.cm-metric-card.is-active {
  background: #faf5ef;
  border: 1px solid #b08968;
}
.cm-metric-card.is-active:hover {
  box-shadow: 0 4px 12px rgba(107, 62, 31, 0.18);
}
.cm-metric-card.is-active .cm-metric-label { color: #6b3e1f; }
.cm-metric-card.is-active .cm-metric-value { color: #5a3415; }
.cm-metric-card.is-active .cm-metric-sub   { color: #6b3e1f; }

.cm-metric-card.is-recent {
  background: #fffbeb;
  border: 1px solid #fcd34d;
}
.cm-metric-card.is-recent:hover {
  box-shadow: 0 4px 12px rgba(180, 83, 9, 0.18);
}
.cm-metric-card.is-recent .cm-metric-label { color: #92400e; }
.cm-metric-card.is-recent .cm-metric-sub   { color: #92400e; }

/* Updated badges */
.cm-badge-quality-recent { background: #fef3c7; color: #92400e; }
.cm-badge-quality-active { background: #6b3e1f; color: #fff; }

/* Pulse dot for active state in badge */
.cm-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: cm-pulse 1.5s ease-in-out infinite;
}

/* Click affordance hint at the card bottom-right */
.cm-station-link-hint {
  font-size: 10px;
  color: #9ca3af;
}
.cm-metric-card.is-active .cm-station-link-hint { color: #8a5a35; }
.cm-metric-card.is-recent .cm-station-link-hint { color: #b45309; }

/* Adjust the existing context layout to space the badge and hint */
.cm-metric-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Smooth scroll inside the modal so the anchor click 
   glides rather than jumps */
.cm-modal .modal-body {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD STAT TILES — UNIFIED TYPOGRAPHY + STATUS-DRIVEN COLOUR
   Used by event-summary-v2.php dashboard stat cards.
   Coheres with the .cm- modal type system but with its own scale.
   ═══════════════════════════════════════════════════════════════ */

.stat-tile {
	position: relative;
	border-radius: 12px;
	padding: 16px;
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	border: 0.5px solid rgba(0, 0, 0, 0.08);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.stat-card-link:hover .stat-tile {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	border-color: rgba(0, 0, 0, 0.12);
}

.stat-tile-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.stat-tile-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}
.stat-tile-label i {
	font-size: 14px;
	width: 16px;
	text-align: center;
}

.stat-tile-value {
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: #111827;
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.stat-tile-value.stat-tile-value-sm { font-size: 22px; }

.stat-tile-unit {
	font-size: 13px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.55);
	margin-left: 2px;
}

.stat-tile-sub {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: 8px;
	line-height: 1.4;
}

.stat-tile-footer {
	margin-top: auto;
	padding-top: 10px;
	font-size: 10px;
	color: rgba(0, 0, 0, 0.4);
	text-align: right;
}

.stat-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	margin-top: 8px;
}

.water-tile {
	overflow: hidden;
}
 
.water-tile .beach-strip {
	position: absolute;
	background: #fbbf24;
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transform-origin: center center;
}
 
/* ── Horizontal-anchored strips (top + bottom) ───────────────── */
.water-tile .beach-strip.strip--top,
.water-tile .beach-strip.strip--bottom {
	left: 70%;
	width: 200%;
	height: 75px;
}
.water-tile .beach-strip.strip--top    { top: 0; }
.water-tile .beach-strip.strip--bottom { bottom: 0; }
 
/* ── Vertical-anchored strips (left + right) ─────────────────── */
.water-tile .beach-strip.strip--left,
.water-tile .beach-strip.strip--right {
	top: 70%;
	width: 75px;
	height: 200%;
}
.water-tile .beach-strip.strip--left  { left: 0; }
.water-tile .beach-strip.strip--right { right: 0; }
 
.water-tile .stat-tile-content {
	position: relative;
	z-index: 3;
}
 
/* "No data yet" state — toned-down value text for the muted card */
.water-tile.is-unfetched .stat-tile-value {
	color: rgba(255, 255, 255, 0.95);
}
.water-tile.is-unfetched .stat-tile-sub {
	color: rgba(255, 255, 255, 0.80);
}
.water-tile.is-unfetched .stat-tile-sub > div {
	margin-top: 3px;
}
 
/* Pulse animation for the active-discharge badge */
.stat-badge.is-pulsing {
	animation: cm-pulse-soft 1.8s ease-in-out infinite;
}
@keyframes cm-pulse-soft {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.7; }
}

.cm-surf-quality-panel {
	border-radius: 12px;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}
.cm-surf-quality-pumping { background: linear-gradient(135deg, #d1fae5, #a7f3d0); border-color: #6ee7b7; }
.cm-surf-quality-good    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); border-color: #93c5fd; }
.cm-surf-quality-fair    { background: linear-gradient(135deg, #fef9c3, #fef08a); border-color: #fde047; }
.cm-surf-quality-poor    { background: linear-gradient(135deg, #fed7aa, #fdba74); border-color: #fb923c; }
.cm-surf-quality-junk    { background: linear-gradient(135deg, #fecaca, #fca5a5); border-color: #f87171; }

.cm-surf-quality-header { margin-bottom: 14px; }
.cm-surf-quality-label-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.cm-surf-quality-eyebrow {
	font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
	letter-spacing: 0.06em; color: #475569;
}
.cm-surf-quality-score {
	font-size: 0.85rem; font-weight: 600;
	padding: 1px 8px; border-radius: 999px;
	background: rgba(255,255,255,0.7); color: #1e293b;
}
.cm-surf-quality-title { font-size: 1.6rem; font-weight: 700; color: #0f172a; line-height: 1.1; }
.cm-surf-quality-detail { font-size: 0.875rem; color: #334155; margin-top: 4px; }
 
.cm-surf-quality-component-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #475569;
	font-weight: 600;
}
 
.cm-surf-quality-component-badge {
	font-size: 0.75rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	text-wrap: nowrap;
	background: rgba(255,255,255,0.8);
}
 
.cm-surf-quality-component-sentence {
	font-size: 0.85rem;
	color: #334155;
	line-height: 1.35;
}
 
/* Quality colour tokens — keep existing or add if missing */
.cm-quality-good { color: #166534; }
.cm-quality-fair { color: #854d0e; }
.cm-quality-poor { color: #991b1b; }

.stat-tile-surf-quality {
	margin-bottom: 6px;
}
 
.stat-tile-surf-quality-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
 
.stat-tile-surf-quality-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
}
 
.stat-tile-surf-quality-score {
	font-size: 0.8rem;
	font-weight: 600;
	color: #1e293b;
	background: rgba(255,255,255,0.85);
	padding: 1px 8px;
	border-radius: 999px;
}
 
.stat-tile-surf-quality-detail {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.85);
	margin-top: 2px;
}

.cm-quality-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;          /* space between stars block and score */
	font-size: 0.9rem;
	color: #707070;
	line-height: 1;
}
 
.cm-quality-stars-icons {
	display: inline-flex;
	gap: 2px;          /* space between individual stars */
}
 
.cm-quality-stars-value {
	font-size: 0.8rem;
	font-weight: 600;
	color: #475569;
}
 
/* Empty-star colour on light backgrounds */
.cm-quality-stars .fa-regular.fa-star {
	color: #707070;
}
 
/* Dark-gradient context (water card on dashboard) */
.cm-quality-stars.cm-quality-stars-on-dark {
	color: #fffbed;
}
.cm-quality-stars.cm-quality-stars-on-dark .fa-regular.fa-star {
	color: rgba(255,255,255,0.4);
}
.cm-quality-stars.cm-quality-stars-on-dark .cm-quality-stars-value {
	color: rgba(255,255,255,0.85);
}

/* ───── REGISTRATION ───── */
.reg-tile {
	background: linear-gradient(135deg, #f5acce 0%, #6cb1f8 100%);
}
.reg-tile .stat-tile-value { color: #1a1a2e; }

/* ───── ARA — outcome drives colour ───── */
.ara-tile { background: #e9ecef; }
.ara-tile.ara-proceed {
	background: conic-gradient(from 45deg, #198754 0deg, #198754 60deg, #1a9e62 calc(60deg + 0.1deg), #1a9e62 120deg, #1db573 calc(120deg + 0.1deg), #1db573 180deg, #20c980 calc(180deg + 0.1deg), #20c980 240deg, #4dd68f calc(240deg + 0.1deg), #4dd68f 300deg, #7de3a8 calc(300deg + 0.1deg) 360deg);
	color: #fff;
}
.ara-tile.ara-proceed .stat-tile-label,
.ara-tile.ara-proceed .stat-tile-sub,
.ara-tile.ara-proceed .stat-tile-footer { color: rgba(255,255,255,0.85); }
.ara-tile.ara-proceed .stat-tile-value { color: #fff; }

.ara-tile.ara-caution {
	background: conic-gradient(from 45deg, #ffa000 0deg, #ffa000 60deg, #ffad02 calc(60deg + 0.1deg), #ffad02 120deg, #ffbc20 calc(120deg + 0.1deg), #ffbc20 180deg, #ffcb50 calc(180deg + 0.1deg), #ffcb50 240deg, #ffda7f calc(240deg + 0.1deg), #ffda7f 300deg, #ffe99d calc(300deg + 0.1deg) 360deg);
}
.ara-tile.ara-caution .stat-tile-value { color: #4a2900; }

.ara-tile.ara-stop {
	background: conic-gradient(from 45deg, #8b0000 0deg, #8b0000 60deg, #a00010 calc(60deg + 0.1deg), #a00010 120deg, #b8001a calc(120deg + 0.1deg), #b8001a 180deg, #cc0033 calc(180deg + 0.1deg), #cc0033 240deg, #d4254a calc(240deg + 0.1deg), #d4254a 300deg, #dc4060 calc(300deg + 0.1deg) 360deg);
	color: #fff;
}
.ara-tile.ara-stop .stat-tile-label,
.ara-tile.ara-stop .stat-tile-sub,
.ara-tile.ara-stop .stat-tile-footer { color: rgba(255,255,255,0.85); }
.ara-tile.ara-stop .stat-tile-value { color: #fff; }

/* ───── WEATHER — temp + cloud drives gradient ─────
   Combines a temperature class (.wx-cold to .wx-hot)
   with a cloud class (.wx-clear to .wx-cloudy). The
   compound selectors below produce nine palettes. */

/* Base — the colour mixing happens in the compounds */
.wx-tile { background: #94a3b8; }

/* Cold (<8°C) */
.wx-tile.wx-cold.wx-clear  { background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #bfdbfe 100%); }
.wx-tile.wx-cold.wx-partly { background: linear-gradient(135deg, #7da7c5 0%, #a3bdd1 50%, #c8d4dc 100%); }
.wx-tile.wx-cold.wx-cloudy { background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 50%, #94a3b8 100%); }

/* Cool (8-14°C) */
.wx-tile.wx-cool.wx-clear  { background: linear-gradient(135deg, #5eead4 0%, #a7f3d0 50%, #d1fae5 100%); }
.wx-tile.wx-cool.wx-partly { background: linear-gradient(135deg, #7eb8b0 0%, #b8d4cd 50%, #d8e0db 100%); }
.wx-tile.wx-cool.wx-cloudy { background: linear-gradient(135deg, #9aa9a5 0%, #c5cdc9 50%, #9aa9a5 100%); }

/* Mild (14-20°C) */
.wx-tile.wx-mild.wx-clear  { background: linear-gradient(135deg, #84cc16 0%, #fde68a 70%, #f59e0b 100%); }
.wx-tile.wx-mild.wx-partly { background: linear-gradient(135deg, #a3c266 0%, #ddd9a8 60%, #d4a865 100%); }
.wx-tile.wx-mild.wx-cloudy { background: linear-gradient(135deg, #a8b896 0%, #c8c4b0 50%, #a8b896 100%); }

/* Warm (20-26°C) */
.wx-tile.wx-warm.wx-clear  { background: linear-gradient(135deg, #f59e0b 0%, #fcd34d 50%, #fde68a 100%); }
.wx-tile.wx-warm.wx-partly { background: linear-gradient(135deg, #d4a865 0%, #d8c590 50%, #c4b89a 100%); }
.wx-tile.wx-warm.wx-cloudy { background: linear-gradient(135deg, #b5a890 0%, #c8c0a8 50%, #b5a890 100%); }

/* Hot (>26°C) */
.wx-tile.wx-hot.wx-clear   { background: linear-gradient(135deg, #ea580c 0%, #f59e0b 50%, #fde68a 100%); }
.wx-tile.wx-hot.wx-partly  { background: linear-gradient(135deg, #d27e3e 0%, #d8a868 50%, #c4b890 100%); }
.wx-tile.wx-hot.wx-cloudy  { background: linear-gradient(135deg, #b5a08c 0%, #c8b8a0 50%, #b5a08c 100%); }

/* ───── TIDE — preserves existing fill animation ───── */
.tide-tile {
	background: #ecfeff;
}
.tide-tile.is-high .stat-tile-value,
.tide-tile.is-high .stat-tile-sub,
.tide-tile.is-high .stat-tile-label,
.tide-tile.is-high .stat-tile-footer { color: #fff; }
.tide-tile.is-high .stat-tile-unit   { color: rgba(255,255,255,0.75); }

/* ───── WATER — striped gradient set inline by PHP ─────
   The actual gradient is set via inline `style="background: ..."`
   from EventWaterCardStyle::getGradient(). This block handles only
   the overlay scrim and text contrast. */
.water-tile {
	background: #94a3b8;  /* fallback if PHP doesn't set inline */
}
.water-tile .stat-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.0) 0%,
		rgba(0, 0, 0, 0.06) 60%,
		rgba(0, 0, 0, 0.10) 100%
	);
	pointer-events: none;
}

/* All text on water tile is white with subtle shadow */
.water-tile .stat-tile-label,
.water-tile .stat-tile-sub,
.water-tile .stat-tile-footer {
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.water-tile .stat-tile-sub strong { color: #fff; }
.water-tile .stat-tile-value { color: #fff; }

.water-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}
.water-pill {
	background: rgba(255, 255, 255, 0.92);
	color: #111827;
	padding: 6px 11px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ───── RSVP OPTIONS — neutral white, pills carry status ───── */
.rsvp-tile {
	background: #fff;
}
.rsvp-tile #rsvp-view-panel {
	flex: 1;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   END WEATHER & WATER MODALS
   ═══════════════════════════════════════════════════════════════ */


/* Calendar Nav */



/* event bar base */
.event-bar {
	border-radius: .25rem 1rem 1rem .25rem;
	font-size: .85rem;
	pointer-events: auto;
	margin: .5rem 0;
	height: 25px;}
	
	.event-bar {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
		cursor: pointer;}
	
	.event-bar:hover {
		transform: translateY(-1px);
		box-shadow: 0 3px 6px rgba(0,0,0,0.15);}
	
	.event-bar:active {
		transform: translateY(1px);
		box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
.event-logo {
	width: 34px!important;
	height: 34px!important;}
.group-avatar{
	width:20px; height:20px; font-size:0.65rem; line-height:1; font-weight:900;}	


.message-bubble:before{
	content: '';
	position: absolute;
	left: 8px;
	bottom: 6px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: #cccdce;
	border-left: 0;
	margin-top: 13px;
	margin-left: -20px;}

.message-bubble-me{
	background-color: #2394fc !important;
	color: #fff !important;}


.message-bubble-me:before{
	content: '';
	position: absolute;
	right: 8px;
	bottom: 4px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: #3b78c9;
	border-right: 0;
	margin-top: 13px;
	margin-right: -20px;}
.message-bubble-me a{
	color: #fff;}
	
.message-bubble .reaction-count{
	bottom:-22px!important;
	right:4%!important;}

.message-bubble-me .reaction-count{
	bottom:-22px!important;
	left:4%!important;}
.message-bubble-me .btn-outline-secondary:not(:hover):not(:focus){
	border-color: #fff!important;
	color: #fff!important;}

.message-seen {}

.message-not-seen {
	border-color: #c93b70!important;}
	.message-not-seen:before{
	border-right-color: #c93b70;}
	
.offcanvas-notice{
	padding-left: 0%;
	padding-right: 0%;
}	

.auto-saved{
	background-color: rgba(25, 135, 84, 0.75) !important;
	border-color: #198754 !important;
	opacity: 75%;
	color: #fff !important;}
		
/* On/Off Switch		 */
	.onoffswitch {
		position: relative; width: 90px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.onoffswitch-checkbox {
		display: none;}
	.onoffswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid #ccc; border-radius: 5px;}
	.onoffswitch-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.onoffswitch-inner:before, .onoffswitch-inner:after {
		float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.onoffswitch-inner:before {
		content: "ON";
		padding-left: 15px;
		padding-top: 1px;
		background-color: #5CB85C; color: #FFFFFF;}
	.onoffswitch-inner:after {
		content: "OFF";
		padding-right: 10px;
		padding-top: 1px;
		background-color: #F8F8F8; color: #666666;
		text-align: right;}
	.onoffswitch-switch {
		width: 35px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid #ccc; border-radius: 5px;
		position: absolute; top: 0; bottom: 0; right: 55px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
		margin-left: 0;}
	.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
		right: 0px;}

/* Live/Draft Switch		 */
	.livedraftswitch {
		position: relative; width: 110px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.livedraftswitch-checkbox {
		display: none;}
	.livedraftswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid #ccc; border-radius: 5px;}
	.livedraftswitch-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.livedraftswitch-inner:before, .livedraftswitch-inner:after {
		float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.livedraftswitch-inner:before {
		content: "LIVE";
		padding-left: 20px;
		padding-top: 1px;
		background-color: #5CB85C; color: #FFFFFF;}
	.livedraftswitch-inner:after {
		content: "DRAFT";
		padding-right: 10px;
		padding-top: 1px;
		background-color: #F8F8F8; color: #666666;
		text-align: right;}
	.livedraftswitch-switch {
		width: 35px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid #ccc; border-radius: 5px;
		position: absolute; top: 0; bottom: 0; right: 75px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.livedraftswitch-checkbox:checked + .livedraftswitch-label .livedraftswitch-inner {
		margin-left: 0;}
	.livedraftswitch-checkbox:checked + .livedraftswitch-label .livedraftswitch-switch {
		right: 0px;}
		
		
/* Yes/No Switch		 */
	.yesnoswitch {
		position: relative; width: 90px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;}
	.yesnoswitch-checkbox {
		display: none;}
	.yesnoswitch-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid #ccc; border-radius: 5px;}
	.yesnoswitch-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after {
		float: left; width: 50%; height: 36px; padding: 0; line-height: 36px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.yesnoswitch-inner:before {
		content: "YES";
		padding-left: 10px;
		padding-top: 1px;
		background-color: #5CB85C; color: #FFFFFF;}
	.yesnoswitch-inner:after {
		content: "NO";
		padding-right: 15px;
		padding-top: 1px;
		background-color: #F8F8F8; color: #666666;
		text-align: right;}
	.yesnoswitch-switch {
		width: 35px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid #ccc; border-radius: 5px;
		position: absolute; top: 0; bottom: 0; right: 55px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.yesnoswitch-checkbox:checked + .yesnoswitch-label .yesnoswitch-inner {
		margin-left: 0;}
	.yesnoswitch-checkbox:checked + .yesnoswitch-label .yesnoswitch-switch {
		right: 0px;}
	.embed-responsive-scroll{
		position: relative;
		display: block;
		height: 0;
		padding: 0;
		overflow-y: scroll;}
		
	/* Yes/No Circular Switch		 */
	.yesnoswitch-circle {
		position: relative; width: 40px;
		-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
		margin: 0.5rem;}
	.yesnoswitch-circle-checkbox {
		display: none;}
	.yesnoswitch-circle-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 1px solid rgb(0,56,67); border-radius: 20px; height:20px;}
	.yesnoswitch-circle-inner {
		width: 200%; margin-left: -100%;
		-moz-transition: margin 0.15s ease-in 0s; -webkit-transition: margin 0.15s ease-in 0s;
		-o-transition: margin 0.15s ease-in 0s; transition: margin 0.15s ease-in 0s;}
	.yesnoswitch-circle-inner:before, .yesnoswitch-circle-inner:after {
		float: left; width: 50%; height: 28px; padding: 0; line-height: 28px;
		font-size: 16px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.yesnoswitch-circle-inner:before {
		content: "";
		padding-left: 10px;
		padding-top: 1px;
		background-color: rgb(0,56,67); color: #FFFFFF;}
	.yesnoswitch-circle-inner:after {
		content: "";
		padding-right: 15px;
		padding-top: 1px;
		background-color: transparent; color: #fff;
		text-align: right;}
	.yesnoswitch-circle-switch {
		width: 20px; margin: 0px;
		background: #FFFFFF;
		border: 1px solid rgb(0,56,67); border-radius: 20px;
		position: absolute; top: 0; bottom: 0; right: 20px;
		-moz-transition: all 0.15s ease-in 0s; -webkit-transition: all 0.15s ease-in 0s;
		-o-transition: all 0.15s ease-in 0s; transition: all 0.15s ease-in 0s; 
		background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
		background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);}
	.yesnoswitch-circle-checkbox:checked + .yesnoswitch-circle-label .yesnoswitch-circle-inner {
		margin-left: 0;}
	.yesnoswitch-circle-checkbox:checked + .yesnoswitch-circle-label .yesnoswitch-circle-switch {
		right: 0px;}
	
	
	/* Risk Assessment Dashboard */
	
	/* ── Met Office mandatory warning colours — §2.1.2 NSWWS Style Guide ── */
	  .metoffice-yellow { background-color: #FFE923; color: #000; }
	  .metoffice-amber  { background-color: #FF9900; color: #000; }
	  .metoffice-red    { background-color: #CC0033; color: #fff; }
	  .metoffice-yellow-border { border-left: 4px solid #FFE923 !important; background-color: #fffbe6; }
	  .metoffice-amber-border  { border-left: 4px solid #FF9900 !important; background-color: #fff4e0; }
	  .metoffice-red-border    { border-left: 4px solid #CC0033 !important; background-color: #fce8ec; }
	  .metoffice-yellow-text { color: #7a6800; }
	  .metoffice-amber-text  { color: #7a4200; }
	  .metoffice-red-text    { color: #8b0020; }
	
	  /* ── Tide / daylight animated fill ── */
	  .stat-fill {
		position: absolute; bottom: 0; left: 0; right: 0;
		border-radius: 0 0 .375rem .375rem;
		transition: height 1.2s cubic-bezier(.4,0,.2,1);
		z-index: 0;
	  }
	  .stat-fill ~ * { position: relative; z-index: 1; }
	  .stat-fill-tide     { background: #058af0;background: linear-gradient(-44deg, rgba(5, 138, 240, 1) 35%, rgba(153, 238, 255, 1) 100%);}
	  .stat-fill-daylight { background: linear-gradient(to top, rgba(255,193,7,.2),   rgba(255,193,7,.04)); }
	
	  /* ── Stat card clickable state ── */
	  .stat-card-link { text-decoration: none; color: inherit; display: block; height: 100%; }
	  .stat-card-link:hover .card { border-color: #0d6efd; box-shadow: 0 0 0 .15rem rgba(13,110,253,.15); }
	
	  /* ── Tide graph canvases ── */
	  /* Inline card version — compact */
	  #tideCanvas      { width: 100%; height: 120px; display: block; border-radius: .375rem; }
	  /* Modal version — taller now that it has the full modal width to breathe */
	  #tideCanvasModal { width: 100%; height: 240px; display: block; border-radius: .375rem; }
	
	  /* ── Activity dot ── */
	  .activity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: #dee2e6; }
	  .activity-dot.done    { background: #198754; }
	  .activity-dot.current { background: #ffc107; }
	
	  /* ── Leaflet admin map ── */
	  #adminMap { height: 200px; border-radius: .375rem; overflow: hidden; }
	
	  /* ── Kiosk person tap card ── */
	  .kiosk-person {
		cursor: pointer; border: 2px solid transparent;
		transition: border-color .15s, background-color .15s; user-select: none;
	  }
	  .kiosk-person:hover { border-color: #dee2e6; }
	  .kiosk-person.signed-in { border-color: #198754; background-color: #d1e7dd !important; }
	  .kiosk-status { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #dee2e6; }
	  .kiosk-status.st-in { background: #198754; }
	
	  /* ── ARA risk dots ── */
	  .risk-dot {
		display: inline-block; width: 24px; height: 24px; border-radius: 50%;
		border: 2px solid #dee2e6; cursor: pointer; vertical-align: middle;
		margin-right: 3px; transition: background .1s, border-color .1s;
	  }
	  .risk-dot.rd-active-1 { background: #d1e7dd; border-color: #198754; }
	  .risk-dot.rd-active-2 { background: #fff3cd; border-color: #ffc107; }
	  .risk-dot.rd-active-3 { background: #fff3cd; border-color: #fd7e14; }
	  .risk-dot.rd-active-4 { background: #f8d7da; border-color: #dc3545; }
	  .risk-dot.rd-active-5 { background: #f8d7da; border-color: #842029; }
	
	  /* ── ARA outcome buttons ── */
	  .outcome-btn {
		flex: 1; padding: 14px 8px; border-radius: .375rem;
		border: 2px solid #dee2e6; background: transparent;
		font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
	  }
	  .outcome-btn.proceed        { border-color: #198754; color: #0a3622; }
	  .outcome-btn.proceed.active { background: #d1e7dd; }
	  .outcome-btn.caution        { border-color: #fd7e14; color: #6a2d06; }
	  .outcome-btn.caution.active { background: #fff3cd; }
	  .outcome-btn.stop           { border-color: #dc3545; color: #58151c; }
	  .outcome-btn.stop.active    { background: #f8d7da; }
	
	  /* ── Register tab strip ── */
	  .reg-tabs { display: flex; gap: 3px; }
	  .reg-tab {
		flex: 1; padding: 8px 4px; border: 1px solid #dee2e6; border-radius: .375rem;
		background: #fff; text-align: center; font-size: .8125rem; color: #6c757d;
		cursor: pointer; transition: background .15s;
	  }
	  .reg-tab.active { background: #0d6efd; color: #fff; border-color: #0d6efd; font-weight: 600; }
	
	  /* ── Safety ratio ── */
	  .ratio-connector { font-size: .9rem; color: #6c757d; padding: 0 8px; }
	
	  /* ── Activity template selector ── */
	  .activity-template-card {
		border: 2px solid #dee2e6; border-radius: .5rem; padding: 12px 14px;
		cursor: pointer; transition: border-color .15s, background .15s;
		background: #fff;
	  }
	  .activity-template-card:hover { border-color: #0d6efd; background: #f0f6ff; }
	  .activity-template-card.selected { border-color: #0d6efd; background: #e8f0fe; }
	  .activity-template-card .card-name { font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
	  .activity-template-card .card-desc { font-size: .8rem; color: #6c757d; margin-bottom: 6px; }	
	
	
	
	.video-wrapper video {
	  max-width: 100%;
	  max-height: 80vh;
	}
	
	#donut-chart .chart-legend {
		display: none !important;
	}
	
	.refine{
		color:rgb(0,56,67);
		font-size: .8rem;
		text-align: left;
		background: transparent;
		padding: 0.2rem 0 0.2rem 1rem;
		margin-bottom: 0;}
	.refine label{
		margin-top: 0.1rem;}
	
		
	.scrolling{
		font-size: 80%;
		border: 1px #ccc solid;
		padding: 1rem;
		overflow-y: scroll;
		max-height: 200px;
	}
	
	.member-awards{
		line-height: 10px;}
		
/* 	Footer */

	.footer {
		flex-shrink: 0;
		padding: 20px;
		background: #f9f9f9;}
  
	.embed-responsive-16by9-sm-4{
		padding-bottom: 70%;
		border:1px solid #f1f1f1;}
	p.event-title{
		margin-bottom: 0.4rem;}
	.racecartdata{
		font-size: .8rem;
	}	
	.card-stripe{
		background: #f1f1f1;
		color: #5cb85c;
		border-color: #5cb85c;
	}
	.bg-stripe{
		background: #533AFD;
		border-color: #533AFD;
	}
	.basket-divider{
		border-right: 1px solid #b3b3b3;
		display: flex;
		margin-top: 8px;
		margin-bottom: 8px;
	}
		
	.StripeElement {
	  background-color: white;
	  padding: 8px 12px;
	  border-radius: 4px;
	  border: 1px solid #5cb85c;
	  box-shadow: 0 1px 3px 0 #e6ebf1;
	  -webkit-transition: box-shadow 150ms ease;
	  transition: box-shadow 150ms ease;
	  font-size: 3rem;
	  width: 100%;
	}
	
	.StripeElement--focus {
	  box-shadow: 0 1px 3px 0 #cfd7df;
	}
	
	.StripeElement--invalid {
	  border-color: #cb2706;
	  color: #cb2706;
	}
	
	.StripeElement--webkit-autofill {
	  background-color: #e1f5e1 !important;
	}
	.paymentprocessing{
		display: none;
		height: 100%;
		background: rgba(92, 184, 92, 0.9);
		color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 20;
		align-items: center;
		justify-content: center;}
	.paymentprocessing.visible{
		display: flex;}
	
	.btn-sq{
		border-radius: 0;
		border: none;
	} 
	.badge-danger{
		color: #fff;
		background: #d9534f;}
	.bg-cloud-primary{
		background: #E24A3B !important;}
	.bg-events{
	background: #1FA971 !important;}
	.bg-shop{
	background: #2B80FF !important;}
		
	.alert a{
		color: inherit;
		text-decoration: underline;
		font-weight: bold;}
	#cal{
		position: relative;
		display: block;
		text-align: center;}
	
.inline{
	display: inline;
}

input.btn-warning::-webkit-input-placeholder, input.btn-warning::-moz-placeholder, input.btn-warning:-ms-input-placeholder, input.btn-warning:-moz-placeholder{
	color: #fff;
}
.input-group-addon-dark{
	color: #e9ecef;
	background-color: #495057;}

.code{
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
	font-size: 1.2rem;
	line-height: 0.9em;
	margin-top: 0.18rem;
}
.img-circle{
	border-radius: 50%;
	border: 2px solid #fff;}
	
#googlemap{
	padding-bottom: 60%;}
	
.dtpicker-content {
	touch-action: manipulation;}
	
.logo-small{
	width: 40px;}

.table-number-input{width:30%;}

.trim-xs{
	font-size: 0.7rem;}

.input-group-nowrap {
	-ms-flex-wrap: inherit;
	flex-wrap: inherit;}
	
.flex-shrink-1.input-group-text{
	white-space: normal;
}




/* Timeline  */


#cd-timeline {
  position: relative;
  padding: 2em 0;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #f9f9f9;
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block a{
	display: block;
	color: #333;
}
.cd-timeline-block a:hover{
	text-decoration: none;
}

.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}

.cd-timeline-img {
  position: absolute;
  top: 16px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
.cd-timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}
.cd-timeline-img.cd-picture {
  background: #ffc107;
}

.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  background: #ffc107;
  border-radius: 0.25em;
  padding: 1em;
  box-shadow: 0 3px 0 #ffc107;
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h3 {
	margin-top: 0px;
	color: #333;}
.cd-timeline-content h4 {
	color: #D58B71}
	
.cd-timeline-content .cd-date {
  float: left;
  padding: .8em 0;
  opacity: .7;
}
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 100%;
  height: 0;
  width: 0;
  border: 20px solid transparent;
  border-right: 20px solid #ffc107;
}


.role-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
	height: 100%;
}
.role-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
}
.avatar-circle {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 600;
	flex-shrink: 0;
	overflow: hidden;
	border: 3px solid #dee2e6;
}
.avatar-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.modal-avatar-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 600;
	flex-shrink: 0;
	border: 2px solid #dee2e6;
	overflow: hidden;
}
.history-timeline {
	position: relative;
	padding-left: 1.25rem;
}
.history-timeline::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: #dee2e6;
	border-radius: 1px;
}
.timeline-item {
	position: relative;
	padding: 0.4rem 0 0.4rem 1rem;
}
.timeline-item::before {
	content: '';
	position: absolute;
	left: -0.85rem;
	top: 0.85rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #6c757d;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #6c757d;
}
.role-col {
	animation: fadeUp 0.35s ease both;
}

.binbag-icon, .person-icon{
	width: 100%;}

.binbag-icon, .ig-binbag-icon{
	fill: #9DD3A7;}
.person-icon, .ig-person-icon{
	fill: #009d91;}
	
.ig-binbag-icon{
	width: 17px;
	height: 25px;}
.ig-binbag-text{
	color: #9DD3A7;
	font-size: 30px;}

.ig-person-icon{
	width: 8px;
	height: 25px;}
.ig-person-text{
	font-family: "FatFrank Heavy",Helvetica,Arial,sans-serif;
	color: #009d91;
	font-size: 30px;}

.ig-binbags-total{
	position: relative;
	width: 100%;}
	
.ig-totalcount{
	font-family: "FatFrank Heavy",Helvetica,Arial,sans-serif;
	position: absolute;
	color: #fff;
	font-size: 50px;
	text-align: center;
	width: 100%;
	line-height: 1em;
	padding-top: 80%;}
	.ig-totalcount small{
		font-size: 13px;
		line-height: 18px;
		display: block;
		padding: 10% 20% 0 20%;}

ig-volunteers{
	position: relative;
}		


.nav-link .spinner, .nav-item .spinner, .btn .spinner {
	display: none;
}

/* When loading, hide text and show spinner */
.nav-link.loading .btn-text, .nav-item.loading .btn-text, .btn.loading .btn-text {
	display: none;
	opacity: 0;
}
.nav-link.loading .spinner, .nav-item.loading .spinner, .btn.loading .spinner {
	display: inline-block;
}

.group-spacer {
}

#pills-tab.nav-pills .nav-link {
	--bs-nav-pills-link-bg: #e0e0e0;          /* background */
	color: #333!important;
	padding: .8rem;}

/* Change the active pill colour */
#pills-tab.nav-pills .nav-link.active,
#pills-tab.nav-pills .show > .nav-link {
	--bs-nav-pills-link-active-bg: #6c757d;   /* background */
	color: #fff!important;  /* text colour */
}

a.member-item{
	color: #000;
}
a.member-item:hover{
	border-color: #666;
	text-decoration: none;}
a.member-item:active{
	color: #fff;
	background: #666;}

/* BootStrap Extenders */
.start-safari{
	left: 70%!important;}
.start-chrome{
	left: 36%!important;}
.start-android{
	right: 4%!important;}
.end-5{
	right: 4%!important;}

#preview-holder .preview-image{
	max-width: 50%;}

/* DAY VIEW (inside modal) */
	.dayview{
	  display:grid;
	  grid-template-columns: 34px 1fr; /* time labels | track */
	  gap: .75rem;
	}
	
	/* left column: time labels */
	.dayview-times{
	  display:grid;
	  grid-template-rows: repeat(24, var(--hour-h, 56px));
	}
	.dayview-times .time{
	  display:flex;
	  align-items:center;      /* vertical middle */
	  justify-content:flex-end;/* keep it right-aligned */
	  font-size:.75rem;
	  color:rgba(0,0,0,.55);
	  padding-right:.25rem;
	  line-height:1;
	}
	
	/* right side: a single continuous track */
	.dayview-track{
	  position: relative;
	  height: calc((24 * var(--hour-h, 56px)) + (var(--hour-h, 56px) / 2)); /* +30 mins */
	  border-left: 1px solid rgba(0,0,0,.08);
	}
	
	/* hour lines layer */
	.dayview-hours{
	  position:absolute;
	  inset:0;
	  display:grid;
	  grid-template-rows: repeat(24, var(--hour-h, 56px));
	  pointer-events:none;
	  padding-bottom: calc(var(--hour-h, 56px) / 2); /* matches the extra 30 mins */
	  box-sizing: border-box;
	}
	.dayview-hours .hour{
	  position:relative;
	  border-top:0;
	}
	
	.dayview-hours .hour::before{
	  content:"";
	  position:absolute;
	  left:0;
	  right:0;
	  top:50%;
	  border-top:1px solid rgba(0,0,0,.08);
	}
	
	/* events layer */
	.dayview-events{
	  position:absolute;
	  inset:0;
	}
	
	/* event block: minute-accurate positioning */
	.day-event{
	  position:absolute;
	  left: 0;
	  right: 0;
	  top: calc(((var(--start) + 30) * 1px) * var(--px-per-min, 0.9333));
	  height: calc((var(--dur) * 1px) * var(--px-per-min, 0.9333));
	  border-radius: .5rem;
	  padding: .4rem .5rem;
	  overflow:hidden;
	  text-decoration:none;
	  pointer-events:auto;
	  box-shadow: 0 1px 3px rgba(0,0,0,.08);
	}
	
	/* horizontal stacking (lanes) */
	.day-event{
	  width: calc((100% - .5rem) / var(--lanes));
	  left: calc((100% / var(--lanes)) * var(--lane));
	  margin-left: .25rem;
	  margin-right: .25rem;
	}
	
	/* event text */
	.day-event .title{
	  font-weight: 600;
	  font-size: .85rem;
	  white-space: nowrap;
	  overflow:hidden;
	  text-overflow: ellipsis;
	}
	.day-event .meta{
	  font-size: .75rem;
	  opacity: .8;
	}
	
	
	/* set pixels-per-minute based on hour height:
	   if hour height is 56px: 56/60 = 0.9333px per min */
	.dayview{
	  --hour-h: 56px;
	  --px-per-min: 0.9333;
	}
	
	.day-event.continues-out{
	  border-bottom-left-radius: 0;
	  border-bottom-right-radius: 0;
	}
	.day-event.continues-in{
	  border-top-left-radius: 0;
	  border-top-right-radius: 0;
	}
	
	/* optional subtle indicators */
	.day-event.continues-out::after{
	  content:"";
	  position:absolute;
	  left:.5rem; right:.5rem; bottom:.2rem;
	  border-top:1px dashed rgba(255,255,255,.5);
	  opacity:.7;
	}
	.day-event.continues-in::before{
	  content:"";
	  position:absolute;
	  left:.5rem; right:.5rem; top:.2rem;
	  border-top:1px dashed rgba(255,255,255,.5);
	  opacity:.7;
	}
	.dayview-wrap{
	  display:flex;
	  flex-direction:column;
	  gap:.5rem;
	}
	
	/* all-day bar */
	.allday{
	  display:grid;
	  grid-template-columns: 34px 1fr; /* same as dayview */
	  gap:.75rem;
	  align-items:start;
	}
	
	.allday-label{
	  font-size:.75rem;
	  color: rgba(0,0,0,.55);
	  text-align:right;
	  padding-right:.25rem;
	  padding-top:.25rem;
	}
	
	.allday-lane{
	  display:flex;
	  flex-wrap:wrap;     /* if many all-day events, wrap to next line */
	  gap:.5rem;
	  padding:.25rem;
	  border-left: 1px solid rgba(0,0,0,.08);
	}
	
	.allday-event{
	  display:inline-block;
	  padding:.25rem .5rem;
	  border-radius:.5rem;
	  text-decoration:none;
	  font-size:.85rem;
	  white-space:nowrap;
	  max-width:100%;
	  overflow:hidden;
	  text-overflow:ellipsis;
	}

	:root{
		--hour-h: 60px;              /* height per hour row */
		--time-w: 50px;              /* left time column width */
		--day-min: 190px;            /* min width per day (for horizontal scroll) */
		--header-h: 48px;            /* sticky header height */
		--allday-h: 120px;           /* all-day strip height */
		--minute: calc(var(--hour-h) / 60);
	  }
	
	  .weekview-wrapper{
		overflow: hidden;
		border: 1px solid rgba(0,0,0,.06);
	  }
	  
	  /* Make the *entire* week view have one consistent minimum width */
	  .weekview-head,
	  .weekview-allday,
	  .weekview-body{
		min-width: calc(var(--time-w) + (var(--day-min) * 7));
	  }
	
	  /* ==================== HEADERS (sticky) ==================== */
	  .weekview-head{
		display:grid;
		grid-template-columns: var(--time-w) repeat(7, minmax(var(--day-min), 1fr));
		height: var(--header-h);
		position: sticky;
		top: 0;
		z-index: 30;
	  }
	
	  .weekview-corner{
		position: sticky;
		left: 0;
		z-index: 40;
	  }
	
	  .weekview-dayhead{
		display:flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		background:#f8f9fa;
		line-height: 1.05;
		margin: 5px 2.5px 5px 2.5px;
	  }
	
	  /* ==================== ALL-DAY STRIP (sticky under headers) ==================== */
	  .weekview-allday{
		display:grid;
		grid-template-columns: var(--time-w) 1fr;
		height: var(--allday-h);
		position: sticky;
		top: var(--header-h);
		z-index: 25;
	  }
	
	  .weekview-corner--allday{
		display:flex;
		align-items:center;
		justify-content:center;
	  }
	
	  .weekview-corner--allday .label{
		font-size: .7rem;
		color:#6c757d;
		opacity:.9;
	  }
	
	  .weekview-allday-gridwrap{
		position: relative;
		min-width: calc(var(--day-min) * 7);
	  }
	
	  .weekview-allday-grid{
		height: 100%;
		background:
		  repeating-linear-gradient(
			to right,
			rgba(0,0,0,.06) 0,
			rgba(0,0,0,.06) 1px,
			transparent 1px,
			transparent calc(100% / 7)
		  );
	  }
	
	  .weekview-allday-overlay{
		position:absolute;
		inset: 8px 8px 10px 8px;
		display:grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(3, 1fr); /* allow stacking */
		gap: 6px;
		pointer-events:none;
	  }
	
	  .allday-bar{
		pointer-events:auto;
		display:flex;
		align-items:center;
		padding: .35rem .5rem;
		border-radius: 10px;
		text-decoration:none;
		box-shadow: 0 1px 0 rgba(0,0,0,.08);
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		font-size: .78rem;
	  }
	  .allday-bar{ grid-column: var(--col) / span var(--span); grid-row: var(--row); }
	
	  /* ==================== BODY SCROLL AREA ==================== */
	  .weekview-body{
		display:grid;
		grid-template-columns: var(--time-w) 1fr;
		background-color: #fff;
	  }
	
	  /* sticky times col */
	  .weekview-times{
		display:grid;
		grid-template-rows: repeat(24, var(--hour-h));
		background:#fff;
		border-right: 1px solid rgba(0,0,0,.08);
		position: sticky;
		left: 0;
		z-index: 20;
	  }
	
	  /* label aligned to vertical middle of hour */
	  .weekview-times .time{
		font-size: .75rem;
		padding-left: .5rem;
		color:#6c757d;
		opacity:.85;
	  }
	
	  .weekview-gridwrap{
		position: relative;
		min-width: calc(var(--day-min) * 7);
	  }
	
	  /* base grid lines */
	  .weekview-grid{
		height: calc(var(--hour-h) * 24);
		background:
		  /* vertical day dividers */
		  repeating-linear-gradient(
			to right,
			rgba(0,0,0,.06) 0,
			rgba(0,0,0,.06) 1px,
			transparent 1px,
			transparent calc(100% / 7)
		  ),
		  /* hour lines */
		  repeating-linear-gradient(
			to bottom,
			rgba(0,0,0,.08) 0,
			rgba(0,0,0,.08) 1px,
			transparent 1px,
			transparent var(--hour-h)
		  );
	  }
	
	  /* overlay grid (minutes) */
	  .weekview-overlay{
		position:absolute;
		inset: 0;
		display:grid;
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(1440, var(--minute));
		pointer-events:none; /* allow scroll */
	  }
	
	  .week-event{
		pointer-events:auto;
		border-radius: 10px;
		padding: .4rem .5rem;
		overflow:hidden;
		text-decoration:none;
		box-shadow: 0 1px 0 rgba(0,0,0,.08);
		font-size: .75rem;
		line-height: 1.15;
		display:block;
		margin: 3px;
		position: relative;
		box-sizing: border-box;
		--lanes: 1;
		--lane: 0;
		--lane-gap: 0px;
		width: calc((100% - (var(--lane-gap) * (var(--lanes) - 1))) / var(--lanes));
		left: calc((100% / var(--lanes)) * var(--lane));
		margin-left: calc(var(--lane-gap) * var(--lane));
		grid-column: var(--day);
		grid-row: calc(var(--start) + 1) / span var(--dur);
	  }
	
	  .week-event .title{
		font-weight:700;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	  }
	
	  .week-event .meta{
		opacity:.75;
		margin-top:.15rem;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	  }

	  @keyframes ping {
		  0% { transform: scale(1); opacity: 0.5; }
		  100% { transform: scale(1.8); opacity: 0; }
	  }
	  
	  @keyframes fadeUp {
		  from { opacity: 0; transform: translateY(12px); }
		  to   { opacity: 1; transform: translateY(0); }
	  }


@media (max-width: 450px) {
	.table-sm{
		font-size: 0.7rem;
	}
}

@media (max-width:500px) {
	.role-card .ratio-16x9 {
		--bs-aspect-ratio: 90%; 
	}
}

@media (max-width: 575px) {

	#month-event-overlay-mobile {
		position: relative;
		padding-left: 4px !important;
	}

	.mobile-day-header {
		display: grid;
		grid-template-columns: 62px 1fr;
		gap: 0 10px;
		margin-bottom: 20px;
		align-items: start;
		position: relative;
	}

	/* Vertical line */
	.mobile-day-header::before {
		content: '';
		position: absolute;
		left: 57px;
		top: 0;
		bottom: -20px;
		width: 1px;
		background-color: #dee2e6;
		z-index: 0;
	}

	/* Dot */
	.mobile-day-header::after {
		content: '';
		position: absolute;
		left: 52px;
		top: 17px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #dee2e6;
		border: 2px solid white;
		z-index: 1;
	}

	.mobile-day-header.today::after {
		background-color: #0d6efd;
	}

	.mobile-day-header:last-child::before {
		bottom: 0;
	}

	.mobile-day-header > p {
		grid-column: 1;
		margin: 0;
		padding-top: 10px;
		padding-right: 14px;
		text-align: center;
		border: none !important;
		opacity: 1;
	}

	.mobile-day-header > p .badge {
		position: static !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: transparent !important;
		color: #888 !important;
		font-weight: 300;
		font-size: 0.6rem;
		line-height: 1.2;
		padding: 0;
		white-space: nowrap;
		width: 100%;
	}

	.mobile-day-header > .event-bar {
		grid-column: 2;
		margin-bottom: 3px;
		height: 28px;
	}
}

@media (min-width: 576px) {
	html{font-size: 13px;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after, .livedraftswitch-inner:before, .livedraftswitch-inner:after, .onoffswitch-inner:before, .onoffswitch-inner:after {
	height: 29px; line-height: 29px;}
	#preview-holder .preview-image{
	max-width: 25%;}
	
	/* Events Calendar */
	
	.calendar-wrapper {
		background: #e6e9eb;
		position: relative;
	}
	
	/* day grid – base (mobile = 1 column) */
	.month-grid {
		display: grid;
		grid-template-columns: 1fr;          /* one long column on mobile */
		grid-auto-rows: 150px;               /* each “slot” 150px high */
		gap: 2px;
		font-weight: 600;
	}
	
	.day-header {
		background: #f8f9fa;
		text-align: center;
		font-weight: 600;
		padding: .5rem;
		border: 1px solid #e6e9eb;
	}
	
	.month-grid,
	.month-grid .day-cell {
		border: 1px solid #e6e9eb;
		min-height: 150px;
		padding: .5rem;
	}
	
	.day-cell {
		background: #fff;
	}
	
	.day-number {
		font-weight: 700;
	}
	
	.day-blank {
		background: #f1f1f1 !important;
	}
	
	/* overlay base */
	.event-overlay {
		position: absolute;
		inset: 0;
		display: grid;
		gap: 2px;
		pointer-events: none;
		padding: 0.5rem;
	}
	
	/* spans (desktop) */
	.col-span-2 { grid-column-end: span 2 !important; }
	.col-span-3 { grid-column-end: span 3 !important; }
	.col-span-4 { grid-column-end: span 4 !important; }
	.col-span-5 { grid-column-end: span 5 !important; }
	.col-span-6 { grid-column-end: span 6 !important; }
	.col-span-7 { grid-column-end: span 7 !important; }
	
	.month-grid {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 38px repeat(5, 150px); /* header + 5 weeks */
	}
	
	.event-overlay {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: 42px repeat(5, 150px);
	}
	
	/* Week 1 (grid-row: 2 because row 1 is the weekday header) */
	.w1-d1-start { grid-column: 1; grid-row: 2; }
	.w1-d2-start { grid-column: 2; grid-row: 2; }
	.w1-d3-start { grid-column: 3; grid-row: 2; }
	.w1-d4-start { grid-column: 4; grid-row: 2; }
	.w1-d5-start { grid-column: 5; grid-row: 2; }
	.w1-d6-start { grid-column: 6; grid-row: 2; }
	.w1-d7-start { grid-column: 7; grid-row: 2; }
	
	/* Week 2 (row 3), etc. */
	.w2-d1-start { grid-column: 1; grid-row: 3; }
	.w2-d2-start { grid-column: 2; grid-row: 3; }
	.w2-d3-start { grid-column: 3; grid-row: 3; }
	.w2-d4-start { grid-column: 4; grid-row: 3; }
	.w2-d5-start { grid-column: 5; grid-row: 3; }
	.w2-d6-start { grid-column: 6; grid-row: 3; }
	.w2-d7-start { grid-column: 7; grid-row: 3; }
	
	/* Week 3 (row 3), etc. */
	.w3-d1-start { grid-column: 1; grid-row: 4; }
	.w3-d2-start { grid-column: 2; grid-row: 4; }
	.w3-d3-start { grid-column: 3; grid-row: 4; }
	.w3-d4-start { grid-column: 4; grid-row: 4; }
	.w3-d5-start { grid-column: 5; grid-row: 4; }
	.w3-d6-start { grid-column: 6; grid-row: 4; }
	.w3-d7-start { grid-column: 7; grid-row: 4; }
	
	/* Week 4 (row 3), etc. */
	.w4-d1-start { grid-column: 1; grid-row: 5; }
	.w4-d2-start { grid-column: 2; grid-row: 5; }
	.w4-d3-start { grid-column: 3; grid-row: 5; }
	.w4-d4-start { grid-column: 4; grid-row: 5; }
	.w4-d5-start { grid-column: 5; grid-row: 5; }
	.w4-d6-start { grid-column: 6; grid-row: 5; }
	.w4-d7-start { grid-column: 7; grid-row: 5; }

	/* ... */
	.w5-d1-start { grid-column: 1; grid-row: 6; }
	.w5-d2-start { grid-column: 2; grid-row: 6; }
	.w5-d3-start { grid-column: 3; grid-row: 6; }
	.w5-d4-start { grid-column: 4; grid-row: 6; }
	.w5-d5-start { grid-column: 5; grid-row: 6; }
	.w5-d6-start { grid-column: 6; grid-row: 6; }
	.w5-d7-start { grid-column: 7; grid-row: 6; }

	/* ... */
	.w6-d1-start { grid-column: 1; grid-row: 7; }
	.w6-d2-start { grid-column: 2; grid-row: 7; }
	.w6-d3-start { grid-column: 3; grid-row: 7; }
	.w6-d4-start { grid-column: 4; grid-row: 7; }
	.w6-d5-start { grid-column: 5; grid-row: 7; }
	.w6-d6-start { grid-column: 6; grid-row: 7; }
	.w6-d7-start { grid-column: 7; grid-row: 7; }
	
	
	.event-bar {
		margin: .1rem .5rem;
		margin-top: calc(var(--ev-i, 0) * 1.65rem);
		height: 21px;
		z-index: 2;}
	.event-details{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.event-logo {
	width: 14px!important;
	height: 14px!important;}
	
	.group-avatar{
	width:15px; height:15px; font-size:0.55rem;}
}

@media (max-width:767px) {
	.weekview-xscroll{
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	  }
}

@media (min-width: 768px) {
	html{font-size: 14px;}
	.table-responsive{
		display: table;}
	.container-lg{
		padding-left: 30px;
		padding-right: 30px;}
	.table-number-input{width:inherit;}
  #cd-timeline::before {
	left: 50%;
	margin-left: -2px;}
	.fullwidth-hero{height: 400px;}

  .cd-timeline-img {
	top:30px;
	width: 30px;
	height: 30px;
	left: 50%;
	margin-left: -15px;
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
  }


  .cd-timeline-content {
	margin-left: 0;
	padding: 1.6em;
	width: 45%;
  }
  .cd-timeline-content::before {
	top: 24px;
	left: 100%;
	border-color: transparent;
	border-left-color: #ffc107;
  }
  .cd-timeline-content .cd-read-more {
	float: left;
  }
  .cd-timeline-content .cd-date {
	position: absolute;
	width: 100%;
	left: 122%;
	top: 22px;
	font-size: 16px;
	font-weight: bold;
	color: #aaa;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
	float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
	top: 24px;
	left: auto;
	right: 100%;
	border-color: transparent;
	border-right-color: #ffc107;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
	float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
	left: auto;
	right: 122%;
	text-align: right;
  }
  .yesnoswitch-inner:before, .yesnoswitch-inner:after, .livedraftswitch-inner:before, .livedraftswitch-inner:after, .onoffswitch-inner:before, .onoffswitch-inner:after {
	height: 32px; line-height: 32px;}
	
	.offcanvas-notice{
		padding-left: 12%;
		padding-right: 12%;
	}
	
	:root{ --day-min: 1px; }
	.weekview-allday-gridwrap,
	.weekview-gridwrap{ min-width: 0; }
	
}


@media (min-width: 992px) {
	html{font-size: 15px;}
	.btn-sq{
		padding-top: 2rem;
		padding-bottom: 2rem;}
	.jumbotron-start-line .logo{
		max-width: 18rem;}
	.fullwidth-hero{height: 500px;}
	.yesnoswitch-inner:before, .yesnoswitch-inner:after, .livedraftswitch-inner:before, .livedraftswitch-inner:after, .onoffswitch-inner:before, .onoffswitch-inner:after {
	height: 34px; line-height: 34px;}
	
	#nav-wrap{
		flex-wrap: wrap;}
	.offcanvas-notice{
		padding-left: 25%;
		padding-right: 25%;
	}
}

@media (max-width: 1400px) {
	#primary-nav, #secondary-nav {
		transition: opacity 0.2s ease-in-out;
	}
	#primary-nav.sticky-top, #secondary-nav.sticky-top {
		opacity: 1;
	}
	#primary-nav.nav-hidden, #secondary-nav.nav-hidden {
		opacity: 0;
	}
}

@media (min-width: 1400px) {
	html{font-size: 15px;}
	.fullwidth-hero{height: 550px;}
	#main-content, .main-footer{
		margin-right:19%;}
	#main-content #chat-edit{
			margin-right:19%;}
	#navigationFullMenu{
		position: fixed;
		right:0!important;
		top:0!important;
		height: 100vh;
		width:19vw;
		border-left:0;}
}

@media (min-width: 1705px) {
	#main-content, .main-footer{
		margin-right:15%;}
	#main-content #chat-edit{
			margin-right:15%;}
	#navigationFullMenu{
		position: fixed;
		right:0!important;
		top:0!important;
		height: 100vh;
		width:15vw;
		border-left:0;}
}