.noise-overlay {
    background: rgba(255, 0, 0, 0.75);
    display: inline;
    float : bottom;
    position: relative;
    /*top: -100%;*/
    bottom: 20%;
    left: 0%;
    right: 0%;
    width: 100%;
    height: 20%;
    /*cursor: pointer;*/
}

.mornitor-container {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.mornitor-info {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index:10;
}
.mornitor-info img{
  width:40px;
  padding:0 0 0 6px;
  margin-top:10px;
  position:absolute;
}
.mornitor-info p{
  /*background:red;*/
  color:white;
  padding:0 4px 0;
  margin:0px;
  position:absolute;
}
.mornitor-info p.label{
  font-size: 12px;
  bottom:0px;
  right:0px;
  color:#dddddd;
}
.mornitor-info p.value{
  font-size: 42px;
  bottom:10px;
  right:30px
}
.mornitor-info p.unit{
  font-size: 14px;
  bottom:20px;
  right:0px;
}
.mornitor-container .color-danger {
  color:#EB2A2A;
}
.mornitor-container .color-warning {
  color:#FCE816;
}
.mornitor-container .color-normal {
  color:#2CEC43;
}
.mornitor-container .color-offline {
  color:#C2C2C2;
}


.mornitor-nav {
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 10%;
  position: absolute;
  top: 0%;
  left: 0;
  z-index:10;
}
.mornitor-nav p{
  padding:2px;
  margin:0px;
  position:absolute;
}
.mornitor-nav p.datelabel{
  font-size : 12px;
  color:white;
  right:12px;
}
.mornitor-nav img.aretype{
  width:20px;
  padding:2px 0 0 4px;
  margin:0px;
  position:absolute;
  left:0px;
}
.mornitor-nav img.online{
  width:10px;
  padding:6px 2px 0;
  margin:0px;
  position:absolute;
  right:0px;
}