#video-container {
	align-items: flex-start;
	--traffic-camera-aspect-ratio: 489 / 279;
}

body.traffic-live-no-camera #map {
	height: calc(100% - 60px) !important;
	min-height: calc(100% - 60px) !important;
}

body.traffic-live-no-camera #contents {
	display: none !important;
	height: 0 !important;
	overflow: hidden !important;
}

body.traffic-live-no-camera #mapResizeDivider {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
}

.video-card {
	aspect-ratio: var(--traffic-camera-aspect-ratio);
	overflow: hidden;
	position: relative;
	background: #000 !important;
	cursor: grab;
	min-height: 0;
}

.video-card.is-dragging {
	cursor: grabbing;
	opacity: 0.55;
	outline: 2px solid #8fb8d8;
	outline-offset: -2px;
}

.video-card button,
.video-card input,
.video-card select,
.video-card textarea,
.video-card a {
	cursor: auto;
}

.video-card video,
.video-card img.image-stream,
.video-card img.traffic-video-fallback,
.video-card iframe.custom-camera-frame {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 0;
	aspect-ratio: var(--traffic-camera-aspect-ratio);
	object-fit: contain;
	background: #000;
	border: 0;
}

.video-card video {
	max-height: 70vh;
}

@media (max-width: 1024px) {
	#video-container .video-card {
		flex: 0 0 50%;
		width: 50% !important;
	}
}

@media (max-width: 700px) {
  :root {
    --traffic-map-height: 100dvh;
    --traffic-divider-height: 0px;
    --traffic-mobile-camera-height: 34dvh;
  }

body.traffic-mobile-phone .traffic-mobile-desktop-controls,
body.traffic-mobile-phone #mapResizeDivider,
body.traffic-mobile-phone #widthSlider,
body.traffic-mobile-phone #mapButton,
body.traffic-mobile-phone #clearAllButton,
body.traffic-mobile-phone #playAllButton,
body.traffic-mobile-phone .traffic-fire-hide-map {
display: none !important;
}

  body.traffic-mobile-phone #contents {
    height: 0 !important;
    overflow: hidden !important;
  }

  body.traffic-mobile-phone.traffic-mobile-has-camera #contents {
    height: var(--traffic-mobile-camera-height) !important;
    overflow: hidden !important;
  }

  body.traffic-mobile-phone #map {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  body.traffic-mobile-phone.traffic-mobile-has-camera #map {
    height: calc(100dvh - var(--traffic-mobile-camera-height)) !important;
    min-height: calc(100dvh - var(--traffic-mobile-camera-height)) !important;
  }

  body.traffic-mobile-phone #video-container {
    flex-wrap: nowrap !important;
    gap: 0;
    height: 100%;
    margin: 0;
    padding: 0 !important;
  }

  body.traffic-mobile-phone #video-container .video-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    height: 100%;
    width: 100% !important;
  }

body.traffic-mobile-phone .video-card .stream-header {
display: flex !important;
flex: 0 0 38px;
min-height: 38px;
position: static !important;
z-index: 2;
}

body.traffic-mobile-phone .video-card .stream-header > div:last-child {
align-items: center;
display: inline-flex;
flex: 0 0 auto;
gap: 4px;
min-width: 0;
}

body.traffic-mobile-phone .traffic-record-button,
body.traffic-mobile-phone .traffic-locate-button {
font-size: 11px;
height: 28px;
margin: 0;
min-width: 38px;
padding: 0 7px;
}

