/*general*/
html {overflow:hidden;}

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  user-select:none;
  /* This centers our sketch horizontally. */
  justify-content: center;
  font-family: Helvetica;
  /* This centers our sketch vertically. */
  /* align-items: center; */
   /* background-color: #eee; */
   /* background: radial-gradient(#fff, #eee, #aaa); */
}

 #sketch-holder {
   border-top: 1px solid #aaa;
  /* border-radius: 10px; */
  /* padding: 20px; */
  background-color: #fff;
  position: absolute;
  bottom: 0px;

}
/*Custom Base*/


input[type="range"] {
  width: 300px;
  background: transparent;
}
/*###################################*/
/*###########Responsive Range########*/
/*###################################*/
/*##############Core Style###########*/

input[type="range"].sim-slider {
  -webkit-appearance: none;
  /* width: 100%; */
}

input[type="range"].sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"].sim-slider:focus {
  outline: none;
}

input[type="range"].sim-slider::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
/*#############Thumb##############*/

input[type="range"].sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 36px;
  width: 36px;
  background: #555;
  cursor: pointer;
  margin-top: -12px;
}

input[type="range"].sim-slider.precise::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 30px;
  width: 30px;
  border-top: 20px solid red;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
  /* background: #555; */
  cursor: pointer;
  margin-top: -15px;
  margin-left: -15px;
}

input[type="range"].sim-slider::-moz-range-thumb {
  height: 36px;
  width: 36px;
  background: #555;
  cursor: pointer;
}

input[type="range"].sim-slider::-ms-thumb {
  height: 36px;
  width: 36px;
  background: #555;
  cursor: pointer;
}
/*#############Track##############*/

input[type="range"].sim-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: #ccc;
}

input[type="range"].sim-slider:active::-webkit-slider-runnable-track {
  background: #d6d6d6;
}

input[type="range"].sim-slider::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: #ccc;
}

input[type="range"].sim-slider::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type="range"].sim-slider::-ms-fill-lower {
  background: #ccc;
}

input[type="range"].sim-slider:focus::-ms-fill-lower {
  background: #ddd;
}

input[type="range"].sim-slider::-ms-fill-upper {
  background: #ccc;
}

input[type="range"].sim-slider:focus::-ms-fill-upper {
  background: #ddd;
}

/*sliders*/
/*
input[type=range].sim-slider {
      background-color: rgba(0,0,0,0);
}
input[type=range].sim-slider {
  height: 42px;
  -webkit-appearance: none;
  margin: 10px 0;

}
input[type=range].sim-slider:focus {
  outline: none;
}
input[type=range].sim-slider::-webkit-slider-runnable-track {
  height: 14px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #999999;
  background: #EBEBEB;
  border-radius: 4px;
  border: 1px solid #A3A3A3;
}
input[type=range].sim-slider::-webkit-slider-thumb {
  box-shadow: 1px 1px 4px #858585;
  border: 2px solid #8F8F8F;
  height: 33px;
  width: 32px;
  border-radius: 8px;
  background: #DEDEDE;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -11px;
}
input[type=range].sim-slider:focus::-webkit-slider-runnable-track {
  background: #EBEBEB;
}
input[type=range].sim-slider::-moz-range-track {
  height: 14px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #999999;
  background: #EBEBEB;
  border-radius: 4px;
  border: 1px solid #A3A3A3;
}
input[type=range].sim-slider::-moz-range-thumb {
  box-shadow: 1px 1px 4px #858585;
  border: 2px solid #8F8F8F;
  height: 33px;
  width: 32px;
  border-radius: 8px;
  background: #DEDEDE;
  cursor: pointer;
}
input[type=range].sim-slider::-ms-track {
  width: 100%;
  height: 14px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].sim-slider::-ms-fill-lower {
  background: #EBEBEB;
  border: 1px solid #A3A3A3;
  border-radius: 8px;
  box-shadow: 1px 1px 1px #999999;
}
input[type=range].sim-slider::-ms-fill-upper {
  background: #EBEBEB;
  border: 1px solid #A3A3A3;
  border-radius: 8px;
  box-shadow: 1px 1px 1px #999999;
}
input[type=range].sim-slider::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 4px #858585;
  border: 2px solid #8F8F8F;
  height: 33px;
  width: 32px;
  border-radius: 8px;
  background: #DEDEDE;
  cursor: pointer;
}
input[type=range].sim-slider:focus::-ms-fill-lower {
  background: #EBEBEB;
}
input[type=range].sim-slider:focus::-ms-fill-upper {
  background: #EBEBEB;
}

input[type=range].sim-slider.sim-slider.sim-slider.vertical{
transform: rotate(270deg);
}
*/


