* { box-sizing: border-box; }

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
}

.layout{
  flex: 1;
  display: flex;
}
.layout:first-child{
  min-width: 300px;
}

#root {
  flex: 1;
  display:grid;
}
#root:not([solo]){
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
}

#root canvas{
  position: absolute;
  top:0;
  left:0
}

#dropModal{
  display: none;
  position: fixed;
  top: 0; left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.box{
  position: relative;
  overflow: hidden;
  background-color:#333;
  font-family:sans-serif;
  touch-action: none;
}

.box:nth-child(2),.box:nth-child(3){
  background-color: #666;
}

.box > .boxInfo{
  position: absolute;
  top: 0; left: 50%;
  text-align: center;
  z-index: 1;
}
.box > .boxInfo i{
  font-style: normal;
}
.box > .boxInfo b{
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
  background-color: rgba(200,200,200,0.5);
  margin-left: -50%;
}

.formRow{
  display: flex;
}
.formRow label{
  display: inline-block;
  width: 55px;
}
.formRow label:first-child{
  width: 55px;
}
.cameraNum{
  width: 55px;
}

#paramsDiv{
  padding:20px;
  overflow: auto;
  background: white;
  border: solid 1px gray;
}

#paramsDiv {
	padding: 20px;
	color: black;
	overflow: auto;
  background: rgba(255,255,255,0.5);
}
	#paramsDiv .form-line label{
		display: block;
		min-width: 100px;
		color: black;
		font-family: Verdana;
	}

	#paramsDiv .form-line i {
		display: none;
	}
	#paramsDiv .form-line[type="color"] i,
	#paramsDiv .form-line[type="range"] i,
	#paramsDiv .form-line[type="slider"] i {
		display: inline-block;
		padding: 0 5px;
		margin-left: 5px;
		border: solid 1px #eee;
	}

	#paramsDiv .form-line[type="group"]{
		position: relative;
	}

	#paramsDiv .form-line[type="group"]:before{
		position: absolute;
		content: ">";
		font-weight: bold;
		left: -12px;
		color: gray;
		transform: rotate(90deg);
	}
	#paramsDiv .form-line[type="group"][closed="1"]:before{
		transform: rotate(0deg);
	}

	#paramsDiv .form-line[type="group"] label{
		font-weight: bold;
		font-size: 1.1em;
		cursor: pointer;
	}
	#paramsDiv .form-line:not([type="group"]){
		padding-left: 10px;
	}
	#paramsDiv .form-line[closed="1"]:not([type="group"]){
		display: none;
	}
	#paramsDiv .form-line[type="checkbox"] label{
		display: inline-block;
	}
	#paramsDiv .form-line input[type="range"]{
		width: 100%;
	}

jscadui-gizmo{
  position: absolute;
  top: 0; right: 0;
  --cube-size: 100px;
/*  --cube-line-color: #666;
  --cube-z-color: #00a;
  --cube-x-color: #900;
  --cube-y-color: #090;
  --cube-bg: #222;
  --cube-fg: #aaa;
  --cube-bg-hover: #444;
  --cube-fg-hover: #aaa;
  --cube-corner-radius: 5px;*/
}

jscadui-gizmo::part(face){
}

#spinner {
  position: absolute;
  bottom: 10px;
  right: 10px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #27c;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
  display: none;
}
.dark #spinner {
  border: 6px solid #222;
  border-top: 6px solid #16a;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#error-bar {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -260px;
  width: 520px;
  background-color: #ee111199;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: none;
  font-family: monospace;
}