.field-label__workflow{color:#097c25;}

/* #uf_con_htxx{left:60px;}
#uf_con_htfk{top:250px;left:360px;}#jsPlumb_2_23{top:168px !important;left:640px !important;}
#uf_con_htgj{top:250px;left:660px;}#jsPlumb_2_24{top:168px !important;left:940px !important;}
#uf_con_htsp{top:250px;left:960px;}#jsPlumb_2_25{top:168px !important;left:1240px !important;}
#uf_con_htbg{top:250px;left:1260px;}#jsPlumb_2_26{top:168px !important;left:1540px !important;}
#uf_con_htfx{top:250px;left:1560px;}#jsPlumb_2_27{top:168px !important;left:1840px !important;}
#uf_con_htxx_workflow{top:250px;left:60px;}#jsPlumb_2_28{background-color:#fff;} */


*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-size: 12px;
}

.hide { display: none}
.jtk-dragging {
  user-select: none;
}
.jtk-demo-header {
  position: relative;
  background: #335285;
  padding: 15px;
  font-size: 14px;
  color: #fff;
  height: 50px;
  z-index: 10;
}
.jtk-demo-header .actions {
  position: absolute;
  top: 16px;
  right: 15px;
}
.jtk-demo-header .icon {
  margin-left: 5px;
}
.jtk-demo-main {
  position: relative;
  margin-top: -50px;
  padding-top: 50px;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 9;
}

.jtk-app-info {
  margin: 30px 60px;
}
.jtk-app-info .desc {
  margin: 0;
  color: #444;
  font-weight:200;
}
.jtk-app-info .app-name {
  position: relative;
  font-size: 22px;
  padding-bottom: 20px;
  font-weight:400;
}
.jtk-app-info .app-name:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 42px;
  background: #444;
}

.table-diagram {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  cursor: grab;
}
.jtk-table-content {
  position: relative;
  width: 50px;
  height: 50px;
  transform-origin: 0px 0px 0px;
}
.jtk-miniview {
  position: absolute;
  bottom: 25px;
  right: 25px;
  overflow: hidden !important;
  width: 125px;
  height: 125px;
  background-color: transparent;
  border: 2px solid #d4d8dc;
  border-radius: 4px;
  opacity: 0.8;
  background: #fff;
  z-index: 2003;
}
.icon {
  height: 20px;
  width: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}
.icon-help {
  background-image: url(../img/icon/help.png)
}
.icon-close {
  background-image: url(../img/icon/close.png)
}
/** ELEMENTS **/
.table {
  position: absolute;
  width: 260px;
  font-family: microsoft yahei;
  background-color: white;
  z-index: 24;
  color: black;
  cursor: move;
  border: 1px solid #6a005f;
  box-shadow:1px 1px 5px #ccc;
}
.af .table li,
.kf .table .jtk-source,
.kf .table .jtk-target,
.af .table.workflow li {
  display: block;
}
.table.workflow {
  border-color: #097c25;
}
.table.workflow header {
  background: #097c25;
}
.table header {
  padding: 8px 12px;
  background: #6a005f;
  color: #fff;
}
.table header span{opacity:0.5;font-size:11px;}
.table h4 {
  margin: -1px;
  padding: 0;
  font-size: 12px;
  font-weight:400;
}
.table h4 input {
    background-color:#6a005f;
    border: 1px solid transparent;
    color:#ffffff;
    font-size:13px;
    outline: none;
}
.table h4 input:focus {
    border: 1px solid #ddd;
}
.table h4 input[readonly]:focus {
    border: 1px solid transparent;
}
.table ul {
  margin: 0;
  padding: 0;
}
.table ul li:first-child {
  border-top: 1px dashed #dfdfdf;
}
.table header + ul {
  padding: 5px 0px;
}
.table header + ul li:first-child {
  border-top: none;
}
.table li {
  padding: 2px 12px;
  display: none;
}
.table li span {
  display: inline-block;
  width: 50%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  padding-right: 10px;
}
.table:hover {
  box-shadow:3px 3px 5px #ccc;
  opacity:0.9;
}
.table .icon {
  position: absolute;
  background-image: url(../img/icon/component.png);
  right: 12px;
  top: 12px;
  cursor: pointer;
}
.table .icon.active,
.table .icon:hover {
  background-image: url(../img/icon/menu.png);
}
.table.workflow .icon {
  background-image: url(../img/icon/workflow.png)
}
.table-diagram .field-label {
  color: #6a005f;
  padding: 2px 7px;
  border: 1px solid #6a005f;
  background-color:#f0e5ef;
  border-radius: 2px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-diagram .field-label.jtk-hover {
  background: #fff;
}

.jtk-miniview > div {
  position: relative;
  transform-origin: 0px 0px 0px;
}
.jtk-miniview .table {
  background: #6a005f;
}
.jtk-miniview .table.workflow {
  background: #097c25;
}
.jtk-miniview .jtk-miniview-panner {
  position: absolute;
  opacity: 0.4;
  background-color: rgb(79, 111, 126);
  cursor: move;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.jtk-demo-menu {
  list-style:none;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 5px 0;
  min-width: 128px;
  display: none;
  background: #fff;
  color: #666;
  box-shadow: 2px 2px 10px #aaa;
  z-index: 999;
}
.jtk-demo-menu li {
  padding: 5px 10px;
  cursor: pointer;
}
.jtk-demo-menu .divide {
  padding: 3px 0;
  border-top: 1px solid #eee;
}
.jtk-demo-menu .divide:hover {
  background: #fff;
}
.jtk-demo-menu li:hover {
  background: #335285;
  color: #fff;
}
.jtk-demo-menu.af .all-field,
.jtk-demo-menu.kf .key-field {
  display: block;
}
.jtk-demo-menu .all-field,
.jtk-demo-menu .key-field {
  display: none;
}

.jtk-endpoint {
  z-index: 2001;
  cursor: pointer;
}
.jtk-hover {
  z-index: 2002;
}