.moldraw-container {
	margin: auto;
	max-width: 1000px;
	width: 100%;
	padding: 0px 0px;
	overflow: hidden;
}

#molEdit{
	background-color: inherit;
	border-color: lightgray;
	margin: 0px;
	padding: 0px;
	display: flex;
	width: 100%;
	height: 100%;
}

.dark-theme #molEdit{
	background-color: inherit;
}

.moldraw-wrapper {
	display : flex;
	flex-direction : column;
	flex-grow: 1;
}

#moldraw-canvasWrapper canvas {
	height: 100%;
	width: 100%;
	padding: 0px;
}

#moldraw-overlay {
	position: absolute;
}

#moldraw-canvas {
	position: static;
}

#moldraw-selectorOverlay {
	width: 100%;
}

#moldraw-canvasWrapper {
	border: 1px solid gray;
	border-radius: 3px;
  	position: relative;
  	margin: 2px;
  	flex-grow: 1;
}

#moldraw-canvasWrapper.cursor-crosshair {
	cursor: crosshair;
}

#moldraw-canvasWrapper.cursor-eraser {
	cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 1024 1024' %3e%3cpath d=%22M692.906667 151.893333l211.2 210.773334c33.28 33.706667 33.28 87.466667 0 121.173333L512 875.946667a171.008 171.008 0 0 1-241.493333 0L119.893333 725.333333c-33.28-33.706667-33.28-87.466667 0-121.173333l452.266667-452.266667c33.706667-33.28 87.466667-33.28 120.746667 0M180.053333 664.746667l151.04 150.613333c33.28 33.706667 87.04 33.706667 120.746667 0l150.613333-150.613333-211.2-211.2-211.2 211.2z%22 fill=%22%22 /%3e%3c/svg%3e") 12 28, default;
}

.dark-theme #moldraw-canvasWrapper.cursor-eraser {
	cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 1024 1024' %3e%3cpath d=%22M692.906667 151.893333l211.2 210.773334c33.28 33.706667 33.28 87.466667 0 121.173333L512 875.946667a171.008 171.008 0 0 1-241.493333 0L119.893333 725.333333c-33.28-33.706667-33.28-87.466667 0-121.173333l452.266667-452.266667c33.706667-33.28 87.466667-33.28 120.746667 0M180.053333 664.746667l151.04 150.613333c33.28 33.706667 87.04 33.706667 120.746667 0l150.613333-150.613333-211.2-211.2-211.2 211.2z%22 fill=%22%23bbb%22 /%3e%3c/svg%3e") 12 28, default;
}

.dark-theme #moldraw-canvasWrapper {
	border-color: #292929;
	background-color: #292929;

}

#moldraw-horizontalMenu{
	display: inline-flex;
	align-items: flex-end;
	position: static;
}

#moldraw-horizontalMenu.moldraw-overlay{
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	transition: visibility 0s, opacity 0.3s linear;
}


.moldraw-overlay.hidden{
	opacity: 0;
	visibility: hidden;
}



#moldraw-verticalMenu{
	height: 100%;
	position: static;
	display: flex;
	flex-direction: column;
	background-color: inherit;
}

#moldraw-overlayMenu{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: visibility 0s, opacity 0.3s linear
}

.moldraw-ctrl button{
	box-sizing : content-box;
	position: relative;
	margin: 2px;
	padding:  0;
	color: black;
	width: 40px;
	height: 40px;
	border-radius: 2px;
	cursor: default;
	user-select: none;
	font-family: Verdana,sans-serif;
	font-size: 25px;
	display:flex;
	align-items: center;
	justify-content:center;
	transition: background-color 0.1s linear;
	border:  1px lightgray solid;
	background-color: white;
}

.dark-theme .moldraw-ctrl button {
	border-color: #414141;
	color: #ededed;
	background-color: #414141;
}

.moldraw-ctrl button:focus-visible {
	outline: none;
}

.moldraw-btnIcon{
	width: 30px;
	height: 30px;
    display:flex;
}

.dark-theme .moldraw-btnIcon {
	filter: invert(1) brightness(0.8);
}

.moldraw-btnIcon svg{
	width: 100%;
}

.moldraw-btn-expand{
	position: absolute;
	bottom:  1px;
	right:  1px;
}

.moldraw-ct-disabled{
	opacity:  0.2;
	filter: grayscale(100%);
}

.moldraw-ct-enabled:hover{
	background-color: rgb(240, 240, 240);	
}

.dark-theme .moldraw-ct-enabled:hover {
	background-color: #595959;	
}

#moldraw-horizontalMenu .moldraw-ct-active  {
	border-top-width: 3px;
	margin-top: 0px;
	border-top-color: dodgerblue;
	border-radius: 3px 3px 2px 2px ;
}

#moldraw-verticalMenu .moldraw-ct-active  {
	border-left-width: 3px;
	margin-left: 0px;
	border-left-color: dodgerblue;
	border-radius: 3px 2px 2px 3px;
}