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

/** ELEMENTS **/
.window {
    position: absolute;
}

.window:hover {
    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;
}

.source-target-demo .window {
    border: 2px dotted #346789;
    width: 14em;
    height: 4em;
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
}

.smallWindow {
    background-color: #558822;
    cursor: move;
}

/** ENABLE/DISABLE LINK **/
#enableDisableSource {
    position: absolute;
    top: 1em;
    right:5px;
    color: #DDD;
    font-size:12px;
}

#enableDisableSource:hover {
    color: orange;
}

.enableDisableTarget {
    color:white;
    right:5px;
    top:5px;
    position:absolute;
    font-size:12px;
}

.enableDisableTarget:visited, .enableDisableTarget:focus {
    color:white;
}

.enableDisableTarget:hover {
    color: orange;
}

.element-disabled {
    outline:2px solid lightcoral;
}

/** LARGE WINDOW STYLE AND POSITION **/
#sourceWindow1 {
    background-color: #0d78bc;
    top: 9em;
    left: 14em;
    width: 30em;
    height: 6em;
    text-align: left;
}

/** SMALL WINDOW POSITIONS **/
#targetWindow2 {
    top: 29em;
    left: 44em;
}

#targetWindow3 {
    top: 23em;
    left: 2em;
}

#targetWindow4 {
    top: 31em;
    left: 26em;
}

#targetWindow5 {
    top: 39em;
    left: 13em;
}

#targetWindow6 {
    top: 21em;
    left: 56em;
}

/** JSPLUMB ARTEFACTS **/
.jtk-endpoint {
    z-index: 32;
}

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

/* ENDPOINT STYLES */
.large-green circle {
    fill:#558822;
}

.small-blue circle {
    fill:#0d78bc;
}