#visualPath {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#visualPathCanvas {
    display: flex;
    width: 100%;
    height: 100%;
    border: 0;

}

    #visualPathCanvas [data-role="surface"] {
        width: 100% !important;
        height: 100% !important;
    }

#visualPathProcessing {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 150%;
    background: whitesmoke;
}

    #visualPathProcessing span {
        margin-bottom: 5em;
    }

/* Styles for path button controls */

#visualPathControls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 5em;
    background: #ccc;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.25em 0.75em 0.25em 0.25em;
}

    #visualPathControls button {
        height: 60%;
        display: flex;
        align-items: center;
    }

    #visualPathControls div {
        height: 100%;
        display: flex;
        align-items: center;
    }

/* End of styles for path button controls */

/* Styles for shape contextual menu */

#visualPathContextMenu {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    font-size: 110%;
}

    #visualPathContextMenu li:hover:not(.k-separator) {
        background: #ccc;
    }

    #visualPathContextMenu .shaded {
        background: #e0e0e0;
    }

    #visualPathContextMenu span {
        white-space: nowrap;
    }

/* End of Styles for shape contextual menu */


/* Styles for shape node icon template */

#visualPathResourceTemplate {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    font-family: helvetica;
    font-size: 90%;
    background: white;
    padding: 5px;
}

    #visualPathResourceTemplate .letterSymbol {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2px;
        height: 20px;
    }

        #visualPathResourceTemplate .letterSymbol span {
            display: none;
            align-items: center;
            justify-content: center;
            background: yellow;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid orange;
            width: 15px;
            font-weight: bold;
            margin: 0 2px;
            padding: 2px 0;
        }

    #visualPathResourceTemplate > img {
        width: 75px;
        height: 75px;
        margin: 2px 0;
    }

/* End of Styles for shape node icon template */