/* ----------------------------------------- */
/*  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;
  background-image: url("../ui/denim.png");
  background-repeat: repeat;
  background-size: auto;
  font-family: "Signika", sans-serif;
  font-size: 18px;
  box-shadow: 0 0 50vw #000 inset;
}
body.background {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
#sidebar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  position: fixed;
  right: 5px;
  top: 5px;
  width: 300px;
  height: 99vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#sidebar > * {
  flex: 1;
}
#sidebar > .flex0 {
  display: block;
  flex: 0;
}
#sidebar > .flex1 {
  flex: 1;
}
#sidebar > .flex2 {
  flex: 2;
}
#sidebar > .flex3 {
  flex: 3;
}
canvas#board {
  z-index: 0;
  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 #111;
  border-radius: 5px;
  box-shadow: 0 0 10px #000;
}
/* ---------------------------------------- */
/*  Text                                    */
/* ---------------------------------------- */
/* Headers */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5rem;
  padding: 0;
  font-weight: normal;
}
h1 {
  font-size: 2em;
  border-bottom: 2px solid #782e22;
}
h2 {
  font-size: 1.5em;
  border-bottom: 1px solid #782e22;
}
h3 {
  font-size: 1.125em;
}
/* Links */
a {
  cursor: pointer;
}
a[href] {
  color: #ff6400;
}
a:hover {
  text-shadow: 0 0 8px red;
}
a.entity-link,
a.inline-roll {
  background: #DDD;
  padding: 1px 4px;
  border: 1px solid #4b4a44;
  border-radius: 2px;
  white-space: nowrap;
  word-break: break-all;
}
a.entity-link i,
a.inline-roll i {
  color: #7a7971;
}
a.entity-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: #FFFFFF;
}
/* Standard Lists */
ul,
ol {
  margin: 0.5em 0;
  padding: 0 0 0 1.5em;
}
/* Definition Lists */
dl {
  margin: 0.5em 0;
}
dt {
  font-weight: bold;
}
dd {
  padding-left: 5px;
  margin: 3px 0;
}
/* HR separators */
hr {
  border: none;
  border-top: 1px solid #b5b3a4;
  border-bottom: 1px solid #f0f0e0;
}
/* Blockquote */
blockquote {
  margin: 0.5em 0 0.5em 10px;
  padding: 0 0 0 20px;
  border-left: 3px solid #7a7971;
  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 #666;
  border-bottom: 1px solid #666;
}
/* ---------------------------------------- */
/* Tables                                   */
/* ---------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid #7a7971;
  border-bottom: 1px solid #7a7971;
  margin: 0.5em 0;
}
table thead {
  background: rgba(0, 0, 0, 0.5);
  color: #f0f0e0;
  text-shadow: 1px 1px #000;
  border-bottom: 1px solid #000;
}
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 #ff6400;
}
:root {
  scrollbar-width: thin;
  scrollbar-color: #782e22 #111;
}
/* ----------------------------------------- */
/* Images
/* ----------------------------------------- */
img {
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 2px;
  max-width: 100%;
}
img.noborder {
  border: none;
  box-shadow: none;
  outline: none;
}
/**
 * Basic Application Wrapper
 */
.app {
  max-height: 100%;
  background: url(../ui/denim075.png) repeat;
  border-radius: 5px;
  box-shadow: 0 0 20px #000;
  margin: 3px 0;
  padding: 0.5em;
  color: #f0f0e0;
  z-index: 30;
}
/**
 * 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 #000;
  padding: 0;
  z-index: 100;
  /* Resizable movement handle */
}
.window-app > * {
  flex: 1;
}
.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 #000;
}
.window-app .window-header .window-title {
  margin: 0;
  word-break: break-all;
}
.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 #000;
}
.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: #191813;
  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: 101;
}
.window-app .window-resizable-handle {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -1px;
  right: 0;
  background: #444;
  padding: 2px;
  border: 1px solid #111;
  border-radius: 4px 0 0 0;
}
.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 #000;
  border-radius: 5px;
  color: #EEE;
  z-index: 31;
}
#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: #FFF;
  text-shadow: 0 0 4px red;
}
#context-menu li.context-item > i {
  margin-right: 5px;
}
.window-app #context-menu {
  z-index: 101;
}
/* ----------------------------------------- */
/*  Player Config UI
/* ----------------------------------------- */
#player-config label {
  font-size: 14px;
  font-weight: bold;
  color: #191813;
}
#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 #FF0000;
  border-bottom: 1px solid #ff6400;
  box-shadow: 0 0 10px #ff6400;
}
#player-config .directory-item .entity-name {
  font-size: 13px;
  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 {
  position: fixed;
  bottom: 12px;
  left: 15px;
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
}
#players.hidden {
  display: none;
}
#players h3 {
  margin: 3px;
  padding: 4px;
  border-bottom: 2px groove #23221d;
}
#players h3 i {
  margin: 0 6px;
}
#players h3 .players-mode {
  font-size: 16px;
  margin: 0 5px;
  color: #b5b3a4;
}
#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 #ff6400;
  border-bottom: 1px solid #ff6400;
}
#players ol .player.context .player-name {
  text-shadow: 0 0 5px red;
}
#players ol .player-name.self {
  color: #c0eddb;
}
#players ol .player-active {
  flex: 0 0 8px;
  height: 8px;
  border: 1px solid #000;
  border-radius: 50%;
  margin: 5px 8px 0 0;
}
#players ol .player-active.active {
  box-shadow: 0 0 5px #000;
}
/* ---------------------------------------- */
/* Notifications                            */
/* ---------------------------------------- */
#notifications {
  position: fixed;
  width: 60%;
  top: 100px;
  left: 20%;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 160;
}
.notification {
  background: rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5em;
  padding: 6px 8px;
  line-height: 20px;
  border: 1px solid #23221d;
  border-radius: 5px;
  box-shadow: 0 0 10px #000;
  color: #f0f0e0;
}
.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";
}
/* ---------------------------------------- */
/* Controls Reference                       */
/* ---------------------------------------- */
#controls-reference .window-content {
  max-height: 75vh;
}
#controls-reference h2 {
  padding: 2px 0;
  border-top: 1px solid #4b4a44;
  border-bottom: 1px solid #4b4a44;
}
#controls-reference h3 {
  padding: 2px 0;
  border-top: 1px solid #b5b3a4;
  border-bottom: 1px solid #b5b3a4;
  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 #999;
  border-radius: 5px;
  box-shadow: 1px 1px #444;
  text-align: center;
  min-width: 24px;
}
#controls-reference ol.hotkey-list li.gm .key {
  background: #f5eaf5;
}
/* ---------------------------------------- */
/*  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: 26px;
}
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;
  margin: -2px 0;
  line-height: 22px;
}
form .form-group .form-fields span.sep {
  flex: none;
}
form .form-group span.units {
  flex: 0;
  line-height: 28px;
  font-size: 12px;
  color: #4b4a44;
}
form .form-group-stacked > *,
form .form-group.stacked > * {
  flex: 0 0 100%;
}
form .form-group.hidden {
  display: none;
}
form .form-header {
  margin: 0;
  color: #23221d;
}
form .notes,
form .hint {
  flex: 0 0 100%;
  font-size: 12px;
  line-height: 16px;
  color: #4b4a44;
  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: 26px;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 3px;
  margin: 0;
  color: #191813;
  font-family: inherit;
  font-size: inherit;
  text-align: inherit;
  line-height: inherit;
  border: 1px solid #7a7971;
  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 red;
}
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: 11px;
}
label.checkbox > input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 3px 0 0;
  position: relative;
  top: 4px;
}
label.checkbox.right > input[type="checkbox"] {
  margin: 0 0 0 2px;
}
/* Select Boxes */
select {
  height: 27px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid #7a7971;
  border-radius: 3px;
  padding: 0 3px;
  text-overflow: ellipsis;
}
select:focus {
  box-shadow: 0 0 5px red;
  outline: none;
}
select[multiple] {
  height: auto;
  padding: 3px;
}
/* Text Areas */
textarea {
  width: 100%;
  min-height: 50px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid #000;
  border-radius: 3px;
  font-family: monospace;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
textarea:focus {
  outline: 2px solid #782e22;
  box-shadow: 0 0 10px #ff6400;
}
/* Buttons */
button {
  width: 100%;
  margin: 0 1px;
  background: rgba(255, 255, 240, 0.8);
  border: 1px solid #b5b3a4;
  border-radius: 3px;
  font-size: 14px;
  line-height: 28px;
  font-family: "Signika", sans-serif;
}
button:hover,
button:focus {
  outline: none;
  box-shadow: 0 0 5px red;
}
button:disabled {
  color: #4b4a44;
  box-shadow: none;
}
button > i {
  margin-right: 3px;
}
form button {
  background: rgba(0, 0, 0, 0.1);
  border: 2px groove #f0f0e0;
}
input:disabled {
  border: none;
  color: #4b4a44;
}
input:disabled:hover {
  border: none;
  box-shadow: none;
  outline: none;
}
input::placeholder {
  color: #4b4a44;
  opacity: 1;
}
/* Color Picker */
input[type="text"].color {
  flex: 1.45;
}
input[type="color"][data-edit] {
  height: 26px;
  background: transparent;
  border: 2px groove #f0f0e0;
}
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 #000000;
  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 #111;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  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 #111;
  border-radius: 6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #999999;
  border: 1px solid #111;
  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 #000000;
  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 #b5b3a4;
  padding: 2px;
  margin-left: 10px;
}
/**
 * Dark mode inputs
 */
