/* Modal overlay is a seperate element, we can't give it a class like ui-dialog */
.ui-widget-overlay {
  opacity: .5;
}

/* Position at bottom of page */
.coo-dialog {
  top: unset !important;
  bottom: 3.5rem;
  width: auto !important;
  max-width: 600px;
  margin: 0 auto;
}

@media all and (max-width: 48em) { /* 768px */
  .coo-dialog {
    left: 1rem !important;
    right: 1rem !important;
  }
}

/* Modal styling improvements (according to site colors) */
.coo-dialog h2 {
  font-size: 24px;
  line-height: 32px;
}
.coo-dialog.ui-widget-content {
  background: var(--enzian--primary-bg);
  border: 0;
}

/* Remove ugly titlebar, the node title is displayed inside dialog-content anyways */
.coo-dialog .ui-dialog-title {
  height: 0;
}
.coo-dialog .ui-dialog-titlebar {
  padding: 0;
  background: var(--enzian--primary-bg);
  border: 0;
}
.coo-dialog .ui-dialog-titlebar-close {
  margin: 0;
}
.coo-dialog .ui-dialog-content {
  border: 0;
  background: none;
  color: var(--enzian--link);
}
.coo-dialog .ui-dialog-content a {
  color: var(--enzian--link);
  text-decoration: underline;
}

/* Add arrow to bottom of modal to indicate it can be reopened via footer menu */
.coo-dialog .node--type-page::after {
  border-left: 6rem solid transparent;
  border-top: 2rem solid var(--enzian--primary-bg);
  position: absolute;
  margin-left: 25%;
}

.coo-dialog.ui-widget,
.coo-dialog .ui-widget {
  font-family: "Titillium Web", sans-serif;
}

/* List fixes */ 
/* TODO: Check why it looks bad without and why bullet points disappear */
.coo-dialog .h4c-content ul {
  margin: 1em 0 1em 2em;
}

/* Bring back bullet points */
.coo-dialog li {
  list-style: disc;
}

/* IE11 specific code which does not seem to be working */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ui-dialog.ui-widget-content {
    overflow: visible !important;
  }
}