ui-grid.css

.modal-grid {
  min-height: 75vh;
  width : 100%;
}

/*
 Overlay a ui-grid to put a message in front
*/
.grid-msg-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
}

/*
  This element will contain our message.
*/
.grid-msg-overlay .msg {
  opacity: 1;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 50%;
  text-align: center;
  display: table;
}

/*
  This is the actual message text. It uses
  display: table-cell so the vertical alignment
  works properly.
*/
.grid-msg-overlay .msg > span {
  display: table-cell;
  vertical-align: middle;
}

/*
  This sets the grid to full height of the window.
*/
.grid-full-height {
  width:  100%;

  /* this is full height minus the header crumb*/
  height : calc(100vh - 65px);
}

/* this is full height minus the header crumb and filters*/
.grid-full-height-with-filters {
  width:  100%;
  height : calc(100vh - 106px);
}


.grid-journal {
  width : 100%;
  height : calc(100vh - 108px);
}

.grid-journal-alert {
  width : 100%;
  height : calc(100vh - 150px);
}

.grid-util-journal {
  width : 100%;
  height : calc(100vh - 95px - 35px);
}

/*
  This sets the grid to full height of the window minus the util bar.
*/
.grid-util-full-height {
  width:  100%;

  /* this is full height minus the header crumb and util bar */
  height : calc(100vh - 65px - 35px);
}

.grid-error {
  color: white;
  background-color: red;
}

.grid-warning {
  color : white;
  background-color: darkorange;
}

.grid-success {
  color: white;
  background-color: blue;
}