body.traffic-mobile-phone .traffic-record-status {
color: #fff;
display: inline-flex;
font-size: 11px;
font-weight: 800;
line-height: 1;
margin: 0;
max-width: 68px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

  body.traffic-mobile-phone .video-card video,
  body.traffic-mobile-phone .video-card img.image-stream,
  body.traffic-mobile-phone .video-card img.traffic-video-fallback,
  body.traffic-mobile-phone .video-card iframe.custom-camera-frame {
    flex: 1 1 auto;
    height: calc(var(--traffic-mobile-camera-height) - 38px);
    max-height: none;
    min-height: 0;
    object-fit: contain;
  }

  #contents {
    -webkit-overflow-scrolling: touch;
  }

	#video-container {
		gap: 8px;
		padding: 0 8px 8px !important;
	}

	#video-container .video-card {
		flex: 0 0 100%;
		margin-bottom: 0 !important;
		width: 100% !important;
	}

	body.traffic-mobile-phone #video-container .video-card.traffic-mobile-carousel-hidden {
		display: none !important;
	}

	body.traffic-mobile-phone .traffic-mobile-camera-carousel-controls {
		align-items: center;
		background: rgba(0, 0, 0, 0.86);
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		display: flex;
		flex: 0 0 44px;
		gap: 10px;
		height: 44px;
		justify-content: space-between;
		padding: 6px 8px;
		position: static;
		width: 100%;
		z-index: 120;
	}

	body.traffic-mobile-phone .traffic-mobile-camera-carousel-button {
		background: #175f9c;
		border: 1px solid rgba(255, 255, 255, 0.45);
		border-radius: 4px;
		color: #fff;
		font-size: 13px;
		font-weight: 800;
		height: 32px;
		letter-spacing: 0;
		line-height: 1;
		min-width: 88px;
		padding: 0 12px;
	}

	body.traffic-mobile-phone .traffic-mobile-camera-carousel-button:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	body.traffic-mobile-phone .traffic-mobile-camera-carousel-status {
		color: #fff;
		flex: 1 1 auto;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
	}

	body.traffic-mobile-phone.traffic-mobile-camera-carousel .video-card video,
	body.traffic-mobile-phone.traffic-mobile-camera-carousel .video-card img.image-stream,
	body.traffic-mobile-phone.traffic-mobile-camera-carousel .video-card img.traffic-video-fallback,
	body.traffic-mobile-phone.traffic-mobile-camera-carousel .video-card iframe.custom-camera-frame {
		height: calc(var(--traffic-mobile-camera-height) - 82px);
	}

	.video-card video {
		max-height: none;
	}
}

.video-card .stream-header > div:last-child {
	align-items: center;
	display: flex;
	gap: 6px;
}

.traffic-record-button {
	align-items: center;
	background: #c1121f;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 11px;
	font-weight: 800;
	height: 24px;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-width: 40px;
	padding: 0 8px;
}

.traffic-locate-button {
	align-items: center;
	background: #135f75;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 11px;
	font-weight: 800;
	height: 24px;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	min-width: 40px;
	padding: 0 8px;
}

.traffic-record-button:hover,
.traffic-record-button:focus-visible,
.traffic-locate-button:hover,
.traffic-locate-button:focus-visible {
	background: #e01e37;
	outline: 2px solid rgba(255, 255, 255, 0.75);
	outline-offset: 1px;
}

.traffic-locate-button:hover,
.traffic-locate-button:focus-visible {
	background: #17819d;
}

.traffic-record-button.is-recording {
	background: #e00000;
	box-shadow: 0 0 0 2px rgba(224, 0, 0, 0.25);
}

.traffic-locate-button.is-unavailable,
.traffic-locate-button:disabled {
	background: #4b5563;
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.68);
	cursor: not-allowed;
}

.traffic-record-status {
	color: #fff;
	display: inline-block;
	font-size: 12px;
	line-height: 24px;
	max-width: 92px;
	min-width: 34px;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.traffic-fire-controls {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: auto;
	position: relative;
	z-index: 1200;
}

.traffic-fire-status {
	background: rgba(20, 24, 31, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	padding: 6px 8px;
	text-decoration: none;
}

.traffic-fire-status {
	order: 2;
}

.traffic-fire-status:hover,
.traffic-fire-status:focus-visible {
	background: rgba(35, 42, 52, 0.96);
	color: #fff;
	outline: 2px solid rgba(255, 255, 255, 0.45);
	outline-offset: 2px;
	text-decoration: none;
}

.traffic-fire-status.live {
	border-color: rgba(199, 51, 47, 0.8);
}

.traffic-fire-status.loading {
	opacity: 0.78;
}

.traffic-fire-status.error {
	background: rgba(85, 25, 28, 0.95);
	border-color: rgba(255, 160, 160, 0.9);
}

.traffic-fire-status {
	align-items: center;
	display: flex;
	gap: 6px;
	pointer-events: auto;
	position: relative;
	z-index: 1200;
}

#map .leaflet-top.leaflet-right {
	z-index: 1200;
}

#map .leaflet-top.leaflet-right .leaflet-control {
	pointer-events: auto;
}

