#CompassWidgetContainer {
  /* 
  This sets the width of the left column of the content grid, 
  where we're putting our compass widget, to 30%.
  */
  --ajs-content-grid-column-1: 30%;
}
.ajs-region-left {
  background-color: var(--ajs-region-background-color);
  border-right: 1px solid var(--ajs-region-border-color);
}
#MyCompassWidget {
  flex: 0 0 33.33%;
  min-height: 0;
  box-sizing: border-box;
}
:root {
  /* set this value to 5x the size that you want the compass */
  --ajs-compass-direction-size: 500px;
  /* 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;
}