.tree-hidden {
    display : none;
}

.tree-toggle,
.tree-controls {
    cursor                : pointer;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    z-index               : 3;
}

.tree-toggle,
.tree-controls {
    position : absolute;
    width    : 20px;
    height   : 20px;
    margin   : 0 10px 0 0;
}

.tree-node {
    position : relative;
}

.tree-node:before,
.tree-node:after {
    content : "";
    display : table;
    clear   : both;
}

.tree-toggle-wrapper {
    position           : absolute;
    top                : 0;
    left               : 0;
    bottom             : 0;
    width              : 50px;
    margin             : 0 10px 10px 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

.tree-toggle {
    position         : absolute;
    top              : 50%;
    left             : 50%;
    bottom           : 0;
    right            : 0;
    background-color : #f8faff;
    border           : 1px solid rgba(0, 0, 0, 0.2);
    margin           : -10px 0 0 -10px;
}

.tree-toggle .fa-chevron-right,
.tree-toggle .fa-chevron-down {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    color     : rgba(0, 0, 0, 0.7);
    font-size : 14px;
    opacity   : 0.9;
}

.tree-toggle .fa-chevron-down {
    margin : -7px 0 0 -7px;
}

.tree-toggle .fa-chevron-right {
    margin : -6px 0 0 -4px;
}

.tree-node-content {
    position              : relative;
    height                : auto;
    color                 : rgba(0, 0, 0, 0.87);
    background            : #f8faff;
    border                : 1px solid #dae2ea;
    padding               : 12px;
    margin                : 0 0 10px 0;
    -webkit-box-shadow    : 0 0 0 1px rgba(34, 36, 38, 0.1) inset, 0 0 0 0 transparent;
    -moz-box-shadow       : 0 0 0 1px rgba(34, 36, 38, 0.1) inset, 0 0 0 0 transparent;
    box-shadow            : 0 0 0 1px rgba(34, 36, 38, 0.1) inset, 0 0 0 0 transparent;
    -webkit-border-radius : 3px;
    -moz-border-radius    : 3px;
    border-radius         : 3px;
    font-family           : sans-serif;
}

.tree-node-content:before,
.tree-node-content::before,
.tree-node-content:after,
.tree-node-content::after {
    content : "";
    display : table;
    clear   : both;
}

.tree-label-group {
    position : relative;
    width    : 100%;
}

.tree-label,
.tree-label-type {
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

.tree-label {
    width       : 55%;
    color       : rgba(0, 0, 0, 0.7);
    float       : left;
    white-space : nowrap;
    padding     : 0;
    overflow    : hidden;
    z-index     : 0;
}

.tree-icon {
    float  : left;
    margin : 0 20px 0 10px;
}

.tree-label-type {
    position  : absolute;
    top       : 0;
    right     : 40px;
    float     : right;
    font-size : 12px;
}

.tree-label-type span {
    color                 : #FFFFFF;
    background-color      : #a94442;
    padding               : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
}

.tree-controls {
    right                 : 0;
    background            : none;
    border                : none;
    list-style            : none;
    z-index               : 0;
    -webkit-border-radius : 0;
    -moz-border-radius    : 0;
    border-radius         : 0;
}

.tree-controls-open {
    width   : auto;
    height  : auto;
    z-index : 3;
}

.tree-controls-toggle {
    position              : absolute;
    top                   : 0;
    right                 : 0;
    width                 : 20px;
    height                : 20px;
    background-color      : #e0e1e2;
    border                : 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    border-radius         : 5px;
    z-index               : 5;
}

.tree-controls-toggle:before {
    content     : "...";
    position    : absolute;
    top         : 50%;
    width       : 100%;
    height      : 10px;
    color       : #000000;
    font-size   : 18px;
    line-height : 0;
    text-align  : center;
    padding     : 0 0 0 1px;
    margin      : -4px 0 0 0;
}

.tree-controls-open .tree-controls-toggle {
    -webkit-border-radius : 5px 5px 0 0;
    -moz-border-radius    : 5px 5px 0 0;
    border-radius         : 5px 5px 0 0;
    border-bottom         : none;
}

.tree-controls-list {
    position              : relative;
    display               : none;
    color                 : #000000;
    background-color      : #e0e1e2;
    border                : 1px solid rgba(0, 0, 0, 0.2);
    list-style            : none;
    padding               : 0 15px;
    margin                : 19px 0 0 0;
    -webkit-border-radius : 5px 0 5px 5px;
    -moz-border-radius    : 5px 0 5px 5px;
    border-radius         : 5px 0 5px 5px;
    z-index               : 3;
}

.tree-controls-list li {
    padding     : 0;
    margin      : 10px 0;
    font-weight : 400;
}

.tree-controls-open .tree-controls-list {
    display : block;
}

.tree-controls-btn {
    display    : none;
    position   : static;
    text-align : center;
    padding    : 0;
}

@media (max-width : 480px) {
    .tree-label {
        width     : 70%;
        font-size : 10px;
    }

    .tree-label-type {
        font-size : 10px;
    }

    .tree-label-type span {
        padding               : 3px 5px;
        -webkit-border-radius : 3px;
        -moz-border-radius    : 3px;
        border-radius         : 3px;
    }
}

.angular-ui-tree-handle {
    color       : #7c9eb2;
    padding     : 0 0 0 50px;
    font-weight : normal;
}

.angular-ui-tree-handle:hover .tree-node-content {
    color        : #438eb9;
    background   : #f4f6f7;
    border-color : #dce2e8;
}

.angular-ui-tree-placeholder {
    background         : #f0f9ff;
    border             : 2px dashed #bed2db;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    margin-left        : 52px;
}

tr.angular-ui-tree-empty {
    height : 100px
}

.group-title {
    background-color : #687074 !important;
    color            : #FFF !important;
}

.angular-ui-tree-placeholder {
    background         : #f0f9ff;
    border             : 2px dashed #bed2db;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
}

.angular-ui-tree-nodes .angular-ui-tree-nodes {
    padding-left : 40px;
}