.traffic-fire-status-link {
	color: inherit;
	text-decoration: none;
}

.traffic-fire-status-link:hover,
.traffic-fire-status-link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.traffic-fire-hide-map {
	background: #f5f7fa;
	border: 1px solid rgba(23, 37, 54, 0.28);
	border-radius: 4px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	color: #172536;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 6px;
	pointer-events: auto;
	position: relative;
	order: 1;
	z-index: 1;
	white-space: nowrap;
}

.traffic-fire-hide-map:hover,
.traffic-fire-hide-map:focus-visible {
	background: #ffffff;
	border-color: rgba(16, 82, 82, 0.55);
	color: #0b5f5f;
	outline: none;
}

.traffic-fire-popup {
	color: #17202a;
	font-size: 13px;
	min-width: 220px;
}

.traffic-fire-popup h3 {
	font-size: 15px;
	line-height: 1.25;
	margin: 0 0 8px;
}

.traffic-fire-popup dl {
	display: grid;
	gap: 4px 10px;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0 0 10px;
}

.traffic-fire-popup dt {
	color: #4c5968;
	font-weight: 700;
	margin: 0;
}

.traffic-fire-popup dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.traffic-fire-popup a {
	color: #0b5cad;
	font-weight: 700;
}

.traffic-popup-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 10px;
}

.traffic-popup-actions a,
.traffic-nearby-camera-link {
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
}

.traffic-popup-actions a {
	margin-top: 0;
}

.traffic-nearby-camera-link {
	appearance: none;
	background: transparent;
	border: 0;
	color: #0b5cad;
	cursor: pointer;
	font-family: inherit;
	padding: 0;
	text-align: left;
	text-decoration: none;
}

.traffic-nearby-camera-link:hover,
.traffic-nearby-camera-link:focus-visible {
	text-decoration: underline;
}

.traffic-nearby-camera-link[hidden],
.traffic-popup-nearby-camera-only:not(.has-nearby-camera) {
	display: none !important;
}

.traffic-fire-details-link {
	appearance: none;
	background: #0b5f5f;
	border: 0;
	border-radius: 5px;
	color: #ffffff;
	cursor: pointer;
	display: block;
	font: inherit;
	font-weight: 800;
	margin: 0 0 8px;
	padding: 7px 9px;
	text-align: center;
	width: 100%;
}

.traffic-fire-details-link:hover,
.traffic-fire-details-link:focus-visible {
	background: #087575;
	outline: 2px solid rgba(11, 95, 95, 0.28);
	outline-offset: 2px;
}

.traffic-fire-active {
	color: #c7332f;
	font-weight: 800;
}

.traffic-fire-recent {
	color: #7a3f00;
	font-weight: 800;
}

.traffic-fire-code {
	background: #f2f4f7;
	border-radius: 3px;
	color: #4c5968;
	font-size: 11px;
	font-weight: 800;
	padding: 1px 4px;
}

.traffic-fire-warning-marker {
	align-items: center;
	display: flex;
	height: 24px;
	justify-content: center;
	pointer-events: auto;
	width: 24px;
}

.traffic-fire-warning-glyph {
	display: block;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 18px;
	line-height: 1;
	text-shadow:
		0 0 0 #c7332f,
		0 1px 2px rgba(0, 0, 0, 0.7),
		0 0 6px rgba(199, 51, 47, 0.9);
	transform: translateY(-1px);
}

.traffic-fire-warning-marker:hover .traffic-fire-warning-glyph {
	filter: brightness(1.08);
	transform: translateY(-1px) scale(1.08);
}

.traffic-fire-recent-marker {
	align-items: center;
	display: flex;
	height: 24px;
	justify-content: center;
	pointer-events: auto;
	width: 24px;
}

