/* root css custom properties and design tokens - Enhanced for visibility */
:root {
	--primary-bg: linear-gradient(135deg, #f8f9fa, #e9ecef);
	--panel-bg: #ffffff;
	--panel-bg-hover: #f8f9fa;
	--panel-border: #dee2e6;
	--panel-border-hover: #adb5bd;

	--panel-bg-alpha: rgba(255, 255, 255, 0.9);
	--panel-bg-alpha-hover: rgba(248, 249, 250, 0.9);
	--panel-border-alpha: rgba(222, 226, 230, 0.8);
	--panel-border-hover-alpha: rgba(173, 181, 189, 0.9);

	--text-color: #212529;
	--text-muted: #6c757d;
	--accent-color: #e9ecef;
	--accent-bg: #f8f9fa;
	--accent-border: #dee2e6;
	--button-bg-light: #f8f9fa;
	--input-bg: #ffffff;
	--error-color: #dc3545;
	--success-color: #28a745;
	--warning-color: #ffc107;
	--info-color: #17a2b8;
	--transition: all 0.3s ease;
	--control-bg: #ffffff;
	--control-panel-bg: #ffffff;
	/* windows 11 design system variables */
	--ui_element_uniform_height: 48px;
	--ui_element_uniform_width: 48px;
	--ui_icon_uniform_size: 16px;
	--ui_text_uniform_size: 14px;
	--ui_spacing_uniform: 5px;
	--ui_spacing_vertical: 5px;
	--ui_spacing_horizontal: 5px;
	--ui_border_uniform_width: 1px;
	--ui_border_radius_none: 0px;
	--ui_border_radius_small: 0px;
	--ui_panel_width_standard: 336px;
	--ui_navbar_width_standard: 58px;
	--ui_checkbox_uniform_size: 32px;
	/* black, white, and grey color scheme */
	--color_background_primary: #f8f8f8;
	--color_background_secondary: #ffffff;
	--color_background_tertiary: #f0f0f0;
	--color_background_quaternary: #e0e0e0;
	--color_background_active: #e0e0e0;
	--color_background_hover: #f0f0f0;
	--color_background_input: #ffffff;
	--color_background_navbar: #ffffff;
	--color_text_primary: #000000;
	--color_text_secondary: #333333;
	--color_text_muted: #666666;
	--color_text_inverse: #ffffff;
	--color_border_primary: #cccccc;
	--color_border_secondary: #999999;
	--color_border_focus: #000000;
	--color_border_active: #000000;
	--color_accent_blue: #000000;
	--color_accent_blue_hover: #333333;
	--color_accent_blue_light: #f0f0f0;
	--color_accent_green: #000000;
	--color_accent_green_hover: #333333;
	--color_accent_green_light: #f0f0f0;
	--color_accent_orange: #000000;
	--color_accent_orange_hover: #333333;
	--color_accent_orange_light: #f0f0f0;
	--color_accent_red: #000000;
	--color_accent_red_hover: #333333;
	--color_accent_red_light: #f0f0f0;
	--color_accent_purple: #000000;
	--color_accent_purple_hover: #333333;
	--color_accent_purple_light: #f0f0f0;
	--color_accent_yellow: #000000;
	--color_accent_yellow_hover: #333333;
	--color_accent_yellow_light: #f0f0f0;
	--color_scrollbar_track: #f0f0f0;
	--color_scrollbar_thumb: #cccccc;
	--color_scrollbar_thumb_hover: #999999;
	--color_text_on_dark_surface: #ffffff;
	--color_text_on_accent: #000000;
	--font_family_primary: "segoe ui", -apple-system, BlinkMacSystemFont, Arial,
		sans-serif;
	--font_weight_normal: 400;
	--font_weight_medium: 500;
	--font_weight_semibold: 600;
	--font_weight_bold: 700;
	--shadow_sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
	--shadow_md: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
	--shadow_lg: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
	--z_index_map: 1;
	--z_index_navbar: 20000;
	--z_index_navbar_controls: 20100;
	--z_index_panel: 1000;
	--z_index_sticky: 1010;
	--scroll_button_bg: rgba(160, 160, 160, 0.95);
	--scroll_button_bg_hover: rgba(130, 130, 130, 0.95);
}
body.light-mode {
	--primary-bg: linear-gradient(135deg, #f0f0f0, #e0e0e0);
	--panel-bg: rgba(255, 255, 255, 0.95);
	--panel-bg-hover: rgba(240, 240, 240, 0.9);
	--panel-border: rgba(150, 150, 150, 0.8);
	--panel-border-hover: rgba(130, 130, 130, 0.9);
	--text-color: rgba(0, 0, 0, 0.95);
	--text-muted: rgba(50, 50, 50, 0.75);
	--accent-color: rgba(220, 220, 220, 1);
	--accent-bg: rgba(230, 230, 230, 0.3);
	--accent-border: rgba(200, 200, 200, 0.8);
	--button-bg-light: rgba(230, 230, 230, 0.6);
	--input-bg: rgba(255, 255, 255, 0.9);
	--control-bg: rgba(255, 255, 255, 0.95);
	--control-panel-bg: rgba(255, 255, 255, 0.95);
	--error-color: #dc3545;
	--success-color: #28a745;
	--warning-color: #ffc107;
	--info-color: #17a2b8;
}

[data-theme="dark"],
body.dark-mode {
	--primary-bg: linear-gradient(135deg, #1e1e1e, #2d2d2d);
	--panel-bg: #1e1e1e;
	--panel-bg-hover: #333333;
	--panel-border: #666666;
	--panel-border-hover: #999999;
	--text-color: #ffffff;
	--text-muted: #cccccc;
	--accent-color: #333333;
	--accent-bg: #666666;
	--accent-border: #999999;
	--button-bg-light: #333333;
	--input-bg: #333333;
	--control-bg: #000000;
	--control-panel-bg: #000000;
	--error-color: #ff6b6b;
	--success-color: #51cf66;
	--warning-color: #ffd43b;
	--info-color: #339af0;
	/* dark mode overrides for black/white color scheme */
	--color_background_primary: #1a1a1a;
	--color_background_secondary: #2d2d2d;
	--color_background_tertiary: #333333;
	--color_background_quaternary: #404040;
	--color_background_active: #404040;
	--color_background_hover: #333333;
	--color_background_input: #1a1a1a;
	--color_background_navbar: #1a1a1a;
	--color_text_primary: #ffffff;
	--color_text_secondary: #e0e0e0;
	--color_text_muted: #b0b0b0;
	--color_text_inverse: #000000;
	--color_border_primary: #666666;
	--color_border_secondary: #888888;
	--color_border_focus: #ffffff;
	--color_border_active: #ffffff;
	--color_accent_blue: #4dabf7;
	--color_accent_blue_hover: #339af0;
	--color_accent_blue_light: #1a4d7a;
	--color_accent_green: #51cf66;
	--color_accent_green_hover: #37b24d;
	--color_accent_green_light: #1a4d2e;
	--color_accent_orange: #ff922b;
	--color_accent_orange_hover: #fd7e14;
	--color_accent_orange_light: #7a3e1a;
	--color_accent_red: #ff6b6b;
	--color_accent_red_hover: #fa5252;
	--color_accent_red_light: #7a1f1f;
	--color_accent_purple: #cc5de8;
	--color_accent_purple_hover: #ae3ec9;
	--color_accent_purple_light: #4a1f5a;
	--color_accent_yellow: #ffd43b;
	--color_accent_yellow_hover: #fcc419;
	--color_accent_yellow_light: #7a5a1a;
	--color_scrollbar_track: #2d2d2d;
	--color_scrollbar_thumb: #666666;
	--color_scrollbar_thumb_hover: #888888;
	--scroll_button_bg: rgba(160, 160, 160, 0.95);
	--scroll_button_bg_hover: rgba(130, 130, 130, 0.95);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	touch-action: manipulation;
}

body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100vh;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--text-color);
	background: var(--primary-bg);
	overflow: hidden;
	transition: all 0.3s ease;
}

/* Ensure space canvas is always behind map but visible */
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--text-color);
	background: #000;
	overflow: hidden;
	transition: all 0.3s ease;
}

/* Optional blur effect toggle */
body.no-blur .fading_border,
body.no-blur .control-button,
body.no-blur .side-panel,
body.no-blur .control_panel,
body.no-blur .zoom_pill,
body.no-blur .rotation_pill,
body.no-blur .coordinates_container,
body.no-blur .north_control,
body.no-blur .mini_map_container,
body.no-blur #info_container {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Straight border effect */
.fading_border {
	position: relative;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	transition: border-color 0.3s ease;
	border-radius: 0;
}

.fading_border::after {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	bottom: -1px;
	border: 1px solid var(--panel-border-hover);
	border-radius: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.fading_border:hover::after {
	opacity: 1;
}

/* ========================================
   Global Viewport Frame Constraints
   All popups, overlays, and panels must stay within
   the 48px navbar frame on all sides
   ======================================== */
:root {
	--viewport-frame-top: 48px;
	--viewport-frame-bottom: 48px;
	--viewport-frame-left: 48px;
	--viewport-frame-right: 48px;
	--viewport-content-width: calc(100vw - 96px);
	--viewport-content-height: calc(100vh - 96px);
}

/* Global popup/overlay container constraints */
.popup-constrained,
.overlay-constrained,
[data-constrain-viewport="true"] {
	max-width: var(--viewport-content-width) !important;
	max-height: var(--viewport-content-height) !important;
}

/* Ensure all fixed positioned elements with high z-index respect frame */
.panel-fixed-frame {
	position: fixed;
	top: var(--viewport-frame-top);
	left: var(--viewport-frame-left);
	max-width: var(--viewport-content-width);
	max-height: var(--viewport-content-height);
	overflow: auto;
}

#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-bg);
	transition: background-color 1s ease;
	z-index: 1;
}

/* Space Canvas for Globe Mode */
#spaceCanvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	background-color: var(--color_background_primary);
	pointer-events: none;
	display: block;
	transform: scale(1.02);
}

#map.globe-mode {
	background: transparent !important;
	transition: background-color 0.6s ease,
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#map {
	transition: background-color 0.6s ease,
		transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#spaceCanvas.active {
	opacity: 1 !important;
	transform: scale(1);
}

#spaceCanvas.transitioning-in {
	opacity: 0;
	transform: scale(1.02);
}

#spaceCanvas.transitioning-out {
	opacity: 0;
	transform: scale(0.98);
}

/* left sidebar navigation container */
.cs_navbar_container_left_sidebar {
	/* primary navigation sidebar */
	position: fixed;
	top: 0px;
	left: 0px;
	width: var(--ui_navbar_width_standard);
	min-width: var(--ui_navbar_width_standard);
	max-width: var(--ui_navbar_width_standard);
	height: 100vh;
	background-color: var(--color_background_navbar);
	border-right: var(--ui_border_uniform_width) solid
		var(--color_border_primary);
	border-top: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-bottom: var(--ui_border_uniform_width) solid
		var(--color_border_primary);
	border-left: var(--ui_border_uniform_width) solid var(--color_border_primary);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--ui_spacing_vertical);
	padding-bottom: var(--ui_spacing_vertical);
	z-index: var(--z_index_navbar);
	transition: all 0.3s ease;
} /* end navbar container */
/* uniform navigation button styling */
.cs_navbar_button_container_uniform {
	/* standardized navbar button component with control ring */
	width: var(--ui_element_uniform_width);
	height: var(--ui_element_uniform_height);
	background-color: var(--panel-bg);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	touch-action: manipulation;
	margin-left: var(--ui_spacing_horizontal);
	margin-right: var(--ui_spacing_horizontal);
	/* box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1); */
} /* end navbar button */
.cs_navbar_button_container_uniform:hover {
	/* navbar button hover state */
	background-color: var(--color_background_hover);
} /* end button hover */
.cs_navbar_button_container_uniform i {
	/* navbar button icon styling */
	font-size: var(--ui_icon_uniform_size);
	color: var(--color_text_primary);
	transition: color 0.3s ease;
} /* end button icon */
.cs_navbar_button_container_uniform.state_active {
	/* active navigation button state */
	background-color: var(--color_border_focus);
	border-color: var(--color_border_focus);
} /* end active button */
.cs_navbar_button_container_uniform.state_active i {
	/* active button icon color */
	color: var(--color_text_inverse);
} /* end active icon */
/* layers panel overlay container */
.cs_layers_panel_container_overlay {
	/* expandable layers panel sidebar */
	position: absolute;
	top: 0px;
	left: var(--ui_navbar_width_standard);
	width: var(--ui_panel_width_standard);
	height: 100vh;
	background-color: var(--color_background_secondary);
	border-right: var(--ui_border_uniform_width) solid
		var(--color_border_primary);
	border-top: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-bottom: var(--ui_border_uniform_width) solid
		var(--color_border_primary);
	display: none;
	flex-direction: column;
	z-index: var(--z_index_panel);
	transition: all 0.3s ease;
} /* end layers panel */
.cs_layers_panel_container_overlay.state_visible {
	/* visible panel state */
	display: flex;
} /* end visible state */
.cs_layers_panel_container_overlay.state_collapsed {
	/* collapsed panel state */
	height: auto;
	overflow: hidden;
} /* end collapsed state */
.cs_layers_panel_container_overlay.state_collapsed .cs_panel_content_wrapper {
	/* hidden content in collapsed state */
	display: none;
} /* end hidden content */
/* sticky panel header component */
.cs_panel_header_container_sticky {
	/* fixed position panel header */
	position: sticky;
	top: 0px;
	z-index: var(--z_index_sticky);
	background-color: var(--color_background_secondary);
	border-bottom: var(--ui_border_uniform_width) solid
		var(--color_border_primary);
	border-left: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-right: var(--ui_border_uniform_width) solid
		var(--color_border_primary);
	padding-top: var(--ui_spacing_vertical);
	padding-bottom: var(--ui_spacing_vertical);
	padding-left: var(--ui_spacing_horizontal);
	padding-right: var(--ui_spacing_horizontal);
	display: grid;
	grid-template-columns:
		var(--ui_element_uniform_width) 1fr var(--ui_element_uniform_width)
		var(--ui_element_uniform_width);
	align-items: center;
	height: calc(
		var(--ui_element_uniform_height) + var(--ui_spacing_vertical) * 2
	);
} /* end panel header */
/* search container component */
.cs_search_container_sticky {
	/* sticky search interface */
	position: sticky;
	z-index: var(--z_index_sticky);
	background-color: var(--color_background_secondary);
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	padding-top: var(--ui_spacing_vertical);
	padding-bottom: var(--ui_spacing_vertical);
	padding-left: var(--ui_spacing_horizontal);
	padding-right: var(--ui_spacing_horizontal);
	display: none;
	grid-template-columns: var(--ui_element_uniform_width) 1fr var(
			--ui_element_uniform_width
		);
	align-items: center;
	height: calc(
		var(--ui_element_uniform_height) + var(--ui_spacing_vertical) * 2
	);
	gap: 0px;
	overflow: hidden;
} /* end search container */
.cs_search_container_sticky.state_visible {
	/* visible search state */
	display: grid;
} /* end visible search */
/* search controls wrapper */
.cs_search_controls_container {
	/* search action buttons container */
	display: flex;
	align-items: center;
	gap: 0px;
	width: var(--ui_element_uniform_width);
	transition: all 0.3s ease;
	overflow: hidden;
	position: relative;
} /* end search controls */
.cs_search_controls_container.state_clear_hidden {
	/* hidden clear button state */
	width: var(--ui_element_uniform_width);
} /* end clear hidden */
.cs_search_controls_container.state_clear_visible {
	/* visible clear button state */
	width: calc(var(--ui_element_uniform_width) * 2);
} /* end clear visible */
.cs_search_controls_container.state_has_content {
	/* search with content state */
	transform: translateX(-48px);
} /* end has content */
/* uniform icon container component */
.cs_icon_container_uniform {
	/* standardized clickable icon wrapper */
	width: var(--ui_element_uniform_width);
	height: var(--ui_element_uniform_height);
	background-color: transparent;
	border: none;
	border-radius: var(--ui_border_radius_small);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	touch-action: manipulation;
	padding-right: 0px;
} /* end icon container */
.cs_icon_container_uniform:hover {
	/* icon container hover effect */
	background-color: var(--color_background_hover);
} /* end icon hover */
.cs_icon_container_uniform i {
	/* icon container symbol styling */
	font-size: var(--ui_icon_uniform_size);
	color: var(--color_text_primary);
	transition: color 0.3s ease;
} /* end icon symbol */

.cs_count_text {
	/* count text styling positioned left of category text */
	font-size: var(--ui_icon_uniform_size);
	color: var(--color_text_primary);
	font-weight: 700;
	margin-right: 8px;
	line-height: var(--ui_element_uniform_height);
	height: var(--ui_element_uniform_height);
	display: inline-flex;
	align-items: center;
} /* end count text */

