.menu2 {
  display: none;
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 8px 0;
  z-index: 999;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
  list-style: none;
  background-color: #ffffff;
  border-radius: 4px;
}

.menu2-item {
  display: block;
  position: relative;
  min-width: 60px;
  margin: 0;
  padding: 6px 16px;
  font: bold 12px sans-serif;
  color: rgba(0, 0, 0, .87);
  cursor: pointer;
}

.menu2-item::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.menu2-item:hover::before {
  opacity: .04;
}

.menu2 .menu2 {
  top: -8px;
  left: 100%;
}

.show-menu2, .menu2-item:hover > .menu2 {
  display: block;
  opacity: 1;
}

.zoomSlider {
  position: absolute;
  padding: 0;
  opacity: .75;
  z-index: 99;
  width: 125px;
  height: 25px;
  top: 0px;
  left: 0px;
}

.zoomButton {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding: 0;
  transition: opacity .2s;
}

.zoomRangeContainer {
  display: inline-block;
  vertical-align: top;
  padding: 0;
}

.zoomRangeInput {
  margin: 0;
  padding: 0;
  outline: none;
  transition: opacity .2s;
  background: transparent;
  -webkit-appearance: none;
}


.zoomRangeInput::-webkit-slider-runnable-track {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 3px;
  background: #ccc;
}
.zoomRangeInput::-moz-range-track {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 3px;
  background: #ccc;
}
.zoomRangeInput::-ms-track {
  box-sizing: border-box;
  border: none;
  width: 100%;
  height: 3px;
  background: #ccc;
  color: transparent;
}
.zoomRangeInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -3.33px;
  box-sizing: border-box;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
}
.zoomRangeInput::-moz-range-thumb {
  box-sizing: border-box;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
}
.zoomRangeInput::-ms-thumb {
  margin-top: 0;
  box-sizing: border-box;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
}
.zoomRangeInput::-ms-tooltip,
.zoomRangeInput::-ms-fill-lower,
.zoomRangeInput::-ms-fill-upper {
  display: none;
}
.code{
    line-height:20px;
    overflow: hidden;
    max-height: 30px;
    white-space: pre-wrap;
    display: none;
}
body{
    margin:0px;
    content-zooming:none;
    font-family: arial;
}
input {
    font-size: 20px;
}

select {
    font-size: 20px;
}
textarea {
    font-size: 20px;
}
button.btnDelete {
    border-radius: 8px;
    background-color: #f44336;
    font-size: 22px;
    padding: 2px 8px;
}
#table1 thead {
    background-color: #33aaff;
    color: yellow;
}

.redips-drag {
    cursor: move;
    margin: auto;
    background-color: white;
    text-align: center;
    font-size: 22pt; 
	padding:1px;
    height: 35px;
    line-height: 35px;
	position: relative;display: inline-block;
    
    border-radius: 12px; 
    -moz-border-radius: 4px; 
    -webkit-user-select: none;
}


.fa {
	color:#33aa33;
}

.content a {
    font-size:22px;
}


table.drag {
    background-color: #ddd;
    border-collapse: collapse;
    margin: 0px;
}
table#table2 td{
    width:120px;
}
table.drag td {
    border: 1px white solid;
    height: 50px;
    line-height:0px;
    text-align: center;
    font-size: 10pt;
    -webkit-user-select: none;
}
 
table.login td {
    border: 0px white solid;
	
	height: 20px;
	
    text-align: center;
    font-size: 10pt;
}
 


div.edit{
	padding-top: 7px;	
	padding-right: 7px;
	position: absolute;
	right: 0;
	top: 0;
	display: none;
}
div.redips-drag:hover .edit {
	display: block;
}

table.link {
    border-collapse: collapse;
	width:100%;
	height:100%;
    margin: 0px;
}
table.link td {
    border: 0px blue solid;
	height: 20px;
    text-align: center;
    font-size: 10pt;
}



.green {
    border: 2px solid #499B33;
}


a {
    font-size:16px;
    white-space: nowrap;
}


.redips-drag {
	cursor: move;
	margin: auto;
	z-index: 10;
	text-align: center;
	font-size: 16pt; 
	opacity: 0.7;
	filter: alpha(opacity=70);
	
	
	width: 200px;
	height: 35px;
	line-height: 35px;
}



div#redips-drag table {
	border-collapse: collapse;
	
	margin: 0px auto;
}
		
		div#redips-drag #table2 {
			
			margin-left: auto;
			width: 430px;
		}



div#redips-drag table td,th {
	border-style: double;
	height: 50px;
	text-align: center;
	font-size: 10pt;
}


div#redips-drag table td {
    border-color: #DDC5B5;
    font-weight: normal;
}


div#redips-drag table th {
    border-width: 3px 0px 0px 3px;
    border-color: #DDC5B5;
    font-weight: normal;
}


div#redips-drag table .upper_right {
    border-width: 0px;
}


div#redips-drag table .lower_left {
    border-width: 0px;
}




