/* Main Stylesheet d3.js Radial and Horizontal Trees */

/* Typography ---------------------------------------------------------- */


.page-wrapper {
    background: #FFFFFF;
    width: 100%;
    padding: 15px;
    min-height: 100vh;
}
.container-fluid.full-wrapper {
    margin: 0;
    padding: 0;
}
.form-row.row {
    margin-top: 10px;
}
p.citation {
    font-style: italic;
    color: #808080;
    font-size: 90%;
    margin-top: 10px;
}

/* Diagram Cards -------------------------------------- */
.card-interactives {
    position: relative;
    max-width: 380px;
    width: auto;
    height: 135px;
    box-shadow: 2px 2px 10px #DADADA;
    margin: 5px 5px 20px 5px;
    padding: 20px 10px;
    background: rgba(220,223,229,0.4);
    border: 1px solid #282828;
}
.card-interactives h2.card-title {
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: #0A1659;

}
.card-interactives .card-content p {
    font-size: 14px;
    color: rgb(10, 10, 10);
    line-height: 1.286;
    margin-bottom: 0;
    font-weight: 300;
}
.card-interactives .card-footer {
    padding: 0 12px 0 0;
    border-top: none;
}
.card-interactives .card-footer-nav {
    position: relative;
}
.card-interactives .card-footer-nav a.btn.btn-card {
    position: relative;
    float: right;
    background: #023859;
    border: 2px solid rgb(200,200,200);
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.2;
    transition: .5s all;
    width: 120px;
}
.card-interactives .card-footer-nav a.btn.btn-card:hover {
    background: #02735E;
}



/* Forms ---------- */
.select2-search,
.select2-results {
    font-size: 14px;
}

/* Tree Header ---- */
header.tree-header {
	padding: 20px 10px;
}
/* Trees -------------------------------------------------- */

#svg-wrapper {
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	height: 100%;
}
div.tooltip {
	position: absolute;
	text-align: left;
	width: auto;
	height: 20px;
	padding: 4px;
	font-size: 18px;
	background: #FFFFFF;
	border: none;
	border-radius: 8px;
	pointer-events: none;
	}
.panzoom {
	width: 100%;
	height: 100%;
}

/* Nodes ----------------------- */
.node {
    cursor: pointer;
    font-size: 14px;
	font-family:"Inter", sans-serif;
	font-weight: 400;
}
.node:hover {
	color: #003399;
	font-size: 14px;;
	font-weight: 600;
	}
.node text {
	font-size: 12px;
	font-family:"Inter", sans-serif;
	font-weight: 400;
	}
.node-text {
    font-size: 12px !important;
}
.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 1.5px;
}
.node circle {
	fill: #FFFFFF;
	stroke: steelblue;
	stroke-width: 2px;
	}
.node circle:hover {
	fill: #003399;
	stroke: #000000;
	stroke-width: 3px;
	}
.node rect {
	fill: rgba(255,255,255,0);
}
.found {
    fill: #ff4136;
    stroke: #ff4136;
}
.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 1.5px;
}

path.link {
	fill: none;
	stroke: #CCCCCC;
	stroke-width: 3px;
	opacity: 0.8;
	}
path.link:hover {
	fill: none;
	stroke: #003399;
	opacity: 1.0;
	stroke-width: 4px;
	}

/* Radial Tree */

.radial .svgdiv {
	margin: 0 auto;
	width: 100%;
	height: 100%;
}
.radial .svgdiv svg {
	overflow: visible;
	margin: 100px 0 0 100px;
}
.radial .node circle {
	fill: #FFFFFF;
	stroke: blue;
	stroke-width: 1.5px;
	}
.radial .node {
	font-size: 14px;
	font-weight: 400;
	}
.radial .node:hover {
	color: #003399;
	font-size: 120%;
	font-weight: 600;
	}
.radial .node circle:hover {
	fill: #003399;
	stroke: #000000;
	stroke-width: 3px;
	}
.radial .link {
	fill: none;
	stroke: #CCCCCC;
	stroke-width: 5px;
	opacity: 0.6;
	}
.radial .link:hover {
	fill: none;
	stroke: #003399;
	opacity: 1.0;
	stroke-width: 7px;
	}