<style>
/*
Styles for nodes and connectors.
*/

.wrapper {
  width: 50px;
  margin: 2em auto 0;
}

.compass{
	fill:  #fff;
	stroke:  #000;
	stroke-width:  1.5;
}
.button{
	fill:  #225EA8;
	stroke:  #0C2C84;
	stroke-miterlimit:	6;
	stroke-linecap:  round;
}
.button:hover{
	cursor: pointer; cursor: hand; 
}

.button-icon{
	color:  #fff;
	cursor: pointer; cursor: hand; 
}

.button-icon:hover{
	cursor: pointer; cursor: hand; 
}
  
.node-rect {
	stroke: black;
	stroke-width: 2;
}

.mouseover-node-rect {
	stroke: black;
	stroke-width: 4;
}

.selected-node-rect {
	stroke: red !important;
	stroke-width: 4;
	opacity:0.8 !important;
}

.connector-circle {
    fill: white;
    stroke: black;
    stroke-width: 2;
}

.mouseover-connector-circle {
    fill: white;
    stroke: black;
    stroke-width: 5;
}

/*
Style for connections.
*/

.connection {
}

.connection-line {
	stroke: gray;
	stroke-width: 4;
	fill: transparent;
}	

.mouseover-connection-line {
	stroke: gray;
	stroke-width: 6;
	fill: transparent;
}	

.selected-connection-line {
	stroke: red;
	stroke-width: 4;
	fill: transparent;
}	

.connection-endpoint {
	fill: gray;
}

.selected-connection-endpoint {
	fill: red;
}	

.mouseover-connection-endpoint {
	fill: gray;
}

/*
Style for the connection being dragged out.
*/

.dragging-connection {
	pointer-events: none;
}

.dragging-connection-line {
	stroke: gray;
	stroke-width: 3;
	fill: transparent;
}	

.dragging-connection-endpoint {
	fill: gray;
}

/*
The element (in this case the SVG element) that contains the draggable elements.
*/

.draggable-container {
	background: url("/img/blueprint-dark.png") top center #fafbfc;
}

/*
Drag selection rectangle.
*/

.drag-selection-rect {
	stroke: blue;
	stroke-width: 2;
	fill: transparent;
}
</style>