.traffic-fire-recent-glyph {
	background: #ffffff;
	border: 3px solid #c7332f;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(255, 255, 255, 0.86);
	display: block;
	height: 16px;
	width: 16px;
}

.traffic-fire-recent-marker:hover .traffic-fire-recent-glyph {
	transform: scale(1.08);
}

.traffic-fire-detail-modal[hidden] {
	display: none;
}

.traffic-fire-detail-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 18px;
	position: fixed;
	z-index: 4000;
}

.traffic-fire-detail-backdrop {
	background: rgba(7, 12, 16, 0.68);
	inset: 0;
	position: absolute;
}

.traffic-fire-detail-panel {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
	color: #17202a;
	max-height: min(78vh, 760px);
	max-width: min(720px, calc(100vw - 28px));
	overflow: auto;
	position: relative;
	width: 100%;
}

.traffic-fire-detail-header {
	align-items: center;
	background: #f5f8fa;
	border-bottom: 1px solid #dfe7ec;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 14px 16px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.traffic-fire-detail-title {
	font-size: 18px;
	line-height: 1.2;
	margin: 0;
}

.traffic-fire-detail-close {
	background: #17242c;
	border: 0;
	border-radius: 5px;
	color: #ffffff;
	cursor: pointer;
	font-weight: 800;
	padding: 7px 10px;
}

.traffic-fire-detail-close:hover,
.traffic-fire-detail-close:focus-visible {
	background: #0b5f5f;
	outline: 2px solid rgba(11, 95, 95, 0.24);
	outline-offset: 2px;
}

.traffic-fire-detail-content {
	padding: 16px;
}

.traffic-fire-detail-section {
	margin: 0 0 16px;
}

.traffic-fire-detail-section:last-child {
	margin-bottom: 0;
}

.traffic-fire-detail-section h3 {
	font-size: 15px;
	margin: 0 0 8px;
}

.traffic-fire-detail-section.nested {
	border-left: 3px solid #dfe7ec;
	margin: 12px 0 6px 14px;
	padding-left: 12px;
}

.traffic-fire-detail-list {
	display: grid;
	gap: 6px;
	margin: 0;
}

.traffic-fire-detail-row {
	border-bottom: 1px solid #eef3f5;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr);
	padding: 6px 0;
}

.traffic-fire-detail-row dt {
	color: #5a6570;
	font-weight: 800;
	margin: 0;
}

.traffic-fire-detail-row dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.leaflet-tooltip.camera-hover-tooltip {
	background: rgba(18, 24, 31, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	color: #f5f7fa;
	overflow: hidden;
	padding: 0;
}

.leaflet-tooltip-top.camera-hover-tooltip::before {
	border-top-color: rgba(18, 24, 31, 0.96);
}

.camera-hover-tooltip-content {
	max-width: 220px;
}

.camera-hover-tooltip-list {
	display: grid;
	gap: 6px;
	max-width: 240px;
}

.camera-hover-tooltip-name-list {
	display: grid;
	gap: 4px;
	max-width: 280px;
	min-width: 220px;
	padding: 8px 10px;
}

.camera-hover-tooltip-name-row {
	color: #f5f7fa;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.28;
	overflow-wrap: anywhere;
	white-space: normal;
}

.camera-hover-tooltip-item {
	background: rgba(5, 7, 10, 0.9);
	border-radius: 4px;
	overflow: hidden;
}

.camera-hover-tooltip-item-text {
	padding-top: 2px;
}

.camera-hover-tooltip-list .camera-hover-tooltip-image {
	height: 112px;
	width: 240px;
}

.camera-hover-tooltip-image {
	background: #05070a;
	display: none;
	height: 124px;
	object-fit: cover;
	width: 220px;
}

.camera-hover-tooltip-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	padding: 7px 9px;
	white-space: normal;
}

@media (hover: hover) and (pointer: fine) {
	.camera-hover-tooltip-image {
		display: block;
	}
}

.traffic-police-controls {
	display: grid;
	gap: 6px;
	pointer-events: auto;
}

