console/config/css/dispatch.css

/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
*/

svg {
  background-color: transparent;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

svg:not(.active):not(.ctrl) {
  cursor: crosshair;
}
#end-arrow-selected, #start-arrow-selected {
	stroke: #33F;
	fill: #33F;
}
path.link.selected {
  stroke-dasharray: 10,2;
  stroke: #33F  !important;
}

path.link {
  fill: #000;
  stroke: #000;
  stroke-width: 4px;
  cursor: default;
}

svg:not(.active):not(.ctrl) path.link {
  cursor: pointer;
}

path.link.temp {
  opacity: 0.3;
}
path.link.temp.over {
  opacity: 0.8;
  stroke-dasharray: 10,2;
}
path.link.small {
  stroke-width: 2.5;
  stroke: darkgray;
}
path.link.highlighted {
    stroke: #6F6 !important;
}
marker#start-arrow-highlighted,
marker#end-arrow-highlighted {
    fill: #6F6;
}
marker#start-arrow-small,
marker#end-arrow-small {
    fill: darkgray;
}

path.link.dragline {
  pointer-events: none;
}

path.link.hidden {
  stroke-width: 0;
}

circle.node {
  stroke-width: 1.5px;
  cursor: pointer;
  stroke: darkgray;
}

circle.node.reflexive {
  stroke: #F00 !important;
  stroke-width: 2.5px;
}
circle.node.selected {
  stroke: #6F6 !important;
  stroke-width: 2px;
}
circle.node.highlighted {
  stroke: #6F6;
}
circle.node.inter-router {
    fill: #EAEAEA;
}
circle.node.normal {
    fill: #FFF;
    stroke: #FFF;
    fill-opacity: 0;
    stroke-width: 0;
}
circle.node.on-demand {
    fill: #C0FFC0;
}
circle.node.on-demand.artemis {
	fill: #FCC;
	/*opacity: 0.2; */
}

circle.node.fixed {
    stroke-dasharray: 10,2;
}
circle.node.temp {
    stroke: #f80;
    fill: #f0f0ff;
}

text {
  font: 12px sans-serif;
  pointer-events: none;
  /*font-family: monospace;*/

}

.tooltipsy
{
    padding: 10px;
/*    max-width: 320px;*/
    color: #303030;
    background-color: #fcfcfe;
    border: 1px solid #deca7e;
    border-radius: 5px;
}

.tiptable {

}
.tiptable tr {
	border-bottom: 1px solid #ccc;
}

.tiptable tr:last-child {
	border-bottom: 0px;
}

.tiptable tr:nth-child(even) {
	background: #fcfcfe;
}
.tiptable tr:nth-child(odd) {
	background: #FFF
}

text.id {
  text-anchor: middle;
  font-weight: bold;
}

text.id.log, text.id.address {
  text-anchor: middle;
  font-weight: normal;
}

text.label {
  text-anchor: start;
  font-weight: bold;
}

.row-fluid.tertiary {
  position: relative;
  left: 20px;
}

.row-fluid.tertiary.left {
  float: left;
}

.row-fluid.tertiary.panel {
  width: 410px;
  /*height: 100%; */
}

div#topologyForm .ngViewport, div#topologyForm .gridStyle {
  height: auto !important;
  min-height: initial !important;
  overflow: initial;
}

div#multiple_details, div#link_details {
	height: 300px;
	width: 700px;
	display: none;
	padding: 0.5em;
    border: 1px solid;
	position: absolute;
	background-color: white;
	max-height: 330px !important;
    overflow: hidden;
}
div#multiple_details div.ngRow.selected {
	background-color: #c9dde1 !important;
}

div.grid-values {
	text-align: right;
}

div.grid-values.ngCellText span {
	padding-right: 4px;
}

.panel-adjacent {
  margin-left: 430px;
}

#topologyForm.selected {
  border: 1px solid blue;
}
#topologyForm {
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
    /*border: 1px solid white;*/
    padding: 2px;
    /* position: relative; */
    /* top: -8px; */
}
div.qdr-topology.pane.left .ngViewport {
    /* border: 1px solid lightgray; */
}

#topologyForm > div {
  width:396px;
}

/* globe */
.land {
  fill: #999;
  stroke-opacity: 1;
}