/* SIM BUTTON */
.sim-button {
  /* width:100px; */
  padding: .5em 1em;
  font-size: 1em;
  font-family:Helvetica, sans-serif;
  /* font-weight:bold; */
  cursor: pointer;
  text-align: center;
  outline: none;
  color: #000;
  border: 1px solid #494949;
  border-radius: .3em;
  background-color: #e2e2e2;
  /* letter-spacing: .1em; */

  /* box-shadow: 0 9px #999; */
}

.sim-button:hover {
	background-color: #f5f5f5
}

.sim-button:active {
  background-color: #f5f5f5;
  /* box-shadow: 0 5px #666; */
  transform: translateY(1px);
}

.sim-button.red {
  background-color: #b27775;
  color: #fff;
}

.sim-button.red:hover{background-color: #9f4b48;}

.sim-button.red:active {
  background-color: #9f4b48;
}

.sim-button.gray{
	background-color: #747474;
  color: #fff;
}

.sim-button.gray:hover{background-color: #58585a;}

.sim-button.gray:active {
  background-color: #58585a;
}
.sim-button.slim {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;

}
.sim-button.slim:active {
  background-color: #80a7b5;

  transform: translateY(2px);
}



/*Switches (which are really just checkboxes)*/

.sim-switch input[type=checkbox] {
    -webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select: none;
		letter-spacing: 2px;
}
.sim-switch input[type=checkbox] {
    display: none;
}

.sim-switch input[type=checkbox] + label {
	display: block;
	overflow: hidden;

	cursor: pointer;
	border: 2px solid white;
  border-radius: 8px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	font-size: 15px;
  font-family:Helvetica, sans-serif;
  font-weight:bold;
	padding-top:3px;
	padding-bottom: 3px;

}

.sim-switch input[type=checkbox] + label:before {
	content: "";
	padding-left: 9px;
	padding-right: 9px;
	background-color: #94c6d8; color: #FFFFFF;
	display: block; width: 25px; margin: -6px;
	background: #94c6d8;
	position: absolute; top: 0; bottom: 0;
	right: 53px;
	border:1px solid #a1a1a1;
  border-radius: 8px;
	transition: all 0.2s ease-in 0s;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #a1a1a1;
}

.sim-switch input[type=checkbox]:checked + label:before {
	right: 6px;
}

.sim-switch input[type=checkbox] + label:after {
	content: "ON OFF";
	padding: 10px 10px;
	background-color: #a5a5a5; color: #FFFFFF;
	text-align: right;

}

.sim-switch.red input[type=checkbox] + label:before{
		background: #C67775;
}

.sim-switch.gray input[type=checkbox] + label:before{
		background: #747474;
}

/* input[type=radio] {
  display: block;

} */
.sim-radio input[type=radio] {
	display:none;
}

/* Radio boxes */

.sim-radio input[type=radio] + label:before {
	content: "";
	display: inline-block;
	cursor: pointer;
	width: 15px;
	height: 15px;
	vertical-align:middle;
	margin-right: 8px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
	border-radius: 8px;
	border: thin solid black;

}

.sim-radio input[type=radio]:checked + label:before {
	content: "\2022"; /* Bullet */
	color:#94c6d8;
	background-color: #fff;
	font-size:1.8em;
	text-align:center;
	line-height:16px;
	text-shadow:0px 0px 3px #eee;


}

.sim-radio input[type=radio] + label {
margin: 20px;
padding: 10px;
border: 2px solid #747474;
border-radius: 5px;
cursor: pointer;
background: #fff;
color:#000000;
font-size: 15px;
font-family:Helvetica, sans-serif;
font-weight:bold;
box-shadow: 0px 2px 0px 1px rgba(0, 0, 0, .3);
}
.sim-radio input[type=radio]:checked + label {
background-color: #94c6d8;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3);
}
.sim-radio.gray input[type=radio]:checked + label {
background-color: #747474;
}
.sim-radio.red input[type=radio]:checked + label {
	background-color: #C67775;
}
.sim-radio.gray input[type=radio]:checked + label:before {
	color: #747474;
}
.sim-radio.red input[type=radio]:checked + label:before {
	color: #C67775;
}
.sim-radio.vertical input[type=radio] + label {
  display: block;
  clear:both;
}

.sim-textbox {
    font-size:18px;
    height: 40px;
}

h3.simTitle {
  position: fixed;
  /* top: 5px; */
  font-family: Helvetica;
  color: #555;
  font-size: 1em;
}
img.logo {
  position: fixed;
  top: 8px;
  left: 20px;
  width: 40px;

}
img.helpButton {
  position: fixed;
  top: 8px;
  right: 20px;
  width: 40px;

}