*{font-family:verdana;}

/* ---------------------------------------------------- 
	.OverlayPanel{ position:fixed; top:0px; left:20px; z-index:1001;
		background-color:rgba(63,63,63,.7); display:block; border-radius:0px 0px 5px 5px; 
		box-shadow: 0px 1px 10px #000000;
		width:200px; }

	.OverlayPanel > header{ display:block; background-color:#297286;
		border-radius:5px 5px 0px 0px; padding:4px 12px;
		text-align:center; color:white; font-size:14px;
		-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;           
	}

	.OverlayPanel > footer{ display:block; background-color:rgba(0,0,0,0.35); color:#c0c0c0; border-radius:0px 0px 5px 5px; border:1px solid #505050; border-width:1px 0px 0px 0px;
		padding:4px 12px;         
	}

	.OverlayPanel > main {margin:0px 0px;}
*/

/* ---------------------------------------------------- */
	.OverlayPanel section{ display:grid; margin:0px 10px;
		grid-template-columns>: 50% 50%;
		grid-template-rows: auto auto;
		grid-template-areas:"label value" "input input";
		grid-row-gap:1ch;
		margin-top:10px;
		margin-bottom:10px;
	}
	.OverlayPanel section label{ grid-area:label; padding:0px; margin:0px; font-size:12px; color:white; opacity:0.6;  }

	.OverlayPanel section span{ display:block; grid-area:value; padding:0px; margin:0px; text-align:right; color:white; opacity:0.9; font-size:12px; }

	.OverlayPanel section input{ grid-area:input;}


	.OverlayPanel section.div{ background-color:#373737;
		border-top:1px solid #202020;
		border-bottom:1px solid #575757;
		padding:3px 0px; margin-left:0px; margin-right:0px; margin-top:0px;

		grid-template-rows: auto;
		grid-template-areas:"value value";
	}
	.OverlayPanel section.div span{text-align:center;}

/* ----------------------------------------------------
INPUT STYLES*/
	/*RANGE - http://danielstern.ca/range.css/#/ fixed up the results some, easer to change the code to get things just right*/
	input[type=range]{ -webkit-appearance: none; width: 100%; margin: 0px 0; }
	input[type=range]:focus{ outline: none; }

	input[type=range]::-webkit-slider-runnable-track { width: 100%; height:2px; cursor: pointer; background: #606060; transition: all 0.5s;}
	input[type=range]::-webkit-slider-thumb { height: 9px; width: 24px; margin-top: -3.75px; cursor: pointer; -webkit-appearance: none;
		border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.7); background: rgba(135, 213, 48, 0.7);}
	input[type=range]:focus::-webkit-slider-runnable-track { background: #a0a0a0; }

	input[type=range]::-moz-range-track { width: 100%; height:2px; cursor: pointer; background: #505050; transition: all 1s;}
	input[type=range]::-moz-range-thumb { height: 9px; width: 24px; margin-top: -3.75px; cursor: pointer; -webkit-appearance: none;
		border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.7); background: rgba(135, 213, 48, 0.7);}
	input[type=range]:focus::-moz-range-track { background: #a0a0a0; }

	input[type=range]::-ms-track { width: 100%; height: 24px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
	input[type=range]::-ms-fill-lower { background: #3c4040; border: 0px solid #000101; border-radius: 45.8px; box-shadow: 1.3px 1.3px 1px #000000, 0px 0px 1.3px #0d0d0d; }
	input[type=range]::-ms-fill-upper { background: #484d4d; border: 0px solid #000101; border-radius: 45.8px; box-shadow: 1.3px 1.3px 1px #000000, 0px 0px 1.3px #0d0d0d; }
	input[type=range]::-ms-thumb { box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000; border: 0px solid #ff1e00; width: 24px; border-radius: 12px; background: rgba(255, 67, 95, 0.93); cursor: pointer; height: 24px; }
	input[type=range]:focus::-ms-fill-lower { background: #484d4d; }
	input[type=range]:focus::-ms-fill-upper { background: #545a5a; }


	/*BUTTONS*/
	input[type=button] { background-color:#6cab27; border:0px; color:white; border-radius:5px; padding:3px 3px; font-size:16px; cursor:pointer;
		transition:background-color 0.3s ease-out;}
	input[type=button]:hover{ background-color:#008800; }


	/*TEXT BOX*/
	input[type=text] { border:1px solid rgba(135, 213, 48, 0.7); background-color:rgba(0,0,0,0.4); color:green; text-align:center; padding:2px 4px; outline: none; font-size:1.1em;}
	input[type=text]:focus { border:1px solid rgba(135, 213, 48, 1); background-color:rgba(30,30,30,0.4);  color:lime;  }


	/*NUMBER TEXT BOX*/
	input[type=number] { border:1px solid rgba(135, 213, 48, 0.7); background-color:rgba(0,0,0,0.4); color:green; text-align:center; padding:2px 4px; outline: none; font-size:1.1em;}
	input[type=number]:focus { border:1px solid rgba(135, 213, 48, 1); background-color:rgba(30,30,30,0.4);  color:lime;  }


	/*RADIO AND CHECKBOXES */
	input[type=radio],input[type=checkbox] { display:none; }
	input[type=radio] + label:before,
	input[type=checkbox] + label:before { content: ""; display: inline-block;  vertical-align:baseline;
		width: 14px; height: 14px; margin-right: 8px; border-radius: 8px; background-color: #505050;  cursor: pointer;}
	input[type=radio]:checked + label:before,
		input[type=checkbox]:checked + label:before{ content: ""; background-color: #86d530; }

	input[type=radio] + label,			input[type=checkbox] + label{cursor:pointer; vertical-align:baseline; color:white; }
	input[type=radio] + label:hover,	input[type=checkbox] + label:hover{color:#c0c0c0;}




/* ---------------------------------------------------- */
.OverlayPanelxx{ position:fixed; top:0px; bottom:0px; z-index:1001; 
	display:flex; flex-direction:column;
	background-color:#ffffff66; width:300px; }