body{
        margin: 8px;
    }
.header-title{
    margin: 0 auto;
  width: 100%;
  text-align: center;
   /* background-color: #CCCCCC;*/
  background: -webkit-linear-gradient(#006633, #8ac43a); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#006633, #8ac43a); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#006633, #8ac43a); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#006633, #8ac43a); /* Standard syntax */
  padding: 5px 0px 5px 0px;
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  margin-bottom: 5px;
}
.ir_status {
  width: calc(100% - 40px);
  background: #f0f0f0;
  padding: 20px;
  height: 125px;
  margin: 0 auto;
  margin-bottom: 0px;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 2px;
}
.ir_status_container {
  width: 400px;
  height: 20px;
  float: left;
  margin-bottom: 8px;
}
.ir_color_code {
  height: 15px;
  text-align: center;
  width: 80px;
  padding-top: 5px;
  float: left;
  padding-bottom: 5px;
}
.ir_color_code_desc {
  height: 15px;
  text-align: left;
  width: 300px;
  padding-top: 2px;
  padding-left: 2px;
  float: left;
}

.zoom-in{
  width: 24px;
  height: 24px;
  background: url('../images/zoom_in.png');
  display: none;
}
.zoom-out{
  width: 24px;
  height: 24px;
  background: url('../images/zoom_out.png');
  display: none;
}

.zoom-in:hover{
  cursor: pointer;
}
.zoom-out:hover{
  cursor: pointer;
}



@media only screen and (max-width: 875px) {
  .ir_status {
      height: 210px;
    }
  .zoom-in{
    display: block;
  }
  .zoom-out{
    display: block;
  }
  /*#Tree-Diagram .tree-roots-elements.upline{
    transform: translate3d(12px, 195px, 0px) scale(0.5) !important;
  }

  #Tree-Diagram .tree-roots-elements{
    transform: translate3d(0px, 50px, 0px) scale(0.5);
  }*/
}