.dark button {
  background: rgba(255, 255, 240, 0.8);
  border: 2px solid #c9c7b8;
}
.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 #111;
  border-radius: 4px;
  padding: 1px 2px;
  box-shadow: 0 0 1px #000;
}
.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: 12px;
  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: wrap;
  justify-content: flex-start;
}
.tabs > * {
  flex: 1;
}
.tabs > .flex0 {
  display: block;
  flex: 0;
}
.tabs > .flex1 {
  flex: 1;
}
.tabs > .flex2 {
  flex: 2;
}
.tabs > .flex3 {
  flex: 3;
}
.tabs .item {
  text-align: center;
}
.tabs .item.active {
  text-shadow: 0 0 10px red;
}
.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 #7a7971;
}
nav.list-filters a.filter.active {
  font-weight: bold;
  border-bottom: 2px solid #44191A;
}
/* Draggable Containers */
.draggable {
  cursor: move;
}
#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 #f0f0e0;
  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 #c9c7b8;
}
/* ----------------------------------------- */
/* 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 #444;
  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 #666;
  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 #444;
}
.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 red;
}
.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 .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 #191813;
  border-bottom: 1px solid #191813;
}
.filepicker .tiles-list li img {
  border: none;
  margin: 0;
  object-fit: contain;
}
.filepicker .tiles-list li.picked {
  box-shadow: 0 0 6px inset #ff6400;
}
.filepicker .images-list li {
  position: relative;
  height: 200px;
  padding: 0;
  border: 1px solid #191813;
}
.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 #000;
  border-top: none;
  border-radius: 0 0 5px 5px;
  text-align: center;
  color: #f0f0e0;
  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 #7a7971;
  background: #c9c7b8;
  border-radius: 3px;
}
.filepicker .display-modes a.active {
  text-shadow: 0 0 6px #ff6400;
  border: 1px solid #191813;
  background: #b5b3a4;
}
/* ----------------------------------------- */
/* 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 #FFF;
}
.app .mce-top-part::before {
  box-shadow: none;
}
.app .mce-btn {
  background: transparent;
  border: none;
  color: #111;
}
.app .mce-btn:hover {
  background: transparent;
  border: none;
  color: inherit;
}
.app .mce-btn .mce-ico {
  color: #111;
}
.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 {
  order: 1;
}
.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 #999;
  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: 20px;
  font-weight: bold;
}
.dice-roll .dice-total.success {
  color: green;
}
.dice-roll .dice-total.failure {
  color: red;
}
.dice-roll .dice-tooltip {
  display: none;
}
/** Inline Roll Tooltip */
.inline-roll .dice-tooltip {
  width: 280px;
  position: fixed;
  background: url(../ui/parchment.jpg) repeat;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px 5px 0;
  box-shadow: 0 0 10px #000;
}
.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: 14px;
  color: #BBB;
}
.dice-roll .dice-tooltip .reroll {
  color: #777;
  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: 12px;
}
.message.ic .dice-roll {
  font-style: normal;
}
/* ----------------------------------------- */
/*  Dice Tooltip
/* ----------------------------------------- */
.dice-tooltip .part-header {
  margin: 0;
  line-height: 24px;
  border-bottom: 1px solid #999;
}
.dice-tooltip .part-header .part-formula {
  font-weight: bold;
  flex: 1;
}
.dice-tooltip .part-header .part-flavor {
  flex: none;
  margin-right: 5px;
  font-size: 12px;
  color: #4b4a44;
}
.dice-tooltip .part-header .part-total {
  flex: none;
  font-size: 16px;
  font-weight: bold;
  padding: 0 5px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #999;
  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: 16px;
  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: 8px;
  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: 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 #000;
  border: 1px solid #333;
  color: #DDD;
  height: 40px;
  line-height: 40px;
  margin: 0;
  border-radius: 8px;
  font-size: 30px;
  font-weight: bold;
  pointer-events: all;
}
.placeable-hud input[type="text"]:focus {
  box-shadow: 0 0 10px #c60;
  border: 1px solid red;
}
.placeable-hud .control-icon {
  box-sizing: content-box;
  width: 40px;
  flex: 0 0 40px;
  margin: 8px 0;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  color: #CCC;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px #000;
  border: 1px solid #333;
  border-radius: 8px;
  pointer-events: all;
}
.placeable-hud .control-icon:first-child {
  margin-top: 0;
}
.placeable-hud .control-icon i[class^=fa] {
  position: relative;
  top: 1px;
}
.placeable-hud .control-icon:hover {
  color: #EEE;
}
.placeable-hud .control-icon.active {
  border: 1px solid #ff6400;
}
.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: 101;
  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: 18px;
  color: #AAA;
}
#token-hud .control-icon.effects {
  position: relative;
}
#token-hud .status-effects {
  visibility: hidden;
  position: absolute;
  left: 50px;
  top: 0;
  display: grid;
  padding: 3px;
  box-sizing: content-box;
  width: 100px;
  grid-template-columns: 25px 25px 25px 25px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 15px #000;
  border: 1px solid #333;
  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 #ff6400;
}
/* ---------------------------------------- */
/* Chat Bubbles
/* ---------------------------------------- */
.chat-bubble {
  position: absolute;
  padding: 8px;
  background: #f5f2ec;
  min-width: 100px;
  max-width: 400px;
  max-height: 100px;
  color: #222;
  border: 2px solid #6f6c66;
  box-shadow: 0 0 20px #000;
  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: #444;
  font-style: italic;
}
#logo {
  position: absolute;
  top: 12px;
  left: 10px;
  z-index: 60;
  border: none;
  box-sizing: border-box;
}
#navigation {
  position: fixed;
  top: 12px;
  left: 120px;
  width: calc(100% - 440px);
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: none;
  pointer-events: none;
}
#navigation .nav-item {
  line-height: 32px;
  padding: 0 8px;
  margin: 0 8px 8px 0;
  border: 1px solid #000;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  pointer-events: all;
}
#navigation #nav-toggle {
  flex: 0 0 32px;
  height: 34px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}
