.popup {
    display: block;
    position: fixed;
    padding: 10px;
    width: 400px;
    left: 50%;
    margin-left: -200px;
    height: 450px;
    top: 50%;
    margin-top: -225px;
   
    z-index: 20;
  }

  .popup:after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    z-index: -2;
  }
  
  .popup:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-style: double;
    border-radius: 25px;
    border-color: hotpink;
    background-color: rgb(11, 11, 20);
    z-index: -1;
  }
.popupTitle{
  margin-left: auto;
  margin-right: auto;
  height: 40px;
}
  .popupContentsContainer{
    display: flex;
    flex-direction: column;
    height: 430px;
  }
.monitorStatesContainer{
height: 410px;
  overflow-y: scroll;
}
  /* Handle monitor state change*/
.monitorState{
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;

}
.popupButtonContainer{
  display: flex;
  flex-direction: row;
  width: 100%;
}
.errorTableContainer{
  max-height: 100%; 
  width: 100%;
  overflow-y: scroll;
}
.errorTable{
  border-collapse: collapse;
  align-items: flex-start;
}
.errorTable > tbody > tr{
  border-style: groove;
  border-top: 3px solid white;
  border-bottom: solid white;
  border-left: 0px;
  border-right: 0px;
}

.popupButton{
  color:hotpink;
  width: 50%;
  height: 10px;
}
.finishButton{
  width: 100%;
  margin-top: auto;
  height: 10px;
  border-radius: 0px 0px 10px 10px 
}
  #inProgress{
    color: yellow;
  }
  #waiting{
    color: grey;
  }

  #completed{
    color: Green
  }
  #unchanged{
    color: Green
  }
  #failed{
    color: red
  }
  #undone{
    color: cyan
  }
