/* FIXME: which is used, this one or the one in MyIdeatree.css? For .RichGraphRenderBuffer, at least, it's this one. */
.RichGraphViewport
{
	position: relative;
	z-index: 0;

	font-family: Arial, Helvetica, sans-serif;
	
	overflow: hidden;
}

.RichGraphViewport:focus
{
	outline: none;
}

.RichGraphViewport table
{
	table-layout: fixed;
}

.RichGraphViewport table, .RichGraphViewport tr, .RichGraphViewport td
{
	font-size: inherit;
}

.RichGraphRenderBuffer
{
  background: transparent !important; 
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	
	overflow: hidden;
}

.RichGraphNode
{
	position: absolute;
	/* z-index: 10; */
	
	border-style: none;
	background-clip: padding-box;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: center;
	overflow: visible;
}

.RichGraphContentBlock
{
	position: absolute;
	left: 0%;
	top: 0%;

	box-sizing: border-box;
	padding: 5%;
	word-wrap: break-word;
	overflow: hidden; 
  /*text-overflow: ellipsis;*/

	-webkit-transform-origin: top left;
	-moz-transform-origin: top left;
	-ms-transform-origin: top left;
	-o-transform-origin: top left;
	transform-origin: top left;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.RichGraphContentBlock:focus
{
	outline: none;
}

.RichGraphContentBlock a, .RichGraphContentBlock a:link, .RichGraphContentBlock a:hover, .RichGraphContentBlock a:visited
{
	color: inherit;
}

.RichGraphNodeMaximized .RichGraphContentBlock
{
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	-o-user-select: text;
	user-select: text;

  font-size:60%; /* to compensate for larger font size in CONFIG.  Added by Ron Newman on 3/11/2020. */
}

.RichGraphNodeCorona
{
	border: 10px solid transparent;
	margin-left: -10px;
	margin-top: -10px;
}

.RichGraphNodeSelected
{
	outline-style: solid;
	outline-width: 4px;
}

.RichGraphNodeSelected.RichGraphNodeCorona
{
	outline-style: none;
}

.RichGraphNodeHighlighted
{
	outline-style: solid;
	outline-width: 4px;
}

.RichGraphNodeHighlighted.RichGraphNodeCorona
{
	outline-style: none;
}

.RichGraphNodeMaximized
{
	outline-style: none;
	border-style: none;
	margin-left: 0px;
	margin-top: 0px;
}


#richGraphNodeShapeTemplates polygon
{
	stroke-width: 0.0075;
}

.RichGraphNodeShapeRectangle.RichGraphNodeBorder:before,
  .RichGraphNodeShapeEllipse.RichGraphNodeBorder:before
{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
	
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	content: '';
	
	border: 1px solid black;
}

.RichGraphNodeShapeRectangle.RichGraphNodeShadow:before,
  .RichGraphNodeShapeEllipse.RichGraphNodeShadow:before
{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	content: '';
	
	box-shadow: 10px 10px 10px rgba(128, 128, 128, 0.25);
}

.RichGraphNodeShape
{
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 200%;
	height: 200%;

	stroke: none;
	
	pointer-events: none;
}

.RichGraphNodeShape > use
{
	transform: scale(0.5);
}

.RichGraphNodeBorder > .RichGraphNodeShape
{
	stroke: black;
	stroke-width: 0.01;
}

/* Firefox cannot resolve the URL in the following rule, so the rule is dynamically created in NodeElement.js instead.
.RichGraphNodeShadow > .RichGraphNodeShape > use
{
	filter: url('#richGraphNodeShapeShadow');
}
*/


.RichGraphNodeShapeRounded
{
	border-radius: 10px;
}

.RichGraphNodeShapeRounded.RichGraphNodeCorona
{
	border-radius: 20px;
}

.RichGraphNodeShapeRounded.RichGraphNodeBorder:before
{
	border-radius: 10px;
}

.RichGraphNodeShapeRounded.RichGraphNodeShadow:before
{
	border-radius: 10px;
}


.RichGraphNodeShapeEllipse
{
	border-radius: 50%;
}

.RichGraphNodeShapeEllipse .RichGraphContentBlock
{
	left: 14.64466%;   /*  (1 - 1/sqrt(2)) / 2 * 100%  */
	top:  14.64466%;
}

.RichGraphNodeShapeEllipse.RichGraphNodeBorder:before
{
	border-radius: 50%;
}

.RichGraphNodeShapeEllipse.RichGraphNodeShadow:before
{
	border-radius: 50%;
}


.RichGraphNodeShapeTriangleUp .RichGraphContentBlock
{
	left: 25%;
	top: 37.5%;
}


.RichGraphNodeShapeTriangleDown .RichGraphContentBlock
{
	left: 25%;
	top: 25%;
}


.RichGraphNodeShapeDiamond .RichGraphContentBlock
{
	left: 25%;
	top: 25%;
}



.RichGraphRenderBufferSvg
{
	position: absolute;
	z-index: 50;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	
	font-size: inherit;
	
	pointer-events: none;
}

.RichGraphEdge, .RichGraphEdgeCorona
{
	fill: none;
	pointer-events: visibleStroke;
}

.RichGraphEdgeCorona
{
	stroke: transparent;
	stroke-width: 21;
}

/* NOTE: using attribute rather than class here because class does not seem to work in Chrome */
.RichGraphEdge[data-edgehead], .RichGraphEdgeCorona[data-edgehead]
{
	cursor: url('../images/cursor_drag_hand_with_arrow.png') 18 9, grab;
}

.RichGraphEdge[data-edgetail], .RichGraphEdgeCorona[data-edgetail]
{
	cursor: url('../images/cursor_drag_hand_with_line.png') 18 9, grab;
}

.RichGraphEdgeSelected
{
    stroke: rgba(32, 32, 32, 0.5);
}

.RichGraphEdgeSelectedAlternateColor
{
    stroke: rgba(224, 224, 224, 0.5);
}

.RichGraphEdgeHighlighted
{
    stroke: rgba(255, 255, 0, 0.75);
}

.RichGraphEdgeHighlightedAlternateColor
{
    stroke: rgba(64, 64, 255, 0.75);
}

.RichGraphEdgeLabel
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	
	pointer-events: visible;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.RichGraphEmbedLayer
{
	position: absolute;
	left: 0px;
	top: 0px;
}

.RichGraphEmbedGroup
{
	position: absolute;
	border-style: solid;
	border-color: transparent;
	overflow: hidden;
	pointer-events: none;
}

.RichGraphEmbedElement
{
	position: absolute;
	box-sizing: border-box;
	pointer-events: auto;

	/*
	 * Prevent inheritance of positioning properties.
	 *
	 * Margin should be inapplicable to absolutely positioned elements, but
	 * embed overlays seem to inherit margins from originals and these margins
	 * have an effect, at least in Chrome.
	 */
	right: auto;
	bottom: auto;
	margin: 0px;
}

.RichGraphSpatialCursor
{
	position: absolute;
	z-index: 60;

	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.RichGraphViewportShade
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 60;
}

.RichGraphSelectionBox
{
	position: absolute;
	z-index: 60;
	outline: 1px solid;
	-webkit-animation: richGraphSelectionBoxGrayscaleGlow 1s infinite alternate;
	animation: richGraphSelectionBoxGrayscaleGlow 1s infinite alternate;
}

@media (max-device-width:1024px)
{
	.RichGraphSelectionBox
	{
		-webkit-animation: none;
		animation: none;
		background: rgba(128, 128, 128, 0.5);
		outline: 50px solid black;
	}
}

@-webkit-keyframes richGraphSelectionBoxGrayscaleGlow
{
	0%
	{
		background: rgba(255, 255, 255, 0.5);
		outline-color: rgb(64, 64, 64);
	}
	
	100%
	{
		background: rgba(0, 0, 0, 0.5);
		outline-color: rgb(192, 192, 192);
	}
}

@keyframes richGraphSelectionBoxGrayscaleGlow
{
	0%
	{
		background: rgba(255, 255, 255, 0.5);
		outline-color: rgb(64, 64, 64);
	}
	
	100%
	{
		background: rgba(0, 0, 0, 0.5);
		outline-color: rgb(192, 192, 192);
	}
}

.RichGraphContextMenu
{
	padding: 0px;
}

.RichGraphContextMenu img
{
	width: 16px;
}

#richGraphTemplates
{
	/* Hide this div, but don't use display:none, because that prevents SVGs from using defs defined here. */
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
}

#richGraphSpatialCursor
{
	display: none;
}

.RichGraphPopup_Table tr > td:nth-of-type(1)
{
	text-align: right;
}

.RichGraphPopup_Table tr > td:nth-of-type(2)
{
	text-align: left;
}

.RichGraphPopup_Buttons
{
	text-align: center;
}

.RichGraphPopup_Table th
{
	text-align: left;
}

.RichGraphPopup_Table input[type=range]
{
	width: 5em;
}

.RichGraphSearch input[name=query]
{
	width: 95%;
}

@media (max-device-width:1024px)
{
	.RichGraphSearch input[type=checkbox]
	{
		margin-right: 10px;
	}
}

.RichGraphPopup_ImageTable td
{
	text-align: center;
}

.RichGraphEditEdgeThickness li
{
	margin: 0px 10px;
}