html {
	height: -webkit-fill-available;
}

body {
	height: 100vh;
	height: -webkit-fill-available;
}

main {
	display: flex;
	flex-wrap: nowrap;
	height: 100vh;
	height: -webkit-fill-available;
	max-height: 100vh;
	overflow-x: auto;
	overflow-y: hidden;
}

#left-nav {
	overflow-x: hidden;
	overflow-y: scroll;
}

.hoverGrow:hover {
	transform: scale(1.025);
	transition-duration: .2s;
	cursor: pointer;
}

.svg-center {
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	align-self: center;
}

.preview {
	flex: 1 1 auto;
	z-index: 1;
	position: relative;
}

.preview_content {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 15px; /* TOP, RIGHT, BOTTOM, LEFT */
}

.preview canvas {
	z-index: 1000000;
	max-height: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	height: auto;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, .2));
}

.preview-float {
	position: absolute !important;
	z-index: 1000001;
	bottom: 10px;
	width: 100%;
	display: flex;
	justify-content: center;
}

#colorpattern.active {
	box-sizing: border-box;
	outline: 3px cyan solid;
	transform: scale(1.025);
	transition-duration: .2s;
}

.opacity {
	opacity: 0.5;
}
.opacity:hover {
	opacity: 1.0;
}