/* Webfonts */
@font-face {
	font-family: 'OpenSans';
	font-weight: normal;
	font-style: normal;
	src: url("../font/OpenSansRegular.woff");
}
@font-face {
	font-family: 'OpenSans';
	font-weight: bold;
	font-style: normal;
	src: url("../font/OpenSansBold.woff");
}
@font-face {
	font-family: 'OpenSans';
	font-weight: normal;
	font-style: italic;
	src: url("../font/OpenSansItalic.woff");
}
@font-face {
	font-family: 'OpenSans';
	font-weight: bold;
	font-style: italic;
	src: url("../font/OpenSansBoldItalic.woff");
}
@font-face {
	font-family: 'RobotoMono';
	font-weight: normal;
	font-style: normal;
	src: url("../font/RobotoMono300.woff");
}
@font-face {
	font-family: 'RobotoMono';
	font-weight: bold;
	font-style: normal;
	src: url("../font/RobotoMono500.woff");
}
@font-face {
	font-family: 'RobotoMono';
	font-weight: normal;
	font-style: italic;
	src: url("../font/RobotoMono300italic.woff");
}
@font-face {
	font-family: 'RobotoMono';
	font-weight: bold;
	font-style: italic;
	src: url("../font/RobotoMono500italic.woff");
}
@font-face {
	font-family: 'Titillium';
	font-weight: normal;
	font-style: normal;
	src: url("../font/titilliumregular.woff");
}
@font-face {
	font-family: 'Titillium';
	font-weight: bold;
	font-style: normal;
	src: url("../font/titillium600.woff");
}
@font-face {
	font-family: 'Titillium';
	font-weight: normal;
	font-style: italic;
	src: url("../font/titilliumitalic.woff");
}
@font-face {
	font-family: 'Titillium';
	font-weight: bold;
	font-style: italic;
	src: url("../font/titillium600italic.woff");
}
/* FontAwesome */
@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 900;
	src: url("../font/fa-solid-900.woff");
}
.fa,
.fas {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
}
@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 400;
	src: url("../font/fa-regular-400.woff");
}
.far {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
}
@font-face {
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-weight: 300;
	src: url("../font/fa-light-300.woff");
}
.fal {
	font-family: 'Font Awesome 5 Pro';
	font-weight: 300;
}
/* Styles */
body {
	margin: 0 auto;
	font-family: 'OpenSans', sans-serif;
	background-color: #afffcf;
}
a[href] {
	text-decoration: none;
	color: #376ca6;
}
a[href]:active {
	text-decoration: none;
	color: #ff0000;
}
a[href]:visited {
	text-decoration: none;
	color: #376ca6;
}
.padblock {
	display: block;
	padding: 4px;
}
.ctxt {
	text-align: center;
}
#masthead {
	display: block;
	height: 26px;
	margin: 0px;
	padding: 8px;
	text-align: left;
	vertical-align: middle;
}
#logo {
	display: inline-block;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