#navigation #nav-toggle:hover {
  text-shadow: 0 0 10px #ff6400;
}
#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: #FFF;
  border: 1px solid red;
  background: rgba(52, 52, 52, 0.95);
  border-bottom: 1px solid #ff6400;
  box-shadow: 0 0 10px #ff6400;
}
#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: 12px;
  font-size: 10px;
  text-align: center;
  color: #000;
  font-weight: 700;
  background: #97dff4;
  border: 1px solid #000;
  border-radius: 8px;
}
#navigation.collapsed {
  pointer-events: none;
}
#navigation.collapsed #nav-toggle {
  pointer-events: all;
}
#navigation.collapsed #scene-list {
  display: none;
}
#loading {
  display: none;
  position: fixed;
  top: 60px;
  left: 120px;
  width: calc(100% - 480px);
  height: 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid #000;
  box-shadow: 0 0 4px #b2c3ff;
  border-radius: 4px;
  z-index: 1;
}
#loading label {
  line-height: 16px;
  position: absolute;
  top: -4px;
  padding: 0 5px;
  font-size: 18px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 6px #000;
}
#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: 101;
  top: 45%;
  left: calc(50% - 180px);
  width: 360px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  box-shadow: 0 0 30px #000;
}
#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: 24px;
  line-height: 48px;
}
#menu #menu-items li h4 {
  font-size: 32px;
  line-height: 48px;
  margin: 0;
}
#menu #menu-items li:hover {
  text-shadow: 0 0 10px #ff6400;
}
/* ----------------------------------------- */
/*  Scene Controls
/* ----------------------------------------- */
#controls {
  position: fixed;
  top: 60px;
  left: 10px;
  padding: 10px;
  list-style: none;
  background: none;
  box-shadow: none;
  border: none;
  /* Toggle Type Tools */
}
#controls.disabled {
  opacity: 0.4;
  pointer-events: none;
}
#controls .control-tools {
  display: none;
  list-style: none;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 54px;
  top: 10px;
}
#controls .active .control-tools {
  display: block;
}
#controls .scene-control,
#controls .control-tool {
  width: 36px;
  height: 36px;
  box-sizing: content-box;
  font-size: 24px;
  line-height: 36px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px #000;
  margin: 0 0 8px;
  color: #BBB;
  text-align: center;
  border: 1px solid #000;
  border-radius: 5px;
  cursor: pointer;
}
#controls .scene-control.active,
#controls .control-tool.active,
#controls .scene-control:hover,
#controls .control-tool:hover {
  color: #FFF;
  border: 1px solid red;
  border-bottom: 1px solid #ff6400;
  box-shadow: 0 0 10px #ff6400;
}
#controls .scene-control i.fas,
#controls .control-tool i.fas {
  margin: 0;
}
#controls .control-tool.toggle {
  background: rgba(30, 0, 60, 0.5);
  border: 1px solid #3b1893;
}
#controls .control-tool.toggle.active,
#controls .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: 60;
  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: 99;
  color: #EEE;
  text-shadow: 1px 1px 30px #000;
}
/* ---------------------------------------- */
/*  Hotbar                                  */
/* ---------------------------------------- */
#hotbar {
  z-index: 70;
  position: fixed;
  bottom: 10px;
  left: 220px;
  width: 580px;
  height: 52px;
  pointer-events: none;
  flex-wrap: nowrap;
}
#hotbar .bar-controls {
  flex: 0 0 32px;
  height: 100%;
  margin: 0 2px;
  text-align: center;
  color: #c9c7b8;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #000;
  box-shadow: 0 0 3px #444 inset;
  border-radius: 3px;
}
#hotbar .bar-controls a {
  display: block;
}
#hotbar .bar-controls a.page-control {
  font-size: 1.5em;
  line-height: 12px;
}
#hotbar .bar-controls span.page-number {
  display: block;
  font-size: 20px;
  line-height: 8px;
}
#hotbar #action-bar {
  flex: 1;
  height: 52px;
  pointer-events: all;
}
#hotbar #action-bar.collapsed {
  display: none;
  pointer-events: none;
}
#hotbar #macro-list {
  flex: 0 0 502px;
  height: 100%;
  list-style: none;
  margin: 0 2px;
  padding: 0;
  border: 1px solid #000;
  border-radius: 3px;
}
#hotbar .macro {
  position: relative;
  flex: 0 0 50px;
  height: 50px;
  border: 1px solid #000;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px #000 inset;
  cursor: pointer;
}
#hotbar .macro.inactive {
  box-shadow: 0 0 5px #444 inset;
}
#hotbar .macro:hover {
  box-shadow: 0 0 10px #ff6400 inset;
}
#hotbar .macro.active:hover {
  border: 1px solid red;
}
#hotbar .macro .macro-key {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 3px;
  background: #111;
  color: #f0f0e0;
  font-weight: bold;
  pointer-events: none;
}
#hotbar .macro .macro-icon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: 50% 50%;
  border: none;
}
#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 #191813;
  border-radius: 3px;
  color: #f0f0e0;
  line-height: 22px;
  text-align: center;
  white-space: nowrap;
  word-break: break-all;
}
#hotbar #hotbar-directory-controls {
  pointer-events: all;
}
#hotbar #hotbar-directory-controls a {
  line-height: 24px;
}
.players-hidden #hotbar {
  left: 15px;
}
/* ---------------------------------------- */
/*  Watermark                               */
/* ---------------------------------------- */
.watermark {
  width: 100%;
  z-index: 60;
  position: fixed;
  bottom: 10px;
  height: 24px;
  font-size: 1.5em;
  pointer-events: none;
  text-align: center;
  color: #AAA;
  text-shadow: 1px 1px 4px #000;
}
/* ---------------------------------------- */
/*  PRIMARY SIDEBAR                         */
/* ---------------------------------------- */
/* The Sidebar Container */
#sidebar {
  border: 1px solid #000;
}
/* The Sidebar Tabs Container */
#sidebar-tabs {
  flex: 0 0 32px;
  box-sizing: border-box;
  margin: 0 0 5px;
  border-bottom: 1px solid #ff6400;
  box-shadow: 0 0 10px red;
}
#sidebar-tabs > .item {
  position: relative;
  flex: 0 0 27px;
  line-height: 32px;
  border: 1px solid transparent;
  border-radius: 5px 5px 0 0;
}
#sidebar-tabs > .item.active {
  color: #FFF;
  border: 1px solid red;
  border-bottom: none;
  box-shadow: 0 0 6px inset #ff6400;
}
#sidebar-tabs > .item i[class^=fa] {
  margin-right: 0;
}
#sidebar-tabs > .collapse {
  position: relative;
  flex: 0 0 27px;
  line-height: 32px;
  color: #b5b3a4;
  text-align: center;
}
/* Individual Sidebar Tab */
.sidebar-tab {
  overflow: hidden;
}
.sidebar-tab .directory-header {
  flex: none;
  line-height: 32px;
  text-align: center;
  margin: 0 0 3px;
}
.sidebar-tab .directory-header .header-search {
  flex: 1;
  align-items: center;
}
.sidebar-tab .directory-header .header-search > * {
  flex: 0 0 24px;
}
.sidebar-tab .directory-header .header-search input {
  flex: 1;
  margin: 0 3px;
  background: rgba(255, 255, 245, 0.8);
}
.sidebar-tab .directory-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar-tab .directory-list .directory-item {
  line-height: 48px;
}
.sidebar-tab .directory-list .directory-item h3,
.sidebar-tab .directory-list .directory-item h4 {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-tab .directory-list .directory-item img {
  flex: 0 0 48px;
  height: 48px;
  width: 48px;
  object-fit: cover;
  object-position: 50% 0;
  margin: 0 8px 0 2px;
  border: none;
}
.sidebar-tab .directory-list .directory-item img[data-src] {
  visibility: hidden;
}
.sidebar-tab .directory-list .directory-item.context,
.sidebar-tab .directory-list .directory-item.active {
  border-color: #ff6400;
}
.sidebar-tab .directory-list .folder .context {
  border-color: #ff6400;
}
.sidebar-tab .directory-list .entity {
  border-top: 1px solid #000;
  border-bottom: 1px solid #333;
}
.sidebar-tab .directory-list .entity:last-child {
  border-bottom: 1px solid transparent;
}
.sidebar-tab .directory-list .folder + .entity {
  border-top: 1px solid transparent;
}
.sidebar-tab .action-buttons button {
  height: 28px;
  line-height: 26px;
  margin: 4px;
}
.sidebar-tab .directory-footer {
  flex: none;
}
#sidebar.collapsed #sidebar-tabs {
  border-bottom: none;
  box-shadow: none;
}
#sidebar.collapsed #sidebar-tabs > .item.active {
  border-bottom: 1px solid red;
  border-radius: 5px;
}
#sidebar.collapsed .sidebar-tab {
  display: none;
}
/* New Entity Creation */
#entity-create label {
  flex: 0 0 60px;
}
/* ----------------------------------------- */
/*  Folders and Sub-folders
/* ----------------------------------------- */
li.folder > .folder-header {
  padding: 6px;
  line-height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
li.folder > .folder-header h3 {
  margin: 0;
  color: #FFF;
  line-height: 24px;
}
li.folder > .folder-header h3 > i {
  margin-right: 10px;
}
li.folder > .folder-header .create-folder,
li.folder > .folder-header .create-entity {
  flex: 0 0 20px;
  text-align: center;
  color: #CCC;
  font-size: 14px;
}
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 #000;
  font-size: 1.2em;
}
li.folder.droptarget > header h3 i {
  text-shadow: 0 0 4px red;
  transform: scale(1.2);
}
/**
 * Subdirectory Styles
 */
