/* ----------------------------------------- */
/*  Root                                     */
/* ----------------------------------------- */
:root {
  --color-text-light-highlight: #f0f0e0;
  --color-text-light-heading: #c9c7b8;
  --color-text-light-primary: #b5b3a4;
  --color-text-dark-primary: #191813;
  --color-text-dark-secondary: #4b4a44;
  --color-text-dark-header: #23221d;
  --color-text-dark-inactive: #7a7971;
  --color-text-hyperlink: #ff6400;
  --color-text-light-0: #fff;
  --color-text-light-1: #eee;
  --color-text-light-2: #ddd;
  --color-text-light-3: #ccc;
  --color-text-light-4: #bbb;
  --color-text-light-5: #aaa;
  --color-text-light-6: #999;
  --color-text-light-7: #888;
  --color-text-dark-1: #111;
  --color-text-dark-2: #222;
  --color-text-dark-3: #444;
  --color-text-dark-4: #555;
  --color-text-dark-5: #666;
  --color-text-dark-6: #777;
  --color-border-light-1: #ddd;
  --color-border-light-2: #999;
  --color-border-dark-1: #111;
  --color-border-dark-2: #222;
  --color-border-dark-3: #333;
  --color-border-dark-4: #444;
  --color-border-dark-5: #666;
  --color-shadow-primary: #ff0000;
  --color-shadow-highlight: #ff6400;
  --color-shadow-dark: #000;
  --color-underline-inactive: #7a7971;
  --color-underline-active: #44191A;
  --color-underline-header: #782e22;
  --color-border-light-highlight: #f0f0e0;
  --color-border-light-primary: #b5b3a4;
  --color-border-light-secondary: #c9c7b8;
  --color-border-light-tertiary: #7a7971;
  --color-border-dark: #000;
  --color-border-dark-primary: #191813;
  --color-border-dark-secondary: #23221d;
  --color-border-dark-tertiary: #4b4a44;
  --color-border-highlight: #ff6400;
  --color-border-highlight-alt: #ff0000;
  --color-bg-btn-minor-inactive: #c9c7b8;
  --color-bg-btn-minor-active: #b5b3a4;
  --color-bg-option: #dad8cc;
  --z-index-canvas: 0;
  --z-index-app: 30;
  --z-index-ui: 60;
  --z-index-window: 100;
  --sidebar-width: 300px;
  --sidebar-header-height: 32px;
  --sidebar-item-height: 48px;
  --hotbar-height: 52px;
  --hotbar-width: 578px;
  --macro-size: 50px;
  --players-width: 200px;
  --form-field-height: 26px;
  --font-primary: "Signika", sans-serif;
  --font-mono: monospace;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --line-height-12: 0.75rem;
  --line-height-16: 1rem;
  --line-height-20: 1.25rem;
  --line-height-30: 1.875rem;
}


/* .pf2e.item.sheet form>header img {
  border-radius: 10px;
  box-shadow: var(--gold-and-glow);
} */


/* .app:not(#sidebar, .sheet):hover {
    background-color: hsla(0, 0%, 00%, 50%);
} */
.app:not(.sheet):hover {
  color: white;
}

.app.pc,
.app.npc,
.app.hazard {
  color: white;
}

.app.pc {
  background-color: var(--paizo-red);
}

.app.npc {
  background-color: var(--paizo-blue);
}

.app.hazard {
  color: white;
  background-color: #1D3B3B;
}

.hazard .bgcontainer {
  display: none;
}

.app.hazard .window-content {
  background: none;
  color: white;
  text-shadow: 0px 0px 3px black;
}

.app.hazard .traits-bar {
  display: flex;
  gap: 10px;
}

.app.hazard .traits-bar .trait {
  background-color: var(--alt-dark);
  color: #fff;
  font-family: var(--sans-serif);
  padding: .1em 1em;
  display: flex;
  border-radius: 5px;
  box-shadow: var(--gold-and-glow);
  text-transform: uppercase;
  align-content: center;
  justify-items: center;
}

.app.hazard [data-pf2-check],
.app.hazard a.entity-link,
.app.hazard a.content-link,
.app.hazard a.inline-roll,
.app.hazard [data-pf2-effect-area] {
  color: black;
  text-shadow: none;
}


/* .header-button text {
    display: none;
} */

/* .app.pc .window-header:hover{
    background-color: var(--paizo-red-bright);
} */


/* .app.npc .window-header:hover{
    background-color: var(--paizo-blue-bright);
} */

.minimized .header-button {
  display: none;
}

.sheet .window-header .window-title {
  font-size: large;
}

.window-content,
#chat {
  text-shadow: initial;
}

.sidebar-popout .window-content {
  text-shadow: 0px 0px 3px black;
}

.window-content {
  border-radius: 0px 0px 5px 5px;
}

.window-header {
  border-bottom: 1px solid black;
}

.minimized>.window-header {
  border-bottom: none;
}



.control {
  text-shadow: 0px 0px 3px black;
  mix-blend-mode: hard-light;
}



#controls ol.sub-controls {
  display: flex !important;
}

.control {
  /* transition: background-color 0.15s ease-in-out; */
}

.control:hover {
  background-color: var(--paizo-red);
}

.control.toggle {
  background-color: var(--paizo-blue-dark);
}

.control.toggle:hover,
.control.toggle.active {
  background-color: var(--paizo-blue);
}

.control.toggle.active:hover {
  background-color: var(--paizo-blue-bright);
}



#navigation .scene {
  padding: 3px 5px;
  height: 30px;
  display: flex;
  align-items: center;
}

.scene {
  /* transition: background-color 0.15s ease-in-out; */
  color: white;
}


.app.scene {
  position: static;
  z-index: 1;
}

.app.scene:hover {
  background-color: var(--paizo-red);
}

.app.scene.gm {
  background-color: var(--paizo-blue-dark);
}

.app.scene.view.gm {
  background-color: var(--paizo-blue);
}

#navigation .app.scene.gm:hover {
  background-color: var(--paizo-blue-bright);
}

.app.scene.active {
  box-shadow: var(--gold-and-glow), var(--glassy);
}


/* #ui-top {
    margin-top: 10px;
}

#ui-left {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px
}

#ui-bottom {
    margin-bottom: 10px;
}

#ui-right {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
} */



.vtt {
  padding: 10px;
  gap: 10px;
}

.vtt #sidebar {
  height: 100%;
}

/* #navigation #nav-toggle:hover {
    background-color: var(--paizo-red);
    color: white;
} */



.page-control:hover {
  color: white;
}




.window-content form {
  text-shadow: initial;
}






















/* ----------------------------------------- */
/*  Fonts                                    */
/* ----------------------------------------- */
@font-face {
  font-family: 'Signika';
  src: url('/fonts/signika/signika-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Signika';
  src: url('/fonts/signika/signika-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Modesto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/modesto-condensed/modesto-condensed.woff2') format('woff2');
}

@font-face {
  font-family: 'Modesto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2');
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  /* width: 100vw;
  height: 100vh; */
  margin: 0;
  overflow: hidden;
  font-family: var(--font-primary);
  font-size: var(--font-size-14);
}

body.game {
  display: flex;
  justify-content: flex-start;
}

body.background {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

body:not(.background) {
  /*
     * Work around for Chrome bug when pressing PgUp/Down in a textarea/TinyMCE editor:
     * https://bugs.chromium.org/p/chromium/issues/detail?id=890248
     * This distorts the background image on world screens so isn't applied there.
     */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  gap: 10px
}

#ui-left,
#ui-middle,
#ui-right {
  pointer-events: none;
  z-index: var(--z-index-app);
}

#ui-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#ui-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#ui-right {
  flex: none;
}

#ui-top {
  /* margin: 0 10px 0 18px; */
}

#ui-top.offset {
  /* margin-left: -90px; */
}

#ui-bottom {
  justify-content: space-evenly;
}

#ui-bottom>div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

#ui-bottom>#camera-views {
  justify-content: flex-start;
}

#sidebar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  /* width: var(--sidebar-width); */
  /* height: calc(100vh - 10px); */
  overflow: hidden;
  /* margin: 5px; */
  padding: 0;
}

#sidebar {
  flex: 1;
}

canvas#board {
  z-index: var(--z-index-canvas);
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.banner {
  position: fixed;
  width: 60%;
  max-width: 960px;
  margin: 0 auto;
  top: 28vh;
  text-align: center;
  padding: 2px 0.5em;
  background: goldenrod;
  border: 1px solid var(--color-border-dark-1);
  border-radius: 5px;
  box-shadow: 0 0 10px var(--color-shadow-dark);
}

#fps {
  width: 100px;
  /* margin: 0 10px 10px 0; */
  align-self: flex-end;
  display: none;
  font-family: var(--font-mono);
  /* background: rgba(0, 0, 0, 0.5); */
  text-align: center;
  line-height: 30px;
  color: var(--color-text-light-heading);
  border: 1px solid var(--color-border-light-tertiary);
  border-radius: 5px;
}

#fps label {
  color: var(--color-text-dark-inactive);
}

/* ---------------------------------------- */
/*  Text                                    */
/* ---------------------------------------- */
/* Headers */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5rem;
  padding: 0;
  font-weight: normal;
}

h1 {
  font-size: 2em;
  /* border-bottom: 2px solid var(--color-underline-header); */
}

h2 {
  font-size: 1.5em;
  /* border-bottom: 1px solid var(--color-underline-header); */
}

h3 {
  font-size: 1.125em;
}

/* Links */
a {
  cursor: pointer;
}

a[href] {
  /* color: var(--color-text-hyperlink); */
  color: pink;
}

a:hover {
  /* text-shadow: 0 0 8px var(--color-shadow-primary); */
}

a.entity-link,
a.content-link,
a.inline-roll {
  background: #DDD;
  padding: 1px 4px;
  border: 1px solid var(--color-border-dark-tertiary);
  border-radius: 2px;
  white-space: nowrap;
  word-break: break-all;
}

a.entity-link i,
a.content-link i,
a.inline-roll i {
  color: var(--color-text-dark-inactive);
}

a.entity-link.playing i:before,
a.content-link.playing i:before,
a.inline-roll.playing i:before {
  content: "\f0c8";
}

a.entity-link.broken,
a.content-link.broken {
  background: rgba(255, 0, 0, 0.05);
  border: 1px dashed red;
}

a.inline-roll.gmroll {
  background: #e8e8ef;
  border-color: #545469;
}

a.inline-roll.blindroll {
  background: #f5eaf5;
  border-color: #6b476b;
}

/* Paragraph */
p {
  margin: 0.5em 0;
}

::selection {
  background: #82817d;
  color: var(--color-text-light-0);
}

dt {
  font-weight: bold;
}

dd {
  padding-left: 5px;
  margin: 3px 0;
}

/* HR separators */
hr {
  border: none;
  border-top: 1px solid var(--color-border-light-primary);
  border-bottom: 1px solid var(--color-border-light-highlight);
}

/* Buttons */
button[hidden] {
  display: none;
}

/* Blockquote */
blockquote {
  margin: 0.5em 0 0.5em 10px;
  padding: 0 0 0 20px;
  border-left: 3px solid var(--color-border-light-tertiary);
  font-style: italic;
}

blockquote em {
  font-style: normal;
}

/* Secret Sections */
section.secret {
  padding: 0 5px;
  background: rgba(53, 0, 121, 0.05);
  border-top: 1px solid var(--color-border-dark-5);
  border-bottom: 1px solid var(--color-border-dark-5);
}

/* ---------------------------------------- */
/* Tables                                   */
/* ---------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid var(--color-border-light-tertiary);
  border-bottom: 1px solid var(--color-border-light-tertiary);
  margin: 0.5em 0;
}

table thead {
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-text-light-highlight);
  text-shadow: 1px 1px var(--color-shadow-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.2);
}

table td:first-child {
  padding-left: 2px;
}

table td,
table th {
  padding: 0.25em 0;
}

/* ----------------------------------------- */
/* Scrollbar
/* ----------------------------------------- */
/* ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  box-shadow: 0 0 1px #999 inset;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  outline: none;
  border-radius: 3px;
  background: #782e22;
  border: 1px solid var(--color-border-highlight);
}
:root {
  scrollbar-width: thin;
  scrollbar-color: #782e22 #111;
} */
/* ----------------------------------------- */
/* Images
/* ----------------------------------------- */
img {
  /* box-sizing: border-box;
  border: 1px solid var(--color-border-dark);
  border-radius: 2px; */
  max-width: 100%;
}