.drag_green {
    border: 2px solid #499B33;
    background-color: #499B33;
}

.drag_orange {
    border: 2px solid #BF6A30;
    background-color: #FFAA30;
}

.drag_blue {
    border: 2px solid #306ABF;
}

.drag_red {
    border: 2px solid #FF7799;
    background-color: #FF77AA;
}


#main_container {
    margin: auto;
    width: 99%;
}

#redips-drag {
    
    border: 0px dashed SteelBlue;
    width: 100%;
    height: 700px;
    padding: 3px;
}


#main_container #left {
    width: 880px;
    height: 710px;
    float: left;
    margin-right: 20px;
    
    border: 0px solid SlateGray;
    background-color: #eee;
}

#main_container #middle {
    width: 260px;
    height: 700px;
    float: left;
    
    border: 0px solid SlateGray;
    background-color: #eee;
}

#main_container #right {
    width: 150px;
    height: 700px;
    float: right;
    
    border: 0px solid SlateGray;
    background-color: #eee;
}



#main_container #left,#right,#middle{
                overflow: auto;
    position: relative;
}
.redips-row {
    width: 20px;
    margin: 2px;
    border: 2px solid LightBlue;
    background-color: SteelBlue;
    border-radius: 14px;
    -moz-border-radius: 14px;
}
.redips-rowhandler {
    background-color: #76ACDA;
}
div#output_cmd {
    width: 200px;
}

<div id="tool_left" 
style="float:left;width: 135px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black">
<div id="myResultWindow" 
style="background-color: #e2e2e2;height:250px;border:1px solid black;z-index: 999;"
>
    <div id="myResultWindowHandle">
        <button onclick="Read_Data(52);">刷新</button>
        <button onclick="make()">生成</button>
        <span id="Link"></span>
        <div id="myOverviewDiv" style="height:200px; width: 120px;"  class="diagramStyling"></div>
    </div>
</div>
</div>
<div id="tool_left2" 
style="float:left;display:none;width: 500px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black">

<div id="myDiagram_clipboard" 
style="flex-grow: 1; height:100%; border: 1px solid black; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
<sys.null>
</div>
<button onclick="save_clipboard_as_file(sys_clipboard_id)">保存文件</button>
<button onclick="save_clipboard_as_file(0)">另存文件</button>

<button onclick="list_clipboard()">...</button>

</div>
<div style="width:100%;" style="position: relative;">
    <div id="myDiagramDiv" 
    style="flex-grow: 1; height:100%; border: 1px solid black; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
    </div>
    <div>
    <input id="Edit" type="button" onclick="edit()" value="编辑" />
    <input id="SelectAll" type="button" onclick="myDiagram.commandHandler.selectAll()" value="全选" />
    <input id="Cut" type="button" onclick="myDiagram.commandHandler.cutSelection()" value="剪切" />
    <input id="Copy" type="button" onclick="myDiagram.commandHandler.copySelection()" value="复制" />
    <input id="Paste" type="button" onclick="myDiagram.commandHandler.pasteSelection()" value="粘贴" />
    <input id="Delete" type="button" onclick="myDiagram.commandHandler.deleteSelection()" value="删除" />
    <input id="Group" type="button" onclick="myDiagram.commandHandler.groupSelection()" value="组合" />
    <input id="Ungroup" type="button" onclick="myDiagram.commandHandler.ungroupSelection()" value="解除组合" />
    <input id="Undo" type="button" onclick="myDiagram.commandHandler.undo()" value="撤销" />
    <input id="Redo" type="button" onclick="myDiagram.commandHandler.redo()" value="重做" />
    
    
    <div id="Link"></div>
    
    </div>
    <br>
     <ul id="contextMenu" class="menu2">
        <li id="edit" class="menu2-item" onclick="cxcommand(event)">编辑</li>
        <li id="cut" class="menu2-item" onclick="cxcommand(event)">剪切</li>
        <li id="copy" class="menu2-item" onclick="cxcommand(event)">复制</li>
        <li id="paste" class="menu2-item" onclick="cxcommand(event)">粘贴</li>
        <li id="delete" class="menu2-item" onclick="cxcommand(event)">删除</li>
        <li id="color" class="menu2-item">颜色&gt;&gt;&gt;
          <ul class="menu2">
            <li class="menu2-item" style="background-color: #ffffff;" onclick="cxcommand(event, 'color')">白色</li>
            <li class="menu2-item" style="background-color: #f38181;" onclick="cxcommand(event, 'color')">红色</li>
            <li class="menu2-item" style="background-color: #eaffd0;" onclick="cxcommand(event, 'color')">绿色</li>
            <li class="menu2-item" style="background-color: #95e1d3;" onclick="cxcommand(event, 'color')">蓝色</li>
            <li class="menu2-item" style="background-color: #fce38a;" onclick="cxcommand(event, 'color')">黄色</li>
          </ul>
        </li>
      </ul>
</div>
<div id="output_cmd">
</div>