html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding: 1px;
    box-sizing: border-box;
}

body {
}

#chart-container {
    position: relative;
    height: 420px;
    border: 1px solid #aaa;
    margin: 0.5rem;
    overflow: auto;
    text-align: center;
}
/*ORG CHART*/
#chart-container {
    height: auto !important;
    border: 0 !important;
    border-radius: 0;
    margin: 30px 0 !important;
    padding: 0;
    /*box-shadow: #919eab4d 0 0 2px, #919eab1f 0 12px 24px -4px;*/
}

    #chart-container::-webkit-scrollbar:horizontal {
        height: 8px;
    }

    #chart-container::-webkit-scrollbar-thumb:horizontal {
        background: var(--ndhr-secondary);
        border-radius: 0;
    }

.orgchart {
    background-color: #F8F8F8 !important;
    padding: 50px 20px;
}

    .orgchart .nodes {
        padding: 0;
    }

    .orgchart .node {
        border-radius: 7px;
    }

        .orgchart .node .title {
            width: 200px;
            height: auto;
            padding: 20px 15px 3px;
            background-color: #02367b;
            color: #fff;
            border-radius: 7px 7px 0 0;
            direction: rtl;
            font-weight: normal;
            font-size: 15px;
            white-space: normal;
        }

            .orgchart .node .title .parentNodeSymbol {
                float: right;
                display: none;
            }

                .orgchart .node .title .parentNodeSymbol::before {
                    color: rgb(93,135,255);
                }

        .orgchart .node .content {
            width: 200px;
            border: 0;
            background-color: rgb(236,242,255);
            border-radius: 0 0 7px 7px;
            padding: 0 15px 15px;
            height: auto;
            font-size: 12px;
            color: rgb(93,135,255);
            font-weight: normal;
        }

    /*Level 1*/
    .orgchart > .nodes > li > .node .title,
    .orgchart > .nodes > li > .node .content {
        background-color: #3a559a;
        color: #fff;
        font-size: 18px;
    }

    /*Level 2*/
    .orgchart > .nodes > li > .nodes > li > .node .title,
    .orgchart > .nodes > li > .nodes > li > .node .content {
        background-color: #6176af;
        color: #fff;
        font-size: 18px;
    }

    /*Level 3*/
    .orgchart > .nodes > li > .nodes > li > .nodes > li > .node .title,
    .orgchart > .nodes > li > .nodes > li > .nodes > li > .node .content {
        background-color: #608fc6;
        color: #fff;
        font-size: 18px;
    }

    /*Level 4*/
    .orgchart > .nodes > li > .nodes > li > .nodes > li > .nodes > li > .node .title,
    .orgchart > .nodes > li > .nodes > li > .nodes > li > .nodes > li > .node .content {
        /*background-color: #04bade;*/
        background-color: #709acb;
        color: #fff;
        font-size: 18px;
    }

    /*Level 5*/
    .orgchart > .nodes > li > .nodes > li > .nodes > li > .nodes > li > .nodes > li > .node .title,
    .orgchart > .nodes > li > .nodes > li > .nodes > li > .nodes > li > .nodes > li > .node .content {
        /*background-color: #55e2e9;
    color: #000503;*/
        background-color: #96b4d8;
        color: #fff;
        font-size: 18px;
    }

    .orgchart .node:not(:only-child)::after,
    .orgchart > ul > li > ul li > .node::before {
        height: 15px;
        background-color: #ccc;
    }

    .orgchart .hierarchy::before {
        border-top-color: #ccc;
    }

    .orgchart .nodes.vertical > .hierarchy:first-child::before {
        border-width: 2px 2px 0 0;
        border-color: #ccc;
        height: 50px;
        width: calc(50% + 11px);
        left: calc(50% - 6px);
        right: auto;
    }

    .orgchart .nodes.vertical > .hierarchy:first-child::after {
        border-width: 2px 2px 0 0;
        right: -5px;
        left: auto;
        border-color: #ccc;
        top: 33px;
    }

    .orgchart .nodes.vertical .hierarchy::before {
        right: -5px;
        left: auto;
        border-width: 0 2px 2px 0;
        border-color: #ccc;
        height: 35px;
    }