html, body {
    height: 100%;
    margin: 0
}

.page-break {
    display: block;
    page-break-before: always;
    height: 1px;
    width: 100%
}

#simple-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center
}

    #simple-modal .inner-modal {
        width: 800px;
        min-height: 600px;
        background: #fff;
        margin: auto;
        padding: 30px
    }

#Tree-Diagram {
    -webkit-print-color-adjust: exact;
    display: block !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    height: 100%;
    position: relative;
    cursor: default !important;
    text-align: center;
    min-height:78vh;
}

    #Tree-Diagram .toolbar {
        /*padding-top: 30px;*/
        z-index: 9999;
        position: relative
    }

    #Tree-Diagram .inner_additional_params {
        margin-bottom: 10px
    }

        #Tree-Diagram .inner_additional_params span {
            display: inline-block;
            margin: 0 5px;
            padding: 2px 5px;
            font-size: 15px;
            background: #747474;
            border: 1px solid #747474;
            color: #fff !important
        }

            #Tree-Diagram .inner_additional_params span.mobsCount {
                background: #A979B3 !important;
                border: 1px solid #A979B3
            }

            #Tree-Diagram .inner_additional_params span.chCount {
                background: #C87335 !important;
                border: 1px solid #C87335
            }

            #Tree-Diagram .inner_additional_params span.assignedMobs {
                background: #B0CB19 !important;
                border: 1px solid #B0CB19
            }

            #Tree-Diagram .inner_additional_params span.factMob {
                background: #F08137 !important;
                border: 1px solid #F08137
            }

            #Tree-Diagram .inner_additional_params span.planningMobs {
                background: #EA556F !important
            }

    #Tree-Diagram .tree-roots-elements {
        position: relative;
        text-align: center;
        transform: translate(0,35px);
        display: inline-block;
        transform-origin: 0 0;
        white-space: nowrap;
        cursor: default !important
    }

        #Tree-Diagram .tree-roots-elements .tree-parent {
            position: relative;
            display: inline-block;
            margin: 15px;
            vertical-align: top
        }

            #Tree-Diagram .tree-roots-elements .tree-parent .rect {
                position: relative;
                background-color: #fafafa !important;
                border: 1px solid #1a1a1a;
                display: inline-block;
                box-sizing: border-box;
                width: 120px;
                -webkit-print-color-adjust: exact;
                min-height: 45px;
                cursor: default !important;
                border-radius :15px;
            }

                #Tree-Diagram .tree-roots-elements .tree-parent .rect.has-children {
                    background: #a3b0d1 !important;
                    border-radius: 15px;
                    border: solid #354b84 1px;
                }

            #Tree-Diagram .tree-roots-elements .tree-parent .tree-element-main {
                text-align: center;
                width: 100px;
                margin: 0 auto;
                margin-top:-10px;
            }

            #Tree-Diagram .tree-roots-elements .tree-parent .rect.selected {
                border: 1px #007172 solid
            }

            #Tree-Diagram .tree-roots-elements .tree-parent .tree-buttons {
                position: absolute;
                display: none
            }

            #Tree-Diagram .tree-roots-elements .tree-parent .edit span {
                line-height: 21px;
                color: #3abec0;
                display: inline-block;
                margin-left: 5px;
                cursor: pointer
            }

            #Tree-Diagram .tree-roots-elements .tree-parent .rect:hover .tree-buttons {
                display: block
            }

            #Tree-Diagram .tree-roots-elements .tree-parent .rect.mob {
                background: #00bfc1 !important
            }

                #Tree-Diagram .tree-roots-elements .tree-parent .rect.mob textarea {
                    color: #fff !important
                }

                #Tree-Diagram .tree-roots-elements .tree-parent .rect.mob .edit span {
                    color: #fff !important
                }

            #Tree-Diagram .tree-roots-elements .tree-parent .tree-element-container {
                width: 180px;
                height: 75px
            }

            #Tree-Diagram .tree-roots-elements .tree-parent .rect.loading:before {
                content: "";
                width: 180px;
                height: 0;
                background-size: 11%;
                left: 0;
                top: 0;
                display: block;
                padding-bottom: 75px;
                margin-bottom: -75px
            }

        #Tree-Diagram .tree-roots-elements .tree-children {
            text-align: center;
            transform: translate(calc(-50% + 90px),37px) rotateY(0deg);
            display: inline-block;
            position: relative;
            white-space: nowrap;
            perspective: 3000px;
            perspective-origin: center bottom
        }

            #Tree-Diagram .tree-roots-elements .tree-children.ng-move, #Tree-Diagram .tree-roots-elements .tree-children.ng-enter, #Tree-Diagram .tree-roots-elements .tree-children.ng-leave {
                transition: all ease .5s;
                transform-origin: center
            }

                #Tree-Diagram .tree-roots-elements .tree-children.ng-leave.ng-leave-active, #Tree-Diagram .tree-roots-elements .tree-children.ng-move, #Tree-Diagram .tree-roots-elements .tree-children.ng-enter {
                    transform: translate(calc(-50% + 90px),37px) rotateY(90deg);
                    opacity: 0
                }

                    #Tree-Diagram .tree-roots-elements .tree-children.ng-leave, #Tree-Diagram .tree-roots-elements .tree-children.ng-move.ng-move-active, #Tree-Diagram .tree-roots-elements .tree-children.ng-enter.ng-enter-active {
                        transform: translate(calc(-50% + 90px),37px) rotateY(0deg);
                        opacity: 1
                    }

        #Tree-Diagram .tree-roots-elements .tree-parent {
            position: relative;
            display: inline-block;
            margin: -12px;
            vertical-align: top
        }

        #Tree-Diagram .tree-roots-elements .line-to {
            position: absolute;
            top: -20px;
            border-top: 1px solid #1a1a1a;
            width: calc(100% + 20px);
            display: none
        }

    #Tree-Diagram .tree-compact {
        position: absolute;
        -webkit-transform: translate(0,30px);
        transform: translate(0,30px)
    }

        #Tree-Diagram .tree-compact .rect {
            background: #fafafa !important;
            vertical-align: middle;
            display: table-cell
        }

        #Tree-Diagram .tree-compact .tree-text {
            font-size: 12px
        }

    #Tree-Diagram .tree-text {
        font-size: 13px;
        line-height: 17px;
        font-family: 'Segoe UI','Open Sans',sans-serif;
        height: 38px
    }

        #Tree-Diagram .tree-text textarea {
            margin: 0;
            padding: 0px 5px 0px 5px;
            background: 0 0;
            /*-webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;*/
            border: none;
            line-height: 16px;
            overflow: hidden;
            resize: none;
            /*height: 20px;*/
            /*text-align: center;
            pointer-events: none;
           
           
            width: 200px;
            height: 100px;
            height: 100%;
            width: 100%;
            */
        }

    #Tree-Diagram .tree-connectors {
        position: absolute;
        top: -60px;
        left: 15px;
        height: 60px;
        width: 100%
    }

    #Tree-Diagram .tree-link {
        position: absolute
    }

    #Tree-Diagram .tree-element-container {
        z-index: 100
    }

    #Tree-Diagram .tree-text.inline-editing textarea {
        -webkit-touch-callout: text;
        -webkit-user-select: text;
        -khtml-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
        pointer-events: auto;
        text-decoration: underline
    }

    #Tree-Diagram .tree-drop-circle {
        position: absolute;
        top: -5px;
        left: -5px;
        right: 0;
        margin: 0 auto;
        width: 210px;
        height: 110px;
        background: #f2f4f6;
        box-shadow: 0 0 1px gray;
        opacity: .5;
        display: none;
        z-index: 9999
    }

        #Tree-Diagram .tree-drop-circle.h {
            background: #3e8432;
            box-shadow: 0 0 1px #3e8432
        }

        #Tree-Diagram .tree-drop-circle.cshow {
            display: block
        }

    #Tree-Diagram .tree-parent.dragging {
        pointer-events: none;
        z-index: 10000
    }

        #Tree-Diagram .tree-parent.dragging > .ghost-box {
            display: block
        }

    #Tree-Diagram .ghost-box {
        position: absolute;
        width: 200px;
        height: 100px;
        box-shadow: 0 0 6px gray;
        display: none;
        z-index: -1;
        left: 0;
        right: 0;
        margin: 0 auto;
        background-color: #fff
    }

    #Tree-Diagram .tree-parent:not(.tree-root):before {
        content: "";
        width: 50%;
        position: absolute;
        height: 15px;
        left: 0;
        top: -20px;
        border-right: 1px solid #1a1a1a
    }

    #Tree-Diagram .tree-children:before {
        content: "";
        width: 50%;
        position: absolute;
        height: 7px;
        left: 0;
        top: -38px;
        border-right: 1px solid #1a1a1a;
        max-width: 100%;
        max-height: 100%
    }

    #Tree-Diagram .tree-compact:before {
        content: "";
        width: 50%;
        position: absolute;
        height: 19px;
        left: 0;
        top: -34px;
        border-right: 1px solid #1a1a1a
    }

    #Tree-Diagram .tree-addons {
        position: absolute;
        bottom: 0;
        width: 200px
    }

    #Tree-Diagram .tree-elements-group {
        display: inline-block;
        position: relative
    }

        #Tree-Diagram .tree-elements-group > div > .line-to {
            left: 0;
            display: block
        }

        #Tree-Diagram .tree-elements-group > div:first-of-type > .line-to {
            right: -0px;
            width: calc(50% + 0px);
            display: block;
            left: auto
        }

        #Tree-Diagram .tree-elements-group > div:last-of-type > .line-to {
            left: 0;
            right: auto;
            width: 50%;
            display: block
        }

        #Tree-Diagram .tree-elements-group .tree-child:last-child {
            margin-right: 0
        }

        #Tree-Diagram .tree-elements-group .tree-child:first-child {
            margin-left: 0
        }

    #Tree-Diagram .tree-elements-group-haschildren > div:first-child > .line-to {
        width: calc(100% + 160px);
        position: absolute;
        left: -130px;
        right: auto;
        border-top: 1px solid #1a1a1a
    }

    #Tree-Diagram .tree-elements-group-haschildren > div:first-child:not(:only-child) {
        margin-left: 30px
    }

    #Tree-Diagram .tree-expand-all-button button {
        padding: 0;
        height: 36px
    }

    #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-children {
        -webkit-transform: translate(0,45px);
        transform: translate(0,45px);
        white-space: normal
    }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-children .tree-elements-group {
            white-space: normal;
            display: block;
            margin: 0 auto;
            text-align: left;
            min-width: 220px
        }

    #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-parent .tree-element-container {
        width: auto !important
    }

    #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren {
        padding-bottom: 30px
    }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren .tree-parent {
            margin: 15px
        }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren > div {
            margin: 10px !important
        }

            #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren > div > .line-to {
                display: none
            }

            #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren > div:before {
                display: none
            }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren:after {
            background: url(../img/line-group.png) 100% -59px !important;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: calc(100% - 30px);
            content: "";
            display: block;
            z-index: -1
        }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren:before {
            content: "";
            width: 50%;
            position: absolute;
            height: 100%;
            left: auto;
            top: -16px;
            right: -1px;
            /*border-top: 1px solid #dadada;
            border-right: 1px solid #dadada;
            border-bottom: 1px solid #dadada;*/
            border-top: 1px solid #1a1a1a;
            border-right: 1px solid #1a1a1a;
            border-bottom: 1px solid #1a1a1a;
            max-height: 100%
        }

    #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-haschildren {
        text-align: center !important;
        white-space: nowrap !important
    }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-haschildren > div:first-of-type > .line-to {
            right: -30px;
            width: calc(50% + 30px);
            display: block;
            left: auto
        }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-haschildren > div:first-child:not(:only-of-type) {
            margin-left: 0
        }

        #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-haschildren > div:only-of-type > .line-to {
            display: none
        }

    #Tree-Diagram .tree-expand-all.tree-roots-elements .group-line {
        position: absolute;
        width: calc(100% - 20px);
        right: 0;
        border-bottom: 1px solid #1a1a1a;
        top: 0
    }

    #Tree-Diagram .tree-expand-all.tree-roots-elements .tree-elements-group-nochildren.single:before {
        height: calc(100% - 74px);
        border-bottom: none
    }

    #Tree-Diagram .tree-roots-elements:not(.tree-expand-all) .tree-elements-group-nochildren {
        width: auto !important
    }

    #Tree-Diagram .tree-elements-group:empty {
        display: none
    }

    #Tree-Diagram .tree-print-button button {
        padding: 0;
        height: 36px;
        width: 32px
    }

        #Tree-Diagram .tree-print-button button div {
            color: #fff;
            font-size: 24px
        }

