/* bootstrap.css */

/* -------------------------------------------------- */
/* Bootstrap Styles */
/* -------------------------------------------------- */

:root {

  /* color: #007bff; */
  --blue:    #0d6efd;
  --indigo:  #6610f2;
  --purple:  #6f42c1;
  --pink:    #d63384;
  --red:     #dc3545;
  --orange:  #fd7e14;
  --yellow:  #ffc107;
  --green:   #198754;
  --teal:    #20c997;
  --cyan:    #0dcaf0;

  --white:    #fff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --gray-925: #1b1b1b;  /* Neutral dark gray, slightly lighter than 950 */
  --gray-950: #181818;  /* Pure dark gray, balanced */
  --gray-975: #121212;  /* Almost black but not too deep */
  --gray-990: #0a0a0a;  /* Very close to black, no tint */
  --black:    #000;

  --primary:   var(--blue);
  --secondary: var(--gray-600);
  --success:   var(--green);
  --info:      var(--cyan);
  --warning:   var(--yellow);
  --danger:    var(--red);
  --light:     var(--gray-100);
  --dark:      var(--gray-900);
}

.blue     { color: var(--blue); }
.indigo   { color: var(--indigo); }
.purple   { color: var(--purple); }
.pink     { color: var(--pink); }
.red      { color: var(--red); }
.orange   { color: var(--orange); }
.yellow   { color: var(--yellow); }
.green    { color: var(--green); }
.teal     { color: var(--teal); }
.cyan     { color: var(--cyan); }

.primary    { color: var(--primary); }
.secondary  { color: var(--secondary); }
.success    { color: var(--success); }
.info       { color: var(--info); }
.warning    { color: var(--warning); }
.danger     { color: var(--danger); }
.light      { color: var(--light); }
.dark       { color: var(--dark); }

.primary-bg    { background-color: var(--primary); }
.secondary-bg  { background-color: var(--secondary); }
.success-bg    { background-color: var(--success); }
.info-bg       { background-color: var(--info); }
.warning-bg    { background-color: var(--warning); }
.danger-bg     { background-color: var(--danger); }
.light-bg      { background-color: var(--light); }
.dark-bg       { background-color: var(--dark); }

.button-primary    { background-color: var(--primary); color: var(--white); }
.button-secondary  { background-color: var(--secondary); color: var(--white); }
.button-success    { background-color: var(--success); color: var(--white); }
.button-info       { background-color: var(--info); color: var(--white); }
.button-warning    { background-color: var(--warning); color: var(--white); }
.button-danger     { background-color: var(--danger); color: var(--white); }
.button-light      { background-color: var(--light); color: var(--white); }
.button-dark       { background-color: var(--dark); color: var(--white); }

.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; */
}
/* dialog.css */

/* -------------------------------------------------- */
/* AdventureJS dialog */
/* -------------------------------------------------- */

:root {
  --ajs-dialog-width: 100%;
  --ajs-dialog-height: 100%;
  --ajs-dialog-min-width: 480px;
  --ajs-dialog-min-height: 600px;
  --ajs-dialog-max-width: 100%;
  --ajs-dialog-max-height: 100%;
  --ajs-dialog-outer-width: calc(100% - 4%);
  --ajs-dialog-outer-height: calc(100% - 6%);
  --ajs-dialog-outer-margin: 3% 2%;
  --ajs-dialog-content-padding: 1em;
}

/* -------------------------------------------------- */
/* dialog colors */
/* -------------------------------------------------- */

html[data-theme="light"] {
  --ajs-dialog-background-color: color-mix(in srgb, var(--ajs-background-color) 80%, transparent);
  --ajs-dialog-border-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-color: var(--ajs-color);
  --ajs-dialog-emphasis-color: var(--blue);
  --ajs-dialog-option-descriptions-background-color: var(--ajs-background-color);
  --ajs-dialog-option-descriptions-border-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-outer-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-active-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-border-color: var(--blue);
  --ajs-dialog-radio-tab-color: var(--ajs-color);
  --ajs-dialog-title-background-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-title-color: var(--ajs-color);
  --ajs-restore-from-browser-listbox-label-background-color: #fff;
  --ajs-restore-from-browser-listbox-label-color: var(--blue);  
  --ajs-restore-from-file-input-background-color: color-mix(in srgb, var(--ajs-background-color) 90%, black);
  --ajs-restore-from-file-input-border-color: rgba(0, 123, 255, 0.25);
  --ajs-restore-from-file-input-color: var(--ajs-color);
  --ajs-save-dialog-input-background-color: color-mix(in srgb, var(--ajs-background-color) 90%, black);
  --ajs-save-dialog-input-border-color: var(--ajs-color);
  --ajs-save-dialog-input-color: var(--ajs-color);
  --ajs-ul-listbox-background-color: #fff;
  --ajs-ul-listbox-border-color: #ddd;
  --ajs-ul-listbox-option-focused-background-color: var(--blue);
  --ajs-ul-listbox-option-focused-color: #fff;
}