.traffic-police-status {
	align-items: center;
	background: rgba(21, 29, 45, 0.9);
	border: 1px solid rgba(81, 129, 226, 0.58);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: #fff;
	display: inline-flex;
	font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 30px;
	overflow: hidden;
	white-space: nowrap;
}

.traffic-police-status-link {
	color: inherit;
	padding: 8px 10px;
	text-decoration: none;
}

.traffic-police-status:hover,
.traffic-police-status:focus-within {
	background: rgba(20, 38, 72, 0.95);
	border-color: rgba(107, 151, 235, 0.86);
}

.traffic-police-status.loading {
	opacity: 0.78;
}

.traffic-police-status.error {
	background: rgba(60, 31, 37, 0.96);
	border-color: rgba(245, 101, 101, 0.86);
}

.traffic-police-call-marker {
	align-items: center;
	display: flex;
	height: 24px;
	justify-content: center;
	pointer-events: auto;
	width: 24px;
}

.traffic-police-call-glyph {
	display: block;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 16px;
	line-height: 1;
	transform: translateY(-1px);
}

.traffic-police-call-marker:hover .traffic-police-call-glyph {
	filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
	transform: translateY(-1px) scale(1.08);
}

.traffic-police-popup {
	color: #1d2530;
	min-width: 210px;
}

.traffic-police-popup h3 {
	font-size: 15px;
	line-height: 1.2;
	margin: 0 0 8px;
}

.traffic-police-popup dl {
	display: grid;
	gap: 6px 10px;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0;
}

.traffic-police-popup dt {
	color: #5d6875;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.traffic-police-popup dd {
	font-weight: 700;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.traffic-police-map-link {
	color: #245fd6;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	margin-top: 10px;
	text-decoration: none;
}

.traffic-police-popup .traffic-nearby-camera-link {
	color: #245fd6;
}

.traffic-scl-outage-controls {
	display: grid;
	gap: 6px;
	pointer-events: auto;
}

.traffic-scl-outage-status {
	align-items: center;
	background: rgba(53, 30, 22, 0.92);
	border: 1px solid rgba(249, 115, 22, 0.72);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: #fff;
	display: inline-flex;
	font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 30px;
	overflow: hidden;
	white-space: nowrap;
}

.traffic-scl-outage-status-link {
	color: inherit;
	padding: 8px 10px;
	text-decoration: none;
}

.traffic-scl-outage-status:hover,
.traffic-scl-outage-status:focus-within {
	background: rgba(72, 37, 20, 0.96);
	border-color: rgba(251, 146, 60, 0.92);
}

.traffic-scl-outage-status.loading {
	opacity: 0.78;
}

.traffic-scl-outage-status.error {
	background: rgba(60, 31, 37, 0.96);
	border-color: rgba(245, 101, 101, 0.86);
}

.traffic-scl-outage-polygon {
	mix-blend-mode: multiply;
}

.traffic-scl-outage-popup {
	color: #1d2530;
	min-width: 220px;
}

.traffic-scl-outage-popup h3 {
	font-size: 15px;
	line-height: 1.2;
	margin: 0 0 8px;
}

.traffic-scl-outage-popup dl {
	display: grid;
	gap: 6px 10px;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0;
}

.traffic-scl-outage-popup dt {
	color: #5d6875;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.traffic-scl-outage-popup dd {
	font-weight: 700;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.traffic-scl-outage-map-link {
	color: #b45309;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	margin-top: 10px;
	text-decoration: none;
}

.traffic-pse-outage-controls {
	display: grid;
	gap: 6px;
	pointer-events: auto;
}

.traffic-pse-outage-status {
	align-items: center;
	background: rgba(12, 74, 110, 0.94);
	border: 1px solid rgba(56, 189, 248, 0.78);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: #fff;
	display: inline-flex;
	font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 30px;
	overflow: hidden;
	white-space: nowrap;
}

.traffic-pse-outage-status-link {
	color: inherit;
	padding: 8px 10px;
	text-decoration: none;
}

.traffic-pse-outage-status:hover,
.traffic-pse-outage-status:focus-within {
	background: rgba(7, 89, 133, 0.98);
	border-color: rgba(125, 211, 252, 0.96);
}

.traffic-pse-outage-status.loading {
	opacity: 0.78;
}

.traffic-pse-outage-status.error {
	background: rgba(60, 31, 37, 0.96);
	border-color: rgba(245, 101, 101, 0.86);
}

.traffic-pse-outage-polygon {
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.72));
	mix-blend-mode: normal;
}

