/* MODAL */

.modal.hidden {
    display: none;
}

[role="dialog"] {
  box-sizing: border-box;
  padding: 1.25rem;
  background-color: #fff;
  min-height: 100vh;
  position: absolute;
  top: 50vh;
  left: 50vw;  /* move to the middle of the screen (assumes relative parent is the body/viewport) */
  transform: translate(-50%, -50%);  /* move backwards 50% of this element's width */
  width: calc(100% - 1.25rem);
  max-width: 62.5rem;
  min-height: auto;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.dialog_close_button {
  position: absolute;
  top: -0.625rem;
  right: 0.125rem;
  font-size: 1.875rem;
  background: none;
  color: #000;
  z-index: 1;
}

@media screen and (min-width: 71.938rem) {
  .dialog_close_button {
    top: 0;
    right: 0.625rem;
  }
}

/* dialog::backdrop, */
.dialog-backdrop {
  display: none;
  position: fixed;
  overflow-y: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 0 !important;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.6);
}

.dialog-backdrop.active {
  display: block;
}

.no-scroll {
  overflow-y: auto !important;
}

/* this is added to the body when a dialog is open */
.has-dialog {
  overflow: hidden;
}