:root {
  --my-game-display-width: 100%;
  --my-game-display-min-width: 1024px;
  --my-game-display-max-width: 1200px;
  --my-text-window-width: 50%;
  --my-text-window-min-width: 480px;
  --my-text-window-max-width: 620px;

  --my-image-window-width: calc( 50% - 64px );
  --my-image-window-min-width: 600px;
  --my-ui-column-width: 128px;
  --my-ui-background-color: #17121f;
  --my-labelbar-height: 30px;

  --my-compasspoint-enabled-color: #1dff54;
  --my-compasspoint-hover-color: #fff819;
  --my-compasspoint-disabled-color: #083613;
  --my-compasspoint-cardinal-flat-face: 25px solid var(--my-compasspoint-disabled-color);
  --my-compasspoint-cardinal-angle-face: 20px solid transparent;
  --my-compasspoint-ordinal-flat-face: 20px solid var(--my-compasspoint-disabled-color);
  --my-compasspoint-ordinal-angle-face: 12px solid transparent;
  --my-compasspoint-ud-width: 100%;
  --my-compasspoint-ud-height: 33%;
  --my-compasspoint-up-top: 0;
  --my-compasspoint-down-top: 60%;
  --my-compasspoint-grid-size: 42px;
  --my-compasspoint-middle-grid-size: 42px;

  --my-dockbutton-enabled-color: var(--my-ui-background-color);/*#1d9cff;*/
  --my-dockbutton-hover-color: #fff819;
  --my-dockbutton-disabled-color: #0d3655;
  
}

body
{
  background-color: black;
}

#GUIOpenDemoContainer
{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: black;
}

.ajs-display
{
  width: var(--my-game-display-width);
  min-width: var(--my-game-display-min-width);
  max-width: var(--my-game-display-max-width);
  display: block;
  margin: 0 auto;
  overflow: hidden;
  height: 608px;
}

.ajs-output
{
  width: calc( var(--my-text-window-width) - 20px );
  min-width: calc( var(--my-text-window-min-width) - 20px );
  max-width: calc( var(--my-text-window-max-width) - 20px );
  /* background-color: #e5decf; */
}

.ajs-input-wrapper {
  width: var(--my-text-window-width);
}

#MyCompass
{
  z-index: 2;
}

.custom.ajs-compass-wrapper
{
  position: absolute;
  width: var( --my-ui-column-width);
  height: var( --my-ui-column-width);
  z-index: 1;
  background-color: var(--my-ui-background-color);
  text-align: -webkit-center;

  left: 0;
  top: 480px;
}

.custom .ajs-compass-hover-trap
{
  display: none;
}

.custom .ajs-compasspoints > .ajs-compass-hover-trap
{
  display: block;
  position: absolute;
  width: var( --my-ui-column-width);
  height: var( --my-ui-column-width);
  pointer-events: all;
  z-index: 0;
}

.custom .ajs-compasspoints {
  position: relative;
  float: none;
  width: var(--my-ui-column-width);
  height: var(--my-ui-column-width);
  margin-right: unset;
  margin-top: unset;
  margin-left: unset;
  display: grid;
  grid-template-columns: 
    var(--my-compasspoint-grid-size) 
    var(--my-compasspoint-grid-size) 
    var(--my-compasspoint-grid-size);
  grid-template-rows: 
    var(--my-compasspoint-grid-size)
    var(--my-compasspoint-grid-size) 
    var(--my-compasspoint-grid-size);
  gap: 0px 0px;
  grid-template-areas:
      "nw n ne"
      "w ud e"
      "sw s se";
  justify-content: center;
  align-content: stretch;
}

.custom .ajs-compasspoint
{
  position: relative;
  pointer-events: none;

  padding: unset; /* unset button css if using button */
  background: unset; /* unset button css if using button */
}

.custom .cardinal.ajs-compasspoint,
.custom .marine.ajs-compasspoint
{
}

.custom .ordinal.ajs-compasspoint 
{
}

.custom .ajs-compasspoint.up
{
  position: absolute;
  width: var(--my-compasspoint-ud-width);
  height: var(--my-compasspoint-ud-height);
  background-color: var(--my-compasspoint-disabled-color);
  top: var(--my-compasspoint-up-top);
}
.custom .ajs-compasspoints.up .ajs-compasspoint.up { background-color: var(--my-compasspoint-enabled-color); }
.custom .ajs-compasspoints.up .ajs-compasspoint.up:hover { background-color: var(--my-compasspoint-hover-color); }

.custom .ajs-compasspoint.down
{
  position: absolute;
  width: var(--my-compasspoint-ud-width);
  height: var(--my-compasspoint-ud-height);
  background-color: var(--my-compasspoint-disabled-color);
  top: var(--my-compasspoint-down-top);
}
.custom .ajs-compasspoints.down .ajs-compasspoint.down { background-color: var(--my-compasspoint-enabled-color); }
.custom .ajs-compasspoints.down .ajs-compasspoint.down:hover { background-color: var(--my-compasspoint-hover-color); }

