html, body, div#body_wrapper {
   height: 100%;
   /* font-family: Arial, Helvetica, sans-serif; */
   font-size: 16px;
}

body {
    margin: 0;
}

svg.mainplot, canvas {
  position: absolute;
  image-rendering: optimizeSpeed;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

canvas.colorbar {
  pointer-events: none;
}

html {
    font-size: 100%;
}

a svg, a span {
  vertical-align: middle;
  position: relative;
}

div.dataflow.editor.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    user-select: none;
}

svg.editor {
  flex: 1;
  width: 100%;
  height: 100%;
  /* float: left; */
  margin-right: -1px;
  margin-bottom: -1px;
}

.output.label, .input.label {
  display: none
}

.axis-label {
  font-size: 18px;
}

.axis .tick text {
  font-size: 14px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}
.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
    shape-rendering: crispEdges;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.grid path {
    stroke-width: 0;
    fill: none;
}



.axis .axis-label {
    user-select: none;
    fill: black;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.legend, .tick {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.line {
    fill: none;
    opacity: 1;
    stroke-width: 1.5px;
}

.line.highlight {
    opacity: 1;
    stroke-width: 4.5px !important;
}

.line.unhighlight {
    opacity: 0.2;
}

.dot {
    /* consider the stroke-width the mouse detect radius? */
    stroke: transparent;
    stroke-width: 10px;
}

.dot:hover {
    stroke: rgba(68, 127, 255, 0.3);
}

.dot.masked {
    stroke: red !important;
}

path.hidden, g.hidden {
    display: none;
}

g.legend rect.hidden {
    fill-opacity: 0.1;
}

.mainview > rect {
  fill: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

path.x-slice.lines {
  stroke-width: 5px !important;
}

path.x-slice.lines:hover {
  stroke-width: 8px !important;
}

g.interactor-sector path.centerline {
    stroke: orange;
    stroke-dasharray: 10,2;
}

rect.zoom {
  stroke: steelblue;
  fill-opacity: 0.5;
}

div.tooltip {
  position: absolute;
  text-align: left;
  /*width: 60px;*/
  /*height: 28px;*/
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 20;
}

div.fields .subfield {
  padding-left: 1em;
}

.ui-layout-north {
  background-color: yellow;
}

div.reductus-plot-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
}

#plotdiv {
  flex: 1;
  text-align: start;
  overflow: auto;
  box-sizing: content-box;
  /* overflow: hidden; */
}

#plotdiv.plot {
  overflow: hidden;
}

#plot_title {
  min-height: 20px;
}
#plot_controls {
  min-height: 1em;
}
#controls {
  position: absolute;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
}
.ui-layout-center {
  /* adding padding to hold controls, title */
  /*padding-bottom: 80px;*/
  /* height: 100%; */
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: column;
  flex-direction: column;
  text-align: center;
  box-sizing: content-box;
}

.jstree > ul > li > a > .jstree-checkbox {
  display: none !important;
}
    
/* styles for dataflow editor */

svg.editor g.module rect {
  stroke-width: 2px;
  stroke: blue;
  cursor: pointer;
  fill: white;
}

svg.editor g.module rect.title {
  fill-opacity: 0;
}

svg.editor text.title {
    pointer-events: none;
}

