#notification-overlay {
  position: fixed;
  width: 400px;
  bottom: 50px;
  /* vertical position controlled in tsx file */
  z-index: 99;

  padding: 20px;
  background-color: white;

  border-radius: 5px;
  -webkit-box-shadow: 0px 0px 18px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 18px 3px rgba(0, 0, 0, 0.2);
}

#notification-overlay button {
  text-decoration: underline !important;
}

@media only screen and (max-width: 800px) {
  #notification-overlay {
    bottom: 10px;
    left: 50%;
    margin-left: -200px;
  }
}

@media only screen and (max-width: 400px) {
  #notification-overlay {
    left: 0;
    margin-left: 0;
    bottom: 10px;
    width: 100vw;
    overflow-y: scroll;
    max-height: 170px;
  }
}