/* CSS for styling */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1fr 2fr;
	gap: 10px;
	width: 100vw;
	height: 100vh;
}

.section {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	display: flex;
	flex-direction: column; /* Ensure content within sections stacks vertically */
	justify-content: center;
	align-items: center;
	font-size: 24px;
	overflow-y: auto; /* Add vertical scrolling */
}

/*.section.overview_control { 
	grid-row: 1 / span 2; /* Span the top left section across both rows */
/*}*/


.table-wrapper {
	flex-grow: 1; /* Table wrapper takes remaining space */
	display: flex;
	justify-content: flex-start; /* Align content to the left */
	align-items: flex-start; /* Align content to the top */
	flex-direction: column; /* Content arranged in a column */
	overflow: auto; /* Enable scrolling within the table wrapper */
}

#myTable {
	background-color: #fff;
	width: 100%;
	border-collapse: collapse; /* Collapse table borders */
}

#myTable th {
	position: sticky;
	top: 0; /* Stick the table header to the top */
	background-color: #f0f0f0; /* Set background color for the sticky header */
	z-index: 1; /* Ensure it stays above other content */
	width: 100%; /* Ensure table header takes full width */
}

.button-wrapper {
	position: sticky;
	top: 0; /* Stick the button wrapper to the top */
	background-color: #f0f0f0; /* Set background color for the sticky wrapper */
	padding: 10px; /* Add padding for spacing */
	left: 10px;
}

ul {
	list-style-type: none;
	padding: 0;
}
.list-item {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.dot {
	height: 10px;
	width: 10px;
	border-radius: 999px;
	margin-right: 10px;
}
.dot.on { background-color: green; }
.dot.off { background-color: red; }

.buttons {
	margin-left: auto;
}
.dropdown {
	margin-left: 10px;
}