* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  font-family: Microsoft Yahei;
  flex-direction: column;
  min-height: 520px;
}
.flowchart-panel {
  display: flex;
  flex-grow: 1;
}
.flowchart-panel .left {
  padding: 10px 0;
  width: 200px;
  background: #f0f1f9;
  border-right: 1px solid #aaa;
}
.flowchart-panel .left h3,
.flowchart-panel .left input {
  margin-left: 10px;
}
.flowchart-panel .left ul.nodes {
  color: #333;
  list-style: none;
}
.flowchart-panel .left ul.nodes li {
  text-indent: 30px;
  font-size: 14px;
  padding: 8px 0;
  margin: 8px 0;
  list-style: none;
}
.flowchart-panel .left ul.nodes li a {
  float: right;
  padding-right: 10px;
  text-decoration: none;
  display: none;
}
.flowchart-panel .left ul.nodes li:hover {
  background-color: #d8dcf0;
}
.flowchart-panel .left ul.nodes li:hover a {
  display: inline;
}
.flowchart-panel .middle {
  flex-grow: 1;
  position: relative;
  margin: 0 10px;
  padding: 10px;
}
.flowchart-panel .right {
  width: 300px;
  padding: 10px;
  position: relative;
  color: #555;
  border-left: 1px solid #aaa;
}
.flowchart-panel .right p {
  margin: 10px 0;
  font-size: 12px;
}
.flowchart-panel .right h4 {
  margin: 20px 0;
}
._jsPlumb_connector,
._jsPlumb_startpoint,
._jsPlumb_endpoint,
.endpointTargetLabel,
.endpointSourceLabel {
  cursor: pointer;
}
.btns {
  background: #f0f1f9;
  padding: 20px;
  border-top: 1px solid #aaa;
}
.btns button {
  padding: 4px 16px;
  background: #2196f3;
  color: #fff;
  border: none;
  cursor: pointer;
  outline: 0;
}
.btns button:hover {
  background: #0c7cd5;
}
.btns button:active {
  background: #0960a5;
}
#jsonOutput {
  width: 99%;
  height: 100px;
  margin: 0 auto;
}