@CHARSET "ISO-8859-1";

/* Links for CSS documentation
		http://www.w3schools.com/css/default.asp
*/

/* ---- Main document divs ---- */

div.pfaGraphExplorer{
	position:fixed;
	z-index:0;
	top:0;
	left:0;
	width:100%; 
	height:100%;
}

div.pfaGraphExplorerInText{
	position:relative;
	display:inline-block;
	overflow: hidden;
	z-index:0;
	top:0;
	left:0;
	width:100%; 
	height:100%;
	border: 1px solid #D4D4D4;
}

div.pfaOnTop{
	z-index:1;
}

div.pfaSidePanel{
	position:fixed;
	top:0;
	right:0;
	height:100%;
	width:0%;
	pointer-events: auto; 
	background-color: #FBFBFB;	/*#FBFBFF; #F8F8F8; */
	border-left: 1px solid #D4D4D4;
}

div.pfaSidePanel.pfaSidePanelVisible {
	min-width:20em;
	width:20%;
}

div.pfaNodeInfo{
	position:relative;
	top:0;
	right:0;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
}

div.pfaProgressInfo{
	/*display: flex;*/
	position: absolute;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	text-align: center;
	margin: 10% 0;
	min-height: 200px;
	background-color: rgba(33, 33, 33, 0);
	align-items: center;
}

/* ---- Side panel ---- */
div.pfaSidePannelButtonContainer{
	position: absolute; /* positionned based on the first ascendant with a non-static position */
	display:block;
	z-index:10;
	top:3em;
	right:100%;
}

button.pfaToggleButton{
	width: 20px;
	height: 35px;
	cursor: pointer;
	background: /*rgba(255,255,255,0.9)*/#4bacc6 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAQAAAAXDMSnAAAAi0lEQVR4AX3JQcqBURQG4O/+9WNG30D3vOfSDTuQsgcZyBakZANSzMVMBme3zsBI5/VMn4ZKLP5ki1E4tYejWpilxVUtzOEUD68odYmXR5BJNp/4zllXD2phllYvamHmirsayUkfJ5ruHzueTldC08kcT5YOY9xYujqQM03XKXuaLmEtNF1e1Nz89gbL+0do6OEwRwAAAABJRU5ErkJggg==) 6px center/7px 10px no-repeat;
	color: #F8F8F8;
	border: 1px solid #D4D4D4;
}

button.pfaToggleButton.pfaTBlink{
	animation: 0.5s 4 alternate animTButtonBlink;
	/*animation-duration:3s;
	animation-name:ToggleButtonBlink;
	animation-iteration-count:1;
	animation-direction:alternate;*/
}

@keyframes animTButtonBlink{
	from {
		background-color:#4bacc6;
	}
	to {
		background-color:red;
	}
}

.pfaSidePanelVisible button.pfaToggleButton {
	transform: scaleX(-1);
}

/* ---- Graph tree ---- */
.nodes rect{
	cursor:pointer;
}

.nodes text{
	fill:#ffffff;
	text-anchor:middle;
	cursor:pointer;
}

.pfaDefaultNode rect{
	fill:grey;
}

.pfaExeNode rect{
	fill:black;
}

.pfaLibNode rect{
	fill:grey;
}

.pfaExtNode rect{
	fill:#EEE8AA;
}

.pfaExtNode text{
	fill:#696969; /* #000000; */
}

.pfaGroupNode rect{
	fill:lightgrey; /* #E7E7E7; */
}

.pfaGroupNode text{
	fill:#000000;
}

/* ---- Node highlight in the tree ---- */

.pfaSelectedNode rect{
	fill:red;
}

.pfaSelParentNode rect{
	fill:green;
}

.pfaSelChildNode rect{
	fill:orange;
}

.pfaSelExtNode rect{
	fill:#BDB76B;
}

/* ---- Node info (text) ---- */

div.pfaNodeInfoMain {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color: #ff4d4d; /*red; /* #4bacc6; */
}

div.pfaInfoSubLevel {
	padding-left:10px;
}

div.pfaNodeMainSub {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color: #ffe6e6; /* #99CCFF; */
	font-size:80%;
}

div.pfaInfoParentTitle {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:green;
}

div.pfaInfoParent {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:lightgreen; /* #90EE90 */
	cursor:pointer;
}

div.pfaInfoParent:hover {
	background-color:#A0FFA0;
}

div.pfaInfoChildrenTitle {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:orange;
}

div.pfaInfoChild {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:gold;
	cursor:pointer;
}

div.pfaInfoChild:hover{
	background-color:yellow;
}

div.pfaInfoLibsTitle {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:#BDB76B;
}

div.pfaInfoExtLib {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:#EEE8AA;
	cursor:pointer;
}

div.pfaInfoExtLib:hover{
	background-color:#EEE9CC;
}

/* ---- Views info ---- */
div.pfaCurView {
	padding:2px 5px 2px 5px;
	margin-bottom: 2px;
	width: 98%;
	background-color:black;
	color: white; 
	height:1.5em;
}

div.pfaFormViews {
	background-color:lightgrey;
	padding:0px 5px 0px 5px;
	width: 98%;	
}

div.pfaCurViewSH {
	float:right;
	cursor:pointer;
	font-size:1.2em;
	padding-right:5px;
}