@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.dialog {
  position: fixed;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}
.dialog.show {
  opacity: 1;
  pointer-events: auto;
}
.dialog.show .contents {
  pointer-events: auto;
}
.dialog, .dialog * {
  box-sizing: border-box;
}
.dialog .layer {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.dialog .scroll {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  overflow: scroll;
  /*pointer-events: none;*/
}
.dialog .contents {
  position: relative;
  left: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
  width: calc(100% - 40px);
  height: auto;
  min-height: 100px;
  max-width: 500px;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 10px;
}
.dialog .close {
  position: absolute;
  width: 20px;
  height: 20px;
  right: calc(0% + 10px);
  top: calc(0% + 10px);
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
}
.dialog .close:before,
.dialog .close:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 15%;
  background-color: #333;
  transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
}
.dialog .close:after {
  transform: translateX(-50%) translateY(-50%) rotateZ(-45deg);
}
.dialog .title {
  font-size: 1.3em;
  background-color: #efefef;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.dialog .buttons {
  width: 100%;
  padding-top: 10px;
}
.dialog .button {
  background-color: #efefef;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  outline: none;
  user-select: none;
  cursor: pointer;
  transition: background-color 0.5s;
}
.dialog .button:hover {
  background-color: #ccc;
}
.dialog .button-success {
  background-color: rgba(0, 128, 0, 1);
  color: #fff;
}
.dialog .button-success:hover {
  background-color: rgba(0, 128, 0, 0.7);
}
.dialog .dialog-contents {
  padding: 10px;
}
.dialog .row {
  margin-bottom: 10px;
}
.dialog .row:last-child {
  margin-bottom: 0px;
}
.dialog input[type="text"],
.dialog textarea {
  font-size: 1em;
  width: 100%;
  border: 1px solid #efefef;
  padding: 10px;
  outline: none;
  border-radius: 5px;
  transition: border 0.5s;
  resize: none;
  font-family: inherit;
}
.dialog input[type="text"]::placeholder,
.dialog textarea::placeholder {
  color: #ccc;
}
.dialog input[type="text"]:focus,
.dialog textarea:focus {
  border: 1px solid #333;
}
.dialog .help {
  padding-top: 3px;
  color: #aaa;
}
.dialog.full .contents {
  width: calc(100% - 40px);
  max-width: 800px;
}