body {
	font-family: sans-serif;
}

.hidden {
	display: none !important;
}

.warning_box {
	margin: 1em;
	padding: 1.5em;
	width: 70ch;
	background-color: #FFCCCC;
	border: 5px solid #FF4444;
	border-radius: 1.5em;
	hyphens: auto;
	text-align: justify;
}

.introduction {
	column-width: 60ch;
	column-gap: 5ch;
	column-rule-style: solid;
	column-rule-width: medium;
	text-align: justify;
	hyphens: auto;
}

.introduction h2 {
	break-after: avoid;
}

.toggler {
	display: none;
}

input.toggler:checked ~ .togglee_block_inv, .togglee_block {
	display: none;
}

input.toggler:checked ~ .togglee_block, .togglee_block_inv {
	display: block;
}

.configurator {
	margin-top: 1em;
	border: 1pt solid black;
	display: flex;
	flex-direction: column;
}

.configurator input {
	width: 5em;
}

.configurator > ul {
	display: flex;
	flex-flow: row wrap;
	padding: 0;
}

.configurator .load_config {
	clear: both;
}

.configurator > ul > li {
	list-style-type: none;
	display: block;
	/*float: left;*/
	border: 1pt solid;
	border-left: 2em solid;
	margin: 0.3em;
	padding: 0.5em;
}

/*
.configurator .load_config {
	list-style-type: none;
	display: inline;
	/*float: left;
	border: 1pt solid;
	border-left: 2em solid;
	margin: 0.3em;
	padding: 0.5em;
}
*/

.configurator .title {
	font-weight: bold;
	display: block;
}

.configurator th {
	font-weight: normal;
}

.configurator li.pv {
	border-color: #e7e521;
}

.configurator li.wind {
	border-color: #213be7;
}

.configurator li.wind_onshore {
	border-color: #5c6ee5;
}

.configurator li.wind_offshore {
	border-color: #0016a7;
}

.configurator li.ccgt {
	border-color: #828282;
}

.configurator li.nuclear {
	border-color: #673838;
}

.configurator li.battery {
	border-color: #703885;
}

.configurator li.hydrogen {
	border-color: #2c5d1a;
}

.configurator .share {
	/*
	text-align: right;
	vertical-align: middle;
	*/
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 0.5em;
	margin: 1em;
}

.configurator .share button {
	/*
	display: block;
	float: right;
	*/
	/*margin: 2em 0;*/
	padding: 1em;
	background: linear-gradient(90deg, rgba(124,147,55,1) 0%, rgba(14,154,130,1) 100%); 
	color: white;
	border-radius: 0.3em;
	border: 1px solid black;
	font-weight: bold;
	transition: opacity 0.5s;
}

#run_button {
	position: relative;
	margin: 2em 0;
	padding: 1em;
	background: linear-gradient(90deg, rgba(19,12,133,1) 0%, rgba(6,144,10,1) 100%);
	color: white;
	border-radius: 0.3em;
	border: 1px solid black;
	font-weight: bold;
	transition: opacity 0.5s;
}

#run_button:hover, .configurator .share button:hover {
	opacity: 0.8;
}

#powerplant_plot {
	display: flex;
}

#powerplant_plot > div {
	width: 49%;
}

#results th {
	text-align: right;
}