$image-size: 500px;


body{
	background-color: #ccc;

	font-family: 'Courier';
	font-size: 12px;
}

#loader{
	display: block;
	position: absolute;
	width: 500px;
	height: 500px;
	margin-left: 20px;
	background: url('../../src/loader.svg') center center no-repeat;
	background-size: 0 0;
	z-index: 1;
}

#loader.active{
	background-size: 4em 4em;
}

#image-loader{
	display: none;
}

#canvas{
	display: block;
	position: relative;
		width: calc( #{$image-size} - 2*2px );
		height: calc( #{$image-size} - 2*2px );

	margin: 20px;

	border: 2px solid #000;
}


#log{
	display: block;
	position: relative;
		width: calc( #{$image-size} - 2*2px - 2*10px );
		height: calc( 100vh - 2*14px - 500px - 3*20px);

	margin: 10px 20px;
	padding: 10px;

	border: 2px solid #555;

	overflow-x: hidden;
	overflow-y: auto;

	span{
		display: block;
	}

}


// ADDED TO DAT.GUI
.dg.a .save-row{ background-color: #1a1a1a !important; }

.dg li.save-row > select{
	background-color: #7d7d7d !important;
	color: #fff !important;
	border: 0 !important;
}

.dg li.save-row > span{
	background-color: #303030 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}