.graticule {
  fill: none;
  stroke: black;
  stroke-width:.5;
  opacity:.1;
}

.labels {
    font: 18px sans-serif;
    fill: black;
    opacity: .85;
	text-anchor: middle;
}

.noclicks { pointer-events:none; }

.point {  opacity:.6; }

.arcs {
  opacity:.7;
  stroke: darkgreen;
  stroke-width: 3;
}
.flyers {
  stroke-width:1;
  opacity: 0;
  stroke: darkred;
}
.arc, .flyer {
  stroke-linejoin: round;
  fill:none;
}
.arc { }
.arc:hover {
  stroke: darkred;
}
.flyer { }
.flyer:hover {
  stroke: darkgreen;
}
.arc.inter-router {
  stroke: darkblue;
}

#addNodeForm {
  padding: 1em;
}


li.currentStep {
  font-weight: bold;
}

.qdrTopology div.panel {
  position: absolute;
}
/*
.ui-dialog-titlebar {
    border: 0;
    background: transparent;
}
*/

/*
.ui-tabs.ui-tabs-vertical {
    padding: 0;
    width: 48em;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #CCC;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid gray;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.1em 0;
    border: 1px solid gray;
    border-width: 1px 0 1px 1px;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    position: relative;
    right: -2px;
    z-index: 2;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.1em 1em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    border-right: 1px solid white;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    width: 34em;
    border-left: 1px solid gray;
    border-radius: 0;
    position: relative;
    left: -1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    right: -3px !important;
}

.ui-tabs li i.ui-icon {
    display: inline-block;
}
*/
.ui-tabs .ui-tabs-panel {
    /* padding-top: 0 !important; */
}

.ui-widget-content fieldset {
  float: left;
  padding: 0 1em 0 0;
}

.entity-description {
  color: #960;
  font-size: 90%;
}

.attr-description {
  padding-top: 1.5em;
  float: right;
  width: 27em;
}
.attr-annotations {
    padding-top: 2.5em;
    clear: both;
}
.attr-annotations > span {
    padding-top: 0.5em;
    border-top: 1px dashed darkgray;
    display: block;
}

.attr-type {
    color: #330;
    font-size: 85%;
}
.attr-required {
    color: red;
    font-size: 85%;
}
.attr-unique {
    color: green;
    font-size: 85%;
}

#tabs.nodeEntities {
  border: 0;
}

#tabs ul.nodeTabs {
  background: #fff;
}

#tabs #Container {
  border-left: 1px solid #aaa;
}

#tabs.ui-tabs .ui-tabs-nav li {
  border-bottom: 1px solid #aaa !important;
}

.entity-fields {
  /* height: 400px; */
  overflow-y: scroll;
  overflow-x: hidden;
}

div.boolean label:first-child {
    float: left;
    margin-right: 1em;
}
.entity-fields label {
    font-weight: 600;
    margin-top: 0.5em;
	display: inline;
}

.aggregate {
	text-align: right;
}

.aggregate i {
	float: right;
    margin: 3px 3px 3px 8px;
}

.aggregate .hastip {
	padding: 5px;
}

.subTip .tipsy-inner {
	background-color: white;
	color: black;
	font-size: 1.3em;
	border: 1px solid black;
}

.subTip .tipsy-arrow-n { border-bottom-color: black; }
.subTip .tipsy-arrow-s { border-top-color: black; }
.subTip .tipsy-arrow-e { border-left-color: black; }
.subTip .tipsy-arrow-w { border-right-color: black; }


.contextMenu {
  display:none;
  position:absolute;
  left:30px;
  top:-30px;
  z-index:999;
	/* width:300px; */
}
.contextMenu ul {
	width:300px;
	margin:0;
	padding-left:0;
	list-style:none;
	background:#fff;
	color:#333;
    font-weight: 600;
	/* -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; */
	-moz-box-shadow:5px 5px 5px #ddd; -webkit-box-shadow:5px 5px 5px #999; box-shadow:5px 5px 5px #ddd;
	border: 1px solid #aaa;
}
.contextMenu ul li {
	padding:5px 10px;
	/* border-bottom: solid 1px #ccc; */
}
.contextMenu ul li:hover {
	background:#4a90d9; color:#fff;
}
.contextMenu ul li:last-child {
    border:none;
}