html[data-theme="dark"] {
  --ajs-dialog-background-color: color-mix(in srgb, var(--ajs-background-color) 80%, transparent);
  --ajs-dialog-border-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-color: var(--ajs-color);
  --ajs-dialog-emphasis-color: var(--blue);
  --ajs-dialog-option-descriptions-background-color: var(--ajs-background-color);
  --ajs-dialog-option-descriptions-border-color: var(--gray-600);
  --ajs-dialog-outer-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-background-color: var(--ajs-background-color);
  --ajs-dialog-radio-tab-border-color: var(--gray-600);
  --ajs-dialog-radio-tab-color: var(--ajs-color);
  --ajs-dialog-title-background-color: var(--ajs-dialog-emphasis-color);
  --ajs-dialog-title-color: var(--ajs-color);
  --ajs-display-background-color: #ddd;
  --ajs-restore-from-browser-listbox-label-background-color: #fff;
  --ajs-restore-from-browser-listbox-label-color: var(--blue);
  --ajs-restore-from-file-input-background-color: color-mix(in srgb, var(--ajs-background-color) 90%, white);
  --ajs-restore-from-file-input-border-color: rgba(0, 123, 255, 0.25);
  --ajs-restore-from-file-input-color: var(--ajs-color);
  --ajs-save-dialog-input-background-color: color-mix(in srgb, var(--ajs-background-color) 90%, white);
  --ajs-save-dialog-input-border-color: var(--ajs-color);
  --ajs-save-dialog-input-color: var(--ajs-color);
  --ajs-ul-listbox-background-color: #fff;
  --ajs-ul-listbox-border-color: #ddd;
  --ajs-ul-listbox-option-focused-background-color: var(--blue);
  --ajs-ul-listbox-option-focused-color: #fff;
}

/* Example: Custom themes (users can define these in UI) */
html[data-theme="solarized"] {
  --background-color: #fdf6e3;
  --text-color: #657b83;
}

html[data-theme="high-contrast"] {
  --background-color: #000000;
  --text-color: #ffcc00;
}

.ajs-dialog {
  position: absolute;
  width: var(--ajs-dialog-width);
  height: var(--ajs-dialog-height);
  color: var(--ajs-dialog-color);
  background-color: var(--ajs-dialog-background-color);
  top: 0;
  left: 0;
  opacity: 0;
  transition:
    opacity 0.25s ease-in-out,
    visibility 0.25s ease-in-out;
  visibility: hidden;
  pointer-events: none;
}

.ajs-dialog.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  z-index: 9;
}

.ajs-dialog-outer {
  width: var(--ajs-dialog-outer-width);
  height: var(--ajs-dialog-outer-height);
  margin: var(--ajs-dialog-outer-margin);
  background-color: var(--ajs-dialog-outer-background-color);
  border-radius: 8px;
  border: 1px solid var(--ajs-dialog-border-color);
  box-shadow: 0px 0px 20px 0px black;
}