/* img.noborder {
  border: none;
  box-shadow: none;
  outline: none;
} */
figure {
  margin: 1em;
}

figure img {
  display: block;
  margin: 0 auto;
}

figure figcaption {
  margin-top: 0.5em;
  text-align: center;
  font-weight: bold;
}


/* Pop-Out Window Application*/
.window-app {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  position: absolute;
  /* box-shadow: 0 0 20px var(--color-shadow-dark); */
  /* padding: 0; */
  z-index: var(--z-index-window);
  /* Resizable movement handle */
}

.window-app>* {
  flex: 1;
}

.window-header {
  align-items: center;
  flex: 0 0 30px;
  gap: 10px;
  padding: 0px 10px;
}

/* .window-app > .flex0 {
  display: block;
  flex: 0;
}
.window-app > .flex1 {
  flex: 1;
}
.window-app > .flex2 {
  flex: 2;
}
.window-app > .flex3 {
  flex: 3;
} */

/* .window-app .window-header {
  flex: 0 0 30px;
  overflow: hidden;
  padding: 0 8px;
  line-height: 30px;
  border-bottom: 1px solid var(--color-border-dark);
} */
.window-app .window-header .window-title {
  margin: 0;
  word-break: break-all;
  flex-grow: 1;
}

/* .window-app .window-header a {
  flex: none;
  margin: 0 0 0 8px;
} */
/* .window-app .window-header i[class^=fa] {
  margin-right: 3px;
} */
/* .window-app.minimized .window-header {
  border: 1px solid var(--color-border-dark);
} */
.window-app .window-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  background: url(/ui/parchment.jpg) repeat;
  padding: 8px;
  color: var(--color-text-dark-primary);
  overflow-y: auto;
  overflow-x: hidden;
}

.window-app .window-content>* {
  flex: 1;
}

.window-app .window-content>.flex0 {
  display: block;
  flex: 0;
}

.window-app .window-content>.flex1 {
  flex: 1;
}

.window-app .window-content>.flex2 {
  flex: 2;
}

.window-app .window-content>.flex3 {
  flex: 3;
}

.window-app.zhover {
  z-index: calc(var(--z-index-window) + 1);
}

/* .window-app .window-resizable-handle {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0px;
    right: 0;
    background: radial-gradient(circle at bottom right, var(--tertiary) 0%, wheat) 20%, transparent 20%);
    border-radius: 5px 0px 5px 0px;
    box-shadow: 0 0 0 1px var(--tertiary), 0 0 0 2px #9f725b, inset 0 0 0 1px var(--tertiary), inset 0 0 0 2px #9f725b;
    clip-path: circle(20px at 100% 100%);
    cursor: se-resize;
} */


.window-app .window-resizable-handle {
  width: 38px;
  height: 38px;
  position: absolute;
  bottom: 0px;
  right: 0;
  /* padding: 2px; */
  /* background: radial-gradient(circle at bottom right, var(--tertiary) 0%, wheat, 23%, transparent 23%); */
  background: linear-gradient(to bottom, transparent 30px, black 40px), linear-gradient(to right, transparent 30px, black 40px);
  /* mix-blend-mode: color-burn; */
  border-radius: 5px 0px 5px 0px;
  box-shadow: 0 0 0 2px var(--tertiary), 0 0 0 3px #9f725b, inset 0 0 0 2px var(--tertiary), inset 0 0 0 3px #9f725b;
  clip-path: polygon(55% 50%, 110% 50%, 110% 110%, 50% 110%, 50% 75%, 75% 75%);
  cursor: se-resize;
}

.window-app .window-resizable-handle i.fas {
  transform: rotate(45deg);
}

.window-app.minimized .window-resizable-handle {
  display: none;
}

/* ----------------------------------------- */
/*  Context Dropdown Menu
/* ----------------------------------------- */
#context-menu {
  width: 100%;
  height: max-content;
  min-width: 150px;
  max-width: 360px;
  position: absolute;
  left: 0;
  background: #23221d;
  border: 1px solid var(--color-border-dark);
  border-radius: 5px;
  color: var(--color-text-light-1);
  z-index: calc(var(--z-index-app) + 1);
}

#context-menu.expand-down {
  top: calc(100% + 2px);
}

#context-menu.expand-up {
  bottom: calc(100% + 2px);
}

#context-menu ol.context-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

#context-menu li.context-item {
  padding: 0 5px;
  line-height: 32px;
}

#context-menu li.context-item:hover {
  color: var(--color-text-light-0);
  text-shadow: 0 0 4px var(--color-shadow-primary);
}

#context-menu li.context-item>i {
  margin-right: 5px;
}

.window-app #context-menu {
  z-index: calc(var(--z-index-window) + 1);
}

/* ----------------------------------------- */
/*  Player Config UI
/* ----------------------------------------- */
#player-config label {
  font-size: var(--font-size-14);
  font-weight: bold;
  color: var(--color-text-dark-primary);
}

#player-config .avatar {
  flex: 0 0 64px;
  margin-bottom: 5px;
}

#player-config .directory-list {
  max-height: 300px;
  overflow-y: auto;
  list-style: none;
  margin: 5px 0;
  padding: 0;
}

#player-config .directory-item {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

#player-config .directory-item.context {
  border-top: 1px solid var(--color-border-highlight-alt);
  border-bottom: 1px solid var(--color-border-highlight);
  box-shadow: 0 0 10px var(--color-shadow-highlight);
}

#player-config .directory-item .document-name {
  font-size: var(--font-size-13);
  line-height: 32px;
  margin: 0 0 0 5px;
}

#player-config .directory-item img.profile {
  flex: 0 0 32px;
  height: 32px;
  border: none;
}

#player-config button[type="submit"] {
  margin-top: 0.5em;
}

/* ----------------------------------------- */
/*  Connected Players UI
/* ----------------------------------------- */
/* #players {
  width: var(--players-width);
  margin: 0 5px 12px 15px;
  padding: 0;
  border: 1px solid var(--color-border-dark);
  pointer-events: all;
} */
#players.hidden {
  display: none;
}

#players h3 {
  margin: 3px;
  padding: 4px;
  border-bottom: 2px groove var(--color-border-dark-secondary);
}

#players h3 i {
  margin: 0 6px;
}

#players h3 .players-mode {
  font-size: var(--font-size-16);
  margin: 0 5px;
  color: var(--color-text-light-primary);
}

#players ol {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}

#players ol li.player {
  line-height: 20px;
  padding: 1px 8px;
}

#players ol .player-name {
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
}

#players ol .player.context {
  margin: -1px 0;
  border-top: 1px solid var(--color-border-highlight);
  border-bottom: 1px solid var(--color-border-highlight);
}

#players ol .player.context .player-name {
  text-shadow: 0 0 5px var(--color-shadow-primary);
}

#players ol .player-name.self {
  color: #c0eddb;
}

#players ol .player-active {
  flex: 0 0 8px;
  height: 8px;
  /* border: 1px solid var(--color-border-dark); */
  border-radius: 50%;
  /* margin: 5px 8px 0 0; */
}

#players ol .player-active.active {
  /* box-shadow: 0 0 5px var(--color-shadow-dark); */
}

/* ---------------------------------------- */
/* Notifications                            */
/* ---------------------------------------- */
#notifications {
  position: fixed;
  width: 60%;
  top: 100px;
  left: 20%;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: calc(var(--z-index-ui) + 100);
}

.notification {
  background: rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5em;
  padding: 6px 8px;
  line-height: 20px;
  border: 1px solid var(--color-border-dark-secondary);
  border-radius: 5px;
  box-shadow: 0 0 10px var(--color-shadow-dark);
  color: var(--color-text-light-highlight);
}

.notification .close {
  float: right;
  line-height: 20px;
  margin-left: 8px;
}

.notification::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
}

.notification.info {
  background: rgba(47, 80, 132, 0.6);
  border: 1px solid #5c87b9;
}

.notification.info::before {
  content: "\f05a";
}

.notification.warning {
  background: rgba(214, 150, 0, 0.6);
  border: 1px solid #d69e07;
}

.notification.warning::before {
  content: "\f071";
}

.notification.error {
  background: rgba(105, 0, 8, 0.6);
  border: 1px solid #750003;
}

.notification.error::before {
  content: "\f06a";
}

.notification.channel-hint {
  width: 100%;
  flex: none;
}

.notification.stable {
  background: rgba(138, 211, 4, 0.4);
}

.notification.stable::before {
  content: "\f6d9";
}

.notification.testing {
  background: rgba(211, 192, 4, 0.4);
}

.notification.testing::before {
  content: "\f0ad";
}

.notification.development {
  background: rgba(211, 119, 4, 0.4);
}

.notification.development::before {
  content: "\f6e3";
}

.notification.prototype {
  background: rgba(211, 20, 4, 0.4);
}

.notification.prototype::before {
  content: "\f1e2";
}

/* ---------------------------------------- */
/* Controls Reference                       */
/* ---------------------------------------- */
#controls-reference .window-content {
  max-height: 75vh;
}

#controls-reference h2 {
  padding: 2px 0;
  border-top: 1px solid var(--color-border-dark-tertiary);
  border-bottom: 1px solid var(--color-border-dark-tertiary);
}

#controls-reference h3 {
  padding: 2px 0;
  border-top: 1px solid var(--color-border-light-primary);
  border-bottom: 1px solid var(--color-border-light-primary);
  font-weight: bold;
}

#controls-reference ol.hotkey-list {
  list-style: none;
  padding: 0;
}

#controls-reference ol.hotkey-list>li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 5px 0;
}

#controls-reference ol.hotkey-list>li>* {
  flex: 1;
}

#controls-reference ol.hotkey-list>li>.flex0 {
  display: block;
  flex: 0;
}

#controls-reference ol.hotkey-list>li>.flex1 {
  flex: 1;
}

#controls-reference ol.hotkey-list>li>.flex2 {
  flex: 2;
}

#controls-reference ol.hotkey-list>li>.flex3 {
  flex: 3;
}

#controls-reference ol.hotkey-list h4 {
  margin: 0;
  flex: 2;
  line-height: 24px;
}

#controls-reference ol.hotkey-list .keys {
  flex: 3;
}

#controls-reference ol.hotkey-list .key {
  display: inline-block;
  margin: 0 1px;
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid var(--color-border-light-2);
  border-radius: 5px;
  box-shadow: 1px 1px #444;
  text-align: center;
  min-width: 24px;
}

#controls-reference ol.hotkey-list li.gm .key {
  background: #f5eaf5;
}

/* ---------------------------------------- */
/* Support Details Report                   */
/* ---------------------------------------- */
#support-report {
  -webkit-user-select: all;
  user-select: all;
  display: block;
  padding: 1em;
  margin: 1em 0;
  border: 2px dashed #c9baa7;
  font-size: var(--font-size-12);
  overflow-x: auto;
}

#support-report:focus {
  animation: selectSwap 100ms step-end forwards;
}

@keyframes selectSwap {
  to {
    -webkit-user-select: text;
    user-select: text;
  }
}

/* ---------------------------------------- */
/* Keybinding Management                    */
/* ---------------------------------------- */
#keybindings {
  /** Keybinding Categories Column */
  /** Keybindings Main Column */
  /** Single Category */
  /** Single Action */
  /** Single Keybinding */
}

#keybindings form {
  height: 100%;
}

#keybindings .hidden {
  display: none;
}

#keybindings .filters {
  flex: 0 0 220px;
  height: 100%;
  overflow: hidden auto;
  padding-right: 4px;
  margin-right: 4px;
  border-right: 1px solid var(--color-border-light-primary);
  font-size: var(--font-size-12);
}

#keybindings .filters h3 {
  margin: 0;
  line-height: 38px;
  border-bottom: 1px solid var(--color-border-light-primary);
}

#keybindings .filters .category-filter {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-light-primary);
}

#keybindings .filters .category-filter.active {
  font-weight: bold;
  border-bottom: 1px solid var(--color-underline-active);
}

#keybindings .filters span.count {
  float: right;
}

#keybindings .categories {
  height: 100%;
}

#keybindings .categories .action-filter {
  flex: 0 0 32px;
}

#keybindings .categories .action-filter .reset-actions {
  flex: 0;
}

#keybindings .categories .action-filter>label {
  flex: 2;
  text-align: end;
  padding-right: 10px;
}

#keybindings .categories .category-list {
  list-style: none;
  border-top: 1px solid var(--color-border-light-2);
  padding: 0 4px 0 0;
  overflow-y: auto;
}

