body {
  font-size:20px;
}
.col3{
  column-count: 3;
}
.wmarkercontainer {
  width: 600px;
  margin:0 auto;
}
.wmarker {
  width: 100%;
  -webkit-appearance: none;
  height: 20px;
  background: #FFFFFF;
  outline: none;
  opacity: 0.;
  -webkit-transition: .2s;
}
.wmarker::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 4px;
  height: 20px;
  border-radius: 0%;
  background: #000000;
  cursor: pointer;
}
.wmarker::-moz-range-thumb {
  width: 4px;
  height: 20px;
  border-radius: 0%;
  background: #000000;
  cursor: pointer;
}
.hmarkercontainer {
  width: 20px;
  height: 600px;
}
.hmarker {
  width: 20px;
  height: 4px;
  fill: #000000;
}
.slidecontainer {
  width: 600px;
  margin:20px auto auto auto;
}
.row {
  width: 600px;
  margin:20px auto auto auto;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.slidecontainer2 {
  float: left;
  width: 50%;
}
.slider {
  width: 100%;
  -webkit-appearance: none;
  height: 15px;
  border-radius: 10px;
  background: #e0e0e0;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #40B050;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #40B050;
  cursor: pointer;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.cancel{
  width: 40%;
  float: left;
}
.submit {
	border: none;
	border-radius: 20px;
	font-size: 40px;
  padding: 10px 10px 10px 10px;
  background: #f09000;
}
.fsubmit{
  display: inline;
}

.submit:hover {background-color: #e08000}
.submit:active {
  background-color: #d06000;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
textarea.emscripten { font-family: monospace; width: 80%; }
div.emscripten { text-align: center; }
span.emscripten { text-align: center; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { width:600px; height: 600px;  border: 0px none; background-color: white; min-height: 400px; overflow-y: scroll;
}
.spinner {
	height: 50px;
	width: 50px;
	margin: 0px auto;
	-webkit-animation: rotation .8s linear infinite;
	-moz-animation: rotation .8s linear infinite;
	-o-animation: rotation .8s linear infinite;
	animation: rotation 0.8s linear infinite;
	border-left: 10px solid rgb(0,150,240);
	border-right: 10px solid rgb(0,150,240);
	border-bottom: 10px solid rgb(0,150,240);
	border-top: 10px solid rgb(100,0,200);
	border-radius: 100%;
	background-color: rgb(200,100,250);
}
@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(360deg);}
}
@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}