.subdirectory {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 6px solid #111;
  border-bottom: 2px solid #111;
}
.subdirectory:empty {
  border: none;
}
.subdirectory .folder {
  border-left: 2px solid #333;
}
/* ----------------------------------------- */
/*  1.0 - Chat Panel
/* ----------------------------------------- */
.notification-pip {
  display: none;
  color: #ff6400;
  text-shadow: 1px 1px 3px #000;
  position: absolute;
  top: -1px;
  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: 20px;
  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;
}
#chat-log .message {
  border: 2px solid #6f6c66;
  border-radius: 5px;
  margin: 3px;
}
/* Single Chat Message */
.chat-message {
  background: url(../ui/parchment.jpg) repeat;
  padding: 5px;
  color: #191813;
  font-size: 14px;
}
.chat-message .message-header {
  line-height: 20px;
  color: #4b4a44;
}
.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: 12px;
}
.chat-message .message-header .flavor-text,
.chat-message .message-header .whisper-to {
  flex: 0 0 100%;
  font-size: 12px;
}
.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;
}
/* 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 #b5b3a4;
  color: #4b4a44;
  font-size: 12px;
  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 #b5b3a4;
  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;
}
/* Popped-out Message */
.chat-popout .window-content {
  padding: 1px;
}
/* ----------------------------------------- */
/*  2.0 - Combat Tracker
/* ----------------------------------------- */
#combat #combat-round {
  flex: 0 0 64px;
  line-height: 32px;
  font-size: 20px;
  text-align: center;
  border-bottom: 2px groove #444;
}
#combat #combat-round .encounters a {
  font-size: 16px;
  flex: 0 0 32px;
  color: #999;
}
#combat #combat-round .encounters a.combat-cycle {
  font-size: 24px;
}
#combat #combat-round .encounters a[disabled] {
  visibility: hidden;
}
#combat #combat-round .encounters h4 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  color: #AAA;
  text-align: center;
}
#combat #combat-round .encounters h3 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  text-align: center;
}
#combat #combat-tracker {
  height: calc(100% - 94px);
  padding: 1px 0;
}
#combat #combat-controls {
  margin: 0;
  border-top: 2px groove #444;
  padding-top: 4px;
}
#combat #combat-controls a {
  flex: 1;
  font-size: 20px;
  text-align: center;
  line-height: 32px;
}
#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 #000;
}
#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: 14px;
  line-height: 20px;
}
#combat li.combatant .token-name .combatant-control {
  flex: 0 0 20px;
  height: 20px;
  float: left;
  color: #666;
}
#combat li.combatant .token-name .combatant-control.active {
  color: #EEE;
}
#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: #BBB;
  text-align: center;
  border-right: 1px solid #222;
}
#combat li.combatant .token-initiative {
  flex: 0 0 48px;
  text-align: center;
}
#combat li.combatant .token-initiative .initiative {
  font-size: 14px;
  text-shadow: 1px 1px 4px #000;
}
#combat li.combatant .roll {
  display: block;
  width: 40px;
  height: 48px;
  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: #888;
}
#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 .scene {
  position: relative;
  height: 100px;
  line-height: 100px;
  background-size: 130% auto;
  background-position: 50% 50%;
  border: 2px solid #111;
  box-shadow: 0 0 20px #000 inset;
}
#scenes .scene.context,
#scenes .scene.active {
  margin-top: 0;
  border: 2px solid #000;
  box-shadow: 0 0 10px #ff6400;
}
#scenes .scene h3 {
  line-height: 90px;
  text-align: center;
  font-size: 1.5em;
  font-weight: normal;
  text-shadow: 1px 1px 3px #000;
}
#scenes .subdirectory {
  border-left: 10px solid #000;
  border-bottom: none;
}
/* ----------------------------------------- */
/*  6.0 - Journal
/* ----------------------------------------- */
#journal li.journal {
  line-height: 32px;
}
#journal li.journal .entity-name {
  margin: 0 0.25em;
}
/* ----------------------------------------- */
/*  7.0 - Playlists
/* ----------------------------------------- */
#playlists li.playlist {
  padding: 8px;
  line-height: inherit;
}
#playlists li.playlist .playlist-header {
  flex: 0 0 100%;
  justify-content: space-between;
  text-decoration: underline;
}
#playlists li.playlist .playlist-header .playlist-name {
  flex: none;
  cursor: pointer;
  max-width: 180px;
}
#playlists li.playlist .playlist-header .playlist-name i.fa {
  color: #999;
  margin-left: 5px;
}
#playlists li.playlist .playlist-header .playlist-controls {
  flex: 0 0 90px;
  justify-content: flex-end;
}
#playlists li.playlist .playlist-header a.playlist-delete {
  flex: 0;
}
#playlists li.playlist .playlist-sounds {
  flex: 0 0 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
#playlists li.playlist.collapsed .playlist-sounds {
  display: none;
}
#playlists li.playlist .sound-control {
  flex: 0 0 18px;
  text-align: center;
  color: #CCC;
  font-size: 11px;
}
#playlists li.playlist .sound-control.inactive {
  color: #777;
}
#playlists li.playlist .sound-control.inactive:hover {
  text-shadow: none;
}
#playlists li.playlist .sound-control.disabled {
  color: #555;
}
#playlists li.playlist .sound-control.disabled:hover {
  text-shadow: none;
}
#playlists li.sound {
  margin: 2px 0;
  padding: 0;
  align-items: center;
}
#playlists li.sound .sound-name {
  margin: 0;
  max-width: 150px;
}
#playlists li.sound .sound-controls {
  flex: 0 0 152px;
  justify-content: flex-end;
  align-items: center;
}
#playlists li.global-volume {
  padding-top: 0;
}
#playlists li.global-volume li.sound {
  margin: 0;
}
#playlists li.global-volume input[type="range"] {
  flex: 2.5;
}
/* ----------------------------------------- */
/*  8.0 - Compendium Packs
/* ----------------------------------------- */
#compendium h3 {
  margin: 0;
  padding: 5px;
  border: 1px solid #444;
  background: rgba(255, 255, 255, 0.1);
}
#compendium ol.compendium-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#compendium li.compendium-pack {
  position: relative;
  margin: 5px;
  padding: 5px 0;
  border-bottom: 1px solid #444;
}
#compendium li.compendium-pack .pack-title i {
  margin-right: 5px;
}
#compendium li.compendium-pack .status-icons {
  position: absolute;
  font-weight: normal;
  color: #7a7971;
  right: 0;
}
#compendium li.compendium-pack:last-child {
  border-bottom: none;
}
/**
 * Single Compendium Pack
 */