#keybindings .category .category-header {
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border-light-2);
}

#keybindings .category .category-header .category-title {
  margin: 0;
  color: var(--color-text-dark-primary);
  font-weight: bold;
}

#keybindings .category .category-header .category-collapse {
  flex: none;
  padding-right: 8px;
  font-size: 16px;
}

#keybindings .category .category-header .category-collapse.hidden {
  display: none;
}

#keybindings .category .action-list {
  padding: 0;
}

#keybindings .category .action-list.hidden {
  display: none;
}

#keybindings .action {
  line-height: 24px;
  padding: 5px;
  border-bottom: 1px dotted var(--color-border-light-2);
}

#keybindings .action:last-child {
  border: none;
}

#keybindings .action .action-title {
  margin: 0;
  font-weight: bold;
}

#keybindings .action .action-bindings {
  list-style: none;
  margin: 0;
  padding: 0;
}

#keybindings .binding {
  justify-content: space-between;
  margin-top: 5px;
}

#keybindings .binding .binding-fields {
  display: flex;
}

#keybindings .binding .binding-fields input {
  margin: 0 3px 0 0;
}

#keybindings .binding .binding-fields .binding-input-icon {
  margin-left: -26px;
  margin-right: 3px;
  margin-top: 3px;
  pointer-events: none;
  flex-grow: 0;
  font-size: 130%;
}

#keybindings .binding .key {
  flex: none;
  padding: 0 4px;
  min-width: 24px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid var(--color-border-light-2);
  border-radius: 5px;
  box-shadow: 1px 1px #444;
  text-align: center;
}

#keybindings .binding .key.uneditable {
  background: #cac9c5;
}

#keybindings .binding .binding-controls {
  flex: 0 0 80px;
  margin-left: 6px;
  justify-content: end;
  align-items: center;
  text-align: center;
}

#keybindings .binding .binding-controls .control {
  flex: 0 0 20px;
}

#keybindings .binding .binding-controls .control.conflicts {
  color: orange;
}

#keybindings .binding .binding-controls .control.uneditable {
  color: gray;
}

#keybindings .footer {
  flex: 0;
}

/* ---------------------------------------- */
/* New User Experience                      */
/* ---------------------------------------- */
a.nue-tab,
a.nue-action {
  color: var(--color-text-hyperlink);
  text-decoration: underline;
}

h3.nue {
  padding: 8px 0;
  border-top: 2px groove var(--color-border-light-highlight);
  border-bottom: 2px groove var(--color-border-light-highlight);
}

footer.nue {
  border-top: 2px groove var(--color-border-light-highlight);
  font-size: var(--font-size-11);
  color: var(--color-text-dark-inactive);
  padding-top: 6px;
}

p.nue {
  font-size: var(--font-size-12);
}

/* ---------------------------------------- */
/*  Forms                                   */
/* ---------------------------------------- */
form .form-group,
form .form-group-stacked {
  clear: both;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 3px 0;
  align-items: center;
}

form .form-group>* {
  flex: 3;
}

form .form-group>label {
  flex: 2;
}

form .form-group label {
  line-height: var(--form-field-height);
}

form .form-group .form-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

form .form-group .form-fields>* {
  flex: 1;
  margin: 0 3px 0 0;
}

form .form-group .form-fields>*:last-child {
  margin-right: 0;
}

form .form-group .form-fields>label {
  flex: 0;
  padding: 0 4px;
  text-align: center;
}

form .form-group .form-fields>label.checkbox {
  flex: none;
  padding: 0;
}

form .form-group .form-fields>input[type="checkbox"] {
  flex: 0 0 20px;
}

form .form-group .form-fields button {
  flex: 0;
  line-height: calc(var(--form-field-height) - 4px);
}

form .form-group .form-fields span.sep {
  flex: none;
}

form .form-group span.units {
  flex: 0;
  line-height: 28px;
  font-size: var(--font-size-12);
  color: var(--color-text-dark-secondary);
}

form .form-group-stacked>*,
form .form-group.stacked>* {
  flex: 0 0 100%;
}

form .form-group.slim .form-fields>label {
  flex: none;
  font-size: var(--font-size-12);
  color: var(--color-text-dark-secondary);
  text-align: right;
}

form .form-group.slim .form-fields>input[type="number"],
form .form-group.slim .form-fields>input[type="text"] {
  flex: 0 0 64px;
}

form .form-group.hidden {
  display: none;
}

form h1.form-header,
form h2.form-header,
form h3.form-header {
  margin: 0 0 5px;
  padding: 3px 0;
  color: var(--color-text-dark-header);
  border-top: 1px solid var(--color-border-light-primary);
  border-bottom: 1px solid var(--color-border-light-primary);
}

form .notes,
form .hint {
  flex: 0 0 100%;
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--color-text-dark-secondary);
  margin: 3px 0;
}

/* ---------------------------------------- */
/* Form Inputs                              */
/* ---------------------------------------- */
input:focus {
  outline: none;
}

/* Text Input */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"] {
  width: calc(100% - 2px);
  min-width: 20px;
  height: var(--form-field-height);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 3px;
  margin: 0;
  color: var(--color-text-dark-primary);
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  line-height: inherit;
  border: 1px solid var(--color-border-light-tertiary);
  border-radius: 3px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
  box-shadow: 0 0 5px var(--color-shadow-primary);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 3px 5px;
}

input[type="checkbox"]:checked {
  -webkit-filter: grayscale(100%);
}

input[type="radio"] {
  position: relative;
  top: 2px;
  margin: 0 0 0 5px;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  -webkit-filter: grayscale(100%);
}

/* Checkbox Labels */
label.checkbox {
  flex: auto;
  padding: 0;
  margin: 0;
  height: 22px;
  line-height: 22px;
  font-size: var(--font-size-11);
}

label.checkbox>input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 3px;
  position: relative;
  top: 4px;
}

label.checkbox.right>input[type="checkbox"] {
  margin: 0 0 0 2px;
}

/* Select Boxes */
select {
  height: calc(var(--form-field-height) + 1px);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border-light-tertiary);
  border-radius: 3px;
  padding: 0 3px;
  text-overflow: ellipsis;
}

select:focus {
  box-shadow: 0 0 5px var(--color-shadow-primary);
  outline: none;
}

select[multiple] {
  height: auto;
  padding: 3px;
}

option {
  background: var(--color-bg-option);
}

/* Text Areas */
textarea {
  width: 100%;
  min-height: 50px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  font-family: var(--font-mono);
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

textarea:focus {
  box-shadow: 0 0 6px var(--color-shadow-primary);
  outline: none;
}

/* Buttons */
button {
  width: 100%;
  margin: 0 1px;
  background: rgba(255, 255, 240, 0.8);
  border: 1px solid var(--color-border-light-primary);
  border-radius: 3px;
  font-size: var(--font-size-14);
  line-height: 28px;
  font-family: var(--font-primary);
}

button:hover,
button:focus {
  outline: none;
  box-shadow: 0 0 5px var(--color-shadow-primary);
}

button:disabled {
  color: var(--color-text-dark-secondary);
  box-shadow: none;
}

button.hidden {
  display: none;
}

button>i {
  margin-right: 3px;
}

form button {
  background: rgba(0, 0, 0, 0.1);
  border: 2px groove var(--color-border-light-highlight);
}

input:disabled {
  border: none;
  color: var(--color-text-dark-secondary);
}

input:disabled:hover {
  border: none;
  box-shadow: none;
  outline: none;
}

input::placeholder {
  color: var(--color-text-dark-secondary);
  opacity: 1;
}

/* Color Picker */
input[type="text"].color {
  flex: 1.45;
}

input[type="color"][data-edit] {
  height: var(--form-field-height);
  background: transparent;
  border: 2px groove var(--color-border-light-highlight);
}

input[type="color"][data-edit][data-edit] {
  margin-left: 5px;
  flex: 1.45;
}

/* File Pickers */
button.file-picker {
  flex: 0 0 24px;
  line-height: 24px;
  margin: -1px 0 -1px 4px;
  order: 99;
}

button.file-picker+input[type="text"] {
  height: 28px;
  margin-right: 5px !important;
}

/* Range Input */
input[type=range] {
  background: transparent;
  -webkit-appearance: none;
  height: 20px;
  margin: 0;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #999999;
  border-radius: 3px;
  border: 1px solid #111;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid var(--color-border-dark);
  height: 12px;
  width: 12px;
  border-radius: 2px;
  background: #c85019;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #a6a6a6;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #999999;
  border-radius: 3px;
  border: 1px solid var(--color-border-dark-1);
}

input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid var(--color-border-dark);
  height: 12px;
  width: 12px;
  border-radius: 2px;
  background: #c85019;
  cursor: pointer;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #8c8c8c;
  border: 1px solid var(--color-border-dark-1);
  border-radius: 6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: #999999;
  border: 1px solid var(--color-border-dark-1);
  border-radius: 6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid var(--color-border-dark);
  height: 12px;
  width: 12px;
  border-radius: 2px;
  background: #c85019;
  cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
  background: #999999;
}

input[type=range]:focus::-ms-fill-upper {
  background: #a6a6a6;
}

input[type="range"]+.range-value {
  display: block;
  flex: 0 1 48px;
  text-align: center;
  border: 1px solid var(--color-border-light-primary);
  padding: 2px;
  margin-left: 10px;
}

/**
 * Dark mode inputs
 */
.dark button {
  background: rgba(255, 255, 240, 0.8);
  border: 2px solid var(--color-border-light-secondary);
}

.dark input,
.dark select {
  background: rgba(255, 255, 240, 0.8);
}

/* ----------------------------------------- */
/* TinyMCE Editor
/* ----------------------------------------- */
.editor {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
}

.editor-content * {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.editor-edit {
  display: none;
  font-size: 1.25em;
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(187, 187, 187, 0.75);
  border: 1px solid var(--color-border-dark-1);
  border-radius: 4px;
  padding: 1px 2px;
  box-shadow: 0 0 1px var(--color-shadow-dark);
}

.editor:hover .editor-edit {
  display: block;
}

/* Oxide Theme Overrides */
.tox.tox-tinymce {
  border: none;
}

.tox.tox-tinymce .tox-toolbar {
  background: transparent;
}

.tox.tox-tinymce .tox-tbtn {
  font-size: var(--font-size-12);
  padding: 0 2px;
}

.tox.tox-tinymce .tox-tbtn[title="Formats"] {
  width: 90px;
}

.tox.tox-tinymce .tox-edit-area__iframe {
  background: transparent;
}

/* Flexbox */
.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.flexcol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* .flexrow > *,
.flexcol > * {
  flex: 1;
}
.flexrow > .flex0,
.flexcol > .flex0 {
  display: block;
  flex: 0;
}
.flexrow > .flex1,
.flexcol > .flex1 {
  flex: 1;
}
.flexrow > .flex2,
.flexcol > .flex2 {
  flex: 2;
}
.flexrow > .flex3,
.flexcol > .flex3 {
  flex: 3;
} */
/* ----------------------------------------- */
/* Tabbed Containers
/* ----------------------------------------- */
.tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.tabs .item {
  text-align: center;
}

.tabs .item.active {
  text-shadow: 0 0 10px var(--color-shadow-primary);
}

.tab[data-tab] {
  display: none;
}

.tab[data-tab].active {
  display: block;
}

.tab[data-tab].active.flexrow,
.tab[data-tab].active.flexcol {
  display: flex;
}

/* ----------------------------------------- */
/* Filter Navigation
/* ----------------------------------------- */
nav.list-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: flex-end;
}

nav.list-filters>* {
  flex: 1;
}

nav.list-filters>.flex0 {
  display: block;
  flex: 0;
}

nav.list-filters>.flex1 {
  flex: 1;
}

nav.list-filters>.flex2 {
  flex: 2;
}

nav.list-filters>.flex3 {
  flex: 3;
}

nav.list-filters label {
  font-weight: bold;
}

nav.list-filters a.filter {
  flex: none;
  margin-left: 10px;
  border-bottom: 2px solid var(--color-underline-inactive);
}

nav.list-filters a.filter.active {
  font-weight: bold;
  border-bottom: 2px solid var(--color-underline-active);
}

/* Draggable Containers */
.draggable {
  cursor: grab;
}

#drag-preview {
  position: absolute;
  left: -1000px;
  height: -1000px;
  z-index: -1;
}

/* ----------------------------------------- */
/* Dialog Window
/* ----------------------------------------- */
.dialog .dialog-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: space-around;
}

