.menu .submenu-actor>* {
  --menu-color: #436767;
  --menu-hover-color: #5f9191;
}

.menu .submenu-action>* {
  --menu-color: #312a5a;
  --menu-hover-color: #694c9e;
}

.menu .submenu-tag-0>* {
  --menu-color: #5d833e;
  --menu-hover-color: #6cdb91;
}

.menu .submenu-tag-1>* {
  --menu-color: #813e7e;
  --menu-hover-color: #db6edf;
}

.menu .submenu-tag-2>* {
  --menu-color: #477b94;
  --menu-hover-color: #70d2df;
}

.menu .submenu-tag-selected>* {
  --menu-color: #707070;
  --menu-hover-color: #b9b9b9;
}

.menu .submenu-danger>* {
  --menu-color: #674343;
  --menu-hover-color: #915f5f;
}

.menu .submenu-filter-text>* {
  color: rgb(185, 185, 185);
  --menu-color: #3a3a3a;
  --menu-hover-color: #3a3a3a;
  cursor: default;
}

.menu .submenu-filter-title>* {
  --menu-color: #202020;
  --menu-hover-color: #202020;
  cursor: default;
}

header.macro-codeeditor-toolbar {
  display: grid;
  position: sticky;
  top: 0;
  align-items: center;
  /*background-color: #111111;*/
  z-index: 10;
  margin-bottom: 4px;
}

header.macro-codeeditor-toolbar.disabled {
  position: relative;
  z-index: initial;
}

header.macro-codeeditor-toolbar>* {
  grid-column: 1;
  grid-row: 1;
}

header.macro-codeeditor-toolbar.disabled>.toolbar {
  visibility: hidden;
}

header.macro-codeeditor-toolbar.disabled>.macro-codeeditor-toolbar-off {
  display: flex;
  width: 100%;
}

.macro-codeeditor-toolbar-off {
  display: none;
}

.macro-codeeditor-split {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.macro-codeeditor-split>* {
  display: flex;
  flex-direction: column;
}

.macro-codeeditor-codepane {
  position: relative;
  width: 100%;
}

.macro-codeeditor-togglepreviewbtn {
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: #222;
  border: 1px solid #333;
  border-right-color: transparent;
  border-top-color: transparent;
  width: 30px;
  height: 30px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.macro-codeeditor-previewpane {
  overflow: hidden;
}

.macro-codeeditor-previewpane>header {
  display: flex;
  border: 1px solid gray;
  border-bottom: none;
  background-color: #333;
  padding: 0 0.5em;
  white-space: nowrap;
}

.macro-codeeditor-previewpane>header>*:first-child {
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
  flex-grow: 1;
}

.macro-codeeditor-previewpane>div>aside {
  color: #888;
  background-color: #222;
  border: 1px solid gray;
  border-bottom: none;
  padding: 0.5em;
  font-size: smaller;
}

.macro-codeeditor-previewpane>div>div {
  background-color: #111;
  border: 1px solid gray;
  padding: 0.5em;
}

.macro-codeeditor-jar {
  --code-font: 'Consolas', 'Courier New', monospace;
  width: 100%;
  color: #eee;
  background-color: #1A1A1A;
  border: 1px solid #333;
  padding: .4em;
  box-sizing: border-box;
}

.macro-codeeditor-jar:not(:disabled):focus,
.macro-codeeditor-jar:not(:disabled):hover {
  /*background-color: #222;*/
  background-color: #1E1E1E;
  border-color: #666;
}

.macro-codeeditor-fallback textarea {
  /* fallback */
  width: 100%;
  box-sizing: border-box;
}

.tooltip .validation-error-msg {
  margin-top: 1em;
  padding: 4px 8px;
  color: white;
  background-color: #b71c1c;
  border-radius: 4px;
}

.tooltip .validation-error-msg+.validation-error-msg {
  margin-top: 4px;
}

.validation-error {
  text-decoration: wavy red underline !important;
}

/*
 * Styles for TWEE3 syntax highlighting
 */

.language-twee3 .token {
  font-family: var(--code-font, monospace);
}

.language-twee3 .token.html {
  color: #569cd6;
}

.language-twee3 .token.html-delim {
  opacity: 0.6;
}

.language-twee3 .token.attr-name {
  color: #9cdcfe;
}

.language-twee3 .token.attr-value {
  color: #ce9178;
}

.language-twee3 .token.attr-equals {
  color: #d4d4d4;
}

.language-twee3 .token.macro {
  color: #d7ba7d;
}

.language-twee3 .token.macro-control {
  color: #c586c0;
}

.language-twee3 .token.macro-delim,
.language-twee3 .token.macro-closing {
  opacity: 0.6;
}

.language-twee3 .token.macro-inner {
  color: #dcdcaa;
}

.language-twee3 .token.string {
  color: #ce9178;
}

.language-twee3 .token.number {
  color: #b5cea8;
}

.language-twee3 .token.boolean,
.language-twee3 .token.keyword {
  color: #569cd6;
  /*color: #4fc1ff;*/
}

.language-twee3 .token.operator {
  color: #d4d4d4;
}

.language-twee3 .token.punctuation {
  color: #d4d4d4;
}

.language-twee3 .token.comment {
  color: #6a9955;
}

.language-twee3 .token.error,
.language-twee3 .token.error * {
  color: #f44747 !important;
}


/**
 * Simple mode
 */

.codeeditor-simple .language-twee3 .token.macro {
  border: 1px solid #444;
  margin: 0 2px;
}

.codeeditor-simple .language-twee3 .token.macro-control {
  border: none;
}

.codeeditor-simple .language-twee3 .token.macro {
  border: 1px solid #444;
  margin: 0 2px;
}

.codeeditor-simple .language-twee3 .token.macro-delim {
  display: none;
}