.segmented {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #f3f4f6;        /* gray-100 */
  padding: 6px;
  border-radius: 999px;
  width: 420px;                /* adjust or make 100% */
}

.seg-btn {
  position: relative;
  z-index: 1;                  /* above highlight */
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  color: #6b7280;              /* gray-500 */
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.seg-btn:hover { transform: translateY(-1px); }
.seg-btn.active { color: #111827; } /* gray-900 */

.seg-highlight {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 3);     /* 3 columns, gap=6px -> total gaps=12px */
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: transform .25s ease;
  will-change: transform;
}

.dash-spreadsheet.dash-freeze-top, .dash-spreadsheet.dash-virtualized 
    { max-height: inherit !important; }

.dash-table-container {max-height: calc(100vh - 225px);}
/*makes the height of the DashTable 225 pix less then the 100% screen */

/* closed */
#treemap-y-multi .Select {
  max-height: 35px;
  overflow-y: auto;
}
/* open */
#treemap-y-multi .Select.is-open {
  max-height: none;       
  overflow-y: visible;
  background: green;
  z-index: 25;
}