.workflow { position: relative; }

.workflow .table { border-collapse: collapse; width: 100%; text-align: center; vertical-align: middle }

.workflow .table td { border: 1px solid #617583; height: 70px; }

.workflow .summary td { height: 60px; }

.start, .end { padding: 0; height: 40px; }

.workflow-header { font-size: 18px; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; }

.workflow-info { font-size: 14px; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; text-align: left; padding-left: 5px; }

.flowchart { border-collapse: collapse; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; font-size: 12pt; }

.flowchart th { font-size: 18px; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; height: 60px; background: #BFBFBF }

.flowchart td { border: 1px solid #7F7F7F; box-sizing: border-box; padding: 0; text-align: center; }

.NodeName { font-size: 10pt; width: 85px; height: 40px; display: inline-block; word-wrap: break-word; text-align: center; margin-top: 5px; margin-left: 2px; box-sizing: border-box; }

.NodeName:hover { cursor: pointer; }

.Duty { font-size: 10pt; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; text-align: left; }

.approver-list { position: absolute; display: none; font-size: 10pt; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; }

.approver-list table { padding: 0; margin: 0; background: #eee; border: 2px solid #999; border-collapse: collapse }

.approver-list td { text-align: center; vertical-align: middle; padding: 6px 20px }

.approver-list thead { }

.approver-list tbody { background: #fff }

.approver-list td { border: 1px solid #617583; box-sizing: border-box; }

/*embed {*/
/*position: relative;*/
/*width: 100%;*/
/*float: left;*/
/*left: 150px;*/
/*box-sizing: border-box;*/
/*}*/

/*svg {*/
/*position: relative;*/
/*width: 85px;*/
/*float: left;*/
/*left: 150px;*/
/*box-sizing: border-box;*/
/*}*/

/*tspan {*/
/*display: flex;*/
/*}*/
.demo { /* for IE10+ touch devices */ touch-action: none; }

.workflow .window { border: 2px solid; box-shadow: 2px 2px 19px #aaa; -o-box-shadow: 2px 2px 19px #aaa; -webkit-box-shadow: 2px 2px 19px #aaa; -moz-box-shadow: 2px 2px 19px #aaa; -moz-border-radius: 0.5em; border-radius: 0.5em; opacity: 0.8; filter: alpha(opacity=80); width: 100px; height: 36px; line-height: 100%; cursor: pointer; text-align: center; z-index: 20; /*position: absolute;*/ /*background-color: #eeeeef;*/ color: black; font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; /*padding: 0.5em;*/ font-size: 12px; font-weight: 400; -webkit-transition: -webkit-box-shadow 0.15s ease-in; -moz-transition: -moz-box-shadow 0.15s ease-in; -o-transition: -o-box-shadow 0.15s ease-in; transition: box-shadow 0.15s ease-in; margin: 0 auto; display: table; }

.workflow .todo { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; }

.workflow .doing { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }


@keyframes gradientChange {
    100% { background: #e91e1e; }
}

.workflow .done { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }

.workflow .window strong { display: table-cell; vertical-align: middle; font-weight: 400; padding: 0 5px; }

.workflow .window:hover { box-shadow: 2px 2px 19px #222; -o-box-shadow: 2px 2px 19px #222; -webkit-box-shadow: 2px 2px 19px #222; -moz-box-shadow: 2px 2px 19px #222; opacity: 0.6; filter: alpha(opacity=90); border-color: #999; }

.workflow .active { border: 1px dotted green; }

.workflow .hover { border: 1px dotted red; }

.workflow ._jsPlumb_connector { z-index: 4; }

.workflow ._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel { z-index: 21; cursor: pointer; }

.workflow .aLabel { background-color: white; padding: 0.4em; font: 12px sans-serif; color: #444; z-index: 21; border: 1px dotted gray; opacity: 0.8; filter: alpha(opacity=80); cursor: pointer; }

.workflow .aLabel._jsPlumb_hover { background-color: #5C96BC; color: white; border: 1px solid white; }

/*.window._jsPlumb_connected {*/
/*border: 2px solid green;*/
/*}*/

.jsplumb-drag { border: 4px solid pink !important; }

path, ._jsPlumb_endpoint { cursor: pointer; }

._jsPlumb_overlay { background-color: transparent; }

.na_popup { text-align: center; width: 240px; height: 50px; line-height: 50px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: #1b1e21; background: #d6d8d9; border: 5px solid #c6c8ca; z-index: 10000; }


.mask { position: absolute; top: 0; filter: alpha(opacity=60); background-color: #ddd; z-index: 5000; left: 0; opacity: 0.5; -moz-opacity: 0.5; width: 100%; height: 100%; line-height: 100%; text-align: center; }