#MultiWidgets01Container {
  /* 
  This sets the width of the left column of the content grid, 
  where we're putting our widgets.
  */
  --ajs-content-grid-column-1: min(33%, 200px); /* the smaller of 1/3 of the layout or 200px)
}

/* We can also override these values for different layout sizes */
.ajs-container.xs {
  --ajs-content-grid-column-1: min(25%, 160px);
}
.ajs-container.small {
  --ajs-content-grid-column-1: min(33%, 200px);
}
.ajs-container.medium {
  --ajs-content-grid-column-1: min(33%, 200px);
}
.ajs-container.large {
  --ajs-content-grid-column-1: min(20%, 200px);
}
.ajs-container.xl {
  --ajs-content-grid-column-1: min(17%, 200px);
}

.ajs-region-left {
  border-right: 1px solid var(--ajs-widget-border-color);
}

#MyCompassWidget {
  flex: 0 0 33.33%;
  min-height: 0;
  border-bottom: 1px solid var(--ajs-widget-border-color);
  box-sizing: border-box;
}

#MyObjectListWidget {
  flex: 0 0 66.667%;
}

#MyObjectListWidget .ajs-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: -webkit-fill-available;
  overflow: auto;
}

#MyObjectListWidget .ajs-scroll-content {
  height: -webkit-fill-available;
  /*
  These flex properties set the buttons to the full
  width of the column, one per line. If you'd prefer
  buttons to wrap, comment these lines.
  */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#MyObjectListWidget button {
  /* using these flex properties centers text in buttons */
  display: flex;
  justify-content: center;
  /* if buttons have images, this will show text then image */
  flex-direction: column;
  /* to reverse it to image then text, use this instead */
  /* flex-direction: column-reverse; */
}

.ajs-object-image {
  /* display: block; */
}