.proto-config {
	bottom: 0;
	color: #666;
	display: flex;
	flex-wrap: wrap;
	font-family: -apple-system, system-ui, sans-serif;
	font-size: .825rem;
	left: 0;
	padding: 1em;
	position: fixed;
	right: 0;
	top: auto;
	transform: translateY(100%);
	transition: transform .3s ease-out;
	z-index: 9;
}

.proto-config.active {
	background: #fff repeating-linear-gradient( 45deg, yellow 0, yellow 2em, black 2em, black 4em ) no-repeat bottom;
	background-size: 100% .3em;
	box-shadow: 0 .1em .3em -.1em rgba(0,0,0,.3);
	opacity: 1;
	transform: translateY(0);
}

.proto-config.hidden {
	opacity: 0;
	pointer-events: none;
}

.proto-config label {
	margin: .2em 1%;
	text-transform: capitalize;
}

.proto-config label input {
	display: inline-block;
	margin-right: .3em;
}

.proto-config .toggle {
	align-self: flex-start;
	background: #e3e3e3;
	border: 1px solid rgba(0,0,0,.05);
	border-radius: .3em;
	bottom: 0;
	box-shadow: inherit;
	color: #666;
	float: left;
	margin: -.25em 0 -2em;
	padding-bottom: .75em;
	position: relative;
	transition: all .3s ease-out;
	transform: translateY(-100%);
	z-index: -1;
}

.proto-config.active .toggle {
	background-color: inherit;
	color: inherit;
}

.config-on {
	background: inherit;
	box-shadow: inset 0 .3em 1em rgba(0,0,0,.01);
	border: none;
	color: rgba(0,0,0,.075);
	display: block;
	margin: 0;
	padding: 1em 0 1em;
	width: 100%;
}

.aivan-prototyper-active .config-on {
	display: none;
}