/* Fullscreen modal container */
#wmModal {
  display: none; /* hidden on load, shown dynamically with JavaScript */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* % OF viewport width */
  height: 100vh; /* % of viewport height */
  justify-content: center; /* center direct children horizontally */
  align-items: center; /* center the direct children vertically in this container */
  z-index: 1000;
}

/* Semi-transparent backdrop */
#wmModalBackdrop {
  /* child of wmModal */
  position: absolute; /* a direct chile of wmModel but flex doesn't act on it because of the absolute specification */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* Modal dialog box */
#wmModalBox {
  /* child of wmModal */
  position: relative;
  background: #fff;
  padding: 20px 24px; /* vertical and horizontal padding between the box and it's elements */
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%; /* 90% of the width of its parent  */
  z-index: 1001;
  display: flex;
  flex-direction: column; /* children of wmModalBox will be spaced using flex in a single column with gap */
  gap: 16px;
}

/* Header text */
#wmModalHeader h2 {
  margin: 0;
  font-size: 1.25rem;
}

/* Message body */
#wmModalMessage p {
  margin: 0;
  font-size: 1rem;
}

/* Button container */
#wmModalButtons {
  display: flex;
  flex-wrap: wrap; /* allow wrapping */
  justify-content: center; /* center the rows */
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

/* Modal buttons */
#wmModalButtons button {
  padding: 6px 14px;
  font-size: 1rem;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #aaa;
  border-radius: 4px;
}

#wmModalButtons button {
  white-space: nowrap;
}

#wmModalButtons button:hover {
  background-color: #ddd;
}