.modal {
  backdrop-filter: blur(5px);
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 40px 10px 10px 10px;
  border: 1px solid gray;
  border-radius: 5px 0 5px 5px;
  z-index: 20;
}
.modal input[type=text],
.modal input[type=email],
.modal input[type=password],
.modal input[type=file] {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
}
.modal input[type=checkbox] {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid gray;
  appearance: none;
}
.modal input[type=checkbox]:checked {
  background-color: #88ff88;
}
.modal label {
  vertical-align: super;
}
.modal button[data-button-type="ok"],
.modal button[data-button-type="cancel"],
.modal button[data-button-type="submit"] {
  margin-top: 20px;
}
.modal button[data-button-type="ok"] {
  background-color: #99ff99;
  float: right;
}
.modal button[data-button-type="cancel"] {
  background-color: #ffcccc;
  float: left;
}
.modalHeader {
  background-color: rgba(211, 211, 211, 0.75);
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 20px;
  content: ' ';
  padding: 5px 10px;
  border-radius: 5px 0px 0px 0px;
  border-bottom: 1px solid gray;
}