svg.editor rect.terminal.output {
  fill: url(#output_hatch);
}

svg.editor g.module g.satisfied rect.terminal.output {
    fill: #88FFFF;
}

svg.editor g.module g.wireable rect.terminal.output:hover {
    fill: yellow;
}

svg.editor rect.terminal.input {
    fill: url(#input_hatch);
}

svg.editor g.module g.satisfied rect.terminal.input {
    fill: #88FF88;
}

svg.editor g.module g.wireable rect.terminal.input:hover {
    fill: yellow;
}

svg.editor polygon.terminal.state {
    display: none;
}
    
svg.editor path.wire {
    fill: none;
    stroke-dasharray: 2,2;
    stroke-width: 5px;
    stroke: red;
    cursor:context-menu;
}

svg.editor path.wire-background {
  fill: none;
  stroke-width: 8px;
  stroke: white;
  cursor:context-menu;
}

svg.editor path.wire-new {
    fill: none;
    stroke-width: 5px;
    stroke: black;
    stroke-opacity: 0.5;
    pointer-events: none;
}

svg.editor path.exposed-wire, svg.editor rect.exposed {
  display: none;
}

@keyframes offset {
  from {
    stroke-dashoffset: 20;
  }
  to {
    stroke-dashoffset: 0;
  }
}
    
svg.editor path.wire.satisfied {
    /*stroke-linecap: round;*/
    stroke-dasharray: none;
    /*animation: offset 1s linear forwards infinite;*/
    stroke: green;
}
    
svg.editor g.module g.selected rect {
    stroke-width: 5px;
}

svg.editor g.module g.moving rect.title {
    fill: lightskyblue;
    fill-opacity: 0.5;
    cursor: move;
}
    
    
svg.editor polygon.terminal.state.calculated {
    fill-opacity: 1.0;
}

svg.editor polygon.terminal.state.calculating {
    display: inline-block;
    position: relative;
    -webkit-animation-name: strobe; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: strobe;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
    
/* Chrome, Safari, Opera */
@-webkit-keyframes strobe {
    0%   {fill-opacity: 0;}
    100% {fill-opacity: 1.0;}
}


@keyframes strobe {
    0%   {fill-opacity: 0;}
    100% {fill-opacity: 1.0;}
}

div#navigation {
    position: relative;
    overflow-x: auto;
    padding: 0.5em;
}

div.block-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background:rgba(128,128,128,0.5);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* display: none; */
    z-index: 500;
}

div.block-overlay .overlay-positioner {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.block-overlay .overlay-message {
  background: white;
  padding: 0.5em;
  border: 3px solid darkgreen;
  border-radius: 0.25em;
  font-size: 125%;
}

#datasources {
    position: relative;
}

#datasources .buttons .ui-icon {
    display: inline-block !important;
    vertical-align: middle;
}
#datasources .buttons .datasource {
    font-weight: bold;
    font-style: italic;
    padding-left: 10px;
    padding-right: 10px;
}
ul.dirbrowser { list-style-type: none; margin: 0; padding: 0; }
ul.dirbrowser li { margin: 3px; padding: 0em 0.4em; font-size: 1.2em; }

div.remote-filebrowser {
  overflow-x: auto;
}

.patheditor { 
    color: blue;
    cursor: pointer;
}

.patheditor .pathitem {
    display: inline-block;
}

li.subdiritem { 
    list-style-type: none; 
    cursor: pointer;
    color: blue;
}
li.fileitem {
    cursor: pointer;
    color: blue;
    text-decoration: none;
}

.popup {
    position: absolute;
    background-color: #fff;
    /*width: 200px;*/
    border: 1px #ccc solid;
    border-radius: 6px;
    box-shadow: #333 2px 2px 4px;
    font-family: arial, helvetica, sans-serif;
    margin: 5px 5px 2px 2px;
}
.popup ul, .popup ul ul {
    padding: 5px;
    list-style-type: none;
    margin: 0;
}

.popup ul ul li {
    padding-left: 5px;
}

.popup ul li {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 0px;
    margin-left: 0px;
    cursor: pointer;
}
.popup ul li:hover {
    background-color: LightGray;
}

.popup hr {
    margin: 0;
}

div.ui-dialog {
    width: 450px;
}

li.ui-menu-item {
    list-style-image: none !important;
}

li.ui-menu-item div.ui-menu-item-wrapper {
    padding-left: 3px;
}

ol.categories li.category {
    border: 2px solid grey;
    border-radius: 6px;
    margin-bottom: 4px;
    padding: 2px;
}

ol.categories li.category select {
    border-radius: 4px;
}

ol.categories span.category:nth-child(n+2):before {
    content: " : ";
}

div.export-types label {
    border: 1px solid grey;
    border-radius: 3px;
}

div#body_wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;

}

div#middle_content {
  width: 100%;
  padding: 8px 8px 0px 8px;
  background-color: #F6F6F6;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
}

div#west_panel {
  display: flex;
  flex-direction: column;
}

div#bottom_panel {
  display: flex;
  flex-direction: column;
}

div#top_panel {
  min-height: 2em;
  max-height: 2em;
  padding: 1em;
  overflow: visible;
  box-sizing: content-box;
  z-index: 1000;
}

div#east_panel {
  padding: 1em;
}

div#all_content {
    flex: 1;
    display: flex;
    flex-direction: column;
}