.flex-responsive {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.6rem;
}

/* Stack on small screens (set wide for testing) */
@media (max-width: 768px) {
  .flex-responsive.flex-responsive {
    display: flex; /* without this display-block was being set by BS */
    flex-direction: column ;
  }
  /* optional: make stacked items fill width nicely */
  .flex-responsive.flex-responsive > * {
    width: 100%;
    max-width: none;
  }
}



/* Shared look – keep as you have it */
.gc-select {
    border-radius: 0.25em;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}

/* Native Bootstrap selects (dbc.Select) */
select.gc-select {
    width: 8em;
    height: 2.1em;
}

/* Note: .gc-select-multi class is no longer used as unit_selector 
   now uses dmc.MultiSelect which has inline styles for height matching */














.user-avatar-toggle {
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.user-avatar-toggle:hover {
    transform: scale(1.08);
    border-color: #aaa !important;
}

/* Hide the little caret triangle */
.user-avatar-toggle::after {
    display: none;
}


/* MULTI SELECT */