#newElemetModal {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 10000
}

body.for-print #group-tree-wr #groups {
    overflow: visible
}

body.for-print .addscroll {
    overflow: visible !important
}

body.for-print #header, body.for-print .leftcol, body.for-print #graffle, body.for-print #viewSwitcher, body.for-print #slidingPanelfilterPanelContent {
    display: none
}

.tree-logo {
    background: url(../img/logo.png) no-repeat 0 0;
    width: 180px;
    height: 33px;
    position: absolute;
    left: 10px;
    top: 10px
}

.tree-title {
    position: absolute;
    left: 200px;
    top: 15px;
    font-size: 19px;
    text-shadow: 0 0 1px #fff
}

.tree-page-num {
    position: absolute;
    top: 0;
    background: #fff !important;
    right: 0
}

.tree-compact .tree-parent {
    margin: 15px 0 !important
}
@media (max-width: 1920px) {
    /*.tree-text .borderless-input {
        border: 1px solid #697ba8 !important;
        background: #fff;
    }*/

    .pure-button {
        color: #fff;
        border-radius: 20px;
        background-color: #354b84;
        transition: all 0.3s ease;
    }

        .pure-button:hover {
            background-color: #2d92d0;
        }

    /*#Tree-Diagram .tree-roots-elements .tree-parent .rect.has-children > .tree-text .m-t-5 i:before {
        color: #fff;
    }*/
}

@media(min-width: 768px) {
    /*#Tree-Diagram {
        z-index: 1;
    }*/
}