
.esDropModal
  width: auto; // else too narrow
  margin: 0;
  .modal-content
    width: 100%;
    height: 0;

.esDropModal-NotTooWide
  .esDropModal_content
    max-width: 89%; // so always some emptiness outside that one can click to close. [4YK8ST2]
                    // ... no, now I've added a close X button instead. And made the dialog
                    // wider (89% not just 75%).
@media (min-width: 650px)
  .esDropModal-NotTooWide
    .esDropModal_content
      max-width: 560px; // or annoyingly wide. [dropdown_width]

.esDropModal_CloseB
  // This doesn't work well: sometimes overlaps long contents.
  // Wouldn't float: right be better? But need one extra <div>?  [close_cross_css]
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  &.esCloseCross
    // Make it easier to click = larger. Other stuff to click tend to be far away anyway.
    padding: 10px 14px 24px 33px;

.esDropModal_content
  position: fixed;
  padding: 7px 7px 11px 4px;  // esExplDrp_entry assumes padding-right here [5YKF20]
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.37);
  background: white;
  min-width: 150px;
  margin-right: 6px;

.esDropModal_header
  font-style: italic;
  font-size: 14px;
  margin: 14px 0 4px 11px; // [proxy_diag_padding]
  &:first-child
    margin-top: 3px;

// If a Bootstrap dropdown converted to DropModal and placed inside:
.esDropModal_content > .dropdown-menu
  max-width: 500px;
  display: block; // else none, until some open class added too
  position: static; // otherwise absolute
  z-index: 0;
  float: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  li
    margin: 0;
    &.divider
      margin: 6px 0 10px;
    a
      max-width: 100%;

