html, body {
	height: 100%;
}

.CodeMirror {
	border: 1px solid #ddd;
	height: auto;
}

.configurator {
	display: flex;
}

.configurator .tree {
	flex: 0 0 calc(100% - 150px);
	max-width: 920px;
	margin-bottom: 5rem;
}
.configurator .toolsContainer {
	flex: 0 0 calc(150px - 1rem);
	padding: 2.4rem 0 1rem 1rem;
}
.configurator .tools .nodesContainer {
	max-width: 150px;
}
@media (min-width: 768px) {
	.configurator .tree { flex:0 0 70%; }
	.configurator .toolsContainer { flex:0 0 30%; }
}
@media (min-width: 992px) {
	.configurator .tree { flex:0 0 60%; }
	.configurator .toolsContainer { flex:0 0 40%; }
	.configurator .toolsContainer .nodesContainer { max-width:200px; }
}
.configurator .tools {
	position: sticky;
	top: 2rem;
}
.configurator .tools .nodesContainer .node {
	cursor: move;
}
.configurator .tools .trashContainer {
	/*max-width: 500px;*/
	margin: 2rem 0 0 0;
	padding: 0;
	list-style-type: none;
	position: relative;
}
.configurator .tools .nodesTrash {
	min-height: 150px;
	margin: 0;
	padding: 0;
}
.configurator .tools .trashContainer .trashIcon {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	margin: auto;
	padding: 2.25rem;
	text-align: left;
	font-size: 4rem;
	color: #aaa;
}


.configurator .textareaWrapper:first-child {
	margin-bottom: -1px;
}


.configurator .nodesContainer {
	min-height: 2rem;
	display: block;
	margin: 0;
	padding: 0;
	text-indent: 0;
	list-style-type: none;
}

.configurator .node {
	position: relative;
	display: block;
	border-top: 2px solid #c8c8c8;
	background-color: #f8f8f8;
}
.configurator .node .node {
	margin-left: 1.75rem;
}

.configurator .node > .nodeWrapper > .nodeMove {
	width: 1.25rem;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #e8e8e8;
	cursor: move;
	text-align: center;
	padding-top: 0.5rem;
	color: #a8a8a8;
	font-size: 0.9rem;
	line-height: 1.2rem;
}

.configurator .node[data-node="element"] { background-color:#e7f3e4; border-color:#a7c0a0; }
.configurator .node[data-node="element"] > .nodeWrapper > .nodeMove { background-color:#c7e0c0; color:#87a080; }

.configurator .node[data-node="condition"] { background-color:#ffefd5; border-color:#cfab71; }
.configurator .node[data-node="condition"] > .nodeWrapper > .nodeMove { background-color:#efcb91; color:#af8b51; }

.configurator .node[data-node="attribute"] { background-color:#ecf8f9; border-color:#a0bfc0; }
.configurator .node[data-node="attribute"] > .nodeWrapper > .nodeMove { background-color:#c0dfe0; color:#809fa0; }

.configurator .node[data-node="expression"] { background-color:#f7f1fb; border-color:#b4a0c0; }
.configurator .node[data-node="expression"] > .nodeWrapper > .nodeMove { background-color:#d4c0e0; color:#9480a0; }

.configurator .node[data-node="cycle"] { background-color:#e5f0ff; border-color:#94acca; }
.configurator .node[data-node="cycle"] > .nodeWrapper > .nodeMove { background-color:#b4ccea; color:#748caa; }


.configurator .node > ul {
	margin: 0;
	padding: 0;
}

.configurator .node.ui-sortable-helper {
	opacity: 0.75;
}

.configurator .nodesContainer .placeholder,
.configurator .nodesTrash .placeholder
{
	list-style-type: none;
	text-indent: 0;
	height: 2.5rem;
	margin: 5px 0;
	padding: 0;
	border: 2px dashed #989898!important;
	background-color: transparent;
}
.configurator .nodesContainer .node .placeholder {
	margin-left: 1.75rem;
}
.configurator .nodesContainer .mjs-nestedSortable-error {
	background: #ffafb2;
	border: 2px dashed #f00 !important;
}
.configurator .tools .nodesContainer .placeholder {
	display: none;
}
.configurator .tools .nodesTrash .placeholder {
	height: 150px;
	background-color: #ffd6c0;
	border: 2px dashed #f00 !important;
}


.configurator .nodeContent {
	flex: 1;
	overflow: auto;
	line-height: 2rem;
	padding: 0 0.5rem 0 1.75rem;
	display: flex;
	justify-content: space-between;
}
.configurator .nodeContent > * {
	flex: 1;
}
.configurator .nodeContent > .half {
	flex: 0 0 calc(50% - 0.25rem);
}
.configurator .nodeContent input {
	box-sizing: border-box;
	width: 100%;
	padding: 0.2rem 0.2rem 0.15rem 0.2rem;
	margin: 0.375rem 0 0.265rem 0;
	line-height: 1rem;
	border: none;
	background-color: rgba(0, 0, 0, 0.058823529411764705);
	font-weight: bold;
	font-family: "Lucida Console", Monaco, monospace;
}