spring-flo/projects/demo/app/app.component.css

.flow-view {
  height: 100%;
}

.header {
  font-weight: 400;
  font-family: "Varela Round",sans-serif;
  font-size: 36px;
  color: #eeeeee;
  padding: 2px;
  background-color: #34302d;
  border: none;
  border-top: 4px solid #6db33f;
  z-index: 1;
}

body {
  background-color: #eeeeee;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.control-button {
  width: 16px;
  height: 16px;
}

.header-small {
  font: 300 24px "Helvetica Neue";
}

pre {
  font-size: 18px;
}

.border-selected {
  stroke: #34302d;
  stroke-width: 3;
}

.controls {
  border-radius: 2px;
  border: solid;
  border-color: #6db33f;
  padding: 5px;
  margin-top: 3px;
  background-color: #eeeeee;
  border-width: 1px;
}

.button {
  background-color: #34302d;
  background-image: none;
  border-radius: 2px;
  color: #f1f1f1;
  font-size: 14px;
  line-height: 14px;
  font-family: Montserrat,sans-serif;
  border: 2px solid #6db33f;
  padding: 5px 20px;
  text-shadow: none;
}

.button span {
  background-color: #34302d;
  background-image: none;
  border-radius: 2px;
  color: #f1f1f1;
  font-size: 14px;
  line-height: 14px;
  font-family: Montserrat,sans-serif;
  border: 2px solid #6db33f;
  padding: 5px 20px;
  text-shadow: none;
}

.button input {
  background-color: #34302d;
  background-image: none;
  color: #f1f1f1;
  font-size: 14px;
  font-family: Montserrat,sans-serif;
  text-shadow: none;
  border: 0px;
  text-align:right;
}

.button input[type=range] {
  display: inline;
  width: 100px;
}

button.on {
  background-color: #5fa134;
}

.flow-definition-container {
  border: 1px solid;
  border-color: #6db33f;
  border-radius: 2px;
  margin-top: 3px;
  background-color: #ffffff;
  font-family: monospace;
  z-index: 2;
  width:100%;
  height:100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

textarea:input {
  outline: none;
  border: 1px solid #6db33f;
}

textarea:input:focus {
  outline: none;
  border: 1px solid #000000;
}

.flow-definition {
  border: 5px;
  height:100%;
  width:100%;
  font-size: 16px;
  resize: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* The text label on the nodes */
.label {
  font-family: 'Lucida Console';
  font-size: 12px;
}

/* The class for the 'icon/unicode_char' on the nodes */
.label2 {
  font-size: 18px;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

#flo-container {
  height: 800px;
}


/* Modules DnD shape animation */

@keyframes flash-stroke-width {
  0%    { stroke-width: 1; }
  50%   { stroke-width: 4; }
  100%  { stroke-width: 1; }
}

/*.dnd-source-feedback.joint-element .box {*/
  /*animation: flash-stroke-width 2s linear infinite;*/
/*}*/
.dnd-target-feedback.joint-element .box {
  animation: flash-stroke-width 2s linear infinite;
}

/* Ports DnD animation */
.dnd-source-feedback.input-port {
  animation: flash-stroke-width 2s linear infinite;
}
.dnd-source-feedback.output-port {
  animation: flash-stroke-width 2s linear infinite;
}
.dnd-target-feedback.input-port {
  animation: flash-stroke-width 2s linear infinite;
}
.dnd-target-feedback.output-port {
  animation: flash-stroke-width 2s linear infinite;
}

/* Links DnD feedback animation */
.dnd-source-feedback .connection {
  animation: flash-stroke-width 2s linear infinite;
}
.dnd-target-feedback .connection {
  animation: flash-stroke-width 2s linear infinite;
}

.properties-group-container .property-row {
  display: block;
}

.df-property-row {
  width: 100%;
  display:inline-table;
}

.df-property-label-cell {
  width: 50%;
}

.df-property-container {
  width: 100%
}

.df-property-control {
  width: 100%;
}

.invalid-property-value .df-property-label-cell {
  color: red;
}

.invalid-property-value .df-property-control {
  outline-color: red;
  border-color: red;
}

.validation-error-block {
  color: red;
}

.code-editor-host {
  height: 120px;
  width: 284px;
  border: 1px solid;
  border-color: lightgrey;
}

.CodeMirror pre.CodeMirror-placeholder {
  color: lightgray;
}