/** increase specicifity by prepending
  * main.graph-container 
  * to override scoped styles from src/styles/dendrogram.css
  */

/** entity styling overrides */

/** div.entity variants */
/** tree side */
/* .parents */
/* .children */
/** attributes */
/* .rootNode */
/* .targetNode */
/* .isGroup */
/* .isCompany */
/* .isPerson */
/* .noIdentifier */
/* .isLeaf */
/** states */
/* .selected */
/* .isOpen */

main.graph-container button#layout {
	color: var(--color-fg-default);
	font-size: 14px;
	border: 1px solid black;
	width: 90px;
}

	main.graph-container button#layout:hover {
		color: var(--HoverButtonBackground);
	}

main.graph-container #bg-layer-parent-tree {
	overflow: hidden;
	display: none;
}

main.graph-container #bg-layer-child-tree {
	display: none;
}

.drag-handler {
	fill: var(--Background);
	color: var(--color-fg-default);
}

.selectedItemAnimationContainer {
	color: var(--Background);
	margin: 6px 2px 6px 36px;
}

.tree-bg-layer {
	background-color: #fbfbfb !important;
}

	.tree-bg-layer h3 {
		font-size: 20px;
		opacity: 0; /* Hide the headers for now*/
	}

main.graph-container {
	--key-color: rgba(255, 255, 255, 1); /* stroke for the route*/
	--company-color: rgb(255, 255, 255);
	--person-color: rgb(255, 255, 255);
	--shadow-color: 220.35deg 77.38% 56.67%;
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	color: black;
	background: var(--color-bg-default);
	--shadow-low: -2px -2px 9px rgba(94, 104, 121, 0.1), 3px 3px 9px rgba(94, 104, 121, 0.2);
	--personIcon: url('./assets/person.min.svg');
}

	main.graph-container .top {
		color: var(--ActiveGreen);
		left: 280px;
	}

	/** rootNode and targetNode style  */
	main.graph-container .entity.rootNode,
	main.graph-container .entity.targetNode {
		opacity: 1;
	}



	/** isPerson style  */
	main.graph-container .entity.isPerson:not(.entity.isPerson.selected) {
	}


	/* person icon */
	main.graph-container .entity.isPerson .label {
		--iconWidth: 24px;
		padding-right: calc(var(--iconWidth) - 8px);
	}


	main.graph-container * {
		box-sizing: border-box;
	}

	main.graph-container rect.drag-handler {
		cursor: move
	}

	main.graph-container .entity {
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background: var(--color-bg-default);
		color: var(--color-fg-default);
		line-height: 1.05;
		border-radius: 4px;
		padding: 0rem 6px;
		cursor: pointer;
		transition: all .3s ease-in-out;
		box-shadow: var(--shadow-low);
		border: 2px solid transparent;
	}

		main.graph-container .entity .label::after {
			content: "";
			position: absolute;
			/*		;*/
			font-size: 12px;
			right: 2px;
			z-index: 1;
			opacity: 0;
		}

		main.graph-container .entity.rootNode .label::after {
			color: var(--LighterGrey);
		}

		main.graph-container .entity.targetNode .label::after {
			color: var(--LighterGrey);
		}

		main.graph-container .entity.isGroup .label::after {
			content: "Group";
			opacity: 1;
			font-weight: 500;
			background-color: var(--WarmGreen);
			color: var(--ButtonText);
			border-radius: 3px;
			bottom: 2px;
			font-size: 6px;
			padding: 1px 2px 1px 2px;
		}


		main.graph-container .entity.noIdentifier .label::after {
			content: "\e16f";
			opacity: 1;
			font-family: 'Material Icons';
			background-color: transparent;
			padding: 0px;
			color: var(--color-fg-default);
			font-size: 12px;
			top: 0px;
		}

		main.graph-container .entity.isPerson .label::after {
			content: '\e7fd';
			font-family: 'Material Icons';
			position: absolute;
			top: 0;
			right: 0;
			width: var(--iconWidth);
			height: 50%;
			text-align: right;
			padding-right: 3px;
			opacity: 1;
		}

		main.graph-container .entity.isPerson.noIdentifier .label::after {
			content: '\e7fd\e16f';
			opacity: 1;
			font-family: 'Material Icons';
			top: 0;
		}


		main.graph-container .entity.selected, .entity.isTwin {
			background-color: red;
			color: #fff;
			box-shadow: var(--shadow-high)
		}

			main.graph-container .entity.selected:not(.entity.isTwin) {
				border-color: var(--ActiveGreen);
			}