.compendium .directory-header {
  border-bottom: none;
}
.compendium .directory-list .directory-item {
  line-height: 48px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #DDD;
  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 #444;
  border-bottom: 1px solid #444;
  background: rgba(255, 255, 255, 0.1);
  font-size: 16px;
}
#settings button {
  margin: 6px 0;
}
#client-settings {
  /* Tab Section */
}
#client-settings nav.tabs {
  flex: 0 0 32px;
  line-height: 32px;
  font-size: 16px;
  border-bottom: 1px solid #000;
}
#client-settings section.content {
  border-top: 1px solid #b5b3a4;
}
#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: 12px;
}
#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 #191813;
  text-align: center;
  color: #f0f0e0;
  font-weight: bold;
  text-shadow: 1px 1px #000;
}
#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 #7a7971;
}
#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: #4b4a44;
  font-size: 13px;
  margin: 5px 0 0;
}
/* ----------------------------------------- */
/*  Sidebar Pop-out                          */
/* ----------------------------------------- */
.app.sidebar-popout {
  min-height: 400px;
  max-height: 100%;
  border: 1px solid #111;
}
.app.sidebar-popout .window-content {
  background: none;
  color: #EEE;
  padding: 0;
}
.app.sidebar-popout .directory-list {
  max-height: calc(90vh - 150px);
  overflow-y: auto;
}
/* ----------------------------------------- */
/*  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 #b5b3a4;
}
.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: 14px;
  margin: 0;
  color: #b5b3a4;
}
.package-list .package .package-description {
  flex: 0 0 100%;
  margin: 3px 0;
  color: #b5b3a4;
  font-size: 12px;
}
.package-list .package .package-description > * {
  margin: 0;
}
.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: 12px;
  padding: 0;
  color: #b5b3a4;
}
.package-list .package .package-controls {
  padding: 5px 0;
  text-align: right;
}
.package-list .package .package-controls button {
  display: inline;
  width: 110px;
  height: 25px;
  font-size: 12px;
  line-height: 24px;
  border: 1px solid #111;
}
.package-list .package .package-url {
  margin: 0.25em 0 0;
  color: #CCC;
}
.package-list .package .package-footer {
  height: 32px;
  padding: 5px 0 0;
}
.package-list .package .tag {
  flex: none;
  height: 20px;
  border: 1px solid #000;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0 0 0 2px;
  font-size: 11px;
  line-height: 18px;
  text-decoration: none;
  background: #333;
  color: #f0f0e0;
}
.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;
}
.package-list .package .tag.languages {
  background: #224224;
}
#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 #7a7971;
  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: #191813;
}
/* ----------------------------------------- */
/* 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 {
  height: 32px;
  flex: 0 0 32px;
  margin: 4px 0;
  line-height: 32px;
  border-top: 1px solid #b5b3a4;
  border-bottom: 1px solid #b5b3a4;
}
.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 .sheet-footer {
  flex: 0 0 32px;
}
.token-sheet .notes {
  font-size: 13px;
  padding: 0.5em 0;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #b5b3a4;
}
.token-sheet .bar-data .sep {
  flex: 0 0 16px;
  text-align: center;
  font-size: 1.5em;
  line-height: 24px;
}
/* ----------------------------------------- */
/* Drawing Config
/* ----------------------------------------- */
#drawing-config .sheet-tabs {
  flex: 0 0 32px;
  border-bottom: 1px solid #b5b3a4;
  line-height: 32px;
}
#drawing-config .tab {
  flex: 1;
}
#drawing-config .sheet-footer {
  flex: 0 0 32px;
}
/* ----------------------------------------- */
/* 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: #b5b3a4;
}
.roll-table-config ol.table-results .table-result.roulette {
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.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: #111;
}
.roll-table-config ol.table-results .table-header {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid #7a7971;
  line-height: 24px;
  font-weight: bold;
}
.scene-sheet .form-header {
  border-top: 1px solid #b5b3a4;
  border-bottom: 1px solid #f0f0e0;
  margin-bottom: 5px;
}
.scene-sheet .form-header h3 {
  line-height: 28px;
  margin: 0;
  border-top: 1px solid #f0f0e0;
  border-bottom: 1px solid #b5b3a4;
}
.scene-sheet .form-fields label.grid-label {
  flex: 1;
  text-align: right;
  font-size: 13px;
}
/* --------------------------------------- */
/*  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 #b5b3a4;
}
.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 #7a7971;
  font-weight: bold;
}
.active-effect-sheet .effects-header .key {
  padding-left: 4px;
}
.active-effect-sheet .effect-controls {
  flex: 0 0 24px;
  text-align: center;
}
/* ----------------------------------------- */
/*  Journal Entry
/* ----------------------------------------- */
.journal-sheet .window-content {
  padding: 0;
}
.journal-sheet form {
  overflow: hidden;
  padding: 5px;
}
.journal-sheet form input[name="name"] {
  height: 36px;
  font-size: 24px;
  line-height: 36px;
}
.journal-sheet form select {
  width: 100%;
  height: 30px;
  margin: 5px 0;
}
.journal-sheet form .editor {
  height: calc(100% - 115px);
}
.journal-sheet form button[type="submit"] {
  margin-top: 5px;
}
/* ----------------------------------------- */
/*  Journal Image
/* ----------------------------------------- */
.window-app.image-popout .window-content {
  background: rgba(0, 0, 0, 0.1);
}
.window-app.image-popout form {
  justify-content: center;
  position: relative;
}
.window-app.image-popout .lightbox-image {
  flex: 0 0 calc(100% - 100px);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.window-app.image-popout .form-group {
  position: absolute;
  width: 400px;
  max-width: 90%;
  left: calc(50% - 200px);
}
.window-app.image-popout .form-group.picker {
  bottom: 0;
  margin: 5px 0 10px;
}
.window-app.image-popout .form-group.picker input {
  flex: 1;
}
.window-app.image-popout .form-group.title {
  top: 5px;
}
.window-app.image-popout .form-group.title input {
  height: 32px;
  text-align: center;
}
.window-app.image-popout .form-group button {
  flex: 0 0 32px;
  height: 32px;
  margin: -2px 5px 0;
  order: 3;
}
#camera-views {
  position: fixed;
  bottom: 70px;
  left: 225px;
  width: calc(100% - 550px);
  margin: 0;
  padding: 0;
  align-items: baseline;
  z-index: 60;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
  /* ----------------------------------------- */
  /*  Video Containers
  /* ----------------------------------------- */
  /* The following 3 blocks ensure that the video or avatar img use 4:3 aspect ratio.
   * From https://css-tricks.com/aspect-ratio-boxes/
   * Thanks to asacolips
   */
}
#camera-views.webrtc-dock-empty {
  padding: 0;
}
#camera-views.camera-size-large .camera-box-dock {
  max-width: 320px;
}
#camera-views.camera-size-medium .camera-box-dock {
  max-width: 240px;
}
#camera-views.camera-size-small .camera-box-dock {
  max-width: 160px;
}
#camera-views > .camera-box-dock.no-video {
  max-width: 160px;
}
#camera-views .video-containers {
  display: flex;
  flex: 1 1 0;
  flex-wrap: nowrap;
}
#camera-views .video-container {
  position: relative;
}
#camera-views .video-container::before {
  /* Create an empty text with a specific size due to the padding which has a 4:3 ratio */
  content: "";
  display: block;
  padding-bottom: calc(100% * 3/4);
}
#camera-views .video-container img.user-avatar,
#camera-views .video-container video.user-camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
#camera-views .video-container img.user-avatar.local-camera,
#camera-views .video-container video.user-camera.local-camera {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
#camera-views .video-container img.user-avatar {
  object-fit: cover;
}
.players-hidden #camera-views {
  left: 15px;
  width: calc(100% - 330px);
}
.camera-view-popout {
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  margin: 0;
}
.camera-view-popout .camera-view {
  margin: 0;
  padding: 3px;
}
/* ----------------------------------------- */
/* Single Camera View
/* ----------------------------------------- */
.camera-view {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 2px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px dotted;
  box-shadow: 0 0 10px #000;
  pointer-events: all;
  /* Camera Control Button (28x24) */
  /* Control Sidebar */
  /* Notification Icons */
  /* Volume Bar */
}
.camera-view.speaking {
  border-style: solid;
}
.camera-view .player-name {
  width: 100%;
  height: 30px;
  margin: 0;
  line-height: 30px;
  text-align: center;
  border-top: 2px solid;
}
.camera-view .av-control {
  flex: 0 0 28px;
  width: 28px;
  padding: 2px;
  text-align: center;
}
.camera-view .av-control i {
  font-size: 18px;
  line-height: 22px;
  color: #999;
}
.camera-view .av-control i:hover {
  color: #DDD;
}
.camera-view .av-control.toggle .fa-arrows-alt-v {
  transform: rotate(45deg);
}
.camera-view .control-bar,
.camera-view .notification-bar {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #000;
  border-radius: 2px;
  justify-content: space-evenly;
}
.camera-view .control-bar.left,
.camera-view .notification-bar.left {
  top: 0;
  left: 0;
}
.camera-view .control-bar.right,
.camera-view .notification-bar.right {
  top: 3px;
  right: 3px;
  background: none;
  border: none;
}
.camera-view .control-bar.bottom,
.camera-view .notification-bar.bottom {
  width: calc(100% - 2px);
  left: 0;
  bottom: 30px;
  height: 28px;
  padding: 0 3px;
}
.camera-view .control-bar.hidden,
.camera-view .notification-bar.hidden {
  display: none;
}
.camera-view .status-hidden,
.camera-view .status-muted {
  font-size: 20px;
  width: 30px;
  line-height: 30px;
  color: #ba2200;
}
.camera-view .status-hidden.hidden,
.camera-view .status-muted.hidden {
  display: none;
}
.camera-view .volume-bar {
  height: 28px;
}
.camera-view .volume-bar input {
  float: left;
  width: calc(100% - 48px);
  padding: 6px 2px;
}
.camera-view .volume-bar i.vol-min,
.camera-view .volume-bar i.vol-max {
  float: left;
  width: 24px;
  line-height: 24px;
  text-align: center;
  color: #999;
}
/* ----------------------------------------- */
/*  AV Configuration Sheet
/* ----------------------------------------- */
#av-config .sheet-tabs {
  flex: 0 0 32px;
  border-bottom: 1px solid #b5b3a4;
  line-height: 32px;
}
#av-config label {
  font-weight: bold;
  margin-bottom: 0;
}
/* ----------------------------------------- */
/* Unclean Below
/* ----------------------------------------- */
.window-content .camera-view,
.camera-box-popout {
  width: 100%;
  height: 100%;
}
.webrtc-dock-camera-container.fa-external-link-square-alt {
  transform: rotate(180deg);
}
.camera-box-popout .window-resizable-handle {
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #444;
  padding: 2px;
  border: 1px solid #111;
  border-radius: 4px 0 0 0;
}
.camera-box-popout .window-resizable-handle i.fas {
  transform: rotate(45deg);
}
/* Pages */
/* ---------------------------------------- */
/*  Main Setup Form                         */
/* ---------------------------------------- */
#setup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: url("../ui/anvil-bg.png") 50% 10% no-repeat;
}
#setup .app {
  margin: 0;
  background: url("../ui/denim-dark-090.png") repeat;
  border: 2px solid #111;
  box-shadow: 0 0 10px #000;
  color: #CCC;
}
#setup form {
  box-sizing: content-box;
}
#setup h2 {
  font-size: 24px;
  border-bottom: 2px solid #b5b3a4;
  margin: 0 0 8px;
}
#setup .notes {
  color: #b5b3a4;
}
#setup button {
  margin: 2px;
}
body.background #setup {
  background: none;
}
/* Fatal Error */
#setup #error {
  width: 600px;
  min-height: 100px;
}
/* ----------------------------------------- */
/*  Module Configuration
/* ----------------------------------------- */
#setup-configuration {
  width: 960px;
  height: 680px;
  padding: 0 10px 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #4b4a44;
  border-radius: 2px;
  box-shadow: 0 0 20px #000;
  outline: 2px solid #000;
  color: #c9c7b8;
  /* Config Header */
  /* Config Tabs */
  /* Tab Section */
}
#setup-configuration header {
  flex: 0 0 36px;
  border-bottom: 1px solid #4b4a44;
}
#setup-configuration header h1 {
  margin: 0;
  padding: 10px 0;
  text-align: center;
  border-bottom: 2px solid #000;
}
#setup-configuration nav.tabs {
  flex: 0 0 36px;
  line-height: 36px;
  font-size: 18px;
  border-bottom: 2px solid #000;
}
#setup-configuration nav.tabs a {
  position: relative;
}
#setup-configuration section.content {
  border-top: 1px solid #4b4a44;
}
#setup-configuration section.content .package-list {
  height: 540px;
}
#setup-configuration h2 {
  margin: 8px 0;
}
#setup-configuration .form-group {
  margin: 0 0 8px;
}
#setup-configuration .form-group label.checkbox-label {
  display: inline-flex;
  flex: 0.3;
  justify-content: flex-end;
}
#setup-configuration .form-group label.checkbox-label input {
  margin-left: 12px;
}
#setup-configuration footer.setup-footer.flexcol {
  flex: 1;
  justify-content: flex-end;
}
#setup-configuration footer.setup-footer.flexcol > * {
  flex: 0;
}
#setup-configuration .progress-bar {
  visibility: hidden;
  position: relative;
  flex: 0 0 100%;
  height: 12px;
  margin: 0;
  background: #000;
  border: 1px solid #4b4a44;
  border-radius: 3px;
}
#setup-configuration .bar {
  height: 6px;
  margin: 2px;
  display: block;
  background: #5d49ff;
  border: 1px solid #b2c3ff;
  border-radius: 2px;
  max-width: calc(100% - 4px);
}
#setup-configuration .pct {
  display: block;
  position: absolute;
  margin-left: -20px;
  color: #FFF;
  text-shadow: 1px 1px 4px #000;
  top: -5px;
  background: rgba(0, 0, 0, 0.5);
  padding: 0 5px;
  border: 1px solid #000;
}
#setup-configuration .tab.flexcol > * {
  flex: 0;
}
#setup-configuration #update-channel {
  flex: 0 0 200px;
}
#setup-configuration #force-update {
  flex: 0 0 64px;
}
#setup-configuration .package {
  border-bottom: 1px solid #111;
}
#setup-configuration .package .package-title {
  font-size: 16px;
  color: #c9c7b8;
}
#setup-configuration .tab {
  margin-bottom: 5px;
}
/**
 * Package installation dialog
 */