.dialog .dialog-buttons>* {
  flex: 1;
}

.dialog .dialog-buttons>.flex0 {
  display: block;
  flex: 0;
}

.dialog .dialog-buttons>.flex1 {
  flex: 1;
}

.dialog .dialog-buttons>.flex2 {
  flex: 2;
}

.dialog .dialog-buttons>.flex3 {
  flex: 3;
}

.dialog .dialog-buttons button {
  background: rgba(0, 0, 0, 0.1);
  border: 2px groove var(--color-border-light-highlight);
  margin: 0 5px 0 0;
}

.dialog .dialog-buttons button:last-child {
  margin-right: 0;
}

.dialog .dialog-buttons button.default {
  background: rgba(0, 0, 0, 0.05);
  border: 2px groove var(--color-border-light-secondary);
}

/* ----------------------------------------- */
/* File Picker
/* ----------------------------------------- */
.filepicker {
  line-height: 24px;
  /* Private Directory */
}

.filepicker .current-dir button {
  flex: 0 0 32px;
  margin: 0 5px 0 0;
  line-height: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border-dark-4);
  border-radius: 3px;
}

.filepicker .current-dir button>i {
  margin: 0;
}

.filepicker .current-dir button:last-child {
  margin-right: 0;
}

.filepicker .current-dir input[name="target"] {
  height: 32px;
  margin: 0 5px 0 0;
}

.filepicker .filter-dir label {
  flex: 1;
  line-height: 28px;
}

.filepicker .filter-dir input {
  flex: 3;
}

.filepicker .tile-size .form-fields {
  flex: 0 0 156px;
}

.filepicker .directory {
  list-style: none;
  margin: 0.5em 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border-dark-5);
  border-radius: 2px;
  max-height: 600px;
  overflow: hidden auto;
  scrollbar-width: thin;
}

.filepicker .directory>li {
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  padding-left: 0.25em;
  word-break: break-all;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-dark-4);
}

.filepicker .directory>li>i {
  margin-right: 5px;
}

.filepicker .directory>li.picked {
  background: rgba(0, 0, 0, 0.1);
  font-weight: bold;
}

.filepicker .directory>li:last-child {
  border-bottom: none;
}

.filepicker .directory>li:hover {
  text-shadow: 0 0 5px var(--color-shadow-primary);
}

.filepicker .directory>li.dir {
  font-weight: bold;
}

.filepicker .private button.privacy {
  background: rgba(115, 49, 255, 0.05);
  box-shadow: 0 0 4px #7331FF inset;
}

.filepicker .private .directory,
.filepicker .public .private.dir {
  background: rgba(115, 49, 255, 0.05);
}

.filepicker .details-list img {
  display: none;
}

.filepicker .thumbs-list li {
  height: 48px;
  line-height: 48px;
}

.filepicker .thumbs-list img {
  flex: 0 0 48px;
  object-fit: cover;
  object-position: 50% 50%;
  margin-right: 10px;
  border: none;
}

.filepicker .tiles-list {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  width: 508px;
}

.filepicker .tiles-list li {
  width: 100px;
  height: 100px;
  padding: 0;
  border: 1px solid transparent;
  border-right: 1px solid var(--color-border-dark-primary);
  border-bottom: 1px solid var(--color-border-dark-primary);
}

.filepicker .tiles-list li img {
  border: none;
  margin: 0;
  object-fit: contain;
}

.filepicker .tiles-list li.picked {
  box-shadow: 0 0 6px inset var(--color-shadow-highlight);
}

.filepicker .images-list li {
  position: relative;
  height: 200px;
  padding: 0;
  border: 1px solid var(--color-border-dark-primary);
}

.filepicker .images-list li img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: 50% 50%;
  border: none;
}

.filepicker .images-list li span.filename {
  position: absolute;
  top: 0;
  width: 400px;
  left: calc(50% - 200px);
  background: rgba(0, 0, 0, 0.66);
  border: 1px solid var(--color-border-dark);
  border-top: none;
  border-radius: 0 0 5px 5px;
  text-align: center;
  color: var(--color-text-light-highlight);
  line-height: 20px;
  padding-top: 4px;
}

.filepicker .upload-file label,
.filepicker .selected-file label {
  flex: 1;
}

.filepicker .display-modes {
  flex: 0 0 160px;
  text-align: center;
}

.filepicker .display-modes a {
  margin: 0 3px;
  border: 1px solid var(--color-border-light-tertiary);
  background: var(--color-bg-btn-minor-inactive);
  border-radius: 3px;
}

.filepicker .display-modes a.active {
  text-shadow: 0 0 6px var(--color-shadow-highlight);
  border: 1px solid var(--color-border-dark-primary);
  background: var(--color-bg-btn-minor-active);
}

/* ----------------------------------------- */
/* TinyMCE Editor
/* ----------------------------------------- */
.app .mce-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.app .mce-panel span {
  display: inherit;
}

.app .mce-top-part {
  border-bottom: 2px groove var(--color-border-light-highlight);
}

.app .mce-top-part::before {
  box-shadow: none;
}

.app .mce-btn {
  background: transparent;
  border: none;
  color: var(--color-text-dark-1);
}

.app .mce-btn:hover {
  background: transparent;
  border: none;
  color: inherit;
}

.app .mce-btn .mce-ico {
  color: var(--color-text-dark-1);
}

.dice-roll {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: space-around;
}

.dice-roll>* {
  flex: 1;
}

.dice-roll>.flex0 {
  display: block;
  flex: 0;
}

.dice-roll>.flex1 {
  flex: 1;
}

.dice-roll>.flex2 {
  flex: 2;
}

.dice-roll>.flex3 {
  flex: 3;
}

.dice-roll .dice-result,
.dice-roll .dice-tooltip {
  flex: 0 0 100%;
}

.dice-roll .dice-tooltip {
  display: none;
  order: 1;
}

.dice-roll .dice-tooltip.expanded {
  display: block;
}

.dice-roll .dice-result {
  order: 2;
}

.dice-roll .dice-formula,
.dice-roll .dice-total {
  flex: 0 0 100%;
  position: relative;
  margin: 0;
  line-height: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border-light-2);
  border-radius: 3px;
  box-shadow: 0 0 2px #FFF inset;
  word-break: break-all;
}

.dice-roll .dice-formula {
  margin-bottom: 5px;
}

.dice-roll .dice-total {
  flex: 0;
  font-size: var(--font-size-20);
  font-weight: bold;
}

.dice-roll .dice-total.success {
  color: green;
}

.dice-roll .dice-total.failure {
  color: red;
}

/** Inline Roll Tooltip */
.inline-roll .dice-tooltip {
  width: 280px;
  position: fixed;
  background: url(/ui/parchment.jpg) repeat;
  border: 1px solid var(--color-border-dark);
  border-radius: 5px;
  padding: 5px 5px 0;
  box-shadow: 0 0 10px var(--color-shadow-dark);
}

.inline-roll:hover .dice-tooltip {
  text-shadow: none;
}

/**
 * Legacy Tooltip Code
 */
.dice-roll .dice-part:hover>.dice-tooltip {
  display: block;
}

.dice-roll .dice-part.die {
  font-weight: 700;
  cursor: pointer;
}

.dice-roll .dice-part .dice-tooltip {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 26px;
  padding: 0 2px;
  background: #444;
  font-size: var(--font-size-14);
  color: var(--color-text-light-4);
}

.dice-roll .dice-tooltip .reroll {
  color: var(--color-text-dark-6);
  text-decoration: line-through;
}

.dice-roll .dice-tooltip .fail {
  color: red;
}

.dice-roll .dice-tooltip .crit {
  color: lightgreen;
}

.dice-roll .dice-flavor {
  text-align: right;
  font-size: var(--font-size-12);
}

.message.ic .dice-roll {
  font-style: normal;
}

/* ----------------------------------------- */
/*  Dice Tooltip
/* ----------------------------------------- */
.dice-tooltip .part-header {
  margin: 0;
  line-height: 24px;
  border-bottom: 1px solid var(--color-text-light-6);
}

.dice-tooltip .part-header .part-formula {
  font-weight: bold;
  flex: 1;
}

.dice-tooltip .part-header .part-flavor {
  flex: none;
  margin-right: 5px;
  font-size: var(--font-size-12);
  color: var(--color-text-dark-secondary);
}

.dice-tooltip .part-header .part-total {
  flex: none;
  font-size: var(--font-size-16);
  font-weight: bold;
  padding: 0 5px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-text-light-6);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

.dice-tooltip .dice-rolls {
  list-style: none;
  margin: 5px 0;
  padding: 0;
  overflow: hidden;
}

.dice-tooltip .dice-rolls .roll {
  position: relative;
  width: 24px;
  line-height: 24px;
  float: left;
  margin-right: 1px;
  background-image: url("/icons/svg/d6-grey.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  font-size: var(--font-size-16);
  color: #000;
  font-weight: bold;
  text-align: center;
}

.dice-tooltip .dice-rolls .roll.d4 {
  background-image: url("/icons/svg/d4-grey.svg");
}

.dice-tooltip .dice-rolls .roll.d6 {
  background-image: url("/icons/svg/d6-grey.svg");
}

.dice-tooltip .dice-rolls .roll.d8 {
  background-image: url("/icons/svg/d8-grey.svg");
}

.dice-tooltip .dice-rolls .roll.d10 {
  background-image: url("/icons/svg/d10-grey.svg");
}

.dice-tooltip .dice-rolls .roll.d12 {
  background-image: url("/icons/svg/d12-grey.svg");
}

.dice-tooltip .dice-rolls .roll.d20 {
  background-image: url("/icons/svg/d20-grey.svg");
}

.dice-tooltip .dice-rolls .roll.min {
  color: #aa0200;
  filter: sepia(0.5) hue-rotate(-60deg);
}

.dice-tooltip .dice-rolls .roll.max {
  color: #18520b;
  filter: sepia(0.5) hue-rotate(60deg);
}

.dice-tooltip .dice-rolls .roll.discarded,
.dice-tooltip .dice-rolls .roll.rerolled {
  filter: sepia(0.5) contrast(0.75) opacity(0.4);
}

.dice-tooltip .dice-rolls .roll.exploded:before {
  font-size: 0.5rem;
  font-family: "Font Awesome 5 Free";
  content: "\f666";
  position: absolute;
  top: -8px;
  right: 0px;
}

.dice-tooltip .dice-rolls .roll.success {
  color: #18520b;
  filter: sepia(0.5) hue-rotate(60deg);
}

.dice-tooltip .dice-rolls .roll.failure {
  color: #aa0200;
  filter: sepia(0.5) hue-rotate(-60deg);
}

/* Applications */
#hud {
  position: absolute;
  transform-origin: top left;
  pointer-events: none;
  z-index: calc(var(--z-index-canvas) + 1);
}

/* ---------------------------------------- */
/* HUD Application
/* ---------------------------------------- */
.placeable-hud {
  position: absolute;
  text-align: center;
  pointer-events: none;
  transform-origin: top left;
}

.placeable-hud .col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  height: 100%;
}

.placeable-hud .col>* {
  flex: 1;
}

.placeable-hud .col>.flex0 {
  display: block;
  flex: 0;
}

.placeable-hud .col>.flex1 {
  flex: 1;
}

.placeable-hud .col>.flex2 {
  flex: 2;
}

.placeable-hud .col>.flex3 {
  flex: 3;
}

.placeable-hud .col.left {
  width: 70px;
  justify-content: flex-start;
}

.placeable-hud .col.middle {
  width: calc(100% - (70px * 2));
  left: 70px;
  justify-content: space-between;
}

.placeable-hud .col.right {
  width: 70px;
  right: 0;
  justify-content: flex-start;
}

.placeable-hud input[type="text"] {
  width: 100%;
  /* background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px var(--color-shadow-dark);
  border: 1px solid var(--color-border-dark-3); */
  color: var(--color-text-light-2);
  height: 40px;
  line-height: 40px;
  margin: 0;
  border-radius: 8px;
  font-size: var(--font-size-28);
  font-weight: bold;
  pointer-events: all;
}

.placeable-hud input[type="text"]:focus {
  /* box-shadow: 0 0 10px #c60;
  border: 1px solid var(--color-border-highlight-alt); */
}

.placeable-hud .control-icon {
  box-sizing: content-box;
  width: 40px;
  flex: 0 0 40px;
  margin: 8px 0;
  font-size: var(--font-size-28);
  line-height: 40px;
  text-align: center;
  color: var(--color-text-light-3);
  /* background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px var(--color-shadow-dark); */
  border: 1px solid #333;
  border-radius: 8px;
  pointer-events: all;
}

