/**
 * @file
 * Presentational styles for Drupal dialogs.
 */

.ui-dialog {
  position: absolute;
  z-index: 1260;
  overflow: visible;
  color: #000;
  top: 0 !important;
  margin: 68px auto 0 !important;
  background-color: var(--color-white);
  max-height: calc(100vh - 110px);
  max-width: 605px;
  overflow-y: auto;
  padding: 36px 56px;
  position: relative;
  width: auto !important;
  min-width: 0 !important;
  right: 0;
}

.ui-dialog .ui-dialog-content {
  padding: 0;
  padding-right: 50px;
  h2 {
    font-size: 32px;
    font-weight: 300;
    text-align: left;
    padding-bottom: 2.1875rem;
  }

  p {
    font-size: 16px;
    line-height: 28px;
    font-weight: 300;
    letter-spacing: 0;
    margin: 0;

    a{
      color: var(--color-red);
      cursor: pointer;
    }
  }
}

@media all and (max-width: 48em) {
  /* 768px */
  .ui-dialog {
    width: 92% !important;
  }
}

.ui-dialog .ui-dialog-titlebar {
  background-color: transparent;
  border: none;

  .ui-dialog-title {
    display: none;
  }
}
.ui-dialog .ui-dialog-titlebar-close {
  border: 0;
  background: none;
  position: absolute;
  right: -0.7em;
  top: 190%;

}
.ui-dialog .ui-dialog-buttonpane {
  margin-top: 2.5rem;
  background-color: transparent;
  border: none;
  padding: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin: 0;
  padding: 0;
  width: 100%;

  button {
    cursor: pointer;
    width: 100%;
    display: block;
    background-color: var(--color-red);
    border: 2px solid var(--color-red);
    color: var(--color-white);
    padding: 18px 30px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  padding: 0;
}

/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions {
  margin: 0;
  padding: 0;
}
.ui-dialog .ajax-progress-throbber {
  position: fixed;
  z-index: 1000;
  top: 48.5%;
  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
  left: 49%;
  width: 24px;
  height: 24px;
  padding: 4px;
  opacity: 0.9;
  border-radius: 7px;
  background-color: #232323;
  background-image: url(../../images/icons/loading-small.gif);
  background-repeat: no-repeat;
  background-position: center center;
}
.ui-dialog .ajax-progress-throbber .throbber,
.ui-dialog .ajax-progress-throbber .message {
  display: none;
}