#install-package .categories {
  flex: 0 0 220px;
  height: 514px;
  overflow: hidden auto;
  padding-right: 5px;
  margin-right: 5px;
  border-right: 1px solid #b5b3a4;
  font-size: 12px;
}
#install-package .categories h3 {
  line-height: 30px;
  margin: 0;
}
#install-package .categories .category {
  margin: 0 2px 0 0;
  padding: 4px 0;
  border-bottom: 1px solid #b5b3a4;
}
#install-package .categories .category.active {
  font-weight: bold;
  border-bottom: 1px solid #44191A;
}
#install-package .categories span.count {
  float: right;
}
#install-package .packages {
  height: 514px;
}
#install-package .packages .form-group {
  flex: 0;
}
#install-package .visibilities {
  flex: 0 0 100%;
  height: 22px;
  text-align: right;
}
#install-package .visibilities .visibility {
  font-size: 13px;
  line-height: 24px;
  border-bottom: 2px solid #7a7971;
  margin-left: 5px;
}
#install-package .visibilities .visibility.active {
  border-bottom: 2px solid #44191A;
  font-weight: bold;
}
#install-package .package-list {
  border-top: 1px solid #b5b3a4;
}
#install-package .package-list .package.installed,
#install-package .package-list .package.locked {
  background: rgba(0, 0, 0, 0.05);
}
#install-package .package-list .package.installed .package-title,
#install-package .package-list .package.locked .package-title {
  color: #7a7971;
}
#install-package .package-list .package.installed .package-title a,
#install-package .package-list .package.locked .package-title a {
  text-decoration: none;
}
#install-package .package-list .package-title {
  flex: 1 0 60%;
  margin: 0;
  color: #191813;
  font-weight: bold;
}
#install-package .package-list .package-title a {
  text-decoration: underline;
}
#install-package .package-list .package-title i.fas {
  font-size: 12px;
}
#install-package .package-list .package-title .tag.requires {
  position: relative;
  top: -2px;
}
#install-package .package-list .package-description {
  color: #191813;
  font-size: 11px;
  word-break: break-word;
}
#install-package .package-list .package-description p {
  margin: 3px 0;
}
#install-package .package-list .package-tags,
#install-package .package-list .package-controls {
  flex: 0 0 100px;
  height: 68px;
  padding: 0;
}
#install-package .package-list .package-tags .tag,
#install-package .package-list .package-controls .tag {
  width: 100px;
  margin-bottom: 2px;
  background: rgba(0, 0, 0, 0.1);
  color: #191813;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