.entity.route, .entity.isGroup.route, .entity.isCompany.route {
	border: 2px solid var(--ActiveGreen);
}

main.graph-container .parent-tree .entity {
	color: var(--color-fg-default);
}

/* Target node - not root node */
main.graph-container .entity.isCompany.targetNode:not(.entity.rootNode) {
	border-width: 2px;
	background: var(--HoverText); /* var(--HoverText); */
	color: var(--ButtonText);
	border-color: var(--DarkGrey);
	font-weight: 400;
}

main.graph-container .entity.selected.isCompany.targetNode:not(.entity.rootNode) {
	border-color: var(--ActiveGreen);
}


main.graph-container .entity.isCompany {
	background: var(--color-bg-default);
}


main.graph-container .entity.targetNode {
	border-width: 2px;
	background: var(--AccentedButton) !important;
	color: var(--ButtonText) !important;
	border-color: var(--ActiveGreen);
	background-color: var(--ActiveGreen) !important;
	opacity: 1;
}

main.graph-container .entity.ultimateParentNode {
	font-weight: 400;
	border-width: 2px;
	background: var(--HoverButtonBackground) !important;
	color: var(--ButtonText) !important;
}


/* Nya, blir vit*/
main.graph-container .entity.targetNode.selected {
	font-weight: 400;
	border-width: 2px;
	background: var(--HoverButtonBackground);
	color: var(--ButtonText);
}

/* Nya, blir vit*/
main.graph-container .entity.ultimateParentNode.selected {
	border-width: 2px;
	background: var(--color-bg-default);
	color: var(--ButtonText) !important;
	border-color: var(--ActiveGreen);
}

main.graph-container .entity.selected,
main.graph-container .entity.route {
	background: var(--color-bg-default);
	color: var(--color-fg-default);
	box-shadow: var(--shadow-low);
	opacity: 1;
	border: 2px solid var(--HoverButtonBackground);
	transition: all .3s ease-in-out;
}


main.graph-container .entity .edge-handle button {
	background: var(--color-bg-default);
	color: var(--color-fg-default);
	font-size: 10px;
	line-height: 18px;
	border: 2px solid var(--StandardText);
}

	main.graph-container .entity .edge-handle button svg {
		background: var(--color-bg-default);
		stroke: var(--DarkGrey);
	}

main.graph-container

.entity:not(.selected) {
	opacity: var(--NodeOpacity, 1);
	color: black;
}

main.graph-container
.entity.noneSelected {
	opacity: 1;
	color: var(--color-fg-default);
}

main.graph-container
.entity.route {
	opacity: 1;
	color: var(--color-fg-default);
}

main.graph-container
.entity.rootNode {
	opacity: 1;
	color: var(--color-fg-default);
}

main.graph-container
.entity.children {
	opacity: 1;
	color: var(--color-fg-default);
}

	main.graph-container .entity.rootNode .entity.ultimateParentNode {
		font-weight: 400;
		border-width: 2px;
		background: var(--HoverButtonBackground) !important;
		color: var(--ButtonText) !important;
	}