.custom .ajs-compasspoint.north { 
  border-left: var(--my-compasspoint-cardinal-angle-face);
  border-right: var(--my-compasspoint-cardinal-angle-face);
  border-bottom: var(--my-compasspoint-cardinal-flat-face);
}
.custom .ajs-compasspoints.north .ajs-compasspoint.north { border-bottom-color: var(--my-compasspoint-enabled-color); }
.custom .ajs-compasspoints.north .ajs-compasspoint.north:hover { border-bottom-color: var(--my-compasspoint-hover-color); }

.custom .ajs-compasspoint.south { 
  border-left: var(--my-compasspoint-cardinal-angle-face);
  border-right: var(--my-compasspoint-cardinal-angle-face);
  border-top: var(--my-compasspoint-cardinal-flat-face);
}
.custom .ajs-compasspoints.south .ajs-compasspoint.south { border-top-color: var(--my-compasspoint-enabled-color); }
.custom .ajs-compasspoints.south .ajs-compasspoint.south:hover { border-top-color: var(--my-compasspoint-hover-color); }

.custom .ajs-compasspoint.east { 
  border-left: var(--my-compasspoint-cardinal-flat-face);
  border-bottom: var(--my-compasspoint-cardinal-angle-face);
  border-top: var(--my-compasspoint-cardinal-angle-face);
}
.custom .ajs-compasspoints.east .ajs-compasspoint.east { border-left-color: var(--my-compasspoint-enabled-color); }
.custom .ajs-compasspoints.east .ajs-compasspoint.east:hover { border-left-color: var(--my-compasspoint-hover-color); }

.custom .ajs-compasspoint.west { 
  border-right: var(--my-compasspoint-cardinal-flat-face);
  border-bottom: var(--my-compasspoint-cardinal-angle-face);
  border-top: var(--my-compasspoint-cardinal-angle-face);
}
.custom .ajs-compasspoints.west .ajs-compasspoint.west { border-right-color: var(--my-compasspoint-enabled-color); }
.custom .ajs-compasspoints.west .ajs-compasspoint.west:hover { border-right-color: var(--my-compasspoint-hover-color); }

.custom .ajs-compasspoint.northwest { 
  border-left: var(--my-compasspoint-ordinal-flat-face);
  border-right: var(--my-compasspoint-ordinal-angle-face);
  border-bottom: var(--my-compasspoint-ordinal-angle-face);
  border-top: var(--my-compasspoint-ordinal-flat-face);
}
.custom .ajs-compasspoints.northwest .ajs-compasspoint.northwest { 
  border-left-color: var(--my-compasspoint-enabled-color); 
  border-top-color: var(--my-compasspoint-enabled-color); 
}
.custom .ajs-compasspoints.northwest .ajs-compasspoint.northwest:hover { 
  border-left-color: var(--my-compasspoint-hover-color); 
  border-top-color: var(--my-compasspoint-hover-color); 
}

.custom .ajs-compasspoint.southwest { 
  border-left: var(--my-compasspoint-ordinal-flat-face);
  border-right: var(--my-compasspoint-ordinal-angle-face);
  border-bottom: var(--my-compasspoint-ordinal-flat-face);
  border-top: var(--my-compasspoint-ordinal-angle-face);
}
.custom .ajs-compasspoints.southwest .ajs-compasspoint.southwest { 
  border-left-color: var(--my-compasspoint-enabled-color); 
  border-bottom-color: var(--my-compasspoint-enabled-color); 
}
.custom .ajs-compasspoints.southwest .ajs-compasspoint.southwest:hover { 
  border-left-color: var(--my-compasspoint-hover-color); 
  border-bottom-color: var(--my-compasspoint-hover-color); 
}

.custom .ajs-compasspoint.northeast { 
  border-left: var(--my-compasspoint-ordinal-angle-face);
  border-right: var(--my-compasspoint-ordinal-flat-face);
  border-bottom: var(--my-compasspoint-ordinal-angle-face);
  border-top: var(--my-compasspoint-ordinal-flat-face);
}
.custom .ajs-compasspoints.northeast .ajs-compasspoint.northeast { 
  border-right-color: var(--my-compasspoint-enabled-color); 
  border-top-color: var(--my-compasspoint-enabled-color); 
}
.custom .ajs-compasspoints.northeast .ajs-compasspoint.northeast:hover { 
  border-right-color: var(--my-compasspoint-hover-color); 
  border-top-color: var(--my-compasspoint-hover-color); 
}

.custom .ajs-compasspoint.southeast { 
  border-left: var(--my-compasspoint-ordinal-angle-face);
  border-right: var(--my-compasspoint-ordinal-flat-face);
  border-bottom: var(--my-compasspoint-ordinal-flat-face);
  border-top: var(--my-compasspoint-ordinal-angle-face);
}
.custom .ajs-compasspoints.southeast .ajs-compasspoint.southeast { 
  border-right-color: var(--my-compasspoint-enabled-color); 
  border-bottom-color: var(--my-compasspoint-enabled-color); 
}
.custom .ajs-compasspoints.southeast .ajs-compasspoint.southeast:hover { 
  border-right-color: var(--my-compasspoint-hover-color); 
  border-bottom-color: var(--my-compasspoint-hover-color); 
}

