/******************************* CUSTOM PROPERTIES *****************************/
:root {
	--link-color: darkgray;
	--limit-color: gray;
	--link-hover-color: #666666;
	--node-color: cornflowerblue;
	/*--node-color: #0072B2;*/
	--sample-color: mediumturquoise;
	/*--sample-color: #8BABF1;*/
	/*--special-color: lightcoral;*/
	--special-color: #9B8BF4;
	--transform-color: darkseagreen;
	/*--transform-color: #90D8B2;*/
	--focus-color: dodgerblue;
}

/****************************** NETWORK ELEMENTS ******************************/

/* RECTANGLES */
svg rect.node {
	fill: #e2f6fe;
	stroke: var(--node-color);
	stroke-width: 2px;	
}
svg rect.node:hover {
	fill: #a9e6ff;
	stroke-width: 3px;
}
svg a:focus rect, svg a:focus ellipse {
	stroke: var(--focus-color);
	fill: #a9e6ff;
	stroke-width: 3px;
}
svg a:focus line {
	stroke: var(--focus-color);
	stroke-width: 3px;
}
svg rect.link, rect.loop {
	fill: var(--white);
	stroke-width: 0px;
}

/* TEXT */
svg text.label:hover {
	font-size: 16px;
}

svg text.node.label { 
	font-size: 9px;
}

svg text.link.label, svg text.loop.label { 
	font-size: 7px;
}

svg text.loop.label { 
	text-anchor: middle;
	dominant-baseline: middle;
}

/* LINES */
svg line.link {
	stroke-width: 2px; 
	cursor: pointer; 
}

svg line.key {
	stroke-width: 2px; 
}

/*
svg line.limit, rect.limit, line.samplelimit {
	stroke-dasharray: 4;
}*/

svg line.limit, line.samplelimit {
	stroke: var(--limit-color);
	stroke-dasharray: 4;
}

#arrowhead {
	fill: white;
}

#arrowheadlimit {
	fill: var(--limit-color);
}

svg line.samplelimit {
	stroke: var(--sample-color);
}

#arrowheadsamplelimit {
	fill: var(--sample-color);
}

svg line.transform, circle.transform, ellipse.transform {
	stroke: var(--transform-color);
}

#arrowheadtransform {
	fill: var(--transform-color);
}

svg line.special, circle.special, ellipse.special {
	stroke: var(--special-color);
}

#arrowheadspecial {
	fill: var(--special-color);
}

svg line.sample, circle.sample, ellipse.sample, line.sum, circle.sum, ellipse.sum, line.maximum, circle.maximum, ellipse.maximum, line.minimum, circle.minimum, ellipse.minimum, line.product, circle.product, ellipse.product {
	stroke: var(--sample-color);
}

#arrowheadsample, #arrowheadsum, #arrowheadmaximum, #arrowheadminimum {
	fill: var(--sample-color);
}

/* CIRCLES */

svg circle.loop, ellipse.loop {
	fill: var(--white);
	stroke-width: 2px;
}

svg a:hover circle, a:hover line, a:hover ellipse  {
	stroke-width: 3px;
}

/* TEXT */

svg a:hover text {
	font-weight: bold;
}

svg a:hover text.node {
	transform: translate(-5px, 0px);
}

/* KEY */

#key {
	stroke-width: 1px;
	stroke: var(--link-color);
	fill: white;
}

/******************************* MEDIA QUERIES ********************************/

/* Default for network graph for phones/tablets is to hide it */
#network, #networksvg {
	display: none;
}

/* Tablets */
@media screen and (min-width: 576px) {
	svg text.link.label, svg text.loop.label {
		font-size: 8px;
	}

	svg a:hover text.link.label, svg a:hover text.loop.label {
		font-size: 9px;
	}

	svg text.node.label, svg text.key {
		font-size: 10px;
	}
}

@media screen and (min-width: 768px) {
	svg text.link.label, svg text.loop.label {
		font-size: 8px;
	}

	svg a:hover text.link.label, svg a:hover text.loop.label {
		font-size: 10px;
	}

	svg text.node.label, svg text.key {
		font-size: 10px;
	}

	/* Only show list of distributions on phones and small tablets */
	#smallnetwork {
		display: none;
	}

	/* Show distribution network on larger screens */
	#network {
		display: block;
	}

	/* Show distribution network on larger screens */
	#networksvg {
		display: block;
		width: 100vw;
		height: 100vh;
		max-height: 780px;
	}
}

/* Laptops */
@media screen and (min-width: 992px) {
	svg text.link.label, svg text.loop.label {
		font-size: 10px;
	}

	svg a:hover text.link.label, svg a:hover text.loop.label {
		font-size: 11px;
	}

	svg text.node.label, svg text.key {
		font-size: 11px;
	}
}

/* Desktops */
@media screen and (min-width: 1200px) {
	svg text.link.label, svg text.loop.label {
		font-size: 12px;
	}

	svg a:hover text.link.label, svg a:hover text.loop.label {
		font-size: 13px;
	}

	svg text.node.label, svg text.key {
		font-size: 13px;
	}
}

/* Widescreen */
@media screen and (min-width: 1400px) {
	svg text.link.label, svg text.loop.label {
		font-size: 13px;
	}

	svg a:hover text.link.label, svg a:hover text.loop.label {
		font-size: 14px;
	}

	svg text.node.label, svg text.key {
		font-size: 14px;
	}
}