/* panel dropdown arrow component */
.cs_panel_dropdown_arrow {
	/* expandable panel arrow button */
	background-color: var(--color_background_secondary);
	border-color: var(--color_border_primary);
} /* end dropdown arrow */
.cs_panel_dropdown_arrow:hover {
	/* dropdown arrow hover state */
	background-color: var(--color_background_hover);
	border-color: var(--color_border_primary);
} /* end arrow hover */
.cs_panel_dropdown_arrow i {
	/* dropdown arrow icon styling */
	color: var(--color_text_primary);
	transition: transform 0.3s ease;
} /* end arrow icon */
.cs_panel_dropdown_arrow.state_expanded i {
	/* expanded arrow rotation */
	transform: rotate(180deg);
} /* end expanded arrow */
/* panel content wrapper component */
.cs_panel_content_wrapper {
	/* animated content container */
	transition: max-height 0.3s ease, opacity 0.3s ease;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 2000px;
	opacity: 1;
} /* end content wrapper */
.cs_panel_content_wrapper.state_collapsed {
	/* collapsed content state */
	max-height: 0px;
	opacity: 0;
} /* end collapsed content */
/* search toggle button styling */
.cs_search_toggle_button {
	/* search activation button */
	background-color: var(--color_accent_blue_light);
	border-color: var(--color_accent_blue);
} /* end search toggle */
.cs_search_toggle_button:hover {
	/* search toggle hover state */
	background-color: var(--color_background_hover);
	border-color: var(--color_accent_blue_hover);
} /* end toggle hover */
.cs_search_toggle_button i {
	/* search toggle icon styling */
	color: var(--color_accent_blue);
	transition: color 0.3s ease;
} /* end toggle icon */
.cs_search_toggle_button:hover i {
	/* search toggle icon hover */
	color: var(--color_accent_blue_hover);
} /* end icon hover */
.cs_search_toggle_button.state_active {
	/* active search toggle state */
	background-color: var(--color_accent_blue);
	border-color: var(--color_accent_blue);
} /* end active toggle */
.cs_search_toggle_button.state_active i {
	/* active toggle icon color */
	color: var(--color_text_on_accent);
} /* end active icon */
.cs_search_toggle_button.state_active:hover {
	/* active toggle hover state */
	background-color: var(--color_accent_blue_hover);
	border-color: var(--color_accent_blue_hover);
} /* end active hover */
.cs_search_toggle_button.state_active:hover i {
	/* active toggle icon hover */
	color: var(--color_text_on_accent);
} /* end active icon hover */
/* settings button styling */
.cs_settings_button {
	/* settings panel activation button */
	background-color: var(--color_accent_purple_light);
	border-color: var(--color_accent_purple);
} /* end settings button */
.cs_settings_button:hover {
	/* settings button hover state */
	background-color: var(--color_background_hover);
	border-color: var(--color_accent_purple_hover);
} /* end settings hover */
.cs_settings_button i {
	/* settings button icon styling */
	color: var(--color_accent_purple);
	transition: color 0.3s ease;
} /* end settings icon */
.cs_settings_button:hover i {
	/* settings icon hover color */
	color: var(--color_accent_purple_hover);
} /* end settings icon hover */
/* settings panel dropdown */
.cs_settings_panel_container {
	/* settings dropdown menu */
	position: absolute;
	top: calc(var(--ui_element_uniform_height) + var(--ui_spacing_vertical) * 2);
	right: 0px;
	width: 200px;
	background-color: var(--color_background_secondary);
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-radius: var(--ui_border_radius_small);
	display: none;
	flex-direction: column;
	padding: var(--ui_spacing_vertical);
	z-index: 1020;
} /* end settings panel */
.cs_settings_panel_container.state_visible {
	/* visible settings panel */
	display: flex;
} /* end visible settings */
.cs_settings_panel_item {
	/* individual settings menu item */
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ui_spacing_vertical);
	min-height: 48px;
	cursor: pointer;
	border-radius: var(--ui_border_radius_small);
	transition: all 0.3s ease;
} /* end settings item */
.cs_settings_panel_item:hover {
	/* settings item hover effect */
	background-color: var(--color_background_hover);
} /* end item hover */
.cs_settings_panel_text {
	/* settings item text styling */
	font-size: var(--ui_text_uniform_size);
	color: var(--color_text_primary);
} /* end settings text */
.cs_settings_panel_item.cs_close_panel_button i {
	/* close button icon color */
	color: var(--color_accent_red);
} /* end close icon */
.cs_settings_panel_item.cs_close_panel_button:hover i {
	/* close button hover icon */
	color: var(--color_accent_red_hover);
} /* end close hover icon */
/* close panel button styling */
.cs_close_panel_button {
	/* panel close button component */
	background-color: var(--color_accent_red_light);
	border-color: var(--color_accent_red);
} /* end close button */
.cs_close_panel_button:hover {
	/* close button hover state */
	background-color: var(--color_background_hover);
	border-color: var(--color_accent_red_hover);
} /* end close hover */
.cs_close_panel_button i {
	/* close button icon styling */
	color: var(--color_accent_red);
	transition: color 0.3s ease;
} /* end close icon */
.cs_close_panel_button:hover i {
	/* close icon hover color */
	color: var(--color_accent_red_hover);
} /* end close icon hover */
/* panel title text component */
.cs_panel_title_text {
	/* panel header title styling */
	font-size: var(--ui_text_uniform_size);
	font-weight: var(--font_weight_semibold);
	color: var(--color_text_primary);
	height: var(--ui_element_uniform_height);
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	background-color: transparent;
	padding-left: var(--ui_spacing_horizontal);
	padding-right: var(--ui_spacing_horizontal);
} /* end panel title */
/* search input wrapper component */
.cs_search_input_wrapper {
	/* search field container */
	height: var(--ui_element_uniform_height);
	background-color: var(--color_background_input);
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-radius: var(--ui_border_radius_small);
	display: flex;
	align-items: center;
	padding-left: var(--ui_spacing_horizontal);
	padding-right: var(--ui_spacing_horizontal);
	transition: all 0.3s ease;
	width: 100%;
	overflow: hidden;
	margin-right: var(--ui_spacing_horizontal);
} /* end search wrapper */
.cs_search_input_wrapper.state_has_content {
	/* search wrapper with content */
	width: calc(100% - 48px);
} /* end wrapper content */
.cs_search_input_wrapper.state_clear_visible {
	/* search wrapper with clear button */
	width: calc(
		100% - var(--ui_element_uniform_width) - var(--ui_spacing_horizontal)
	);
} /* end wrapper clear */
.cs_search_input_wrapper:focus-within {
	/* focused search wrapper */
	border-color: var(--color_border_focus);
} /* end wrapper focus */
/* search input field styling */
.cs_search_input_field {
	/* actual search text input */
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	outline: none;
	font-family: var(--font_family_primary);
	font-size: var(--ui_text_uniform_size);
	color: var(--color_text_primary);
} /* end search field */
.cs_search_input_field::placeholder {
	/* search placeholder text */
	color: var(--color_text_muted);
} /* end placeholder */
/* search action buttons */
.cs_search_submit_button {
	/* search submit button styling */
	background-color: var(--color_accent_green_light);
	border-color: var(--color_accent_green);
} /* end submit button */
.cs_search_submit_button:hover {
	/* submit button hover state */
	background-color: var(--color_background_hover);
	border-color: var(--color_accent_green_hover);
} /* end submit hover */
.cs_search_submit_button i {
	/* submit button icon styling */
	color: var(--color_accent_green);
	transition: color 0.3s ease;
} /* end submit icon */
.cs_search_submit_button:hover i {
	/* submit icon hover color */
	color: var(--color_accent_green_hover);
} /* end submit icon hover */
.cs_search_clear_button {
	/* search clear button styling */
	background-color: var(--color_accent_orange_light);
	border-color: var(--color_accent_orange);
} /* end clear button */
.cs_search_clear_button:hover {
	/* clear button hover state */
	background-color: var(--color_background_hover);
	border-color: var(--color_accent_orange_hover);
} /* end clear hover */
.cs_search_clear_button i {
	/* clear button icon styling */
	color: var(--color_accent_orange);
	transition: color 0.3s ease;
} /* end clear icon */
.cs_search_clear_button:hover i {
	/* clear icon hover color */
	color: var(--color_accent_orange_hover);
} /* end clear icon hover */
.cs_search_clear_button_hidden {
	/* hidden clear button state */
	display: none;
} /* end clear hidden */
/* scrollable content area */
.cs_content_scrollable_area,
.cs_scrollable_content_container {
	/* main content scrolling region */
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	max-height: calc(85vh - 150px);
} /* end scrollable area */
/* layer list container */
.cs_layer_list_container {
	/* layers content container */
	overflow-y: auto;
	overflow-x: hidden;
} /* end layer list */
/* category container component */
.cs_category_container {
	/* background-color: var(--color_background_secondary); */
	border-radius: var(--ui_border_radius_small);
	transition: all 0.3s ease;
	/* margin-bottom: var(--ui_spacing_vertical); */
} /* end category container */
.cs_category_container.state_expanded {
	/* expanded category state */
	background-color: transparent;
	border-color: var(--color_border_active);
} /* end expanded category */
.cs_category_container.state_expanded .cs_category_header {
	/* expanded category header */
	background-color: transparent;
} /* end expanded header 
            
            /* category header component */
.cs_category_header {
	cursor: pointer;
	display: grid;
	grid-template-columns:
		var(--ui_element_uniform_width) var(--ui_element_uniform_width) var(
			--ui_element_uniform_width
		)
		1fr;
	align-items: center;
	min-height: 48px;
	/* padding-top: var(--ui_spacing_vertical); */
	/* padding-bottom: var(--ui_spacing_vertical); */
	/* padding-left: var(--ui_spacing_horizontal); */
	/* padding-right: var(--ui_spacing_horizontal); */
	border-bottom: 1px solid var(--panel-border);
	transition: all 0.3s ease;
} /* end category header */
.cs_category_header:hover {
	/* category header hover effect */
	background-color: var(--color_background_hover);
} /* end header hover */
/* checkbox container component */
.cs_checkbox_container {
	/* category checkbox wrapper */
	width: var(--ui_element_uniform_width);
	height: var(--ui_element_uniform_height);
	border: none;
	border-right: 1px solid var(--panel-border);
	border-radius: var(--ui_border_radius_small);
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
} /* end checkbox container */
.cs_checkbox_input {
	width: 38px;
	height: 38px;
	accent-color: var(--color_accent_blue);
	cursor: pointer;
	margin: 0px;
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	background-color: var(--color_background_secondary);
} /* end checkbox input */
/* category text styling */
.cs_category_text {
	/* category name text display */
	font-size: var(--ui_text_uniform_size);
	font-weight: 600;
	color: var(--color_text_primary);
	height: var(--ui_element_uniform_height);
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-left: 1px solid var(--panel-border);
	background-color: transparent;
	padding-left: 5px;
} /* end category text */
/* category count styling */
.cs_category_count {
	/* category layer count display */
	color: #888888;
	font-weight: 600;
	font-size: var(--ui_text_uniform_size);
	margin-left: 1px;
} /* end category count */

/* expansion arrow container */
.cs_expansion_arrow_container {
	/* category expand collapse button */
	width: var(--ui_element_uniform_width);
	height: var(--ui_element_uniform_height);
	border: none;
	border-left: 1px solid var(--panel-border);
	border-radius: var(--ui_border_radius_small);
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	cursor: pointer;
} /* end expansion arrow */
.cs_expansion_arrow_container i {
	/* expansion arrow icon */
	font-size: var(--ui_icon_uniform_size);
	color: var(--color_text_primary);
	transition: all 0.3s ease;
} /* end arrow icon */
.cs_category_container.state_expanded .cs_expansion_arrow_container {
	/* expanded arrow container */
	background-color: transparent;
	/* border-color: var(--color_accent_green); */
} /* end expanded container */
.cs_category_container.state_expanded .cs_expansion_arrow_container i {
	/* expanded arrow icon */
	/* color: var(--color_accent_green); */
	transform: rotate(180deg);
} /* end expanded icon */
/* layer alignment container */
.cs_layer_alignment_container {
	/* layer item alignment wrapper */
	width: var(--ui_element_uniform_width);
	height: var(--ui_element_uniform_height);
	border: var(--ui_border_uniform_width) solid var(--color_border_secondary);
	border-radius: var(--ui_border_radius_small);
	background-color: var(--color_background_quaternary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
} /* end alignment container */
/* category content wrapper */
.cs_category_content_wrapper {
	/* expandable category content */
	max-height: 0px;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background-color: rgba(0, 0, 0, 0.15);
	align-items: center;
	justify-content: center;
} /* end content wrapper */
.cs_category_container.state_expanded .cs_category_content_wrapper {
	/* expanded content wrapper */
	max-height: 2000px;
} /* end expanded wrapper */
/* layer item component */
.cs_layer_item {
	/* background-color: var(--color_background_secondary); */
	/* border-radius: var(--ui_border_radius_small); */
	cursor: pointer;
	display: grid;
	grid-template-columns:
		var(--ui_element_uniform_width) var(--ui_element_uniform_width) var(
			--ui_element_uniform_width
		)
		1fr;
	align-items: center;
	/* padding-top: var(--ui_spacing_vertical); */
	/* padding-bottom: var(--ui_spacing_vertical); */
	/* padding-left: var(--ui_spacing_horizontal); */
	/* padding-right: var(--ui_spacing_horizontal); */
	/* margin-bottom: var(--ui_spacing_vertical); */
	transition: all 0.3s ease;
} /* end layer item */
.cs_layer_item:hover {
	/* layer item hover effect */
	background-color: var(--color_background_hover);
} /* end layer hover */
/* legend symbol container */
.cs_legend_symbol_container {
	/* layer legend symbol wrapper */
	width: var(--ui_element_uniform_width);
	height: var(--ui_element_uniform_height);
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-radius: var(--ui_border_radius_small);
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: all 0.3s ease;
} /* end legend container */
.cs_legend_symbol_image {
	/* legend symbol image */
	width: var(--ui_icon_uniform_size);
	height: var(--ui_icon_uniform_size);
	object-fit: contain;
	object-position: center;
	display: block;
} /* end legend image */
.cs_legend_symbol_fallback {
	/* legend fallback icon */
	font-size: var(--ui_icon_uniform_size);
	color: var(--color_text_secondary);
	transition: color 0.3s ease;
} /* end legend fallback */
/* layer text styling */
.cs_layer_text {
	/* layer name text display */
	font-size: 12px;
	font-weight: var(--font_weight_normal);
	color: var(--color_text_primary);
	height: var(--ui_element_uniform_height);
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	background-color: transparent;
	padding-left: var(--ui_spacing_horizontal);
	padding-right: var(--ui_spacing_horizontal);
} /* end layer text */
/* loading container component */
.cs_loading_container {
	/* loading state display */
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: var(--ui_spacing_vertical);
	padding-bottom: var(--ui_spacing_vertical);
	padding-left: var(--ui_spacing_horizontal);
	padding-right: var(--ui_spacing_horizontal);
	background-color: var(--color_background_secondary);
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-radius: var(--ui_border_radius_small);
	margin-top: var(--ui_spacing_vertical);
	margin-bottom: var(--ui_spacing_vertical);
	margin-left: var(--ui_spacing_horizontal);
	margin-right: var(--ui_spacing_horizontal);
	text-align: center;
	color: var(--color_text_primary);
} /* end loading container */
/* progress bar component */
.cs_progress_bar_container {
	/* progress indicator wrapper */
	width: 100%;
	height: var(--ui_element_uniform_height);
	background-color: var(--color_background_quaternary);
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
	border-radius: var(--ui_border_radius_small);
	overflow: hidden;
	margin-top: var(--ui_spacing_vertical);
	transition: all 0.3s ease;
	position: relative;
} /* end progress container */
.cs_progress_bar_fill,
.cs_progress_bar {
	/* progress bar fill element */
	width: 0%;
	height: 100%;
	background-color: var(--color_accent_green);
	color: var(--color_text_on_accent);
	font-size: var(--ui_text_uniform_size);
	font-weight: var(--font_weight_semibold);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: width 0.3s ease;
	border-right: var(--ui_border_uniform_width) solid var(--color_accent_green);
} /* end progress bar */
/* perfect scrollbar styling */
.ps {
	/* perfect scrollbar container */
	position: relative;
} /* end ps container */
.ps__rail-y {
	/* vertical scrollbar track */
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	width: 8px;
	background-color: var(--color_scrollbar_track);
	border-radius: var(--ui_border_radius_small);
	right: 4px;
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
} /* end scrollbar rail */
.ps__thumb-y {
	/* scrollbar thumb element */
	position: absolute;
	right: 0px;
	width: 8px;
	background-color: var(--color_scrollbar_thumb);
	border-radius: var(--ui_border_radius_small);
	transition: none;
	border: var(--ui_border_uniform_width) solid var(--color_border_primary);
} /* end scrollbar thumb */
.ps__thumb-y:hover {
	/* scrollbar thumb hover */
	background-color: var(--color_scrollbar_thumb_hover);
} /* end thumb hover */
.ps__rail-y:hover .ps__thumb-y {
	/* rail hover thumb */
	background-color: var(--color_scrollbar_thumb_hover);
} /* end rail hover */
/* top navigation container */
.top_nav_container {
	/* main navigation bar */
	position: fixed;
	top: 0px;
	left: 48px;
	right: 48px;
	height: 48px;
	padding: 0px;
	z-index: var(--z_index_navbar);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	transition: var(--transition);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
} /* end top nav */
.top_nav {
	/* navigation items container */
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0px 48px;
	gap: 0px;
	margin: 0px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	width: 100%;
} /* end nav items */
.top_nav::-webkit-scrollbar {
	/* hide webkit scrollbar */
	display: none;
} /* end scrollbar hide */
.nav_left_container::-webkit-scrollbar {
	/* hide left navbar scrollbar */
	display: none;
}
.nav_right_container::-webkit-scrollbar {
	/* hide right navbar scrollbar */
	display: none;
}
.bottom_nav::-webkit-scrollbar {
	/* hide bottom nav scrollbar */
	display: none;
}
/* top buttons container */
.top_buttons_container {
	/* navigation action buttons */
	display: flex;
	align-items: center;
	gap: 0px;
	z-index: 2002;
} /* end top buttons */
/* navigation divider component */
.nav_div {
	/* navigation button divider */
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	font-size: 18px;
	min-width: 48px;
	min-height: 48px;
	margin: 0px;
	padding: 0px;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-sizing: border-box;
	flex-direction: column;
	overflow: hidden;
} /* end nav div */
.nav_div:first-child {
	/* first navigation button */
	border-left: none;
} /* end first nav */
.nav_div:last-child {
	/* last navigation button */
	border-right: none;
} /* end last nav */
.nav_div:hover {
	/* navigation button hover */
	background-color: var(--text-color);
	color: var(--panel-bg);
	border: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end nav hover */
.nav_div i {
	/* nav div icon - 1/3 container size */
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--text-color);
	transition: color 0.3s ease;
} /* end nav div icon */
.nav_div:hover i {
	/* nav div icon hover */
	color: var(--panel-bg);
} /* end nav div icon hover */
.nav_div .button_label {
	/* nav div text label */
	font-size: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	border-radius: 0px;
	line-height: 1;
	font-weight: 700;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
} /* end nav div label */
.nav_div:hover .button_label {
	/* nav div label hover */
	color: var(--panel-bg);
} /* end nav div label hover */
.nav_div.active {
	/* active navigation button */
	background-color: var(--text-color);
	color: var(--panel-bg);
	border: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end nav active */
.nav_div.active i,
.nav_div.active .button_label {
	/* active nav div icon and label */
	color: var(--panel-bg);
} /* end nav active elements */
/* navigation content container */
.nav_content_container {
	/* navigation item wrapper */
	display: flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	min-height: 48px;
	max-height: 48px;
	overflow: hidden;
} /* end nav content */
.nav_content_container.hidden {
	/* hidden navigation content */
	display: none;
} /* end hidden content */
/* search container component */
.search_container {
	/* search interface container */
	position: relative;
	flex: 1;
	max-width: 100%;
	display: none;
	align-items: center;
	margin: 0px;
	transition: var(--transition);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	box-sizing: border-box;
} /* end search container */
.search_container.active {
	/* active search container */
	display: flex;
	width: 100%;
} /* end active search */
.search_container.full-width {
	/* full width search overlay */
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background: var(--panel-bg);
	z-index: 2003;
	border: 1px solid var(--panel-border);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-sizing: border-box;
	padding: 5px;
	height: 48px;
} /* end full width search */
/* search input styling */
.search_input {
	/* main search text input */
	width: 100%;
	height: 48px;
	padding: 10px 48px;
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	background-color: var(--input-bg);
	color: var(--text-color);
	font-size: 14px;
	transition: border-color 0.3s ease;
	outline: none;
	border-left: 1px solid var(--panel-border);
	border-right: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end search input */
.search_input::placeholder {
	/* search placeholder styling */
	color: var(--text-muted);
	opacity: 0.7;
} /* end placeholder */
.search_input:focus {
	/* focused search input */
	border: 1px solid var(--panel-border);
} /* end input focus */
.search_input.error {
	/* error state search input */
	border: 1px solid var(--error-color);
	animation: shake 0.5s;
} /* end input error */
/* search back button */
.search_back_button {
	/* search mode back button */
	width: 48px;
	height: 48px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	font-size: 18px;

	box-sizing: border-box;
} /* end back button */
.search_back_button:hover {
	/* back button hover state */
	background: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--panel-border);
} /* end back hover */
/* search icon positioning */
.search_icon_left,
.search-icon {
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-color);
	font-size: 16px;
	opacity: 0.8;

	z-index: 2;
	left: 0px;
	font-weight: 600;
	width: 48px;
	height: 48px;
	border: solid 1px;
	text-align: center;
	padding-top: 16px;
	border: solid 1px transparent;
} /* end search icon */
/* search action buttons */
.search_div {
	/* search submit button */
	position: absolute;
	right: 0px;
	top: 0px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	border-left: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end search div */
.search_div:hover {
	/* search button hover */
	background-color: var(--panel-bg-hover);
	border: 1px solid var(--panel-border);
} /* end search hover */
.clear_search {
	/* clear search button */
	position: absolute;
	right: 48px;
	top: 0px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-left: 1px solid var(--panel-border);
	border-right: 1px solid var(--panel-border);
	width: 48px;
	height: 48px;
	border-radius: 0px;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-muted);
	font-size: 16px;
	z-index: 2;
	transition: var(--transition);
	box-sizing: border-box;
} /* end clear search */
.clear_search:hover {
	/* clear search hover */
	background-color: var(--panel-bg-hover);
	color: var(--text-color);
	border: 1px solid var(--panel-border);
} /* end clear hover */
/* search results container */
.search_results_container {
	/* search dropdown results */
	position: absolute;
	top: 48px;
	left: 0px;
	right: 0px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-top: 1px solid var(--panel-border);
	border-radius: 0px;
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	z-index: 1200;
	display: none;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-sizing: border-box;
} /* end results container */
.search_results_container.active {
	/* active results container */
	display: block;
} /* end active results */
/* search result item styling */
.search_result_item {
	/* individual search result */
	padding: 12px 16px;
	cursor: pointer;
	transition: var(--transition);
	display: flex;
	align-items: center;
	border: 1px solid var(--panel-border);
	min-height: 48px;
	box-sizing: border-box;
} /* end result item */
.search_result_item:hover {
	/* result item hover */
	background-color: var(--panel-bg-hover);
} /* end result hover */
.search_result_icon {
	/* result item icon */
	width: 48px;
	height: 48px;
	background: var(--accent-bg);
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	color: var(--text-color);
} /* end result icon */
.search_result_text {
	/* result item text container */
	flex-grow: 1;
} /* end result text */
.search_result_name {
	/* result item name */
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 2px;
	color: var(--text-color);
} /* end result name */
.search_result_address {
	/* result item address */
	font-size: 12px;
	color: var(--text-muted);
} /* end result address */
/* menu corner containers */
.menu_corner_container {
	/* corner positioned menu button */
	position: fixed;
	width: 48px;
	min-width: 48px;
	height: 48px;
	min-height: 48px;
	background: var(--panel-bg);
	z-index: 10010;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
} /* end corner container */
.menu_corner_top_left {
	/* top left corner position */
	top: 0px;
	left: 0px;
	border: 1px solid var(--panel-border);
} /* end top left */
.menu_corner_top_right {
	/* top right corner position */
	top: 0px;
	right: 0px;
	border: 1px solid var(--panel-border);
} /* end top right */
.menu_corner_bottom_left {
	/* bottom left corner position */
	bottom: 0px;
	left: 0px;
	border: 1px solid var(--panel-border);
} /* end bottom left */
.menu_corner_bottom_right {
	/* bottom right corner position */
	bottom: 0px;
	right: 0px;
	border: 1px solid var(--panel-border);
} /* end bottom right */
/* control button styling */
.control-button,
.control_button {
	/* standard control button component with circular outline */
	width: 48px;
	height: 48px;
	border-radius: 0px;
	background: var(--panel-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	flex-direction: column;
	border: 1px solid var(--panel-border);
	transition: var(--transition);
	z-index: 2;
	color: var(--text-color);
	margin: 0px;
	padding: 0px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	min-width: 48px;
	min-height: 48px;
	box-sizing: border-box;
	/* box-shadow: none !important; */
	position: relative;
} /* end control button */
.control-button::before,
.control_button::before {
	/* removed circular outline */
	display: none;
} /* end control button outline */
.control-button:hover,
.control_button:hover {
	/* control button hover with theme colors */
	background: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--text-color);
} /* end button hover */
.control-button:hover::before,
.control_button:hover::before {
	/* hover state outline removed */
	display: none;
} /* end hover outline */
.control-button.active,
.control_button.active {
	/* active control button with theme colors */
	background: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--text-color);
	position: relative;
} /* end active button */
.control-button.active::before,
.control_button.active::before {
	/* active state outline removed */
	display: none;
} /* end active outline */
.control_button.popup_open {
	/* popup open button state with theme colors */
	background: var(--accent-bg);
	color: var(--text-color);
	border: 1px solid var(--text-color);
	position: relative;
} /* end popup open */
.control_button.popup_open::before {
	/* popup open outline removed */
	display: none;
} /* end popup outline */