#install-package .package-list .package-tags button,
#install-package .package-list .package-controls button {
  width: 100px;
  height: 24px;
  line-height: 22px;
}
#install-package .package-list .packages-loading {
  height: 200px;
  line-height: 100px;
  font-size: 2em;
  text-align: center;
}
#install-package .package-list .packages-loading h3 {
  color: #7a7971;
}
#install-package footer.install {
  flex: 0 0 100%;
  align-items: center;
  padding: 4px 0 0;
  border-top: 1px solid #b5b3a4;
}
#install-package footer.install label {
  flex: 0 0 200px;
}
#install-package footer.install input {
  height: 32px;
}
#install-package footer.install button {
  height: 32px;
  flex: 0 0 128px;
  margin-left: 5px;
}
#install-package footer.install .packages-loading {
  height: 200px;
  line-height: 100px;
  font-size: 2em;
  text-align: center;
}
#install-package footer.install .packages-loading h3 {
  color: #7a7971;
}
/* ----------------------------------------- */
/*  World Configuration                      */
/* ----------------------------------------- */
#world-config label {
  font-weight: bold;
}
#world-config label.world-desc {
  margin: 5px 0;
}
#world-config .editor-content {
  height: 300px;
}
#world-config input[name="name"] {
  flex: 2;
  margin-left: 3px;
}
/* ----------------------------------------- */
/*  Join Session
/* ----------------------------------------- */
#setup.join {
  position: relative;
  height: auto;
  width: 960px;
  top: calc(50% - 300px);
  margin: 0 auto;
}
#setup.join #world-title {
  flex: 0 0 100%;
  height: 64px;
  margin: 0 0 8px 0;
  padding: 0 10px;
}
#setup.join #world-title h1 {
  margin: 0;
  font-size: 36px;
  line-height: 64px;
  border-bottom: none;
}
#setup.join .left {
  justify-content: space-between;
}
#setup.join .right {
  margin-left: 8px;
}
#setup.join .app {
  flex: 0;
  margin-bottom: 8px;
}
#setup.join .app h1 {
  font-size: 24px;
  margin-bottom: 10px;
}
#setup.join form .form-group,
#setup.join form .form-group-stacked {
  margin-bottom: 10px;
  position: relative;
}
#setup.join form select {
  height: 28px;
}
#setup.join form button {
  margin: 10px 0;
}
#setup.join #session-schedule .current-players span {
  font-size: 24px;
  flex: 0 0 32px;
  text-align: center;
}
#setup.join #session-schedule .current-players input[type="text"] {
  flex: 1.25;
}
#setup.join #world-description {
  flex: 1;
  max-height: 450px;
  overflow-y: auto;
  padding: 0.5em;
}
#setup.join .join-footer p {
  padding: 0.5em 0;
}
/* ----------------------------------------- */
/*  Manage Players
/* ----------------------------------------- */
#manage-players {
  flex: 0 0 600px;
}
#manage-players h1 {
  border-bottom: 2px solid #DDD;
  margin-bottom: 10px;
}
#manage-players #player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  min-height: 200px;
  max-height: 460px;
}
#manage-players li.player {
  width: 100%;
  float: left;
  margin: 3px 0;
  padding: 0 3px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#manage-players li.player > * {
  flex: 1;
}
#manage-players li.player > .flex0 {
  display: block;
  flex: 0;
}
#manage-players li.player > .flex1 {
  flex: 1;
}
#manage-players li.player > .flex2 {
  flex: 2;
}
#manage-players li.player > .flex3 {
  flex: 3;
}
#manage-players li.player > * {
  margin: 0 2px;
}
#manage-players li.player .show {
  flex: 0 0 32px;
  text-align: center;
}
#manage-players li.player input.show {
  margin-top: 4px;
  width: 16px;
  height: 16px;
}
#manage-players li.player .user-delete {
  flex: 0 0 24px;
  line-height: 28px;
  text-align: center;
}
#manage-players footer button {
  margin: 10px 5px 0;
}
/* ----------------------------------------- */
/* EULA and Notes
/* ----------------------------------------- */
#eula {
  height: 90%;
}
#eula #eula-content {
  flex: 1;
  overflow-y: auto;
}
#eula #eula-content h3 {
  font-weight: bold;
}
#eula #eula-content #eula-updated {
  text-align: center;
}
#eula #eula-sign {
  flex: 0 0 100px;
}
#eula #eula-sign label[for="eula-agree"] {
  line-height: 20px;
  padding-left: 5px;
  font-weight: bold;
}
#update-notes .update-notes {
  max-height: 80vh;
  overflow-y: auto;
}
#update-notes button#return {
  margin-top: 5px;
}
body.stream {
  background: lime;
  box-shadow: none;
  /* Stream Chat */
}
body.stream .tab[data-tab] {
  position: absolute;
  top: 20px;
  display: block;
  width: 300px;
  height: calc(100% - 40px);
}
body.stream #chat {
  left: 20px;
}
body.stream #chat #chat-log {
  height: 100%;
}

/* ----------------------------------------- */
/* ----------------------------------------- */
/* bass-blowfish Login Screen UI Customizations V2
/* ----------------------------------------- */
/* ----------------------------------------- */

/* ----------------------------------------- */
/* Panels: Hiding and resizing panels our group doesn't use and focusing on the panel we do use.
/* ----------------------------------------- */

/* Foundry Logo Background: Hide */
.vtt.players #setup {
    background: none;
}

/* Panel Labels and World Title: Hide - I'm replacing the header with an image and the Panel titles aren't necessary when there is only one panel.  */
.vtt.players #setup.join .app h1 {
    display: none;
}
/* Foundry Watermark/emblem: Hide - Re-applying Foundry attribution in the image logo*/
.vtt.players .watermark {
    display: none;
}

/* World Description Panel: Hide  */
.vtt.players #setup.join .right {
    margin-left: 8px;
    display: none;
}

/* Session Schedule Panel: Hide */
.vtt.players #setup form#session-schedule {
    display: none;
}