.custom .ajs-compasspoint.northwest { place-self:center; }
.custom .ajs-compasspoint.north { place-self:start; justify-self: center; }
.custom .ajs-compasspoint.northeast { place-self:center; }
.custom .ajs-compasspoint.west { place-self:start; align-self:center; }
.custom .ajs-compasspoint.east { place-self: end; align-self:center; }
.custom .ajs-compasspoint.southwest { place-self:center; }
.custom .ajs-compasspoint.south { align-self:end; justify-self: center; }
.custom .ajs-compasspoint.southeast { place-self: center; }

.custom .ajs-compasspoints.up .up, .custom .ajs-compasspoints.down .down, 
.custom .ajs-compasspoints.north .north, .custom .ajs-compasspoints.south .south,
.custom .ajs-compasspoints.east .east, .custom .ajs-compasspoints.west .west, 
.custom .ajs-compasspoints.northwest .northwest, .custom .ajs-compasspoints.northeast .northeast, 
.custom .ajs-compasspoints.southwest .southwest, .custom .ajs-compasspoints.southeast .southeast,
.custom .ajs-compasspoints.fore .fore, .custom .ajs-compasspoints.aft .aft,
.custom .ajs-compasspoints.starboard .starboard, .custom .ajs-compasspoints.port .port,
.custom .ajs-compasspoints.in .in, .custom .ajs-compasspoints.out .out
{
  pointer-events: all!important;
  cursor: pointer;
} 

.custom .btn_verb {
  padding: 15px 10px; 
}
.custom .btn_verb.hasimage {
  width: 64px;
  height: 64px;
  padding: 0!important; 
}

.custom .btn_verb:hover 
{
}

.custom .btn_verb.admin {
  float: right;
}

.custom .dock_button.restore 
{
  /* margin-right: 10px; */
}

.custom .dock_button
{
  background-color: var(--my-dockbutton-enabled-color);
  margin-right: 2px;
}

.custom .dock_button:hover 
{
  background-color: var(--my-dockbutton-hover-color);
  color: black;
}

#MyLeftDock
{
  /* padding-top: var(--my-labelbar-height); */ /* if using a label */
  background-color: var(--my-ui-background-color);
  left: var(--my-ui-column-width);
  width: calc( var(--my-text-window-width) - var(--my-ui-column-width) );
  height: var(--my-ui-column-width);
}

/* #MyLeftDock:after
{
  content: 'VERBS';
  background-color: black;
  color: white;
  width: 100%;
  height: var(--my-labelbar-height);
  line-height: var(--my-labelbar-height);
  position: absolute;
  text-align: center;
  top:0;
} */

#MyLeftDock .verbdock
{
  padding: 36px;
  background-color: var(--my-ui-background-color);
}

#MyRightDock
{
  max-width: calc( 50% - 50px );
  float: right;
}

#MyInventoryDock
{
  background-color: var(--my-ui-background-color);
  padding-top: var(--my-labelbar-height);
  position: absolute;
  top: 60px;
  left: var(--my-text-window-width);
  width: var(--my-ui-column-width);
  z-index: 1;

  height: 520px;
  border-left: 1px solid #33303f;
  border-right: 1px solid #33303f;
}

#MyInventoryDock:after
{
  content: 'INVENTORY';
  background-color: var(--my-ui-background-color);
  color: white;
  width: 100%;
  height: var(--my-labelbar-height);
  line-height: var(--my-labelbar-height);
  position: absolute;
  text-align: center;
  top:0;
}

#MyInventoryDock .inventorydock
{
  width: 100%;
  overflow: scroll;  
  height: 520px;
}

.custom .btn_inventory {
  font-size: .9em;
  padding: 2px 0px;
  width: 100%;
  text-align: center;
  text-indent: 6px;
  background-color: transparent;
  color: white;
}

.custom .btn_inventory.hasimage
{
  padding: 0;
  display: inline-block;
  width: 64px;
  margin: 0;
  text-indent: 0;
}

.custom .btn_verb.hasimage
{
  padding: 0;
  display: inline-block;
  width: 64px;
  margin: 0;
  text-indent: 0;
}

.custom .btn_inventory.hasimage .name
{
  display: none;
}

.custom .btn_verb.hasimage .name
{
  display: none;
}

#MyImageDock
{
  position: absolute;
  top: 60px;
  left: calc( var(--my-text-window-width) + var(--my-ui-column-width) );
  width: calc( var(--my-game-display-width) - ( var(--my-text-window-width) + var(--my-ui-column-width) ) ); /*450px*/
  z-index: 0;
  overflow: hidden;
}

#MyImageDock img
{
  width: auto;
  height: 550px;
  margin-left: 50%;
  transform: translateX(-50%);
}