/* OrgChart css */

#chart-container {position: relative; display: inline-block; top: 10px; left: 10px; height: auto; min-height: 500px; width: calc(100% - 24px); overflow: auto; overflow-x: scroll !important; text-align: center; border: 2px dashed #f0e6d5; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
#chart-container .orgchart {background: white;}
#chart-container .orgchart .node {width: 200px; padding: 5px;}
#chart-container .orgchart .node .title {height: auto; white-space: normal; padding:15px 25px; font-weight: 500; background-color:#000000; color:#fff;}
#chart-container .orgchart .node .title .symbol {float: none; position: absolute; left: 10px; top: 10px; font-size: 0px;}
#chart-container .orgchart .node .content {height: auto; white-space: normal; padding:7px; border-color: #000; background:#33333315;}
#chart-container .orgchart .lines .leftLine, #chart-container .orgchart .lines .rightLine {border-color: #000;}
#chart-container .orgchart .lines .downLine {background-color:#000; background-color:transparent; border:1px dashed;}
#chart-container .orgchart .node .edge {color: #000;}


.orgchart {box-sizing: border-box;display: inline-block;min-height: 202px;min-width: 202px;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);background-size: 10px 10px;border: 1px dashed rgba(0,0,0,0);padding: 20px;}
.orgchart .hidden, .orgchart~.hidden {display: none;}
.orgchart.b2t {transform: rotate(180deg);}
.orgchart.l2r {position: absolute;transform: rotate(-90deg) rotateY(180deg);transform-origin: left top;}
.orgchart .verticalNodes ul {list-style: none;margin: 0;padding-left: 18px;text-align: left;}
.orgchart .verticalNodes ul:first-child {margin-top: 2px;}
.orgchart .verticalNodes>td::before {content: '';border: 1px solid rgba(217, 83, 79, 0.8);}
.orgchart .verticalNodes>td>ul>li:first-child::before {box-sizing: border-box;top: -4px;height: 30px;width: calc(50% - 2px);border-width: 2px 0 0 2px;}
.orgchart .verticalNodes ul>li {position: relative;}
.orgchart .verticalNodes ul>li::before,.orgchart .verticalNodes ul>li::after {box-sizing: border-box;content: '';position: absolute;left: -6px;border-color: rgba(217, 83, 79, 0.8);border-style: solid;border-width: 0 0 2px 2px;}
.orgchart .verticalNodes ul>li::before {top: -4px;height: 30px;width: 11px;}
.orgchart .verticalNodes ul>li::after {top: 1px;height: 100%;}
.orgchart .verticalNodes ul>li:first-child::after {box-sizing: border-box;top: 24px;width: 11px;border-width: 2px 0 0 2px;}
.orgchart .verticalNodes ul>li:last-child::after {box-sizing: border-box;border-width: 2px 0 0;}
.orgchart.r2l {position: absolute;transform: rotate(90deg);transform-origin: left top;}
.orgchart>.spinner {font-size: 100px;margin-top: 30px;color: rgba(68, 157, 68, 0.8);}
.orgchart table {border-spacing: 0;border-collapse: separate;}
.orgchart>table:first-child{margin: 20px auto;}
.orgchart td {text-align: center;vertical-align: top;padding: 0;}
.orgchart .lines:nth-child(3) td {box-sizing: border-box; height:20px;}
.orgchart .lines .topLine {border-top: 2px dashed rgba(217, 83, 79, 0.8);}
.orgchart .lines .rightLine {border-right: 1px dashed rgba(217, 83, 79, 0.8);float: none;-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;}
.orgchart .lines .leftLine {border-left: 1px dashed rgba(217, 83, 79, 0.8);float: none;-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;}
.orgchart .lines .downLine {background-color: rgba(217, 83, 79, 0.8);margin: 0 auto;height: 30px;width: 2px;float: none;}

