main {
	width: calc(100% - 315px);
	border-radius: 10px;
	padding: 10px;
	max-height: 85vh;
}

aside {
	top: 95px; right: 15px;
	width: 220px;
	background-color: white; color: black; 
	padding: 15px;
	border-radius: 10px;
	box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.40);
	margin-bottom: 20px;
}

aside h3 {	margin: 0px 0px 5px 0px; }

aside input { 	margin-bottom: 10px; }

canvas {
	width: 100%;
	padding: 0px;
	border-radius: 10px;
}

main h1 { display: none; }

.btn {
	display: grid;
	place-items: center;
	margin-top: 5px;
	border-radius: 0.5rem;
	padding: 8px;
	border-width: 2px;
	border-color: #0a5b93;
	border-style: solid;
}

.btn-rectangle {
	width: 33px;
	height: 33px;
}

.btn-unclickable {
	color: grey !important;
	border-color: grey !important;
	background-color: white !important;
}

.btn-activated{
	color: white;
	background-color: #0a5b93;
}

.btn-deactivated {
	color: #0a5b93;
	background-color: white;
}

.btn-subheading {
	font-size: 16px;
	margin-bottom: -5px;
}

.formenLegende p {
	font-size: 10px;
	background-color: #ddd; 
}

.farbenLegende p {
	padding: 3px 5px 0px 5px;
	height: 16px;
	margin: 8px 5px 0px 5px;
	font-size: 10px;
}

@media (min-width: 768px) {
	.formenLegende, .farbenLegende {
		display: flex;
	}
}

#search-input{	width: 98%; }

.search-remove{
	color: red;
	position: absolute;
	right: 0;
	top: -12px;
}

.search-remove:hover{	cursor: pointer; }