.ctrldown #caption {
	display:none;
}
.ctrldown .moreoptions {
	display:none;
}
.ctrldown #ctrlback {
	height:auto;
}

body {
	--ctrlht:148px;
	/* 206 with options shown */
}

body.ctrldown {
	--ctrlht:45px;
}

/* 144 for #ctrlback, 206 for #ctrlback with more options, 11 for #ctrlback down all the way, 174 for more options in small screen */

@media only screen and (max-width:700px), screen and (max-height:700px) {
	body { --ctrlht:144px; }
	/* 174 with options shown */

}



input[type='checkbox'] {
	margin-top:4px;
}
input[type='radio'] {
	margin-right:6px;
}
input[type='number'] {
	width:43px;
	text-align:right;
	margin-right:2px;
}

/*************************************************************/

button.increment { 
	font-size:25px;
	width:48%;
	max-width:60px;
	margin-right:-5px;
}
button.display {
	max-width:120px;
	width:32%;
}

/********************************************/


.reflect {
	display:inline-block;
	transform:scaleX(-1); 
	text-shadow:#fefefe -1px 1px 0px; /* fix the shadow */
}


/* can't use auto for this column because it changes name from angle to arc */
.controlgrid:nth-of-type(4) { 
	grid-template-columns:20px auto 86px auto;
}


.basicoptions {
	grid-template-columns:2fr 5fr 1.5fr; /* override in each file as needed */
}
.moreoptions {
	width:unset; /* for everything else, setting controls to width:760px and auto on the children works with scroll; not here */
	grid-template-columns: 202px 104px 130px 300px; /* need this, with no set width, for scrolling to work in small screen */
	overflow-x:scroll;
}
/*************************************************************/

.centered {
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-2500px; /* must be half of the svg size */
	margin-left:-2500px;
	padding-bottom:var(--ctrlht); /* 144 for #ctrlback, 206 for #ctrlback with more options, 11 for #ctrlback down */
}

/* to animate the measurement text */

.fadein {
	animation:fadeIn;
	animation-fill-mode:forwards;
	animation-duration:1.5s;
}
.fadeout {
	animation:fadeOut;
	animation-fill-mode:forwards;
	animation-duration:1s;
}
@keyframes fadeIn {
	to {opacity:1;}
}
@keyframes fadeOut {
	to {opacity:0;}
}

.measure {
	opacity:0;
}
#measurement {
	font-size:24px;
	color:#e00;
	text-align:center;
	width:100%;
	/*margin-top:20px; */
	font-family:Arial, Helvetica, sans-serif;
}
#measurement {
	position:absolute;
	bottom:206px;
}