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

.ui-dialog {
  position: absolute;
  z-index: 1260;
  overflow: visible;
  padding: 0;
  color: #000;
  border: solid 1px #ccc;
  background: #fff;

  @media (min-width: 991px) and (max-width: 1440px) {
    width: 85% !important;
  }
}

@media all and (max-width: 48em) {
  /* 768px */
  .ui-dialog {
    width: 92% !important;
  }
}
.ui-dialog .ui-dialog-titlebar {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ccc;
  border-radius: 0;
  background: #f3f4ee;
  font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar-close {
  border: 0;
  background: none;
}
.ui-dialog .ui-widget-content.ui-dialog-buttonpane {
  margin-top: 0;
  padding: 40px 80px 80px;
  border: none;
  background: transparent;

  @media (max-width: 991px) {
    padding: 24px;
  }
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  margin: 0;
  padding: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  padding: 0;
}
/* Dialog popup overlay */
.ui-widget-overlay {
  background-color: #515861 !important;
  opacity: 0.6 !important;
  z-index: 999;
}

/* 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;
}

/* External link popup */
.ui-dialog.external-link-popup {
  background-color: #fff !important;
  border-radius: 16px !important;
  max-width: 890px;
  z-index: 1000;
}
.external-link-popup-content {
  padding: 80px 80px 0 !important;
  text-align: center;

  @media (max-width: 991px) {
    padding: 24px 24px 0 !important;
  }
}
.external-link-popup-content h2 {
  margin: 0 0 24px;
  color: #515861;
  font-family: "Tilt Neon", -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 48px;
  line-height: 1;

  @media (max-width: 991px) {
    font-size: 28px;
  }
}
.ui-dialog.external-link-popup .ui-widget-content.ui-dialog-buttonpane {
  margin-top: 0;
  padding: 40px 80px 80px;
  border: none;
  background: transparent;
  display: flex;
  justify-content: center;

  @media (max-width: 991px) {
    padding: 24px;
  }
}
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .ui-dialog-buttonset {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Proceed button (primary) */
.ui-dialog.external-link-popup .ui-widget-content.ui-dialog-buttonpane .button {
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  background-color: #F16B50;
  border: 2px solid #F16B50;
  align-self: stretch;
  display: flex;
  min-width: 140px;
  margin: auto 0;
  padding: 12px 20px 12px 24px;
  gap: 4px;
  overflow: hidden;
  font-family: agenda, -apple-system, Roboto, Helvetica, sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  flex: 1;

  @media (max-width: 991px) {
    padding-left: 20px;
  }
}

.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button:hover,
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button:focus {  
  background-color: #F16B50;
  border-color: #F16B50;
  color: #fff;
}

.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button:focus-visible {
  outline: 2px solid #f16b50;
  outline-offset: 2px;
}
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button:after {
  content: url("data:image/svg+xml,%3Csvg%20class%3D%27button-icon%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20aria-hidden%3D%27true%27%3E%3Cpath%20d%3D%27M7.78612%203.78528C7.40463%204.16566%207.40462%204.78238%207.78611%205.16276L14.1417%2011.5L7.7861%2017.8372C7.40462%2018.2176%207.40463%2018.8344%207.78613%2019.2147C8.16762%2019.5951%208.78614%2019.5951%209.16761%2019.2147L16.2139%2012.1887C16.5954%2011.8084%2016.5954%2011.1916%2016.2139%2010.8113L9.16761%203.78529C8.78612%203.40491%208.16761%203.4049%207.78612%203.78528Z%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23ffffff%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  color: #fff;  
  width: 24px;
  height: 24px;
  display: inline-block;
}
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button:hover:after,
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button:focus:after {  
  content: url("data:image/svg+xml,%3Csvg%20class%3D%27button-icon%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20aria-hidden%3D%27true%27%3E%3Cpath%20d%3D%27M7.78612%203.78528C7.40463%204.16566%207.40462%204.78238%207.78611%205.16276L14.1417%2011.5L7.7861%2017.8372C7.40462%2018.2176%207.40463%2018.8344%207.78613%2019.2147C8.16762%2019.5951%208.78614%2019.5951%209.16761%2019.2147L16.2139%2012.1887C16.5954%2011.8084%2016.5954%2011.1916%2016.2139%2010.8113L9.16761%203.78529C8.78612%203.40491%208.16761%203.4049%207.78612%203.78528Z%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23ffffff%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  color: #fff;
}

/* Cancel button (secondary) */
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button
  + .button {
  border: 2px solid #c94808;
  background-color: #fff;
  color: #c94808;
}
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button
  + .button:after {
  content: url("data:image/svg+xml,%3Csvg%20class%3D%27button-icon%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20aria-hidden%3D%27true%27%3E%3Cpath%20d%3D%27M7.78612%203.78528C7.40463%204.16566%207.40462%204.78238%207.78611%205.16276L14.1417%2011.5L7.7861%2017.8372C7.40462%2018.2176%207.40463%2018.8344%207.78613%2019.2147C8.16762%2019.5951%208.78614%2019.5951%209.16761%2019.2147L16.2139%2012.1887C16.5954%2011.8084%2016.5954%2011.1916%2016.2139%2010.8113L9.16761%203.78529C8.78612%203.40491%208.16761%203.4049%207.78612%203.78528Z%27%20fill%3D%27%23c94808%27%20stroke%3D%27%23c94808%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
}
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button
  + .button:hover,
.ui-dialog.external-link-popup
  .ui-widget-content.ui-dialog-buttonpane
  .button
  + .button:focus {
  background-color: #fceee7;
}


.external-pop {
  
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 24px;

  label {
    font-size: 48px;
    line-height:64px;
    color: #1D2D3A;
  }

  .external-pop-text { 
    font-size: 18px;
    line-height: 22px;
    color: #515861;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

}