/* Here we override the edbe buttons. Only on the root node and when it is closed. We add an flashing animation also*/
main.graph-container .rootNode .edge-handle.left:not(.isOpen) button {
	animation: blink-animation 1s linear 10;
	-webkit-animation: blink-animation 1s linear 10;
	border-radius: 8px;
	width: 85px;
	margin-left: -80px;
	margin-top: 0px;
	font-size: 0px;
}

	main.graph-container .rootNode .edge-handle.left:not(.isOpen) button:before {
		content: 'Click to expand';
		color: var(--color-fg-default);
		font-size: 9px;
		margin-right: 0px;
	}

main.graph-container.is-horizontal .rootNode .edge-handle.left:not(.isOpen) button {
	animation: blink-animation 1s linear 10;
	-webkit-animation: blink-animation 1s linear 10;
	border-radius: 8px;
	width: 85px;
	margin-left: -30px;
	margin-top: -20px;
	font-size: 0px;
}

	main.graph-container.is-horizontal .rootNode .edge-handle.left:not(.isOpen) button:before {
		content: 'Click to expand ';
		color: var(--color-fg-default);
		font-size: 9px;
		margin-left: 0px;
	}

@keyframes blink-animation {
	50% {
		opacity: 0.3;
	}
}

@-webkit-keyframes blink-animation {
	to {
		opacity: 0.7;
	}
}

/*----------- end special edge button handling ----------*/

main .graph-container .entity .edge-handle.isOpen button {
	color: var(--color-fg-default);
	background: var(--color-bg-default);
	border: 2px solid var(--StandardText);
}

main.graph-container .entity.selected .edge-handle button, main.graph-container .entity.route .edge-handle button {
	color: var(--color-fg-default);
}

main.graph-container .entity.route .edge-handle:not(.isOpen) button {
	color: var(--Background);
}

main.graph-container .entity.selected .edge-handle button {
	background: var(--StandardText);
	color: var(--ButtonText);
}

main.graph-container .entity.selected .edge-handle.isOpen button {
	color: var(--color-fg-default);
}

main.graph-container .entity.selected .edge-handle button svg, main.graph-container .entity.route .edge-handle button svg {
	stroke: var(--StandardText);
}

main.graph-container .entity .offset-label {
	background: var(--TabButtonText);
	color: var(--LighterGreen);
	border-radius: 4px 4px 0 0;
	top: -16px;
	padding: 5px 4px 4px 4px;
	text-align: center;
}

main.graph-container .connection {
	stroke: var(--StandardText);
	stroke-width: 1;
	z-index: 1;
}

	main.graph-container .connection.OWN {
		stroke-width: 1;
		stroke: var(--LightGrey);
		z-index: 0;
	}

	main.graph-container .connection.route {
		stroke-width: 3px;
		stroke: var(--ActiveGreen);
	}

	main.graph-container .connection.OWN.route {
		stroke-width: 3px;
		stroke: var(--ActiveGreen);
	}

	main.graph-container .connection.route.selected {
		stroke-width: 2px;
	}

main.graph-container .edgeLabel {
	fill: var(--StandardText);
	font-size: 9px;
}

	main.graph-container .edgeLabel .label-subownership {
		fill: var(--ActiveGreen);
		font-size: 9px;
		font-style: normal;
	}

main.graph-container .svelte-select .item .list-group-title {
	background-color: var(--PersonColor);
	color: var(--color-fg-default);
}

main.graph-container .svelte-select .value-container .item .list-group-title:first-of-type {
	background-color: var(--CompanyColor);
}

main.graph-container .svelte-select .value-container .item {
	padding: 6px 4px 6px 8px;
	line-height: 1.15 !important;
	height: 24px
}

main.graph-container .ui-zoom-container {
	position: relative;
}

main.graph-container .offset-label {
	background: var(--TabButtonText);
}

main.graph-container .label-subownership {
	color: var(--ActiveGreen);
	fill: var(--ActiveGreen);
}

.companyStructureModeSelect {
	position: absolute;
	z-index: 1;
}