.placeable-hud .control-icon:first-child {
  margin-top: 0;
}

.placeable-hud .control-icon:hover {
  color: var(--color-text-light-1);
}

.placeable-hud .control-icon.active {
  /* border: 1px solid var(--color-border-highlight); */
}

.placeable-hud .control-icon>i[class^=fa] {
  position: relative;
  top: 1px;
}

.placeable-hud .control-icon img {
  display: block;
  margin: 2px;
  padding: 0;
  border: none;
  opacity: 0.7;
}

.placeable-hud .control-icon img:hover {
  opacity: 1;
}

/* ---------------------------------------- */
/* Token HUD
/* ---------------------------------------- */
#token-drop {
  opacity: 0.5;
  z-index: calc(var(--z-index-window) + 1);
  border: none;
}

#token-hud .col {
  height: calc(100% + 100px);
  top: -50px;
}

#token-hud .col.left {
  justify-content: center;
  left: -70px;
}

#token-hud .col.right {
  justify-content: center;
  right: -70px;
}

#token-hud .col.middle {
  width: 100%;
  left: 0;
  justify-content: space-between;
}

#token-hud .attribute {
  flex: 0 0 40px;
}

#token-hud .attribute.bar1 {
  bottom: 0;
}

#token-hud .attribute.bar1 input {
  border: 1px solid #7cd000;
}

#token-hud .attribute.bar2 {
  top: 0;
}

#token-hud .attribute.bar2 input {
  border: 1px solid #659db5;
}

#token-hud .attribute.elevation {
  position: relative;
  width: 56px;
  margin: 8px 0;
}

#token-hud .attribute i.fas {
  position: absolute;
  top: -5px;
  left: -3px;
  font-size: var(--font-size-18);
  color: var(--color-text-light-5);
}

#token-hud .control-icon.effects {
  position: relative;
}

#token-hud .status-effects {
  visibility: hidden;
  position: absolute;
  left: 65px;
  top: 0;
  display: grid;
  padding: 3px;
  box-sizing: content-box;
  width: 100px;
  grid-template-columns: repeat(4, 25%);
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px var(--color-shadow-dark);
  border: 1px solid var(--color-border-dark-3);
  border-radius: 4px;
  pointer-events: all;
}

#token-hud .status-effects.active {
  visibility: visible;
}

#token-hud .status-effects .effect-control {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0.5;
}

#token-hud .status-effects .effect-control:hover {
  opacity: 0.75;
}

#token-hud .status-effects .effect-control.active {
  opacity: 1;
}

#token-hud .status-effects .effect-control.overlay {
  opacity: 1;
  border: 1px solid var(--color-border-highlight);
}

/* ---------------------------------------- */
/* Chat Bubbles
/* ---------------------------------------- */
.chat-bubble {
  position: absolute;
  padding: 8px;
  background: #f5f2ec;
  min-width: 100px;
  max-width: 400px;
  max-height: 100px;
  color: var(--color-text-dark-2);
  border: 2px solid #6f6c66;
  box-shadow: 0 0 20px var(--color-shadow-dark);
  overflow: hidden;
}

.chat-bubble .bubble-content {
  position: relative;
  top: 0;
}

.chat-bubble.left {
  border-radius: 16px 8px 16px 4px;
}

.chat-bubble.right {
  border-radius: 8px 16px 4px 16px;
}

.chat-bubble.emote {
  background: #f3edde;
  border: 2px solid #887c5d;
  color: var(--color-text-dark-3);
  font-style: italic;
}

#logo {
  z-index: var(--z-index-ui);
  border: none;
  box-sizing: border-box;
  pointer-events: all;
  width: 100px;
  margin: 12px 0 0 10px;
  display: none;
}

#navigation {
  width: 100%;
  gap: 5px;
  /* margin: 12px 0 0 0; */
  /* padding: 0; */
  /* background: none;
  box-shadow: none;
  border: none;
  pointer-events: none; */
}

#scene-list {
  gap: 5px;
}

#navigation .nav-item {
  cursor: pointer;
  text-align: center;
  pointer-events: all;
}

#navigation #nav-toggle {
  flex: 0 0 20px;
  display: flex;
  text-align: center;
  justify-content: center;
}

#navigation #nav-toggle i {
  display: flex;
  align-items: center;
}

#navigation .scene {
  line-height: 12px;
}

#navigation {
  flex-wrap: unset;
}

#scene-list {
  display: flex;
  flex-wrap: wrap;
}

#navigation #nav-toggle:hover {
  /* text-shadow: 0 0 10px var(--color-shadow-highlight); */
}

/* #navigation #scene-list {
  list-style: none;
  margin: 0;
  padding: 0;
} */
/* #navigation #scene-list .scene {
  float: left;
  background: rgba(39, 39, 39, 0.95);
} */
/* #navigation #scene-list .scene:last-child {
  margin-right: 0;
} */
#navigation #scene-list .scene.gm {
  /* background: #130027;
  border: 1px solid #3a00ae; */
}

#navigation #scene-list .scene.view,
#navigation #scene-list .scene.context {
  /* cursor: default;
  color: var(--color-text-light-0);
  border: 1px solid var(--color-border-highlight-alt);
  background: rgba(52, 52, 52, 0.95);
  border-bottom: 1px solid var(--color-border-highlight);
  box-shadow: 0 0 10px var(--color-shadow-highlight); */
}

#navigation #scene-list .scene ul.scene-players {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 24px;
  left: 0;
}

#navigation #scene-list .scene li.scene-player {
  float: left;
  height: 14px;
  width: 14px;
  margin: 0 2px 0 0;
  line-height: var(--line-height-12);
  font-size: 0.625rem;
  text-align: center;
  color: #000;
  font-weight: 700;
  /* background: #97dff4;
  border: 1px solid var(--color-border-dark); */
  border-radius: 8px;
}

#navigation.collapsed {
  pointer-events: none;
}

#navigation.collapsed #nav-toggle {
  pointer-events: all;
}

#navigation.collapsed #scene-list {
  display: none;
}

#loading {
  display: none;
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--color-border-dark);
  box-shadow: 0 0 4px #b2c3ff;
  border-radius: 4px;
  z-index: calc(var(--z-index-canvas) + 1);
}

#loading label {
  line-height: 16px;
  position: absolute;
  top: -4px;
  padding: 0 5px;
  font-size: var(--font-size-18);
  color: var(--color-text-light-0);
  background: rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 6px var(--color-text-light-0);
}

#loading #loading-bar {
  position: relative;
  margin: 1px;
  height: 10px;
  background: #5d49ff;
  border: 1px solid #b2c3ff;
  border-radius: 2px;
}

#loading #context {
  left: 5px;
}

#loading #progress {
  top: -4px;
  right: 0;
  padding: 0 8px;
}

/* ----------------------------------------- */
/*  Main Menu
/* ----------------------------------------- */
#menu {
  position: fixed;
  z-index: calc(var(--z-index-window) + 1);
  top: 45%;
  left: calc(50% - 180px);
  width: 360px;
  color: var(--color-text-light-0);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  box-shadow: 0 0 30px var(--color-shadow-dark);
}

#menu #menu-items {
  list-style: none;
  margin: 5px;
  padding: 0;
}

#menu #menu-items li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  cursor: pointer;
}

#menu #menu-items li>* {
  flex: 1;
}

#menu #menu-items li>.flex0 {
  display: block;
  flex: 0;
}

#menu #menu-items li>.flex1 {
  flex: 1;
}

#menu #menu-items li>.flex2 {
  flex: 2;
}

#menu #menu-items li>.flex3 {
  flex: 3;
}

#menu #menu-items li>i {
  flex: 0 0 36px;
  font-size: var(--font-size-24);
  line-height: 48px;
}

#menu #menu-items li h4 {
  font-size: 2rem;
  line-height: 48px;
  margin: 0;
}

#menu #menu-items li:hover {
  text-shadow: 0 0 10px var(--color-shadow-highlight);
}

/* ----------------------------------------- */
/*  Scene Controls
/* ----------------------------------------- */
#controls {
  /*
  flex: 1;
  display: flex;
  height: 0;
  max-width: 100%;
  padding-top: 10px; */
  gap: 5px;
}

/* #controls ol {
  padding: 10px;
  list-style: none;
  background: none;
  box-shadow: none;
  border: none;
} */

#controls ol>li {
  pointer-events: all;
}

#controls ol.disabled {
  opacity: 0.4;
  pointer-events: none;
}

#controls ol.control-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#controls ol.control-tools .control-tool {
  pointer-events: all;
}

#controls ol .scene-control,
#controls ol .control-tool {
  /* width: 20px;
  height: 20px; */
  box-sizing: content-box;
  /* font-size: 24px;
  line-height: 36px; */
  /* background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px var(--color-shadow-dark); */
  /* margin: 0 0 8px 0; */
  /* color: var(--color-text-light-4); */
  /* border: 1px solid var(--color-border-dark);
  border-radius: 5px; */
  cursor: pointer;
  justify-content: center;
  align-content: center;
  display: flex;
}

#controls ol .scene-control.active,
#controls ol .control-tool.active,
#controls ol .scene-control:hover,
#controls ol .control-tool:hover {
  /* color: var(--color-text-light-0);
  border: 1px solid var(--color-border-highlight-alt);
  border-bottom: 1px solid var(--color-border-highlight);
  box-shadow: 0 0 10px var(--color-shadow-highlight); */
}

#controls ol .scene-control i.fas,
#controls ol .control-tool i.fas {
  margin: 0;
}

#controls ol.sub-controls,
#controls ol.main-controls {
  /* width: 66px; */
  flex-direction: column;
  display: flex;
  gap: 5px;
  /* overflow: hidden; */
  /* padding-left: 20px; */
}

#controls ol.sub-controls {
  display: none;
  /* flex-wrap: wrap; */
}

#controls ol.sub-controls.active {
  display: flex;
}

/* #controls ol.sub-controls .control-tool {
  margin-right: 8px;
} */
/* #controls ol .control-tool.toggle {
  background: rgba(30, 0, 60, 0.5);
  border: 1px solid #3b1893;
} */
/* #controls ol .control-tool.toggle.active,
#controls ol .control-tool.toggle:hover {
  background: rgba(60, 0, 120, 0.5);
  box-shadow: 0 0 10px #9b8dff;
} */
/* ----------------------------------------- */
/*  Game Pause
/* ----------------------------------------- */
#pause {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 10%;
  left: 0;
  pointer-events: none;
  z-index: var(--z-index-ui);
  background: url("/ui/pausebg.png") no-repeat 50% 50%;
  display: none;
}

#pause.paused {
  display: block;
}

#pause img {
  position: absolute;
  top: -16px;
  left: calc(50% - 64px);
  height: 128px;
  width: 128px;
  opacity: 0.5;
  border: none;
  -webkit-animation: rotation 5s infinite linear;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

#pause h3 {
  margin: 0;
  font-size: 2em;
  font-weight: normal;
  line-height: 100px;
  text-align: center;
  position: relative;
  z-index: calc(var(--z-index-window) - 1);
  color: var(--color-text-light-1);
  text-shadow: 1px 1px 30px var(--color-shadow-dark);
}

/* ---------------------------------------- */
/*  Hotbar                                  */
/* ---------------------------------------- */
#hotbar {
  z-index: calc(var(--z-index-ui) + 10);
  /* width: var(--hotbar-width);
  height: var(--hotbar-height); */
  pointer-events: none;
  flex-wrap: nowrap;
  /* margin-bottom: 10px; */
}

#hotbar .bar-controls {
  flex: 0 0 20px;
  height: 100%;
  padding: 3px;
  /* margin: 0 2px; */
  text-align: center;
  color: var(--color-text-light-heading);
  /* background: rgba(0, 0, 0, 0.6); */
  /* border: 1px solid var(--color-border-dark); */
  /* box-shadow: 0 0 3px #444 inset; */
  /* border-radius: 3px; */
  display: flex;
  flex-direction: column;
  line-height: 8px;
}

.hotbar-page-controls {
  padding: 0px 3px;
}

#hotbar .bar-controls a {
  display: block;
}

#hotbar .bar-controls a.page-control {
  /* font-size: 1.5em;
  line-height: 12px; */
  font-size: medium;
}

