@import './variables.scss'; 
.treeDivContainer {
	overflow:hidden;
	height:100%;
	background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent) ;
    //background-color:$grey6; 
	background-size: 50px 50px;
	margin:0px 0px 0px $mainSpacing;
	border:$subsectionBorder;
	border-top:none;
	width:100vw;
	height:100vh;
}

.TaskWrapper {
	height:100%;
	width:100%;
}

.treeContainer {
	height:100%;
	width:100%;
	position:relative;
	cursor:move;
}
svg:not(:root).LinkCanvas {
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	position: absolute;
	overflow:visible;
}
.NodeCanvas{
    pointer-events: none;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.StepNodeContainer{
	position:absolute;
	pointer-events:auto;
}

.ui.circular.label{
	box-shadow:$boxshadow1;
}
.LinkLine {
	stroke:#d1d1d1;
	stroke-width:1px;
	fill:none;
	transition:stroke 100ms;
	pointer-events:stroke
}

.LinkCanvas{
	pointer-events:all;
}

.LinkLine:hover,.LinkLine.SuccessorLink:hover,LinkLine.PredecessorLink:hover{
	stroke:$grey4;
	stroke-width:3px;
}


.TreeLayerContainer{
	position:absolute;
}
.TreeTaskItems{
	pointer-events:none;
	height:100%;
	width:100%;
}

.isBackdropActivatedTree{
}
.isBackdropActivatedTree2{
}