/* node styling */
.orgchart .node {box-sizing: border-box;display: inline-block;position: relative;margin: 0;padding: 3px;border: 2px dashed transparent;text-align: center;width: 308px;}
.orgchart.l2r .node, .orgchart.r2l .node {width: 50px;height: 130px;}
.orgchart .node>.spinner {position: absolute;top: calc(50% - 15px);left: calc(50% - 15px);vertical-align: middle;font-size: 30px;color: rgba(68, 157, 68, 0.8);}
.orgchart .node:hover {background-color: rgb(133 133 133 / 13%);transition: .5s;cursor: default;z-index: 20;}
.orgchart .node.focused {background-color:  rgb(133 133 133 / 13%);}
.orgchart .ghost-node {position: fixed;left: -10000px;top: -10000px;}
.orgchart .ghost-node rect {fill: #ffffff;stroke: #bf0000;}
.orgchart .node.allowedDrop {border-color: rgba(68, 157, 68, 0.9);}
.orgchart .node .title {text-align: center;font-size: 14px;font-weight: bold; height: 20px;line-height: 22px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background-color: rgba(217, 83, 79, 0.8);color: #fff;-moz-border-radius: 4px 4px 0 0;-webkit-border-radius: 4px 4px 0 0;border-radius:5px; }
.orgchart.b2t .node .title {transform: rotate(-180deg);transform-origin: center bottom;}
.orgchart.l2r .node .title {transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);transform-origin: bottom center;width: 120px;}
.orgchart.r2l .node .title {transform: rotate(-90deg) translate(-40px, -40px);transform-origin: bottom center;width: 120px;}
.orgchart .node .title .symbol {float: left;margin-top: 4px;margin-left: 2px;}
.orgchart .node .content {box-sizing: border-box;width: 100%;height: 20px;font-size: 12px; font-weight: 500;line-height: 18px;border: 1px solid rgba(217, 83, 79, 0.8);-moz-border-radius: 0 0 4px 4px;-webkit-border-radius: 0 0 4px 4px;border-radius: 0 0 4px 4px;text-align: center;background-color: #fff;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.orgchart.b2t .node .content {transform: rotate(180deg);transform-origin: center top;}
.orgchart.l2r .node .content {transform: rotate(-90deg) translate(-40px, -40px) rotateY(180deg);transform-origin: top center;width: 120px;}
.orgchart.r2l .node .content {transform: rotate(-90deg) translate(-40px, -40px);transform-origin: top center;width: 120px;}
.orgchart .node .edge {font-size: 15px;position: absolute;color: rgba(68, 157, 68, 0.5);cursor: default;transition: .2s;}
.orgchart.noncollapsable .node .edge {display: none;}
.orgchart .edge:hover {color: #449d44;cursor: pointer;}

.orgchart .node .verticalEdge {width: calc(100% - 10px);width: -webkit-calc(100% - 10px);width: -moz-calc(100% - 10px);left: 5px;}
.orgchart .node .topEdge {top: -4px;}
.orgchart .node .bottomEdge {bottom: -4px;}
.orgchart .node .horizontalEdge {width: 15px;height: calc(100% - 10px);height: -webkit-calc(100% - 10px);height: -moz-calc(100% - 10px);top: 5px;}
.orgchart .node .rightEdge {right: -4px;}
.orgchart .node .leftEdge {left: -4px;}
.orgchart .node .horizontalEdge::before {position: absolute;top: calc(50% - 7px);}
.orgchart .node .rightEdge::before {right: 3px;}
.orgchart .node .leftEdge::before {left: 3px;}
.orgchart .node .toggleBtn {position: absolute;left: 5px;bottom: -2px;color: rgba(68, 157, 68, 0.6);}
.orgchart .node .toggleBtn:hover {color: rgba(68, 157, 68, 0.8);}
.oc-export-btn {display: inline-block;position: absolute;right: 5px;top: 5px;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;touch-action: manipulation;cursor: pointer;user-select: none;color: #fff;background-color: #5cb85c;border: 1px solid transparent;border-color: #4cae4c;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px; z-index:1;}
.oc-export-btn[disabled] {cursor: not-allowed;box-shadow: none;opacity: 0.3;}
.oc-export-btn:hover,.oc-export-btn:focus,.oc-export-btn:active  {background-color: #449d44;border-color: #347a34;}
.orgchart~.mask {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 999;text-align: center;background-color: rgba(0,0,0,0.3);}
.orgchart~.mask .spinner {position: absolute;top: calc(50% - 54px);left: calc(50% - 54px);color: rgba(255,255,255,0.8);font-size: 108px;}
.orgchart .node {transition: transform 0.3s, opacity 0.3s;}
.orgchart .slide-down {opacity: 0;transform: translateY(40px);}
.orgchart.l2r .node.slide-down, .orgchart.r2l .node.slide-down {transform: translateY(130px);}
.orgchart .slide-up {opacity: 0;transform: translateY(-40px);}
.orgchart.l2r .node.slide-up, .orgchart.r2l .node.slide-up {transform: translateY(-130px);}
.orgchart .slide-right {opacity: 0;transform: translateX(130px);}
.orgchart.l2r .node.slide-right, .orgchart.r2l .node.slide-right {transform: translateX(40px);}
.orgchart .slide-left {opacity: 0;transform: translateX(-130px);}
.orgchart.l2r .node.slide-left, .orgchart.r2l .node.slide-left {transform: translateX(-40px);}


#chart-container .orgchart .color1 .title { background-color:#333; color:#fff;}
#chart-container .orgchart .color1 .content { border-color:#333; background:#33333315;}
#chart-container .orgchart .color2 .title { background-color:#68b436; color:#fff;}
#chart-container .orgchart .color2 .content { border-color:#68b436; background:#68b43615;}
#chart-container .orgchart .color3 .title { background-color: #996633; color:#fff;}
#chart-container .orgchart .color3 .content { border-color: #996633; background:#99663315;}

#chart-container .orgchart .color4 .title { background-color: #e2c08c; color:#000;}
#chart-container .orgchart .color4 .content { border-color: #e2c08c; background:#e2c08c15;}
#chart-container .orgchart .color5 .title { background-color: #cc0066; color:#fff;}
#chart-container .orgchart .color5 .content { border-color: #cc0066; }