body, html {
	overflow: clip;
}

body{
	margin: 0;
	padding: 0;
	background-color: grey;
}

#menu-bar{
	width:100%;
	padding: 8px;
	background-color: white;
}

#frame, circle {
	cursor: pointer;
}

#img-overlay-wrap {
	position: relative;
	overflow: clip;
	/*display: inline-block;  <= shrinks container to image size */
	background-image: url('../images/interior1.jpg');
	background-position: center;
	background-repeat: no-repeat;	
	background-size: contain;
}

#img-overlay-wrap img { /* <= optional, for responsiveness */
   display: block;
   max-width: 100%;
   overflow: clip;
}

#img-overlay-wrap svg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: clip;
}

#frame{
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	filter: drop-shadow(0px 3px 8px rgb(0 0 0 / 0.5));
	visibility: hidden; 

	perspective-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
}
.framed {
	outline: 5px solid #684b02;
}
.haspp{
	outline: 25px solid white;
}

input[data-coloris]{
	border: 1px solid transparent;

	background-color: #fff;
	border-color: #dbdbdb;
	border-radius: 4px;
	color: #363636;

	font-size: 1rem;
	height: 2.5em;
	justify-content: flex-start;
	line-height: 1.5;
	padding-bottom: calc(.5em - 1px);
	padding-left: calc(.75em - 1px);
	padding-right: calc(.75em - 1px);
	padding-top: calc(.5em - 1px);
	vertical-align: top;

	box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
	max-width: 100%;
	width: 100%;
}

.clr-field button{
	border-radius: 0 4px 4px 0;
}

#tutorial-video {
	border: 1px solid rgb(187, 187, 187);
}

#dom-frame{
	display: inline-block;
	cursor:pointer;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	filter: drop-shadow(0px 3px 8px rgb(0 0 0 / 0.5));
}
#dom-frame, #dom-painting{
	transform-origin: 0 0;
}