/* golden glow animation for selected markers in drag mode */
.cs_measurement_marker_circular.state_dragging.selected_marker {
	/* golden glow animation for selected marker in drag mode */
	position: relative;
} /* end selected marker base */
.cs_measurement_marker_circular.state_dragging.selected_marker::before {
	/* golden glow outer ring animation */
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 1px solid var(--color_accent_yellow);
	border-radius: 50%;
	opacity: 0.8;
	animation: golden_glow_pulse 2s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
} /* end golden glow outer */
.cs_measurement_marker_circular.state_dragging.selected_marker::after {
	/* golden glow inner ring animation */
	content: "";
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border: 1px solid var(--color_accent_yellow);
	border-radius: 50%;
	opacity: 0.6;
	animation: golden_glow_pulse 2s ease-in-out infinite 0.5s;
	pointer-events: none;
	z-index: -1;
} /* end golden glow inner */
@keyframes golden_glow_pulse {
	/* golden glow pulsing animation keyframes */
	0% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.4;
	}
	100% {
		transform: scale(1);
		opacity: 0.8;
	}
} /* end golden glow animation */
/* dot separator styling */
.cs_category_separator {
	/* dot separator between category and count text */
	margin: 0px 4px;
	color: var(--color_text_muted);
	font-weight: bold;
	opacity: 0.7;
} /* end category separator */
/* navigation side containers */
.nav_left_container {
	/* left navigation sidebar */
	position: fixed;
	top: 48px;
	bottom: 48px;
	left: 0px;
	width: 48px;
	min-width: 48px;
	z-index: var(--z_index_navbar);
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0px;
	margin: 0px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 0px;
	box-sizing: border-box;
} /* end left nav */
.nav_right_container {
	/* right navigation sidebar */
	position: fixed;
	top: 48px;
	bottom: 48px;
	right: 0px;
	width: 48px;
	min-width: 48px;
	z-index: var(--z_index_navbar);
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0px;
	margin: 0px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 0px;
	box-sizing: border-box;
} /* end right nav */
/* navigation controls styling */
.left_nav_controls,
.right_nav_controls {
	/* navigation control groups */
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	gap: 0px;
	margin: 0px;
	padding: 48px 0px;
	border: 1px solid var(--panel-border);
	z-index: 1001;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
} /* end nav controls */
.left_nav_controls::-webkit-scrollbar {
	display: none;
}
.right_nav_controls::-webkit-scrollbar {
	display: none;
}
.left_nav_controls .control_button,
.right_nav_controls .control_button {
	/* nav control buttons */
	width: 48px;
	height: 48px;
	border-radius: 0px;
	margin: 0px;
	padding: 0px;
	border: var(--ui_border_uniform_width) solid var(--panel-border);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-sizing: border-box;
	flex-direction: column;
	font-size: 14px;
	overflow: hidden;
} /* end nav buttons */
.left_nav_controls .control_button:first-child,
.right_nav_controls .control_button:first-child {
	/* first nav button */
	border-top: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end first button */
.left_nav_controls .control_button:last-child,
.right_nav_controls .control_button:last-child {
	/* last nav button */
	border-bottom: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end last button */
.control_button .button_label {
	/* text label for control buttons */
	font-size: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	border-radius: 5px;
	line-height: 1;
	font-weight: 700;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
} /* end button label */
.control_button:hover .button_label,
.control_button:hover i {
	/* button label and icon hover state */
	color: var(--panel-bg);
} /* end hover label */
.control_button.active .button_label,
.control_button.active i {
	/* button label and icon active state */
	color: var(--panel-bg);
} /* end active label */
.control_button i {
	/* button icon adjustments for labels - 1/3 container size */
	font-size: 18px;
	margin-bottom: 4px;
	color: var(--text-color);
	transition: color 0.3s ease;
} /* end button icon */
/* menu button styling */
.menu_button {
	/* general menu button component */
	width: 48px;
	min-width: 48px;
	height: 48px;
	min-height: 48px;
	border-radius: 0px;
	background: var(--panel-bg);
	color: var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: var(--ui_border_uniform_width) solid var(--panel-border);
	transition: var(--transition);
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	flex-direction: column;
} /* end menu button */
.menu_button:hover {
	/* menu button hover */
	background: var(--text-color);
	color: var(--panel-bg);
	border: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end menu hover */
.menu_button i {
	/* menu button icon - 1/3 container size */
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--text-color);
	transition: color 0.3s ease;
} /* end menu button icon */
.menu_button:hover i {
	/* menu button icon hover */
	color: var(--panel-bg);
} /* end menu button icon hover */
.menu_button .button_label {
	/* menu button text label */
	font-size: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	line-height: 1;
	border-radius: 5px;
	font-weight: 700;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.3px;
} /* end menu button label */
.menu_button:hover .button_label {
	/* menu button label hover */
	color: var(--panel-bg);
} /* end menu button label hover */
/* bottom navigation container */
.bottom_nav_container {
	/* bottom navigation bar */
	position: fixed;
	bottom: 0px;
	left: 48px;
	right: 48px;
	height: 48px;
	z-index: var(--z_index_navbar);
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-top: 1px solid var(--panel-border);
	border-left: 1px solid var(--panel-border);
	border-right: 1px solid var(--panel-border);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	transition: var(--transition);
	margin: 0px;
	padding: 0px;
	border-radius: 0px;
	box-sizing: border-box;
} /* end bottom nav */
.bottom_nav {
	/* bottom navigation items */
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0px 48px;
	gap: 0px;
	margin: 0px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	width: 100%;
} /* end bottom nav items */
.bottom_nav::-webkit-scrollbar {
	/* hide bottom nav scrollbar */
	display: none;
} /* end scrollbar hide */
.bottom_nav_button {
	/* bottom navigation button */
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-radius: 0px;
	background: var(--panel-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	border: 1px solid var(--panel-border);
	transition: var(--transition);
	color: var(--text-color);
	margin: 0px;
	padding: 0px;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-sizing: border-box;
	flex-direction: column;
	overflow: hidden;
} /* end bottom button */
.bottom_nav_button:first-child {
	/* first bottom button */
	border-left: none;
} /* end first bottom */
.bottom_nav_button:last-child {
	/* last bottom button */
	border-right: none;
} /* end last bottom */
.bottom_nav_button:hover {
	/* bottom button hover */
	background: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--panel-border);
} /* end bottom hover */
.bottom_nav_button i {
	/* bottom nav button icon - 1/3 container size */
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--text-color);
	transition: color 0.3s ease;
} /* end bottom nav icon */
.bottom_nav_button:hover i {
	/* bottom nav button icon hover */
	color: var(--panel-bg);
} /* end bottom nav icon hover */
.bottom_nav_button .button_label {
	/* bottom nav button text label */
	font-size: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	line-height: 1;
	font-weight: 700;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
} /* end bottom nav label */
.bottom_nav_button:hover .button_label {
	/* bottom nav button label hover */
	color: var(--panel-bg);
} /* end bottom nav label hover */
.bottom_nav_button.active {
	/* active bottom button */
	background: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--panel-border);
} /* end bottom active */
.bottom_nav_button.active i,
.bottom_nav_button.active .button_label {
	/* active bottom nav button icon and label */
	color: var(--panel-bg);
} /* end bottom nav active elements */
/* bottom popup container */
.bottom_popup_container {
	/* bottom expandable popup with relative positioning for scroll buttons */
	position: fixed;
	bottom: 48px;
	left: 48px;
	right: 48px;
	height: calc(33vh);
	max-height: calc(100vh - 144px); /* Ensure doesn't overlap with top navbar + 48px buffer */
	background-color: var(--panel-bg);
	z-index: 1999;
	display: none;
	flex-direction: column;
	overflow: hidden;
	border-top: 1px solid var(--panel-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: var(--transition);
	box-sizing: border-box;
} /* end popup container */
/* unified popup header styles */
.cs_unified_popup_header {
	/* unified header for all popups */
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 48px;
	background-color: rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid var(--panel-border);
	padding: 0px 16px;
	flex-shrink: 0;
	box-sizing: border-box;
	z-index: var(--z_index_navbar);
} /* end unified header */
/* popup header title styles */
.cs_popup_header_title {
	/* header title text */
	font-weight: 600;
	font-size: 14px;
	color: var(--text-color);
} /* end header title */
/* popup close button styles */
.cs_popup_close_button {
	/* circular close button */
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-sizing: border-box;
} /* end close button */
.cs_popup_close_button:hover {
	/* close button hover state */
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(0, 0, 0, 0.3);
} /* end close hover */
.cs_popup_close_button i {
	/* close button icon */
	font-size: 12px;
	color: rgba(0, 0, 0, 0.7);
} /* end close icon */
/* popup content area styles */
.cs_popup_content_area {
	/* content area below header with horizontal scrolling */
	display: flex;
	flex-direction: row;
	gap: 0px;
	flex: 1;
	overflow-x: auto;
	overflow-y: hidden;
	box-sizing: border-box;
	position: relative;
	scroll-behavior: smooth;
	padding: 0px;
	margin: 0px;
	border-top: 1px solid var(--panel-border);
	z-index: var(--z_index_navbar);
	scrollbar-width: none;
	-ms-overflow-style: none;
} /* end content area */
.cs_popup_content_area::-webkit-scrollbar {
	/* hide popup content scrollbar */
	display: none;
}
/* horizontal scroll buttons for popup content area */
/* Bottom navbar controls for active panels and close button */
.cs_bottom_navbar_controls {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	height: 48px;
	min-height: 48px;
	max-height: 48px;
	background: var(--panel-bg);
	border-bottom: 1px solid var(--panel-border);
	z-index: var(--z_index_navbar);
}

.cs_close_all_button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 0px;
	border: 1px solid var(--panel-border);
	cursor: pointer;
	margin-right: 12px;
	background-color: rgba(0, 0, 0, 0.05);
}

.cs_close_all_button:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.cs_close_all_button i {
	font-size: 12px;
	color: var(--text-color);
}

.cs_active_panel_count {
	display: flex;
	align-items: center;
}

.active_panel_count_text {
	font-size: 14px;
	font-weight: 500;
	color: var(--text-color);
}

.cs_popup_scroll_button {
	/* 48px scroll button styling positioned relative to popup container */
	position: absolute;
	top: calc(50% + 24px);
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: var(--z_index_navbar);
	transition: all 0.2s ease;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
} /* end scroll button */
.cs_popup_scroll_button.state_visible {
	/* visible scroll button state */
	opacity: 1;
	visibility: visible;
} /* end visible state */
.cs_popup_scroll_button:hover {
	/* scroll button hover state */
	background-color: var(--panel-bg-hover);
	border-color: var(--panel-border);
} /* end hover state */
.cs_popup_scroll_button.cs_scroll_left {
	/* left scroll button positioning */
	left: 8px;
} /* end left button */
.cs_popup_scroll_button.cs_scroll_right {
	/* right scroll button positioning */
	right: 8px;
} /* end right button */
.cs_popup_scroll_button i {
	/* scroll button icon styling */
	font-size: 16px;
	color: var(--text-color);
} /* end scroll icon */
.cs_navbar_scroll_button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	background-color: var(--scroll_button_bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: var(--z_index_navbar_controls);
	transition: all 0.2s ease;
	box-sizing: border-box;
	margin: 0px;
	opacity: 0;
	visibility: hidden;
}
.cs_navbar_scroll_button.state_visible {
	opacity: 1;
	visibility: visible;
}
.cs_navbar_scroll_button:hover {
	background-color: var(--scroll_button_bg_hover);
	border-color: var(--panel-border);
}
.cs_navbar_scroll_button.cs_scroll_left {
	left: 0px;
}
.cs_navbar_scroll_button.cs_scroll_right {
	right: 0px;
}
.cs_navbar_scroll_button i {
	font-size: 16px;
	color: var(--text-color);
}
.cs_navbar_scroll_button_vertical {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 48px;
	background-color: var(--scroll_button_bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: var(--z_index_navbar_controls);
	transition: all 0.2s ease;
	box-sizing: border-box;
	margin: 0px;
	opacity: 0;
	visibility: hidden;
}
.cs_navbar_scroll_button_vertical.state_visible {
	opacity: 1;
	visibility: visible;
}
.cs_navbar_scroll_button_vertical:hover {
	background-color: var(--scroll_button_bg_hover);
	border-color: var(--panel-border);
}
.cs_navbar_scroll_button_vertical.cs_scroll_up {
	top: 0px;
}
.cs_navbar_scroll_button_vertical.cs_scroll_down {
	bottom: 0px;
}
.cs_navbar_scroll_button_vertical i {
	font-size: 16px;
	color: var(--text-color);
}
.bottom_popup {
	/* individual popup panel */
	z-index: var(--z_index_navbar);
	flex: 0 0 auto;
	min-width: 300px;
	max-width: 400px;
	margin: 0px;
	background-color: var(--panel-bg);
	border-right: 1px solid var(--panel-border);
	border-radius: 0px;
	padding: 16px;
	overflow-y: auto;
	color: var(--text-color);
	transition: var(--transition);
	box-sizing: border-box;
	height: 100%;
} /* end popup panel */
.bottom_popup:last-child {
	/* last popup panel */
	border-right: none;
} /* end last popup */
.bottom_popup_title {
	/* popup panel title */
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 12px;
	padding: 8px;
	border: 1px solid var(--panel-border);
	color: var(--text-color);
	background-color: var(--panel-bg-hover);
	box-sizing: border-box;
} /* end popup title */
.bottom_popup_content {
	/* popup panel content */
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color);
} /* end popup content */
/* zoom control pill */
.zoom_pill {
	/* zoom control widget */
	width: 48px;
	background-color: var(--control-bg);
	border-radius: 0px;
	display: none;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--panel-border);
	position: fixed;
	top: 250px;
	left: 48px;
	z-index: 800;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: var(--transition);
	box-sizing: border-box;
	box-shadow: none !important;
} /* end zoom pill */
.zoom_btn {
	/* zoom control button */
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: none;
	padding: 0px;
	color: var(--text-color);
	transition: var(--transition);
	flex-direction: column;
} /* end zoom button */
.zoom_btn i {
	/* zoom button icon - 1/3 container size */
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--text-color);
	transition: color 0.3s ease;
} /* end zoom icon */
.zoom_btn:hover {
	/* zoom button hover */
	background: var(--panel-bg-hover);
	color: var(--text-color);
} /* end zoom hover */
.zoom_btn .button_label {
	/* zoom button text label */
	border-radius: 5px;
	font-size: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	border-radius: 5px;
	line-height: 1;
	font-weight: 700;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.3px;
} /* end zoom button label */
.zoom_level_container {
	/* zoom level input container */
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
} /* end zoom level */
.zoom_level_input {
	/* zoom level text input */
	width: 48px;
	height: 48px;
	text-align: center;
	font-weight: 700;
	font-size: 12px;
	color: var(--text-color);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	background-color: var(--input-bg);
	outline: none;
	box-sizing: border-box;
} /* end zoom input */
.zoom_submit {
	/* zoom submit button */
	position: absolute;
	right: -48px;
	width: 48px;
	height: 48px;
	border-radius: 0px;
	background-color: var(--control-bg);
	border: 1px solid var(--panel-border);
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	box-sizing: border-box;
} /* end zoom submit */
.zoom_submit i {
	/* zoom submit icon */
	font-size: 12px;
} /* end submit icon */
/* rotation control pill */
.rotation_pill {
	/* rotation control widget */
	width: 48px;
	background-color: var(--control-bg);
	border-radius: 0px;
	display: none;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--panel-border);
	position: fixed;
	top: 48px;
	left: 48px;
	z-index: 800;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: var(--transition);
	box-sizing: border-box;
} /* end rotation pill */
.rotation_btn {
	/* rotation control button */
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: none;
	padding: 0px;
	color: var(--text-color);
	transition: var(--transition);
	flex-direction: column;
} /* end rotation button */
.rotation_btn i {
	/* rotation button icon - 1/3 container size */
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--text-color);
	transition: color 0.3s ease;
} /* end rotation icon */
.rotation_btn:hover {
	/* rotation button hover */
	background: var(--panel-bg-hover);
	color: var(--text-color);
} /* end rotation hover */
.rotation_btn .button_label {
	/* rotation button text label */
	border-radius: 5px;
	font-size: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	line-height: 1;
	font-weight: 700;
	color: var(--text-color);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	border-radius: 5px;
} /* end rotation button label */
.rotation_level_container {
	/* rotation level input container */
	width: 48px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
} /* end rotation level */
.rotation_level_input {
	/* rotation level text input */
	width: 48px;
	height: 48px;
	text-align: center;
	font-weight: 700;
	font-size: 12px;
	color: var(--text-color);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	background-color: var(--input-bg);
	outline: none;
	box-sizing: border-box;
} /* end rotation input */
.rotation_submit {
	/* rotation submit button */
	position: absolute;
	right: -48px;
	width: 48px;
	height: 48px;
	border-radius: 0px;
	background-color: var(--control-bg);
	border: 1px solid var(--panel-border);
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	box-sizing: border-box;
} /* end rotation submit */
.rotation_submit i {
	/* rotation submit icon */
	font-size: 12px;
} /* end rotation submit icon */
/* cardinal direction display */
#cardinal_direction {
	/* cardinal direction indicator */
	text-align: center;
	font-size: 14px;
	color: var(--text-color);
	margin: 4px 0px;
	font-weight: 500;
	background: var(--input-bg);
	padding: 8px;
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	letter-spacing: 1px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
} /* end cardinal direction */
/* control panel styling */
.control_panel {
	/* expandable control panel */
	position: fixed;
	left: 48px;
	top: 130px;
	background-color: var(--panel-bg);
	border-radius: 0px;
	padding: 16px;
	width: 280px;
	display: none;
	z-index: 999;
	border: 1px solid var(--panel-border);
	transition: opacity 0.3s ease;
	opacity: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-sizing: border-box;
} /* end control panel */
.control_panel.active {
	/* active control panel */
	display: block;
	opacity: 1;
} /* end active panel */
.control_panel_grid {
	/* control panel grid layout */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 12px 0px;
} /* end panel grid */
.control_panel_title {
	/* control panel section title */
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 12px;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end panel title */
.control_panel_title i {
	/* panel title icon */
	font-size: 14px;
	color: var(--text-color);
} /* end title icon */
.control_panel input[type="number"],
.control_panel input[type="text"] {
	/* panel form inputs */
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	margin: 6px 0px;
	font-size: 14px;
	background: var(--input-bg);
	color: var(--text-color);
	transition: var(--transition);
	outline: none;
	min-height: 48px;
	box-sizing: border-box;
} /* end panel inputs */
.control_panel input[type="number"]:focus,
.control_panel input[type="text"]:focus {
	/* focused panel inputs */
	border: 1px solid var(--panel-border);
} /* end input focus */
.control_panel select {
	/* panel select dropdown */
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	margin: 6px 0px;
	font-size: 14px;
	background: var(--input-bg);
	color: var(--text-color);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	padding-right: 32px;
	outline: none;
	min-height: 48px;
	box-sizing: border-box;
} /* end panel select */
.control_panel_row {
	/* panel form row */
	display: flex;
	align-items: center;
	margin: 8px 0px;
	gap: 8px;
} /* end panel row */
.control_panel_row label {
	/* panel row label */
	margin-left: 8px;
	font-size: 14px;
	color: var(--text-color);
} /* end row label */
.reset_btn {
	/* panel reset button */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	font-size: 14px;
	color: var(--text-color);
	cursor: pointer;
	transition: var(--transition);
	margin-top: 10px;
	min-height: 48px;
	box-sizing: border-box;
} /* end reset button */
.reset_btn:hover {
	/* reset button hover */
	background-color: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--panel-border);
} /* end reset hover */
.reset_btn:hover i {
	/* reset button icon hover */
	color: var(--panel-bg);
} /* end reset icon hover */
.reset_btn i {
	/* reset button icon */
	margin-right: 8px;
	font-size: 14px;
	color: var(--text-color);
	transition: var(--transition);
} /* end reset icon */
/* altitude scale component */
.altitude_scale {
	position: fixed;
	right: var(--ui_element_uniform_width);
	top: 48px;
	bottom: 48px;
	width: var(--ui_element_uniform_width);
	display: none;
	z-index: 5;
	border-left: 1px solid var(--panel-border);
	background: none;
	pointer-events: none;
	box-sizing: border-box;
}
.altitude_scale.active {
	/* active altitude scale */
	display: block;
} /* end active altitude */

