.demo {
    /* for IE10+ touch devices */
    touch-action:none;
}

/** ELEMENTS **/
.chart-demo .window { 
	border:0.1em dotted #d4e06b; 	
	width:14em; height:4em; 	
	line-height:4em;	
}

/** HOVER EFFECTS **/
.chart-demo .window:hover, .chart-demo .window.jtk-source-hover, .chart-demo .window.jtk-target-hover {
    border:1px solid orange;
    color:orange;
}

/** ELEMENT POSITIONS **/
#chartWindow1 { left:20em; top:6em;}
#chartWindow2 { left:10em;top:18em;}
#chartWindow3 { left:40em;top:18em;}
#chartWindow4 { left:4em;top:30em;}
#chartWindow5 { left:22em;top:30em;}
#chartWindow6 { left:47em;top:30em;}
#chartWindow7 { top:18em;left:46em;}
#chartWindow8 { left:63em;top:38em;}


.window {
    background-color:white;
    border:1px solid #346789;
    text-align:center;
    z-index:24;
    cursor:pointer;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius:0.5em;
    border-radius:0.5em;
    position:absolute;
    color:black;
    padding:0.5em;
    width:80px;
    height:80px;
    display:flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;
}

.window:hover {
    border:1px solid #123456;
    box-shadow: 2px 2px 19px #444;
    -o-box-shadow: 2px 2px 19px #444;
    -webkit-box-shadow: 2px 2px 19px #444;
    -moz-box-shadow: 2px 2px 19px #fff;
    opacity:0.9;
}

path, .jtk-endpoint { cursor:pointer; }