.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 

   If you really want to use a dcc.Select for MultiSelect, 
   use the css in dcc_multi_select.css

 */



/* GenCharts switch ON colour */
.gc-switch .form-check-input:checked {
  background-color: #c9dca3;
  border-color: #c9dca3;
}
Optional: nicer focus ring
.gc-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 63, 92, 0.25);
}


/* Thumb (circle) when OFF */
.gc-switch .form-check-input {
  background-color: #ffffff;      /* track off colour (optional) */
}

.gc-switch .form-check-input::before {
  background-color: #adb5bd;  /* off thumb */
}


















.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;
}