body {
    background-color: #f8f8f8;
    font-family: -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    padding: 0 0 10px;
}

h1, h2, h3, h4, h5, h6 {
    color: #026974;
    font-family: -apple-system-font, 'Segoe UI Light', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 300;
}

h2 {
    margin-top: 24px;
    margin-left: -12px;
}

.header {
    color: #dcf3f6;
    background-color: #00C1D5;
    margin-bottom: 14px;
    padding: 12px 0;
}

    .header h1 {
        color: #fff;
        font-size: 40px;
        line-height: 1;
        margin-top: 0;
    }

    .header img {
		float: left;
		margin: 0 10px 5px 0;
	}

.pane-content {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
    font-size: 13px;
    overflow: auto;
    padding: 0 8px;
    white-space: pre;
    max-height: 350px;
}

.pane-content code {
    background-color: #fff;
    color: #000;
    padding: 0;
}

/* default trees on this sample */
.wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    background: white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.wj-treeview.short {
    height: 150px;
}

/* accordion tree styles */

.accordion-tree {
    background: transparent;
    box-shadow: none;
}

/* hide collapse/expand glyphs */
.accordion-tree.wj-treeview .wj-nodelist .wj-node:before { 
    display: none;
}

/* level 0 nodes (headers) */
.accordion-tree.wj-treeview .wj-nodelist > .wj-node {
    font-size: 120%;
    font-weight: bold;
    padding: 6px 10px;
    color: white;
    background: #106cc8;
    margin-bottom: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/* level 1 nodes (navigation items) */
.accordion-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node {
    font-size: inherit;
    font-weight: normal;
    padding: 4px 1em;
    color: inherit;
    background: inherit;
    box-shadow: none;
}
    .accordion-tree.wj-treeview .wj-nodelist {
        padding-bottom: 6px;
    }


/* custom tree styles */
.custom-tree.wj-treeview {
    color: #026974;
}

    /* default nodes */
    .custom-tree.wj-treeview .wj-node {
    }

    /* level 0 and deeper nodes */
    .custom-tree.wj-treeview .wj-nodelist > .wj-node {
        font-size: 120%;
        font-weight: bold;
    }

    /* level 1 and deeper nodes (smaller font, vertical line along the left) */
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node,
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist {
        font-size: 110%;
        font-weight: normal;
        border-left: 4px solid rgba(128, 4, 77, 0.3);
    }

    /* level 2 and deeper nodes (smaller font, thinner border) */
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist  > .wj-nodelist > .wj-node,
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist  > .wj-nodelist > .wj-nodelist {
        font-size: 100%;
        font-style: italic;
        opacity: 0.8;
        border-left: 2px solid rgba(128, 4, 77, 0.3);
    }

    /* expanded node glyph */
    .custom-tree.wj-treeview .wj-nodelist .wj-node:before { 
        content: "\e114";
        font-family: 'Glyphicons Halflings';
        top: 4px;
        border: none;
        opacity: .3;
        transition: all .3s cubic-bezier(.4,0,.2,1);
    }

    /* collapsed node glyph */
    .custom-tree.wj-treeview .wj-nodelist .wj-node.wj-state-collapsed:before,
    .custom-tree.wj-treeview .wj-nodelist .wj-node.wj-state-collapsing:before {
        transform: rotate(-180deg);
        transition: all .3s cubic-bezier(.4,0,.2,1);
    }

    /* selected node */
    .custom-tree.wj-treeview .wj-node.wj-state-selected {
        color: white;
        background: rgba(128, 4, 77, 0.70);
    }

/* odata tree styles */

/* level 0 nodes and deeper (employees...) */
#treeViewLazyLoadOData.wj-treeview .wj-nodelist > .wj-node {
    font-weight: bold;
}

/* level 1 nodes and deeper (orders...) */
#treeViewLazyLoadOData.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node {
    font-weight: normal;
    font-size: 95%;
    color: darkblue;
}

/* level 2 nodes and deeper (order details...) */
#treeViewLazyLoadOData.wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist > .wj-node {
    font-size: 90%;
    color: darkslategrey;
}