#header {
	display: inline-block;
	font-family: 'Titillium', sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0 0 0 8px;
	vertical-align: middle;
}
#wrapper {
	display: block;
	text-align: center;
	margin: 0;
	padding: 0;
	height: 820px;
	width: 100%;
}
#editor {
	text-align: left;
	vertical-align: top;
	margin: 0;
	padding: 0 0 1px 0;
	border-bottom: 1px solid #808080;
	height: 820px;
	width: 440px;
	background-color: #e8e8e8;
	float: left;
}
#canvasframe {
	text-align: left;
	vertical-align: top;
	margin: 0 0 0 440px;
	padding: 0;
	border: 1px solid #808080;
	height: 820px;
	width: auto;
	white-space: nowrap;
	overflow: auto;
	background-color: #ffffff;
}
#editortabs {
	display: block;
	background-color: #afffcf;
}
.tab {
	display: table-cell;
	padding: 8px 16px;
	text-align: center;
}
.tabActive {
	background-color: #e8e8e8;
	border-bottom: none;
	border-top: 1px solid #808080;
	border-right: 1px solid #808080;
	color: #2f2f8f;
}
.tabInactive {
	background-color: #d8d8d8;
	border-top: 1px solid #808080;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
	color: #3f3f3f;
}
.tabFiller {
	border-bottom: 1px solid #808080;
	width: 100%;
}
#formProject {
	padding: 8px;
	display: none;
}
#formEditor {
	padding: 8px;
	display: block;
}
#formHelp {
	padding: 8px;
	display: none;
	height: 764px;
	overflow: auto;
}
#formReview {
	padding: 4px;
	display: none;
}
#formProduce {
	padding: 4px;
	display: none;
}
#startnodelabel {
	display: inline-block;
	border: 1px solid black;
	height: 18px;
	width: 200px;
	margin-bottom: 4px;
}
#nodecontent {
	display: block;
	width: 414px;
	border: 1px solid black;
	background-color: #ffffff;
	padding: 4px;
	font-size: 12px;
	resize: none;
}
#reviewBox {
	display: block;
	width: 422px;
	border: 1px solid black;
	background-color: #ffffff;
	padding: 4px;
	font-size: 12px;
	resize: none;
}
#produceBox {
	display: block;
	width: 422px;
	border: 1px solid black;
	background-color: #ffffff;
	padding: 4px;
	font-size: 12px;
	resize: none;
}
.interfacetext {
	display: block;
	font-size: 80%;
}
.buttonfield {
	margin: 0px 4px;
	vertical-align: top;
	font-size: 12px;
	height: 24px;
	border: 1px solid #404040;
	background-color: #dfdfdf;
}
.buttonfield input {
	background-color: #dfdfdf;
}
.buttongadget {
	margin: 8px 0px;
	font-size: 12px;
	height: 32px;
	border: 1px solid #404040;
	background-color: #dfdfdf;
}
.buttongadget input {
	background-color: #dfdfdf;
}
#loadgadget {
	position: relative;
	overflow: hidden;
	margin: 8px 0px;
	width: 96px;
	height: 32px;
	background-color: #dfdfdf;
	border: 1px solid #404040;
}
#loadgadget input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 12px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	width: 96px;
	height: 32px;
}
#loadgadget .userbutton {
	display: inline-block;
	padding: 8px;
	height: 32px;
	background-color: #dfdfdf;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
}
#savegadget {
	position: relative;
	overflow: hidden;
	margin: 8px 0px;
	width: 96px;
	height: 32px;
	background-color: #dfdfdf;
	border: 1px solid #404040;
}
#savegadget input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 12px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	width: 96px;
	height: 32px;
}
#savegadget .userbutton {
	display: inline-block;
	padding: 8px;
	height: 32px;
	background-color: #dfdfdf;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
}
#nodeconns {
	display: block;
	padding: 0px;
	height: 168px;
	overflow: auto;
}
#footer {
	display: block;
	height: 12px;
	padding: 4px;
	text-align: right;
	font-size: 50%;
}
.nosvg {
	color: #803030;
}
.node {
	stroke: #000000;
	stroke-width: 1px;
	fill: #ffffff;
	opacity: 1.0;
	z-index: 0;
	cursor: pointer;
}
.node-start {
	fill: #efefaf;
}
.node-begin {
	fill: #efefef;
}
.node-standard {
	fill: #afbfef;
}
.node-terminus {
	fill: #9fcf5f;
}
.node-loop {
	fill: #cf5f5f;
}
.node-widow {
	fill: #8f6fff;
}
.node-orphan {
	fill: #bf9f5f;
}
.node-phantom {
	fill: #00efef;
}
.nodepoint {
	stroke: #000000;
	stroke-width: 1px;
	opacity: 1.0;
	z-index: 1;
}
.nodepoint-start {
	fill: #9faf9f;
}
.nodepoint-end {
	fill: #dfbfbf;
}
.nodepoint-bidi {
	fill: #efbf7f;
}
.node-connect {
	fill: none;
	stroke: #000000;
	stroke-width: 1px;
	opacity: 1.0;
	z-index: -1;
}
.label {
	font-family: 'RobotoMono', monospace;
	font-size: 14pt;
	font-weight: bold;
	text-anchor: middle;
	dominant-baseline: central;
	alignment-baseline: central;
	cursor: pointer;
}
input {
	font-family: 'OpenSans', sans-serif;
}
textarea {
	font-family: 'OpenSans', sans-serif;
}
.formlabel {
	display: block;
	font-size: 11pt;
    margin-bottom: 1px;
    padding: 2px;
	white-space: nowrap;
}
.formgadget {
	display: block;
    margin-bottom: 4px;
    padding: 2px;
}
.formlabelinline {
	display: inline-block;
	font-size: 11pt;
    margin-bottom: 16px;
    padding: 2px;
	white-space: nowrap;
	vertical-align: top;
	width: 80px;
}
.formgadgetinline {
	display: inline-block;
    margin-bottom: 4px;
    padding: 2px;
}
.formgadgetreadonly {
	color: #606060;
	background-color: #e0e0e0;
}
.fieldnote {
	display: inline-block;
	font-size: 60%;
	padding: 0px 4px 8px 0px;
}
.mappingTable {
}
.mappingItemDelete {
	font-size: 90%;
}
.mappingItemDelete a[href] {
	color: red;
	text-decoration: none;
}
.mappingItemConnection {
	font-family: 'RobotoMono', monospace;
	font-size: 80%;
	font-weight: bold;
/*	width: 130px;*/
}
.mappingItemContent {
}
.mappingAddLink {
	font-size: 90%;
}
.mappingAddLink a[href] {
	color: green;
	text-decoration: none;
}
.helpblock {
	display: block;
	border: 1px solid #808080;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 8px;
}
.helpheader {
	display: block;
	font-weight: bold;
	background-color: #8fbfef;
	padding: 4px;
	text-align: center;
}
.helptext {
	display: block;
	padding: 4px;
	font-size: 80%;
}
.helpnote {
	display: block;
	padding: 0;
	margin: 0 0 4px 0;
	font-size: 80%;
	font-style: italic;
}
.helpitem {
	display: block;
	padding: 0;
	margin: 0 0 4px 0;
}
.helpsubitem {
	display: block;
	padding: 0;
	margin: 0 0 4px 16px;
	font-size: 80%;
	color: #404040;
}
.helpback {
	display: block;
	padding: 4px;
	margin: 4px;
	text-align: right;
	font-size: 80%;
	background-color: #afdfff;
}
.aboutblock {
	display: block;
	border: 1px solid #808080;
	background-color: #ffffff;
	padding: 0px;
	margin-bottom: 8px;
}
.aboutheader {
	display: block;
	font-weight: bold;
	background-color: #d0b0ff;
	padding: 4px;
	text-align: center;
}
.abouttext {
	display: block;
	padding: 4px;
}
.aboutitem {
	display: block;
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 90%;
}
.licenseitem {
	display: block;
	padding: 4px;
	margin: 8px 0 8px 0;
	font-size: 80%;
}
.centerblock {
	display: block;
	text-align: center;
}
.footnotes {
	display: block;
	padding: 0;
	margin: 16px 0 16px 0;
	font-size: 70%;
	border-top: 1px solid #808080;
}
.footnotes ul {
	text-indent: 0px;
	margin: 8px 0px;
	padding: 0 0 0 16px;
	list-style-type: square;
}
.footnotes ul li {
	text-indent: 0px;
	margin: 8px 0px;
	padding: 0;
}
#updateblock {
	display: block;
	text-align: center;
	margin: 4px;
	padding: 4px;
	font-size: 90%;
}
#updatebutton {
	display: inline-block;
	font-family: 'OpenSans', sans-serif;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid black;
	border-radius: 6px;
	background-color: #bfdfff;
	margin: 0 auto;
	padding: 4px;
}