/* BOOTSTRAP STYLES
-------------------- */

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.text-danger {
  color: #721c24;
  /* background-color: #f8d7da; */
}
.text-warning {
  color: #856404;
  /* background-color: #fff3cd; */
}
.text-success {
  color: #155724;
  color: var(--ajs-code-color);
  /* background-color: #d4edda; */
}
/* MAIN DISPLAY WINDOW
---------- */
:root {
  --ajs-body-background-color-night: #111;
  --ajs-body-background-color: #222;
  --ajs-bold-font: sans-serif;
  --ajs-border-color: #444;
  --ajs-border: 1px solid var(--ajs-border-color);
  --ajs-code-color: #599aff;
  --ajs-compasspoint-cardinal-angle-face: 5px solid transparent;
  --ajs-compasspoint-cardinal-flat-face: 5px solid
    var(--ajs-compasspoint-disabled-color);
  --ajs-compasspoint-disabled-color: #666;
  --ajs-compasspoint-down-top: 60%;
  --ajs-compasspoint-enabled-color: #fff;
  --ajs-compasspoint-grid-size: 7px;
  --ajs-compasspoint-hover-color: #00ff00;
  --ajs-compasspoint-middle-grid-size: 9px;
  --ajs-compasspoint-ordinal-angle-face: 4px solid transparent;
  --ajs-compasspoint-ordinal-flat-face: 4px solid
    var(--ajs-compasspoint-disabled-color);
  --ajs-compasspoint-ud-height: 33%;
  --ajs-compasspoint-ud-width: 100%;
  --ajs-compasspoint-up-top: 0;
  --ajs-display-background-color-night: var(--ajs-nightdarker);
  --ajs-display-background-color: #ddd;
  --ajs-display-min-height: 480px;
  --ajs-display-min-width: 600px;
  --ajs-font-family: sans-serif;
  --ajs-font-size: 0.9em;
  --ajs-input-background-color: #eee;
  --ajs-input-color-night: #ddd;
  --ajs-input-color: #000;
  --ajs-light: #dedede;
  --ajs-line-height: 1.25em;
  --ajs-nightdarker: #1a1919;
  --ajs-nightdarkgreen: #349418;
  --ajs-nightlight: #c9c9c9;
  --ajs-nightlightgreen: #41e212;
  --ajs-page-background-color: #242323;
  --ajs-titlebar-background-color-night: var(
    --ajs-display-background-color-night
  );
  --ajs-titlebar-background-color: var(--ajs-display-background-color-night);
  --ajs-titlebar-color-night: var(--ajs-nightlight);
  --ajs-titlebar-color: var(--ajs-nightlight);
  --background-color: #1a1919; /*#1e1e1e;*/
  --night-color: var(--ajs-nightlight);
  /* --ajs-font-family: 'source_sans_proregular', sans-serif; */
  --ajs-code-blue: ;
}

