@font-face {
	font-family: "Roboto Mono";
	src: url("/dependencies/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf");
}
body {
	margin: 0 0 0 0;
	background-color: white;
}
#holder {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 0 0 0;
	width: 615px;
	height: 615px;
	overflow: hidden;
}
#imageCanvas {
	display: none;
}
#text {
	font-family: "Roboto Mono", monospace;
	text-align: center;
	font-size: 8px;
	line-height: 9px;
	margin: 0 0 0 0;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: #a6a6a6;
}
#camera-view {
	display: none;
}
#button {
	position: absolute;
	margin: 220px 0 0 233px;
	width: 150px;
	font-family: "Roboto Mono", monospace;
	text-align: center;
	font-size: 28px;
	cursor: pointer;
	background-color: #e6e6e6;
	border: 3px solid black;
	z-index: 2;
}
#color-controls {
	position: absolute;
	top: 555px;
	left: 0px;
	width: 100%;
	height: 100px;
	background-color: #949494;
	margin: 0 0 0 0;
}
#color-label {
	font-family: "Roboto Mono", monospace;
	color: black;
	text-align: left;
	position: absolute;
	top: 18px;
	left: 100px;
	margin: 0 0 0 0;
	font-size: 24px;
	line-height: 24px;
}
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin: 15px 0 0 20px;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

input:checked + .slider {
	background-color: #506e45;
}

input:focus + .slider {
	box-shadow: 0 0 1px #506e45;
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}