﻿@charset "UTF-8";

.topology-svg {
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  -o-user-select: none;
  user-select: none;
}

.topology-svg-rect {
  fill: #ffffff;
  fill-opacity: 1;
  stroke: #aaaaaa;
  stroke-width: 1px;
  stroke-opacity: 1;
}

.topology-svg-rect:hover {
  fill: whitesmoke;
}

.node-template.node-hidden {
  opacity: .5;
}

.topology-svg-rect.selected:hover {
  fill: #cccccc;
}

.topology-svg-icon {
  font-family: FontAwesome;
  font-size: 10px;
  font-style: normal;
}

.topology-svg-icon-center {
  text-anchor: middle;
  dominant-baseline: central;
}

.topology-svg-icon-circle {
  fill: #ffffff;
  fill-opacity: 1;
  stroke: #aaaaaa;
  stroke-width: 1px;
  stroke-opacity: 1;
}

.connectorAction {
  fill: none;
  stroke-width: 0px;
  pointer-events: all;
}

.connector {
  fill: #ffffff;
  fill-opacity: 1;
  stroke: #555555;
  stroke-width: 1px;
  stroke-opacity: 1;
  pointer-events: all;
}

.connector:hover {
  fill: whitesmoke;
  pointer-events: all;
}

.connectorTarget {
  fill: $brand-success;
  fill-opacity: .6;
  pointer-events: all;
}

.connectorTarget:hover {
  fill: darken($brand-success, 5%);
  fill-opacity: 1;
  pointer-events: all;
}

.connectorlink {
  fill: none;
  stroke: #555555;
  stroke-width: 1px;
  stroke-opacity: 1;
}

.node-template {}

.node-template .background {
  fill: #ffffff;
  fill-opacity: 1;
  stroke: #555555;
  stroke-width: 1px;
  stroke-opacity: 1;
  pointer-events: all;
}

.node-template > .background:hover {
  fill: whitesmoke;
}

.node-template.selected .background {
  fill: #dddddd;
}

.node-template.selected > .background:hover {
  fill: #cccccc;
}

.node-template .title{
}

.node-template .simple-title{
  font-size: 10px;
}

.node-template .text-deprecated{
  text-decoration:line-through;
  fill: $brand-warning;
}

.node-template .version{
  font-size: 8px;
  fill: #666;
}

.node-template .simple-version{
  font-size: 10px;
}

.node-template .selector {
  fill: none;
  stroke-width: 1px;
  stroke-opacity: 0;
  pointer-events: all;
}

.collapsebar {
  fill: whitesmoke;
  fill-opacity: 1;
  pointer-events: all;
}

.link {
  fill: none;
  stroke-width: 1px;
  stroke-opacity: .2;
}

.link-network {
  fill: none;
  stroke-width: 4px;
}

.link-selected {
  stroke-width: 2px;
  stroke-opacity: 1;
}

.link-hosted-on {
  stroke: #0000FF;
}

.link-depends-on {
  stroke: #048204;
}

.link-network-0 { stroke: #9A0808; }
.link-network-1 { stroke: #202AB4; }
.link-network-2 { stroke: #2A7C93; }
.link-network-3 { stroke: #6B2C76; }
.link-network-4 { stroke: #30762C; }
.link-network-5 { stroke: #2C7655; }
.link-network-6 { stroke: #ED4D13; }
.link-network-7 { stroke: #DA0000; }
.link-network-8 { stroke: #1364ED; }
.link-network-9 { stroke: #DAD000; }

.groupColor-0 { fill: #9A0808; color: #9A0808;}
.groupColor-1 { fill: #202AB4; color: #202AB4;}
.groupColor-2 { fill: #2A7C93; color: #2A7C93;}
.groupColor-3 { fill: #6B2C76; color: #6B2C76;}
.groupColor-4 { fill: #30762C; color: #30762C;}
.groupColor-5 { fill: #2C7655; color: #2C7655;}
.groupColor-6 { fill: #ED4D13; color: #ED4D13;}
.groupColor-7 { fill: #DA0000; color: #DA0000;}
.groupColor-8 { fill: #1364ED; color: #1364ED;}
.groupColor-9 { fill: #DAD000; color: #DAD000;}

.d3-tip {
  font-size: $font-size-small;
  line-height: 1.4;
  max-width: $popover-max-width;
  padding: 3px 8px;
  text-decoration: none;
  background-color: $popover-bg;
  border: 1px solid $popover-fallback-border-color;
  border: 1px solid $popover-border-color;
  border-radius: $border-radius-base;
  pointer-events: none;
  margin-top: -6px;
  z-index: 9999;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  font-family: FontAwesome;
  font-size: 20px;
  color: $tooltip-arrow-color;
  position: absolute;
  width: 0;
  height: 0;
}

/* Northward tooltips */
.d3-tip.n:after {
  bottom: 11px;
  left: 49%;
  content: "\f0d7";
}

.runtime-state-no {
  fill-opacity: 0;
}
.runtime-state-deployed {
  fill: $state-success-text;
  fill-opacity: 1;
}
.runtime-state-maintenance {
  fill: $state-info-text;
  fill-opacity: 1;
}
.runtime-state-undeployed {
  fill: $gray-light;
  fill-opacity: 1;
}
.runtime-state-warning {
  fill: $state-warning-text;
  fill-opacity: 1;
}
.runtime-state-failure {
  fill: $state-danger-text;
  fill-opacity: 1;
}
.runtime-state-unknown {
  fill: #ffffff;
  fill-opacity: 1;
}
