:root {
	--scale: 1;
}



@media (min-width: 1800px) {
	:root {
		--scale: 0.7;
	}
}

@media (max-width: 800px) {
	:root {
		--scale: 1.4;
	}
}

@media (max-width: 600px) {
	:root {
		--scale: 2.0;
	}
}

@media (max-width: 400px) {
	:root {
		--scale: 3.0;
	}
}









.ca {
	background-color: rgb(240, 240, 240);
}

.va {
	width: calc(var(--scale) * 60vw);
}

.vj {
	width: calc(var(--scale) * 23vw);
}











.left-container {
	display: inline-block;
	width: calc(var(--scale) * 65vw);
	height: 95vh;
	overflow-y: scroll;
}

.right-container {
	width: calc(var(--scale) * 30vw);
	display: inline-block;
	vertical-align: top;
}

.canvas {
	width: calc(var(--scale) * 25vw);
	height: calc(var(--scale) * 25vw);
	display: block;
}








.row-container {
	display: block;
}

.input-outer-container {
	display: inline-block;
	vertical-align: top;
}

.input-container, .button-container {
	display: inline-block;
	margin-left: calc(var(--scale) * 0.6vw);
}

.input-block {
	display: block;
}

.input-label, .output-label-grey {
    display: block;
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.9vw);
	color: red;
	margin-left: calc(var(--scale) * .2vw);
}

input {
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.9vw);
	color: red;
	border: 1px solid black;
	margin-top: calc(var(--scale) * .2vw);
	margin-bottom: calc(var(--scale) * .2vw);
	padding: calc(var(--scale) * .1vw);
	padding-left: calc(var(--scale) * .2vw);
	width: calc(var(--scale) * 3.8vw);
	height: calc(var(--scale) * 1.2vw);
}

/* remove up-down arrows */
/* Chrome, Safari, Edge, Opera */
.short-input::-webkit-outer-spin-button,
.short-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.short-input[type=number] {
  -moz-appearance: textfield;
}

.long-input {
	width: calc(var(--scale) * 5.6vw);
}

#quick-input {
	float: right;
	margin-right: calc(var(--scale) * 0.6vw);
}





.output-label-uv {
    display: block;
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.9vw);
	color: blue;
	margin-left: calc(var(--scale) * .2vw);
}

.output-label-grey {
	color: gray;
}

.output-uv, .output-xyz {
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.9vw);
	color: blue;
	border: 1px solid black;
	background-color: white;
	margin-top: calc(var(--scale) * .2vw);
	margin-bottom: calc(var(--scale) * .2vw);
	padding: calc(var(--scale) * .1vw);
	padding-left: calc(var(--scale) * .2vw);
	width: calc(var(--scale) * 3.8vw);
	height: calc(var(--scale) * 1.2vw);
}

.output-xyz {
	color: gray;
}

#output01 {
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.9vw);
	color: red;
	border: 1px solid black;
	background-color: white;
	margin: calc(var(--scale) * .2vw);
	padding: calc(var(--scale) * .2vw);
	width: calc(var(--scale) * 5vw);
	height: calc(var(--scale) * 1.5vw);
}








.button-container {
	margin-top: calc(var(--scale) * 2vw);
	margin-bottom: calc(var(--scale) * 2vw);
}

.button-container-row {
	display: inline-block;
	margin-left: calc(var(--scale) * 4vw);
}

.button-container-item {
	margin-top: calc(var(--scale) * 1vw);
	margin-bottom: calc(var(--scale) * 1vw);
	margin-left: calc(var(--scale) * 0.5vw);
}

.button-container-item-2 {
	margin-top: calc(var(--scale) * 1vw);
	margin-bottom: calc(var(--scale) * 1vw);
}

.wide-button {
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.8vw);
	color: red;
	border: 1px solid black;
	background-color: white;
	cursor: pointer;
	margin-right: calc(var(--scale) * .4vw);
	padding: calc(var(--scale) * .2vw);
	width: calc(var(--scale) * 6.1vw);
	height: calc(var(--scale) * 1.6vw);
}

.small-button {
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.8vw);
	color: red;
	border: 1px solid black;
	background-color: white;
	cursor: pointer;
	margin-top: calc(var(--scale) * .2vw);
	margin-right: calc(var(--scale) * .4vw);
	padding: calc(var(--scale) * .2vw);
	width: calc(var(--scale) * 2vw);
	height: calc(var(--scale) * 1.6vw);
}

.med-button {
	font-family: "Verdana", sans-serif;
	font-size: calc(var(--scale) * 0.8vw);
	color: red;
	border: 1px solid black;
	background-color: white;
	cursor: pointer;
	margin-top: calc(var(--scale) * .2vw);
	margin-right: calc(var(--scale) * .4vw);
	padding: calc(var(--scale) * .2vw);
	width: calc(var(--scale) * 2.5vw);
	height: calc(var(--scale) * 1.6vw);
}

button:hover {
	background-color: lightgray !important;
}
/* !important because otherwise little buttons overridden by js background change */
/* see https://stackoverflow.com/questions/14071652/css-hover-event-not-working-after-using-javascript */