*{font-family: arial; }
html,body{margin:0px;}
body{ background-color:#7c7c7c; }

/*---------------------------------------
Responsive Design, So the node boxes can fold into one column on smaller screens.*/
.rowFlex{ 
	display:flex;
	flex-direction:column;
	width:730px;
	margin:0px auto;
 }

.canvasSize
{
	height:500px;
	width:400px;
}

.rowFlex > section{ flex:1; padding:20px;}

@media (min-width:768px) {
    .rowFlex { flex-direction:row; }
}
@media only screen 
and (device-width: 428px) 
and (device-height: 926px) 
and (-webkit-device-pixel-ratio: 3) {
	input[type=button] {
		padding:25px 12px;
	}
	.rowFlex {
		flex-direction:column;
		width:100%;
		}
	.NodeContainer{width: 400px; background-color:rgba(63,63,63,.7); display:block; border-radius:5px; box-shadow: 0px 5px 10px #000000;}
	.rowFlex > section{ width: 430px; flex:1; padding:20px;margin:auto;}
 }
@media (max-width:768px) {
	input[type=button] {
		padding:25px 12px !important;
	}
    .rowFlex {
		 flex-direction:column;
		 width: 430px;
		 
		 }
	.result{
		font-size:x-large;
	}
	.NodeContainer{width: 400px; background-color:rgba(63,63,63,.7); display:block; border-radius:5px; box-shadow: 0px 5px 10px #000000;}
	.rowFlex > section{ flex:1; padding:8px 0 0 0;margin:auto;}
}

.btnVertList{ padding:10px; }
.btnVertList > * { display:block; margin-top:10px; width:100%;}
.btnVertList > *:first-child { margin-top:0px; }


.ctrList{ list-style:none; margin:10px 15px; padding:0px; }
.ctrList > li{margin-top:10px;}
.ctrList > li:first-child{margin-top:0px;}

/*---------------------------------------
Use the node container from NEditorJS, why not its a great design :) */
.NodeContainer{background-color:rgba(63,63,63,.7); display:block; border-radius:5px; box-shadow: 0px 5px 10px #000000;}

.NodeContainer > header{ display:block; background-color:#61ddff; color:rgb(0, 0, 0); border-radius:5px 5px 0px 0px;
	text-align:center; padding:4px 12px;
	-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;           
}
.NodeContainer > 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;
	  
}
.footer{
	color:#a0a0a0; bottom:1px;text-align: center;
}

/*---------------------------------------
Quick styling for the control row that has the sliders, radios and checkboxes. */
.ctrRow{ 
	padding: 0px 10px 8px 10px;
    margin-top: 8px;
	text-align: center;
	color:white;
}
.ctrRow > span{color:white; opacity:0.5; }
.ctrRow > label{color:white; opacity:0.9; }
.ctrRow.full > * {display:block; width:100%;}


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;  }


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;  }

/*---------------------------------------
Make the radio buttons and checkboxes match the rest of this fine lookin style.*/
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;}


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

input[type=range].slider::-webkit-slider-runnable-track { width: 100%; height:2px; cursor: pointer; background: #505050; transition: all 1s;}
input[type=range].slider::-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].slider:focus::-webkit-slider-runnable-track { background: #909090; }

input[type=range].slider::-moz-range-track { width: 100%; height:2px; cursor: pointer; background: #505050; transition: all 1s;}
input[type=range].slider::-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].slider:focus::-moz-range-track { background: #909090; }

input[type=range].slider::-ms-track { width: 100%; height: 24px; cursor: pointer; background: transparent; border-color: transparent; color: transparent; }
input[type=range].slider::-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].slider::-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].slider::-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].slider:focus::-ms-fill-lower { background: #484d4d; }
input[type=range].slider:focus::-ms-fill-upper { background: #545a5a; }

input[type=button] { background-color:#099c2e; border:0px; color:white; border-radius:5px; padding:5px 12px; font-size:18px; cursor:pointer;}
input[type=button]:hover{ background-color:#2d99b4; }