.measurement_line {
	/* measurement line element */
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	height: 1px;
	background: #ffffff;
	transform: translateY(-50%);
	opacity: 1;
	background: #ffffff;
} /* end measurement line */
.measurement_arrow_left,
.measurement_arrow_right {
	/* measurement arrows */
	position: absolute;
	top: 50%;
	width: 0px;
	height: 0px;
	transform: translateY(-50%);
} /* end arrows */
.measurement_arrow_left {
	/* left measurement arrow */
	left: 0px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 8px solid #ffffff;
	border-right: 8px solid #ffffff;
} /* end left arrow */
.measurement_arrow_right {
	/* right measurement arrow */
	right: 0px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 8px solid #ffffff;
	border-left: 8px solid #ffffff;
} /* end right arrow */
.measurement_value {
	/* measurement value display */
	background: var(--control-bg);
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	border-radius: 0px;
	padding: 4px 12px;
	color: var(--color_text_on_dark_surface);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.6) 50%,
		rgba(0, 0, 0, 0.8) 100%
	);
	border: 1px solid var(--color_border_secondary);
	color: var(--color_text_on_dark_surface);
} /* end measurement value */
/* custom scales wrapper */
.cs_measurement_ruler_wrap {
	position: fixed;
	top: 48px;
	left: 48px;
	right: 48px;
	bottom: 48px;
	width: auto;
	height: auto;
	pointer-events: none;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.3);
} /* end custom scales wrapper */
.cs_measurement_ruler_grid_wrap {
	/* triple scale measurement container with 5x5 grid layout */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	transform: translate(-50%, -50%);
	z-index: 700;
	pointer-events: none;
	display: grid;
	grid-template-columns: repeat(5, 48px);
	grid-template-rows: repeat(5, 48px);
	gap: 0px;
	background: transparent;
	border: none;
	border-radius: 0px;
	display: none;
} /* end triple container */
.cs_measurement_ruler_grid_box {
	/* individual grid cell with uniform white border and semi-transparent background */
	width: 48px;
	height: 48px;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid #ffffff;
	box-sizing: border-box;
	position: relative;
} /* end grid cell */
.cs_measurement_ruler_grid_box::before {
	/* vertical cross line spanning full height of grid cell */
	content: "";
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 100%;
	background: #ffffff;
	box-shadow: none;
} /* end cs_measurement_ruler_grid_box vertical cross line */
.cs_measurement_ruler_grid_box::after {
	/* horizontal cross line spanning full width of grid cell */
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
	width: 100%;
	height: 1px;
	background: #ffffff;
	box-shadow: none;
} /* end cs_measurement_ruler_grid_box horizontal cross line */
.cs_scale_connection_line {
	/* connection line removed - no longer needed */
	display: none;
} /* end connection line */
.cs_measurement_ruler_value_scale {
	position: relative;
	width: 28px;
	height: 1px;
	/* background: rgba(0, 0, 0, 0.3); */
	/* border-radius: 0px; */
	/* box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); */
	align-self: center;
} /* end scale ruler line */

.cs_scale_arrow_line {
	/* horizontal line with arrows above scale container */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 144px;
	height: 1px;
	background: #ffffff;
	z-index: 699;
} /* end scale arrow line */
.cs_scale_arrow_line::before,
.cs_scale_arrow_line::after {
	/* arrow markers at line ends */
	content: "";
	position: absolute;
	width: 0px;
	height: 0px;
	top: 50%;
	transform: translateY(-50%);
	border-style: solid;
	filter: drop-shadow(0px 0px 1px #ffffff);
} /* end arrow markers */
.cs_scale_arrow_line::before {
	/* left arrow pointing outward */
	left: 0px;
	border-width: 3px 6px 3px 0px;
	border-color: transparent #ffffff transparent transparent;
} /* end left arrow */
.cs_scale_arrow_line::after {
	/* right arrow pointing outward */
	right: 0px;
	border-width: 3px 0px 3px 6px;
	border-color: transparent transparent transparent #ffffff;
} /* end right arrow */

.cs_measurement_ruler_line {
	position: absolute;
	top: calc(50% - 24px);
	left: 50%;
	transform: translateX(-50%);
	width: 144px;
	height: 48px;
	z-index: 702;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px;
	box-sizing: border-box;
	border: solid 3px #ffffff;
	border-radius: 7px;
	/* background: rgba(0, 0, 0, 0.3); */
} /* end measurement scale ruler bar container */

.cs_measurement_ruler_container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	height: 240px;
	z-index: 99;
	pointer-events: auto;
	border: 1px solid #ffffff;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.cs_measurement_ruler_value_wrap {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 144px;
	height: 48px;
	z-index: 701;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px;
	box-sizing: border-box;
} /* end measurement scale container */
.cs_measurement_ruler_value_measurement {
	background: rgba(0, 0, 0, 0.3);
	color: var(--color_text_on_dark_surface);
	padding: 10px;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-sizing: border-box;
	text-align: center;
	border-radius: 5px;
	border: solid 1px var(--color_border_secondary);
	position: absolute;
	z-index: 999;
	width: 144px;
	height: 48px;
}
.cs_measurement_ruler_select_wrapper {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 144px;
	z-index: 701;
	pointer-events: auto;
}
.cs_measurement_ruler_unit_select {
	width: 100%;
	height: 48px;
	background: rgba(0, 0, 0, 0.3);
	color: var(--color_text_on_dark_surface);
	border: solid 1px var(--color_border_secondary);
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	padding: 10px 40px 10px 10px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.cs_measurement_ruler_select_arrow {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color_text_on_dark_surface);
	font-size: 16px;
	pointer-events: none;
	transition: transform 0.3s ease;
}
.cs_measurement_ruler_unit_select:focus ~ .cs_measurement_ruler_select_arrow,
.cs_measurement_ruler_select_wrapper:hover .cs_measurement_ruler_select_arrow {
	transform: translateY(-50%) rotate(180deg);
}
/* info container styling */
#info_container {
	/* information display container */
	position: fixed;
	bottom: 96px;
	right: 56px;
	display: none;
	z-index: 705;
	background-color: var(--control-bg);
	border-radius: 0px;
	padding: 12px 16px;
	color: var(--text-color);
	font-size: 12px;
	border: 1px solid var(--panel-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	max-width: calc(100vw - 160px);
	max-height: calc(100vh - 160px);
	overflow: auto;
	transition: var(--transition);
	box-sizing: border-box;
} /* end info container */
.coordinates_title {
	/* coordinates section title */
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--text-color);
	border: 1px solid var(--panel-border);
	padding-bottom: 6px;
	box-sizing: border-box;
} /* end coordinates title */
.coordinates_row {
	/* coordinates display row */
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	position: relative;
	height: 30px;
} /* end coordinates row */
.coordinates_label {
	/* coordinate label text */
	width: 80px;
	font-size: 13px;
	color: var(--text-color);
	opacity: 0.8;
} /* end coordinate label */
.coordinates_value {
	/* coordinate value text */
	font-size: 13px;
	font-family: Consolas, monospace;
	font-weight: 500;
	flex: 1;
	color: var(--text-color);
} /* end coordinate value */
.copy_btn {
	/* copy to clipboard button */
	width: 30px;
	height: 30px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	margin-left: 8px;
	box-sizing: border-box;
} /* end copy button */
.copy_btn:hover {
	/* copy button hover state */
	background-color: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--panel-border);
} /* end copy hover */
.copy_btn.copied {
	/* copied state button */
	background-color: var(--accent-bg);
	border-color: var(--accent-border);
	color: var(--success-color);
} /* end copied state */
.location_controls {
	/* location action controls */
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	border-top: 1px solid var(--panel-border);
	padding-top: 8px;
	box-sizing: border-box;
} /* end location controls */
.location_btn {
	/* location action button */
	flex: 1;
	height: 48px;
	min-height: 48px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	margin: 0px 4px;
	box-sizing: border-box;
} /* end location button */
.location_btn:hover {
	/* location button hover */
	background-color: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--panel-border);
} /* end location hover */
.location_btn.active {
	/* active location button */
	background-color: var(--accent-bg);
	border-color: var(--accent-border);
	color: var(--accent-color);
} /* end active location */

