input[type='checkbox'] {
	margin-top:3px;
}
input[type='radio'] {
	margin-right:6px;
}

input[type='number'] {
	width:42px;
	text-align:right;
	margin-right:2px;
}

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


button.increment { 
	font-size:25px;
	width:61px;
	margin-right:-5px;
}



button.arrow { 
	font-size:16px;
	width:31px;
	margin-right:-5px;
}
.btn.arrow.mid:nth-of-type(2) { 
	width:32px;
}


button.display {
	width:120px;
}

button.arrow svg {
	filter: drop-shadow(1px 1px 0px #fefefe);
	fill:#444;
}

svg.icon {
	width:13px;
	height:13px;
	overflow:visible;
	position:relative;
	top:2px;
}

.line .shapeonly {
	display:none;
}
.shape .lineonly {
	display:none;
}
.circle .squareonly, .circle .teeonly, .circle .triangleonly {
	display:none;
}
.triangle .squareonly, .triangle .teeonly, .triangle .circleonly {
	display:none;
}

.measureonly {
	display:none;
}
.measure .measureonly {
	display:inherit;
}


line.measure {
	stroke-width:1;
}

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


.moreoptions {
	grid-template-columns:repeat(3,auto); /* for best fit, override the repeat number in each file */
}

.controlgrid.one :nth-child(n+2) {
	margin-left:0px;
}

.controlgrid.one:nth-of-type(1) {
	grid-template-columns: auto auto auto;
}
.controlgrid.one:nth-of-type(3) {
	grid-template-columns: auto auto auto auto auto auto;
}
.controlgrid.one:nth-of-type(2) {
	grid-template-columns: auto auto auto;
}

.moreoptions { 
	grid-column-gap:4px; /* still needed for some browsers; eventually remove this */
	column-gap:4px; /* replaces grid-column-gap in new standards */
}

.controlgrid { 
	grid-column-gap:4px; /* still needed for some browsers; eventually remove this */
	column-gap:4px; /* replaces grid-column-gap in new standards */
}

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

.centered {
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-2500px; /* must be half of the svg size */
	margin-left:-2500px;
	padding-bottom:144px; /* 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:0.5s;
}
@keyframes fadeIn {
	to {opacity:1;}
}
@keyframes fadeOut {
	to {opacity:0;}
}

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