#add_node_content {
  display: none;
  margin-top: 40px;
  margin-right: 60px;
}

#add_node_content .layui-textarea {
  height: 250px;
  width: 500px;
}

#node_class input.layui-input.layui-unselect {
  width: 200px;
  height: 50px;
  background-color: #f1f1f1;
  margin-right: 2px;
}

#div_system {
  display: flex;
}

#secondDiv {
  flex: 4;
}

#myInfo {
  display: none;
  position:static;
  width: 100% !important;
  margin: 0;
  background-color: white;
}

#myInfo td{
  color: black;
}
#myInfo input{
  color: black !important;
  background-color: rgb(244, 244, 244);
}



.inspector input{
  width: 100%;
}

#user {
  display: inline-block;
  position: absolute;
  right: 50px;
}

#node_edit {
  opacity: 0;
  width: 0;
  padding: 0;
  margin-left: 0;
  transition: all 0.3s;
}

.node_edit_active{
    opacity: 1 !important;
    width: auto !important;
    padding: 0 16px !important;
    margin-left: 10px !important;
}

#node_remove {
  opacity: 0;
  width: 0;
  padding: 0;
  margin-left: 0;
  transition: all 0.3s;
}

.node_remove_active{
    opacity: 1 !important;
    width: auto !important;
    padding: 0 16px !important;
    margin-left: 10px !important;
}

#node_clone {
  opacity: 0;
  width: 0;
  padding: 0;
  margin-left: 0;
  transition: all 0.3s;
}

.node_clone_active{
    opacity: 1 !important;
    width: auto !important;
    padding: 0 16px !important;
    margin-left: 10px !important;
}


button.layui-btn.layui-btn-primary{
  padding: 0 18px;
}

a.layui-btn.layui-btn-primary{
  overflow: hidden;
  /* background-color: #f1f1f1; */
  padding: 0;
  border: none;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 0 16px;
  transition: 0.3s;
  color: #333;
}

a.layui-btn.layui-btn-primary:hover{
  color: rgb(131, 131, 131);
}

div.nodeTool{
  background-color: #f1f1f1;
  box-shadow: 1px 1px 2px rgb(137, 137, 137);
}

#tab_contents2{
  height:calc(100vh - 60px);
}

#main {
  display: flex;
  left: 205px;
  width: calc( 100% - 210px);
  overflow: hidden;
}



#search_btn {
  height: 50px;
  margin-left: 6px;
}
#searchText {
  width: 200px;
  height: 50px;
  box-shadow: 0 0 0 1000px white inset;
}

/* #myPaletteDiv {
  height: 71%;
} */

div#myDiagramDiv {
  height: 100% ;
  flex: 1;
}



#myPaletteDiv div {
  color: rgba(0, 0, 0, 0);
  transition: all 0.3s;
}


#myPaletteDiv div:hover {
  color: rgba(0, 0, 0, 0.2);
}

#myPaletteDiv div::-webkit-scrollbar,
#myPaletteDiv div::-webkit-scrollbar-thumb {
  width: 26px;
  border-radius: 13px;
  background-clip: padding-box;
  border: 10px solid transparent; 
}

#myPaletteDiv div::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 10px;
}


#myDiagramDiv div {
  color: rgba(0, 0, 0, 0);
  transition: all 0.3s;
}

#myDiagramDiv div:hover{
  color: rgba(0, 0, 0, 0.3);
}

#myDiagramDiv div::-webkit-scrollbar,
#myDiagramDiv div::-webkit-scrollbar-thumb {
  height: 16px;
  border-radius: 13px;
  background-clip: padding-box;
  border: 5px solid transparent;
}

#myDiagramDiv div::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 10px;
}


/**
* 右侧变量列表
*/

.observePanel {
  opacity: 1;
  width: 0;
  transition: all 0.3s;
  overflow: auto;
}



/* #valList{
  opacity: 1;
  width: 250px;
  
} */

#globalUl,#localUl{
  white-space: nowrap;
  width:100%; 
  height:calc(88% / 2); 
  overflow:auto;
  font-size:0;
  color: rgba(0, 0, 0, 0);
  transition: all 0.5s;
}


#localUl:hover,#globalUl:hover{
  color: rgba(0, 0, 0, 0.3);
}

#valList ul::-webkit-scrollbar,
#valList ul::-webkit-scrollbar-thumb {
  height: 16px;
  border-radius: 13px;
  background-clip: padding-box;
  border: 5px solid transparent;
}

#valList ul::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0 10px;
}



#valList h3{
  width:100%;
  text-align: center;
  background-color: rgb(74, 96, 142);
  color: white;
}

span.key,span.value,span.type{
  display: inline-block;
  width: 49%;
  border: 1px solid #ddd;
  height: 30px;
  line-height: 30px;
  font-size:16px;
  -webkit-text-fill-color: black;
}

#showList{
  position: absolute;
  z-index: 999999;
  right: 0px;
  transition: all 0.3s;
}




/**
* 工具栏
*/
#toolbar_left1 {
  width: 100% !important;
  position: relative;
}
div#w2ui-overlay-toolbar[data-tb-item=工具] {
  left: 530px !important;
  z-index: 999999999;
  top: 50px !important;
}
/* div#w2ui-overlay-toolbar[data-tb-item=更多] {
  left: 225px !important;
  z-index: 999999999;
  top: 50px !important;
} */


div#toolbar_left1 {
  background-color: #fff;
}


/**
* tab栏
*/
ul.tabBar {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  cursor: pointer;
  height: 30px;
}

ul.tabBar li{
  display: inline-block;
  width: 50%;
  height: 100%;
  line-height: 30px;
  text-align: center;
}

.tab-active{
  background-color: white;
  width: 50%;
  height: 100%;
  box-shadow: inset 0px 0px 0px 1px rgb(211, 211, 211);

}


div.tab-Content{
  width: 100%;
}


#user a{
  color: #f1f1f1;
}