.compass_container {
	/* compass display container */
	width: 48px;
	height: 48px;
	background-color: var(--control-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: var(--transition);
	box-shadow: none !important;
	color: var(--text-color);
} /* end compass container */
.compass_dial {
	/* compass dial background */
	width: 44px;
	height: 44px;
	border: 1px solid var(--text-color);
	box-sizing: border-box;
	border-radius: 50%;
	position: absolute;
	background-color: transparent;
}
.compass_dial::before {
	/* inner circle - 4px smaller */
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 1px solid var(--text-color);
	border-radius: 50%;
	z-index: 1;
} /* end compass dial */
.compass_needle {
	/* compass needle container */
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
} /* end compass needle */
.needle_north {
	/* north needle indicator - clear bg with white border */
	width: 4px;
	height: 16px;
	background-color: transparent;
	border: 1px solid var(--text-color);
	border-radius: 2px;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
} /* end north needle */
.needle_south {
	/* south needle indicator - clear bg with white border */
	width: 4px;
	height: 16px;
	background-color: transparent;
	border: 1px solid var(--text-color);
	border-radius: 2px;
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
} /* end south needle */
.needle_center {
	/* compass center point - white */
	width: 4px;
	height: 4px;
	background-color: var(--text-color);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
} /* end needle center */
.cardinal_indicator,
.bottom_cardinal_indicator,
.azimuth_indicator,
.bearing_indicator,
.bottom_azimuth_indicator,
.bottom_bearing_indicator {
	/* compass direction indicators */
	width: 48px;
	height: 48px;
	background-color: var(--control-bg);
	border: 1px solid #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	position: relative;
	transition: var(--transition);
	box-sizing: border-box;
	box-shadow: none !important;
	z-index: 1013;
} /* end direction indicators */
.indicator_input_container {
	/* container for editable indicators */
	position: relative;
	display: inline-block;
	pointer-events: auto;
	cursor: pointer;
} /* end indicator container */
.indicator_input {
	/* input styling to match indicators */
	background: transparent;
	border: none;
	outline: none;
	color: #ffffff;
	font-size: inherit;
	font-weight: inherit;
	text-align: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: var(--transition);
	pointer-events: auto;
} /* end indicator input */
.indicator_input:focus {
	/* focused input styling */
	cursor: text;
	background-color: var(--control-bg);
} /* end focused input */
.submit_div {
	/* submit button for indicators */
	position: absolute;
	top: 50%;
	left: 100%;
	width: 24px;
	height: 24px;
	background-color: var(--control-bg);
	color: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	z-index: 1014;
	box-shadow: none;
	transition: var(--transition);
	pointer-events: auto;
	transform: translateY(-50%);
	margin-left: 8px;
	opacity: 0.8;
} /* end submit div */
.submit_div:hover {
	/* submit hover state */
	background-color: var(--control-bg-hover);
	transform: translateY(-50%) scale(1.1);
	opacity: 1;
} /* end submit hover */
.azimuth_indicator,
.bearing_indicator {
	/* numeric direction indicators */
	font-size: 14px;
} /* end numeric indicators */
.compass_reset_btn {
	/* compass reset button */
	width: 48px;
	height: 48px;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
	font-size: 16px;
	font-weight: 600;
	position: relative;
	transition: var(--transition);
	box-sizing: border-box;
} /* end reset button */
.compass_reset_btn:hover {
	/* reset button hover */
	background-color: var(--panel-bg-hover);
	border-color: var(--panel-border-hover);
} /* end reset hover */
/* mini map component */
.mini_map_container {
	/* miniature map overlay in top left corner - pointer events none */
	position: fixed;
	top: 48px;
	left: 48px;
	transform: none;
	width: 240px;
	height: 160px;
	border-radius: 0;
	overflow: hidden;
	display: none;
	z-index: 899;
	border: 1px solid var(--text-color);
	background: var(--panel-bg);
	box-sizing: border-box;
	padding: 5px;
	pointer-events: auto;
} /* end mini map */
#mini_map {
	/* mini map canvas contained within rectangular container - pointer events none */
	width: 228px;
	height: 148px;
	border-radius: 0;
	border: 1px solid var(--text-color);
	box-sizing: border-box;
	pointer-events: none;
}
.mini_map_crosshair {
	/* mini map crosshair centered in container */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	pointer-events: none;
} /* end crosshair */
.mini_map_crosshair::after,
.mini_map_crosshair::before {
	/* crosshair lines */
	content: "";
	position: absolute;
	background-color: var(--text-color);
} /* end crosshair lines */
.mini_map_crosshair::before {
	/* horizontal line */
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
} /* end horizontal line */
.mini_map_crosshair::after {
	/* vertical line */
	top: 0;
	left: 50%;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
} /* end vertical line */
.mini_map_controls {
	/* mini map control buttons - round and balanced placement */
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	pointer-events: auto;
	gap: 5px;
} /* end mini map controls */
.mini_map_crosshair {
	/* mini map center crosshair - styled like main map with filters */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 3;
	filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
} /* end mini crosshair */
.mini_map_crosshair::after,
.mini_map_crosshair::before {
	/* crosshair lines - styled like main map */
	content: "";
	position: absolute;
	background: #ffffff;
	filter: brightness(1.2) contrast(1.1);
} /* end crosshair lines */
.mini_map_crosshair::before {
	/* horizontal crosshair line */
	width: 100%;
	height: 1px;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
} /* end horizontal line */
.mini_map_crosshair::after {
	/* vertical crosshair line */
	width: 1px;
	height: 100%;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
} /* end vertical line */
.mini_map_controls {
	/* mini map control buttons - round and balanced placement */
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: auto;
} /* end mini controls */
.mini_zoom_controls {
	/* mini zoom button group */
	display: flex;
	flex-direction: column;
	gap: 2px;
} /* end mini zoom */
.mini_zoom_btn {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	border-radius: 0;
	background: var(--panel-bg);
	border: 1px solid var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	font-size: 16px;
	font-weight: 700;
	box-sizing: border-box;
}
.mini_zoom_btn i {
	font-size: 16px;
}
.mini_layers_btn {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	border-radius: 0;
	background: var(--panel-bg);
	border: 1px solid var(--text-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	font-size: 16px;
	font-weight: 700;
	box-sizing: border-box;
}
.mini_layers_btn i {
	font-size: 16px;
}
.mini_layers_btn.active {
	/* active mini layers */
	background: var(--text-color);
	color: var(--panel-bg);
} /* end active layers */
/* close button component */
.close-button {
	/* generic close button */
	background: none;
	border: 1px solid var(--panel-border);
	cursor: pointer;
	/* color: var(--text-color); */
	/* font-size: 16px; */
	/* font-weight: 700; */
	/* width: 32px; */
	/* height: 32px; */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0px;
	transition: var(--transition);
	box-sizing: border-box;
	color: var(--text-muted);
	font-size: 18px;
	width: 48px;
	height: 48px;
} /* end close button */
.close-button:hover {
	/* close button hover */
	color: var(--panel-bg);
	background: var(--text-color);
	border: 1px solid var(--panel-border);
	color: var(--text-color);
	background: var(--panel-bg-hover);
} /* end close hover */
/* crosshair canvas overlay */
.crosshair_canvas {
	/* crosshair overlay canvas */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	display: none;
} /* end crosshair canvas */
/* theme toggle component */

/* side panel component */
.side-panel {
	/* expandable side panel */
	position: fixed;
	left: 48px;
	top: 48px;
	background: var(--panel-bg);
	border-radius: 0px;
	height: calc(100vh - 96px);
	max-height: calc(100vh - 96px);
	overflow-y: auto;
	z-index: 1001;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	padding: 0px;
	display: none;
	transition: opacity 0.3s ease;
	opacity: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--panel-border);
	border-top: none;
	box-sizing: border-box;
} /* end side panel */
.side-panel.active {
	/* active side panel */
	display: block;
	opacity: 1;
} /* end active panel */
/* panel header styling */
.panel-header {
	/* panel header component */
	margin: 5px;
	/* padding: 5px; */
	color: var(--text-color);
	font-size: 16px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	background-color: var(--panel-bg);
	position: sticky;
	top: 0px;
	z-index: 2;
	height: 48px;
	/* min-height: 48px; */
} /* end panel header */
.panel-content {
	/* panel main content */
	max-height: calc(85vh - 100px);
	padding: 0px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
} /* end panel content */
/* panel tabs component */
.panel-tabs {
	/* panel tab navigation */
	display: flex;
	background: var(--panel-bg);
	position: sticky;
	top: 48px;
	z-index: 2;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	margin: 5px;
} /* end panel tabs */
.panel-tab {
	/* individual panel tab */
	flex: 1;
	text-align: center;
	padding: 12px 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	border-bottom: 3px solid transparent;
	transition: var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	background: var(--panel-bg);
} /* end panel tab */
.panel-tab i {
	/* panel tab icon */
	margin-right: 6px;
	font-size: 14px;
} /* end tab icon */
.panel-tab.active {
	/* active panel tab */
	color: var(--text-color);
	border-bottom-color: var(--text-color);
	background-color: var(--accent-bg);
	font-weight: 700;
} /* end active tab */
.panel-tab:hover:not(.active) {
	/* panel tab hover */
	background-color: var(--text-color);
	color: var(--panel-bg);
} /* end tab hover */
/* coordinates container */
.coordinates_container {
	/* hidden - coordinates now integrated into popup system */
	display: none !important;
} /* end coordinates container */
/* tab content sections */
.tab-content {
	/* tab content container */
	display: none;
	flex: 1;
	flex-direction: column;
} /* end tab content */
.tab-content.active {
	/* active tab content */
	display: flex;
} /* end active content */
/* search container in panels */
.search-container {
	background: var(--panel-bg);
	z-index: 1;
	border-bottom: 1px solid var(--panel-border);
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: 100%;
} /* end search container */
.search-box {
	width: 100%;
	padding: 12px;
	padding-left: 44px;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	border-radius: 0px;
	font-size: 14px;
	font-weight: 500;
	transition: var(--transition);
	background: var(--input-bg);
	color: var(--text-color);
	height: 48px;
} /* end search box */
.search-box:focus {
	/* focused search box */
	border-color: var(--text-color);
	/* box-shadow: 0px 0px 0px 3px var(--accent-bg); */
} /* end search focus */
/* layer item styling */
.layer-item {
	/* layer list item */
	padding: 8px 16px 8px 48px;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	transition: var(--transition);
	height: 48px;
	background: var(--panel-bg);
	border-left: 3px solid transparent;
	margin: 5px;
} /* end layer item */
.layer-item:hover {
	/* layer item hover */
	background-color: var(--panel-bg-hover);
	background-color: var(--text-color);
	color: var(--panel-bg);
	border-left-color: var(--panel-bg);
} /* end layer hover */
.layer-item label {
	/* layer item label */
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	width: 100%;
	color: var(--text-color);
	font-size: 13px;
	font-weight: 500;
} /* end layer label */
.layer-item:hover label {
	/* layer label hover */
	color: var(--panel-bg);
} /* end label hover */
.layer-checkbox {
	/* margin-right: 12px; */
	width: 38px;
	height: 38px;
	/* margin-right: 10px; */
	/* width: 16px; */
	/* height: 16px; */
	cursor: pointer;
	accent-color: var(--text-color);
} /* end layer checkbox */
.layer-icon {
	/* layer icon display */
	width: 24px;
	height: 24px;
	border-radius: 0px;
	background-color: var(--panel-bg-hover);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	color: var(--text-color);
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	font-size: 12px;
} /* end layer icon */
.layer-item:hover .layer-icon {
	/* layer icon hover */
	background-color: var(--panel-bg);
	color: var(--text-color);
	border-color: var(--panel-bg);
} /* end icon hover */
.layer-item.layer-hidden {
	/* hidden layer item */
	display: none;
} /* end hidden layer */
.layer-item.layer-visible {
	/* visible layer item */
	display: flex;
} /* end visible layer */
/* layer category header */
.layer-category-header {
	/* category header container */
	margin: 5px;
	user-select: none;
	transition: var(--transition);
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	background: var(--panel-bg);
	height: 48px;
} /* end category header */
.layer-category-header:hover .layer-category-content {
	/* category header hover */
	background-color: var(--panel-bg-hover);
} /* end header hover */
.layer-category-content {
	/* category content wrapper */
	padding: 0px;
	background: var(--panel-bg);
	box-sizing: border-box;
	font-weight: 600;
	display: flex;
	align-items: center;
	height: 48px;
	position: relative;
	transition: var(--transition);
} /* end category content */
.layer-category-arrow-box {
	/* category arrow button */
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--panel-bg);
	border-right: 1px solid var(--panel-border);
	box-sizing: border-box;
	cursor: pointer;
	transition: var(--transition);
} /* end arrow box */
.layer-category-arrow-box:hover {
	/* arrow box hover */
	background: var(--text-color);
	color: var(--panel-bg);
} /* end arrow hover */
.layer-category-arrow {
	/* category arrow icon */
	font-size: 16px;
	color: inherit;
	transition: transform 0.2s ease;
	transform: rotate(0deg);
} /* end category arrow */
.layer-category-header.expanded .layer-category-arrow {
	/* expanded arrow rotation */
	transform: rotate(90deg);
} /* end expanded arrow */
.layer-category-checkbox-box {
	/* category checkbox container */
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--panel-bg);
	border-right: 1px solid var(--panel-border);
	cursor: pointer;
	transition: var(--transition);
} /* end checkbox box */
.layer-category-checkbox-box:hover {
	/* checkbox box hover */
	background: var(--text-color);
	color: var(--panel-bg);
} /* end checkbox hover */
.layer-category-checkbox {
	/* category checkbox input */
	width: 38px;
	height: 38px;
	cursor: pointer;
	accent-color: var(--text-color);
} /* end category checkbox */
.layer-category-checkbox:indeterminate {
	/* indeterminate checkbox state */
	background-color: var(--accent-bg);
	border: 1px solid var(--text-color);
} /* end indeterminate */
.layer-category-checkbox:indeterminate::after {
	/* indeterminate checkbox indicator */
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background: var(--text-color);
	margin: 7px auto;
} /* end indeterminate indicator */
.layer-category-info {
	/* category information area */
	display: flex;
	align-items: center;
	flex: 1;
	padding: 12px 16px;
	background: var(--accent-bg);
	cursor: pointer;
	transition: var(--transition);
} /* end category info */
.layer-category-layers {
	/* category layers container */
	max-height: 0px;
	overflow: hidden;
	background: var(--panel-bg);
	transition: max-height 0.3s ease;
} /* end category layers */
.layer-category-header.expanded .layer-category-layers {
	/* expanded category layers */
	max-height: 1000px;
} /* end expanded layers */
.layer-category-layers.category-hidden {
	/* hidden category layers */
	display: none !important;
} /* end hidden category */
.layer-category-count {
	/* category layer count */
	margin-left: auto;
	font-size: 12px;
	color: var(--text-muted);
	background: var(--panel-bg);
	padding: 2px 8px;
	border-radius: 0px;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end category count */
/* features navigation */
.features-nav-container {
	/* features navigation container */
	padding: 0px;
	background: var(--panel-bg);
	border-bottom: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end features nav */
.features-nav {
	/* features navigation bar */
	display: flex;
	background: var(--panel-bg);
} /* end features nav bar */
.features-nav-button {
	/* features navigation button */
	flex: 1;
	text-align: center;
	padding: 12px 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
	border-bottom: 3px solid transparent;
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	max-height: 48px;
	background: var(--panel-bg);
	border-right: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end features button */
.features-nav-button:last-child {
	/* last features button */
	border-right: none;
} /* end last features */
.features-nav-button i {
	/* features button icon */
	font-size: 20px;
	margin-bottom: 4px;
} /* end features icon */
.features-nav-button.active {
	/* active features button */
	color: var(--text-color);
	border-bottom-color: var(--text-color);
	background-color: var(--accent-bg);
	font-weight: 700;
} /* end active features */
.features-nav-button:hover:not(.active) {
	/* features button hover */
	background-color: var(--text-color);
	color: var(--panel-bg);
} /* end features hover */
.features-content {
	/* features content area */
	padding: 16px;
	max-height: 400px;
	overflow-y: auto;
} /* end features content */
.feature-content {
	/* individual feature content */
	display: none;
} /* end feature content */
.feature-content.active {
	/* active feature content */
	display: block;
} /* end active feature */
.feature-list {
	/* feature items list */
	display: flex;
	flex-direction: column;
	gap: 8px;
} /* end feature list */
.feature-item {
	/* individual feature item */
	display: flex;
	align-items: center;
	padding: 12px;
	min-height: 48px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	border-radius: 0px;
	transition: var(--transition);
} /* end feature item */
.feature-item:hover {
	/* feature item hover */
	background: var(--text-color);
	color: var(--panel-bg);
} /* end feature hover */
.feature-icon {
	/* feature item icon */
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-bg);
	border-radius: 0px;
	margin-right: 12px;
	color: var(--text-color);
	font-size: 16px;
} /* end feature icon */
.feature-item:hover .feature-icon {
	/* feature icon hover */
	background: var(--panel-bg);
	color: var(--text-color);
} /* end icon hover */
.feature-info {
	/* feature information area */
	flex: 1;
} /* end feature info */
.feature-name {
	/* feature name text */
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 2px;
	color: inherit;
} /* end feature name */
.feature-coords {
	/* feature coordinates text */
	font-size: 12px;
	color: var(--text-muted);
	font-family: monospace;
} /* end feature coords */
.feature-item:hover .feature-coords {
	/* feature coords hover */
	color: var(--panel-bg);
	opacity: 0.8;
} /* end coords hover */
.feature-visibility {
	/* feature visibility control */
	margin-left: 12px;
} /* end feature visibility */
.feature-visibility input[type="checkbox"] {
	/* feature visibility checkbox */
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--text-color);
} /* end visibility checkbox */
.no-features {
	/* no features message */
	text-align: center;
	color: var(--text-muted);
	font-style: italic;
	padding: 20px;
} /* end no features */
/* basemap options */
.basemap-option {
	display: flex;
	align-items: center;
	padding: 5px;
	cursor: pointer;
	border-bottom: 1px solid var(--panel-border);
	box-sizing: border-box;
	transition: var(--transition);
	min-height: 60px;
} /* end basemap option */
.basemap-option:hover {
	/* basemap option hover */
	background-color: var(--panel-bg-hover);
} /* end basemap hover */
.basemap-option.active {
	/* active basemap option */
	background-color: var(--text-color);
	color: var(--panel-bg);
	border: 1px solid var(--text-color);
} /* end active basemap */
.basemap-option.active .basemap-name {
	/* active basemap name */
	color: var(--panel-bg);
	font-weight: 700;
} /* end active name */
.basemap-option.active .basemap-description {
	/* active basemap description */
	color: var(--panel-bg);
	opacity: 0.8;
} /* end active description */
.basemap-option.active .basemap-thumbnail {
	/* active basemap thumbnail */
	border: 1px solid var(--panel-bg);
	/* box-shadow: 0px 0px 0px 1px var(--text-color); */
} /* end active thumbnail */
.basemap-thumbnail {
	/* basemap preview thumbnail */
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	border-radius: 0px;
	margin-right: 5px;
	background-size: cover;
	background-position: center;
} /* end basemap thumbnail */
.basemap-info {
	/* basemap information area */
	flex-grow: 1;
} /* end basemap info */
.basemap-name {
	/* basemap name text */
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 4px;
	color: var(--text-color);
} /* end basemap name */
.basemap-description {
	/* basemap description text */
	font-size: 12px;
	color: var(--text-muted);
} /* end basemap description */
/* marker styling */
.marker {
	/* generic map marker */
	width: 48px;
	height: 48px;
	background: var(--color_background_primary);
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
} /* end marker */
.marker-content {
	/* marker content area */
	width: 32px;
	height: 32px;
	border-radius: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
} /* end marker content */
.user-marker .marker-content {
	/* user location marker */
	background: #4285f4;
} /* end user marker */
.geocoder-marker .marker-content {
	/* geocoder result marker */
	background: #666666;
} /* end geocoder marker */
.custom_marker,
.map_marker,
.search_result_marker {
	/* custom map markers */
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	background-color: var(--accent-bg);
	border: 1px solid var(--text-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
	font-size: 18px;
	cursor: pointer;
	transition: transform 0.2s ease;
	position: relative;
} /* end custom markers */
.custom_marker::before,
.search_result_marker::before {
	/* marker label tooltip */
	content: attr(data-label);
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.7);
	color: var(--color_text_on_dark_surface);
	padding: 2px 6px;
	border-radius: 0px;
	font-size: 12px;
	white-space: nowrap;
	border: 1px solid var(--panel-border);
	/* box-shadow: 0px 0px 0px 1px #ffffff; */
	z-index: 2;
} /* end marker tooltip */
.search_result_marker {
	/* search result specific marker */
	background-color: rgba(0, 120, 255, 0.8);
} /* end search marker */
.custom_marker:hover,
.map_marker:hover,
.search_result_marker:hover {
	/* marker hover state */
	background-color: var(--text-color);
	color: var(--panel-bg);
} /* end marker hover */
/* marker action buttons */
.cs_marker_button_container {
	/* marker actions overlay */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10;
} /* end marker buttons */
.cs_marker_action_button {
	/* marker action button base */
	position: absolute;
	touch-action: manipulation;
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	background-color: var(--text-color);
	border: 1px solid var(--panel-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--panel-bg);
	font-size: 16px;
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	z-index: 3;
	/* box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3); */
} /* end action button */
.cs_marker_action_button:hover {
	/* action button hover */
	transform: scale(1.1);
	/* box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4); */
} /* end button hover */
/* marker action button grid layout system */
.cs_marker_button_container {
	/* button container with compass circumference positioning */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	height: 240px;
	pointer-events: none;
	z-index: 2;
} /* end button container */
.cs_marker_button_visible {
	/* visible marker button */
	opacity: 1;
	transform: scale(1);
} /* end button visible */
/* compass circumference position: north */
.cs_marker_edit_button {
	/* marker edit button - north position on compass circumference */
	top: 3px;
	left: 50%;
	transform: translateX(-50%) scale(0.5);
	background-color: #4caf50;
	border-color: var(--panel-bg);
} /* end edit button */
.cs_marker_edit_button:hover {
	/* edit button hover */
	background-color: #45a049;
	transform: translateX(-50%) scale(1.1);
} /* end edit hover */
.cs_marker_edit_button.cs_marker_button_visible {
	/* visible edit button */
	transform: translateX(-50%) scale(1);
} /* end visible edit */
/* compass circumference position: northeast */
.cs_marker_drag_button {
	/* marker drag button - northeast position on compass circumference */
	top: 27px;
	right: 27px;
	transform: scale(0.5);
	background-color: #2196f3;
	border-color: var(--panel-bg);
} /* end drag button */
.cs_marker_drag_button:hover {
	/* drag button hover */
	background-color: #1976d2;
	transform: scale(1.1);
} /* end drag hover */
.cs_marker_drag_button.cs_marker_button_visible {
	/* visible drag button */
	transform: scale(1);
} /* end visible drag */
.cs_marker_drag_button.cs_marker_button_active {
	/* active drag button */
	background-color: #ff9800;
	border-color: var(--panel-bg);
} /* end active drag */
/* compass circumference position: east */
.cs_marker_center_camera_button {
	/* marker center camera button - east position on compass circumference */
	top: 50%;
	right: 3px;
	transform: translateY(-50%) scale(0.5);
	background-color: #ff5722;
	border-color: var(--panel-bg);
} /* end center camera button */
.cs_marker_center_camera_button:hover {
	/* center camera button hover */
	background-color: #e64a19;
	transform: translateY(-50%) scale(1.1);
} /* end center camera hover */
.cs_marker_center_camera_button.cs_marker_button_visible {
	/* visible center camera button */
	transform: translateY(-50%) scale(1);
} /* end visible center camera */
/* compass circumference position: southeast */
.cs_marker_gps_button {
	/* marker gps button - southeast position on compass circumference */
	bottom: 27px;
	right: 27px;
	transform: scale(0.5);
	background-color: #9c27b0;
	border-color: var(--panel-bg);
} /* end gps button */
.cs_marker_gps_button:hover {
	/* gps button hover */
	background-color: #7b1fa2;
	transform: scale(1.1);
} /* end gps hover */
.cs_marker_gps_button.cs_marker_button_visible {
	/* visible gps button */
	transform: scale(1);
} /* end visible gps */
/* compass circumference position: south */
.cs_marker_delete_button {
	/* marker delete button - south position on compass circumference */
	bottom: 3px;
	left: 50%;
	transform: translateX(-50%) scale(0.5);
	background-color: #f44336;
	border-color: var(--panel-bg);
} /* end delete button */
.cs_marker_delete_button:hover {
	/* delete button hover */
	background-color: #da190b;
	transform: translateX(-50%) scale(1.1);
} /* end delete hover */
.cs_marker_delete_button.cs_marker_button_visible {
	/* visible delete button */
	transform: translateX(-50%) scale(1);
} /* end visible delete */
/* compass circumference position: southwest */
.cs_marker_measure_button {
	/* marker measure button - southwest position on compass circumference */
	bottom: 27px;
	left: 27px;
	transform: scale(0.5);
	background-color: #ff9800;
	border-color: var(--panel-bg);
} /* end measure button */
.cs_marker_measure_button:hover {
	/* measure button hover */
	background-color: #f57c00;
	transform: scale(1.1);
} /* end measure hover */
.cs_marker_measure_button.cs_marker_button_visible {
	/* visible measure button */
	transform: scale(1);
} /* end visible measure */
/* compass circumference position: west */
.cs_marker_info_button {
	/* marker info button - west position on compass circumference */
	top: 50%;
	left: 3px;
	transform: translateY(-50%) scale(0.5);
	background-color: #607d8b;
	border-color: var(--panel-bg);
} /* end info button */
.cs_marker_info_button:hover {
	/* info button hover */
	background-color: #455a64;
	transform: translateY(-50%) scale(1.1);
} /* end info hover */
.cs_marker_info_button.cs_marker_button_visible {
	/* visible info button */
	transform: translateY(-50%) scale(1);
} /* end visible info */
/* compass circumference position: northwest */
.cs_marker_share_button {
	/* marker share button - northwest position on compass circumference */
	top: 27px;
	left: 27px;
	transform: scale(0.5);
	background-color: #795548;
	border-color: var(--panel-bg);
} /* end share button */
.cs_marker_share_button:hover {
	/* share button hover */
	background-color: #5d4037;
	transform: scale(1.1);
} /* end share hover */
.cs_marker_share_button.cs_marker_button_visible {
	/* visible share button */
	transform: scale(1);
} /* end visible share */
/* secondary ring positions aligned with compass inner ring circumference */
.cs_marker_north_outer_button {
	/* north outer button positioned on compass inner ring circumference */
	top: 48px;
	left: 50%;
	transform: translateX(-50%) scale(0.5);
} /* end north outer position */
.cs_marker_northeast_outer_button {
	/* northeast outer button positioned on compass inner ring circumference */
	top: 72px;
	right: 72px;
	transform: translate(50%, -50%) scale(0.5);
} /* end northeast outer position */
.cs_marker_east_outer_button {
	/* east outer button positioned on compass inner ring circumference */
	top: 50%;
	right: 48px;
	transform: translateY(-50%) scale(0.5);
} /* end east outer position */
.cs_marker_southeast_outer_button {
	/* southeast outer button positioned on compass inner ring circumference */
	bottom: 72px;
	right: 72px;
	transform: translate(50%, 50%) scale(0.5);
} /* end southeast outer position */
.cs_marker_south_outer_button {
	/* south outer button positioned on compass inner ring circumference */
	bottom: 48px;
	left: 50%;
	transform: translateX(-50%) scale(0.5);
} /* end south outer position */
.cs_marker_southwest_outer_button {
	/* southwest outer button positioned on compass inner ring circumference */
	bottom: 72px;
	left: 72px;
	transform: translate(-50%, 50%) scale(0.5);
} /* end southwest outer position */
.cs_marker_west_outer_button {
	/* west outer button positioned on compass inner ring circumference */
	top: 50%;
	left: 48px;
	transform: translateY(-50%) scale(0.5);
} /* end west outer position */
.cs_marker_northwest_outer_button {
	/* northwest outer button positioned on compass inner ring circumference */
	top: 72px;
	left: 72px;
	transform: translate(-50%, -50%) scale(0.5);
} /* end northwest outer position */
/* visible state classes for outer buttons */
.cs_marker_north_outer_button.cs_marker_button_visible {
	/* visible north outer button */
	transform: translateX(-50%) scale(1);
} /* end north outer visible */
.cs_marker_northeast_outer_button.cs_marker_button_visible {
	/* visible northeast outer button */
	transform: translate(50%, -50%) scale(1);
} /* end northeast outer visible */
.cs_marker_east_outer_button.cs_marker_button_visible {
	/* visible east outer button */
	transform: translateY(-50%) scale(1);
} /* end east outer visible */
.cs_marker_southeast_outer_button.cs_marker_button_visible {
	/* visible southeast outer button */
	transform: translate(50%, 50%) scale(1);
} /* end southeast outer visible */
.cs_marker_south_outer_button.cs_marker_button_visible {
	/* visible south outer button */
	transform: translateX(-50%) scale(1);
} /* end south outer visible */
.cs_marker_southwest_outer_button.cs_marker_button_visible {
	/* visible southwest outer button */
	transform: translate(-50%, 50%) scale(1);
} /* end southwest outer visible */
.cs_marker_west_outer_button.cs_marker_button_visible {
	/* visible west outer button */
	transform: translateY(-50%) scale(1);
} /* end west outer visible */
.cs_marker_northwest_outer_button.cs_marker_button_visible {
	/* visible northwest outer button */
	transform: translate(-50%, -50%) scale(1);
} /* end northwest outer visible */
/* glowing golden light ring effect for selected markers */
.cs_marker_golden_glow_ring {
	/* golden luminous ring animation for selected marker */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	border: 2px solid #ffd700;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: none;
	animation: cs_golden_pulse 2s ease-in-out infinite;
	pointer-events: none;
	z-index: 1000;
} /* end golden glow ring */
@keyframes cs_golden_pulse {
	0% {
		opacity: 1;
		box-shadow: none;
	}
	50% {
		opacity: 0.7;
		box-shadow: none;
	}
	100% {
		opacity: 1;
		box-shadow: none;
	}
} /* end golden pulse animation */
/* dark radial overlay for marker button container */
.cs_marker_dark_radial_overlay {
	/* transparent overlay for marker button container */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 50%;
} /* end dark radial overlay */
.cs_marker_dark_radial_overlay.active {
	/* active state for dark overlay */
	opacity: 1;
} /* end active overlay */
/* loading spinner component */
.loading-spinner {
	/* loading indicator overlay */
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	background-color: var(--panel-bg);
	padding: 20px;
	border-radius: 0px;
	text-align: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end loading spinner */
.loading-spinner.active {
	/* active loading spinner */
	display: block;
} /* end active spinner */
.spinner {
	/* spinning animation element */
	width: 40px;
	height: 40px;
	margin: 0px auto 10px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: var(--text-color);
	border-radius: 0px;
	animation: spin 1s linear infinite;
} /* end spinner */
@keyframes spin {
	/* spinner rotation animation */
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
} /* end spin animation */
/* toast notification component */
.toast-container {
	/* toast notifications container */
	position: fixed;
	bottom: 48px;
	left: 48px;
	right: 48px;
	z-index: 1000;
} /* end toast container */
.toast {
	/* individual toast notification */
	background-color: var(--panel-bg);
	color: var(--text-color);
	padding: 12px 16px;
	border-radius: 0px;
	margin-top: 0px;
	display: flex;
	align-items: center;
	max-width: 320px;
	animation: fadeIn 0.3s, fadeOut 0.3s 4.7s;
	opacity: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
} /* end toast */
.toast.active {
	/* active toast notification */
	opacity: 1;
} /* end active toast */
.toast-icon {
	/* toast notification icon */
	margin-right: 12px;
	font-size: 18px;
} /* end toast icon */
@keyframes fadeIn {
	/* toast fade in animation */
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
} /* end fade in */
@keyframes fadeOut {
	/* toast fade out animation */
	from {
		opacity: 1;
		transform: translateY(0px);
	}
	to {
		opacity: 0;
		transform: translateY(-20px);
	}
} /* end fade out */
/* error container styling */
#map_error_container {
	/* map error display */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	background-color: var(--control-panel-bg);
	border-radius: 0px;
	padding: 20px;
	color: var(--text-color);
	border: 1px solid var(--error-color);
	max-width: 80%;
	text-align: center;
	display: none;
} /* end error container */
/* debug container styling */
#debug_container {
	/* debug information display */
	position: fixed;
	top: 130px;
	right: 74px;
	background: var(--control-panel-bg);
	border-radius: 0px;
	padding: 10px;
	color: var(--text-color);
	border: 1px solid var(--panel-border);
	box-sizing: border-box;
	max-width: 300px;
	z-index: 2004;
	font-size: 12px;
	display: none;
} /* end debug container */
@keyframes shake {
	/* shake error animation */
	0%,
	100% {
		transform: translateX(0px);
	}
	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-5px);
	}
	20%,
	40%,
	60%,
	80% {
		transform: translateX(5px);
	}
} /* end shake animation */
/* maplibre gl overrides */
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right {
	/* hide default maplibre controls */
	display: none !important;
} /* end maplibre hide */
#map {
	/* map touch behavior */
	touch-action: pan-x pan-y;
} /* end map touch */
.maplibregl-canvas {
	/* maplibre canvas touch */
	touch-action: pan-x pan-y;
} /* end canvas touch */
.maplibregl-popup {
	/* maplibre popup styling - constrained within navbar frame */
	max-width: calc(100vw - 96px);
	max-height: calc(100vh - 96px);
	/* Ensure popup stays within 48px navbar boundaries */
}
.maplibregl-popup .maplibregl-popup-content {
	/* Limit popup content dimensions */
	max-width: calc(100vw - 112px);
	max-height: calc(100vh - 112px);
	overflow: auto;
} /* end popup width */
.maplibregl-popup-content {
	/* popup content styling */
	background-color: var(--control-panel-bg) !important;
	border: 1px solid var(--panel-border) !important;
	box-sizing: border-box;
	border-radius: 0px !important;
	color: var(--text-color) !important;
	font-size: 13px !important;
	padding: 12px !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
} /* end popup content */
.maplibregl-popup-tip {
	/* popup tip styling */
	border-top-color: var(--control-panel-bg) !important;
	border-bottom-color: var(--control-panel-bg) !important;
} /* end popup tip */
.popup_content {
	/* popup text content */
	font-weight: 500;
} /* end popup text */
/* utility classes */
.hidden {
	/* hidden element utility */
	display: none !important;
} /* end hidden */
/* grid overlay component */
.grid_overlay_container {
	/* grid overlay display */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 999;
	display: grid;
	grid-template-columns: repeat(5, 48px);
	grid-template-rows: repeat(5, 48px);
	gap: 0px;
} /* end grid overlay */