.ajs-dialog-inner {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ajs-dialog-title {
  color: var(--ajs-dialog-title-color);
  text-transform: uppercase;
  font-family: system-ui;
  text-align: center;
  padding: 10px;
  font-size: 1rem;
  background-color: var(--ajs-dialog-title-background-color);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.ajs-save-dialog-input-container {
  position: absolute;
  bottom: calc(1em + 50px);
  left: 1em;
  width: calc(100% - 2em);
  text-align: center;
}

.ajs-save-dialog-input-label {
  margin-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
}

.ajs-save-dialog-input {
  cursor: pointer;
  padding: 8px 5px;
  width: 300px;
  color: var(--ajs-save-dialog-input-color);
  border: 1px solid var(--ajs-save-dialog-input-border-color);
  font-size: 0.9rem;
  text-align: center;
  background-color: var(--ajs-save-dialog-input-background-color);
  margin-top: 0.5em;
}

.ajs-dialog-emphasis {
  font-weight: bold;
  font-style: italic;
}

.ajs-dialog-radio-tab-container {
  display: flex;
  flex-direction: row;
}

.ajs-dialog-radio-tab {
  display: flex;
  opacity: 0.35;
  font-size: 0.9rem;
  padding: 0.5em 0.75em;
  z-index: 1;
  color: var(--ajs-dialog-radio-tab-color);
  background-color: var(--ajs-dialog-radio-tab-background-color);
  border-top: 1px solid var(--ajs-dialog-radio-tab-border-color);
  border-left: 1px solid var(--ajs-dialog-radio-tab-border-color);
}
.ajs-dialog-radio-tab:first-of-type {
  border-top-left-radius: 0.5em;
}
.ajs-dialog-radio-tab:last-of-type {
  border-top-right-radius: 0.5em;
  border-right: 1px solid var(--ajs-dialog-radio-tab-border-color);
}
.ajs-dialog-radio-tab input[type="radio" i] {
  margin-right: 0.25em;
}

.ajs-dialog-radio-tab.active,
.ajs-dialog-radio-tab:has(input:checked) {
  opacity: 1;
  cursor: default;
  z-index: 2;
}

.ajs-dialog-option-descriptions {
  padding: 0.5em;
  margin-top: -2px;
  border: 1px solid var(--ajs-dialog-option-descriptions-border-color);
  background-color: var(--ajs-dialog-option-descriptions-background-color);
  z-index: 1;
  position: relative;
}

.ajs-dialog-option-selection {
  display: none;
  position: absolute;
  bottom: 5em;
  transform: translateX(-50%);
  left: 50%;
}

.ajs-dialog-option-selection.active {
  display: block;
}

.ajs-dialog-button-container {
  position: absolute;
  bottom: 1em;
  left: 1em;
  text-align: center;
  width: calc(100% - 2em);
  height: 3em;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.ajs-dialog-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-dialog-button {
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  position: relative;
  border-radius: 0.25rem;
  opacity: 0.7;
  text-align: center;
}
.ajs-dialog-button:first-of-type {
  margin-right: 0.5em;
}
.ajs-dialog-button:last-of-type {
  margin-left: 0.5em;
}
.ajs-dialog-button:hover,
.ajs-dialog-button:focus {
  opacity: 1;
}

.ajs-dialog-button.inactive {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.ajs-dialog-button:not(.inactive):hover {
}
.ajs-dialog-button:not(.inactive):active {
  opacity: 1;
}

.ajs-cancel-button {
}

.ajs-save-button {
}

.ajs-dialog-option-description {
  font-family: system-ui;
}
.ajs-dialog-option-description p {
  margin-bottom: 1em;
}

/* -------------------------------------------------- */
/* RESTORE DIALOG */
/* -------------------------------------------------- */

.ajs-restore-from-file-input {
  width: calc( 100% - var(--ajs-dialog-content-padding) * 2);
  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.75em;
  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;
  font-size: 0.9rem;
  position: relative;
  border-radius: 0.25rem;
  background-color: var(--ajs-restore-from-file-input-background-color);
  border-color: var(--ajs-restore-from-file-input-border-color);
  color: var(--ajs-restore-from-file-input-color);
}

.ajs-restore-from-file-input-container {
  width: calc( 100% - var(--ajs-dialog-content-padding) * 2);
  text-align: center;
}

:not(.ajs-file-reader-unsupported) .ajs-file-reader-unsupported,
.ajs-file-reader-unsupported .ajs-file-reader-required {
  display: none;
  visibility: hidden;
  opacity: 0;
}

.ajs-file-reader-unsupported .ajs-file-reader-unsupported {
  display: block;
  visibility: visible;
  opacity: 1;
}

.ajs-restore-from-browser-listbox-container {
  width: 80%;
}
.ajs-restore-from-browser-listbox-label {
  font-family: system-ui;
  text-align: left;
  font-size: 1rem;
  margin-bottom: 10px;
  margin-left: 4px;
  /* color: var(--ajs-restore-from-browser-listbox-label-color); */
  /* background-color: var(--ajs-restore-from-browser-listbox-label-background-color); */
}

ul.listbox {
  max-height: 10em!important;
  overflow-y: auto;
  position: relative;
  width: 100%;
  border: 1px solid var(--ajs-ul-listbox-border-color);
  overflow-y: auto;
  overflow-x: hidden;
}
[role="listbox"] {
  min-height: 10em!important;
  max-height: 10em!important;
  padding: 0;
  /* background: var(--ajs-ul-listbox-background-color); */
  border: 1px solid var(--ajs-ul-listbox-border-color);
}
[role="option"] {
  padding-left: 1em;
  font-size: 0.9rem;
  cursor: pointer;
}
[role="option"].focused {
  background: var(--ajs-ul-listbox-option-focused-background-color);
  color: var(--ajs-ul-listbox-option-focused-color);
}

.ajs-dialog-content {
  flex: 1;
  padding: var(--ajs-dialog-content-padding);
}
/* display.css */

/* -------------------------------------------------- */
/* how to add a custom font face */
/* -------------------------------------------------- */

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

/* -------------------------------------------------- */
/* noscript */
/* -------------------------------------------------- */

.noscript-message {
  position: fixed;
  width: 100%;
  padding: 1rem;
  text-align: center;
  font-size: 1.2rem;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: var(--ajs-noscript-background-color);
  color: var(--ajs-noscript-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ajs-noscript-background-color: var(--ajs-dark-background-color);
    --ajs-noscript-color: var(--ajs-dark-color);
  }
}

/* -------------------------------------------------- */
/* AdventureJS main display */
/* -------------------------------------------------- */

:root {
  --ajs-dark-background-color: #1a1919;
  --ajs-dark-color: var(--gray-100);

  --ajs-light-background-color: var(--gray-100);
  --ajs-light-color: var(--gray-950);

  --ajs-noscript-background-color: var(--ajs-light-background-color);
  --ajs-noscript-color: var(--ajs-light-color);

  --ajs-bold-font: sans-serif;
  --ajs-compasspoint-cardinal-angle-face: 5px solid transparent;
  --ajs-compasspoint-cardinal-flat-face: 5px solid
    var(--ajs-compasspoint-disabled-color);
  --ajs-compasspoint-down-top: 60%;
  --ajs-compasspoint-grid-size: 7px;
  --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-content-height: 480px;
  --ajs-content-max-height: 100vh;
  --ajs-content-max-width: 100vw;
  --ajs-content-min-height: 480px;
  --ajs-content-min-width: 600px;
  --ajs-content-width: 600px;
  --ajs-debug-font-size: initial;
  --ajs-debug-line-height: initial;
  --ajs-display-background-color-night: var(--ajs-nightdarker);
  --ajs-display-border: 1px solid var(--ajs-display-border-color);
  --ajs-display-height: 480px;
  --ajs-display-max-height: 100vh;
  --ajs-display-max-width: 100vw;
  --ajs-display-min-height: 480px;
  --ajs-display-min-width: 420px; /* 600px; */
  --ajs-display-width: 600px;
  --ajs-font-family: sans-serif;
  --ajs-font-size: 0.9em;
  --ajs-input-height: 20px;
  --ajs-line-height: 1.25em;
  --ajs-output-height: calc(
    var(--ajs-display-height) - var(--ajs-titlebar-height) -
      var(--ajs-statusbar-height) - var(--ajs-input-height)
  );
  --ajs-statusbar-height: 20px;
  --ajs-titlebar-height: 10px;
  --ajs-wrapper-height: 100vh;
  --ajs-wrapper-width: 100vw;
}

/* -------------------------------------------------- */
/* light theme */
/* -------------------------------------------------- */

html[data-theme="light"] {
  --ajs-background-color: var(--ajs-light-background-color);
  --ajs-body-background-color: #1c1852;
  --ajs-body-color: #111;
  --ajs-border-color: #444;
  --ajs-code-color: #599aff;
  --ajs-color: var(--ajs-light-color);
  --ajs-compasspoint-disabled-color: #666;
  --ajs-compasspoint-enabled-color: #fff;
  --ajs-compasspoint-enabled-active-color: #00ff00;
  --ajs-compasspoint-enabled-unused-color: #fff;
  --ajs-compasspoint-enabled-locked-color: #ff0000;
  --ajs-display-a-color: forestgreen;
  --ajs-display-background-color: #fff;
  --ajs-display-border-color: #444;
  --ajs-display-color: var(--ajs-light-color);

  --ajs-display-debug-color: #ff9700;
  --ajs-display-debug0-color: #ff9700;
  --ajs-display-debug0-verb-color: #ff0000;
  --ajs-display-debug0-background-color: #ff9700;

  --ajs-display-hook-ov-color: #d1e168;

  --ajs-display-hook-color: #4bc4f7;
  --ajs-display-hook0-color: var(--ajs-dark-background-color);
  --ajs-display-hook0-background-color: #4bc4f7;

  /* --ajs-display-verbphase-color: #31f0bf; */
  --ajs-display-verbphase-background-color: #31f0bf;

  /* --ajs-display-verbaction-color: #4fcbff; */
  --ajs-display-verbaction-background-color: #4fcbff;

  /* --ajs-display-verbreaction-color: #83a9fb; */
  --ajs-display-verbreaction-background-color: #83a9fb;

  --ajs-display-loading-border-color: #f3f3f3;
  --ajs-display-loading-border-top-color: #3498db;

  --ajs-input-background-color: #e2ffe7;
  --ajs-input-color: #000;
  --ajs-light: #dedede;
  --ajs-nightdarker: #1a1919;
  --ajs-nightdarkgreen: #349418;
  --ajs-nightlight: #c9c9c9;
  --ajs-nightlightgreen: #41e212;
  --ajs-page-background-color: #242323;
  --ajs-titlebar-background-color: #f4efff;
  --ajs-titlebar-color: var(--ajs-display-color);
}

/* -------------------------------------------------- */
/* dark theme */
/* -------------------------------------------------- */

html[data-theme="dark"] {
  --ajs-background-color: var(--ajs-dark-background-color);
  --ajs-body-background-color: #000;
  --ajs-body-color: #eee;
  --ajs-border-color: #444;
  --ajs-code-color: #599aff;
  --ajs-color: var(--ajs-dark-color);
  --ajs-compasspoint-disabled-color: #666;
  --ajs-compasspoint-enabled-color: #fff;
  --ajs-compasspoint-enabled-active-color: #00ff00;
  --ajs-compasspoint-enabled-unused-color: #fff;
  --ajs-compasspoint-enabled-locked-color: #fff;
  --ajs-display-a-color: chartreuse;
  --ajs-display-background-color: #111;
  --ajs-display-border-color: #444;
  --ajs-display-color: var(--ajs-dark-color);

  --ajs-display-debug-color: #ff9700;
  --ajs-display-debug0-color: #ff9700;
  --ajs-display-debug0-verb-color: #ff0000;
  --ajs-display-debug0-background-color: #ff9700;

  --ajs-display-hook-ov-color: #d1e168;

  --ajs-display-hook-color: #4bc4f7;
  --ajs-display-hook0-color: var(--ajs-dark-background-color);
  --ajs-display-hook0-background-color: #4bc4f7;

  /* --ajs-display-verbphase-color: #31f0bf; */
  --ajs-display-verbphase-background-color: #31f0bf;

  /* --ajs-display-verbaction-color: #4fcbff; */
  --ajs-display-verbaction-background-color: #4fcbff;

  /* --ajs-display-verbreaction-color: #83a9fb; */
  --ajs-display-verbreaction-background-color: #83a9fb;

  --ajs-display-loading-border-color: #f3f3f3;
  --ajs-display-loading-border-top-color: #3498db;
  --ajs-input-background-color: #000;
  --ajs-input-color: #eee;
  --ajs-light: #dedede;
  --ajs-nightdarker: #1a1919;
  --ajs-nightdarkgreen: #349418;
  --ajs-nightlight: #c9c9c9;
  --ajs-nightlightgreen: #41e212;
  --ajs-page-background-color: #242323;
  --ajs-titlebar-background-color: var(--ajs-display-background-color);
  --ajs-titlebar-color: var(--ajs-display-color);
}

/* Example: Custom themes (users can define these in UI) */
html[data-theme="solarized"] {
  --background-color: #fdf6e3;
  --text-color: #657b83;
}

html[data-theme="high-contrast"] {
  --background-color: #000000;
  --text-color: #ffcc00;
}

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

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

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

.ajs-p.ajs-debug {
  font-size: var(--ajs-debug-font-size);
  /* margin-bottom: 0; */
  line-height: var(--ajs-debug-line-height);
}

.ajs-p.ajs-debug {
  margin-bottom: 0;
}
.ajs-p.ajs-debug:not(:has(+ .ajs-p.ajs-debug)) {
  margin-bottom: 1em;
}

.ajs-italic {
  font-style: italic;
}

.ajs-bold {
  font-weight: bold;
}

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

.ajs-display {
  color: var(--ajs-display-color);
  background-color: var(--ajs-display-background-color);
  width: var(--ajs-display-width);
  height: var(--ajs-display-height);
  min-width: var(--ajs-display-min-width);
  min-height: var(--ajs-display-min-height);
  max-width: var(--ajs-display-max-width);
  max-height: var(--ajs-display-max-height);
  position: relative;
  border: var(--ajs-display-border);
  font-family: var(--ajs-font-family);
  font-size: var(--ajs-font-size);
  line-height: var(--ajs-line-height);
  text-align: left;
  box-shadow: 0px 0px 10px 0px #00000033;
}
.ajs-display:not(.initialized) {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
.ajs-content {
  /* width: var(--ajs-content-width); */
  height: var(--ajs-display-height);
  /* min-width: var(--ajs-content-min-width); */
  /* min-height: var(--ajs-content-min-height); */
  /* max-width: var(--ajs-content-max-width); */
  /* max-height: var(--ajs-content-max-height); */
  display: flex;
  flex-direction: column;
}

.ajs-titlebar {
  width: calc(100% - 30px);
  padding: 5px 15px;
  text-align: center;
  height: var(--ajs-titlebar-height);
  line-height: 10px;
  font-size: 0.5em;
  font-family: Arial, Helvetica, sans-serif;
  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-themer-container {
  position: absolute;
  right: 1em;
  top: 0.5em;
}

.ajs-themer {
  background: transparent;
  color: var(--ajs-color);
  font-size: 1em;
  text-transform: uppercase;
  cursor: pointer;
}

.ajs-statusbar {
  width: calc(100% - 30px);
  height: var(--ajs-statusbar-height);
  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-enabled-active-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-enabled-active-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.locked {
  border-bottom-color: var(--ajs-compasspoint-enabled-locked-color);
}
.ajs-compasspoints.north .ajs-compasspoint.north:hover,
.ajs-compasspoints.north .ajs-compasspoint.north.active {
  border-bottom-color: var(--ajs-compasspoint-enabled-active-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-enabled-active-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-enabled-active-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-enabled-active-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-enabled-active-color);
  border-top-color: var(--ajs-compasspoint-enabled-active-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-enabled-active-color);
  border-bottom-color: var(--ajs-compasspoint-enabled-active-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-enabled-active-color);
  border-top-color: var(--ajs-compasspoint-enabled-active-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-enabled-active-color);
  border-bottom-color: var(--ajs-compasspoint-enabled-active-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;
  opacity: 0.3;
  color: var(--ajs-input-color);
}

.ajs-input {
  width: calc(100% - 20px);
  height: var(--ajs-input-height);
  padding: 10px;
  outline-style: none;
  /* box-shadow: inset 0 0 6px #222; */
  text-indent: 15px;
  font-size: 16px;
  color: var(--ajs-input-color);
  background-color: var(--ajs-input-background-color);
}
.ajs-input:-webkit-autofill,
.ajs-input:-webkit-autofill:hover,
.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;
}
.ajs-input::placeholder,
.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;
  cursor: pointer;
}

.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;
}
.ajs-input-wrapper .icon:before {
  color: var(--ajs-input-color);
}

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

.ajs-output-wrapper {
  /* height: var(--ajs-output-height); */
  flex: 1;
  overflow: scroll;
  scroll-behavior: smooth;
}

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

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

.ajs-player-input + .ajs-inferred {
  margin-right: 0.25em;
}

.ajs-player-input:not(.integer):has(+ .ajs-inferred) {
  /* use inline-block to keep inferred on same line */
  /* display: inline-block; */
  margin-right: 0.25em;
  margin-top: 0.5em;
}

.ajs-player-input.integer:has(+ .ajs-inferred) {
  /* use block to break inferred to next line */
  display: block;
}

.ajs-inferred + .ajs-inferred {
  /* keep multiple inferred on same line */
  display: inline-block;
  margin-right: 0.25em;
}

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

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

/*
.ajs-room-name controls the display of room names 
in room descriptions.
*/
.ajs-room-name {
  font-weight: bold;
  font-family: var(--ajs-bold-font);
  margin-bottom: 0;
}

.ajs-dark-room {
}

/*
.ajs-room-description controls the display of room descriptions.
*/
.ajs-room-description {
}

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

.ajs-debug,
.ajs-hook {
  font-size: 0.9em;
  font-style: normal;
  font-family: sans-serif;
  display: block;
}
.ajs-debug {
  color: var(--ajs-display-debug-color);
}
.ajs-hook {
  color: var(--ajs-display-hook-color);
}

.ajs-hook .ajs-verb {
  color: var(--ajs-display-debug0-verb-color);
}
.ajs-hook .ajs-actor {
  color: var(--ajs-display-debug0-color);
}
/* .ajs-hook .ajs-action {
  color: var(--ajs-display-hook-color);
} */
.ajs-hook .ajs-target {
  color: var(--ajs-display-debug0-color);
}
.ajs-hook .ajs-tryfound {
  color: var(--ajs-display-color);
  font-size: 0.75em;
}
.ajs-hook .ajs-ov {
  color: var(--ajs-display-hook-ov-color);
}

.ajs-debug ._0,
.ajs-hook ._0 {
  font-size: 0.9em;
  margin-right: 3px;
  padding: 2px 4px 2px 4px;
  border-radius: 1px;
  margin-right: 3px;
  font-weight: bold;
}
.ajs-debug ._0 {
  color: var(--ajs-dark-background-color);
  background-color: var(--ajs-display-debug0-background-color);
}
.ajs-hook ._0 {
  color: var(--ajs-display-hook0-color);
  background-color: var(--ajs-display-hook0-background-color);
}

.ajs-hook.ajs-verbphase ._0 {
  background-color: var(--ajs-display-verbphase-background-color);
}
.ajs-hook.ajs-verbphase ._2 {
}
.ajs-hook.ajs-verbphase ._2 .ajs-action {
  color: var(--ajs-display-verbphase-background-color);
}

.ajs-hook.ajs-verbaction ._0 {
  background-color: var(--ajs-display-verbaction-background-color);
}
.ajs-hook.ajs-verbaction ._2 {
}
.ajs-hook.ajs-verbaction ._2 .ajs-action {
  color: var(--ajs-display-verbaction-background-color);
}

.ajs-hook.ajs-verbreaction ._0 {
  background-color: var(--ajs-display-verbreaction-background-color);
}
.ajs-hook.ajs-verbreaction ._2 {
}
.ajs-hook.ajs-verbreaction ._2 .ajs-action {
  color: var(--ajs-display-verbreaction-background-color);
}

.ajs-debug ._0::after {
}

.ajs-debug ._1::before {
  content: "   ";
  opacity: 0.6;
}

.ajs-debug ._1::after {
  /* 
  content: " >";
  font-size: 0.9em;
  vertical-align: middle;
  margin-right: 5px;
  margin-left: 5px;
   */
}

.ajs-hook ._1 {
  display: none;
}

.ajs-debug ._2 {
  color: var(--ajs-display-debug0-color);
}

/* .ajs-hook ._2 {
  color: var(--ajs-display-hook-color);
} */

/* modify to apply styles to unparsed input */
.ajs-unparsed {
  font-family: inherit;
  font-size: inherit;
  margin-right: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

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

/* 
.ajs-choice controls the display of disambiguation choices like
"Which did you mean? 1) A, 2) B, or 3) C."
*/
.ajs-choice {
  margin-left: 5px;
  color: inherit;
  background-color: inherit;
  border-radius: inherit;
  padding: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
}

/* 
.ajs-aspect controls the display of nested lists of content like
"On A you see B, C, and D."
*/
.ajs-aspect {
  display: block;
  margin-top: 1em;
}

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

ul.ajs-nolist li {
  list-style-type: none;
}

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

.ajs-display a {
  color: var(--ajs-display-a-color);
}

.ajs-custom-exit-name {
}
.ajs-extended-exit-name {
}
.ajs-exit-direction {
  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 */
/* -------------------------------------------------- */

.ajs-score-msg {
  font-style: italic;
  font-size: 1.1em;
}

.ajs-score-msg.up {
  color: #00bc00;
}

.ajs-score-msg.down {
  color: #ff1818;
}

/* -------------------------------------------------- */
/* 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 var(--ajs-display-loading-border-color);
  border-top: 10px solid var(--ajs-display-loading-border-top-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* -------------------------------------------------- */
/* accessibility */
/* -------------------------------------------------- */

.ajs-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hidden {
  display: none;
}