#hotbar .bar-controls span.page-number {
  /* display: block;
  font-size: var(--font-size-20);
  line-height: 8px; */
  font-size: medium;
}

#hotbar #action-bar {
  flex: 1;
  height: 100%;
  pointer-events: all;
  flex-wrap: nowrap;
  margin-left: 5px;
  gap: 5px;
}

#hotbar #action-bar.collapsed {
  display: none;
  pointer-events: none;
}

#hotbar #macro-list {
  flex-wrap: nowrap;
  height: 100%;
  display: flex;
  list-style: none;
  gap: 5px;
  /*
  margin: 0 2px;
  padding: 0;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  display: grid;
  grid-template-columns: repeat(10, var(--macro-size)); */
}

#hotbar .macro {
  position: relative;
  width: var(--macro-size);
  height: var(--macro-size);
  /* border: 1px solid var(--color-border-dark); */
  /* border-radius: 2px; */
  /* background: rgba(0, 0, 0, 0.5); */
  /* box-shadow: 0 0 5px var(--color-shadow-dark) inset; */
  cursor: pointer;
}

#hotbar .macro.inactive {
  /* box-shadow: 0 0 5px #444 inset; */
}

#hotbar .macro:hover {
  /* box-shadow: 0 0 10px var(--color-shadow-highlight) inset; */
}

#hotbar .macro.active:hover {
  /* border: 1px solid var(--color-border-highlight-alt); */
}

#hotbar .macro .macro-key {
  /* position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 3px;
  background: #111;
  color: var(--color-text-light-highlight);
  font-weight: bold;
  pointer-events: none; */
}

#hotbar .macro .macro-icon {
  /* object-fit: cover;
  object-position: 50% 0;
  border: none;
  height: calc(var(--macro-size) - 2px);
  width: calc(var(--macro-size) - 2px); */
  width: 100%;
}

#hotbar .macro .tooltip {
  display: block;
  min-width: 148px;
  height: 26px;
  padding: 2px 4px;
  position: absolute;
  top: -32px;
  left: -50px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--color-border-dark-primary);
  border-radius: 3px;
  color: var(--color-text-light-highlight);
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  word-break: break-all;
}

#hotbar #hotbar-directory-controls,
#hotbar #hotbar-page-controls {
  pointer-events: all;
  justify-content: space-around;
  gap: 3px;
}

#hotbar #hotbar-directory-controls a {
  /* line-height: 24px; */
}

/* @media (max-width: 1120px) {
  #hotbar {
    width: calc(var(--hotbar-width) / 2);
    height: calc(var(--hotbar-height) * 2);
  }
  #hotbar #macro-list {
    grid-template-columns: repeat(5, 50px);
  }
  #hotbar .bar-controls {
    justify-content: space-between;
  }
  #hotbar .bar-controls a {
    flex: 0;
  }
  #hotbar .bar-controls span.page-number {
    line-height: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
} */
/* ---------------------------------------- */
/*  Watermark                               */
/* ---------------------------------------- */
.watermark {
  width: 100%;
  z-index: var(--z-index-ui);
  position: fixed;
  bottom: 10px;
  height: 24px;
  font-size: 1.5em;
  pointer-events: none;
  text-align: center;
  color: var(--color-text-light-5);
  text-shadow: 1px 1px 4px var(--color-shadow-dark);
}

/* ---------------------------------------- */
/*  PRIMARY SIDEBAR                         */
/* ---------------------------------------- */
/* The Sidebar Container */
#sidebar {
  pointer-events: all;
  /* border: 1px solid var(--color-border-dark); */
}

#sidebar.collapsed {
  height: auto;
}

/* The Sidebar Tabs Container */
#sidebar-tabs {
  /* --sidebar-tab-height: 32px;
  --sidebar-tab-width: 24px;
  flex: 0 0 var(--sidebar-tab-height); */
  box-sizing: border-box;
  /* margin: 0 0 5px; */
  /* border-bottom: 1px solid var(--color-border-highlight);
  box-shadow: 0 0 10px var(--color-shadow-primary); */
  font-size: 14px;
}

#sidebar-tabs>.item {
  /* position: relative;
  flex: 0 0 var(--sidebar-tab-width);
  line-height: var(--sidebar-tab-height);
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0; */
}

#sidebar-tabs>.item.active {
  color: var(--color-text-light-highlight);
  /* border: 1px solid var(--color-border-highlight-alt); */
  border-bottom: none;
  /* box-shadow: 0 0 6px inset var(--color-shadow-highlight); */
}

#sidebar-tabs>.item i[class^=fa] {
  margin-right: 0;
}

#sidebar-tabs>.collapse {
  position: relative;
  flex: 0 0 var(--sidebar-tab-width);
  line-height: var(--sidebar-tab-height);
  color: var(--color-text-light-primary);
  text-align: center;
}

/* A Directory Listing */
.directory {
  overflow: hidden;
}

.directory .directory-header {
  flex: none;
  line-height: var(--sidebar-header-height);
  text-align: center;
  margin: 0 0 3px;
}

.directory .directory-header .header-search {
  flex: 1;
  align-items: center;
}

.directory .directory-header .header-search>* {
  flex: 0 0 24px;
}

.directory .directory-header .header-search input {
  flex: 1;
  margin: 0 3px;
  background: rgba(255, 255, 245, 0.8);
}

.directory .directory-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.directory .directory-list .directory-item {
  line-height: var(--sidebar-item-height);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.directory .directory-list .directory-item h3,
.directory .directory-list .directory-item h4 {
  white-space: nowrap;
  overflow: hidden;
}

.directory .directory-list .directory-item .document-name {
  margin: 0 0 0 8px;
}

.directory .directory-list .directory-item img {
  flex: 0 0 var(--sidebar-item-height);
  height: var(--sidebar-item-height);
  width: var(--sidebar-item-height);
  object-fit: cover;
  object-position: 50% 0;
  border: none;
}

.directory .directory-list .directory-item img[data-src] {
  visibility: hidden;
}

.directory .directory-list .directory-item.folder {
  border: none;
}

.directory .directory-list .directory-item.folder .context {
  background-color: transparent !important;
  border-color: var(--color-border-highlight);
}

.directory .directory-list .directory-item.document {
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark-3);
}

.directory .directory-list .directory-item:last-child {
  border-bottom-color: transparent;
}

.directory .directory-list .directory-item.context,
.directory .directory-list .directory-item.active {
  border-color: var(--color-border-highlight);
}

.directory .action-buttons button {
  height: 28px;
  line-height: 26px;
  margin: 4px;
  min-width: max-content;
  white-space: nowrap;
}

.directory .directory-footer {
  flex: none;
}

#sidebar.collapsed #sidebar-tabs {
  flex-direction: column;
  border-bottom: none;
  box-shadow: none;
}

#sidebar.collapsed #sidebar-tabs>.item.active {
  border-bottom: 1px solid var(--color-border-highlight-alt);
  border-radius: 5px;
}

#sidebar.collapsed .sidebar-tab {
  display: none;
}

/* ----------------------------------------- */
/*  Folders and Sub-folders
/* ----------------------------------------- */
li.folder>.folder-header {
  padding: 6px;
  line-height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

li.folder>.folder-header h3 {
  margin: 0;
  color: var(--color-text-light-highlight);
  line-height: 24px;
}

li.folder>.folder-header h3>i {
  margin-right: 10px;
}

li.folder>.folder-header .create-folder,
li.folder>.folder-header .create-document {
  flex: 0 0 20px;
  text-align: center;
  color: var(--color-text-light-3);
  font-size: var(--font-size-14);
}

li.folder.collapsed .subdirectory {
  display: none;
}

li.folder.collapsed>.folder-header {
  background: rgba(0, 0, 0, 0.5);
}

li.folder.collapsed>.folder-header h3 {
  text-shadow: none;
  color: inherit;
}

li.folder.collapsed>.folder-header h3>i:before {
  content: "\f07b";
}

li.folder.collapsed>.folder-header .create-folder {
  display: none;
}

li.folder.droptarget>header h3 {
  text-shadow: 1px 1px 3px var(--color-shadow-dark);
  font-size: 1.2em;
}

li.folder.droptarget>header h3 i {
  text-shadow: 0 0 4px var(--color-shadow-primary);
  transform: scale(1.2);
}

/**
 * Subdirectory Styles
 */
.subdirectory {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 6px solid var(--color-border-dark-1);
  border-bottom: 2px solid var(--color-border-dark-1);
}

.subdirectory:empty {
  border: none;
}

.subdirectory .folder {
  border-left: 2px solid var(--color-border-dark-3);
}

/* ----------------------------------------- */
/*  1.0 - Chat Panel
/* ----------------------------------------- */
.notification-pip {
  color: var(--color-text-hyperlink);
  text-shadow: 1px 1px 3px var(--color-shadow-dark);
  position: absolute;
  top: -1px;
  right: -2px;
}

.notification-pip.update {
  position: relative;
  padding-right: 2px;
}

#chat-notification {
  display: none;
}

#chat-controls {
  flex: 0 0 28px;
  margin: 0 6px;
  align-content: center;
}

#chat-controls .chat-control-icon {
  flex: 0;
}

#chat-controls .roll-type-select {
  width: 200px;
  height: 24px;
  margin: 0 6px;
  background: rgba(255, 255, 245, 0.8);
}

#chat-controls i.fas {
  font-size: var(--font-size-20);
  line-height: 28px;
}

#chat-controls .control-buttons {
  flex: 0 0 48px;
}

#chat-controls .control-buttons a {
  display: inline-block;
  width: 20px;
  text-align: center;
}

/* Chat Log Container */
#chat-log {
  flex: 1;
  height: calc(100% - 130px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
}

/* Single Chat Message */
.chat-message {
  margin: 3px;
  padding: 5px;
  font-size: var(--font-size-14);
  color: var(--color-text-dark-primary);
  background: url(/ui/parchment.jpg) repeat;
  border: 2px solid #6f6c66;
  border-radius: 5px;
}

.chat-message .message-header {
  line-height: 20px;
  color: var(--color-text-dark-secondary);
}

.chat-message .message-header .message-sender {
  flex: 3;
  margin: 0;
  white-space: nowrap;
}

.chat-message .message-header .message-metadata {
  flex: 2;
  text-align: right;
  font-size: var(--font-size-12);
}

.chat-message .message-header .flavor-text,
.chat-message .message-header .whisper-to {
  flex: 0 0 100%;
  font-size: var(--font-size-12);
}

.chat-message .message-content {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.chat-message.emote {
  background: #f3edde;
  border: 2px solid #887c5d;
}

.chat-message.whisper {
  background: #e8e8ef;
  border: 2px solid #545469;
}

.chat-message.blind {
  background: #f5eaf5;
  border: 2px solid #6b476b;
}

.chat-message .cards-notification {
  align-items: center;
}

.chat-message .cards-notification>.icon {
  flex: 0 0 32px;
  height: 32px;
  margin-right: 8px;
}

.chat-message .cards-notification>p {
  margin: 0;
}

/* New Chat Message Form */
#chat-form {
  height: 100px;
  flex: 0 0 100px;
  margin: 0 6px 6px;
}

#chat-form textarea {
  width: 100%;
  height: 100%;
  resize: none;
  background: url(/ui/parchment.jpg) repeat;
}

/* Roll Table Results */
.chat-message .table-draw .table-description {
  border-top: 1px solid var(--color-border-light-primary);
  color: var(--color-text-dark-secondary);
  font-size: var(--font-size-12);
  padding: 5px 0;
}

.chat-message .table-draw .table-results {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
}

.chat-message .table-draw .table-results .table-result {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border-light-primary);
  padding: 3px 0;
}

.chat-message .table-draw .table-results .table-result img.result-image {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  object-fit: cover;
}

.chat-message .table-draw .table-results .table-result .result-text {
  margin: 0;
  padding: 0;
  line-height: 16px;
}

.chat-message .table-draw .table-results .table-result:last-child {
  border-bottom: none;
}

/** Card Draws */
.chat-message .card-draw {
  align-items: center;
}

.chat-message .card-draw .card-face {
  height: 48px;
  flex: 0;
  margin-right: 8px;
}

.chat-message .card-draw .card-name {
  line-height: 48px;
  margin: 0;
  font-weight: bold;
}

/* Popped-out Message */
.chat-popout .window-content {
  padding: 1px;
}

