.editor-view {padding: 40px; align-items: stretch;height: 100%;background: white;}

/****************************************************************************\
 * Editor Nav
\****************************************************************************/

.editor-view .editor-nav { margin-right: 20px; }
.editor-view .editor-nav .editor-nav-tag { padding: 10px; }
.editor-view .editor-nav .editor-nav-block { padding: 5px; padding-left: 20px; padding-right: 0; }



/****************************************************************************\
 * Editor Main
\****************************************************************************/

.editor-view .editor-main { flex: 1; }
.editor-view .editor-block-header { margin-bottom: 40px; }
.editor-view .editor-block-description {max-width: 480px;font-weight: 300; line-height: 1.5; padding: 10px 0;margin-right: 40px;flex: 1;font-size: 1em;}
.editor-view .editor-block-title {font-size: 1.25em; margin-bottom: 0.25em;font-weight: 500; margin-bottom: 0.5em; }

.editor-view .editor-block-storyboard { flex: 1; align-self: flex-start; }

.editor-view .editor-block-frame { width: 130px; height: 80px; margin: 10px; margin-top: 3em;justify-content: center; align-items: center; border: 2px solid #888; border-radius: 3px; }
.editor-view .editor-block-frame.active,
.editor-view .editor-block-frame:not([open="true"]).active:hover{ background: #f0f0f0; }

.editor-view .editor-block-frame:not([open="true"]):hover { background: #fcfcfc; }
.editor-view .editor-block-frame:not([open="true"]):active { background: #f0f0f0; }


.editor-view .editor-new-frame { border-color: #ccc; color: #ccc; justify-content: space-around; }
.editor-view .editor-new-frame:empty:after { display: flex; content: "+"; font-size: 3em; font-weight: 200;}

.editor-view .editor-new-frame-type { align-self: stretch; color: #606060; }


.editor-view .editor-block-content { flex: 1; }

/****************************************************************************\
 * Editor Node Tree
\****************************************************************************/

.editor-node-tree { align-self: flex-start; padding-left: 44px; padding-top: 16px; }
.editor-node-tree input {font-size: 1em; font-weight: inherit;font-family: inherit; border: none; color: inherit;}
.editor-node-tree-node { position: relative; padding: 5px 0; margin-top: -16px; min-height: 60px; }
.editor-node-tree > .editor-node-tree-node { min-height: 65px; }

.editor-node-tree-node-new {margin-top: -16px; align-items: flex-start; }
.editor-node-tree-node-new > .ui-autocomplete {margin-top: 10px;width: 100px;z-index: 2;}
.editor-node-tree-node-new > .button {margin-top: 7px;}
.editor-node-tree-node-new > .button:before {width: 1.3em; line-height: 1.3em;text-align: center; font-size: 0.9em; border: 1px solid #ccc; border-radius: 100px;}

.editor-node-tree-node-pattern { margin-top: 11px; margin-left: 15px; }
.editor-node-tree-node-pattern .editor-node-tree-node-pattern-name { margin-left: -15px; margin-bottom: 8px;}
.editor-node-tree-node-pattern-field {position: relative; min-height: 22px; z-index: 1; }
.editor-node-tree-node-pattern-field > text:not(:last-child):after {content: ":"}
.editor-node-tree-node-pattern-value {padding:0;padding-left: 5px; max-width: 100px;}

.editor-node-tree-node-pattern div.button {position: relative;width: 40px; line-height: 1.3em; margin-top: -4px;margin-left: -34px;margin-bottom:-4px;font-size: 0.9em; color: #999; }
.editor-node-tree-node-pattern div.button:before { width: 1.3em; line-height: 1.3em; text-align: center; border: 1px solid #ddd; border-radius: 100px; background: white; font-weight: 100; }
.editor-node-tree-node-pattern div.button:after {content: " "; display: block; position: absolute; left: 50%; right: 5px; top: 50%; margin-top: 0; z-index: -1; border-top: 1px solid #ccc; }

.editor-node-tree-node-controls { position: absolute; top: 38px; left: -21px; padding: 4px 0;}
.editor-node-tree-node-controls > div.button {position:relative; margin:0; margin-right: -4px; ;z-index: 1;font-size:0.9em;}

.editor-node-tree-node-controls:before {content: " ";display: block;position: absolute;top: 4px;bottom: 18px;right: -4px;border-left: 1px solid #ccc;}
.editor-node-tree-node-controls > div.button:before {width: 1.3em;margin-top: -5px;text-align: center;line-height: 1.3em;border: 1px solid #ccc;border-radius: 100px;background: white;font-weight: 100;}
.editor-node-tree-node-controls > div.button:after {content: " "; display: block; position: absolute; left: 50%; right: 0; top: 50%; margin-top: -3px; z-index: -1; border-top: 1px solid #ccc; }

.editor-node-tree-node-field-new-attribute {width: 100px;z-index: 2;}

/* Crazy tree positioning magic */

.editor-node-tree-node-hex { position: absolute; left: -44px; cursor: default; -webkit-user-select: none; }
.editor-node-tree-node-pattern .editor-node-tree-node-hex { position: absolute; left: -59px; }
.editor-node-tree-node-pattern .editor-node-tree-node-pattern .editor-node-tree-node-hex { position: absolute; left: -74px; }
.editor-node-tree-node-pattern .editor-node-tree-node-pattern .editor-node-tree-node-pattern .editor-node-tree-node-hex { position: absolute; left: -89px; }
.editor-node-tree-node-pattern .editor-node-tree-node-pattern .editor-node-tree-node-pattern .editor-node-tree-node-pattern .editor-node-tree-node-hex { position: absolute; left: -104px; }
/* okay, you win. */

.editor-node-tree-node-pattern-field:before {display: block;content: " ";position: absolute;top: 11px;left: -13px;width: 9px;height: 1px;border-top: 1px solid #ccc;}

.editor-node-tree-node-pattern-name:before {display: block;content: " ";position: absolute;top: 26px;left: -13px;width: 9px;height: 1px;border-top: 1px solid #ccc;}
.editor-node-tree > .editor-node-tree-node > .editor-node-tree-node-pattern > row > .editor-node-tree-node-pattern-name:before {display: none; }

.editor-node-tree-node-pattern:before {display: block;content: " ";position: absolute; left: 1px; top: 38px; bottom: 6px;width: 0;border-left: 1px solid #ccc;}

.editor-node-tree-fields:last-child > .editor-node-tree-node-pattern-field:last-child:after {display: block;content: " ";position: absolute;top: 11px;bottom: -10px;left:-14px;width: 0;margin-top: 1px;border-left: 2px solid white;}

.editor-node-tree-subnodes:last-child .editor-node-tree-node:last-child:after {display: block;content: " ";position: absolute;top: 26px;bottom: -10px;left: -14px;width: 0;margin-top: 1px;border-left: 1px solid white;}

.editor-node-tree-node-pattern row:first-child:last-child > .editor-node-tree-node-pattern-name:after {display: block;content: " ";position: absolute;top: 38px;bottom: 5px;left:0;width: 0;border-left: 2px solid white;}

.editor-node-tree-subnodes:nth-child(2) { margin-top: 20px;}
.editor-node-tree-subnodes:nth-child(3) { margin-top: 5px;}

/* Animations */
.editor-node-tree-node-hex > canvas { transition: transform 0.2s ease-out; }
.editor-node-tree-node[open="true"] > .editor-node-tree-node-hex > canvas { transform: rotateZ(60deg); }

/****************************************************************************\
 * Editor Molecule List
\****************************************************************************/
.editor-molecule-list { position: relative; flex: 1; }
.editor-molecule-list-molecule { position: relative; display: flex; flex: 0 0 auto; padding-bottom: 10px;}
.editor-molecule-list-molecule-grid { position: relative;}
.editor-molecule-list-molecule-cell { cursor: default; -webkit-user-select: none; }

.editor-infobox { position: absolute; top: 100%; left: 0; /*left: 75%; transform: translateX(-50%);*/ width: 250px; padding: 10px; z-index: 3; background: white; border-radius: 3px; border: 1px solid #bbb; }

.editor-infobox-field-new  {position: relative;width: 40px; line-height: 1.3em; margin-top: 0;margin-left: -4px;margin-bottom:-4px;font-size: 0.9em; color: #999; }
.editor-infrobox-field-new:before { width: 1.3em; line-height: 1.3em; text-align: center; background: white; font-weight: 100; }

.editor-infobox-field-attribute { margin-left: -8px; width: auto; }
.editor-infobox-field-attribute input { font-size: 1em; line-height: 1.3em; padding: 5px 10px; font-weight: inherit;font-family: inherit; border: none; color: inherit;}

.editor-infobox-node { margin-bottom: 10px; }

.editor-infobox-node-header { margin: 0 9px; margin-bottom: 0.25rem; }
.editor-infobox-node-name { font-size: 1.25em; font-weight: 500; color: #606060; }

.editor-infobox-atom { width: 100%; }
.editor-infobox .ui-field-table td { border: none; }
.editor-infobox .ui-field-table td:first-child { width: 75px; }

.editor-infobox .editor-paginator { padding-left: 0.5em; color: #909090; margin-top: 4px; }
.editor-infobox .editor-paginator > div { margin-top: -2px; }

/****************************************************************************\
 * Editor Block Canvas
\****************************************************************************/
.editor-view .editor-query-tree { width: 180px; margin-right: 10px; }


/****************************************************************************\
 * Data Editor
\****************************************************************************/
.editor-block-data-canvas {position: relative;flex: 1;align-items: flex-start;}
.editor-block-data-canvas .editor-data-toolbar { flex: 0 0 auto; background: #eee; border-radius: 3px; }
.editor-block-data-canvas .editor-data-toolbar > .ui-button { display: flex; flex-direction: column; align-items: center; padding: 10px; color: #999; }
.editor-block-data-canvas .editor-data-toolbar > .ui-button:before { font-size: 1.5em; color: #404040;}
.editor-block-data-canvas .editor-data-toolbar > .ui-button.editor-active {  color: #66f; }
.editor-block-data-canvas .editor-data-toolbar > .ui-button.editor-active:before {  color: #44f; }
.editor-block-data-canvas .editor-data-toolbar > .editor-data-toolbar-select:before { transform: rotateZ(-30deg); }

.editor-block-data-canvas .editor-data-molecule-infobox {position: absolute;top: 300px;left: 70px;padding: 10px;z-index: 2;border: 1px solid gray;background: rgba(255, 255, 255, 0.5);}
.editor-block-data-canvas .editor-data-node-infobox { padding: 10px; }
.editor-block-data-canvas .editor-data-node-infobox + .editor-node-infobox { border-top: 1px solid gray; }
.editor-block-data-canvas .editor-data-atom-infobox + .editor-atom-infobox { margin-top: 20px; }

.editor-block-data-canvas .editor-data-node-header { font-weight: 500; text-align: center; }
.editor-block-data-canvas .editor-data-field-row { min-width: 200px; min-height: 20px; margin-bottom: -1px; border: 1px solid #ccc; }
.editor-block-data-canvas .editor-data-field-attribute {display: flex;flex: 0;width: auto;min-width: 100px;padding: 0 10px; margin: -1px; margin-right: 0; background: transparent; border: 1px solid transparent; border-right-color: #ccc;}
.editor-block-data-canvas .editor-data-field-value-set {flex: 1 1 auto;/* max-width: 140px; */}
.editor-block-data-canvas .editor-data-field-value {display: flex;flex: 1;min-width: 80px;min-height: 20px;padding: 0 10px;margin: -1px;background: transparent;border: 1px solid transparent;}

.editor-block-data-canvas .editor-data-molecule-infobox input { font-size: 1em; font-weight: inherit;font-family: inherit; color: inherit;}
.editor-block-data-canvas .editor-data-molecule-infobox input::-webkit-input-placeholder { font-weight: 300; }

.editor-block-data-canvas .editor-data-field-new-row { background: #ddffdd; border-color: #44cc44; }

.editor-block-data-canvas .editor-data-field-row.editor-data-erasing { background: #ffdddd; border-color: #cc4444; }
.editor-block-data-canvas .editor-data-field-value.editor-data-erasing { background: #ffdddd; border-color: #cc4444; }



/****************************************************************************\
 * Shapes
\****************************************************************************/

/* .shape-hexagon { position: relative; } */
/* .shape-hexagon .shape-hexagon-body { justify-content: center; align-items: center; } */
/* .shape-hexagon .shape-hexagon-cap { } */

/* .shape-hexagon .shape-hexagon-inner {  } */

/* .shape-hex-grid {position: relative;left: 70px;} */





.hex-grid > .shape-hexagon-body,
.hex-grid > .shape-hexagon-cap { transition: 0.5s background ease-in, 0.5s border-top-color ease-in, 0.5s border-bottom-color ease-in; }

.hex-grid:hover > .shape-hexagon-body,
.hex-grid:hover > .shape-hexagon-cap { transition: 0.2s background ease-out, 0.2s border-top-color ease-out, 0.2s border-bottom-color ease-out; }


.hex-grid:hover > .shape-hexagon-body { background: #ccc !important; }
.hex-grid:hover > .shape-hexagon-cap.first { border-bottom-color: #ccc !important; }
.hex-grid:hover > .shape-hexagon-cap.last { border-top-color: #ccc !important; }

text { flex: 0 0 auto; }
column { flex: 0 0 auto; }
row { flex: 0 0 auto; }