.traffic-pse-outage-marker {
	background: transparent;
	border: 0;
	pointer-events: auto;
}

.traffic-pse-outage-marker-glyph {
	align-items: center;
	background: #0369a1;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.72);
	color: #fff;
	display: inline-flex;
	font: 900 15px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	height: 22px;
	justify-content: center;
	transition: transform 120ms ease, box-shadow 120ms ease;
	width: 22px;
}

.traffic-pse-outage-marker-planned .traffic-pse-outage-marker-glyph {
	background: #4d7c0f;
}

.traffic-pse-outage-marker-psps .traffic-pse-outage-marker-glyph {
	background: #b91c1c;
}

.traffic-pse-outage-marker:hover .traffic-pse-outage-marker-glyph,
.traffic-pse-outage-marker:focus .traffic-pse-outage-marker-glyph {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.82);
	transform: scale(1.16);
}

.traffic-pse-outage-popup {
	color: #1d2530;
	min-width: 220px;
}

.traffic-pse-outage-popup h3 {
	font-size: 15px;
	line-height: 1.2;
	margin: 0 0 8px;
}

.traffic-pse-outage-popup dl {
	display: grid;
	gap: 6px 10px;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0;
}

.traffic-pse-outage-popup dt {
	color: #5d6875;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.traffic-pse-outage-popup dd {
	font-weight: 700;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.traffic-pse-outage-map-link {
	color: #0369a1;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	margin-top: 10px;
	text-decoration: none;
}

.traffic-pse-outage-zoom {
	background: #0369a1;
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	margin: 10px 8px 0 0;
	padding: 7px 9px;
}

.traffic-pse-outage-zoom:hover,
.traffic-pse-outage-zoom:focus-visible {
	background: #075985;
	outline: 2px solid #7dd3fc;
	outline-offset: 2px;
}

.traffic-road-alert-controls {
	display: grid;
	gap: 6px;
	pointer-events: auto;
}

.traffic-road-alert-status {
	align-items: center;
	background: rgba(42, 31, 13, 0.92);
	border: 1px solid rgba(217, 119, 6, 0.72);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: #fff;
	display: inline-flex;
	font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 30px;
	overflow: hidden;
	white-space: nowrap;
}

.traffic-road-alert-status-link {
	color: inherit;
	padding: 8px 10px;
	text-decoration: none;
}

.traffic-road-alert-status:hover,
.traffic-road-alert-status:focus-within {
	background: rgba(63, 42, 12, 0.96);
	border-color: rgba(245, 158, 11, 0.9);
}

.traffic-road-alert-status.loading {
	opacity: 0.78;
}

.traffic-road-alert-status.error {
	background: rgba(60, 31, 37, 0.96);
	border-color: rgba(245, 101, 101, 0.86);
}

.traffic-road-alert-popup {
	color: #1d2530;
	min-width: 230px;
}

.traffic-road-alert-popup h3 {
	font-size: 15px;
	line-height: 1.2;
	margin: 0 0 8px;
}

.traffic-road-alert-headline {
	font-size: 12px;
	font-weight: 650;
	line-height: 1.35;
	margin: 0 0 10px;
}

.traffic-road-alert-popup dl {
	display: grid;
	gap: 6px 10px;
	grid-template-columns: max-content minmax(0, 1fr);
	margin: 0;
}

.traffic-road-alert-popup dt {
	color: #5d6875;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.traffic-road-alert-popup dd {
	font-weight: 700;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}
.traffic-transit-controls {
  margin-top: 6px;
  z-index: 1200;
}

.traffic-transit-status {
  background: rgba(20, 24, 31, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
  color: #f2f4f7;
  font: 700 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-width: 226px;
  padding: 7px 9px;
  text-align: center;
}

.traffic-transit-status.live {
  border-color: rgba(52, 128, 188, 0.85);
}

.traffic-transit-status.loading {
  opacity: 0.78;
}

.traffic-transit-status.error {
  background: rgba(85, 25, 28, 0.95);
  border-color: rgba(213, 63, 66, 0.85);
}

.traffic-transit-status-link {
  color: inherit;
  text-decoration: none;
}

.traffic-transit-status-link:hover,
.traffic-transit-status-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

.traffic-transit-status-separator {
  color: rgba(242, 244, 247, 0.62);
}

.traffic-transit-bus-marker {
  align-items: center;
  display: flex;
  height: 10px;
  justify-content: center;
  pointer-events: auto;
  width: 10px;
}

.traffic-transit-bus-glyph {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 8px;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.62), 0 0 2px rgba(36, 116, 184, 0.45);
}

.traffic-transit-ferry-marker {
  align-items: center;
  display: flex;
  height: 28px;
  justify-content: center;
  pointer-events: auto;
  width: 28px;
}

.traffic-transit-ferry-glyph {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 21px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.68), 0 0 5px rgba(34, 113, 128, 0.55);
}

