* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

}

html,
body {
  width: 100%;
  height: 99%;
  padding: 0;
  margin: 0;
}

ul{
  list-style-type: none;
  padding-left: 15px;
  margin-top: 0px;

}
table{
  width: 100%;
}
td {
    vertical-align: top;
    padding-left: 0px;
    padding-right: 6px;
}
td img{
}
.screenGroup{
  position: fixed;

}
.BlockChildren {
  opacity: 0;
}
.BlockChildren table td{
  

}
.mapDia {
  color: #7B96B4;
  line-height: 120%;
  padding: 5px;
  position: fixed;
  width: 140px;
  height: 165px;
  /*border-radius: 5px;*/
  border: 1px solid #7E889C;
  background-color: #E9F3F6;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.19);
}
#MapDia {
  top: 300px;
  left: 50px;
}
.mapDiaHead{
  color: #3A667D;

  text-align: left;
  font-size: 10px;
  font-family: "Arial";
  font-weight: bold;
}
.mapDiaFunc{
  padding: 10px;
  text-align: left;
  font-size: 10px;
  font-family: "Arial";
  font-weight: normal;
}
hr {
    border: 0;
    border-top: 1px solid #7B96B4;
/*    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0; 
*/}
.screen {
  color: #3A667D;
  padding-left: 5px;
  padding-top: 3px;
  position: fixed;
  width: 130px;
  height: 75px;
  border-radius: 5px;
  border: 1px solid #7E889C;
  background-color: #F0F1F1;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.19);
}
.screen.active{
  background-color: #D9E4EC;
}
.blockType{
  text-align: left;
  font-size: 11px;
  font-family: "Arial";
  font-weight: bold;
}

.blockName{
  text-align: left;
  font-size: 9px;
  font-family: "Arial";
  font-weight: normal;
  color: black;
  background-color: #E7E7D8;
  width: 100%;
  padding-left: 3px;
}

.blockImg {
  height: 50px;
}
.blockSetting{
  text-align: left;
  font-size: 9px;
  font-family: "Arial";
  font-weight: normal;
  color: black;  



}
#ScreenAGroup{
  top: 40px;
  left: 300px;
  height: 200px;
  width: 150px;
/*  border: 1px solid #000000;
*/}

#ScreenA {
  position: relative;


}


#ScreenB {
  top: 60px;
  left: 520px;

}


#ScreenC {
  top: 220px;
    left: 540px;

}
#ScreenDGroup{
  top: 100px;
  left: 780px;
  height: 200px;
  width: 150px;
/*  border: 1px solid #000000;
*/}

#ScreenD {
  
  position: relative;

}

#AppSetting{
  top: 20px;
  left: 60px;
  height: 100px;
  width: 150px;
  font-family: "Arial";
  font-size: 11px;
  font-weight: bold;
}
.appName{
  text-align: center;
  font-size: 11px;
  font-family: "Arial";
  font-weight: bold;
  color: black;

}

.component {
  color: #3A667D;
  padding-left: 5px;
  padding-top: 3px;
  position: fixed;
  width: 150px;
  height: 65px;
  border: 1px solid #7E889C;
  background-color: #D3DEDE;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.19);

}
.component.active{
  background-color: #C8DBD4;
}

.blockComponentImg {
  height: 35px;
}
.datasheet {
  color: #3A667D;
  padding-left: 5px;
  padding-top: 3px;
  position: fixed;
  width: 160px;
  height: 65px;
  border: 1px solid #7E889C;
  background-color: #95B0C1;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.19);

}
.datasheet.active{
  background-color: #A0D3F2;
}
.dataslot{
  color: #3A667D;
  padding-left: 5px;
  padding-top: 3px;
  position: fixed;
  width: 160px;
  height: 70px;
  border: 1px solid #7E889C;
  background-color: #858791;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.19);

}
.dataslot.active{
  background-color: #A0D3F2;
}

.dataSetting{
  text-align: left;
  padding-left: 5px;
  font-size: 9px;
  font-family: "Arial";
  font-weight: normal;
  color: black;  

}

.btn-group button {
    border: 1px solid black; /* Green border */
    padding: 0px 5px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
    font-size: 9px;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

.btn-group button:last-child {
    background-color: #ffffff; 
    color: black; /* White text */
    border-radius: 0px 8px 8px 0px;
}
.btn-group button:first-child {
    background-color: #5E5E5E; /* Green background */
    color: white; /* White text */
    border-radius: 8px 0px 0px 8px;
}



.blockHasChild{
  position: absolute;
    border: none;
    background-color: Transparent;

  top:65px;
  left:15px;

}
.blockHasChild img{
  width: 18px;
  
}


.itemsOpen{
  /*transition: is to be added on the parent*/
    transition: all 0.15s;
    /*Origin is to be added on the parent*/
    transform-origin: 50% 50%; 


}
.itemsClose {
    clear: both;

    /*-webkit-transform: rotate(-90deg) translate(0px, -6px);*/
    transform: rotate(-180deg) translate(0px, 0px);

    /*transition: all 0.15s;*/
/*    transition-duration: 0.15s;
    transition-property: transform;
*/

}


.itemsShow{
  opacity: 1;
  /*height:auto does not work with the transition, so use max-height with a large number that can never be exceeded. */
  max-height: 500px;  
  /*transition: is to be added on the parent selector. but can also be defined in child for separate definition*/

  -webkit-transition: all 0.1s ease .05s ;
    -moz-transition: all  0.1s ease .05s ;
    -o-transition: all    0.1s ease .05s ;
    -ms-transition: all   0.1s ease .05s ;
    transition: all       0.1s ease .05s ;


}

.itemsHide{

  opacity:0;
    max-height: 0;
    overflow: hidden;
    
    -webkit-transition: all .1s ;
    -moz-transition: all  .1s ;
    -o-transition: all    .1s ;
    -ms-transition: all   .1s ;
    transition: all     .1s ;
}