#MultiWidgets02Container {
  --ajs-content-grid-column-1: 20%;
  --ajs-content-grid-column-3: 20%;
  --ajs-content-grid-row-1: 27%;
}

.ajs-region-header {
  /* width: 166%; */
  /* left: -33%; */
  border-bottom: thin solid var(--ajs-border-color);
  /* grid-template-columns: auto 1fr; */
}
.ajs-region-left {
  /* height: 80%; */
  /* top: 20%; */
  display: grid;
  grid-template-rows: auto 1fr;
}
.ajs-region-right {
  /* height: 80%; */
  /* top: 20%; */
}

/* -------------------------------------------------- */
/* Compass Widget */
/* -------------------------------------------------- */

#MyCompassWidget {
  min-height: 0;
  box-sizing: border-box;
  z-index: 3;
}

:root {
  /* set this value to 5x the size that you want the compass */
  --ajs-compass-direction-size: 250px;
  /* set these values to change compass colors */
  --ajs-compass-direction-enabled-color: forestgreen !important;
  --ajs-compass-direction-hover-color: #00ff00 !important;
  --ajs-compass-direction-disabled-color: #444 !important;
}

/* -------------------------------------------------- */
/* Room Description Widget */
/* -------------------------------------------------- */

#MyRoomDescriptionWidget {
  /* this sets the height of the widget to the full row height */
  flex: 0 0 80%;
  /* this hides anything that runs too long 
  which means that all room descriptions must
  fit within the height of the widget */
  overflow: hidden;
  margin: 0;
}

#MyRoomDescriptionWidget .ajs-inner {
  /* apply some padding to the inside of the widget */
  padding: 10px;
}

/* 
.ajs-output is a built-in element and it has its own
padding but we want to negate that for this widget.
*/
#MyRoomDescriptionWidget .ajs-output {
  padding: 0;
}

/* -------------------------------------------------- */
/* Object List Widget */
/* -------------------------------------------------- */

#MyObjectListWidget {
  flex: 1;
  z-index: 3;
}

#MyObjectListWidget .ajs-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* padding: 0px 5px 0 5px; */
  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; */
}

/* -------------------------------------------------- */
/* Inventory Widget */
/* -------------------------------------------------- */

#MyInventoryListWidget {
  z-index: 3;
}

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

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