.traffic-transit-train-marker {
  align-items: center;
  display: flex;
  height: 28px;
  justify-content: center;
  pointer-events: auto;
  width: 28px;
}

.traffic-transit-train-glyph {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 21px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.68), 0 0 5px rgba(160, 38, 38, 0.55);
}

.traffic-transit-popup {
  color: #17202a;
  min-width: 220px;
}

.traffic-transit-popup strong {
  display: block;
  margin-bottom: 7px;
}

.traffic-transit-popup dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.traffic-transit-popup dl > div {
  display: grid;
  gap: 6px;
  grid-template-columns: 78px minmax(0, 1fr);
}

.traffic-transit-popup dt {
  color: #5b6573;
  font-weight: 800;
}

.traffic-transit-popup dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.traffic-events-controls {
  display: grid;
  gap: 6px;
  pointer-events: auto;
}

.traffic-events-status {
  align-items: center;
  background: rgba(25, 31, 41, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.72);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  color: #fff;
  display: inline-flex;
  font: 800 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 30px;
  overflow: hidden;
  white-space: nowrap;
}

.traffic-events-status-link {
  color: inherit;
  padding: 8px 10px;
  text-decoration: none;
}

.traffic-events-status:hover,
.traffic-events-status:focus-within {
  background: rgba(40, 49, 64, 0.97);
  border-color: rgba(226, 232, 240, 0.9);
}

.traffic-events-status.loading {
  opacity: 0.78;
}

.traffic-events-status.live {
  border-color: rgba(20, 184, 166, 0.82);
}

.traffic-events-status.error {
  background: rgba(60, 31, 37, 0.96);
  border-color: rgba(245, 101, 101, 0.86);
}

.traffic-events-marker {
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
  color: #fff;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.traffic-events-incident-marker {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}

.traffic-events-bridge-marker,
.traffic-events-rail-marker {
  border-radius: 5px;
  height: 20px;
  width: 26px;
}

.traffic-events-glyph {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.traffic-events-incident-marker .traffic-events-glyph {
  font-size: 16px;
}

.traffic-events-state-incident {
  background: #dc2626;
}

.traffic-events-state-red {
  background: #b91c1c;
}

.traffic-events-state-yellow {
  background: #b45309;
}

.traffic-events-state-green {
  background: #0f766e;
}

.traffic-events-state-unknown {
  background: #475569;
}

.traffic-events-popup {
  color: #17202a;
  min-width: 220px;
}

.traffic-events-popup h3 {
  font-size: 15px;
  line-height: 1.2;
  margin: 0 0 8px;
}

.traffic-events-popup p {
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 8px;
}

.traffic-events-popup dl {
  display: grid;
  gap: 5px;
  margin: 0 0 8px;
}

.traffic-events-popup dt {
  color: #5b6573;
  font-weight: 800;
}

.traffic-events-popup dd {
  margin: 0;
  overflow-wrap: anywhere;
}