/* ----------------------------------------- */
/*  2.0 - Combat Tracker
/* ----------------------------------------- */
#combat #combat-round {
  flex: 0 0 calc(var(--sidebar-header-height) * 2px);
  line-height: var(--sidebar-header-height);
  font-size: var(--font-size-20);
  text-align: center;
  border-bottom: 2px groove var(--color-border-dark-4);
}

#combat #combat-round .encounters {
  --control-width: 28px;
}

#combat #combat-round .encounters a {
  font-size: var(--font-size-14);
  flex: 0 0 var(--control-width);
  color: var(--color-text-light-6);
}

#combat #combat-round .encounters a.combat-cycle {
  font-size: var(--font-size-24);
}

#combat #combat-round .encounters a[disabled] {
  visibility: hidden;
}

#combat #combat-round .encounters h4 {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-16);
  color: var(--color-text-light-5);
  text-align: center;
}

#combat #combat-round .encounters h3 {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-18);
  text-align: center;
}

#combat #combat-round .encounters h3.encounter-title {
  margin-left: var(--control-width);
}

#combat #combat-round .encounters:not(.combat) a[disabled] {
  display: none;
}

#combat #combat-tracker {
  height: calc(100% - (var(--sidebar-header-height) * 3px - 2px));
  padding: 1px 0;
}

#combat #combat-controls {
  margin: 0;
  border-top: 2px groove var(--color-border-dark-4);
  padding-top: 4px;
}

#combat #combat-controls a {
  flex: 1;
  font-size: var(--font-size-20);
  text-align: center;
  line-height: var(--sidebar-header-height);
}

#combat #combat-controls a.center {
  flex: 3;
}

#combat li.combatant .token-image {
  margin: 0;
}

#combat li.combatant .token-name {
  flex: 1;
  overflow: hidden;
  margin: 0 5px;
  text-shadow: 1px 1px 4px var(--color-shadow-dark);
}

#combat li.combatant .token-name h4 {
  flex: 0 0 24px;
  line-height: 28px;
  margin: 0 0 2px;
}

#combat li.combatant .token-name .combatant-controls {
  flex: 0 0 20px;
  font-size: var(--font-size-14);
  line-height: 20px;
}

#combat li.combatant .token-name .combatant-control {
  flex: 0 0 20px;
  height: 20px;
  float: left;
  color: var(--color-text-dark-5);
}

#combat li.combatant .token-name .combatant-control.active {
  color: var(--color-text-light-1);
}

#combat li.combatant .token-name .token-effects {
  height: 20px;
  overflow: hidden;
}

#combat li.combatant .token-name img.token-effect {
  width: 16px;
  height: 16px;
  margin: 1px 0;
  border: none;
  border-radius: 0;
}

#combat li.combatant .token-resource {
  flex: 0 0 32px;
  color: var(--color-text-light-4);
  text-align: center;
  border-right: 1px solid var(--color-border-dark-2);
}

#combat li.combatant .token-initiative {
  flex: 0 0 48px;
  text-align: center;
}

#combat li.combatant .token-initiative .initiative {
  font-size: var(--font-size-14);
  text-shadow: 1px 1px 4px var(--color-shadow-dark);
}

#combat li.combatant .roll {
  display: block;
  width: 40px;
  height: var(--sidebar-item-height);
  background: url(/icons/svg/d20.svg) no-repeat 50% 50%;
  background-size: 32px;
  margin: 0 0.5em;
}

#combat li.combatant .roll:hover {
  background-image: url(/icons/svg/d20-highlight.svg);
}

#combat li.combatant.hover,
#combat li.combatant:hover {
  background: rgba(255, 255, 255, 0.08);
}

#combat li.combatant.active {
  background: rgba(255, 255, 255, 0.1);
}

#combat li.combatant.active .initiative {
  font-weight: bold;
}

#combat li.combatant.hidden {
  color: var(--color-text-light-7);
}

#combat li.combatant.hidden img {
  opacity: 0.3;
}

#combat li.combatant.defeated {
  color: #b32019;
}

#combat li.combatant.defeated img {
  opacity: 0.3;
  transform: scale(0.75);
}

/* ----------------------------------------- */
/*  3.0 - Scenes Directory
/* ----------------------------------------- */
#scenes {
  --sidebar-scene-height: 100px;
}

#scenes .scene {
  position: relative;
  height: var(--sidebar-scene-height);
  line-height: var(--sidebar-scene-height);
  background-size: 130% auto;
  background-position: 50% 50%;
  /* border: 2px solid var(--color-border-dark-1);
  box-shadow: 0 0 20px var(--color-shadow-dark) inset; */
}

#scenes .scene.context,
#scenes .scene.active {
  margin-top: 0;
  border: 2px solid var(--color-border-dark);
  /* box-shadow: 0 0 10px var(--color-shadow-highlight); */
}

#scenes .scene h3 {
  margin: 0;
  line-height: calc(var(--sidebar-scene-height) - 10px);
  text-align: center;
  font-size: 1.5em;
  font-weight: normal;
  text-shadow: 1px 1px 3px var(--color-shadow-dark);
}

#scenes .subdirectory {
  border-left: 10px solid var(--color-border-dark);
  border-bottom: none;
}

/* ----------------------------------------- */
/*  6.0 - Journal
/* ----------------------------------------- */
#journal .document {
  line-height: 32px;
}

/* ----------------------------------------- */
/*  7.0 - Playlists
/* ----------------------------------------- */
#playlists {
  /** Single Playlist */
  /** Single Sound */
  /** Single Sound Controls */
  /** Global Audio Controls */
}

#playlists h4 {
  height: 20px;
  overflow: hidden;
  margin: 0;
  text-align: left;
  white-space: normal;
  word-break: break-all;
}

#playlists .playlist {
  padding: 8px;
  line-height: 20px;
}

#playlists .playlist .playlist-header {
  flex: 0 0 100%;
  justify-content: space-between;
  text-decoration: underline;
}

#playlists .playlist .playlist-header .playlist-name {
  cursor: pointer;
}

#playlists .playlist .playlist-header .playlist-name i.fa {
  color: var(--color-text-light-6);
  margin-left: 5px;
}

#playlists .playlist-sounds {
  flex: 0 0 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#playlists .collapsed .playlist-sounds {
  display: none;
}

#playlists li.sound {
  margin: 2px 0;
  padding: 0;
  align-items: center;
}

#playlists li.sound .sound-playback {
  flex: 0 0 100%;
}

#playlists li.sound .sound-playback .sound-timer {
  flex: 0 auto;
  margin-right: 5px;
  color: var(--color-text-light-primary);
  font-size: var(--font-size-11);
}

#playlists .sound-controls {
  flex: 0 0 32px;
  margin-left: 5px;
  justify-content: flex-end;
  align-items: center;
}

#playlists .playlist-header .sound-controls {
  flex: 0 0 64px;
}

#playlists .sound-control {
  flex: 0 0 16px;
  text-align: center;
  color: var(--color-text-light-3);
  font-size: var(--font-size-11);
}

#playlists .sound-control.inactive {
  color: var(--color-text-dark-6);
}

#playlists .sound-control.inactive:hover {
  text-shadow: none;
}

#playlists .sound-control.disabled {
  color: var(--color-text-dark-4);
}

#playlists .sound-control.disabled:hover {
  text-shadow: none;
}

#playlists .sound-control[data-action="sound-stop"] {
  color: var(--color-text-hyperlink);
}

#playlists .sound-control[data-action="playlist-stop"] {
  color: var(--color-text-hyperlink);
}

#playlists .global-control {
  flex: 0;
  line-height: 20px;
  text-align: left;
}

#playlists .global-control .playlist-header {
  padding: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  justify-content: space-between;
}

#playlists .global-control .playlist-header h4 {
  text-decoration: underline;
}

#playlists .global-control .playlist-header h4 i.fa {
  color: var(--color-text-light-6);
  margin-left: 5px;
}

#playlists .global-control .playlist-sounds {
  padding: 6px;
}

#playlists .global-control .playlist-sounds input[type="range"] {
  flex: 2;
  margin: 0 3px;
}

#playlists .global-control .pin {
  flex: none;
  margin-right: 4px;
}

#playlists #global-volume .playlist-header h4 {
  cursor: pointer;
}

#playlists #global-volume li.sound {
  margin: 0;
}

#playlists #currently-playing {
  margin-top: 1px;
}

#playlists i.volume-icon {
  flex: 0;
  line-height: 20px;
  color: var(--color-text-light-primary);
}

/* ----------------------------------------- */
/*  8.0 - Compendium Packs
/* ----------------------------------------- */
#compendium h3 {
  margin: 0;
  padding: 5px;
  border: 1px solid var(--color-border-dark-4);
  background: rgba(255, 255, 255, 0.1);
}

#compendium ol.compendium-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#compendium li.compendium-pack {
  position: relative;
  padding: 4px 6px;
  line-height: 24px;
}

#compendium li.compendium-pack .pack-title i {
  margin-right: 5px;
}

#compendium li.compendium-pack .compendium-footer {
  font-size: var(--font-size-13);
  color: var(--color-text-light-primary);
}

#compendium li.compendium-pack .status-icons {
  position: absolute;
  font-weight: normal;
  color: var(--color-text-dark-inactive);
  text-align: right;
  right: 0;
}

/**
 * Single Compendium Pack
 */
.compendium.directory .directory-header {
  border-bottom: none;
}

.compendium.directory .directory-list .directory-item {
  line-height: 48px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid var(--color-border-light-1);
  /* box-shadow: none; */
}

/* ----------------------------------------- */
/*  Settings                                 */
/* ----------------------------------------- */
#settings {
  overflow-y: auto;
}

#settings #game-details {
  list-style: none;
  padding: 3px 8px;
  margin: 0;
}

#settings #game-details span {
  float: right;
}

#settings div {
  margin: 0 8px;
}

#settings h2 {
  margin: 6px 0;
  padding: 3px 8px;
  border-top: 1px solid var(--color-border-dark-4);
  border-bottom: 1px solid var(--color-border-dark-4);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--font-size-16);
}

#settings button {
  margin: 6px 0;
}

#client-settings {
  /* Tab Section */
}

#client-settings nav.tabs {
  font-size: var(--font-size-16);
  border-bottom: 1px solid var(--color-border-dark);
  padding: 7px 0;
}

#client-settings nav.tabs .item i {
  margin-right: 2px;
}

#client-settings section.content {
  border-top: 1px solid var(--color-border-light-primary);
}

#client-settings section.content .settings-list {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding-right: 0.5em;
}

#client-settings section.content .submenu>button {
  height: 30px;
  font-size: var(--font-size-12);
}

#client-settings section.content .submenu>label {
  line-height: 30px;
}

#client-settings section.content h2.module-header {
  margin: 0.25em 0;
}

/**
 * Role Permission Configuration Form
 */
#permissions-config header.table-header {
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
  border: 1px solid var(--color-border-dark-primary);
  text-align: center;
  color: var(--color-text-light-highlight);
  font-weight: bold;
  text-shadow: 1px 1px var(--color-shadow-dark);
}

#permissions-config ul.permissions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 400px;
  overflow: hidden auto;
  scrollbar-width: thin;
}

#permissions-config li.permission {
  padding: 5px;
  border-bottom: 1px solid var(--color-border-light-tertiary);
}

#permissions-config li.permission .form-fields {
  justify-content: space-around;
}

#permissions-config li.permission input[type="checkbox"] {
  margin: 0;
}

#permissions-config .index {
  flex: 0 0 200px;
  text-align: left;
  font-weight: bold;
}

#permissions-config .hint {
  flex: 0 0 100%;
  color: var(--color-text-dark-secondary);
  font-size: var(--font-size-13);
  margin: 5px 0 0;
}

/* ----------------------------------------- */
/*  Sidebar Pop-out                          */
/* ----------------------------------------- */
.app.sidebar-popout {
  min-height: 10vh;
  max-height: 90vh;
  /* border: 1px solid var(--color-border-dark-1); */
}

.app.sidebar-popout .window-content {
  background: none;
  color: var(--color-border-light-1);
  padding: 0;
}

/* ----------------------------------------- */
/*  Module Management                        */
/* ----------------------------------------- */
.package-list {
  list-style: none;
  margin: 0;
  padding: 0 5px 0 0;
  overflow: hidden auto;
}

.package-list .package {
  padding: 4px 0;
  border-top: none;
  border-bottom: 1px solid var(--color-border-light-primary);
}

.package-list .package:last-child {
  border-bottom: none;
}

.package-list .package.hidden {
  display: none;
}

.package-list .package .package-overview {
  flex: 0 0 100%;
  justify-content: flex-end;
}

