@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700,400");
@font-face {
    font-family: 'icomoon';
    src: url("icomoon.woff");
}
.myglyphiconbig {
    font-family: 'icomoon';
    font-size: 14px;
}
.myglyphiconsmall {
    font-family: 'icomoon';
    font-size: 11px;
}
.myglyphiconbig.reset-big:before {
    content: "\e986";
}
.myglyphiconbig.zoom-in-big:before {
    content: "\e987";
}
.myglyphiconbig.zoom-out-big:before {
    content: "\e988";
}
.myglyphiconsmall.reset-small:before {
    content: "\ea56";
}
.myglyphiconsmall.zoom-in-small:before {
    content: "\ea0a";
}
.myglyphiconsmall.zoom-out-small:before {
    content: "\ea0b";
}
.magic:before {
    content: "\e600";
}
.popover p {
    margin: 5px 5px 0 5px;
}
.popover-title {
    text-align: center;
}
svg#vis {
  border-radius: 5px;
  border: 1px solid #ddd;
}
svg#vis text {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  fill: #0e0e0e;
}
svg #zoomButtons > div {
    float: right;
    /* display: block; */
}
svg #zoomButtons .hidden-xs .btn-group {
  margin: 7px;
  width: 120px;
}
svg #zoomButtons .visible-xs .btn-group {
  margin: 10px;
  margin-right: 5px;
  width: 102px;
}
svg #MoveButtonSmall {
    position: relative;
    float: right;
    margin-top: 38px;
}
svg #MoveButtonSmall > button, svg #MoveButtonBig > button {
    margin: 10px;
}
svg #MoveButtonBig {
    position: relative;
    float: right;
    margin-top: 38px;
    
}
svg #legendfo > .hidden-sm {
    margin-top: 47px;
    float: right;
    margin-right: 55px;
}
svg #legendfo > .visible-sm {
    margin-top: 47px;
    float: right;
    margin-right: 50px;
}
svg #legendfo > .visible-sm > button {
    padding: 5px 8px;
}
svg #legendfo .legendspan:before {
   content: "Legend"; 
}
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
svg .nodelink {
  fill: none;
  stroke: #3cabd8;
  stroke-width: 1.5px;
}
svg .nodelink.temp {
    stroke: #ddd;
}
svg rect {
  stroke: #2c789b;
  stroke-width: 1px;
}
svg rect.active {
  stroke: #3caa05;
}
svg rect.disabled {
  stroke: #f00;
}
svg g.remover {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}
svg g.remover circle {
  transition: fill ease 0.3s;
  fill: #fff;
  stroke: #0e0e0e;
  stroke-width: 1.5px;
}
svg g.remover line {
  transition: fill 0s ease 0.3s;
  stroke: #0e0e0e;
}
svg g.remover .visible:hover circle,
svg g.remover .visible:hover line {
  fill: #f00;
}
.visible {
  transition: opacity 0.3s linear;
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s;
}
svg .details {
  opacity: 0;
  fill: #abd83c;
  stroke: #587317;
}
svg .detailforeign {
  transition: opacity 0.3s linear;
  opacity: 0;
}
svg #optimizationBigDropdown {
    display: inline-block;
}
svg #optimizationForward, #optimizationBackward {
    margin-top: -3px;
}
svg #optimizationForward[disabled], #optimizationBackward[disabled] {
    margin-top: 0px;
}
svg #optimizationForward[disabled] {
    margin-left: 3px;
}
svg #optimizationForward[disabled] span {
    margin-left: -3px;
}
svg #optimizationBigDropdown > button {
    margin-left: 3px;
    width: 230px;
}
svg #optimizationPath li a.currentOpt {
    background-color: rgb(230, 230, 230);
}
svg #optimizationPath > div {
    float: left;
    margin: 10px;
}
svg #optimizationPath {
  height: 250px;
}
svg #optimizationPath .visible-xs {
    width: 170px;
    height: 80px;
    padding: 0px;
}
svg #optimizationSmallDropdown {
    display: block;
    margin-bottom: 7px;
}
.visible {
  transition: opacity 0.3s linear;
  opacity: 1;
}
.detailname ~ {
  font-style: italic;
}
.detailname {
  font-style: normal;
  font-weight: bold;
}
svg .connector {
  fill: #0265c0;
  fill-opacity: 0.3;
  display: none;
}
svg .connector.active {
  fill: #3caa05;
  fill-opacity: 0.7;
}
svg .connector.disabled {
  fill: #f00;
  fill-opacity: 0.7;
}
svg .connector.missing {
  fill: #f00;
  fill-opacity: 0.7;
  display: inline;
}
svg .conInner {
  fill: #0265c0;
  fill-opacity: 0;
}
svg .conInner.active {
  fill: #abd83c;
  fill-opacity: 0.7;
}
svg#vis {
  min-height: 300px;
}
svg#vis .cardinality {
  font-size: 13px;
}
svg#vis .cardinality rect {
  fill: #3cabd8;
  stroke: #0e0e0e;
}
svg#vis text.operator {
    pointer-events: none;
}
p#error {
  font-color: #f00;
}
textarea {
  height: auto;
}
div#query {
  width: 700px;
  height: 600px;
}
div#query textarea {
  width: 100%;
  height: 100%;
}
#operatorEditor {
  display: none;
  width: 700px;
  height: 400px;
}
#operatorEditor textarea {
  width: 100%;
  height: 100%;
}
#plainplan {
  display: none;
}