body{margin: 0px;left: 0px;font-family:"微软雅黑";line-height: 20px;}
input{ outline:none;}
.area{margin-left:10px;margin-top:20px;}
.fl-btn{border-radius:5px;background:#eee;border: none;height: 24px;margin-left:8px;}
.top{height: 50px;width: 100%;background:#E5F0F8; border:none;border-bottom:1px solid #AED0EA; overflow:hidden;}
.top_panel{float: left;margin-left:22px;margin-top: 14px}
.top_panel input{ cursor:pointer;}
.top_panel input:hover{ background:#E5F0F8; color:#fff;}
.middle_panel{float: left;margin-left:40px;	margin-top: 14px;}

/* tabs*/
#tabs {width:208px;height:35px; padding:10px 0 0 20px; margin:0px; display:inline; float:left; border-bottom:#999 solid 1px;overflow: hidden;}
#tabs li {float: left;}
#tabs a { width:40px;text-align:center;text-decoration:none;float: left;position: relative;margin: 0 10px; height:25px;line-height:25px;background:#B9B9B9; color:#fff;}
#tabs a:hover{ background:#2AC7E1;}
#tabs #current {z-index: 3; background:#333;}
#content { width:218px; height:auto;background: #fff; margin-top:20px; float:left; margin-left:10px; display:inline;}

.chart-design{bottom: 22px;top: 52px;left:240px;width: auto;}
.chart-design-graph{overflow:scroll; bottom: 22px;top: 0px;width: auto;position:relative;background-image: url("images/jsplumb-grid.png");background-repeat:repeat;}
.chart-left-panel { 
    border: 2px solid #ccc; 
    bottom: 0; 
    float: left; 
    left: 26px; 
    top: 45px; 
    width: 6%;
    height: 600px;
    background: #FAFAFA;
    border-radius: 2px;
}
.chart-right-panel{
    border: 1px #ccc; 
    float: left;
    width: 94%;
    border-right: 2px solid #ccc; 
    overflow:hidden;
    height:600px;
}
.chart-left-row { margin-left: 10px;}
.icon-row {margin-left:5px;}

.btn{width: 90px;}
.btn-info{
    background-color: #49afcd;
    margin-right:5px;
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.draggable{float: left;width: 42px;height: 28px; margin-top: 3px; margin-bottom:10px; background: rgb(255,255,255); text-align: center; border:2px solid rgb(136,242,75); font-size: 14px; padding-top: 5px; padding-bottom: 5px; padding-left: 0px; margin-right: 10px; margin-bottom: 20px; font-size: 12px; }
.draggable:hover{cursor:pointer;}
.droppable{margin-top: 0px;padding-left: 0px;}
.drop-active{background: rgb(238,238,238);}
.roundedRect{border-radius: 8px;}
.roundedDiamond{border-radius: 6px;}
.circle{height: 30px;width: 30px;border-radius: 15px;padding: 0px;}
.rhombus{padding: 0px;width: 30px;height: 30px;margin-top: 12px;margin-left: 18px;font-size: 12px;-webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-o-transform-origin: 0 100%;-ms-transform-origin: 0 100%;transform-origin: 0 100%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);	-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.image-part-activity{border:1px solid #346789;margin-left:10px; margin-top: 10px;}
.image-part-event{border:1px solid yellowgreen;margin-left:16px;}
.image-part-gateway{border:1px solid #346789;margin-left:32px; margin-top: 20px;}

/*属性面板*/
.chart-list{
	color: rgb(136,136,136);
	font-size: 14px;
	margin-top: 19px;
}

.chart-list h4 {
  background:#F8F8F8;
  border-bottom: 1px solid rgb(210, 209, 210);
  border-top: 1px solid rgb(210, 209, 210);
  font-weight: lighter;
  height: 20px;
  margin-top: -20px;
  padding-left: 10px;
  padding-top: 4px;
}

.chart-list h4:hover{
	background: rgb(238,238,238);
	cursor: pointer;
     color:#000;
}

.chart-list .list-content{
	color: rgb(69,69,69);
	margin-top: -20px;
	padding-left: 10px;
	padding-top: 5px;
	margin-bottom: 22px;
}

.draggable {cursor: move}
.a_tit {
    width: 100px;
    height: auto;
    text-align: right;
    float: left;
    margin-right: 2px;
}
.bcxj{width:340px; height:70px; line-height:22px; font-size:14px; color:#666; float:left; border:#D3D3D3 solid 1px; font-family:"微软雅黑"; overflow:auto;}
.coolbg {border:none; border-right:1px solid #ACACAC; border-bottom:1px solid #ACACAC; padding:2px; padding-right:5px; padding-left:5px; background:#CCC url(../images/allbtbg2.gif); cursor:pointer; background:#DDDDDD;}
.np {border:none;}
.btn-small{width: 60px;margin-top: 10px}
.spanright{float: right;}
.btnBottom{margin-bottom: 10px;}
/*ui bttons*/
.icoBtn{background-image:url(images/buttonicon.gif); background-repeat:no-repeat;float:left;margin:5px 0 0 5px;width:20px;height:20px;display:block;font-size:1px;}
.btnNew{background-position:-60px -140px;}/*add*/
.btnDel{background-position:-20px -140px;width:18px;}/*delete*/
.btnEdit{background-position:-80px -140px;}
.btnUp{background-position: -100px -60px;}
.btnSave{background-position:-0px -60px;}
.btnSetting{background-position:-60px -20px;}
.btnDelete{background-position:-80px -120px;}
.btnRefresh{background-position: -60px -60px;}
/*bpmn icons*/
.iconBPMN{background-image:url(images/bpmn-icons.gif);background-repeat:no-repeat;float:left;margin:5px 0 0 5px;width:20px;height:20px;display:block;font-size:1px;}
.iconTask{background-position:-206px -6px;}
.iconGateway{background-position:-166px -6px;}
.iconSub{background-position:-244px -6px;}
.iconMI{background-position:-284px -6px;}
.iconEnd{background-position:-48px -6px;}
.spinner{position: fixed;top: 50%;left: 50%;margin-left: -50px; /* half width of the spinner gif */margin-top: -50px; /* half height of the spinner gif */text-align:center;z-index:1234;overflow: auto;width: 100px; /* width of the spinner gif */height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */}
.modal-body2 {
    overflow-y: auto;
    padding: 15px;
    position: relative;
}

/*flowchart*/
.circle-start {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background: palegreen;
    border: 1px solid yellowgreen;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}

.circle-end {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    background: red;
    border: 1px solid brown;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 20px;
}

.ctrl_container{
    margin:5px;
    height:40px;
}

.task { 
    background-color: #EEEEEF;
    border: 1px solid #346789;
    border-radius: 0.5em;
    box-shadow: 2px 2px 5px #AAAAAA;
    color: black;
    position: absolute;
    text-align:center;
    font-family:helvetica;padding:0.5em;
    font-size:0.9em;
    width: 80px;
    height: 40px;
}

.dashed-task{
    background-color: #EEEEEF;
    border: 1px dashed #346789;
    border-radius: 0.5em;
    box-shadow: 2px 2px 5px #AAAAAA;
    color: black;
    min-height: 3em;
    position: absolute;
    min-width: 6em;
    text-align:center;
    font-family:helvetica;padding:0.5em;
    font-size:0.9em;
}

.dashed-rect {
    border: dashed;
}

.decision{
    transform:rotate(-45deg);
    overflow:hidden;
    border: 1px solid #346789;
    border-radius: 0.3em;
    color: black;
    backface-visibility: hidden;
    background: none repeat scroll 0 0 #F4F4F4;
    box-shadow: 0 0 0 1px #CCCCCC;
    color: #000000;
    display: block;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.decision .ctrl_container{
    display: table-cell;
    width: 40px;
    height: 40px;
    padding: 0 10px;
    text-align: center;
    transform: rotate(45deg);
    vertical-align: middle;
}

.brightness {
    background-color: lightblue;
    display: inline-block;
   
}
.brightness b:hover {
    opacity: .6;
}

/*different element shape*/
/** COMMON ELEMENT PROPERTIES **/
.shape {
    z-index:2;
    opacity:0.7;
    /*position:absolute;*/
    cursor:pointer;
    text-align:center;
    color:#333;
}

/** SHAPES **/

[data-shape=Rectangle] {
    width:210px;
    height:70px;
    left:380px;
    top:505px;
    line-height: 70px;
    background-image:url(rectangle.png);
}

[data-shape=Ellipse] {
    width:210px;
    height:70px;
    left:250px;
    top:300px;
    line-height: 70px;
    background-image:url(ellipse.png);
}

[data-shape=Circle] {
    width:150px;
    height:150px;
    left:100px;
    top:60px;
    line-height: 150px;
    background-image:url(circle.png);
}

[data-shape=Triangle] {
    width:150px;
    height:150px;
    line-height: 150px;
    background-image:url(triangle.png);
}

._90[data-shape=Triangle] {
    width:150px;
    height:150px;
    line-height: 150px;
    background-image:url(triangle_90.png);
}

[data-shape=Diamond] {
    width:30px;
    height:30px;
    line-height: 30px;
    background-image:url(images/diamond.png);
}

.modal-title {
    font: bold;
}