.grid_overlay {
	/* individual grid cell */
	width: 48px;
	height: 48px;
	border: 1px solid #ffffff;
	box-sizing: border-box;
	background-color: transparent;
	position: relative;
} /* end grid cell */
.grid_overlay::before {
	/* vertical cross line for grid overlay cells */
	content: "";
	position: absolute;
	top: 0px;
	left: 50%;
	width: 1px;
	height: 100%;
	background: #ffffff;
	box-shadow: none;
	transform: translateX(-50%);
	pointer-events: none;
} /* end grid_overlay vertical cross line */
.grid_overlay::after {
	/* horizontal cross line for grid overlay cells */
	content: "";
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: #ffffff;
	box-shadow: none;
	transform: translateY(-50%);
	pointer-events: none;
} /* end grid_overlay horizontal cross line */
/* crosshair dom component */
.crosshair_dom_container {
	/* crosshair overlay container - within navbar frame */
	position: fixed;
	top: 48px;
	left: 48px;
	right: 48px;
	bottom: 48px;
	pointer-events: none;
	z-index: 900;
} /* end crosshair container */
.crosshair_element {
	/* crosshair center element */
	position: fixed;
	width: 24px;
	height: 24px;
	pointer-events: none;
	z-index: 1000;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
} /* end crosshair element */
.crosshair_element::before,
.crosshair_element::after {
	/* crosshair lines with css filter styling */
	content: "";
	position: absolute;
	background: transparent;
	backdrop-filter: invert(1) contrast(2) brightness(2);
	-webkit-backdrop-filter: invert(1) contrast(2) brightness(2);
	border: 1px solid #ffffff;
	box-shadow: none;
} /* end crosshair lines */
.crosshair_element::before {
	/* horizontal crosshair line */
	top: 50%;
	left: calc(-50vw + 48px);
	width: calc(100vw - 96px);
	height: 1px;
	transform: translateY(-50%);
} /* end horizontal line */
.crosshair_element::after {
	/* vertical crosshair line */
	left: 50%;
	top: calc(-50vh + 48px);
	width: 1px;
	height: calc(100vh - 96px);
	transform: translateX(-50%);
} /* end vertical line */
/* altitude scale dom component */
.altitude_scale_dom {
	position: fixed;
	right: var(--ui_element_uniform_width);
	top: 48px;
	bottom: 48px;
	width: var(--ui_element_uniform_width);
	z-index: 5;
	background: none;
	pointer-events: none;
}
.altitude_scale_background {
	/* altitude scale background */
	position: absolute;
	top: 48px;
	left: 0px;
	right: 0px;
	bottom: 48px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
} /* end scale background */
.altitude_scale_title_box {
	/* altitude scale title */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 48px;
	height: 48px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
} /* end title box */
.altitude_title {
	/* altitude title text */
	font: bold 14px var(--font-family), Arial;
	color: var(--text-color);
	text-align: center;
	font-size: 11px;
	line-height: 1;
} /* end altitude title */
.altitude_unit {
	/* altitude unit text */
	font: 12px var(--font-family), Arial;
	color: var(--text-color);
	text-align: center;
	font-size: 10px;
	line-height: 1;
} /* end altitude unit */
.altitude_scale_ticks {
	/* altitude scale tick marks */
	position: absolute;
	top: 48px;
	left: 0px;
	right: 0px;
	bottom: 48px;
} /* end scale ticks */
.altitude_tick_major {
	/* major altitude tick */
	position: absolute;
	left: 0px;
	width: 15px;
	height: 2px;
	background: var(--text-color);
	display: flex;
	align-items: center;
} /* end major tick */
.altitude_tick_label {
	/* altitude tick label */
	position: absolute;
	left: 20px;
	color: var(--text-color);
	font: bold 12px var(--font-family), Arial;
	font-size: 10px;
	white-space: nowrap;

	transform: translateY(-50%);
} /* end tick label */
.altitude_current_marker {
	/* current altitude marker */
	position: absolute;
	left: 0px;
	right: 0px;
	height: 2px;
	background: var(--text-color);
	z-index: 10;
} /* end current marker */
.altitude_value_box {
	/* altitude value display */
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 48px;
	height: 48px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
} /* end value box */
.altitude_current_value {
	/* current altitude value */
	font: bold 14px var(--font-family), Arial;
	color: var(--text-color);
	text-align: center;
	font-size: 12px;
	line-height: 1;
} /* end current value */
.altitude_current_unit {
	/* current altitude unit */
	font: 12px var(--font-family), Arial;
	color: var(--text-color);
	text-align: center;
	font-size: 10px;
	line-height: 1;
} /* end current unit */
/* ruler dom component */
.ruler_dom_container {
	/* dom based ruler container */
	position: fixed;
	left: 74px;
	right: 74px;
	bottom: 74px;
	height: 48px;
	z-index: 5;
	pointer-events: none;
} /* end ruler dom */
.ruler_background_dom {
	/* ruler background element */
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 48px;
	background: var(--panel-bg-alpha);
	border: 1px solid var(--panel-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
} /* end ruler background */
.ruler_ticks_dom {
	/* ruler tick marks container */
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 48px;
} /* end ruler ticks */
.ruler_tick {
	/* individual ruler tick */
	position: absolute;
	bottom: 0px;
	width: 1px;
	background: var(--text-color);
} /* end ruler tick */
.ruler_tick_major {
	/* major ruler tick */
	height: 25px;
} /* end major tick */
.ruler_tick_medium {
	/* medium ruler tick */
	height: 18px;
} /* end medium tick */
.ruler_tick_minor {
	/* minor ruler tick */
	height: 12px;
} /* end minor tick */
.ruler_tick_label {
	/* ruler tick label */
	position: absolute;
	bottom: 28px;
	transform: translateX(-50%);
	font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--text-color);
	font-size: 10px;
} /* end tick label */
/* mini compass component */
.mini_compass_container {
	/* mini compass display with increased space between rings */
	width: 48px;
	height: 48px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 0px;
} /* end mini compass */
.mini_compass_dial {
	/* mini compass inner ring - 4px smaller than outer */
	width: 24px;
	height: 24px;
	border: 1px solid var(--text-color);
	border-radius: 50%;
	position: absolute;
	background-color: transparent;
} /* end mini dial */
.mini_compass_needle {
	/* mini compass needle with rounded ends and 2px spacing */
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
} /* end mini needle */
.mini_needle_north {
	/* mini north needle - 4px thick rounded bar touching edge */
	width: 2px;
	height: 13px;
	background-color: var(--text-color);
	border-radius: 5px;
	position: absolute;
	top: 13px;
} /* end mini north */
.mini_needle_south {
	/* mini south needle - 4px thick rounded bar touching edge */
	width: 2px;
	height: 13px;
	background-color: var(--text-color);
	border-radius: 5px;
	position: absolute;
	bottom: 13px;
} /* end mini south */
.mini_needle_center {
	/* mini needle center - 1px thick opaque line */
	width: 1px;
	height: 1px;
	background-color: var(--text-color);
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
} /* end mini center */
/* large compass overlay */
.large_compass_overlay {
	/* large compass overlay container */
	background-color: rgba(0, 0, 0, 0.1);
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 998;
	display: none;
	pointer-events: none;
} /* end large overlay */
.large_compass_container {
	/* large compass display matching grid size with most transparent outer ring */
	background-color: rgba(0, 0, 0, 0.1);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	transform: translate(-50%, -50%);
	/* background: rgba(0, 0, 0, 0.1); */
	border: 3px solid #ffffff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
} /* end large container */
.large_compass_outermost_ring {
	/* large compass outermost ring - 5th layer with least transparency */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.2);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
} /* end outermost ring */
.large_compass_outer_ring {
	/* large compass outer ring - 4th layer with low transparency */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 192px;
	height: 192px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.15);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
} /* end outer ring */
.large_compass_inner_ring {
	/* large compass inner ring - 3rd layer with medium transparency */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 144px;
	height: 144px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.1);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
} /* end inner ring */
.large_compass_center_circle {
	/* large compass center circle - 2nd layer with higher transparency */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	height: 96px;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.05);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
} /* end center circle */
.large_compass_innermost_circle {
	/* large compass innermost circle - 1st layer completely transparent center */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	transform: translate(-50%, -50%);
	background: transparent;
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
} /* end innermost circle */
.large_compass_dial {
	/* large compass dial */
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	background: none;
} /* end large dial */
.large_compass_dial::before {
	/* compass dial markings with detailed degree tick marks every 10 degrees */
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		#ffffff 1deg,
		transparent 2deg,
		transparent 8deg,
		#ffffff 9deg,
		transparent 11deg,
		transparent 18deg,
		#ffffff 19deg,
		transparent 21deg,
		transparent 28deg,
		#ffffff 29deg,
		transparent 31deg,
		transparent 38deg,
		#ffffff 39deg,
		transparent 41deg,
		transparent 48deg,
		#ffffff 49deg,
		transparent 51deg,
		transparent 58deg,
		#ffffff 59deg,
		transparent 61deg,
		transparent 68deg,
		#ffffff 69deg,
		transparent 71deg,
		transparent 78deg,
		#ffffff 79deg,
		transparent 81deg,
		transparent 88deg,
		#ffffff 89deg,
		transparent 91deg,
		transparent 98deg,
		#ffffff 99deg,
		transparent 101deg,
		transparent 108deg,
		#ffffff 109deg,
		transparent 111deg,
		transparent 118deg,
		#ffffff 119deg,
		transparent 121deg,
		transparent 128deg,
		#ffffff 129deg,
		transparent 131deg,
		transparent 138deg,
		#ffffff 139deg,
		transparent 141deg,
		transparent 148deg,
		#ffffff 149deg,
		transparent 151deg,
		transparent 158deg,
		#ffffff 159deg,
		transparent 161deg,
		transparent 168deg,
		#ffffff 169deg,
		transparent 171deg,
		transparent 178deg,
		#ffffff 179deg,
		transparent 181deg,
		transparent 188deg,
		#ffffff 189deg,
		transparent 191deg,
		transparent 198deg,
		#ffffff 199deg,
		transparent 201deg,
		transparent 208deg,
		#ffffff 209deg,
		transparent 211deg,
		transparent 218deg,
		#ffffff 219deg,
		transparent 221deg,
		transparent 228deg,
		#ffffff 229deg,
		transparent 231deg,
		transparent 238deg,
		#ffffff 239deg,
		transparent 241deg,
		transparent 248deg,
		#ffffff 249deg,
		transparent 251deg,
		transparent 258deg,
		#ffffff 259deg,
		transparent 261deg,
		transparent 268deg,
		#ffffff 269deg,
		transparent 271deg,
		transparent 278deg,
		#ffffff 279deg,
		transparent 281deg,
		transparent 288deg,
		#ffffff 289deg,
		transparent 291deg,
		transparent 298deg,
		#ffffff 299deg,
		transparent 301deg,
		transparent 308deg,
		#ffffff 309deg,
		transparent 311deg,
		transparent 318deg,
		#ffffff 319deg,
		transparent 321deg,
		transparent 328deg,
		#ffffff 329deg,
		transparent 331deg,
		transparent 338deg,
		#ffffff 339deg,
		transparent 341deg,
		transparent 348deg,
		#ffffff 349deg,
		transparent 351deg,
		transparent 358deg,
		#ffffff 359deg,
		transparent 360deg
	);
	mask: radial-gradient(circle, transparent 85%, #ffffff 90%, #ffffff 100%);
	-webkit-mask: radial-gradient(
		circle,
		transparent 85%,
		#ffffff 90%,
		#ffffff 100%
	);
} /* end dial markings */
.large_compass_dial::after {
	/* large inner circle - 4px smaller */
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	bottom: 8px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	z-index: 1;
}
.large_compass_needle {
	position: absolute;
	width: 240px;
	height: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%, -50%);
} /* end large needle */
/* large needle north styles */
.large_needle_north {
	/* clear bg with white border */
	position: absolute;
	top: 0px;
	left: 50%;
	width: 3px;
	height: 96px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 2px;
	transform: translateX(-50%);
	z-index: 1004;
} /* end large_needle_north */
/* large needle south styles */
.large_needle_south {
	/* clear bg with white border */
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 3px;
	height: 96px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 2px;
	transform: translateX(-50%);
	z-index: 1004;
} /* end large_needle_south */
/* north needle letter indicator */
.large_needle_north_indicator {
	/* 48px circular indicator with N letter at north needle tip */
	position: absolute;
	top: 3px;
	left: 50%;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
	z-index: 1005;
} /* end north indicator */
/* south needle letter indicator */
.large_needle_south_indicator {
	/* 48px circular indicator with S letter at south needle tip */
	position: absolute;
	bottom: 3px;
	left: 50%;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	color: #ffffff;
	z-index: 1005;
} /* end south indicator */
.large_needle_center {
	/* center dot - white */
	width: 4px;
	height: 4px;
	background-color: #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1005;
} /* end large center */
/* large compass secondary navbar */
.large_compass_navbar {
	/* secondary navigation bar for large compass */
	position: fixed;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: 400px;
	height: 48px;
	background-color: var(--panel-bg);
	border: 1px solid #ffffff;
	border-radius: 0px;
	display: none;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 0px 20px;
	z-index: var(--z_index_navbar);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	box-sizing: border-box;
} /* end large compass navbar */
.large_compass_nav_button {
	/* large compass navigation button */
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	background-color: var(--panel-bg);
	border: 1px solid #ffffff;
	border-radius: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #ffffff;
	font-size: 16px;
	transition: var(--transition);
	box-sizing: border-box;
} /* end large compass nav button */
.large_compass_nav_button:hover {
	/* large compass nav button hover */
	background-color: var(--panel-bg-hover);
	border-color: var(--panel-border-hover);
} /* end nav button hover */
.large_compass_nav_title {
	/* large compass navigation title */
	flex: 1;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
} /* end nav title */
/* basemap search container override */
#basemap-tab > div.search-container > div {
	/* basemap search override */
	position: relative;
	width: 100%;
} /* end basemap search */

#layers-tab > div.search-container > div {
	/* layer search override */
	position: relative;
	width: 100%;
}

#layers-panel > div.panel-header > span {
	padding: 5px;
}
/* Container overlay for compass circles with dark overlay */
.cs_compass_overlay_container {
	position: fixed;
	top: 48px;
	bottom: 48px;
	left: 48px;
	right: 48px;
	z-index: 999;
	display: none;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid #ffffff;
} /* end cs_compass_overlay_container */
.cs_compass_overlay_container.active {
	display: block;
}
/* Top horizontal bar - extended to touch left and right navbars */
.cs_compass_top_bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	border: 1px solid #ffffff;
	border-radius: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_top_bar */
