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

.ui-dialog {
  position: absolute;
  z-index: 1260;
  padding: 0;
  animation: fade 0.4s;
  border: 0;
  background: transparent;
}

.ui-dialog.media-library-widget-modal,
.ui-dialog.entity-browser-modal {
  right: 2.5% !important;
  left: 2.5% !important;
  min-width: 95%;
  max-width: 95%;
}

.ui-dialog:focus,
.ui-dialog .ui-dialog-titlebar-close:focus {
  outline: transparent;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

.ui-dialog .ui-dialog-titlebar {
  padding: 15px 49px 15px 15px;
  background: #0678be;
  /* LTR */
}

[dir='rtl'] .ui-dialog .ui-dialog-titlebar {
  padding-right: 15px;
  padding-left: 49px;
}

.ui-dialog .ui-dialog-title {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 300;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  /* LTR */
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

[dir='rtl'] .ui-dialog .ui-dialog-titlebar-close {
  right: auto;
  left: 15px;
}

.ui-dialog .ui-icon.ui-icon-closethick {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  margin: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  opacity: 0.8;
  background: none;
}

.ui-dialog .ui-icon.ui-icon-closethick:hover {
  opacity: 1;
}

.ui-dialog .ui-icon.ui-icon-closethick::before,
.ui-dialog .ui-icon.ui-icon-closethick::after {
  position: absolute;
  top: 4px;
  left: 14px;
  width: 2px;
  height: 22px;
  content: ' ';
  background-color: white;
}

.ui-dialog .ui-icon.ui-icon-closethick::before {
  transform: rotate(45deg);
}

.ui-dialog .ui-icon.ui-icon-closethick::after {
  transform: rotate(-45deg);
}

.ui-dialog .ui-widget-content.ui-dialog-content {
  overflow: auto;
  padding: 20px;
  background: #fff;
}

.views-ui-dialog .ui-widget-content.ui-dialog-content {
  padding: 0;
}

.ui-dialog .ui-widget-content.ui-dialog-buttonpane,
#media-entity-browser-modal {
  margin: 0;
  padding: 15px 20px;
  background: #f5f5f5;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  position: relative;
  right: 0;
  float: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  padding: 0;
}

.ui-dialog .ui-dialog-content {
  position: static;
}

/* Form action buttons are moved in dialogs. Remove empty space. */
.ui-dialog .ui-dialog-content .form-actions {
  margin: 0;
}

.ui-dialog .ajax-progress-throbber {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  justify-content: center;
  width: 100%;
}

.ui-dialog .ajax-progress-throbber .throbber {
  width: 30px;
  height: 30px;
  border-top: 5px solid rgba(0, 128, 255, 0.3);
  border-right: 5px solid rgba(0, 128, 255, 0.3);
  border-bottom: 5px solid rgba(0, 128, 255, 0.3);
  border-left: 5px solid #0678be;
}

.ui-dialog .ajax-progress-throbber .message {
  display: none;
}

.ui-dialog .form-item-settings-label {
  display: flex;
  flex-direction: column;
}

.ui-dialog .field-suffix {
  margin: 0;
}

.ui-dialog .field-suffix br {
  display: none;
}

.ui-dialog table {
  margin: 0;
}

.ui-dialog fieldset:not(.fieldgroup) {
  padding: 55px 0 0 0;
  background: none;
}

.ui-dialog .ui-tabs .ui-tabs-panel {
  padding: 20px 20px 0 20px;
}

.ui-dialog .ui-tabs .ui-tabs-nav {
  padding: 0;
  border-bottom: 0;
  background: #f5f5f5;
}

.ui-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin: 0;
  padding-bottom: 0;
  border: 0;
  background: white;
}

.ui-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active a:hover {
  background: white;
}

.ui-dialog .ui-tabs .ui-tabs-nav li {
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-dialog .ui-tabs .ui-tabs-nav li a {
  display: flex;
  padding: 10px 20px;
  border: none;
  line-height: 1.8;
}

.ui-dialog .ui-tabs .ui-tabs-nav li a:hover {
  border: 0;
  background: #f9f9f9;
}

.ui-dialog .ui-tabs .ui-tabs-nav li.ui-tabs-active:hover,
.ui-dialog .ui-tabs .ui-tabs-nav li:hover {
  border: 0;
}

.ui-dialog .form-wrapper {
  flex-wrap: wrap;
}

.ui-dialog table .form-type-checkbox {
  display: inline-flex;
}