@charset "UTF-8";

/* Stylesheet for IMI-Website, ed. 2023
 * Specific styles for the Statistics page
 * by Sascha Leib for GROW.E.4
 * File name: local/statistics.css
 */

#app-wrapper .placeholder {
	display: none;
	grid-template-columns: 1.5rem auto;
	column-gap: .25rem;
	align-items: center;
	color: #26324B;
	background-color: #F8F9FD;
	border: 1px solid #B9C5E9;
	border-left: 4px solid #F39811;
	padding: 1rem;
}
#app-wrapper .placeholder::before {
	content: '';
	display: inline-block;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z' style='fill:%23F39811'/%3E%3C/svg%3E") center no-repeat;
	background-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
}

main .wt-charts--toolbar {
	border-left: 1px solid #ccc;
	position: absolute;
	padding: 3px;
	right: 0;
	overflow: hidden;
	display: none;
}
main .wt-charts--toolbar a:link {
	position: absolute;
	top: -100px;
}

main .wt-charts--menu button svg {
	width: 20px;
	height: 20px;
}
main .wt-charts--container {
	padding-right: 0;
}

main .chart-wrapper {
	max-width: 100%; max-width: 990px;
	height: auto; aspect-ratio: 2 / 1;
	border: #444 solid 1px;
}
main details summary {
	font-size: 1rem;
	line-height: 1.25rem;
	margin: 0 0 .5rem 0;
}
main figcaption table {
	font-size: small;
	border-collapse: collapse;
	border: #999 solid 1px;
}
main figcaption table caption {
	caption-side: bottom;
	text-align: left;
}
main figcaption table th,
main figcaption table td {
	border: #999 solid 1px;
	padding: .25em .5em;
}
main figcaption table thead th {
	text-align: center;
}
main figcaption table thead th:first-child,
main figcaption table tbody th,
main figcaption table tbody td {
	text-align: right;
}

/* Don't show charts if screen is too small */
@media (max-width: 799px) {
	
	#navigation-layout {
		max-width: 100vw;
		margin: 0;
	}
	
	#app-wrapper .placeholder {
		display: grid;
	}
	main .chart-wrapper {
		display: none;
	}
}

@media (max-width: 768px) {
	main .table-wrapper {
		max-width: calc(100vw - 4rem);
	}
}