/* Panels and Heading Container: Reduces container width. If you want to show the world description you'll need to increase this width. */
.vtt.players #setup.join {
    width: 400px;
    top: initial;
}



/* ----------------------------------------- */
/* New Styles and effects
/* ----------------------------------------- */

/* Body: Applying blurFade effect to background, having it cover the screen and centering it.
Also converting to flexbox to dynamically vertically center the  section#setup container.There were some calculations being made to vertically center that weren't dynamic enough to suit this setup (i.e. top: calc(50% - 300px).  Perhaps in the future there could be a parent container to section#setup so we wouldn't have to change the <body> to be a flexbox.*/
body.vtt.players {
    display: flex;
    align-items: center;
    overflow-y: visible;
    height: 100%;
    min-height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation: blurFade 3s ease-out 1;
}

/* Panels Body Container: Adds zoomOut Animation */
.vtt.players #setup .join-body {
    animation: zoomOut 1s .5s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}


/* World Title: Removes all box styles for world title, adds SVG image instead, and animates it. Added "dnd-logo.svg" file to foundryvtt/resources/app/public/ui  */
 .vtt.players #setup.join #world-title {
    background: url(../ui/dnd-logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 230px;
    max-height: 35vh;
    max-width: 100%;
    border: none;
    box-shadow: none;
    margin-top: 50px;
    animation: zoomOut 1s 0s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}



/* Animations */
@keyframes zoomOut {
  0% {
    transform: scale(1.4);
    opacity: 0;
}
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

@keyframes blurFade {
  0% {
    backdrop-filter: brightness(0) blur(15px);
}
  100% {
      backdrop-filter: brightness(1) blur(0px);
  }
}


/* ----------------------------------------- */
/* Inputs and Buttons
Making them more usable on both desktop and touch devices by increasing font and input sizes, hit areas, adding visual affordance with shading, and improving visual grouping.
/* ----------------------------------------- */

/* All Inputs and Buttons: Increase Size and Font Size */
.vtt.players #setup #join-form input, .vtt.players #setup #join-form select, .vtt.players #setup #join-form button,
.vtt.players #setup #shutdown input, .vtt.players #setup #shutdown select, .vtt.players #setup #shutdown button {
    min-height: 50px;
    padding: 10px !important;
    border: none !important;
    font-size: 18px;
    width: 100%;
}

/* Select Input: Add slight outset shading and re-applying default focus effects that would be overriden by this */
.vtt.players #setup #join-form select, .vtt.players #setup #shutdown select {
    box-shadow: inset 0px 1px 0px #ffffff4f, inset 0px -1px 9px #00000059;
}

.vtt.players #setup #join-form select:focus, .vtt.players #setup #shutdown select:focus {
    box-shadow: 0 0 5px red, inset 0px 1px 0px #ffffff4f, inset 0px -1px 9px #00000059;
}

/* Text Input: Add slight inset shadingand re-applying default focus effects that would be overriden by this */
.vtt.players #setup #join-form input, .vtt.players #setup #shutdown input {
    box-shadow: inset 0px -1px 0px #ffffff4f, inset 0px 3px 9px #00000059;
}

.vtt.players #setup #join-form input:focus, .vtt.players #setup #shutdown input:focus {
    box-shadow: 0 0 5px red, inset 0px -1px 0px #ffffff4f, inset 0px 3px 9px #00000059;
}

/* Button: Visually differentiating the function of this from the inputs */
.vtt.players #setup.dark #join-form button, .vtt.players #setup.dark #shutdown button {
    background: rgb(120 45 34);
    border: none;
    color: #fff;
    margin-bottom: 0px !important;
    font-size: 18px;
}

/* Form Labels: Top aligning form labels for easier input of familiar data. Reference Page 27: https://static.lukew.com/webforms_lukew.pdf */
.vtt.players #setup #join-form .form-group, .vtt.players #setup #join-form .form-group-stacked,
.vtt.players #setup #shutdown .form-group, .vtt.players #setup #shutdown .form-group-stacked {
    clear: both;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    margin-top: 0;
    overflow: hidden;
}

.vtt.players #setup #join-form .form-group label,
.vtt.players #setup #shutdown .form-group label{
    line-height: 31px;
    width: 100%;
}

/* Select Input Arrow: Needed to replace the arrow because after I adjusted the spacing I couldn't figure out how to adjust the original arrow */
.vtt.players #setup.join #join-form select,
.vtt.players #setup.join #shutdown select {
    appearance: none;
}

.vtt.players #setup #join-form .form-group:nth-child(2):after {
    content: '\25BC';
    position: absolute;
    right: 14px;
    color: #000;
    font-size: 15px;
    bottom: 16px;
}

/* Input Labels: Applying more high-contrast label color for readability */
.vtt.players #setup .app {
    color: #fff6db !important;
}


/* Password Input: Hiding placeholder text because it just repeats the label */
.vtt.players #setup #join-form input[type="password"]::placeholder,
.vtt.players #setup #shutdown input[type="password"]::placeholder {
    color: transparent;
}

/* Creating new labels and hiding old ones to be more in line with form conventions. There is no need to say things like "select", people have seen forms, if it looks like a form they understand. Also changing "Access Key" to a more common vernacular "Password" that is functionally the same from the player's perspective. */
.vtt.players #setup #join-form .form-group label > i:after,
.vtt.players #setup #shutdown .form-group label > i:after {
    content: 'Player';
    font-family: 'Signika';
    padding-left: 4px;
}

.vtt.players #setup #join-form .form-group:nth-child(3) label > i:after {
    content: 'Password';
}

.vtt.players #setup #join-form label > i,
.vtt.players #setup #shutdown label > i {
    margin-right: -1000px;
}
/* Left Column: Hides overflow so labels I'm moving out of the way since they're being replaced aren't displayed */

.vtt.players #setup #join-form {
    padding: 30px;
}

/* Button: Changing check mark icon to arrow and moving it to the right because it helps indicate they're logging in and will be taken somewhere. */
.vtt.players #setup #join-form i.fas.fa-check {
    display: none;
}

.vtt.players #setup #join-form button:after {
    content: '\2192';
}

/* Button: Adding more clear hover effect to users know this is a button */
.vtt.players #setup.join #join-form button:hover,
.vtt.players #setup.join #shutdown button:hover {
    background: rgb(142 47 34);
    box-shadow: none;
}





/* Return To Setup / Shutdown Panel: Adding Expand/Collapse functionality  */

.vtt.players #setup #shutdown input {
    height: 100%;
    width: 100%;
    position: absolute;
    display: block;
}
.vtt.players #setup #shutdown:focus-within .form-group {
  height: inherit;
  width: inherit;
}
.vtt.players #setup #shutdown:focus-within input {
  position: inherit;
  display: inherit;
}
.vtt.players #setup #shutdown:focus-within {
  padding: 30px;
}
.vtt.players #setup #shutdown {
    padding: 0;
}
.vtt.players #setup #shutdown:focus-within {
    padding: 30px;
}
.vtt.players #setup #shutdown .form-group label {
    padding: 15px 0 0 30px;
}

.vtt.players #setup #shutdown:focus-within .form-group label {
    padding:inherit;
}

.vtt.players #setup #shutdown button[data-action="shutdown"] {
    display: none;
}
.vtt.players #setup #shutdown:focus-within button[data-action="shutdown"] {
    display: inherit;
}

.vtt.players #setup #shutdown input[name="adminKey"] {
    opacity: 0;
}
.vtt.players #setup #shutdown:focus-within input[name="adminKey"] {
    opacity: 1;
}
.vtt.players #setup #shutdown .form-group label .fa-key:before {
    content: "";
}
.vtt.players #setup #shutdown:focus-within .form-group label .fa-key:before {
    content: "\f084";
}
.vtt.players #setup #shutdown .form-group label > i:after {
    content: 'Admin Setup Access';
}
.vtt.players #setup #shutdown:focus-within .form-group label > i:after {
    content: 'Admin Password';
}