/* √ monospace font */
@font-face {
  font-family: "droid_sans_monoregular";
  src: url("/fonts/DroidSansMono-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* √ sans-serif font */
/* @font-face 
{
  font-family: 'source_sans_proregular';
  src: url('/fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
       url('/fonts/sourcesanspro-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} */

/* @font-face 
{
  font-family: 'source_sans_probold';
  src: url('/fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),
       url('/fonts/sourcesanspro-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} */

/* @font-face 
{
  font-family: 'source_sans_proitalic';
  src: url('/fonts/sourcesanspro-it-webfont.woff2') format('woff2'),
       url('/fonts/sourcesanspro-it-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} */

* {
  box-sizing: content-box;
  margin: 0;
  border: 0;
  padding: 0;
}

body.ajs:not(.night) {
  background-color: var(--ajs-body-background-color);
}

span.p {
  display: block;
  margin-bottom: 1em;
}

.ajs-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 100vh;
  min-width: var(--ajs-display-min-width);
  min-height: var(--ajs-display-min-height);
}

.ajs-display {
  width: var(--ajs-display-min-width);
  height: var(--ajs-display-min-height);
  position: relative;
  display: inline-block;
  border: var(--ajs-border);
  font-family: var(--ajs-font-family);
  font-size: var(--ajs-font-size);
  line-height: var(--ajs-line-height);
  text-align: left;
}
body.ajs:not(.night) .ajs-display {
  background-color: var(--ajs-display-background-color);
}
.ajs-display:not(.initialized) {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.ajs-titlebar {
  width: calc(100% - 30px);
  padding: 5px 15px;
  text-align: center;
  height: 10px;
  line-height: 10px;
  font-size: 0.5em;
  font-family: Arial, Helvetica, sans-serif;
}
body.ajs:not(.night) .ajs-titlebar {
  background-color: var(--ajs-titlebar-background-color);
  color: var(--ajs-titlebar-color);
}

.ajs-title {
  text-transform: uppercase;
  margin-right: 0.5em;
  white-space: nowrap;
}

.ajs-version {
  margin-right: 1em;
  white-space: nowrap;
}

.ajs-author {
  white-space: nowrap;
}

.ajs-author:before {
  content: "By ";
}

.ajs-statusbar {
  width: calc(100% - 30px);
  height: 20px;
  padding: 10px 15px;
  background-color: black;
}

.ajs-room {
  height: 20px;
  line-height: 20px;
  font-size: 1em;
  font-family: var(--ajs-bold-font);
  font-weight: bold;
  white-space: nowrap;
  color: white;
  float: left;
}

.ajs-room .situation {
  font-size: 0.9em;
  font-weight: 400;
}

.ajs-score {
  height: 20px;
  line-height: 20px;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  color: white;
  float: right;
  text-align: right;
}

/* compasses */
/* ---------- */

.ajs-compass-wrapper {
}

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

/*.magnify > */
.ajs-compasspoints > .ajs-compass-hover-trap {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: all;
  z-index: 0;
}

.ajs-compasspoints {
  position: relative;
  float: left;
  width: 26px;
  height: 26px;
  margin-right: 12px;
  margin-top: -2px;
  margin-left: -3px;
  display: grid;
  grid-template-columns:
    var(--ajs-compasspoint-grid-size)
    var(--ajs-compasspoint-middle-grid-size)
    var(--ajs-compasspoint-grid-size);
  grid-template-rows:
    var(--ajs-compasspoint-grid-size)
    var(--ajs-compasspoint-middle-grid-size)
    var(--ajs-compasspoint-grid-size);
  gap: 1px 1px;
  grid-template-areas:
    "nw n ne"
    "w ud e"
    "sw s se";
  justify-content: center;
  align-content: stretch;
}

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

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

  font-size: 0px;
}

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

.ordinal.ajs-compasspoint {
}

.ajs-compasspoint.up {
  position: absolute;
  width: var(--ajs-compasspoint-ud-width);
  height: var(--ajs-compasspoint-ud-height);

  background-color: var(--ajs-compasspoint-disabled-color);
  top: var(--ajs-compasspoint-up-top);
}
.ajs-compasspoints.up .ajs-compasspoint.up {
  background-color: var(--ajs-compasspoint-enabled-color);
}
.ajs-compasspoints.up .ajs-compasspoint.up:hover,
.ajs-compasspoints.up .ajs-compasspoint.up.active {
  background-color: var(--ajs-compasspoint-hover-color);
}

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

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

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

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

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

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

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

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

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

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

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

/* verb and inventory docks */
/* ---------- */
.ajs-dock-wrapper {
  position: relative;
}

.dock_button {
  background-color: white;
}

.dock_button:hover,
.dock_button.active {
  background-color: #41e212;
}

.game_verbdock_container {
}
.game_inventorydock_container {
}
.game_verbdock_container {
}

.btn_verb {
}

.btn_inventory {
}

/* images */
/* ---------- */

.game_imagedock_container {
}

.game_imagedock_container img {
  width: 100%;
  height: auto;
}

/* input */
/* ---------- */

.ajs-input-wrapper {
  position: relative;
}

.ajs-input-arrow {
  position: absolute;
  height: 100%;
  line-height: 100%;
  text-align: center;
  padding: 10px;
  font-size: 20px;
  line-height: 20px;
  height: 20px;
}
body.ajs:not(.night) .ajs-input-arrow {
  opacity: 0.3;
  color: var(--ajs-input-color);
}

span.input + span {
  margin-top: 0;
}

.ajs-input {
  width: calc(100% - 20px);
  height: 20px;
  padding: 10px;
  outline-style: none;
  box-shadow: inset 0 0 6px #222;
  text-indent: 15px;
  font-size: 16px;
  background-color: var(--ajs-input-background-color);
}
body.ajs:not(.night) .ajs-input:-webkit-autofill,
body.ajs:not(.night) .ajs-input:-webkit-autofill:hover,
body.ajs:not(.night) .ajs-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ajs-input-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--ajs-input-background-color) inset;
}