.package-list .package .package-overview .package-title {
  flex: 1;
  text-decoration: underline;
  font-size: var(--font-size-14);
  margin: 0;
  color: var(--color-text-light-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-list .package .package-description {
  flex: 0 0 100%;
  margin: 3px 0;
  color: var(--color-text-light-primary);
  font-size: var(--font-size-12);
}

.package-list .package .package-description>* {
  margin: 0;
}

.package-list .package .package-description.hidden {
  display: none;
}

.package-list .package .package-metadata,
.package-list .package .package-controls {
  margin: 0;
  flex: 0 0 50%;
}

.package-list .package .package-metadata ul,
.package-list .package .package-controls ul {
  margin: 0;
}

.package-list .package .package-metadata {
  font-size: var(--font-size-12);
  padding: 0;
  color: var(--color-text-light-primary);
}

.package-list .package .package-controls {
  padding: 5px 0;
  text-align: right;
}

.package-list .package .package-controls button {
  width: 110px;
  height: 25px;
  font-size: var(--font-size-12);
  line-height: 24px;
  border: 1px solid var(--color-text-dark-1);
}

.package-list .package .package-controls buttonnot[hidden] {
  display: inline;
}

.package-list .package .package-url {
  margin: 0.25em 0 0;
  color: var(--color-text-light-3);
}

.package-list .package .package-footer {
  height: 32px;
  padding: 5px 0 0;
}

.package-list .package .tag {
  flex: none;
  min-width: 22px;
  text-align: center;
  height: 20px;
  border: 1px solid var(--color-border-dark);
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 0 0 2px;
  font-size: var(--font-size-11);
  line-height: 18px;
  text-decoration: none;
  background: #333;
  color: var(--color-text-light-highlight);
}

.package-list .package .tag.javascript {
  background: #803c62;
}

.package-list .package .tag.css {
  background: #1e5c6f;
}

.package-list .package .tag.compendium {
  background: #3b3a80;
}

.package-list .package .tag.unavailable {
  background: #750000;
}

.package-list .package .tag.unknown {
  background: #b07900;
  min-width: 50px;
}

.package-list .package .tag.languages {
  background: #224224;
}

.package-list .package .tag.version {
  min-width: 50px;
}

#module-management .expand {
  flex: 0 0 32px;
  height: 30px;
  margin: -6px 0 0 6px;
  padding: 0;
}

#module-management .package-list {
  margin-top: 5px;
  border-top: 1px solid var(--color-border-light-tertiary);
  height: 600px;
}

#module-management .package-list .package-metadata {
  flex: 0 0 100%;
}

#module-management .package-list .package-title {
  overflow: hidden;
  font-weight: bold;
}

#module-management .package-list .package-title,
#module-management .package-list .package-metadata,
#module-management .package-list .package-description {
  color: var(--color-text-dark-primary);
}

/* ---------------------------------------- */
/* Invitation Links                         */
/* ---------------------------------------- */
#invitation-links .connection.open {
  color: green;
}

#invitation-links .connection.unknown {
  color: rgba(214, 150, 0, 0.6);
}

#invitation-links .connection.closed {
  color: rgba(105, 0, 8, 0.6);
}

#invitation-links .sync {
  padding-left: 5px;
}

#invitation-links .invite-link[name=remote] {
  flex: 2.65;
}

#invitation-links .show-hide {
  padding-left: 5px;
  font-size: 130%;
  flex-grow: 0 !important;
  place-content: end;
  justify-content: end;
  width: 27px;
}

/* ----------------------------------------- */
/* General Sheet Styling
/* ----------------------------------------- */
.sheet {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

/* .sheet > * {
  flex: 1;
}
.sheet > .flex0 {
  display: block;
  flex: 0;
}
.sheet > .flex1 {
  flex: 1;
}
.sheet > .flex2 {
  flex: 2;
}
.sheet > .flex3 {
  flex: 3;
} */
.sheet header.sheet-header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

/* .sheet header.sheet-header > * {
  flex: 1;
}
.sheet header.sheet-header > .flex0 {
  display: block;
  flex: 0;
}
.sheet header.sheet-header > .flex1 {
  flex: 1;
}
.sheet header.sheet-header > .flex2 {
  flex: 2;
}
.sheet header.sheet-header > .flex3 {
  flex: 3;
} */
.sheet header.sheet-header img {
  flex: 0 0 64px;
  height: 64px;
  margin-right: 6px;
}

.sheet header.sheet-header h1 {
  flex: 1;
  margin: 0;
  border-bottom: none;
}

.sheet header.sheet-header h1 input {
  height: 48px;
  line-height: 48px;
  margin: 8px 2%;
  width: 96%;
}

.sheet nav.sheet-tabs {
  margin: 4px 0;
  border-top: 1px solid var(--color-border-light-primary);
  border-bottom: 1px solid var(--color-border-light-primary);
  padding: 7px 0;
}

.sheet nav.sheet-tabs .item i {
  margin-right: 2px;
}

.sheet footer.sheet-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex: 0 0 32px;
  line-height: 32px;
}

.sheet footer.sheet-footer>* {
  flex: 1;
}

.sheet footer.sheet-footer>.flex0 {
  display: block;
  flex: 0;
}

.sheet footer.sheet-footer>.flex1 {
  flex: 1;
}

.sheet footer.sheet-footer>.flex2 {
  flex: 2;
}

.sheet footer.sheet-footer>.flex3 {
  flex: 3;
}

.sheet .editor-content {
  height: 100%;
  overflow-y: auto;
  word-break: break-word;
}

/* ----------------------------------------- */
/* Token Sheet
/* ----------------------------------------- */
.token-sheet nav.sheet-tabs.light-tabs {
  margin-top: -4px;
  border-top: none;
}

.token-sheet .bar-data .sep {
  flex: 0 0 16px;
  text-align: center;
  font-size: 1.5em;
  line-height: 24px;
}

/* ----------------------------------------- */
/* Scene Notes
/* ----------------------------------------- */
.window-app.scene-notes .window-content {
  padding: 0 8px;
}

.window-app.scene-notes form {
  height: 100%;
  overflow: hidden;
}

.window-app.scene-notes .editor {
  height: 100%;
}

.window-app.scene-notes .editor-content {
  height: 100%;
  overflow-y: auto;
}

/* ---------------------------------------- */
/* Roll Table Sheet                         */
/* ---------------------------------------- */
.roll-table-config h1.name input {
  width: 100%;
  height: 48px;
  margin: 8px 0;
}

.roll-table-config textarea {
  resize: none;
  min-height: 44px;
}

.roll-table-config ol.table-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 600px;
  overflow-y: auto;
}

.roll-table-config ol.table-results .table-result {
  padding: 2px 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.roll-table-config ol.table-results .table-result input[type="text"] {
  width: 100%;
  height: 28px;
}

.roll-table-config ol.table-results .table-result>div {
  line-height: 36px;
  margin-right: 5px;
}

.roll-table-config ol.table-results .table-result .result-image {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  text-align: center;
  margin: 0;
}

.roll-table-config ol.table-results .table-result .result-image img {
  border: none;
  object-fit: cover;
  object-position: 50% 0;
}

.roll-table-config ol.table-results .table-result .result-type {
  flex: 0 0 110px;
}

.roll-table-config ol.table-results .table-result .result-details {
  flex: 1;
}

.roll-table-config ol.table-results .table-result .result-details select {
  width: 40%;
}

.roll-table-config ol.table-results .table-result .result-details .result-target {
  width: 58%;
  margin-left: 3px;
}

.roll-table-config ol.table-results .table-result .result-weight {
  flex: 0 0 50px;
  text-align: center;
}

.roll-table-config ol.table-results .table-result .result-range {
  flex: 0 0 92px;
  text-align: center;
}

.roll-table-config ol.table-results .table-result .result-range input {
  width: 36px;
}

.roll-table-config ol.table-results .table-result .result-controls {
  flex: 0 0 40px;
  margin: 0;
  text-align: center;
}

.roll-table-config ol.table-results .table-result .result-controls a {
  width: 20px;
}

.roll-table-config ol.table-results .table-result .result-controls .lock-result {
  color: var(--color-text-light-primary);
}

.roll-table-config ol.table-results .table-result.roulette {
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
}

.roll-table-config ol.table-results .table-result.drawn {
  background: rgba(0, 0, 0, 0.15);
}

.roll-table-config ol.table-results .table-result.drawn .lock-result {
  color: var(--color-text-dark-1);
}

.roll-table-config ol.table-results .table-header {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border-light-tertiary);
  line-height: 24px;
  font-weight: bold;
}

.scene-sheet .form-fields label.grid-label {
  flex: 1;
  text-align: right;
  font-size: var(--font-size-13);
}

.scene-sheet .capture-position>i,
.scene-sheet .grid-config>i {
  margin: 0;
}

/* --------------------------------------- */
/*  Macro Sheet                            */
/* --------------------------------------- */
.macro-sheet {
  min-width: 360px;
  min-height: 320px;
}

.macro-sheet form>* {
  flex: 0;
}

.macro-sheet .form-group.command {
  flex: 1;
}

.macro-sheet .form-group.command label {
  height: 24px;
}

.macro-sheet .form-group.command textarea {
  height: calc(100% - 24px);
  resize: none;
}

/* --------------------------------------- */
/*  Active Effects                         */
/* --------------------------------------- */
.active-effect-sheet .changes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.active-effect-sheet .effect-change {
  align-items: center;
  padding: 3px 1px;
  border-bottom: 1px solid var(--color-border-light-primary);
}

.active-effect-sheet .effect-change:last-child {
  border-bottom: none;
}

.active-effect-sheet .effect-change .key {
  flex: 2;
}

.active-effect-sheet .effect-change .mode,
.active-effect-sheet .effect-change .value {
  padding: 0 2px;
}

.active-effect-sheet .effect-change .mode select {
  width: 100%;
}

.active-effect-sheet .effects-header {
  height: 28px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-border-light-tertiary);
  font-weight: bold;
}

.active-effect-sheet .effects-header .key {
  padding-left: 4px;
}

.active-effect-sheet .effect-controls {
  flex: 0 0 24px;
  text-align: center;
}

.user-config label {
  font-weight: bold;
}

.user-config img.avatar {
  flex: 0 0 64px;
}

.user-config #characters {
  font-size: var(--font-size-12);
  max-height: 320px;
}

.user-config #characters .directory-item.context {
  background: rgba(0, 0, 0, 0.1);
}

.user-config #characters .directory-item.context h3 {
  font-weight: bold;
}

/* ----------------------------------------- */
/*  Cards Sheet                              */
/* ----------------------------------------- */
img.card-face {
  object-fit: cover;
  border: none;
}

.cards-config {
  --card-height: 48px;
}

.cards-config .cards-header {
  background: rgba(0, 0, 0, 0.1);
  border-top: 2px groove #444;
  border-bottom: 2px groove #444;
  margin: 4px 0;
  padding: 3px 0;
  align-items: center;
  text-align: left;
  font-weight: bold;
}

.cards-config ol.cards {
  max-height: 600px;
  overflow-y: auto;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.cards-config ol.cards li.card {
  height: var(--card-height);
  align-items: center;
}

.cards-config .card-face {
  flex: 0;
  height: var(--card-height);
  width: calc(var(--card-height) * 2 / 3);
}

.cards-config .card-name {
  flex: 3;
  margin: 0 0 0 8px;
  font-weight: bold;
}

.cards-config .card-suit,
.cards-config .card-value,
.cards-config .card-faces {
  text-align: center;
}

.cards-config .card-faces {
  flex: 0 0 48px;
}

.cards-config .card-drawn {
  flex: 0 0 64px;
  text-align: right;
}

.cards-config .card-controls {
  flex: 0 0 24px;
  text-align: right;
  padding-right: 4px;
}

.cards-config.deck .card-controls {
  flex: 0 0 48px;
}

.cards-config a.card-control {
  margin: 0 2px;
  color: var(--color-text-dark-secondary);
  font-size: var(--font-size-12);
  text-align: center;
}

.cards-config a.card-control[disabled] {
  pointer-events: none;
  color: var(--color-text-dark-inactive);
}

.cards-config .sort-mode {
  flex: 0 0 32px;
}

.card-config div.face {
  border-top: 1px solid var(--color-text-light-primary);
}

.card-config .form-fields button {
  flex: 0 0 32px;
  text-align: center;
}

#document-create .cards-presets.form-group {
  margin: 8px 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-text-light-primary);
}