/* 1. Give the dropdown wrapper its own stacking context */
.dd-compact {
  position: relative;
  z-index: 50;
  width: 100% !important;
  display: block !important;
}

/* 2. Force the menu to break out of the card */
.dd-compact .Select-menu-outer,
.dd-compact .Select__menu,
.dd-compact .Select__menu-list {
  position: absolute !important;
  z-index: 10000 !important;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. Let every container the menu passes through be "porous" */
.card, .card-body, .row, .col,
.dash-bootstrap, .dash-bootstrap * {
  overflow: visible !important;
}

/* Compact height for dropdowns */
.dd-compact .Select__control {
  min-height: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 6px !important;
  font-size: .85rem;
  width: 100% !important;
  box-sizing: border-box !important;
}
.dd-compact .Select__value-container {
  padding: 0 !important;
}