/* CSS for styling */
body, html {
	margin: 0;
	padding: 0;
	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 */
	justify-content: unset;
	align-items: normal;
	padding: 8px;
	gap: 8px;
}

.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;
}

.bottom-right {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center; /* Align squares to the center horizontally */
}
.canvas-square {
	border: 5px solid black;
	width: calc(20% - 5px);
	height: calc(40% - 5px);
	background-color: #ccc;
	position: relative;
}
.traffic-light {
	width: 20px;
	height: 20px;
	background-color: red;
	position: absolute;
	bottom: 5px;
	right: 5px;
}
.barrier {
	width: 20px;
	height: 20px;
	background-color: red;
	position: absolute;
	bottom: 5px;
	left: 5px;
}

/* Styles for the inner content of the squares */
.inner-content {
	position: absolute;
	inset: 8px;
}

details {
	border: 1px solid #0008;
	padding: 4px;
}

details summary {
	user-select: none;
}

details[open] summary {
	border-bottom: 1px solid #0008;
}

input[type="range"] {
	width: 100%;
}