/* Bottom horizontal bar - extended to touch left and right navbars */
.cs_compass_bottom_bar {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	border: 1px solid #ffffff;
	border-radius: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_bottom_bar */
/* Left vertical bar - extended to touch top and bottom navbars */
.cs_compass_left_bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 48px;
	border: 1px solid #ffffff;
	border-radius: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_left_bar */
/* Right vertical bar - extended to touch top and bottom navbars */
.cs_compass_right_bar {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 48px;
	border: 1px solid #ffffff;
	border-radius: 0;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_right_bar */
/* New outer ring that touches top and bottom navbars */
.cs_compass_outer_ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100vh - 96px);
	height: calc(100vh - 96px);
	min-width: 400px;
	min-height: 400px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_outer_ring */
/* compass north south line styles */
.cs_compass_north_south_line {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: calc(100vh - 96px);
	min-height: 400px;
	background: linear-gradient(to bottom, #ff0000 0%, #ffff00 100%);
	transform: translate(-50%, -50%);
	transform-origin: center center;
	pointer-events: none;
	z-index: 999;
} /* end cs_compass_north_south_line */
/* north south line container styles */
.cs_compass_north_south_line_container {
	/* north south line container styles */
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: calc(
		100vh - 96px
	); /* Adjusted height to match the red vertical line */
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-radius: 24px;
	background-color: transparent;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Place indicators at the ends */
	align-items: center;
	pointer-events: none;
	z-index: 999;
} /* end cs_compass_north_south_line_container */
/* north indicator styles */
.cs_compass_indicator_n {
	/* styles for the north indicator within the compass */
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.1);
	border: 1px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	z-index: 1010;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
} /* end cs_compass_indicator_n */
/* south indicator styles */
.cs_compass_indicator_s {
	/* styles for the south indicator within the compass */
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 24px;
	margin: 0;
	background-color: rgba(0, 0, 0, 0.1);
	border: 1px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	z-index: 1010;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
} /* end cs_compass_indicator_s */

/* Viewport-sized circle extending to navbar boundaries - 96px smaller */
.cs_compass_viewport_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100vh - 192px);
	height: calc(100vh - 192px);
	min-width: 304px;
	min-height: 304px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.05);
} /* end cs_compass_viewport_circle */
/* Center circle (48x48px) */
.cs_compass_center_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.01);
} /* end cs_compass_center_circle */
/* inner center circle (240x240px) - 3rd ring */
.cs_compass_inner_center_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 240px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1010;
	background-color: rgba(0, 0, 0, 0.02);
} /* end cs_compass_inner_center_circle */
/* 48px wide vertical bar extending to fill height of resized outermost circle */
.cs_compass_center_bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 48px;
	height: calc(100vh - 96px);
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	border-radius: 24px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 999;
} /* end cs_compass_center_bar */
/* gradient fade effects for compass center bar ends */
.cs_compass_center_bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: transparent;
	border-radius: 24px 24px 0 0;
	pointer-events: none;
} /* end cs_compass_center_bar::before */
.cs_compass_center_bar::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: transparent;
	border-radius: 0 0 24px 24px;
	pointer-events: none;
} /* end cs_compass_center_bar::after */
/* Clear circles with 1px white borders for vertical bar ends */
.cs_compass_top_circle {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 50%;
	transform: translateX(-50%);
	pointer-events: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1015;
	background-color: rgba(0, 0, 0, 0.01);
} /* end cs_compass_top_circle */
.cs_compass_indicators_container {
	position: absolute;
	top: 48px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 96px;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	z-index: 1012;
	pointer-events: auto;
	background-color: rgba(0, 0, 0, 0.01);
}
.cs_compass_indicators_container .bearing_indicator,
.cs_compass_indicators_container .azimuth_indicator {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	background-color: rgba(0, 0, 0, 0.01);
	border: 1px solid #ffffff;
	border-radius: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}
.cs_compass_bottom_indicators_container {
	position: absolute;
	bottom: 48px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 96px;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	z-index: 1007;
	pointer-events: auto;
}
.cs_compass_bottom_indicators_container .bottom_bearing_indicator,
.cs_compass_bottom_indicators_container .bottom_azimuth_indicator {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	max-width: 48px;
	max-height: 48px;
	background-color: rgba(0, 0, 0, 0.01);
	border: 1px solid #ffffff;
	border-radius: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}
.cs_compass_top_circle .cardinal_indicator {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 34px;
	margin: 0;
	transform: none;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	z-index: 1010;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}
.cs_compass_bottom_circle {
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 34px;
	transform: translateX(-50%);
	pointer-events: auto;
	z-index: 1014;
} /* end cs_compass_bottom_circle */
.cs_compass_bottom_circle .bottom_cardinal_indicator {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 34px;
	margin: 0;
	transform: none;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	z-index: 1011;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
} /* end bottom circle cardinal indicator */
/* Medium circle with 48px gap from center circle - adjusted for new sizing */
.cs_compass_medium_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 144px;
	height: 144px;
	border: 1px solid #ffffff;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.06);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 1012;
} /* end cs_compass_medium_circle */
/* Large circle with 48px gap from viewport circle - 96px smaller */
.cs_compass_large_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100vh - 288px);
	height: calc(100vh - 288px);
	border: 1px solid #ffffff;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.07);
	transform: translate(-50%, -50%);
	pointer-events: none;
	min-width: 208px;
	min-height: 208px;
	z-index: 1011;
} /* end cs_compass_large_circle */
/* small circle inside large circle */
.cs_compass_small_circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(100vh - 384px);
	height: calc(100vh - 384px);
	border: 1px solid #ffffff;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.04);
	transform: translate(-50%, -50%);
	pointer-events: none;
	min-width: 112px;
	min-height: 112px;
	z-index: 1010;
} /* end cs_compass_small_circle */
/* Cross section for compass - white 1px lines extending to outermost circle */
.cs_compass_cross_section_horizontal {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0.7) 0%,
		#ffffff 50%,
		rgba(255, 255, 255, 0.7) 100%
	);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1005;
} /* end cs_compass_cross_section_horizontal */
.cs_compass_cross_section_vertical {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.7) 0%,
		#ffffff 50%,
		rgba(255, 255, 255, 0.7) 100%
	);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1005;
} /* end cs_compass_cross_section_vertical */
.large_compass_overlay.rings-hidden .cs_compass_outer_ring,
.large_compass_overlay.rings-hidden .cs_compass_top_bar,
.large_compass_overlay.rings-hidden .cs_compass_bottom_bar,
.large_compass_overlay.rings-hidden .cs_compass_left_bar,
.large_compass_overlay.rings-hidden .cs_compass_right_bar,
.large_compass_overlay.rings-hidden .cs_compass_viewport_circle,
.large_compass_overlay.rings-hidden .cs_compass_center_bar,
.large_compass_overlay.rings-hidden .cs_compass_large_circle,
.large_compass_overlay.rings-hidden .cs_compass_medium_circle,
.large_compass_overlay.rings-hidden .cs_compass_center_circle,
.large_compass_overlay.rings-hidden .cs_compass_inner_center_circle,
.large_compass_overlay.rings-hidden .cs_compass_cross_section_horizontal,
.large_compass_overlay.rings-hidden .cs_compass_cross_section_vertical {
	display: none;
}
.large_compass_red_line {
	position: absolute;
	top: 48px;
	left: 50%;
	width: 1px;
	height: calc(50% - 48px);
	background-color: red;
	transform: translateX(-50%);
	z-index: 1006;
}
/* Speed Limit Overlay - Enhanced US DOT style */
.speed_limit_overlay {
	position: fixed;
	top: 58px;
	right: 10px;
	width: 64px;
	height: 72px;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.speed_limit_overlay.visible {
	display: flex;
}
.speed_limit_sign {
	width: 56px;
	height: 64px;
	background: #ffffff;
	border: 4px solid #cc0000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
}
.speed_limit_sign.loading {
	border-color: #999999;
}
.speed_limit_sign.no_data {
	border-color: #666666;
	opacity: 0.6;
}
.speed_limit_value {
	font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
	font-size: 22px;
	font-weight: 900;
	color: #000000;
	line-height: 1;
	letter-spacing: -1px;
}
.speed_limit_value.small {
	font-size: 16px;
}
.speed_limit_unit {
	font-family: Arial, sans-serif;
	font-size: 8px;
	font-weight: 700;
	color: #000000;
	text-transform: uppercase;
	margin-top: 2px;
	letter-spacing: 0.5px;
}
.speed_limit_sign.loading .speed_limit_value {
	font-size: 12px;
	color: #666666;
}
.speed_limit_sign.loading .speed_limit_value::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #999999;
	border-top-color: transparent;
	border-radius: 50%;
	animation: speed_spin 0.8s linear infinite;
}
@keyframes speed_spin {
	to {
		transform: rotate(360deg);
	}
}
/* US-style rectangular sign variant - Official DOT styling */
.speed_limit_sign.us_style {
	border-radius: 6px;
	border: 3px solid #000000;
	width: 56px;
	height: 68px;
	flex-direction: column;
	padding: 4px;
	background: #ffffff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.speed_limit_sign.us_style .speed_limit_label {
	font-family: "Arial Narrow", Arial, sans-serif;
	font-size: 7px;
	font-weight: 700;
	color: #000000;
	text-transform: uppercase;
	line-height: 1.1;
	margin-bottom: 2px;
	text-align: center;
}
.speed_limit_sign.us_style .speed_limit_value {
	font-size: 28px;
	font-weight: 900;
	margin-top: 0;
	letter-spacing: -1px;
}
/* Dark mode adjustments */
[data-theme="dark"] .speed_limit_sign {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
	background: #f5f5f5;
}
/* Sliding Menu Styles */
.sliding_menu {
	position: fixed;
	top: 48px;
	height: calc(100vh - 96px);
	max-height: calc(100vh - 96px);
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	z-index: 10005;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.sliding_menu_left {
	left: 48px;
	width: 280px;
	transform: translateX(calc(-100% - 48px));
	border-top: none;
}
.sliding_menu_left.open {
	transform: translateX(0);
}
.sliding_menu_right {
	right: 48px;
	width: 280px;
	transform: translateX(calc(100% + 48px));
	border-top: none;
}
.sliding_menu_right.open {
	transform: translateX(0);
}
.sliding_menu_header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	min-height: 48px;
	box-sizing: border-box;
	flex-shrink: 0;
	background: var(--panel-bg);
}
.sliding_menu_header .sliding_menu_title {
	flex: 1;
}
.sliding_menu_header_right {
	flex-direction: row;
	justify-content: space-between;
}
.sliding_menu_header_right .sliding_menu_title {
	flex: 1;
}
.sliding_menu_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
	margin: 0;
}
.sliding_menu_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
	color: var(--text-color);
	transition: var(--transition);
}
.sliding_menu_close:hover {
	background: var(--accent-bg);
}
.sliding_menu_content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 8px 0;
	padding-bottom: 20px;
	-webkit-overflow-scrolling: touch;
}
.sliding_menu_item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	cursor: pointer;
	transition: var(--transition);
	color: var(--text-color);
	font-size: 14px;
	border: none;
	background: transparent;
	width: 100%;
	text-align: left;
}
.sliding_menu_item:hover {
	background: var(--accent-bg);
}
.sliding_menu_item.active {
	background: var(--text-color);
	color: var(--panel-bg);
}
.sliding_menu_item i {
	width: 20px;
	text-align: center;
	font-size: 16px;
}
.sliding_menu_item span {
	flex: 1;
}
.sliding_menu_divider {
	height: 1px;
	background: var(--panel-border);
	margin: 8px 16px;
}
.sliding_menu_section_title {
	padding: 8px 16px 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.sliding_menu_toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	cursor: pointer;
	transition: var(--transition);
	color: var(--text-color);
	font-size: 14px;
}
.sliding_menu_toggle:hover {
	background: var(--accent-bg);
}
.sliding_menu_toggle_label {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sliding_menu_toggle_label i {
	width: 20px;
	text-align: center;
	font-size: 16px;
}
.sliding_menu_switch {
	width: 40px;
	height: 22px;
	background: var(--panel-border);
	border-radius: 11px;
	position: relative;
	transition: var(--transition);
}
.sliding_menu_switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: var(--panel-bg);
	border-radius: 50%;
	transition: var(--transition);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sliding_menu_toggle.active .sliding_menu_switch {
	background: var(--text-color);
}
.sliding_menu_toggle.active .sliding_menu_switch::after {
	left: 20px;
}
.menu_overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu_overlay.visible {
	opacity: 1;
	visibility: visible;
}
/* Menu button active state */
.menu_corner_container.menu_open .menu_button {
	background: var(--text-color);
	color: var(--panel-bg);
}
/* View Controls Panel Styles */
.view_controls_panel {
	position: fixed;
	top: 48px;
	left: 48px;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	height: calc(100vh - 96px);
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	z-index: 1500;
	display: none;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.view_controls_panel.active {
	display: flex;
}
.view_controls_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	min-height: 48px;
	background: var(--panel-bg);
	flex-shrink: 0;
}
.view_controls_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}
.view_controls_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 4px;
	color: var(--text-color);
	transition: var(--transition);
}
.view_controls_close:hover {
	background: var(--accent-bg);
}
.view_controls_tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--panel-border);
	flex-shrink: 0;
}
.view_controls_tab {
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-color);
	border: none;
	background: transparent;
	border-right: 1px solid var(--panel-border);
	transition: var(--transition);
}
.view_controls_tab:last-child {
	border-right: none;
}
.view_controls_tab:hover {
	background: var(--accent-bg);
}
.view_controls_tab.active {
	background: var(--text-color);
	color: var(--panel-bg);
}
.view_controls_tab i {
	font-size: 16px;
}
.view_controls_content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px;
	display: none;
}
.view_controls_content.active {
	display: block;
}
.vc_control_block {
	border: 1px solid var(--panel-border);
	background: var(--accent-bg);
	margin-bottom: 12px;
	padding: 12px;
}
.vc_block_label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13px;
	color: var(--text-color);
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--panel-border);
}
.vc_input_row {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	height: 40px;
	margin-bottom: 8px;
}
.vc_input_btn {
	background: var(--panel-bg);
	border: none;
	color: var(--text-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	transition: var(--transition);
}
.vc_input_btn:first-child {
	border-right: 1px solid var(--panel-border);
}
.vc_input_btn:last-child {
	border-left: 1px solid var(--panel-border);
}
.vc_input_btn:hover {
	background: var(--accent-bg);
}
.vc_input_field {
	border: none;
	text-align: center;
	padding: 8px;
	background: var(--panel-bg);
	color: var(--text-color);
	font-size: 14px;
	outline: none;
	width: 100%;
}
.vc_input_field:focus {
	background: var(--accent-bg);
}
.vc_action_btn {
	width: 100%;
	height: 40px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	color: var(--text-color);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--transition);
}
.vc_action_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.vc_select_field {
	width: 100%;
	height: 40px;
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	color: var(--text-color);
	font-size: 13px;
	padding: 0 12px;
	cursor: pointer;
	margin-bottom: 8px;
}
.vc_direction_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 8px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
}
.vc_direction_btn {
	height: 44px;
	background: var(--accent-bg);
	border: 1px solid var(--panel-border);
	color: var(--text-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: var(--transition);
}
.vc_direction_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.vc_direction_center {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
}
.vc_distance_row {
	display: grid;
	grid-template-columns: 1fr 80px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	height: 40px;
	margin-bottom: 8px;
}
.vc_distance_select {
	border: none;
	border-left: 1px solid var(--panel-border);
	background: var(--accent-bg);
	color: var(--text-color);
	padding: 0 8px;
	cursor: pointer;
	font-size: 13px;
}
.vc_angle_input {
	display: none;
	width: 100%;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	text-align: center;
	font-size: 14px;
	margin-bottom: 8px;
}
.vc_angle_input.visible {
	display: block;
}

/* ========================================
         Aerial Overlay Panel Styles
         ======================================== */
.overlay_panel {
	position: fixed;
	top: 48px;
	left: 48px;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	height: calc(100vh - 96px);
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	z-index: 1500;
	display: none;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.overlay_panel.active {
	display: flex;
}
.overlay_panel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	min-height: 48px;
	background: var(--panel-bg);
	flex-shrink: 0;
}
.overlay_panel_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}
.overlay_panel_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	border: 1px solid var(--panel-border);
}
.overlay_panel_close:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_panel_content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
/* Upload area styling */
.overlay_upload_area {
	padding: 24px 16px;
	border-bottom: 1px solid var(--panel-border);
	text-align: center;
	background: var(--accent-bg);
	cursor: pointer;
	transition: var(--transition);
	min-height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.overlay_upload_area:hover,
.overlay_upload_area.drag_over {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_upload_icon {
	font-size: 32px;
	color: var(--text-muted);
	transition: var(--transition);
}
.overlay_upload_area:hover .overlay_upload_icon,
.overlay_upload_area.drag_over .overlay_upload_icon {
	color: var(--panel-bg);
}
.overlay_upload_text {
	font-size: 14px;
	font-weight: 500;
}
.overlay_upload_subtext {
	font-size: 12px;
	color: var(--text-muted);
}
.overlay_upload_area:hover .overlay_upload_subtext,
.overlay_upload_area.drag_over .overlay_upload_subtext {
	color: var(--panel-bg);
}
/* Overlay items list */
.overlay_list_container {
	padding: 8px;
}
.overlay_list_item {
	border: 1px solid var(--panel-border);
	margin-bottom: 8px;
	background: var(--panel-bg);
}
.overlay_item_header {
	display: flex;
	align-items: center;
	padding: 8px;
	gap: 8px;
	background: var(--accent-bg);
	border-bottom: 1px solid var(--panel-border);
	min-height: 56px;
}
.overlay_item_thumbnail {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	overflow: hidden;
}
.overlay_item_thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.overlay_item_info {
	flex: 1;
	overflow: hidden;
}
.overlay_item_name {
	font-weight: 600;
	font-size: 13px;
	color: var(--text-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.overlay_item_stats {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}
.overlay_item_actions {
	display: flex;
	gap: 4px;
}
.overlay_item_btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.overlay_item_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_item_btn.active {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_item_btn.danger:hover {
	background: #f44336;
	border-color: #f44336;
	color: #fff;
}
.overlay_item_btn.expand {
	background: transparent;
	border: none;
}
.overlay_item_content {
	padding: 12px;
	background: var(--panel-bg);
}
.overlay_item_footer {
	font-size: 10px;
	color: var(--text-muted);
	padding: 8px;
	text-align: center;
	line-height: 1.4;
	background: var(--accent-bg);
	border-top: 1px solid var(--panel-border);
}
/* Overlay control groups */
.overlay_control_group {
	padding: 12px;
	border: 1px solid var(--panel-border);
	margin-bottom: 12px;
	background: var(--accent-bg);
}
.overlay_control_title {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: center;
}
.overlay_control_row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 8px;
}
.overlay_control_row:last-child {
	margin-bottom: 0;
}
.overlay_control_input {
	width: 64px;
	height: 40px;
	padding: 4px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	font-size: 13px;
	text-align: center;
}
.overlay_control_btn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.overlay_control_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_control_btn.danger:hover {
	background: #f44336;
	border-color: #f44336;
	color: #fff;
}
.overlay_control_slider {
	width: 100%;
	height: 8px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--panel-border);
	outline: none;
	cursor: pointer;
}
.overlay_control_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	background: var(--text-color);
	cursor: pointer;
}
.overlay_control_slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--text-color);
	cursor: pointer;
	border: none;
}
/* Movement gamepad grid */
.overlay_gamepad {
	display: grid;
	grid-template-columns: repeat(3, 40px);
	grid-template-rows: repeat(3, 40px);
	gap: 4px;
	justify-content: center;
	margin-top: 8px;
}
.overlay_gamepad_btn {
	width: 40px;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.overlay_gamepad_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_gamepad_btn.up {
	grid-column: 2;
	grid-row: 1;
}
.overlay_gamepad_btn.left {
	grid-column: 1;
	grid-row: 2;
}
.overlay_gamepad_btn.right {
	grid-column: 3;
	grid-row: 2;
}
.overlay_gamepad_btn.down {
	grid-column: 2;
	grid-row: 3;
}
.overlay_gamepad_center {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--text-muted);
	border: 1px solid var(--panel-border);
	background: var(--accent-bg);
}
.overlay_control_unit {
	font-size: 12px;
	color: var(--text-muted);
}
/* Overlay stats */
.overlay_stats {
	font-size: 10px;
	color: var(--text-muted);
	padding: 8px;
	text-align: center;
	line-height: 1.4;
	background: var(--accent-bg);
	border-top: 1px solid var(--panel-border);
}
/* Export section */
.overlay_export_section {
	padding: 16px;
	border-top: 1px solid var(--panel-border);
	background: var(--panel-bg);
	margin-top: auto;
}
.overlay_export_toggle {
	width: 100%;
	height: 48px;
	background: #9c27b0;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--transition);
	box-shadow: 0 0 20px rgba(156, 39, 176, 0.4);
}
.overlay_export_toggle:hover {
	opacity: 0.9;
}
.overlay_export_controls {
	display: none;
	margin-top: 12px;
	border: 1px solid var(--panel-border);
}
.overlay_export_controls.visible {
	display: block;
}
.overlay_export_options {
	display: flex;
	gap: 4px;
	padding: 8px;
	border-bottom: 1px solid var(--panel-border);
}
.overlay_export_option {
	flex: 1;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.overlay_export_option:hover,
.overlay_export_option.active {
	background: #9c27b0;
	color: #fff;
	border-color: #9c27b0;
}
.overlay_export_execute {
	width: 100%;
	height: 48px;
	background: #4caf50;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--transition);
}
.overlay_export_execute:hover {
	opacity: 0.9;
}
/* Export progress modal */
.overlay_export_modal {
	position: fixed;
	top: 48px;
	left: 48px;
	right: 48px;
	bottom: 48px;
	background: rgba(0, 0, 0, 0.8);
	z-index: 10020;
	display: none;
	align-items: center;
	justify-content: center;
}
.overlay_export_modal.visible {
	display: flex;
}
.overlay_export_modal_content {
	background: var(--panel-bg);
	padding: 24px;
	border: 1px solid var(--panel-border);
	text-align: center;
	min-width: 300px;
	max-width: calc(100vw - 160px);
	max-height: calc(100vh - 160px);
	overflow: auto;
	backdrop-filter: blur(15px);
}
.overlay_export_progress {
	width: 100%;
	height: 8px;
	background: var(--panel-border);
	margin: 16px 0;
	overflow: hidden;
}
.overlay_export_progress_bar {
	height: 100%;
	background: #9c27b0;
	width: 0%;
	transition: width 0.3s ease;
}

/* ========================================
         File Manager Panel Styles
         ======================================== */
.filemanager_panel {
	position: fixed;
	top: 48px;
	left: 48px;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	height: calc(100vh - 96px);
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	z-index: 1500;
	display: none;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.filemanager_panel.active {
	display: flex;
}
.filemanager_panel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	min-height: 48px;
	background: var(--panel-bg);
	flex-shrink: 0;
}
.filemanager_panel_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}
.filemanager_panel_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	border: 1px solid var(--panel-border);
}
.filemanager_panel_close:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_panel_tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid var(--panel-border);
}
.filemanager_panel_tab {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	background: var(--panel-bg);
	border-bottom: 2px solid transparent;
	transition: var(--transition);
}
.filemanager_panel_tab.active {
	color: var(--text-color);
	border-bottom-color: var(--text-color);
	background: var(--accent-bg);
}
.filemanager_panel_tab:hover:not(.active) {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_panel_content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.filemanager_tab_content {
	display: none;
	flex-direction: column;
	height: 100%;
}
.filemanager_tab_content.active {
	display: flex;
}
/* File upload section */
.filemanager_upload_area {
	padding: 20px 16px;
	text-align: center;
	background: var(--accent-bg);
	cursor: pointer;
	transition: var(--transition);
	border-bottom: 1px solid var(--panel-border);
	min-height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.filemanager_upload_area:hover,
.filemanager_upload_area.drag_over {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_upload_icon {
	font-size: 28px;
	color: var(--text-muted);
	transition: var(--transition);
}
.filemanager_upload_area:hover .filemanager_upload_icon,
.filemanager_upload_area.drag_over .filemanager_upload_icon {
	color: var(--panel-bg);
}
.filemanager_upload_text {
	font-size: 13px;
	font-weight: 500;
}
.filemanager_upload_subtext {
	font-size: 11px;
	color: var(--text-muted);
}
.filemanager_upload_area:hover .filemanager_upload_subtext,
.filemanager_upload_area.drag_over .filemanager_upload_subtext {
	color: var(--panel-bg);
}
/* Project list */
.filemanager_project_list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.filemanager_project_item {
	border: 1px solid var(--panel-border);
	margin-bottom: 8px;
	background: var(--panel-bg);
}
.filemanager_project_header {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	align-items: center;
	padding: 12px;
	cursor: pointer;
	transition: var(--transition);
	gap: 12px;
	min-height: 48px;
}
.filemanager_project_header:hover {
	background: var(--accent-bg);
}
.filemanager_project_header.active {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_project_color {
	width: 12px;
	height: 12px;
	border: 1px solid var(--panel-border);
}
.filemanager_project_info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.filemanager_project_name {
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.filemanager_project_stats {
	font-size: 11px;
	color: var(--text-muted);
}
.filemanager_project_header.active .filemanager_project_stats {
	color: var(--panel-bg);
	opacity: 0.8;
}
.filemanager_project_actions {
	display: flex;
	gap: 4px;
}
.filemanager_project_btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.filemanager_project_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_project_btn.danger:hover {
	background: #f44336;
	border-color: #f44336;
	color: #fff;
}
.filemanager_project_header.active .filemanager_project_btn {
	border-color: var(--panel-bg);
	color: var(--panel-bg);
	background: transparent;
}
.filemanager_project_header.active .filemanager_project_btn:hover {
	background: var(--panel-bg);
	color: var(--text-color);
}
/* Feature list */
.filemanager_feature_list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.filemanager_feature_item {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	align-items: center;
	padding: 10px 12px;
	gap: 10px;
	border: 1px solid var(--panel-border);
	margin-bottom: 6px;
	background: var(--panel-bg);
	cursor: pointer;
	transition: var(--transition);
	min-height: 44px;
}
.filemanager_feature_item:hover {
	background: var(--accent-bg);
}
.filemanager_feature_icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	border: 1px solid var(--panel-border);
	background: var(--accent-bg);
}
.filemanager_feature_info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.filemanager_feature_name {
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.filemanager_feature_type {
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
}
.filemanager_feature_actions {
	display: flex;
	gap: 4px;
}
.filemanager_feature_btn {
	width: 28px;
	height: 28px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.filemanager_feature_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_feature_btn.danger:hover {
	background: #f44336;
	border-color: #f44336;
	color: #fff;
}
/* Active project header */
.filemanager_active_project {
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	background: var(--accent-bg);
}
.filemanager_active_project_title {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.filemanager_active_project_name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-color);
}
/* Add project/feature buttons */
.filemanager_add_btn {
	width: 100%;
	height: 44px;
	border: 2px dashed var(--panel-border);
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--transition);
	margin: 8px;
	width: calc(100% - 16px);
}
.filemanager_add_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
	border-color: var(--text-color);
}
/* Export buttons */
.filemanager_export_section {
	padding: 12px;
	border-top: 1px solid var(--panel-border);
	background: var(--panel-bg);
	display: flex;
	gap: 6px;
}
.filemanager_export_btn {
	flex: 1;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: var(--transition);
}
.filemanager_export_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
/* Empty state */
.filemanager_empty_state {
	padding: 40px 20px;
	text-align: center;
	color: var(--text-muted);
}
.filemanager_empty_icon {
	font-size: 48px;
	margin-bottom: 16px;
	opacity: 0.5;
}
.filemanager_empty_text {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
}
.filemanager_empty_subtext {
	font-size: 12px;
}
/* Modal styles */
.filemanager_modal_overlay {
	position: fixed;
	top: 48px;
	left: 48px;
	right: 48px;
	bottom: 48px;
	background: rgba(0, 0, 0, 0.7);
	z-index: 10030;
	display: none;
	align-items: center;
	justify-content: center;
}
.filemanager_modal_overlay.visible {
	display: flex;
}
.filemanager_modal {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	width: 360px;
	max-width: calc(100vw - 160px);
	max-height: calc(100vh - 160px);
	overflow: auto;
}
.filemanager_modal_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid var(--panel-border);
}
.filemanager_modal_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
}
.filemanager_modal_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	border: 1px solid var(--panel-border);
	transition: var(--transition);
}
.filemanager_modal_close:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_modal_content {
	padding: 16px;
}
.filemanager_modal_field {
	margin-bottom: 16px;
}
.filemanager_modal_label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
}
.filemanager_modal_input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--panel-border);
	background: var(--input-bg);
	color: var(--text-color);
	font-size: 14px;
}
.filemanager_modal_input:focus {
	border-color: var(--text-color);
	outline: none;
}
.filemanager_modal_actions {
	display: flex;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid var(--panel-border);
}
.filemanager_modal_btn {
	flex: 1;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: var(--transition);
}
.filemanager_modal_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_modal_btn.primary {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_modal_btn.primary:hover {
	opacity: 0.9;
}
.filemanager_modal_btn.danger {
	background: #f44336;
	color: #fff;
	border-color: #f44336;
}
.filemanager_modal_btn.danger:hover {
	opacity: 0.9;
}
/* Progress indicator */
.filemanager_progress {
	padding: 16px;
	border: 1px solid var(--panel-border);
	margin: 8px;
	background: var(--accent-bg);
	display: none;
}
.filemanager_progress.visible {
	display: block;
}
.filemanager_progress_text {
	font-size: 12px;
	margin-bottom: 8px;
	color: var(--text-color);
}
.filemanager_progress_bar_container {
	height: 8px;
	background: var(--panel-border);
	overflow: hidden;
}
.filemanager_progress_bar {
	height: 100%;
	background: var(--text-color);
	width: 0%;
	transition: width 0.3s ease;
}

/* ========================================
   Overlay Panel Styles
   ======================================== */
.overlay_panel {
	position: fixed;
	top: 48px;
	left: 48px;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	height: calc(100vh - 96px);
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	z-index: 1500;
	display: none;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.overlay_panel.active {
	display: flex;
}
.overlay_panel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	min-height: 48px;
	background: var(--panel-bg);
	flex-shrink: 0;
}
.overlay_panel_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}
.overlay_panel_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	border: 1px solid var(--panel-border);
}
.overlay_panel_close:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_panel_content {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.overlay_upload_area {
	padding: 24px 16px;
	border-bottom: 1px solid var(--panel-border);
	text-align: center;
	background: var(--accent-bg);
	cursor: pointer;
	transition: var(--transition);
	min-height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.overlay_upload_area:hover,
.overlay_upload_area.dragover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_upload_icon {
	font-size: 32px;
	color: var(--text-muted);
	transition: var(--transition);
}
.overlay_upload_area:hover .overlay_upload_icon,
.overlay_upload_area.dragover .overlay_upload_icon {
	color: var(--panel-bg);
}
.overlay_upload_text {
	font-size: 14px;
	font-weight: 500;
}
.overlay_upload_subtext {
	font-size: 12px;
	color: var(--text-muted);
}
.overlay_upload_area:hover .overlay_upload_subtext,
.overlay_upload_area.dragover .overlay_upload_subtext {
	color: var(--panel-bg);
}
.overlay_list_container {
	padding: 8px;
}
.overlay_list_item {
	border: 1px solid var(--panel-border);
	margin-bottom: 8px;
	background: var(--panel-bg);
}
.overlay_item_header {
	display: flex;
	align-items: center;
	padding: 12px;
	gap: 12px;
	background: var(--accent-bg);
	border-bottom: 1px solid var(--panel-border);
}
.overlay_item_visibility {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	transition: var(--transition);
}
.overlay_item_visibility:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_item_name {
	flex: 1;
	font-weight: 500;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.overlay_item_delete {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: #dc3545;
	transition: var(--transition);
}
.overlay_item_delete:hover {
	background: #dc3545;
	color: #fff;
	border-color: #dc3545;
}
.overlay_item_controls {
	padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.overlay_item_controls label {
	font-size: 12px;
	color: var(--text-muted);
	min-width: 50px;
}
.overlay_opacity_slider {
	flex: 1;
	height: 8px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--panel-border);
	outline: none;
	cursor: pointer;
}
.overlay_opacity_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	background: var(--text-color);
	cursor: pointer;
}
.overlay_opacity_slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--text-color);
	cursor: pointer;
	border: none;
}
.overlay_export_section {
	padding: 16px;
	border-top: 1px solid var(--panel-border);
	background: var(--panel-bg);
	margin-top: auto;
}
.overlay_export_toggle {
	width: 100%;
	height: 48px;
	background: var(--text-color);
	color: var(--panel-bg);
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--transition);
}
.overlay_export_toggle:hover {
	opacity: 0.9;
}
.overlay_export_controls {
	display: none;
	margin-top: 12px;
	border: 1px solid var(--panel-border);
}
.overlay_export_controls.open {
	display: block;
}
.overlay_export_options {
	display: flex;
	gap: 4px;
	padding: 8px;
	border-bottom: 1px solid var(--panel-border);
}
.overlay_export_option {
	flex: 1;
	height: 40px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}