.ajs-input::placeholder,
.ajs-input:focus::placeholder {
  font-size: 16px;
  line-height: 15px;
  height: 20px;
  text-indent: 15px;
  overflow: visible;
}
body.ajs:not(.night) .ajs-input::placeholder,
body.ajs:not(.night) .ajs-input:focus::placeholder {
  opacity: 0.5;
  color: var(--ajs-input-color);
}

.ajs-input-wrapper .icon {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  background: 0;
  border: 0;
  padding: 0;
}

.ajs-input-wrapper button {
  pointer-events: none;
}

.ajs-input-wrapper.active button {
  pointer-events: all;
}

.clear.icon {
  right: 6px;
}

.clear.icon:before {
  content: "×";
  font-size: 1.75em;
}

.enter.icon {
  right: 40px;
  font-size: 0.7em;
}

.enter.icon:before {
  content: "\027A5";
  font-size: 1.75em;
  transform: scaleX(-1);
}

.ajs-input-wrapper .icon:before {
  position: absolute;
  font-size: 2em;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  opacity: 0.4;
}
.ajs-input-wrapper.active .icon:before {
  opacity: 1;
}
body.ajs:not(.night) .ajs-input-wrapper .icon:before {
  color: var(--ajs-input-color);
}

/* output */
/* ---------- */

.ajs-output-wrapper {
  height: 380px;
  overflow: scroll;
  scroll-behavior: smooth;
}

.ajs-output {
  /* width: calc( 100% - 40px ); */
  /* height: 360px; */
  /* overflow: scroll; */
  /* bottom: 0; */
  /* scroll-behavior: smooth; */
  padding: 20px;
  position: relative;
}

.ajs-output .input {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  font-style: italic;
  margin-bottom: 0;
  margin-top: 1.5em;
}

.ajs-output .room_name {
  font-weight: bold;
  font-family: var(--ajs-bold-font);
  margin-bottom: 0;
}

.ajs-output .inference {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
  font-style: italic;
  display: block;
}

.ajs-output .room_description,
.ajs-output .room_description_long,
.ajs-output .room_description_short {
}

/* inline styles */
/* ---------- */

em.debug {
  font-size: 0.9em;
  font-style: normal;
  font-family: sans-serif;
  color: #ff9700;
  display: block;
}

em.debug .debug_0 {
  font-size: 0.9em;
  color: #ff2222;
  margin-right: 3px;
}

em.debug .debug_0::after {
}

em.debug .debug_1::before {
  content: "   ";
  opacity: 0.6;
}

em.debug .debug_1 {
}

em.debug .debug_1::after {
  content: " / ";
  color: white;
  font-size: 0.9em;
  vertical-align: middle;
  margin-right: 3px;
}

em.debug .debug_2 {
}

em.unparsed {
  font-family: sans-serif;
  font-size: 0.9em;
  margin-right: 2px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}

em.unparsed::first-letter {
  /* uncomment to apply leading capitalization to unparsed input */
  /* text-transform: uppercase; */
}

.choice {
  /* color: white; */
  /* background-color: rgb(107, 107, 107); */
  /* border-radius: 10px; */
  /* padding: 0 4px; */
  /* font-size: 12px; */
  /* font-family: sans-serif; */
  margin-left: 5px;
  /* font-weight: bold; */
}

ol,
ul {
  padding-left: 1.5em;
}

span.p.concatenate_output {
  display: inline;
  /* margin-top: 0; */
  /* margin-bottom: 0; */
}

.ajs-display a {
  color: forestgreen;
}

.custom-exit-name {
}
.extended-exit-name {
}
.exit-direction {
}

.exit-destination {
  font-style: italic;
}

/* bootstrap colors */
/* ---------- */

.red {
  font-weight: bold;
  color: red;
}

.blue {
  font-weight: bold;
  color: blue;
}

.green {
  font-weight: bold;
  color: green;
}

.system {
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 5px;
}

.system.warning {
  color: #a6590c;
  background-color: #fffae0;
  border: 1px solid #feedca;
}

.system.error {
  color: #c42222;
  background-color: #feeaea;
  border: 1px solid #fdd6d6;
}

