$examplenodecolor:mui-color('light-green', 'A400');
$desirednodecolor:mui-color('light-green', 'A400');
$undesirednodecolor:mui-color('red', '400');
$indicatednodecolor:mui-color('light-green', '700');
$overflownodecolor:mui-color('red', '700');
$highlightnodecolor:mui-color('light-blue', 'A400');
$spanparentcolor:mui-color('light-green', '600');
$divgrandparentcolor:mui-color('light-green', '800');
$notmatchingspanrulecolor:mui-color('red', '600');

$lighttextcolor:whitesmoke;
$darktextcolor:#333333;


.notmatchingspanrule {
    color:$notmatchingspanrulecolor;
}
.userexampletext {
    color:$examplenodecolor;
}
.undesirednodetext {
    color:$undesirednodecolor;
}
.desirednodetext {
    color:$desirednodecolor;
}
.spanparenttext {
    color:$spanparentcolor;
}
.divgrandparenttext {
    color:$divgrandparentcolor;
}

/*boldtree1*/
#treestep1.active #boldtree .correspondnode {
    font-weight: bold;
    background-color: $examplenodecolor;
}

#treestep1.future {
    opacity:0;
}

/*treestep2*/
#treestep2.future {
    opacity:0.9;
}
#treestep2.active {
    opacity:1;
    transition:opacity 1s;
}

#treestep2.active #boldtree2 .circle {
    background-color: $examplenodecolor;
    font-weight:bold;
}

#treestep2 .textbox {
    position: absolute;
    left: 400px;
    width: 250px;
}

#treestep2.past .textbox, #treestep2.future .textbox {
    opacity:0;
    transition: opacity 1s;
}
#treestep2.active .textbox {
    opacity:1;
    transition: opacity 1s;
}

#treestep2.past {
    opacity:1;
}

.impress-on-treestep1 #treestep2,
.impress-on-predicateenrichment #treestep2,
.impress-on-predicateenrichment2 #treestep2,
.impress-on-boldstep #treestep2 {
    opacity:0;
}

/*treestep 3*/
#treestep3 .textbox {
    width: 60%;
    margin-left: 50%;
    background-color: lightgray;
    position: absolute;
    top: -222px;
    left: -79px;
}

/*first substep for the tree, giving info*/
.treesubstep .textbox {
    margin-left:200px;
    opacity:0;
    position: absolute;
}
#treesubstep1 .textbox {
    top: -200px;
}

    /* at treesubstep1, always show treestep2*/
.impress-on-treesubstep1 #treestep2, 
.impress-on-treesubstep2 #treestep2,
.impress-on-treesubstep3 #treestep2,
.impress-on-treesubstep4 #treestep2,
.impress-on-treesubstep5 #treestep2,
.impress-on-treesubstep6 #treestep2,
.impress-on-treesubstep7 #treestep2
{
    opacity:1;
}

#treesubstep1 .textbox {
    transition:opacity 1s 1s;
}

.impress-on-treesubstep1 #treesubstep1 .textbox, 
.impress-on-treesubstep2 #treesubstep2 .textbox,
.impress-on-treesubstep3 #treesubstep3 .textbox,
.impress-on-treesubstep4 #treesubstep4 .textbox,
.impress-on-treesubstep5 #treesubstep5 .textbox,
.impress-on-treesubstep6 #treesubstep6 .textbox,
.impress-on-treesubstep7 #treesubstep7 .textbox
{
    opacity:1;
    /*transition:opacity 2s 0s;*/
}

.impress-on-treesubstep2 #boldtree2 .bodynode {
    background-color: $highlightnodecolor;
}
.impress-on-treesubstep3 #boldtree2 .divnode {
    background-color: $highlightnodecolor;
}
.impress-on-treesubstep4 #boldtree2 .spannode {
    background-color: $highlightnodecolor;
}
.impress-on-treesubstep5 #boldtree2 .bnode {
    background-color: $highlightnodecolor;
}
.impress-on-treesubstep6 #boldtree2 .indicatednode {
    background-color: $indicatednodecolor;
    color:$lighttextcolor;
}
.impress-on-treesubstep6 #boldtree2 .overflownode {
    background-color: $overflownodecolor;
    color:$lighttextcolor;
}
.impress-on-treesubstep6 #boldtree2 .desirednode {
    background-color: $desirednodecolor;
    color:$darktextcolor;
}

.impress-on-treesubstep1 #boldtree2 .desirednode {
    background-color: $desirednodecolor;
    transition: background-color 2s;
    color:$darktextcolor;
}

.impress-on-treesubstep1 #boldtree2 .undesirednode {
    background-color: $undesirednodecolor;
    transition: background-color 2s;
    color:$darktextcolor;
}

//step 7
.impress-on-treesubstep7 #boldtree2 .desirednode {
    background-color: $desirednodecolor;
    transition: background-color 2s;
    color:$darktextcolor;
}
.impress-on-treesubstep7 #boldtree2 .spanparent {
    background-color: $spanparentcolor;
    transition: background-color 2s;
    color:$lighttextcolor;
}
.impress-on-treesubstep7 #boldtree2 .divgrandparent {
    background-color: $divgrandparentcolor;
    transition: background-color 2s;
    color:$lighttextcolor;
}

.impress-on-treesubstep7 #boldtree2 .notmatchingspanrulenode {
    background-color: $notmatchingspanrulecolor;
    transition: background-color 2s;
    color:$lighttextcolor;
}

/*stepping through the generalised xpath*/
.currentxpathstep {
    color:$highlightnodecolor;
}

/*this is the color for the text on substep6 */
#treesubstep6 .textbox .desired {
    color:$desirednodecolor;
    font-style:italic;
}
#treesubstep6 .textbox .indicated {
    color:$indicatednodecolor;
    font-style:italic;
}
#treesubstep6 .textbox .overflow {
    color:$overflownodecolor;
    font-style:italic;
}