.overlay_export_option:hover,
.overlay_export_option.active {
	background: var(--text-color);
	color: var(--panel-bg);
}
.overlay_export_execute {
	width: 100%;
	height: 48px;
	background: #28a745;
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	transition: var(--transition);
}
.overlay_export_execute:hover {
	opacity: 0.9;
}
.overlay_export_modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
}
.overlay_export_modal.active {
	display: flex;
}
.overlay_export_modal_content {
	background: var(--panel-bg);
	padding: 24px;
	border: 1px solid var(--panel-border);
	text-align: center;
	min-width: 300px;
}
.overlay_export_modal_content h3 {
	margin-bottom: 16px;
	font-size: 16px;
}
.overlay_export_progress {
	width: 100%;
	height: 8px;
	background: var(--panel-border);
	margin: 16px 0;
	overflow: hidden;
}
.overlay_export_progress_bar {
	height: 100%;
	background: var(--text-color);
	width: 0%;
	transition: width 0.3s ease;
}

/* ========================================
   File Manager Panel Styles
   ======================================== */
.filemanager_panel {
	position: fixed;
	top: 48px;
	left: 48px;
	width: 336px;
	min-width: 336px;
	max-width: 336px;
	height: calc(100vh - 96px);
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	z-index: 1500;
	display: none;
	flex-direction: column;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}
.filemanager_panel.active {
	display: flex;
}
.filemanager_panel_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--panel-border);
	min-height: 48px;
	background: var(--panel-bg);
	flex-shrink: 0;
}
.filemanager_panel_title {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 8px;
}
.filemanager_panel_close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-color);
	transition: var(--transition);
	border: 1px solid var(--panel-border);
}
.filemanager_panel_close:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.filemanager_panel_tabs {
	display: flex;
	border-bottom: 1px solid var(--panel-border);
	background: var(--accent-bg);
}
.filemanager_panel_tab {
	flex: 1;
	padding: 12px 8px;
	text-align: center;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	transition: var(--transition);
	border-bottom: 2px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.filemanager_panel_tab:hover {
	color: var(--text-color);
	background: var(--panel-bg);
}
.filemanager_panel_tab.active {
	color: var(--text-color);
	background: var(--panel-bg);
	border-bottom-color: var(--text-color);
}
.filemanager_panel_tab i {
	font-size: 16px;
}
.filemanager_tab_content {
	display: none;
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.filemanager_tab_content.active {
	display: flex;
	flex-direction: column;
}
.fm_upload_section {
	padding: 16px;
	border-bottom: 1px solid var(--panel-border);
}
.fm_file_upload_area {
	padding: 24px 16px;
	text-align: center;
	background: var(--accent-bg);
	cursor: pointer;
	transition: var(--transition);
	min-height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px dashed var(--panel-border);
}
.fm_file_upload_area:hover,
.fm_file_upload_area.dragover {
	background: var(--text-color);
	color: var(--panel-bg);
	border-color: var(--text-color);
}
.fm_upload_icon {
	font-size: 28px;
	color: var(--text-muted);
	transition: var(--transition);
}
.fm_file_upload_area:hover .fm_upload_icon,
.fm_file_upload_area.dragover .fm_upload_icon {
	color: var(--panel-bg);
}
.fm_upload_text {
	font-size: 13px;
	font-weight: 500;
}
.fm_upload_subtext {
	font-size: 11px;
	color: var(--text-muted);
}
.fm_file_upload_area:hover .fm_upload_subtext,
.fm_file_upload_area.dragover .fm_upload_subtext {
	color: var(--panel-bg);
}
.fm_projects_section {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.fm_projects_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px;
	margin-bottom: 8px;
}
.fm_projects_title {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
}
.fm_new_project_btn {
	height: 32px;
	padding: 0 12px;
	background: var(--text-color);
	color: var(--panel-bg);
	border: none;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: var(--transition);
}
.fm_new_project_btn:hover {
	opacity: 0.9;
}
.fm_project_list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fm_no_projects {
	padding: 24px 16px;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
}
.fm_project_item {
	display: flex;
	align-items: center;
	padding: 12px;
	gap: 12px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	cursor: pointer;
	transition: var(--transition);
}
.fm_project_item:hover {
	background: var(--accent-bg);
}
.fm_project_item.active {
	border-color: var(--text-color);
	background: var(--accent-bg);
}
.fm_project_icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--text-color);
	color: var(--panel-bg);
	font-size: 16px;
}
.fm_project_info {
	flex: 1;
	min-width: 0;
}
.fm_project_name {
	font-weight: 600;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fm_project_details {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 4px;
}
.fm_project_actions {
	display: flex;
	gap: 4px;
}
.fm_project_btn {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--text-color);
	transition: var(--transition);
}
.fm_project_btn:hover {
	background: var(--text-color);
	color: var(--panel-bg);
}
.fm_project_btn[data-action="delete"]:hover {
	background: #dc3545;
	color: #fff;
	border-color: #dc3545;
}

/* ===== UI STANDARDIZATION OVERRIDES ===== */
/* standardize all panel headers to 48px height and 14px font */
.panel-header,
.view_controls_header,
.overlay_panel_header,
.fm_panel_header,
.cs_panel_header_collapsible {
	height: 48px;
	min-height: 48px;
	max-height: 48px;
	font-size: 14px;
}

/* standardize all tab elements to 14px font */
.panel-tab,
.view_controls_tab,
.cs_measurement_panel_header {
	font-size: 14px;
}

/* standardize all labels and text to 14px */
.panel-header-title span,
.view_controls_title span,
.overlay_panel_title span,
.fm_panel_title span,
.cs_section_label_typography,
.cs_panel_header_title span,
.tab-content label,
.vc_block_label span {
	font-size: 14px;
}

/* standardize all input elements */
.search-box,
.vc_input_field,
.cs_select_dropdown_input,
.cs_inline_input_field,
input[type="text"],
input[type="number"],
select {
	font-size: 14px;
	height: 36px;
}

/* standardize all buttons */
.vc_action_btn,
.vc_input_btn,
.cs_control_button_circular,
.cs_clear_all_button_action,
button {
	font-size: 14px;
}

/* standardize icons to 16px */
.panel-header i,
.view_controls_title i,
.view_controls_tab i,
.panel-tab i,
.overlay_panel_title i,
.fm_panel_title i,
.left_nav_controls i,
.vc_block_label i {
	font-size: 16px;
}

/* GIS Widget Styles for Bottom Navbar Popups */
.gis_widget_content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px;
}

.gis_stat_row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background-color: rgba(0, 0, 0, 0.04);
	border-radius: 6px;
	font-size: 14px;
}

.gis_stat_row i {
	width: 20px;
	color: var(--color-primary, #3a86ff);
	font-size: 14px;
}

.gis_stat_label {
	flex: 1;
	font-weight: 500;
	color: var(--text-color, #333);
}

.gis_stat_value {
	font-family: monospace;
	font-size: 13px;
	color: var(--text-secondary, #666);
	background: rgba(0, 0, 0, 0.06);
	padding: 2px 8px;
	border-radius: 4px;
}

.gis_info_note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-secondary, #888);
	padding: 8px;
	background: rgba(59, 130, 246, 0.08);
	border-radius: 6px;
	margin-top: 4px;
}

.gis_info_note i {
	color: var(--color-primary, #3a86ff);
}

.gis_empty_state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px;
	color: var(--text-secondary, #888);
}

.gis_empty_state i {
	font-size: 32px;
	opacity: 0.5;
}

.gis_widget_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--color-primary, #3a86ff);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
}

.gis_widget_btn:hover {
	background: var(--color-primary-hover, #2563eb);
}

.gis_share_url_container {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.gis_share_url_input {
	flex: 1;
	padding: 8px 12px;
	font-family: monospace;
	font-size: 12px;
	border: 1px solid var(--panel-border, #ddd);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.03);
}

.gis_copy_btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--panel-bg, #fff);
	border: 1px solid var(--panel-border, #ddd);
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.gis_copy_btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.gis_share_buttons {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.gis_share_buttons .gis_widget_btn {
	flex: 1;
	background: var(--panel-bg, #fff);
	color: var(--text-color, #333);
	border: 1px solid var(--panel-border, #ddd);
}

.gis_share_buttons .gis_widget_btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.gis_help_section {
	margin-bottom: 12px;
}

.gis_help_section strong {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--text-color, #333);
}

.gis_help_item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-size: 13px;
	color: var(--text-secondary, #666);
}

.gis_help_item kbd {
	display: inline-block;
	padding: 2px 8px;
	font-family: monospace;
	font-size: 12px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	min-width: 80px;
	text-align: center;
}

/* Dark mode adjustments for GIS widgets */
[data-theme="dark"] .gis_stat_row {
	background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .gis_stat_value {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text-secondary, #aaa);
}

[data-theme="dark"] .gis_info_note {
	background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .gis_share_url_input {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .gis_help_item kbd {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
}