.system.test {
  color: #279fbd;
  background-color: #e0f8ff;
  border: 1px solid #caf6fe;
}

/* score */
/* ---------- */

.score_msg {
  font-style: italic;
  font-size: 1.1em;
}

.score_msg.up {
  color: #00bc00;
}

.score_msg.down {
  color: #ff1818;
}

/* night */
/* ---------- */

body.ajs.night {
  background-color: var(--ajs-body-background-color-night) !important;
}

body.ajs.night .ajs-display {
  background-color: var(--ajs-display-background-color-night) !important;
}

body.ajs.night .ajs-titlebar {
  background-color: var(--ajs-titlebar-background-color-night);
  color: var(--ajs-titlebar-color-night);
}

body.ajs.night .ajs-statusbar {
  background-color: var(var(--ajs-body-background-color-night));
}

body.ajs.night .ajs-output {
  /* background-color: #333!important; */
  color: var(--night-color);
}

body.ajs.night .ajs-input,
body.ajs.night .ajs-input:-webkit-autofill,
body.ajs.night .ajs-input:-webkit-autofill:hover,
body.ajs.night .ajs-input:-webkit-autofill:focus {
  background-color: var(--ajs-body-background-color-night);
  color: var(--ajs-input-color-night);
  -webkit-text-fill-color: #eee;
  -webkit-box-shadow: 0 0 0px 1000px var(--ajs-body-background-color-night)
    inset;
}

body.ajs.night .ajs-input::placeholder,
body.ajs.night .ajs-input:focus::placeholder {
  opacity: 0.5;
  color: var(--ajs-input-color-night);
}

body.ajs.night .ajs-input-arrow {
  opacity: 0.5;
  color: var(--ajs-input-color-night);
}

body.ajs.night .ajs-input-wrapper .icon:before {
  color: var(--ajs-input-color-night);
}

body.ajs.night .ajs-display a {
  color: chartreuse;
}

/* loading */
/* ---------- */
.ajs-display:not(.unplayed) button.play {
  display: none;
}
.ajs-display.unplayed button.play {
  display: block;
}
/* .ajs-display.unplayed button.play::before
{
  content: 'PLAY NOW';
} */
.ajs-display button.play {
  background-color: var(--ajs-nightdarkgreen);
  color: var(--ajs-light);
}
.ajs-display button.play:hover,
.ajs-display button.play.active {
  background-color: var(--ajs-nightlightgreen);
  color: white;
  text-decoration: none;
}
.ajs-display.initialized button.play {
  display: none;
}
.ajs-display:not(.loading) .loader {
  display: none;
}
.ajs-display.loading .loader {
  display: block;
  border: 10px solid #f3f3f3; /* Light grey */
  border-top: 10px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.annotate {
  font-style: italic;
  color: #366ed4;
}

.listbox-area {
  padding: 20px;
  background: #eee;
  border: 1px solid #aaa;
  font-size: 0;
}

.left-area,
.right-area {
  box-sizing: border-box;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
  width: 50%;
}

.left-area {
  padding-right: 10px;
}

.right-area {
  padding-left: 10px;
}

[role="listbox"] {
  min-height: 18em;
  padding: 0;
  background: white;
  border: 1px solid #aaa;
}

[role="option"] {
  display: block;
  padding: 0 1em 0 1.5em;
  position: relative;
  line-height: 1.8em;
}

[role="option"].focused {
  background: #bde4ff;
}

[role="option"][aria-selected="true"]::before {
  /* content: '✓'; */
  /* position: absolute; */
  /* left: 0.5em; */
}

button {
  font-size: 16px;
}

button[aria-disabled="true"] {
  /* opacity: 0.5; */
}

.move-right-btn {
  padding-right: 20px;
  position: relative;
}

.move-right-btn::after {
  content: ' ';
  height: 10px;
  width: 12px;
  background-image: url('../imgs/Arrows-Right-icon.png');
  background-position: center right;
  position: absolute;
  right: 2px;
  top: 6px;
}

.move-left-btn {
  padding-left: 20px;
  position: relative;
}

.move-left-btn::after {
  content: ' ';
  height: 10px;
  width: 12px;
  background-image: url('../imgs/Arrows-Left-icon.png');
  background-position: center left;
  position: absolute;
  left: 2px;
  top: 6px;
}

#ss_elem_list {
  max-height: 18em;
  overflow-y: auto;
  position: relative;
}

