.ConnectLines {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
.ConnectLines svg{
	position: absolute;
	overflow: visible;
	width: 100%;
	height: 100%;
}
.ModuleContainer {
	filter: drop-shadow(1px 1px 2px #00000066);
	position: absolute;
	width: 100%;
	height: 100%;
}
.ChildModules {
	position: absolute;
	display: block;
}

.ModuleDropTarget {
	position: absolute;
}
.ModuleDropTarget[dragover="true"] {
	background: url('/Graphics/DropBkg.png');
}

.ModuleConnector {
	position: absolute;
	display: block;
}
.ModuleConnector[orientation="Vertical"] {
	top: -5px;
	left: calc(50% - 5px);
}
.ModuleConnector[orientation="Horizontal"] {
	top: calc(50% - 5px);
	left: -5px;
}
.AfterBtn {
	position: absolute;
	cursor: pointer;
	display: block;
}
.AfterBtn[orientation="Vertical"] {
	bottom: -7.5px;
	left: calc(50% - 7.5px);
}
.AfterBtn[orientation="Horizontal"] {
	top: calc(50% - 7.5px);
	right: -7.5px;
}
a-jump-module .AfterBtn[orientation="Vertical"] {
	content:url('/Graphics/JumpBtnVert.png');
}
a-jump-module .AfterBtn[orientation="Horizontal"] {
	content:url('/Graphics/JumpBtnHorz.png');
}
a-root-module, a-common-module, a-block-module, a-jump-module {
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 7px;
	position: absolute;
	display: block;
	width: 250px;
	height: 100px;
	z-index: 2;
	cursor: grab;
}
a-common-module > *, a-block-module > *, a-jump-module > * {
	cursor: auto;
}
a-root-module {
	width: 220px;
	height: 100px;
}
a-common-module {
	width: 250px;
	height: 100px;
}
a-block-module, a-jump-module {
    width: 100px;
	height: 40px;
}


a-common-module, a-block-module, a-jump-module {
	filter: drop-shadow(1px 1px 2px #00000066);
	z-index: 4;
}
a-common-module[resizing="true"], a-block-module[resizing="true"], a-jump-module[resizing="true"] {
	filter: drop-shadow(1px 1px 2px #00000066);
	z-index: 4;
}
a-root-module .Header, a-common-module .Header {
	border-radius: 7px 7px 0px 0px;
}
a-root-module .ModuleTitle:empty:before, a-common-module .ModuleTitle:empty:before {
	content: 'enter title';
	font-weight: normal;
	font-style: italic;
	color: #66666699;
  }
a-root-module .ModuleTitle, a-common-module .ModuleTitle {
	box-sizing: border-box;
	display: inline-block;
	white-space: nowrap;
	vertical-align: top;
	line-height: 20px;
	padding: 0px 5px;
	background: none;
	font-size: 16px;
	border: none;
	height: 20px;
}
a-root-module .ModuleTitle:focus , a-common-module .ModuleTitle:focus {
	border-bottom: dashed 1px #324354;
	background: #FFFFFF99;
	box-sizing: border-box;
	outline: none;
}
a-root-module .Header input::placeholder, a-common-module .Header input::placeholder {
	font-weight: normal;
	font-style: italic;
	color: #66666699;
}

a-root-module.L0 .Header, a-common-module.L0 .Header {
	background: #E8EDF2;
}
a-root-module.L0 .ModuleTitle, a-common-module.L0 .ModuleTitle, a-jump-module.L0 .ModuleTitle {
	color: #2D5893;
}

a-root-module.L1 .Header, a-common-module.L1 .Header {
	background: #E7F2EC;
}
a-root-module.L1 .ModuleTitle, a-common-module.L1 .ModuleTitle, a-jump-module.L1 .ModuleTitle {
	color: #007B42;
}

a-root-module.L2 .Header, a-common-module.L2 .Header {
	background: #F3E7F7;
}
a-root-module.L2 .ModuleTitle, a-common-module.L2 .ModuleTitle, a-jump-module.L2 .ModuleTitle {
	color: #9E69B3;
}

a-root-module.L3 .Header, a-common-module.L3 .Header {
	background: #FFFFE6;
}
a-root-module.L3 .ModuleTitle, a-common-module.L3 .ModuleTitle, a-jump-module.L3 .ModuleTitle {
	color: #D8A31A;
}

a-root-module.L4 .Header, a-common-module.L4 .Header {
	background: #F4E7E9;
}
a-root-module.L4 .ModuleTitle, a-common-module.L4 .ModuleTitle, a-jump-module.L4 .ModuleTitle {
	color: #8F3C50;
}
.ModuleResizeBtn {
	background: url('/Graphics/ResizeBtn.png');
	position: absolute;
	line-height: 20px;
	padding: 0px;
    width: 12px;
	height: 12px;
	right: 0px;
	bottom: 0px;
	z-index: 4;
}

.ModuleResizeBtn:hover {
	background: url('/Graphics/ResizeBtnHover.png');
	cursor: nwse-resize;
}

a-root-module .ModuleContent , a-common-module .ModuleContent {
	width: calc(100% - 10px);
	height: calc(100% - 30px);
	position: absolute;
	cursor: cell;
	left: 5px;
	top: 25px;
}
a-root-module .ModuleContent > * , a-common-module .ModuleContent > * {
	cursor: auto;
}


a-root-module input[type="checkbox"] {
	display: inline-block;
	vertical-align: top;
	margin: 0px 5px;
	width: 15px;
	height: 20px;
}


a-block-module .ModuleContent, a-jump-module .ModuleContent {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	left: 5px;
	top: 5px;
}
a-block-module .ModuleTitle {
	box-sizing: border-box;
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	text-align: center;
	color: #FFFFFF;
	padding: 7px;
}
a-block-module.L0 {
	background: #2D5893;
}
a-block-module.L1 {
	background: #007B42;
}
a-block-module.L2 {
	background: #9E69B3;
}
a-block-module.L3 {
	background: #D8A31A;
}
a-block-module.L4 {
	background: #8F3C50;
}


a-jump-module .ModuleTitle {
	box-sizing: border-box;
	display: inline-block;
	white-space: nowrap;
	position: absolute;
	text-align: center;
	color: #FFFFFF;
	padding: 7px;
}
a-jump-module.L0 .ModuleContent {
	background: url('/Graphics/JumpBkg0.png');
}
a-jump-module.L1 .ModuleContent {
	background: url('/Graphics/JumpBkg1.png');
}
a-jump-module.L2 .ModuleContent {
	background: url('/Graphics/JumpBkg2.png');
}
a-jump-module.L3 .ModuleContent {
	background: url('/Graphics/JumpBkg3.png');
}
a-jump-module.L4 .ModuleContent {
	background: url('/Graphics/JumpBkg4.png');
}