.er-container > .er-vertical, .er-container > .er-horizontal, .er-bento > * {
	max-width: 35ch;
	border: 1px solid var(--alt-fg);
	border-radius: 0.5em;
	overflow: hidden;
}

.er-container {
	margin: 2em auto;
}

.er-container > * {
	margin: auto;
}

.er-container svg.er-plot {
	background-color: var(--white-color);
}


.er-container, .er-container input {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 16px;
}

.er-container input[type=text] {
	background-color: var(--white-color);
	padding: 0;
	color: var(--fg);
	border: none;
}

.er-container input[type=text].numeric {
	background-color: transparent;
	width: 6em;
	padding: 0 0.5em;
	text-align: right;
	color: var(--fg);
	border-bottom: 1px solid var(--alt-fg);
}


.er-container select {
	border: none;
	background-color: var(--alt-fg);
	color: var(--fg);
	box-sizing: content-box;
	width: 6em;
	padding: 0 0.5em;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 16px;
}

.er-container .er-bento {
	display: grid;
	grid-template-columns: repeat(auto-fill, 35ch);
	grid-gap: 1em;
	justify-content: center;
}

.er-container .er-vertical {
	display: flex;
	flex-direction: column;
}

.er-container .er-horizontal {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.er-horizontal > * {
	flex: 1;
}

.er-container input[type=range] {
	-webkit-appearance: none;
	padding: 0;
	margin: 1em 0;
	height: 0.5em;
	background-color: var(--alt-fg);
}

.er-container input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: none;
	background-color: var(--fg);
}

.er-container input[type=range]::-moz-range-thumb {
	cursor: pointer;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: none;
	background-color: var(--fg);
}

.er-container input[type=range]:hover::-moz-range-thumb,
.er-container input[type=range]:hover::-webkit-slider-thumb {
	background-color: var(--alt-fg);
}


.er-container .er-horizontal > * ,
.er-container .er-vertical > * {
	line-height: 1.5;
}

.er-container p {
	font-family: 'IBM Plex Sans', sans-serif;
	margin: 0.5em;
}

.er-container p.bold {
	font-weight: bold;
}

.er-container p.centered {
	text-align: center;
}

.er-container .er-spacer {
	border-bottom: 1px solid var(--alt-fg);
	margin: 0.5em 0;
}

.er-container button {
	font-family: 'IBM Plex Sans', sans-serif;
	padding: 1em;
	border: none;
	font-size: 16px;
	font-weight: bold;
	background-color: transparent;
	transition: none;
}

.er-container button:hover {
	background-color: var(--alt-fg);
	cursor: pointer;
}

.er-tabs .tab-titles {
	display: flex;
	border-bottom: 2px solid;
}

.er-tabs .tab-titles button {
	flex: 1;
	border-radius: 0;
	border: none;
	font-size: small;
}

.er-tabs .tab-titles button[selected] {
	flex: 1;
	border: none;
	color: var(--bg);
	background-color: var(--fg);
}

.er-container .math.display {
	overflow: auto;
}

.er-container svg.knob * {
	pointer-events: none;
}

.er-container svg.knob:hover {
	cursor: pointer;
}

.er-container svg.knob circle {
	fill: var(--white-color);
}


.er-container svg.knob line {
	stroke: currentColor;
}

.er-container svg.knob line.tick {
	stroke-width: 0.5;
	stroke: var(--alt-fg);
}