#exp_button {
  border-radius: 0;
  font-size: 16px;
  text-align: left;
  padding: 5px 10px;
  width: 150px;
  position: relative;
}

#exp_button::after {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #aaa;
  content: " ";
  position: absolute;
  right: 5px;
  top: 10px;
}

#exp_button[aria-expanded="true"]::after {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 0;
  border-bottom: 8px solid #aaa;
  content: " ";
  position: absolute;
  right: 5px;
  top: 10px;
}

#exp_elem_list {
  border-top: 0;
  max-height: 10em;
  overflow-y: auto;
  position: absolute;
  margin: 0;
  width: 148px;
}

.hidden {
  display: none;
}

.toolbar {
  font-size: 0;
}

.toolbar-item {
  border: 1px solid #aaa;
  background: #ccc;
}

.toolbar-item[aria-disabled="false"]:focus {
  background-color: #eee;
}

.offscreen {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  font-size: 14px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* SAVE WINDOW
---------- */

.ajs-save-display,
.ajs-restore-display {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: rgba(0,27,57,.85); */
  background: rgba(0, 0, 0, 0.85);
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
  visibility: hidden;
  top: -100%;
  pointer-events: none;
}
.ajs-save-display.active,
.ajs-restore-display.active {
  opacity: 1;
  visibility: visible;
  top: 0;
  pointer-events: all;
  z-index: 9;
}
.save_outer,
.restore_outer {
  width: calc(100% - 4%);
  height: calc(100% - 6%);
  margin: 3% 2%;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
}
.save_inner,
.restore_inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.save_display_title,
.restore_display_title {
  color: #ffffff;
  text-transform: uppercase;
  font-family: system-ui;
  text-align: center;
  padding: 10px;
  font-size: 1rem;
  background-color: #0069d9;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.save_row_input {
  position: relative;
  /* width: 100%; */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: system-ui;
  color: #007bff;
  padding: 10px;
  background-color: #eeeeee;
}

.save_input_label {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.save_input {
  cursor: pointer;
  padding: 5px;
  width: 300px;
  border: 1px solid #007bff;
  color: #007bff;
  font-size: 0.9rem;
}

.save_row_tabs,
.restore_row_tabs {
  position: relative;
  width: 100%;
  /* top: 60px; */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-top: 1px solid #007bff;
}

button {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
}

.ajs-save-display button {
  /* color: #007bff;
  border-color: #007bff; */
}

.save_tab,
.restore_tab {
  opacity: 0.35;
  width: 33%;
  border-radius: 0 !important;
  border: 0 !important;
  color: #007bff;
  border-color: #007bff;
  background-color: #ddd;
  font-size: 0.9rem;
}

button.save_tab:not(.active):hover,
button.restore_tab:not(.active):hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  opacity: 1;
}

button.save_tab:not(.active):active,
button.restore_tab:not(.active):active {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  opacity: 1;
}

.save_tab.active,
.restore_tab.active {
  opacity: 1;
  border: 0;
  cursor: default;
  background-color: #fff;
}

/* .ajs-save-display button:not(.active):hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  opacity: 1;
} */

/* .ajs-save-display button:not(.active):active {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;  
  opacity: 1;
} */

.ajs-save-display button.inactive,
.ajs-restore-display button.inactive {
  opacity: 0.3;
  cursor: default;
}

.save_close,
.restore_close {
  background-color: #fff;
  border: 1px solid transparent;
  color: #007bff;
  border-color: #007bff;

  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  position: absolute;
  left: 5px;
  top: 5px;
  border-radius: 50%;
}
.save_close:hover,
.restore_close:hover {
  color: white;
  background-color: red !important;
  border-color: red !important;
}
.save_close:active,
.restore_close:active {
  background-color: rgb(178, 0, 0) !important;
  border-color: rgb(178, 0, 0) !important;
}

.save_button,
.restore_button {
  border: 1px solid transparent;
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  position: relative;
  border-radius: 0.25rem;
  background-color: #28a745;
  border-color: #28a745;
  color: white;
}

.save_button:not(.inactive):hover,
.restore_button:not(.inactive):hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}
.save_button:not(.inactive):active,
.restore_button:not(.inactive):active {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.save_button_container,
.restore_button_container {
  text-align: center;
}
.save_button_container_file,
.save_button_container_browser,
.save_button_container_server {
  margin-top: 4rem;
}

.bootstrap_blue {
  color: #007bff;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: bold;
}

.save_row_panes,
.restore_row_panes {
  position: relative;
}

.save_pane,
.restore_pane {
  font-family: system-ui;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
  padding: 10px 15px 15px 15px;
  color: #000;
  position: absolute;
}

.save_pane.active,
.restore_pane.active {
  display: block;
  visibility: visible;
  opacity: 1;
  transition-delay: 0.15s, 0.15s;
}

.save_pane_qa,
.restore_pane_qa {
  cursor: pointer;
}

.save_pane:nth-of-type(1),
.restore_pane:nth-of-type(1) {
  text-align: left;
}

.save_pane:nth-of-type(2),
.restore_pane:nth-of-type(2) {
  text-align: center;
}

.save_pane:nth-of-type(3),
.restore_pane:nth-of-type(3) {
  text-align: right;
}

.save_pane_qa.active,
.restore_pane_qa.active {
}

.save_pane_qa_q,
.restore_pane_qa_q {
  /* text-decoration: underline; */
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  padding: 5px 20px 5px 8px;
  border-radius: 3px;
  display: inline-block;
  /* margin-bottom: 5px; */
  /* opacity: .65; */
  position: relative;

  background-color: white;
  color: #007bff;
  border: thin solid #007bff;
  transition: border-bottom-right-radius 0.15s ease-in-out,
    border-bottom-left-radius 0.15s ease-in-out,
    background-color 0.15s ease-in-out, color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.save_pane_qa.active .save_pane_qa_q,
.restore_pane_qa.active .restore_pane_qa_q {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.save_pane_qa.active .save_pane_qa_q:hover,
.restore_pane_qa.active .restore_pane_qa_q:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.save_pane_qa_q:after,
.restore_pane_qa_q:after {
  content: "\025B8"; /* 025B4 */
  color: #007bff;
  position: absolute;
  right: 6px;
  top: 11px;
  font-family: system-ui;
  font-size: 20px;
  transform: rotateZ(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.15s ease-in-out, top 0.15s ease-in-out;
  line-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.save_pane_qa.active .save_pane_qa_q:after,
.restore_pane_qa.active .restore_pane_qa_q:after {
  transform: rotateZ(90deg);
  top: 13px;
  color: #fff;
}

.save_pane_qa.active .save_pane_qa_q,
.restore_pane_qa.active .restore_pane_qa_q {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.save_pane_qa_q:hover,
.restore_pane_qa_q:hover {
  opacity: 1;
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.save_pane_qa_q:hover:after,
.restore_pane_qa_q:hover:after {
  color: #fff;
}

.save_pane_qa_a,
.restore_pane_qa_a {
  font-size: 0.9rem;
  text-align: left;
  height: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out,
    height 0.15s ease-in-out;
  padding: 10px;
  background-color: #eeeeee;
}

.save_pane_qa.active .save_pane_qa_a,
.restore_pane_qa.active .restore_pane_qa_a {
  height: unset;
  visibility: visible;
  opacity: 1;
}

/* RESTORE WINDOW
---------- */

.restore_input {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
  border: 1px solid transparent;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  position: relative;
  border-radius: 0.25rem;

  background-color: rgba(0, 123, 255, 0.2); /* #007bff; */
  border-color: rgba(0, 123, 255, 0.25); /* #007bff; */
  color: #007bff; /* white; */
  /* padding: 10px;   */
}

.restore_input_container {
  text-align: center;
  margin: 30px 0px;
  padding: 10px;
}

.unsupported {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.unsupported_feature .supported {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.unsupported_feature .unsupported {
  display: block;
  visibility: visible;
  opacity: 1;
}

.restore_listbox_container {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 1em;
}
.restore_listbox_label {
  color: #0069d9;
  font-family: system-ui;
  text-align: left;
  font-size: 1rem;
  background-color: #fff;
  margin-bottom: 10px;
  margin-left: 4px;
}

ul.listbox {
  max-height: 6em;
  overflow-y: auto;
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  overflow-y: auto;
  overflow-x: hidden;
}
[role="listbox"] {
  min-height: 6em;
  padding: 0;
  background: white;
  border: 1px solid #aaa;
}
[role="option"] {
  padding-left: 1em;
  font-size: 0.9rem;
  cursor: pointer;
}
[role="option"].focused {
  background: #0069d9;
  color: white;
}