/* * jquery.flowchart - CSS definitions */ .flowchart-container {position:relative; overflow:hidden;} .flowchart-links-layer, .flowchart-operators-layer, .flowchart-temporary-link-layer {position:absolute; top:0px; left:0px; width:100%; height:100%;} .flowchart-operators-layer, .flowchart-temporary-link-layer {pointer-events:none;} .flowchart-temporary-link-layer {display:none;} .flowchart-link, .flowchart-operator {cursor:default;} .flowchart-operator-connector {position:relative; padding:0; display:none;} .flowchart-operator-connector-label {font-size:small; display:none;} .flowchart-operator-inputs .flowchart-operator-connector-label {margin-left:14px;} .flowchart-operator-outputs .flowchart-operator-connector-label {text-align:right; margin-right:5px;} .flowchart-operator-connector-arrow {width:0px; height:0px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid rgb(204, 204, 204); position:absolute; top:0px;} .flowchart-operator-connector-small-arrow {width:0px; height:0px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid transparent; position:absolute; top:5px; pointer-events:none;} .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border-left:10px solid rgb(153, 153, 153);} .flowchart-operator-inputs .flowchart-operator-connector-arrow {left:-1px;} .flowchart-operator-outputs .flowchart-operator-connector-arrow {right:-10px;} .flowchart-operator-inputs .flowchart-operator-connector-small-arrow {left:-1px;} .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {right:-7px;} .unselectable {-moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;} /* Default Operator */ .flowchart-operator {position:absolute; min-width:130px; max-width:400px; border:1px solid #d9d9d9 !important; background:#fff; pointer-events:auto; letter-spacing:0; box-shadow:3px 3px 10px rgba(0,0,0,0.12); border-radius:5px;} .flowchart-operator:hover {box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2);} .flowchart-operator.hover {border:1px solid #ff9908 !important; box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2); z-index:5000;} .flowchart-operator.hover .flowchart-operator-title {background:#f8f8f8;} .flowchart-operator.selected {border:1px solid #ff9908 !important; box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2);} .flowchart-operator .flowchart-operator-title {width:100%; padding:5px 35px 15px 42px; box-sizing:border-box; color:#333; font-size:13px; text-align:left; position:relative; height:auto; cursor:move; border-bottom:2px solid #666; border-radius:10px 10px 0 0; word-break:keep-all; letter-spacing:0; position:relative; border-radius:5px; font-weight:bold;} .flowchart-operator .flowchart-operator-subTitle {position:absolute; font-size:10px; font-weight:normal; left:42px; top:20px; color:#666;} .flowchart-operator .flowchart-operator-inputs-outputs {display:table; width:100%; margin-top:5px; margin-bottom:5px;} .flowchart-operator .flowchart-operator-inputs, .flowchart-default-operator .flowchart-operator-outputs {display:table-cell; width:50%; z-index:5;} /* * flowchart-vertical */ .flowchart-vertical .flowchart-operator-inputs, .flowchart-vertical .flowchart-operator-outputs {position:relative; text-align:center; display:table; width:100%;} .flowchart-vertical .flowchart-operator-connector-set {display:table-cell;} .flowchart-vertical .flowchart-operator-connector {position:relative; padding:0; display:block;} .flowchart-vertical .flowchart-operator-connector-label {position:relative; text-align:center; width:100%; display:none;} .flowchart-vertical .flowchart-operator-inputs .flowchart-operator-connector-label {margin-left:auto;} .flowchart-vertical .flowchart-operator-connector-arrow {border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #aaa; left:calc(50% - 10px); transition:0.2s;} .flowchart-vertical .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border-left-color:transparent; border-top-color:#ff9908;} .flowchart-vertical .flowchart-operator-connector-small-arrow {border-right:5px solid transparent; top:2px; left:calc(50% - 5px);} .flowchart-vertical .flowchart-operator-connector-arrow {top:-1px;} .flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-arrow {bottom:-20px; top:auto;} .flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {left:calc(50% - 5px); bottom:-12px; top:auto;} .flowchart-vertical .flowchart-operator .flowchart-operator-title {border-bottom:none; border-radius:3px 3px 0 0; color:#333; font-weight:bold;} .flowchart-vertical .flowchart-link rect {display:none;} /* * flowchart-operator-body */ .flowchart-operator-body {padding:5px; cursor:move;} /* ********** 추가 CSS ********** */ .flowchart-cdrs-container {height:400px; border:none; margin-bottom:0;} .flowchart-example pre {display:none;} #create_operator {margin-bottom:10px;} .flowchart-example-event {margin-top:10px; margin-bottom:10px; color:#3366FF;} #flowchart_data {width:100%; margin-top:20px; margin-bottom:40px; height:140px;} #operator_properties, #link_properties {display:none; margin-top:0px; margin-bottom:0px; border:4px solid; padding:7px;} #link_properties input {border:none;} #chart_container {width:100%; height:calc(100vh - 180px); overflow:hidden; background:repeating-linear-gradient(45deg,#efefef,#efefef 10px,#e0e0e0 10px,#e0e0e0 20px); border-radius:0; border:none;} #powerFlowArea {width:100%; height:calc(100vh - 180px); overflow:hidden; background:repeating-linear-gradient(45deg,#efefef,#efefef 10px,#e0e0e0 10px,#e0e0e0 20px); border-radius:0; border:none;} /* flow */ #link_properties {display:none; position:absolute; left:5px; top:-3px; padding:5px 8px; border:2px solid #01c9ca; border-radius:5px; background:transparent; box-shadow:3px 3px 3px rgba(0,0,0,0.2);} #operator_properties {display:none; position:absolute; left:5px; top:-3px; padding:5px 8px; border:2px solid #01c9ca; border-radius:5px; background:transparent; box-shadow:3px 3px 3px rgba(0,0,0,0.2);} .flow_new_btn {text-align:left;} .flow_new_btn button i {display:none;} .flowchart_area {height:600px; margin-top:10px; position:relative; width:100%; overflow:auto;} .flowchart_area #div_flowchart {width:100%; height:2000px; background:white; position:relative;} .flowchart_area #div_flowchart #link_properties {} .flowchart-operator .flowchart-operator-title:before {font-family:'Font Awesome 5 Free'; position:absolute; left:0; top:0; font-size:13px; color:#fff; font-weight:900; border-radius:5px 0 0 0; width:30px; height:40px; padding-top:11px; content:"\f0fa"; background:#666; text-align:center;} /* 추출설정 */ .node_start.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #00a361;} .node_start.flowchart-operator .flowchart-operator-title:before {background:#00a361; content:"\f144";} /* 양식선택 */ /* .node_form.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #f37021;} .node_form.flowchart-operator .flowchart-operator-title:before {background:#f37021; content:"\f15c";} */ .node_form.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #255c8a;} .node_form.flowchart-operator .flowchart-operator-title:before {background:#255c8a; content:"\f15c";} /* 집합 */ .node_set.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #5bc0de;} .node_set.flowchart-operator .flowchart-operator-title:before {background:#5bc0de; content:"\f029";} /* 메모 */ .node_memo.flowchart-operator .flowchart-detail {display:none;} .node_memo.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #8b5faa;} .node_memo.flowchart-operator .flowchart-operator-title:before {background:#8b5faa; content:"\f044";} .node_memo.flowchart-operator .tooltiptext {display:none;} .node_memo.flowchart-operator textarea {max-width:389px; width:200px; height:100px; border:1px solid transparent;} .node_memo.flowchart-operator textarea:focus {border:1px solid #d9d9d9; outline:0;} /* 메모-테이블관계도용 */ .node_memo_table.flowchart-operator .flowchart-detail {display:none;} .node_memo_table.flowchart-operator .flowchart-operator-title {padding:10px 15px; color:#333; background:#f8f8f8; font-size:13px; cursor:default; border-bottom:1px solid #d9d9d9; border-radius:0; font-weight:bold;} .node_memo_table.flowchart-operator .flowchart-operator-title:before {display:none;} .node_memo_table.flowchart-operator .flowchart-operator--subTitle {display:none;} .node_memo_table.flowchart-operator .tooltiptext {display:none;} .node_memo_table.flowchart-operator textarea {max-width:388px; width:200px; height:100px; border:1px solid transparent;} .node_memo_table.flowchart-operator textarea:focus {border:1px solid #d9d9d9; outline:0;} /* 조건필터 .node_filter.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #255c8a;} .node_filter.flowchart-operator .flowchart-operator-title:before {background:#255c8a; content:"\f0b0";} */ /* 출력설정 */ .node_end.flowchart-operator .flowchart-operator-title {border-bottom:2px solid #e24325;} .node_end.flowchart-operator .flowchart-operator-title:before {background:#e24325; content:"\f28d";} /* 노드 기능 수정 */ .flowchart-operator.node_intent .flowchart-operator-inputs {display:none;} .flowchart-operator.node_intent .flowchart-operator-outputs {width:100%;} .flowchart-operator.node_answer .flowchart-operator-inputs {width:100%;} .flowchart-operator.node_answer .flowchart-operator-outputs {display:none;} button.flowchart-detail {position:absolute; top:9px; right:9px; padding:0; margin:0; background:none; display:inline-block; color:#999; border:none; z-index:1; font-size:13px;} button.flowchart-detail:hover {color:#ff9908;} /* 플로우차트 오퍼레이터 아이콘 추가 */ .flowchart-operator span.flowchart-icon {position:absolute; top:8px; left:7px; z-index:1; width:15px; height:15px; text-align:right; color:#333; font-family:'Font Awesome 5 Free'; font-style:normal; font-weight:900; text-decoration:inherit;} /* 팝업 공통 */ .layerCon .popContents .pop_flow .x_title_pop h1.title {padding:8px 10px; text-align:center; margin:0; font-size:15px; color:#fff; background:#15699e; border:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} /* Tooltip */ [data-tooltip-text]:hover {position:relative;} [data-tooltip-text]:after {background-color:rgba(0, 0, 0, 0.7); -webkit-transition:bottom .3s ease-in-out, opacity .3s ease-in-out; -moz-transition:bottom .3s ease-in-out, opacity .3s ease-in-out; transition:bottom .3s ease-in-out, opacity .3s ease-in-out; -webkit-box-shadow:0px 0px 3px 1px rgba(50, 50, 50, 0.4); -moz-box-shadow:0px 0px 3px 1px rgba(50, 50, 50, 0.4); box-shadow:0px 0px 3px 1px rgba(50, 50, 50, 0.4); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; color:#FFFFFF; font-size:12px; margin-bottom:10px; padding:7px 12px; position:absolute; width:auto; min-width:200px; max-width:300px; word-wrap:break-word; word-break:keep-all; z-index:9999; opacity:0; left:-9999px; top:0; content:attr(data-tooltip-text);} [data-tooltip-text]:hover:after {top:0; left:calc(100% + 10px); opacity:1;} .flowchart-operator-info {padding:5px 10px 2px 5px;} .flowchart-operator-info ul {padding:0; margin:0;} .flowchart-operator-info ul li {padding:0 0 0 8px; margin:0 0 2px 0; list-style:none; font-size:11px; line-height:15px; position:relative;} .flowchart-operator-info ul li:before {position:absolute; left:0; top:5px; content:""; diplay:block; width:3px; height:3px; border-radius:50%; background:#ccc;} /* 차트 기본 설정 */ #userForm {width:4000px; height:2000px; background:#f5f5f5;} #userForm:before {content:""; width:4000px; height:2000px; display:block; position:absolute; top:50%; left:50%; margin:-1000px 0 0 -2000px; background:url("/images/common/flow_grid_model.png") repeat left top; opacity:0.7;} #tableRelation {width:4000px; height:2000px; background:#f5f5f5;} #tableRelation:before {content:""; width:4000px; height:2000px; display:block; position:absolute; top:50%; left:50%; margin:-1000px 0 0 -2000px; background:url("/images/common/flow_grid_model.png") repeat left top; opacity:0.7;} #powerForm {width:4000px; height:2000px; background:#f5f5f5;} #powerForm:before {content:""; width:4000px; height:2000px; display:block; position:absolute; top:50%; left:50%; margin:-1000px 0 0 -2000px; background:url("/images/common/flow_grid_model.png") repeat left top; opacity:0.7;} /* Tooltip container */ #userForm .tooltip {display:inline-block; opacity:1;} #operatorsItems .tooltip {display:none;} #userForm .tooltip .tooltiptext {visibility:hidden; position:absolute; width:574px; background:rgba(0,0,0,0.6); color:#fff; text-align:center; padding:7px 8px 2px; border-radius:6px; z-index:1; opacity:0; transition:opacity 0.3s;} #userForm .tooltip:hover .tooltiptext {visibility:visible; opacity:1;} .flowchart-operator.tooltip.ui-draggable-dragging:hover .tooltiptext {display:none;} #userForm .tooltip-right {top:0px; left:110%;} #userForm .tooltip-right::after {content:""; position:absolute; top:20px; right:100%; margin-top:-5px; border-width:5px; border-style:solid; border-color:transparent rgba(0,0,0,0.6) transparent transparent;} #userForm .tooltip-bottom {top:135%; left:50%; transform:translate(-50%,0);} #userForm .tooltip-bottom::after {content:""; position:absolute; bottom:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:transparent transparent rgba(0,0,0,0.6) transparent;} #userForm .tooltip-top {bottom:125%; left:50%; transform:translate(-50%,0);} #userForm .tooltip-top::after {content:""; position:absolute; top:100%; left:50%; margin-left:-5px; border-width:5px; border-style:solid; border-color:rgba(0,0,0,0.6) transparent transparent transparent;} #userForm .tooltip-left {top:0px; bottom:auto; right:110%;} #userForm .tooltip-left::after {content:""; position:absolute; top:20px; left:100%; margin-top:-5px; border-width:5px; border-style:solid; border-color:transparent transparent transparent rgba(0,0,0,0.6);} /* 툴팁-필터타입 리스트 */ #userForm .tooltip ul.tooltiptype_lst {padding:5px 0 0; margin:0; overflow:hidden;} #userForm .tooltip ul.tooltiptype_lst li {list-style:none; padding:0; margin:0; width:134px; margin-bottom:3px; text-align:left; float:left; margin-right:7px;} #userForm .tooltip ul.tooltiptype_lst li:nth-child(4n) {margin-right:0;} #userForm .tooltip ul.tooltiptype_lst li:last-child {margin-bottom:0;} /* Tooltip container */ #tableRelation .tooltip {display:inline-block; opacity:1;} #tableRelation .flowchart-operator-connector {display:block;} #tableRelation .flowchart-detail {display:none;} /* * jquery.flowchart - CSS definitions */ #tableRelation .flowchart-operator {border-radius:25px;} #tableRelation .flowchart-operator-inputs-outputs {position:absolute; top:10px; padding:0; margin:0;} #tableRelation .flowchart-operator-inputs {left:0;} #tableRelation .flowchart-operator-outputs {right:0;} #tableRelation .flowchart-operator-connector-arrow {width:0px; height:0px; border:8px solid #bbb; position:absolute; top:0px; right:-9px; transition:0.2s; border-radius:50%;} #tableRelation .flowchart-operator-connector-small-arrow {width:0px; height:0px; position:absolute; top:5px; right:-4px; border-radius:50%; border:3px solid #fff !important;} #tableRelation .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border:8px solid #ff9908;} #tableRelation .flowchart-operator-inputs .flowchart-operator-connector-arrow {right:0; left:-8px;} #tableRelation .flowchart-operator-inputs .flowchart-operator-connector-small-arrow {right:0; left:-3px;} #tableRelation .flowchart-operator .flowchart-operator-title {border-radius:3px 3px 0 0;} /* 화살표 방향 */ #tableRelation .flowchart-operator.input-arrow .flowchart-operator-inputs .flowchart-operator-connector-arrow:before {content:""; position:absolute; top:-10px; left:-18px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid #bbb;} #tableRelation .flowchart-operator.output-arrow .flowchart-operator-outputs .flowchart-operator-connector-arrow:before {content:""; position:absolute; top:-10px; left:8px; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #bbb;} #tableRelation .flowchart-operator .flowchart-operator-title {padding:10px 15px; color:#333; background:#f8f8f8; font-size:13px; cursor:default; border-bottom:1px solid #d9d9d9; border-radius:0;} #tableRelation .flowchart-operator .flowchart-operator-title:before {display:none;} #tableRelation .flowchart-operator .flowchart-operator-subTitle {display:none;} /* flow hover 버튼 */ .flowchart-operator .flowchart-hover-btn {opacity:0; transition:0.2s; position:absolute; left:117px; top:-12px; z-index:100;} #userForm .flowchart-operator .flowchart-hover-btn {width:66px; height:73px;} #powerFlowArea .flowchart-operator .flowchart-hover-btn {left:50px; top:-12px;} .flowchart-operator:hover .flowchart-hover-btn {opacity:1;} .flowchart-operator .flowchart-hover-btn button.flow_btn {width:24px; height:24px; line-height:22px; border-radius:12px; border:1px solid #ccc; text-align:center; background:#fff; outline:0; transition:0.3s; padding:0; margin:0; position:absolute;} .flowchart-operator .flowchart-hover-btn button.flow_btn i {font-size:10px; color:#333; position:relative; top:-1px; transition:0.3s;} .flowchart-operator .flowchart-hover-btn button.flow_btn:hover {background:#8b5faa;} .flowchart-operator .flowchart-hover-btn button.flow_btn:hover i {color:#fff;} .flowchart-operator .flowchart-hover-btn button.flow_btn:nth-child(1) {left:10px; top:2px;} .flowchart-operator .flowchart-hover-btn button.flow_btn:nth-child(2) {left:36px; top:2px;} .flowchart-operator .flowchart-hover-btn button.flow_btn:nth-child(3) {left:23px; top:24px;} .flowchart-operator .flowchart-hover-btn button.flow_btn:nth-child(4) {left:50px; top:24px;} .flowchart-operator .flowchart-hover-btn button.flow_btn:nth-child(5) {left:10px; top:46px;} .flowchart-operator .flowchart-hover-btn button.flow_btn:nth-child(6) {left:36px; top:46px;} /* 메모 호버버튼 수정 */ .flowchart-operator.node_memo .flowchart-hover-btn {left:auto; right:-22px; top:-14px;} .flowchart-operator.node_memo .flowchart-hover-btn button.flow_btn {display:none;} .flowchart-operator.node_memo .flowchart-hover-btn button.flow_btn:nth-child(3) {display:block;} /* 파워유저용 CSS */ #powerFlowArea {position:relative;} #powerFlowArea .flowchart-operator-connector {display:block;} #powerFlowArea .flowchart-operator-connector-label {display:none;} #powerFlowArea .flowchart-operator-inputs-outputs {position:absolute; top:16px; right:26px; padding:0; margin:0; width:48px; height:0;} #powerFlowArea .flowchart-operator-inputs {left:0;} #powerFlowArea .flowchart-operator-outputs {right:0;} #powerFlowArea .flowchart-operator-connector-arrow {opacity:0;} #powerFlowArea .flowchart-operator-connector-small-arrow {top:4px;} #powerFlowArea .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {right:-13px;} #powerFlowArea .flowchart-operator .flowchart-operator-subTitle {left:0; top:72px; width:100px; line-height:20px; white-space:nowrap;} #powerFlowArea .flowchart-operator {width:50px; height:50px; min-width:100px; max-width:100px; box-shadow:none; background:none; border:none !important; text-align:center;} #powerFlowArea .flowchart-operator .flowchart-operator-inputs-outputs {margin:0;} #powerFlowArea .flowchart-operator .flowchart-operator-title {width:100px; height:50px; display:inline-block; padding:40px 0 0; text-align:center; line-height:50px; border-radius:25px; background:none; border:none; white-space:nowrap; position:relative; border-width:3px; margin-right:-13px;} #powerFlowArea .flowchart-operator .flowchart-operator-title:before {font-family:'Font Awesome 5 Free'; position:absolute; left:25px; top:0; font-size:25px; color:#fff; font-weight:900; box-shadow:3px 3px 10px rgba(0,0,0,0.12); border-radius:25px; width:50px; height:50px; line-height:50px; padding-top:0; content:"\f0ce"; background:#aaa; text-align:center; border:1px solid transparent;} #powerFlowArea .flowchart-operator .flowchart-operator-title span{cursor: text;} #powerFlowArea .flowchart-operator .flowchart-operator-title input{width: 100%; height:25px;} #powerFlowArea .flowchart-operator.color_0 .flowchart-operator-title:before {background:#aaaaaa;} #powerFlowArea .flowchart-operator.color_1 .flowchart-operator-title:before {background:#859ae0;} #powerFlowArea .flowchart-operator.color_2 .flowchart-operator-title:before {background:#50bbdc;} #powerFlowArea .flowchart-operator.color_3 .flowchart-operator-title:before {background:#e38696;} #powerFlowArea .flowchart-operator.color_4 .flowchart-operator-title:before {background:#eec050;} #powerFlowArea .flowchart-operator.color_5 .flowchart-operator-title:before {background:#5cb85c;} #powerFlowArea .flowchart-operator.color_6 .flowchart-operator-title:before {background:#32d1c4;} #powerFlowArea .flowchart-operator.color_7 .flowchart-operator-title:before {background:#d789d1;} #powerFlowArea .flowchart-operator.color_8 .flowchart-operator-title:before {background:#6391c6;} #powerFlowArea .flowchart-operator.color_9 .flowchart-operator-title:before {background:#e69c7c;} #powerFlowArea .flowchart-operator.node_table .flowchart-operator-title:before {content:"\f0ce";} #powerFlowArea .flowchart-operator.node_upload .flowchart-operator-title:before {content:"\f093";} #powerFlowArea .flowchart-operator.node_myform .flowchart-operator-title:before {content:"\f658";} #powerFlowArea .flowchart-operator.node_end .flowchart-operator-title:before {content:"\f04d"; background:#e24325;} #powerFlowArea .flowchart-operator.node_end .flowchart-hover-btn {/* display:none; */} #powerFlowArea .flowchart-operator.node_memo .flowchart-hover-btn {display:none;} #powerFlowArea .flowchart-operator.node_result .flowchart-operator-title:before {content:"";} #powerFlowArea .flowchart-operator.node_result.join_inner .flowchart-operator-title:before {background:#fff url(/images/icon/union_inner.png) no-repeat center center;} #powerFlowArea .flowchart-operator.node_result.join_left .flowchart-operator-title:before {background:#fff url(/images/icon/union_left.png) no-repeat center center;} #powerFlowArea .flowchart-operator.node_result.join_right .flowchart-operator-title:before {background:#fff url(/images/icon/union_right.png) no-repeat center center;} #powerFlowArea .flowchart-operator.node_result.set_difference .flowchart-operator-title:before {background:#fff url(/images/icon/set_difference.png) no-repeat center center;} #powerFlowArea .flowchart-operator.node_result.set_intersection .flowchart-operator-title:before {background:#fff url(/images/icon/set_intersection.png) no-repeat center center;} #powerFlowArea .flowchart-operator.node_result.set_symmetric_difference .flowchart-operator-title:before {background:#fff url(/images/icon/set_symmetric_difference.png) no-repeat center center;} #powerFlowArea .flowchart-operator.node_result.set_universal .flowchart-operator-title:before {background:#fff url(/images/icon/set_universal.png) no-repeat center center;} /* 검증이 필요한 노드 */ #powerFlowArea .flowchart-operator.need_verify:after {content:""; width:56px; height:56px; border-radius:28px; position:absolute; left:29px; top:-3px; position:absolute; z-index:10; border:5px solid #f33155; -moz-animation:heartbit 1s ease-out; -moz-animation-iteration-count:infinite; -o-animation:heartbit 1s ease-out; -o-animation-iteration-count:infinite; -webkit-animation:heartbit 1s ease-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite;} #powerFlowArea .flowchart-operator.need_verify .flowchart-operator-title:after {content:"\f129"; display:block; width:20px; height:20px; border-radius:10px; font-family:'Font Awesome 5 Free'; font-size:14px; text-align:center; line-height:20px; color:#fff; background:#e24325; position:absolute; left:58px; top:-2px; z-index:11;} /* 노드 클론 용 */ #table.flowchart-operator {width:50px; height:50px; min-width:100px; max-width:100px; box-shadow:none; background:none; border:none !important; text-align:center;} #table.flowchart-operator .flowchart-operator-title {width:100px; height:50px; display:inline-block; padding:40px 0 0; text-align:center; line-height:50px; border-radius:25px; background:none; border:none; white-space:nowrap; position:relative; border-width:3px; margin-right:-13px;} #table.flowchart-operator .flowchart-operator-title:before {font-family:'Font Awesome 5 Free'; position:absolute; left:25px; top:0; font-size:25px; color:#fff; font-weight:900; box-shadow:3px 3px 10px rgba(0,0,0,0.12); border-radius:25px; width:50px; height:50px; line-height:50px; padding-top:0; content:"\f0ce"; background:#aaa; text-align:center; border:1px solid transparent;} #table.flowchart-operator .flowchart-operator-title span{cursor: text;} #table.flowchart-operator .flowchart-operator-title input{width: 100%; height:25px;} #table.flowchart-operator .flowchart-operator-subTitle {left:0; top:72px; width:100px; line-height:20px; white-space:nowrap;} @-moz-keyframes heartbit { 0% {-moz-transform:scale(1); opacity:0.0;} 25% {-moz-transform:scale(1.05); opacity:0.4;} 50% {-moz-transform:scale(1.1); opacity:0.8;} 75% {-moz-transform:scale(1.05); opacity:0.4;} 100% {-moz-transform:scale(1); opacity:0.0;} } @-webkit-keyframes heartbit { 0% {-webkit-transform:scale(1); opacity:0.0;} 25% {-webkit-transform:scale(1.05); opacity:0.4;} 50% {-webkit-transform:scale(1.1); opacity:0.8;} 75% {-webkit-transform:scale(1.05); opacity:0.4;} 100% {-webkit-transform:scale(1); opacity:0.0;} } #powerFlowArea .flowchart-operator.need_verify1 .flowchart-operator-title:after {content:""; width:56px; height:56px; border-radius:28px; animation:spin 10s linear infinite; position:absolute; left:22px; top:-3px; border:3px dashed #e24325;} @keyframes spin {100% {transform:rotateZ(360deg);}} #powerFlowArea .flowchart-operator.need_verify2 .flowchart-operator-title:after {content:""; width:56px; height:56px; border-radius:34px; position:absolute; left:22px; top:-3px; animation: rotateThis 2s linear infinite; box-shadow: 0 3px 3px 0 rgba(235, 76, 76, 0.25), 0 -3px 3px 0 rgba(239, 177, 27, 0.25), 3px 0 3px 0 rgba(233, 40, 40, 0.25), -3px 0 3px 0 rgba(243, 148, 13, 0.25), 3px -3px 3px 0 rgba(237, 74, 113, 0.5), -3px 3px 3px 0 rgba(237, 74, 113, 0.5), 3px 3px 3px 0 rgba(255, 105, 180, 0.75), -3px -3px 3px 0 rgba(225, 191, 55, 0.75); transform:rotate(.001deg); -webkit-transform:rotate(.001deg);} @keyframes rotateThis { from {transform: rotate(0deg) scale(1);} to {transform: rotate(360deg) scale(1);} } #powerFlowArea .flowchart-operator-body {padding:0; position:absolute; left:0; top:0; text-align:left;} #powerFlowArea .flowchart-operator-body .dropdown {position:absolute; left:85px; top:56px;} #powerFlowArea .flowchart-operator-body .dropdown .dropdown-menu {min-width:70px;} #powerFlowArea ul.create_node_btn {position:absolute; right:0; top:0; background:#fff; border:1px solid #ccc; border-right:0; border-top:0; border-radius:0 0 0 10px; margin:0; padding:5px 8px;overflow:hidden;} #powerFlowArea ul.create_node_btn li {list-style:none; padding:0; margin:0; float:left;} #powerFlowArea ul.create_node_btn li button.btn {padding-left:26px; position:relative; height:21px;} #powerFlowArea ul.create_node_btn li button.btn i {position:absolute; left:-1px; top:-1px; width:21px; height:21px; padding:0; text-align:center; font-size:10px; color:#fff; line-height:20px;} #powerFlowArea ul.create_node_btn li button.btn.create_node_memo {margin-right:5px;} #powerFlowArea ul.create_node_btn li button.btn.create_node_memo i {background:#8b5faa;} #powerFlowArea ul.create_node_btn li button.btn.create_node_end i {background:#e24325;} #powerFlowArea ul.create_node_btn li button.btn.create_pivot_task i {background:#8ae322;} #powerFlowArea ul.create_node_btn li button.btn.excute_task i {background:#28905b; margin-left: 4px;} #powerFlowArea ul.create_node_info {position:absolute; left:0; top:0; background:#fff; border:1px solid #ccc; border-left:0; border-top:0; border-radius:0px 0px 10px 0px; margin:0; padding:5px 8px;overflow:hidden;} #powerFlowArea ul.create_node_info li {list-style:none; padding:0; margin:0; float:left;} #powerFlowArea ul.create_node_info li button.btn {padding-left:26px; position:relative; height:21px; cursor:default;} #powerFlowArea ul.create_node_info li button.btn i {position:absolute; left:-1px; top:-1px; width:21px; height:21px; padding:0; text-align:center; font-size:10px; color:#fff; line-height:20px;} #powerFlowArea ul.create_node_info li button.btn.package_info {margin-right:5px;} #powerFlowArea ul.create_node_info li button.btn.package_info i {background:#53a0d0;} #powerFlowArea ul.create_node_info li button.btn.form_info i {background:#999;} /* 공통 hover 및 선택 효과 */ #powerFlowArea .flowchart-operator:hover .flowchart-operator-title:before {box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2);} #powerFlowArea .flowchart-operator.hover .flowchart-operator-title:before {border:1px solid #ff9908 !important; box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2); z-index:1;} #powerFlowArea .flowchart-operator.selected .flowchart-operator-title:before {border:1px solid #ff9908 !important; box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2);} #powerFlowArea .flowchart-operator.node_memo.hover .flowchart-operator-title:before {border:1px solid transparent !important; box-shadow:none;} #powerFlowArea .flowchart-operator.node_memo.selected .flowchart-operator-title:before {border:1px solid transparent !important; box-shadow:none;} /* 메모 */ #powerFlowArea .flowchart-operator.node_memo {width:auto; height:auto; min-width:130px; max-width:500px; border:1px solid #d9d9d9 !important; background:rgba(255,255,255,0.9);z-index: 99999999; box-shadow:3px 3px 10px rgba(0,0,0,0.12); text-align:left;} #powerFlowArea .flowchart-operator.node_memo:hover {box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2);} #powerFlowArea .flowchart-operator.node_memo.hover {border:1px solid #ff9908 !important; box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2); z-index:5000;} #powerFlowArea .flowchart-operator.node_memo.selected {border:1px solid #ff9908 !important; box-shadow:3px 6px 15px rgba(0, 0, 0, 0.2);} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-title {width:100%; height:auto; display:block; padding:5px 10px 5px 38px; text-align:left; line-height:inherit; border-radius:10px 10px 0 0; border-bottom:2px solid #8b5faa; font-weight:normal;} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-title:before {left:0; top:0; font-size:13px; box-shadow:none; border-radius:5px 0 0 0; width:30px; height:30px; padding-top:5px; content:"\f044"; background:#8b5faa; line-height:21px;} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-subTitle {left:42px; top:20px; width:auto; line-height:16px;} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-body {padding:5px; position:relative;} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-body button.remove_memo {position:absolute; right:-5px; top:-31px; border:none; background:none; color:#999; transition:0.2s;} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-body button.remove_memo:hover {color:#e24325;} #powerFlowArea .flowchart-operator.node_memo .flowchart-operator-body textarea {background:rgba(255,255,255,0.7);}