/* This is a modified version of:
/Users/tepper/Desktop/OAASIS/ProjectUI/modules/tree.js
AUTHOR: Dr. Thorsten Tepper García (2021)
*/

#svg-viewer {
	font-size: 0.6em;
	font-family: sans-serif;
	user-select: none;
	/* padding-top: 50px; */
}

/* dropdown (selection) menus */
div.select-menus-container {
	/* position: absolute; */
	/* top: 550px; */
}
form.select-menu-database {
	display: inline-block;
	margin: 0;
}
form.select-menu-country {
	display: inline-block;
	margin: 0;
}
form.select-menu-sectors {
	display: inline-block;
	margin: 0;
}
form select#databases,
form select#countries,
form select#sectors {
	padding: 2px;
	font-size: 1em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
/* general information panel */
div.indicator-tree-container {
	min-width: 1230px;
	max-width: 1230px;
	margin-top: 30px;
	margin-left: 10px;
	margin-bottom: 0;
}
div.indicator-tree {
	border: 2px solid black;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: white;
	padding: 3px 10px;
	font-size: 0.9em;
	font-family: sans-serif;
	color: black;
}
div.indicator-tree > span{
	padding: 2px;
	margin-left: 3px;
	margin-right: 3px;
}
span.indicator-tree-label {
	text-align: right;
	color: black;
}
span.indicator-tree-value {
	text-align: left;
	color: black;
	padding: 10px;
}
span.tiers{
	color: blue;
}
span.paths{
	color: darkorange;
}
span.val,span.foot {
	color: black;
}
/* dropdown menu container */
div.select-menus-container {;
}
/* tooltip */
.tooltip-tree {
	position: absolute;
	display: none;
	pointer-events: none;
	background: #fff;
	padding: 3px;
	text-align: left;
	border: solid #ccc 1px;
	font-size: 12px;
	font-family: sans-serif;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	z-index: 4;
}
.tooltip-div > span {
	padding: 2px;
	font-size: 1.1em;
	color: black;
}
.tooltip-div {
	display: grid;
	grid-template-columns: auto auto;
	padding: 1px;
}
.tooltip-div.val {
	display: grid;
	/* grid-template-columns: 90px 90px; */
	grid-template-columns: auto auto;
}
.tooltip-div.val > span {
	text-align: left;
}
.tooltip-div.val > span.label {
	color: black;
}
/* .tooltip-div.val > span.path {
	color: blue;
} */
.tooltip-div.val > span.node {
	color: darkorange;
	text-align: right;
}
 /* tree links and tree nodes  */
.gLink {
	fill: none;
	stroke: #555;
	stroke-opacity: 0.5;
	stroke-width: 8;
}
.gLink.dimmed {
	stroke-opacity: 0.2;
}
circle.highlight-max {
	stroke: red;
}
path.highlight-max {
	stroke: red;
}
path.highlight-hover {
	stroke: darkorange;
	stroke-opacity: 1;
	stroke-width: 8;
}
circle {
	stroke: blue;
	stroke-width: 3;
}
circle.highlight-hover {
	stroke-width: 8;
	stroke: darkorange;
}
.node-text.item{
	font-size: 1.05em;
	fill: black;
}
.node-text.country{
	font-size: 1em;
	fill: black;
	stroke: none;
}
.tspan-clone {
	stroke-linejoin: round;
	stroke-width: 5;
	stroke: white; /* IN DEVELOPMENT: should match tree background-color */
}
div.button-globe {
	display: inline;
	margin: 10px;
	padding: 10px;
}
button.button-globe {
	padding: 4px 6px 4px 6px;
	margin: 10px;
	font-size: 1rem;
}

/* IN DEVELOPMENT: 2D heatmap */
div.button-heatmap {
	display: inline;
	margin: 10px;
	padding: 10px;
}
button.button-heatmap {
	padding: 4px 6px 4px 6px;
	margin: 10px;
	font-size: 1rem;
}