[data-r-role="dialog"] {
  display: none;
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 90%;
  min-height: 90vh;
  margin-top: 5vh;
  background: #fff;
  z-index: 99990000;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 40px 5px 40px 5px;
}

[data-r-role="dialog"][data-r-type="message"],
[data-r-role="dialog"][data-r-type="confirm"] {
  min-height: 30vh;
  margin-top: 20vh;
  z-index: 99999000;
}

[data-r-role="dialog"] header{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #ccccd1;
  color: #ffffff;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 5px 0px 0px 20px;
}

[data-r-role="dialog"] header h3{
  color: #ffffff;
  min-height: 30px;
}

[data-r-role="dialog"] footer{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  padding: 0px 0px 10px 0px;
}

[data-r-role="dialog"] [data-r-field="close_button"] {
  display: inline-block;
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
}

@media screen and (min-width: 800px) {
  [data-r-role="dialog"] {
    width: 800px;
    min-height: 500px;
    margin-top: 5vh;
  }

  [data-r-role="dialog"][data-r-type="message"],
  [data-r-role="dialog"][data-r-type="confirm"] {
    width: 500px;
    min-height: 200px;
    margin-top: 16vh;
  }
}

[data-r-field="dialog_background"] {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0.95;
}