.na {
    display: none;
}
.contextMenu ul li.new {
    display: block;
}
.contextMenu ul li.adding, .contextMenu ul li.adding + li {
    display: block;
}
.contextMenu ul li.force-display {
    display: block;
}
.contextMenu ul li.context-separator {
    background-color: lightgray;
    height: 1px;
    padding: 0;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.separated {
    margin-top: 1em;
}

#crosssection {
    display: none;
    position: absolute;
    top: 200px;
    left: 600px;
}

.node circle {
/*  fill: rgb(31, 119, 180);
  fill-opacity: .25; */
  fill: #cfe2f3;
  fill-opacity: .98;
  stroke: black;
  stroke-width: 3px;
}

circle.subcircle {
    stroke-width: 1px;
    /* stroke-dasharray: 2; */
    fill-opacity: 0;
    stroke: darkgray;
}

.leaf circle {
  fill: #6fa8dc;
  fill-opacity: 0.95;
  stroke-width: 3px;
}

.leaf circle[title] {
    font-family: monospace;

}

#svg_legend {
    position: absolute;
    top: 110px;
    right: 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fcfcfc;
    margin-right: 1.3em;
	padding: 1em;
}

#svg_legend svg {
    height: 235px;
    width: 180px;
}

#multiple_details div.gridStyle {
/*	height: 50em; */
	min-height: 70px !important;
	height: auto !important;
}

#multiple_details .ngViewport {
    height: auto !important;
}

#multiple_details .gridCellButton button, #link_details .gridCellButton button {
    margin: .25em .4em;
    font-size: 12px;
    height: 2em;
	padding-top: .1em;
}

#linkFilter {
	display: none;
	padding: 0.5em;
	border: 1px solid grey;
	background-color: #F0F0F0;
	position: absolute;
	z-index: 100;
	right: 1em;
}
div.formLine label, div.formLine input {
	display: inline-block;
	padding: 0 8px;
}

span.filter-icon {
	padding-left: 1em;
}

button.filter-close {
    width: 15px;
    height: 20px;
    padding: 0;
    position: absolute;
    right: 4px;
    top: 4px;
}

div.filter-title h6 {
	margin: 0 0 0.5em 0;
}

.links button.btn-filter {
	padding: 0 1em 0 0;
    margin-left: 1em;
    font-size: 1em;
}

button.btn-filter {
	float: right;
}
span.dynatree-expanded button.btn-filter,
a.dynatree-title:hover button.btn-filter {
 	visibility: visible;
}

div.hdash-button a {
	color: white;
}

.linkDirIn {
	color: red;
	background-color: #f3f3f3;
}

.linkDirOut {
	color: blue;
	background-color: white;
}

div.topoGrid .ui-grid-viewport {
	overflow: hidden !important;
}

@-moz-document url-prefix() {
    /*.btn {padding: 2px 12px 8px !important;} */
    #overview-controller .btn {padding: 4px 12px !important;}
    #overview-controller .btn.filter-close {padding: 0 !important;}
}

.ui-fancytree.fancytree-container {
	font-size: 14px;
}

.grid-title {
    background-color: #FAFAFA;
    background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
    background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#F2F2F2', GradientType=0);
    border-bottom: 1px solid #d4d4d4;
    text-shadow: 0 1px 0 #FFFFFF;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	margin: 0 0 10px 0;
    padding-bottom: 4px;
}

.expand-collapse {
	float: right;
	margin-right: 0.5em;
}

.pane-viewport {
	top: 24px !important;
}
.dynatree-node.loading {
  position: initial;
}

.hideLeft {
  position: absolute;
  right: 0.5em;
  top: 1em;
  border: 0;
}

.showLeft {
  position: absolute;
  top: 1em;
  left: 0.5em;
  border: 0;
}

.newChart {
  float: right;
}

select.unique, input.unique {
  border: 2px solid blue;
}
select.required, input.required {
  border: 2px solid black;
}

.required-indicator {
  padding-left: 0.5em;
  font-size: 0.85em;
  vertical-align: super;
}

.required-indicator::before {
  content: '(required)'
}

.unique-indicator {
  padding-left: 0.5em;
  font-size: 0.85em;
  vertical-align: super;
}

.unique-indicator::before {
  content: '(must be unique if supplied)'
}

.unique-indicator