/* Reset*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	
/* Make map fill browser window */
html, body {
	height: 100%;
	width: 100%;
	}
	
#map {
	height:100%;
	width: 100%;
	}

/* Legend style */

.legend {
	position: absolute;
	top: 10px;
	right: 10px;
	background: white;
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	max-width: 250px;
	}
	
.legend h4 {
	margin: 0 0 10px 0;
	font-size: 16px;
	}
	
.legend-item {
	margin: 5px 0;
	display: flex;
	align-items: center;
	}
	
.legend-color {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	margin-right: 10px;
	border: 2px solid #333;
	}

/* Query Panel style */
.query-panel {
	position: absolute;
	top: 10px;
	left: 10px;
	background: white;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	min-width: 300px;
	transition: transform 0.3s ease-in-out;
	}
	
.query-panel.collapsed {
	transform: translateX(-340px); /*Slightly more than panel width*/
	}
	
.panel-toggle {
	position: absolute;
	top: 0;
	right: -40px; /*Position it on the right edge of the panel*/
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 0 5px 5px 0;
	width: 40px;
	height: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	transition: background-color 0.2s;
	}
	
.panel-toggle:hover {
	background-color: #0056b3;
	}
	
.panel-toggle .arrow {
	transition: transform 0.3s ease-in-out;
	}
	
.collapsed .panel-toggle .arrow {
	transform: rotate(180deg);
	}
	
.query-panel h3 {
	margin: 0 0 15px 0;
	font-size: 18px;
	}
	
.query-section {
	margin-bottom: 15px;
	}
	
.query-section label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
	}

.query-section select {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	}
	
.query-button {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	margin-top: 10px;
	}
	
.query-button:hover {
	background-color: #0056b3;
	}
	
.reset-button {
	width: 100%;
	padding: 8px;
	background-color: #6c757d;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	margin-top: 5px;
	}
	
.reset-button:hover {
	background-color: #545b62;
	}
	
.checkbox-container {
		max-height: 200px;
		overflow-y: auto;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 10px;
		background-color: #f8f9fa;
		}
		
.checkbox-item {
	display: flex;
	align-items: center;
	margin: 5px 0;
	cursor: pointer;
	}
	
.checkbox-item input[type="checkbox"] {
	margin-right: 8px;
	cursor: pointer;
	width: 16px;
	height: 16px;
	}
	
.checkbox-item label {
	cursor: pointer;
	margin: 0;
	font-weight: normal;
	flex: 1;
	}
	
.checkbox-item:hover {
	background-color: #e9ecef;
	border-radius: 3px;
	}
	
/* Scrollbar styling for checkbox containers */
.checkbox-container::-webkit-scrollbar {
	width: 8px;
	}
	
.checkbox-container::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
	}
	
.checkbox-container::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
	}
	
.checkbox-container::-webkit-scrollbar-thumb:hover {
	background: #555;
	}
	
.results-count {
	margin-top: 10px;
	padding: 10px;
	background-color: #e9ecef;
	border-radius: 4px;
	text-align: center;
	font-weight:bold;
	}
	
/* Bottom Panel Styling - Collapsible */
.bottom-panel {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
	z-index: 1000;
	transition: transform 0.3s ease-in-out;
	max-height: 400px;
	display: flex;
	flex-direction: column;
	}

/* When collapsed, slide off screen to the bottom */
.bottom-panel.collapsed {
	transform: translateY(calc(100% - 50px)); /* Keep only toggle button visible */
	}
	
/* Toggle button at the top of bottom panel */
.bottom-panel-toggle {
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 5px 5px 0 0;
	width: 100%;
	height: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: bold;
	box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
	transition: background-color 0.2s;
	}
	
.bottom-panel-toggle:hover {
	background-color: #0056b3;
	}
	
.bottom-panel-toggle .arrow {
	margin-left: 10px;
	transition: transform 0.3s ease-in-out;
	}
	
.bottom-panel.collapsed .bottom-panel-toggle .arrow {
	transform: rotate(180deg);
	}
	
/* Tab Navigation */
.tab-navigation {
	display: flex;
	background-color: #f8f9fa;
	border-bottom: 2px solid #dee2e6;
	}
	
.tab-button {
	flex: 1;
	padding: 12px 20px;
	background-color: transparent;
	border: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	color: #495057;
	transition: background-color 0.2s, color 0.2s;
	}
	
.tab-button.hover {
	background-color: #e9ecef;
	}
	
.tab-button.active {
	background-color: white;
	color: #007bff;
	border-bottom: 3px solid #007bff;
	}
	
/* Tab Content */
.tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	}
	
.tab-pane {
	display: none;
	}
	
.tab-pane.active {
	display: block;
	}
	
/* Table Styling */
.data-table-container {
	overflow-x: auto;
	}
	
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	}
	
.data-table thead {
	background-color: #007bff;
	color: white;
	position: sticky;
	top: 0;
	z-index: 10;
	}
	
.data-table td {
	padding: 10px 8px;
	border-bottom: 1px solid #dee2e6;
	}
	
.data-table tbody tr:hover {
	background-color: #f8f9fa;
	}
	
.data-table tbody tr:nth-child(even) {
	background-color: #f9f9f9;
	}
	
.data-table th.sortable {
	cursor:pointer;
	user-select: none;
	position: relative;
	padding-right:25px;
	}
	
.data-table th.sortable:hover {
	background-color: #0056b3;
	}
	
.sort-arrow {
	position: absolute;
	right: 8px;
	top: 50%;
	tranform: translateY(-50%);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
	}
	
.sort-arrow::after {
	content: '⇅';
	}
	
.sort-arrow.asc::after {
	content: '▲';
	color: white;
	}
	
.sort-arrow.desc::after {
	content:'▼';
	color: white;
	}
	
/* Scrollbar for tab content */
.tab-content::-webkit-scrollbar {
	width: 10px;
	}
	
.tab-content::-webkit-scrollbar-track {
	background: #f1f1f1;
	}
	
.tab-content::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 5px;
	}
	
.tab-content::-webkit-scrollbar-thumb:hover {
	background: #555;
	}
	
/* Chart Builder Styling */
.chart-builder {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	padding: 20px;
	margin-bottom: 20px;
	}
	
.chart-builder h4 {
	margin: 0 0 15px 0;
	font-size: 18px;
	color: #495057;
	}
	
.builder-controls {
	display: flex;
	flex-direction: column;
	gap: 15px;
	}
	
.builder-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	align-items: end;
	}
	
.builder-field {
	display: flex;
	flex-direction: column;
	}
	
.builder-field label {
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
	color: #495057;
	}
	
.builder-field select,
.builder-field input[type="text"] {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	}
	
.create-chart-btn {
	padding: 10px 20px;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s;
	}
	
.create-chart-btn:hover {
	background-color: #218838;
	}
	
/* Dynamic Charts Container */
.dynamic-charts-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 20px;
	}
	
.dynamic-chart {
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	padding: 15px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	position: relative;
	}
	
.dynamic-chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	}
	
.dynamic-chart h4 {
	margin: 0;
	font-size: 16px;
	color: #495057;
	flex: 1;
	}

.chart-actions {
	display: flex;
	gap: 5px;
	}
	
.download-chart-btn {
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 3px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
	}
	
.download-chart-btn:hover {
	background-color: #0056b3;
	}
	
.delete-chart-btn {
	background-color: #dc3545;
	color: white;
	border: none;
	border-radius: 3px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
	transition: background-color 0.2s;
	}
	
.delete-chart-btn:hover {
	background-color: #c82333;
	}
	
.chart-canvas {
	max-height: 300px;
	}