/* Copyright (c) 2016 Ben Stern and Jeff Olhoeft. */

:root {
 --big-radius: 6px;
 --transition: all 125ms linear;
 --sans-fonts: 'Computer Modern Bright', 'Computer Modern Sans', Helvetica, sans-serif;
}

* { box-sizing: border-box; }
fieldset { border-radius: var(--big-radius); }

input[type="checkbox"] { vertical-align: middle; }
input[type="color"] { height: 12pt; }
input[type="number"] { width: 5em; }

.ai-c { align-items: center; }
.ai-fe { align-items: flex-end; }
.ai-fs { align-items: flex-start; }
.ai-s { align-items: stretch; }
.d-ib { display: inline-block; }
.f-1-2 { flex: 1 2 auto; }
.fs-12 { font-size: 12pt; }
.fs-2em { font-size: 2em; }
.fs-3em { font-size: 3em; }
.fs-l { font-size: large; }
.fs-s { font-size: small; }
.fs-xl { font-size: x-large; }
.fs-xs { font-size: x-small; }
.fs-xxl { font-size: xx-large; }
.fs-xxs { font-size: xx-small; }
.fv-asc { font-variant: all-small-caps; }
.fv-sc { font-variant: small-caps; }
.fw-b { font-weight: bold; }
.h-1-5em { height: 1.5em; }
.h-1em { height: 1em; }
.h-2em { height: 2em; }
.jc-c { justify-content: center; }
.jc-fe { justify-content: flex-end; }
.jc-fs { justify-content: flex-start; }
.jc-s { justify-content: stretch; }
.jc-sa { justify-content: space-around; }
.jc-sb { justify-content: space-between; }
.jc-se { justify-content: space-evenly; }
.l-0 { left: 0; }
.m-1em { margin: 1em; }
.m-a { margin: auto; }
.mbe-0 { margin-block-end: 0; }
.mbs-0 { margin-block-start: 0; }
.ml-1ex { margin-left: 1ex; }
.ml-1m { margin-left: 1em; }
.mr-4 { margin-right: 4px; }
.mt-1ex { margin-top: 1ex; }
.mt-2em { margin-top: 2em; }
.mt-3em { margin-top: 3em; }
.mt-4em { margin-top: 4em; }
.mt-5em { margin-top: 5em; }
.o-a { overflow: auto; }
.o-h { overflow: hidden; }
.o-ha { overflow: hidden auto; }
.p-1x-1m { padding: 1ex 1em; }
.p-a { position: absolute; }
.p-r { position: relative; }
.r-0 { right: 0; }
.t-0 { top: 0; }
.ta-c { text-align: center; }
.ta-l { text-align: left; }
.ta-r { text-align: right; }
.va-b { vertical-align: bottom; }
.va-m { vertical-align: middle; }
.va-t { vertical-align: top; }
.va-tb { vertical-align: text-bottom; }
.w-1m { width: 1em; }
.ws-n { white-space: nowrap; }

html, body {
 margin: 0;
 padding: 0;
 font-family: var(--sans-fonts);
 font-size: 12pt;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
 text-rendering: optimizeLegibility;
 font-variant-numeric: oldstyle-nums;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: auto;
}

body {
 background-image: url('linenpaper.jpg');
 text-shadow: -0.5px -0.5px 1px gray, 0.5px 0.5px 1px white;
}

.nk124 { font-family: 'NK 124', helvetica, sans-serif; }
.engraved { text-shadow: 0.5px 0.5px 1px white, -0.5px -0.5px 1px black; }

tt, pre, code, textarea {
 font-family: 'Computer Modern Typewriter', Courier, monospace;
 font-size: 0.9em; /* monospace fonts appear about 10% bigger than proportional fonts */
}

.fullsize {
 height: 100%;
 min-height: 100%;
 min-width: 100%;
 max-width: 100%;
 width: 100%;
}

.noscroll { overflow: hidden; }

body.admin {
 display: block;
 overflow: auto;
}

body.license {
 padding: 1ex;
 background-color: #eaeaea;
 background-image: url('/assets/linenpaper.jpg');
}

html.license, body.license, html.tos, body.tos {
 display: block;
 font-size: 10pt;
 max-width: calc(100vw - 32px);
 min-width: calc(100vw - 32px);
 width: calc(100vw - 32px);
 height: auto;
 min-height: calc(100vh - 32px);
 overflow: auto;
}

body.contact, body.tos {
 background-color: #eaeaea;
 background-image: url('/assets/linenpaper.jpg');
 text-align: justify;
 overflow: auto;
 display: block;
}

body.tos {
 position: relative;
 margin-left: 8px;
 margin-right: 8px;
}

body.contact {
 overflow: auto;
 padding-left: 10vw;
 padding-right: 10vw;
 font-size: 14pt;
}

body.contact > div:first-child {
 width: 80vw;
 margin-bottom: 3em;
}

body.contact td.expl { font-size: 12pt; }

body.contact table.expl textarea {
 width: 95%;
 text-align: left;
}

table.bb2k {
 box-shadow: 2px 2px 2px black;
 flex: 0 0 auto;
}
table.bb2k:first-child { border-bottom: 2px outset; }
table.bb2k:last-child { border-top: 2px outset; }

table.bb2k img {
 height: 16px;
}

td.contactTd {
 text-align: center;
}

body.license h1, body.tos h1 {
 text-align: center;
}

div#azpay, div#pp {
 filter: grayscale(100%);
 display: none;
}

body.units, body.worldusers {
 font-size: 12pt;
 background-color: #edd6a6;
 background-image: url('/assets/units.jpg');
}

body.units input[type="number"] {
 width: 4em;
}

body.realms {
 overflow: hidden;
 font-size: 12pt;
}

h1, h2, h3 {
 margin-block-start: 1ex;
 margin-block-end: 1ex;
}

hr {
 width: 90%;
}

hr.mbs25 {
 margin-block-start: 0.25ex;
}

body.tos hr {
 width: 75%;
}

html.map, body.map {
 overflow: hidden;
 position: absolute;
 left: 0;
 top: 0;
 width: 100vw;
 height: 100vh;
 overscroll-behavior: contain;
}

body.map {
 background-attachment: fixed;
 background-color: #f1f4e6;
 background-image: url('/assets/paper-1809412.jpg');
 touch-action: none;
}

body.unauthorized, body.forbidden {
 background-color: #c8a979;
 background-image: url("/assets/locked-door.jpg");
 min-height: 100vh;
 height: 100%;
}

table.sponsor {
 min-width: 300px;
 width: 60vw;
}

img.sponsor {
 height: 2em;
 padding: 1ex;
 border: 0;
}

html.about, body.about,
html.login, body.login {
 height: 100vh;
 width: 100vw;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

body.about,
body.login {
 background-color: #f5f1ef;
 background-image: url("/assets/close-up-door-door-handle-fade.jpg");
 font-weight: 600;
 text-shadow: 1px 1px 1px white;
}

body.notfound {
 background-color: #b18849;
 background-image: url("/assets/desert.jpg");
}

body.ise {
 background-color: #1e17f0;
 background-image: url("/assets/hdd.jpg");
}

body.usermgmt {
 background-color: #deb887;
 background-image: url("/assets/antique-old-shelf.jpg");
 min-height: 100vh;
 padding-bottom: 1em;
}

body.usermgmt h1, body.worldusers h1 {
 font-size: xx-large;
}

body.realms {
 background-color: #deb887;
 background-image: url("/assets/beige-analog-compass-697662-light.jpg");
}

div.lfwrap {
 height: 100%;
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 background-color: rgba(255, 255, 255, 0.75);
 transition: background-color 0.5s ease-in;
}

body.darken div.lfwrap {
 background-color: rgba(0, 0, 0, 0.75);
}

body.about h1, body.about h2, body.about h3,
body.login h1, body.login h2, body.login h3,
body.wiki h1 {
 font-family: 'NK 124', sans-serif;
 font-weight: normal;
}

input, textarea, button {
 border-radius: 0.75ex;
 margin: 2px;
}

input:focus, textarea:focus, button:focus {
 outline: none;
 box-shadow: 0 0 4px 4px skyblue;
}

input, select, button, option { font-family: var(--sans-fonts); }

.mapButton,
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
select {
 padding: 0 5px; /* fight with the "contact us" button some more */
 border: 3px outset whitesmoke;
 background: grey;
 border-radius: 0.75ex;
 background-image: linear-gradient(to bottom, #f2f2f2 0%, #cfcfcf 100%);
 cursor: default;
}

.mapButton.selected,
input[type="button"].selected,
button.selected {
 background-color: darkgray;
 background-image: linear-gradient(to bottom, #cfcfcf 0%, #acacac 100%);
 border-style: inset;
}

button.doubleHeight {
 height: 44px;  /* not really double, but reasonably close */
}

option, optgroup {
 background-color: lightgrey;
}

span.camCtrl {
 padding: 2px 1ex;
 border-radius: 1em;
 border: 1px dotted black;
 display: inline-block;
}

.minorButton,
.mapButton {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
}

div.mapButton:hover,
select:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}

.mapButton.selected:hover,
input[type="button"].selected:hover,
button.selected:hover {
 background-image: linear-gradient(to bottom, #a7d8f5 0%, #64baed 100%);
}

div.mapButton:active,
select:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
 border: 3px inset;
 padding: 2px 4px 2px 6px;
 background-image: linear-gradient(to bottom, #e5f4fc 0%, #c4e5f6 50%, #98d0ef 51%, #68b3db 100%);
}

.minorButton > *,
div.mapButton > *,
input[type="button"] > *,
input[type="submit"] > *,
input[type="reset"] > *,
button > * {
 display: flex;
 align-items: center;
 flex: 0 0 auto;
}

img.missingCam, video.missingCam {
 filter: initial;
 background-repeat: no-repeat;
 background-image: url('/assets/Camera-no-photo.svg');
 background-size: contain;
 background-position: center;
 background-color: rgba(0,0,0,0.25);
}

div.missingImg, img.missingImg {
 filter: initial;
 background-repeat: no-repeat;
 background-image: url('/assets/Image-missing.svg');
 background-size: contain;
 background-position: center center;
}

div.missingImg > img, div.missingImg > video {
 width: 100%;
}

.ucTable img.missingCam, .ucTable img.missingImg {
 height: 4em;
 max-height: 4em;
 min-height: 4em;
}

body.map .ucTable img.missingCam, body.map .ucTable img.missingImg {
 height: 3em;
 max-height: 3em;
 min-height: 3em;
}

body.camera {
 background-color: #c6c6c6;
 background-image: url('camera-event-settings.jpg');
 min-height: 100vh;
 overflow-y: auto;
 overflow-x: hidden;
 padding: 0 1ex 2em 1ex;
}

div.camerabody {
 width: 100vw;
 height: 100vh;
 overflow: hidden;
}

body.worldusers div.main {
 margin-top: 25pt;
 overflow: auto;
 background-color: rgba(248, 248, 248, 0.8);
 border: ridge;
 text-align: center;
}

div.profemail {
 border: 3px groove;
 padding: 1em;
 margin: auto;
 display: table;
}

h3.nomargin {
 margin: 0;
}

div.userinfo h1 {
 margin-block-start: 1em;
}

div.userinfo > table,
div.userinfo > table > tbody > tr,
div.userinfo > table > tbody > tr > td {
 border-collapse: collapse;
 border: 3px ridge gray;
}

div.userinfo table {
 border-collapse: collapse;
 text-align: left;
 background-color: rgba(240, 240, 240, 0.67);
}

div.userinfo table tr:nth-child(even) {
 background-color: rgba(208, 208, 208, 0.67);
}

div.userinfo table td, div.userinfo table th {
 padding: 0.75ex;
}

.bc240 { background-color: rgba(240, 240, 240, 0.67); }

div.infotable table {
 margin: 1em auto;
 border: 3px groove;
 border-radius: 0.5ex;
 border-collapse: collapse;
 text-align: left;
 background-color: rgba(240, 240, 240, 0.67);
}

div.infotable #worldsTable, .worldsTable {
 position: relative;
 margin-left: auto;
 margin-right: auto;
}

.infotable tr {
 border: groove;
}

.infotable tr:nth-child(even) {
 background-color: rgba(208, 208, 208, 0.67);
}

.infotable td, .infotable th {
 padding: 0.75ex;
 border-right: 1px solid gray;
}

p.semibold, span.semibold, ol.semibold {
 font-weight: 600;
 text-shadow: none;
}

input.semibold {
 font-weight: 600;
 border: 3px outset darkgray;
}

div.setUnitData {
 position: fixed;
 z-index: 8878;
 background-color: whitesmoke;
 border: ridge;
 box-shadow: 2px 2px 4px black;
 border-radius: 1ex;
 max-height: 60vh;
 max-width: 60vw;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 width: fit-content;
 height: fit-content;
}

dialog.setUnitData {
 background-color: whitesmoke;
 border: ridge;
 box-shadow: 2px 2px 4px black;
 border-radius: 1ex;
}

td.btl {
 border-top: 1px solid black;
 border-left: 1px solid black;
 border-top-left-radius: 1ex;
}

td.btr {
 border-top: 1px solid black;
 border-right: 1px solid black;
 border-top-right-radius: 1ex;
}

td.bbl {
 border-bottom: 1px solid black;
 border-left: 1px solid black;
 border-bottom-left-radius: 1ex;
}

td.bbr {
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 border-bottom-right-radius: 1ex;
}

legend.openClose::before {
 content: '\25bc\fe0e\00a0';
}
fieldset.closed legend.openClose::before {
 content: '\25b6\fe0e\00a0';
}
legend.openClose {
 cursor: pointer;
 width: max-content;
}
legend { white-space: nowrap; }

.oauthgrid {
 display: grid;
 grid-template-columns: repeat(auto-fill, 55px);
 grid-gap: 1ex;
 gap: 1ex;
 justify-content: center;
}

hr.midrule { width: 50%; }

a {
 color: blue;
 text-decoration: none;
}

a:hover { text-decoration: underline; }
a:hover > img { text-decoration: none; }
a:active { color: #00cc00; }

a[target]::after {
 content: "\2197\fe0e"; /* northeast arrow */
 position: relative;
 font-family: 'Computer Modern Bright', 'Computer Modern Sans', Helvetica, sans-serif;
 border-radius: 6px;
 border: 1px dotted;
}

a[target].noarrow::after {
 content: '';
 border: none;
}

a[target] > * { flex: 0 0 auto; }

.extern {
 border-radius: 6px;
 border: 1px dotted;
}

div.minorButton a[target]::after { margin-left: 0; }

.gmOnly {
 display: none;
 visibility: hidden;
}

.gmTool > :first-child:before {
 background-image: url('/assets/lock.svg');
 display: inline-block;
 content: "";
 margin-left: 0;
 margin-right: 3px;
 width: 0.75em;
 height: 1em;
 background-position: center bottom;
 background-repeat: no-repeat;
}

body.about input body.about button.extra,
body.login input body.login button.extra {
 font-size: inherit;
}

h1 {
 position: relative;
 top: 0;
 left: 0;
 visibility: visible;
}

.mapwrap {
 overflow: hidden;
 user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}

.mapGrid {
 transition-duration: 250ms;
 transition-property: filter;
 position: relative;
 transform-origin: top left;
 cursor: grab;
 visibility: visible;
 z-index: 0;
 filter: blur(0);
 outline: none;
 user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 transform: scale(1,1);
}

div#context {
 border-bottom: 3px double #404040;
 height: 384px;
 overflow: auto;
}

body.chat {
 background-image: url("/assets/crumple.jpg");
 overflow: hidden;
 height: 100vh;
 width: 100vw;
}

/* Chat page */
div.mainChat {
 background-color: rgba(255, 255, 255, 0.5);
 height: 100vh;
 width: 100vw;
}

div.prevChats {
 height: calc(100% - 8em);
}

.prevChats:empty::before {
 display: inline-block;
 padding: 1em;
 text-align: center;
 width: 100%;
 height: 100%;
 content: '\2026\00a0 and all was quiet\00a0\2026';
 font-weight: bold;
}

.prevChats:empty {
 background-image: url('/assets/no-comments.svg');
 background-size: contain;
 background-position: center center;
 background-repeat: no-repeat;
}

div.chatsendSolo {
 position: absolute;
 display: flex;
}

 div.chatsendSolo {
  right: 1ex;
  top: 3em;
  height: calc(100vh - 2ex - 3em);
  width: 260px;
  flex-flow: column nowrap;
 }

 div.chatsendSolo textarea {
  width: calc(100% - 2ex);
  margin: 1ex;
 }

 div.spoof {
  justify-content: center;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
 }
}

@media only screen and (orientation: portrait) {
 body.chat div.prevChats {
  padding-bottom: 1ex;
  border-bottom: 3px solid gray;
  width: 100vw;
  height: calc(100vh - 3em - 3ex - 263px);
 }

 div.chatsendSolo {
  flex-flow: row nowrap;
  align-items: center;
  width: calc(100vw - 2ex);
  left: 0;
  bottom: 0;
  height: 260px;
 }

 div.chatsendSolo textarea {
  height: calc(260px - 3em);
  margin: 0 1em 3em;
 }
}

div.chatsendSolo textarea {
 flex: 1 0 auto;
 overflow: auto;
}

div.chatas {
 display: flex;
 flex-flow: row;
}

div.chatinput img {
 border-radius: 3px;
 cursor: pointer;
 margin-top: 1px;
 margin-right: 1px;
}

input.chatSpoof {
 flex: 1 0 auto;
 align-self: center;
 margin-left: 1ex;
}

hr.sep {
 margin: 0 33% 2px;
 line-height: 0;
 height: 0;
 border: 0;
 border-top: 1px solid rgba(0, 0, 0, 0.3);
 border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.flashNum {
 animation-name: notifyChange;
 animation-duration: 300ms;
 animation-iteration-count: 3;
 animation-timing-function: ease-in-out;
}

@keyframes notifyChange {
 0%, 100% {
  background-color: transparent;
  color: black;
 }
 50% {
  background-color: forestgreen;
  color: white;
 }
}

.notifynum {
 color: transparent;
 background-color: transparent;
 transition: all 250ms linear;
 font-weight: bold;
 font-size: xx-small;
 border-radius: 1em;
 min-width: 2.5em;
 position: absolute;
 right: 1ex;
 top: 0.5ex;
 text-align: center;
}

.notifynum.unread {
 background-color: red;
 color: white;
}

.hangindent {
 word-wrap: break-word;
 padding-left: 2em;
 text-indent: -2em;
 margin-bottom: 3px;
}

.prevChats div:nth-child(even) {
 background-color: rgba(208, 208, 208, 0.5);
}

div.hangindent a {
 font-family: 'Computer Modern Typewriter', Courier, monospace;
}

div.hangindent a[target]::after {
 margin-left: 3px;
}

.row {
 position: absolute;
 height: 64px;
 width: 1024px;
}

.space {
 position: absolute;
 width: 64px;
 height: 64px;
 background-color: #dddddd;
 border-width: 1px;
 border-color: black;
 border-style: solid;
}

.space-active {
 background-color: #888888;
}

.space-hover {
 background-color: #888800;
}

.space-hilight {
 background-color: #008888;
}

.unit {
 cursor: pointer;
 position: absolute;
 top: 0;
 left: 0;
 width: 64px;
 height: 64px;
 line-height: 64px;
 z-index: 20;
 overflow: visible;
}

.unit * { pointer-events: none; }

.speechBubble {
 position: absolute;
 line-height: normal;
 padding: 5px;
 border-radius: 10px;
 box-shadow: 2px 2px 4px black;
}

.speechBubble .syw { font-size: 14pt; }
.speechBubble img { height: 1em; }

.path {
 position: absolute;
 z-index: 10;
 pointer-events: none;
 opacity: 1;
 transition: opacity ease-in 9s;
}

.pendingpath {
 position: absolute;
 z-index: 10;
 pointer-events: none;
}

.floatleft {
 float: left;
}

.floatright {
 float: right;
 padding-right: 2px;
}

button.icon img {
 vertical-align: -2px;
 height: 1em;
}

.zoomdiv {
 text-align: center;
}

.panzoom {
 margin-left: auto;
 margin-right: auto;
}

table.panzoom td {
 vertical-align: middle;
 text-align: center;
}

table.panzoom td input {
 height: 100%;
 width: 100%;
}

div.unitDetails {
 display: flex;
 flex-flow: column nowrap;
 overflow: hidden auto;
}

div.unitDetails input[type="text"] { width: 100%; }

div.unitDetails button { min-height: 1.5em; }
div.unitDetails button img { height: 1.5em; }
div.unitDetails button img.h-1em { height: 1em; }
div.unitDetails button img.h-2em { height: 2em; }

div.underDetails {
 position: fixed;
 left: 0;
 top: 0;
}

div.dcholder {
 background-color: whitesmoke;
 background-image: url("/assets/linenpaper.jpg");
 border: 3px ridge black;
 border-radius: 1ex;
 box-shadow: 2px 2px 2px black;
 z-index: 7600;
}

div.deconflict {
 display: flex;
 flex-flow: row wrap;
 padding: 3px;
 justify-content: center;
 align-items: center;
 margin: auto;
}

div.deconflict > * {
 padding: 0 3px;
 border: 3px solid transparent;
}

div.deconflict > .deconflictSelected {
 border: 3px inset currentColor;
}

div.stack {
 width: 36px;
 height: 36px;
 z-index: 7500;
 position: absolute;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background-image: url('/assets/stack.svg');
 background-repeat: no-repeat;
 background-position: top left;
 background-size: cover;
}

span.point {
 z-index: 70;
 position: absolute;
 visibility: hidden;
}

.gesture {
 position: absolute;
 z-index: 50;
 pointer-events: none;
}

.annotation {
 position: absolute;
 z-index: 30;
 pointer-events: none;
}

.disabled, select:disabled, button:disabled, input:disabled, textarea:disabled {
 cursor: not-allowed;
 filter: grayscale(1);
}

select:focus, input:not(input[type="radio"]):focus, textarea:focus, button:focus {
 outline: none;
 box-shadow: 0 0 4px 4px skyblue;
}

select, button, input:not(input[type="radio"]), textarea {
 box-shadow: 0px 0px 4px transparent;
}

input[type="number"].roundCounter { width: 2.5em; }

.importantNumber {
 margin: 0 3px;
 font-weight: 600;
 font-size: 110%;
 border: 3px inset whitesmoke;
 border-radius: 0.75ex;
 padding: 2px 4px;
 text-shadow: 0 0 2px white;
}

span.roundControls {
 padding-bottom: 3px;
}

svg text {
 cursor: inherit; /* was default */
}

tr#icon input {
 width: 5em;
}

tr#X input, tr#Y input, tr#Z input {
 width: 4em;
}

div.unitContext input[type="number"] {
 width: 3em;
}

div.setUnitData input[type="number"] {
 width: 3em;
}

tr.ucX img {
 height: 16.5px;
 display: inline-block;
 vertical-align: text-bottom;
}

div.setUnitData input[type="text"] {
 width: 6em;
}

table.unitListA {
 margin: auto;
 padding: 0;
 border-spacing: 0;
}

table.unitListA tr:nth-child(even) {
 background-color: #e8e8e8;
}

table.unitListA tbody tr:nth-child(odd) {
 background-color: rgba(240, 240, 240, 0.75);
}


.toolicon *, button, svg, .unselectable {
 user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}

button#findUser {
 font-size: 10pt;
 height: 2em;
 margin-left: 3px;
}

input#zoomOut { cursor: zoom-out; }
input#zoomIn { cursor: zoom-in; }

input[type="range"] { padding: 0; }
input[type="range"] + button {
 position: relative;
 top: -6px;
}

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget button { font-family: inherit; }
.ui-tabs .ui-tabs-panel { padding: 3px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 3px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
 background-color: rgba(255, 255, 255, 0.25);
}
.ui-widget-header { background-color: rgba(224, 224, 224, 0.5); }
.ui-widget-content { background: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background-color: #007fff; }

div.flex { flex: 1 0 auto; }

div.eighty {
 margin: 10%;
 max-height: 80%;
 max-width: 80%;
}

img.treasure { height: 16pt; }

a.indent {
 border: 2px groove whitesmoke;
 padding: 1ex;
 border-radius: 1ex;
 margin: 1ex;
}
a.indent:hover {
 border: 1px inset whitesmoke;
 background-color: rgba(255, 255, 255, 0.25);
}

div.unitsBody {
 margin: 45pt 5vw 24pt;
 height: calc(100vh - 2em - 60px);
 min-height: 10em;
 text-align: center;
 background-color: rgba(240, 240, 240, 0.75);
 overflow: hidden;
 position: relative;
 padding: 1ex 1em;
}

div.twoColumn {
 overflow: hidden;
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-around;
 align-items: start;
 position: relative;
 padding: 1em;
}

div.unitScroll {
 border-top: 3px groove;
 overflow: auto;
 max-height: 100%;
 height: calc(70vh - 4em - 75px);
}

.rowflex {
 display: flex;
 flex-flow: row nowrap;
}

div.rowwrap {
 display: flex;
 flex-flow: row wrap;
}

div.just-ctr {
 align-items: center;
 justify-content: center;
}

.margin-l2em {
 margin-left: 2em;
}

.colflex {
 display: flex;
 flex-flow: column nowrap;
}

div.rowflex > div.flexchild {
 flex: 0 0 auto;
 border: 3px groove;
 padding: 1em;
}

div.rowflex div.flexchild table {
 border: none;
}

div.rowflex div.flexchild tr {
 border: 1px solid gray;
}

body.units div.flex, body.realms div.flex {
 background-color: rgba(240, 240, 240, 0.5);
 flex-flow: column;
 justify-content: center;
 align-items: center;
 border: 3px ridge;
}

div#contactTop td:first-child {
 vertical-align: top;
 padding-top: 3px;
}

div.flexpad {
 flex: 1 1 10%;
}

label.required::after {
 color: red;
 content: "*";
 font-size: xx-small;
}

table.expl {
 text-align: justify;
 border-collapse: collapse;
}

table.expl tr:nth-child(even) {
 background-color: #d0d0d0;
}

table.expl th:first-child {
 text-align: right;
 white-space: nowrap;
}

td.expl {
 padding-left: 1em;
 font-size: 10pt;
}

table.expl textarea {
 width: 100%;
}

table.expl ol {
 margin-top: 0;
 margin-bottom: 0;
}

img.emoji {
 height: 1em;
 display: inline-block;
 vertical-align: text-top;
}

table.topleft td {
 text-align: left;
 vertical-align: top;
}

.loginform {
 padding: 1em;
 background-color: rgba(248, 248, 248, 0.8);
 border: 3px ridge;
 text-align: center;
 box-shadow: 5px 5px 5px black;
 border-radius: 1ex;
 overflow: auto;
 position: absolute;
}

.loginform > div {
 margin: 1em;
}

.just-se {
 justify-content: space-evenly;
 align-items: stretch;
}

div.taller {
 max-height: 80vh;
}

div.main {
 border-radius: 1em;
}

.loginform table, div.userinfo table {
 position: relative;
 margin-left: auto;
 margin-right: auto;
}

tr.login td {
 padding-left: 3ex;
 padding-right: 3ex;
 text-align: left;
 vertical-align: top;
 font-size: small;
}

span.license {
 border-radius: 1ex 1ex 0 0;
 padding: 0.5ex 1ex;
 border-radius: 1ex 1ex 0 0;
 bottom: 0;
 font-size: xx-small;
 text-align: center;
}

.decor {
 background-image: url("/assets/linenpaper.jpg");
 background-attachment: fixed;
 background-color: #f0f0f0;
 opacity: 1;
 transition: opacity 0.5s ease-in;
 border: 2px outset;
 box-shadow: 2px 2px 4px black;
 position: fixed;
 padding: 0.25ex 0.5ex;
 z-index: 8250;
}

div.license {
 position: fixed;
 width: 100vw;
 left: 0;
 bottom: 0;
 height: 20px;
 font-size: x-small;
 border-top: 3px ridge;
 text-align: center;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
}
body.map div.license { border-top-color: transparent; }

div.license span {
 margin: 0 1ex;
}

/* camera support classes */

.videoHolder { position: relative; }
.b-d, video#video, video.video { border: 1px dotted black; }

div#correctHolder {
 position: relative;
 left: 0;
 top: 0;
}

input.point { width: 8ex; }

svg#mapSvgGrid {
 position: absolute;
 z-index: 1;
 pointer-events: none;
}

div#mapSvgGrid {
 height: 100%;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

body.units div.buttonbar { margin: 1ex 0; }

body.usermgmt .accessControl, body.worldusers .accessControl {
 overflow: auto;
 border: 3px groove;
 margin-top: 1em;
}

.sticky0 {
 position: sticky;
 top: 0;
}

body.usermgmt .accessControl { height: 30vh; }
body.usermgmt .accessControl table, body.worldusers .accessControl table { border: none; }
.accessControl table { width: 100%; }
body.admin .accessControl table { width: unset; }
.accessControl table tr:first-child th { background-color: rgb(240, 240, 240, 0.75); }
.accessControl table tr:nth-child(even) { background-color: #e8e8e8; }
.accessControl table tr:nth-child(odd) { background-color: rgba(240, 240, 240, 0.75); }
body.units .accessControl table tr.changeFlag:nth-child(odd) { background-color: rgba(192, 192, 192, 0.5); }
body.units .accessControl table tr:nth-child(even) { background-color: transparent; }
body.units .accessControl table tr.changeFlag:nth-child(even) { background-color: rgba(255, 255, 187, 0.75); }

body.usermgmt .accessControl table tr.changeFlag, body.worldusers .accessControl table tr.changeFlag {
 background-color: rgba(255, 255, 187, 0.75);
}

body.usermgmt table { border-radius: 0.5ex; }
.accessControl table tr td:first-child { padding-left: 1ex; }

.accessControl table, .accessControl tr, .accessControl th, .accessControl td { border-collapse: collapse; }
.accessControl th, .accessControl td { padding: 0.5ex; }

.changeFlag {
 background-color: rgba(255, 255, 187, 0.75);
 font-style: italic;
}

table.ucTable tr.changeFlag:nth-child(odd) { background-color: rgb(192, 192, 142, 0.75); }
.warningFlag { background-color: #ffbbbb; }

/* Wiki */

div.wikicontent {
 border-left: 3px ridge #404040;
 padding: 1em;
 margin-left: 11em;
 background-color: rgba(240, 240, 240, 0.75);
 overflow: auto;
 min-height: 100%;
}

div.wallfiles {
 border-left: 3px ridge #404040;
 padding: 1em;
 padding-top: 4em;
 background-color: rgba(240, 240, 240, 0.75);
 overflow: auto;
 min-height: 100vh;
 margin-left: 16em;
}

div.wikicontent textarea {
 width: calc(100% - 2ex);
 min-height: 10em;
}

div.wikicontent button {
 font-weight: bold;
 font-size: 10pt;
 padding: 0 1ex;
 display: block;
 margin-right: 0;
 box-shadow: 0 0 1px black;
}

div.wikicontent #pagelist .private {
 font-style: italic;
 background-color: rgb(255, 224, 224);
}

div.wikicontent div.buttonbar {
 border: 2px groove whitesmoke;
 flex: 0 0 auto;
}

td.narrow { width: 1px; }
.wide { width: 100%; }

code.bordered, tt.bordered {
 border-radius: 3px;
 border: groove;
 padding: 0 0.5ex;
 white-space: nowrap;
}

div#toolbar {
 position: absolute;
 left: 0;
 bottom: 2ex;
 display: flex;
 justify-content: space-around;
 text-align: center;
 z-index: 8000;
 width: calc(100vw - 26ex - 3px);
 margin-left: 2ex;
 margin-right: 2ex;
 margin-top: 2em;
}

div#toolbar div {
 flex: 1;
 border: 3px inset;
}

div.menuButtons {
 display: flex;
 justify-content: space-between;
 flex-flow: row nowrap;
}

div.menuButtons > div {
 flex: 0 0 auto;
 margin-left: 1ex;
 margin-right: 1ex;
}

h1.pagename { border-bottom: 1px solid gray; }

body.wiki {
 background-color: #f1f4e6;
 /* TODO: make configurable? */
 background-image: url("/assets/linenpaper.jpg");
 background-repeat: repeat;
 background-size: auto;
 height: 100%;
 width: 100%;
}

div.wikimgmt {
 background-image: url("/assets/linenpaper.jpg");
 background-attachment: fixed;
 padding: 1em 1ex;
 font-size: 12pt;
 width: 11em;
 position: fixed;
 top: 40px;
 left: 0;
 height: 100%;
}

div.wikimgmt > div {
 border-bottom: 3px groove white; /* fake an HR */
 padding: 1ex;
}

div.wikimgmt > div:last-child { border-bottom: unset; }
div#wikitext { padding: 1ex; }

div.mapholder {
 text-align: left;
 margin: 0;
 overflow: hidden;
 border: 3px inset currentColor;
 border-left: none;
 border-radius: 0 1ex 1ex 0;
}

@font-face {
 font-family: 'NK 124';
 src: url('/assets/fonts/nk124.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

.lrpad-1ex {
 padding-left: 1ex;
 padding-right: 1ex;
}

.virtuarasa {
 color: #004000;
 top: 0;
 text-align: center;
 margin: auto 0;
}

.virtuarasa a {
 color: #004000;
 font-size: 23pt;
 font-weight: bold;
 font-family: 'NK 124', sans-serif;
 text-shadow: 2px 2px 2px gray;
}

.virtuarasa a {
 text-decoration: none;
}

.virtuarasa a::after {
 content: "\2122\fe0e"; /* TM */
 font-weight: normal;
 font-size: 16px;
 position: relative;
 top: -6pt;
 font-family: var(--sans-fonts);
}

.virtuarasa a.noTM::after {
 content: '';
 display: none;
 width: 0;
 top: unset;
}

.syw {
 font-family: 'NK 124', sans-serif;
 font-size: 16pt;
 text-shadow: 1px 1px 2px gray;
 font-weight: bold;
}
.syw::after {
 content: '\2122\fe0e';
 position: relative;
 font-size: 9pt;
 top: -6pt;
 left: 1pt;
 font-weight: normal;
 font-family: var(--sans-fonts);
}

main {
 margin-top: 40px;
 margin-bottom: 20px;
}

.f-11a { flex: 1 1 auto; }
.f-00a { flex: 0 0 auto; }

.sidebar {
 width: 64px;
}

.sidebar > div {
 font-size: inherit;
 padding: 1ex;
 text-align: center;
 margin: 0 0.25ex;
 vertical-align: bottom;
 pointer-events: all;
}

.sidepop > svg, .sidebar img {
 pointer-events: all;
 display: block;
 cursor: pointer;
 border: 3px outset;
 border-radius: 0.75ex;
 background-color: rgba(255, 255, 255, 0.5);
 margin: auto;
 height: 44px;
 max-width: 44px;
 padding: 2px;
}
.sidepop > svg:hover, .sidebar img:hover {
 background-color: #e0e0e0;
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}
.sidepop > svg.selected, .sidepop > svg:active, .sidebar img.selected, .sidebar img:active {
 background-color: #d0d0d0;
 border: 3px inset;
}

.buttonbar button > img, .sidebar button > img {
 display: block;
 height: 12pt;
 width: 12pt;
}

.sidebar .hastt .ttt {
 position: absolute;
 top: auto;
}

div.signIn {
 display: flex;
 margin-top: 0;
}

.bottomLinks a {
 padding: 0.25ex 0.5ex;
 border: 1px groove gray;
 margin: 0.25ex;
 border-radius: 0.5ex;
}

.unitsBox {
 float: left;
 width: 50%;
 margin: auto;
 overflow: hidden;
 border: groove;
 border-radius: 1ex;
 height: 100%;
}

.unitsBox.covered {
 position: relative;
}

.unitsBox.covered::before {
 content: 'Choose a token to edit';
 font-weight: bold;
 display: table-cell;
 padding-top: 3em;
 font-size: x-large;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 255, 255, 0.75);
 z-index: 8400;
}

.unitsBox.right {
 display: flex;
 flex-flow: column nowrap;
}

tr.outset td {
 border: outset;
}

/* narrow */
@media only screen and (max-width: 1023px) {
 html, body {
  font-size: 11pt;
 }

 body.about h1,
 body.login h1 {
  font-size: 2em;
 }

 .loginform {
  top: 10ex;
  bottom: 10ex;
  left: 5ex;
  right: 5ex;
 }

 div.signIn {
  flex-flow: column nowrap;
 }

 .w1024 {
  visibility: hidden;
  display: none !important;
 }

 div.virtuarasa a {
  font-size: 20pt;
 }

 .sidebar span {
  background-color: rgba(255, 255, 255, 0.75);
 }

 .sidebar a[target]::after {
  content: unset;
  margin-left: unset;
  margin-right: unset;
  width: 0;
 }

 .sidebar a > img {
  padding: 1px;
  width: 24px;
 }

 .mapGrid {
  height: calc(100vh - 60px);
 }

 body.usermgmt div.infotable {
  margin: 3em 2em 0 2em;
  width: calc(100vw - 4em);
 }

 body.camera {
  font-size: 1em;
 }

 body.camera div.actionarea {
  height: calc(100vh - 15em);
 }
}


/* wide */
@media only screen and (min-width: 1024px) {
 body.about h1,
 body.login h1 {
  font-size: 3em;
 }

 body.about h2,
 body.login h2 {
  font-size: 2em;
 }

 .loginform {
  max-height: 75vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80vw;
 }

 div.signIn {
  flex-flow: row nowrap;
 }

 .w-xs {
  visibility: hidden;
  display: none !important;
 }

 .minorButton {
  margin: 0 0.5em;
 }

 div.main {
  padding: 1em;
 }

 .sidebar td {
  min-width: 0;
  width: 0;
  max-width: 0;
  padding: 1px;
  transition: all 250ms linear;
  min-height: 48px;
  min-width: 59px;
  width: auto;
 }

 .sidebar td img {
  padding: 3px;
  width: 42px;
 }

 .sidebar {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
 }

 div.maybeBorder {
  margin-left: 1em;
  border-left: 3px groove white;
  padding-left: 1em;
 }

 .mapGrid {
  height: calc(100vh - 60px);
 }
}

td.unitHeader {
 font-size: 14pt;
}

img.spin {
 animation: 2.5s linear 0s infinite spin;
 height: 80%;
 min-height: 6em;
}

td.spin {
 height: 7em;
 overflow: hidden;
}
td.spin img.spin {
 height: 7em;
 width: 7em;
}

table.unitList tbody:empty::before {
 display: inline-block;
 padding: 1em;
 text-align: center;
 width: 100%;
 height: 100%;
 font-weight: 600;
 position: absolute;
 content: 'Create tokens with the \201c New\201d\00a0 button.';
 text-shadow: none;
}

.mapwrap img.spin {
 margin: calc((100vh - 44pt) / 20) 0 0 calc((100vh - 44pt - 33vw) / 2);
 height: calc((100vh - 44pt) * 0.8);
}

@-webkit-keyframes spin {
 from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
@keyframes spin {
 from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

div.bottomSep {
 border-bottom: 1px dotted;
 padding-bottom: 0.25ex;
 margin-bottom: 0.25ex;
}

div#logInOutLink {
 padding-top: 0.25ex;
 margin-top: 0.25ex;
}

div#vrworld {
 display: flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 padding-right: 0.5ex;
}

div#vrworld > div {
 flex: 0 0 auto;
 margin-left: 3px;
 font-size: 14pt;
 font-weight: bold;
}

.loginform table td {
 vertical-align: top;
}

.loginform input[type="button"],
.loginform input[type="button"] {
 width: 8em;
}

abbr, td.connected {
 cursor: help;
}

td.connected {
 width: 1em;
}

td.name {
 height: 2em;
 font-weight: 600;
}

tr.openGang td.name::before {
 content: "\25bc\fe0e";
 margin-right: 1ex;
}

tr.closedGang td.name::before {
 content: "\25ba\fe0e";
 margin-right: 1ex;
}

tr.gangRow td.name {
 user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 cursor: context-menu;
}

/* Re-enable this when we have a button to zoom on a whole gang. */
/* tr.gangRow td:last-child {
 display: flex;
 justify-content: space-evenly;
 flex-flow: row nowrap;
}
tr.gangRow td:last-child input, tr.gangRow td:last-child button {
 flex: 0 0 auto;
} */

.titlebar {
 border-collapse: collapse;
 white-space: nowrap;
 text-align: center;
 background-attachment: fixed;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 40px;
 z-index: 8900;
 opacity: 1;
 border-bottom: 3px ridge;
 background-image: url('/assets/paper-1809412.jpg');
 overflow: hidden;
}

body.map .titlebar {
 margin-top: 3px;
 border-bottom: none;
}

.titlebar td:first-child {
 text-align: left;
 padding-left: 1ex;
}

.titlebar td:last-child {
 text-align: right;
 padding-right: 1ex;
}

.titlebar td {
 padding: 0;
 margin: 0;
}

.socbump img {
 height: 2em;
 margin-left: 2pt;
 display: inline-block;
 border: 3px outset whitesmoke;
 border-radius: 1ex;
 padding: 2px;
 flex: 0 0 auto;
 vertical-align: middle;
 user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}

.socbump img:hover {
 background-color: rgba(255, 255, 255, 0.75);
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}

.socbump a[target] {
 display: inline-block;
 text-decoration: none;
}

.inter a[target]::after,
.socbump a[target]::after {
 display: none;
 content: '';
 margin-left: unset;
 margin-right: unset;
 width: 0;
}

.socbump a:hover {
 text-decoration: none;
}

.socbump > div {
 flex: 0 0 auto;
}

img#cameras {
 cursor: pointer;
 display: inline-block;
}

img.menuIcon {
 height: 2em;
 margin-left: 2pt;
 display: inline-block;
 border: 3px outset whitesmoke;
 border-radius: 1ex;
 padding: 2px;
 cursor: pointer;
 vertical-align: text-bottom;
 user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}
img.menuIcon:hover {
 background-color: rgba(255, 255, 255, 0.5);
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}
img.menuIcon.selected {
 background-color: #d0d0d0;
 border: 3px inset;
}
img.menuIcon.disabled {
 cursor: not-allowed;
}
img.menuIcon.disabled:hover {
 background-color: unset;
 background-image: unset;
}

div.mapButton {
 margin: 0 0.5em;
 cursor: pointer;
}

div.mapButton img {
 display: inline-block;
 height: 24px;
}

.mtop-3px {
 margin-top: 3px;
}

.mright--3px {
 margin-right: -3px;
}

.m-1ex {
 margin: 1ex;
}

#revision {
 margin-left: 1em;
}

.defn {
 text-decoration: underline dotted black;
 text-transform: capitalize;
}

.ucFirst, a.prompt {
 text-transform: capitalize;
}

div#createFreeWorld {
 margin-bottom: 1em;
}

#revision > :first-child::before {
 font-size: smaller;
 cursor: help;
 font-weight: normal;
 margin-left: 0.5ex;
 margin-right: 0.5ex;
}

#revision button {
 font-weight: bold;
}

#revision button img {
 height: 20px;
}

#revision button a {
 font-size: larger;
}

.tab {
 border: 1px solid gray;
 border-radius: 0.75ex 0.75ex 0 0;
 border-bottom-color: black;
 background-color: rgba(200, 200, 200, 0.75);
 margin: 0 0.5ex 0 0;
 padding: 0.5ex 1ex  0 1ex;
 border-bottom: none;
 cursor: pointer;
 font-size: 13pt;
 float: left;
}

.tab:hover {
 background-color: rgba(220, 220, 220, 0.75);
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}

.tab:hover a { text-decoration: underline; }

.selected {
 border-color: black;
 font-weight: bold;
 background-color: rgba(240, 240, 240, 0.75);
 cursor: default;
}

.tab.selected {
 background-color: rgba(240, 240, 240, 0.75);
}

.selected:hover {
 background-color: rgba(240, 240, 240, 0.75);
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}

div.tabholder {
 text-align: left;
}

div.tabset {
 padding: 1em;
}

div.actionarea {
 border: 1px solid black;
 border-radius: 0.75ex;
 border-top-left-radius: 0;
 padding: 1em;
 overflow: auto;
 height: calc(100vh - 60px - 7em);
 clear: left;
 box-shadow: 2px 2px 4px black;
 background-color: rgba(255, 255, 255, 0.35);
}

div.mainmgmt {
 height: calc(100vh - 40pt);
 overflow: auto;
 margin-top: 40px;
 margin-bottom: 12pt;
}

body.camera div.actionarea {
 height: calc(100vh - 40pt - 15em);
}

canvas.crop {
 z-index: 8825;
 position: absolute;
 left: 0;
 top: 0;
 /* width: calc(100vw - 2ex);
 height: 100%; */
}

div.popupholder {
 display: flex;
 overflow: hidden;
 pointer-events: none;
 overscroll-behavior: contain;
 margin: 1ex;
}

div#unitScroller {
 height: calc(70vh - 2em - 64px);
}

div#unitFlex div.ucButtonBar button img {
 height: 32px;
}

div.popupholder div#unitListDiv {
 display: flex;
 flex-flow: column;
}

div.popup {
 flex: 0 1 auto;
 position: absolute;
 top: 0;
 right: 0;
 min-height: 0;
 height: 0;
 max-height: 0;
 z-index: 8000;
 overflow: hidden;
 transition-property: opacity;
 transition-duration: 300ms;
 flex-flow: column nowrap;
 display: flex;
 transition-timing-function: ease-in-out;
 border-radius: 1em;
 background-color: rgba(255, 255, 255, 0.75);
 opacity: 0;
 pointer-events: none;
 max-width: 30vw;
}

div.popup.visible {
 position: relative;
 background-color: whitesmoke;
 box-shadow: 0px 5px 4px #404040;
 border: 1px solid #404040;
 display: flex;
 bottom: unset;
 min-height: 7em;
 max-height: calc(100vh - 60px);
 margin-bottom: 8px;
 transition-property: opacity;
 opacity: 1;
 pointer-events: all;
 flex: 1 1 auto;
}

div.popcontent {
 flex: 1 1 auto;
 overflow-y: auto;
 min-height: 5vh;
 max-height: 100vh; /* Setting anything here fixes a Chrome rendering bug. */
 overscroll-behavior: contain;
}

div.poptitle {
 text-align: center;
 margin-bottom: 3px;
 font-weight: 600;
 text-shadow: 2px 2px 1px white;
 margin-left: auto;
 margin-right: auto;
}

div.maincontent {
 background-color: #eaeaea;
 background-image: url('/assets/linenpaper.jpg');
 padding: 1em;
 border-top: ridge;
 min-height: calc(100vh - 3em);
}

div.titleholder {
 flex: 0 0 auto;
 display: flex;
 justify-content: space-between;
 border-bottom: 1px ridge #404040;
 flex-flow: row nowrap;
 align-items: center;
 padding: 3px 6px 0 6px;
}

.roundButton, .titleholder svg, .indicator {
 flex: 0 0 auto;
 height: 18pt;
 margin: 3px;
 padding: 1px;
 border: 3px outset whitesmoke;
 margin-top: 0;
 border-radius: 5px;
 cursor: pointer;
 max-width: 18pt;
}

.roundButton:hover, .titleholder svg:hover, img.indicator:hover {
 background-color: #e0e0e0;
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}

.roundButton:active, .titleholder svg:active, img.indicator:active {
 background-color: #d0d0d0;
 border: 3px inset;
}

div#optspop > div {
 margin-top: 3px;
}
div#optspop > div:first-child {
 margin-top: 0;
}

div.auraHolder {
 overflow-y: auto;
 min-height: 1em;
 max-height: 25vh;
 min-width: 150px;
 overscroll-behavior: contain;
 column-count: 3;
}

div#auraHolder:empty::before {
 display: block;
 position: relative;
 text-align: center;
 vertical-align: -50%;
 color: gray;
 font-style: italic;
 content: 'No auras defined';
}

.aura {
 position: absolute;
}

div.scrollable {
 overflow-y: auto;
 overscroll-behavior: contain;
}

/*
::-webkit-scrollbar {
 width: 10px;
}
*/

/* Track */
/*
::-webkit-scrollbar-track {
 border-radius: 5px;
 box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
*/

/* Handle */
/*
::-webkit-scrollbar-thumb {
 background-color: darkgrey;
 border-radius: 5px;
 outline: 1px solid slategrey;
}

::-webkit-scrollbar-thumb:hover {
 background-color: #808080;
 border-radius: 5px;
}
*/

div.coords {
 color: #808080;
 text-shadow: 0 0 2px white;
 cursor: default;
}

.color1 {
 color: #0000cc;
}

.color2 {
 color: #00cc00;
}

.color3 {
 color: #cc0000
}

.color4 {
 color: #cc00cc;
}

.color5 {
 color: #cccc00;
}

.color6 {
 color: #00cccc;
}

div.buttonbar {
 margin-bottom: 0.5ex;
}

body.map div.buttonbar {
 flex: 0 0 auto;
}

div.buttonbar > button {
 float: left;
 margin: 3px;
}

button.imgButton {
 position: absolute;
 top: -6px;
 right: -6px;
 width: 2.125em;
}

button.edit.imgButton {
 position: unset;
 top: unset;
 right: unset;
}

button.imgButton img {
 pointer-events: none;
 height: 2.5ex;
 margin: 2px 0;
}

div.spread {
 justify-content: space-between;
}

button.img-1em img {
 display: block;
 height: 1em;
}

div.minorButton {
 border-radius: 0.75ex;
 display: flex;
 cursor: pointer;
 border: 3px outset rgb(238, 238, 238);
 flex-flow: row nowrap;
 justify-content: center;
 align-content: center;
 font-weight: bold;
 padding: 0 3px;
}

div.minorButton img {
 height: 24px;
 padding: 0 3px;
 flex: 0 1 auto;
 display: inline-block;
 vertical-align: middle;
}

div.minorButton:hover {
 background-color: rgba(255, 255, 255, 0.4);
 background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%);
}

div.minorButton:active {
 border-style: inset;
}

img.chatsend {
 width: 32px;
 height: 32px;
 display: inline-block;
}

button.chatsend {
 width: 100%;
}

div.csholder > button {
 flex: 0 0 auto;
 border-radius: 6px;
 height: 100%;
}

table.ucTable {
 border-collapse: collapse;
 position: relative;
 margin: auto;
 width: min-content;
}

table.ucTable tr:nth-child(odd) {
 background-color: rgba(192, 192, 192, 0.5);
}

table.ucTable th {
 font-weight: normal;
 font-style: italic;
 border-top: 1px solid black;
 border-bottom: 1px dotted black;
}

.ucTable th, .ucTable td {
 white-space: nowrap;
 text-align: left;
}

table.ucTable td:first-child {
 padding-left: 3px;
 text-align: center;
}

body.map table.unitList, table#realmList {
 border-collapse: collapse;
 text-align: center;
}

body.map table.unitList {
 width: 100%;
}

div#unitFlex {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
 width: 100%;
}

div#unitFlex > div {
 flex: 1 0 auto;
 max-height: 70vh;
}

body.units p {
 padding: 0 1em;
}

body.units h1, body.units h2,
body.about h1, body.about h2,
body.login h1, body.login h2 {
 margin-block-start: 0;
 margin-block-end: 0;
}

body.units div#unitDetails {
 position: relative;
 display: block;
}

div#loading {
 max-height: 90vh;
 max-width: 90vw;
 margin: 5vh 5vw;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(240, 240, 240, 0.9);
 position: absolute;
 left: 0;
 top: 0;
 z-index: 9999;
}

div#loading > div {
 flex: 0 0 auto;
 font-size: 24pt;
}

body.units div.unitContext {
 background-color: rgba(240, 240, 240, 0.75);
 text-align: center;
 display: flex;
 flex: 1 1 auto;
 align-items: stretch;
 flex-flow: column;
 background-color: rgba(240, 240, 240, 0.75);
}

.info {
 vertical-align: text-top;
 display: inline-block;
 cursor: help;
 border-radius: 0.5em;
 height: 1em;
 width: 1em;
 text-align: center;
}

.info::after {
 content: '\00a0';
 width: 1em;
 height: 1em;
 background-size: cover;
 background-repeat: no-repeat;
 background-image: url('/assets/info-circle.svg');
 display: inline-block;
}

div.explain dl {
 margin-top: 0;
 margin-bottom: 0;
}

div.explain dd {
 margin-left: 1em;
}

span.sqrt {
 margin-left: -3px;
 padding-left: 4px;
}
span.sqrt::before {
 content: '\221a\fe0e';
}

div.explain {
 display: none;
 visibility: hidden;
 position: absolute;
 background-color: #eee8aa;
 color: black;
 border: 3px ridge #eee8aa;
 padding: 1ex;
 border-radius: 1ex;
 z-index: 8995;
 text-align: justify;
 overflow: auto;
 overscroll-behavior: contain;
 max-width: 50vw;
 box-shadow: 2px 2px 2px black;
}

div.explain * {
 margin-block: 0.5ex;
}

div.explain.visible {
 display: block;
 visibility: visible;
}

.explainClose {
 border-radius: 0.25em;
 display: inline-block;
 cursor: pointer;
 float: right;
 height: 1em;
 padding: 0 0 0 1ex;
 position: sticky;
 top: 0.5ex;
 content: url('/assets/window-close.svg');
}

table.unitList tbody tr:nth-child(odd) {
 background-color: rgba(192, 192, 192, 0.5);
}

table.unitList tbody tr.changeFlag:nth-child(odd) {
 background-color: rgba(224, 224, 184, 0.75);
}

table.unitList thead th {
 background-color: #a0a0a0;
 position: sticky;
 top: 0;
}

table.unitList tfoot th {
 background-color: #a0a0a0;
 position: sticky;
 bottom: 0;
}

table#realmList tr:nth-child(odd) {
 background-color: rgba(192, 192, 192, 0.5);
}

table#realmList tr.changeFlag:nth-child(odd) {
 background-color: rgba(224, 224, 184, 0.75);
}

.tall { height: 100%; }
.hilite { background-color: rgba(255, 255, 187, 0.75); }

.spacer {
 width: 1em;
 flex: 0 0 auto;
 display: inline-block;
}

button a {
 color: black;
}
button a:hover {
 text-decoration: none;
}

#messageBox {
 background: white;
 left: 35%;
 width: 30%;
 top: 64px;
 font-size: 14pt;
}

body.map #messageBox {
 left: 12.5%;
 width: 40%;
}

#messageBoxCancel, #messageBoxBack {
 font-size: 75%;
}

.fakeLink {
 cursor: pointer;
}
.fakeLink:hover {
 text-decoration: underline dotted;
}

table.oddeven {
 border: 1px solid black;
 border-spacing: 0;
 border-collapse: collapse;
}
table.oddeven tr:nth-child(even) {
 background-color: rgba(224, 224, 224, 0.75);
}
table.oddeven td, table.oddeven th {
 margin: 0;
 padding: 3px;
}
table.oddeven th, table.oddeven td {
 border-right: 1px solid black;
}
tr.italics {
 text-align: center;
 font-style: italic;
}

table.last-col-ctr td:last-child {
 text-align: center;
}

table.last-col-ctr th:last-child {
 white-space: nowrap;
}

div.oneQuarter {
 width: 25%;
 justify-content: flex-end;
}

div.oneThird {
 width: 34%;
 justify-content: flex-end;
}

div.rpad1ex {
 padding-right: 1ex;
}

p.alignLeft, li.alignLeft {
 text-align: left;
}

table.post {
 border-collapse: collapse;
 width: 100%;
 text-align: left;
 margin: 1em 0;
}

table.post tr {
 box-shadow: 2px 2px 6px black;
 background-color: rgba(255, 255, 255, 0.5);
}

table.post td {
 border: 1px ridge gray;
 vertical-align: top;
 padding: 0 1ex;
}

table.topPost td {
 border: 3px ridge gray;
}

table.post td.authorInfo {
 width: 6em;
 padding: 1ex;
}

table.topPost td.authorInfo {
 padding: 1ex;
}

div.postTime {
 margin: 1ex 0;
}

div.flexRow {
 display: flex;
 flex-flow: row wrap;
 align-items: stretch;
 justify-content: space-around;
}

div.flexRow > div {
 padding: 1ex;
 margin: 0.5em;
 text-align: center;
 flex: 0 0 auto;
 border: groove;
 border-radius: 1ex;
 background-color: rgba(255, 255, 255, 0.5);
}
div.flexRow > div:hover {
 background-color: rgba(255, 255, 255, 0.75);
}

.worldLabel {
 border-radius: 0.5ex;
 border: 1px outset;
 font-variant: small-caps;
 padding: 0px 0.5ex;
 margin-top: 1ex;
}

.border1 {
 border: 1px solid black;
 border-radius: 1ex;
 padding: 1ex 1ex 0 1ex;
 margin: 1em;
}

.border2 {
 border: 1px solid black;
 border-radius: 1ex;
 padding: 0.5ex 1ex;
 margin: 1em;
}

.sampleMap {
 border: 1px solid black;
 overflow: hidden;
 display: flex;
 background-color: rgba(0, 0, 0, 0.1);
 text-shadow: 0 0 1ex white;
 font-weight: 600;
}

div.lrgroove {
 border-style: groove;
 border-width: 0 1px;
 padding: 0 1ex;
 margin: 1ex;
}

div.w20vw {
 width: 20vw;
 padding-top: 2em;
 vertical-align: top;
 height: 7em;
}

div.alignStart {
 justify-content: flex-start;
}

div#admincontent {
 margin: 3em 0;
}

button.logIn {
 font-weight: bold;
 color: green;
 border-color: darkgreen;
}

div.lrm1ex {
 margin-left: 1ex;
 margin-right: 1ex;
}

.rp1em { padding-right: 1em; }

.lrp1em {
 padding-left: 1em;
 padding-right: 1em;
}

table.firstborder {
 border-collapse: collapse;
}

table.firstborder tr:first-child {
 border-top: 1px groove;
 border-bottom: 1px groove;
}

div.thirds {
 justify-content: space-between;
 align-items: flex-start;
 max-width: calc(80vw - 2em);
 min-width: calc(100px - 2em);
 overflow: auto;
 padding: 0 1em 1em 1em;
}

div.thirds > div {
 flex: 1 1 33%;
 width: auto;
 text-align: left;
}

div.thirds > div.groove {
 flex: 0 0 1px;
 width: 1px;
 border-collapse: collapse;
 border-left: 1px groove;
 margin: 0 1em;
 align-self: stretch;
}

table.groove td {
 border-right: 1px groove;
 padding: 1em;
 margin: 1em;
}

table.groove td:last-child {
 border-right: none;
}

div.thirds > div:first-child {
 padding-left: 0;
 margin-left: 0;
}

div.thirds > div:last-child {
 padding-right: 0;
 margin-right: 0;
}

div.thirds > div > h2, div.thirds > div > h3 {
 text-align: center;
 margin-block-start: 0;
 margin-block-end: 0;
}

div.thirds h3 {
 font-style: italic;
 color: rgb(0, 128, 0);
}

.rounded {
 border-radius: 1em;
}

div.thirds ul {
 margin-block-start: 0;
 margin-block-end: 0;
 padding-inline-start: 1em;
}

td.half {
 width: 50%;
}

div.extraButtons button a, button.extra a, input.extra {
 color: #008000;
 font-family: 'NK 124', sans-serif;
 padding: 0.5ex;
 font-weight: bold;
}

div.extralinks {
 justify-content: space-around;
 border-radius: 1ex;
 border: 1px groove;
 margin: 1em;
 background-color: whitesmoke;
 padding: 0.5ex;
 box-shadow: 2px 2px 2px black;
}
div.extralinks > * {
 flex: 1 0 auto;
}

a.demo {
 font-weight: bold;
}

.f01a { flex: 0 1 auto; }
.f10a { flex: 1 0 auto; }
.f00a { flex: 0 0 auto; }

div.noWorlds {
 text-align: justify;
 max-width: 15em;
}

div.oauthbar {
 margin: 1ex 0;
 border: 2px groove currentColor;
 border-radius: 0.5ex;
 padding: 0.5ex 1em;
 text-align: left;
 background-color: rgba(245, 245, 245, 0.5);
}

.unitList .inactive::after, .unitList .inanimate::after, .unitList .blocking::after {
 position: relative;
 margin-left: 1ex;
}
.unitList .inactive::after { content: "\2298\fe0e"; /* (/) */ }
.unitList .inanimate::after { content: "\2693\fe0e"; /* anchor */ }
.unitList .inanimate.inactive::after { content: "\2298\fe0e\2693\fe0e"; /* both */ }
.unitList .blocking::after { content: "\2612\fe0e"; /* [X] */ }
.unitList .blocking.inactive::after { content: "\2298\fe0e\2612\fe0e"; /* (/)[X] */ }

div.oauthbar:hover {
 border-style: inset;
 background-color: rgba(255, 255, 255, 0.75);
}

div.oauthgrid a, div.oauthbox a {
 color: black;
 flex: 1 1 auto;
}

a.oauth {
 color: black;
 float: left;
}

img.oauth {
 height: 1em;
 margin-right: 1ex;
 vertical-align: text-top;
 margin: 1ex;
 border: 2px groove currentColor;
 border-radius: 1ex;
 padding: 0.5ex;
 height: 32px;
 background-color: rgba(245, 245, 245, 0.5);
 display: inline-block;
}

img.oauth:hover {
 border-style: inset;
 background-color: rgba(255, 255, 255, 0.75);
}

div.oauthbar a {
 color: black;
}

td.groove {
 border-left: 2px groove;
 padding-left: 1em;
}

.pl1em { padding-left: 1em; }
.pr1em { padding-right: 1em; }

div.titleSpace {
 width: 16pt;
}

.portrait {
 height: fit-content;
 width: fit-content;
 position: absolute;
 z-index: 8200;
 right: 38px;
 bottom: 1em; /* These will change over time anyway. */
 border-radius: 1em;
 border: 4px gold ridge;
 background-image: url('/assets/abstract-ancient-antique-235985.jpg');
 background-position: cover;
 display: table; /* FF does the wrong thing if this is "block" */
 padding: 1ex;
 transition: all 500ms linear;
 opacity: 0;
 pointer-events: none;
 display: flex;
 flex-flow: column nowrap;
 align-items: center;
}

.portrait figcaption {
 text-align: center;
 background-color: rgba(255, 255, 255, 0.5);
 border-radius: 0.5ex;
 margin-top: 1ex;
 width: 100%;
}

/* I hate using !important but this is a case where it's mandatory. */
.hidden {
 display: none !important;
 visibility: hidden !important;
}

div.overlay {
 background-color: rgba(255, 255, 255, 0.75);
 height: 100vh;
 width: 100vw;
 left: 0;
 top: 0;
 position: fixed;
 z-index: 9997;
 outline: none;
}

::backdrop {
 background-color: rgba(255, 255, 255, 0.75);
}

div.fsmenu {
 align-items: flex-start;
 background-color: rgba(0, 0, 0, 0.25);
 border-radius: 1em;
 border: 3px ridge;
 bottom: 1em;
 box-shadow: 3px 3px 6px black;
 color: black;
 display: flex;
 flex-flow: row wrap;
 font-size: 18pt;
 justify-content: stretch;
 left: 1em;
 outline: none;
 overflow: auto;
 position: fixed;
 right: 1em;
 text-align: left;
 top: 1em;
 z-index: 9998;
}

div.fsm-col {
 flex: 1 0 auto;
}

div.fsm-col:first-child {
 flex: 0 0 auto;
 min-width: 10em;
}

div.fsm-group {
 margin: 0.5em;
 background-color: rgba(255, 255, 255, 0.25);
 border-radius: 1ex;
 border: 2px ridge;
 padding: 0.5em;
}

div.fsm-gray > div.fsm-group {
 min-width: 15em;
}

div.fsm-group.socbump {
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-around;
 align-items: center;
}

img.closeDialog {
 position: absolute;
 padding: 3px;
 background-color: white;
 cursor: pointer;
 height: 2em;
 border-radius: 1.1em;
 z-index: 9999;
}

img.closefsm {
 position: absolute;
 top: 1ex;
 left: 1ex;
 padding: 3px;
 background-color: white;
 cursor: pointer;
 height: 2em;
 border-radius: 1.1em;
 z-index: 9999;
}

img.closer {
 position: absolute;
 top: -1ex;
 left: -1ex;
 padding: 3px;
 background-color: white;
 cursor: pointer;
 height: 2em;
 border-radius: 1.1em;
}

div.fsmenu a {
 text-decoration: underline;
}

.bannerOuter {
 position: fixed;
 top: 0;
 left: 0;
 font-weight: bold;
 overflow: hidden;
 z-index: 9999;
 font-size: 14pt;
 transition-property: opacity;
 transition-duration: 2s;
 opacity: 1;
 pointer-events: none;
}

.bannerInner {
 position: relative;
 top: 25%;
 background-color: rgba(128, 80, 128, 0.75);
 padding: 0.5ex 6em;
 box-shadow: black 4px 4px 4px;
 color: whitesmoke;
 pointer-events: auto;
}

table.cfw {
 position: relative;
 margin: 0 auto 1em auto;
}

.prohead {
 background-color: rgba(255, 255, 187, 0.75);
 font-style: italic;
 text-align: center;
 padding: 0.5ex;
}

.prohead + div {
 padding: 1ex;
 border-top: 3px groove;
}

.tr-1m {
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
}

.br-1m {
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
}

@keyframes colorchange {
 0% { color: darkgreen; }
 100% {
  color: black;
  text-shadow: 0 0 12px gold;
 }
}

.clear { clear: both; }

div.forumPostEntry {
 padding: 1ex;
 border: 1px ridge gray;
 background-color: rgba(255,255,255,0.5);
}

.flexright {
 align-self: right;
 flex: 1 0 auto;
}

.top-sticky {
 position: sticky;
 top: 3em;
}

.l0 { float: left; }
.r0 { float: right; }

div.openable h3 {
 cursor: pointer;
}

div.openable > h3::before {
 /* font-family: 'Zapf Dingbats'; */
 content:'\25b6\fe0e\00a0'; /* right isosceles triangle */
}

div.openable.open > h3::before {
 /* font-family: 'Zapf Dingbats'; */
 content:'\25bc\fe0e\00a0'; /* down isosceles triangle */
}

div.openable > * {
 display: none;
}

div.openable > h3 {
 display: unset;
}

div.openable.open > * {
 display: block;
}

body.license blockquote {
 border-radius: 1ex;
 border: 1px inset;
 padding: 0 1em;
 background-color: rgba(255, 255, 255, 0.25);
}

/* light dark toggle handle */ /*
div.ldth {
 transition: left 0.5s ease, background-color 0.5s ease;
 position: relative;
 margin: 3px 4px;
 height: 15px;
 width: 15px;
 border-radius: 10px;
 border: 1px outset #202020;
 background-color: yellow;
 overflow: hidden;
 z-index: 810;
 content: '';
 left: 0;
 top: 0;
} */

/* light dark */ /*
div.ldt {
 background-size: 100%;
 height: 24px;
 width: 40px;
 margin: 2px;
 border-radius: 16px;
 background-image: linear-gradient(33.7deg, red, yellow);
 display: inline-block;
 position: relative;
 z-index: 800;
 content: '';
 border: 3px inset black;
}

div.ldt::before {
 border-radius: inherit;
 background-image: linear-gradient(33.7deg, black, blue);
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 z-index: 0;
 transition: opacity 0.5s ease-in;
}

div.ldt.darken::before {
 opacity: 1;
}

div.ldt.darken div.ldth {
 background-color: black;
 border-color: silver;
 left: 16px;
}

div.ldscreen {
 position: fixed;
 top: 0;
 left: 0;
 z-index: -100;
 width: 100vw;
 height: 100vh;
 background-color: rgba(255, 255, 255, 0.75);
}

.dark div.popup.visible { background-color: rgba(16, 16, 16, 0.75); }
*/

div.oauthbar { font-family: var(--sans-fonts); }

.transparent { opacity: 0; }

.mlr-025ex {
 margin-left: 0.25ex;
 margin-right: 0.25ex;
}

div.zerozero {
 height: 0;
 width: 0;
 overflow: hidden;
 margin: 0;
 padding: 0;
}

div.connectedUsers {
 border-bottom-left-radius: 1ex;
 background-attachment: fixed;
 border-left: 3px outset;
 border-bottom: 3px outset;
 padding: 1em;
 opacity: 1;
 transition: all linear 250ms;
 text-align: left;
 top: 29pt; /* chrome wants 29, ff wants 32 */
 right: 0;
 background-image: url('/assets/paper-1809412.jpg');
 opacity: 1;
 z-index: 9000;
}

div.connectedUsers.zerozero {
 margin: 0;
 padding: 0;
 border-left: 3px solid transparent;
 border-bottom: 3px solid transparent;
 pointer-events: none;
 opacity: 0;
}

div.vrholder {
 display: flex;
 flex-flow: row nowrap;
 justify-content: center;
 pointer-events: none;
}

div.vrholder > * {
 pointer-events: all;
}

span.displayName {
 font-family: 'NK 124', sans-serif;
 font-weight: bold;
 font-size: larger;
 color: #004000;
 text-shadow: 2px 2px 2px gray;
}

svg.shadow { filter: drop-shadow(2px 2px 4px black); }
svg.deepShadow { filter: drop-shadow(4px 4px 8px black); }

.vrstyle {
 color: #004000;
 font-weight: bold;
 font-family: 'NK 124', sans-serif;
 text-shadow: 2px 2px 2px gray;
}

.plainstyle {
 font-family: var(--sans-fonts);
 color: black;
 font-weight: normal;
 text-shadow: 2px 2px 2px gray;
}

.va-s { vertical-align: super; }

.cookiePrompt {
 z-index: 8851;
 border: 3px ridge;
 padding: 1ex;
 box-shadow: 5px 5px 5px;
 border-radius: 5px;
 width: 25%;
 background: rgba(240, 240, 240, 0.9);
 position: absolute;
 left: 37.5%;
 right: 37.5%;
 bottom: 5ex;
 font-size: 10pt;
 text-align: center;
 transition: opacity 0.5s linear;
}

.annoyDiv {
 z-index: 8850;
 border: 3px ridge;
 padding: 1ex;
 box-shadow: 5px 5px 5px;
 border-radius: 5px;
 width: 15em;
 background: rgba(240, 240, 240, 0.9);
 position: absolute;
 left: calc(50vw - 7.5em);
 bottom: 5ex;
 font-size: 10pt;
 text-align: center;
}

button.dirBtn {
 padding-top: 2px;
 padding-bottom: 2px;
}

div.dirControls {
 display: flex;
 flex-flow: row nowrap;
 justify-content: space-between;
 text-align: center;
}

table.dirControls {
 position: absolute;
 z-index: 5000;
}

.dirControls table {
 flex: 0 0 auto;
 border: 1px inset;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.25);
}

.liveVH {
 height: calc(75vh - 1.5ex);
 width: calc(100vw - 2ex);
}

.wide-2ex {
 min-width: 4em;
 min-height: 4em;
 width: calc(100vw - 2ex);
}

.chatHelp {
 border-left: 3px ridge gray;
 padding-left: 1ex;
}

.chatHelp code {
 border-radius: 1ex;
 padding: 0 2px;
 line-height: 1.4;
 border: 1px outset;
 background-color: rgba(255, 255, 255, 0.25);
 white-space: nowrap;
}

span.name {
 white-space: nowrap;
}

.pe-n { pointer-events: none; }
.lh-1-5 { line-height: 1.5; }

.filter {
 background-color: white;
 background: url('/assets/fonts/Font-Awesome/svgs/solid/filter.svg') white 1px 1px no-repeat scroll;
 padding-left: 1.75em;
 max-width: unset;
}

.toolholder {
 padding: 4px;
}

input.toolradio {
 display: none;
}

.toolicon {
 line-height: 0;
 border-radius: 1ex;
 border-style: outset;
 cursor: pointer;
}

input:checked + span.toolicon {
 border: inset 3px lightgray;
 background-color: rgba(0, 0, 0, 0.25);
}

.toolicon > :first-child {
 width: 60px;
 height: 60px;
}

img.tokenFilter {
 width: 1em;
 vertical-align: middle;
}

.closed {
 max-height: 0;
 overflow: hidden;
 height: 0;
 padding: 0;
 width: 0;
 max-width: 0;
 border-color: transparent;
}

fieldset.closed {
 width: auto;
 max-width: auto;
 border-color: ThreeDLightShadow;
}

.coordText {
 pointer-events: none;
 text-align: center;
 position: absolute;
 color: black;
 text-shadow: 1px 1px 2px white, -1px -1px 2px black;
}

div.indexTop {
 border-bottom: 3px ridge;
 box-shadow: 2px 2px 2px black;
 height: 32pt;
 width: 100vw;
 position: fixed;
 top: 0;
 left: 0;
}

div.indexTop button {
 padding: 3px;
}

div.indexTop img {
 height: 1.5em;
 width: 1.5em;
}

div.indexTop > * {
 flex: 0 0 auto;
}

div.indexTop > div {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
}

div.indexTop > .vrholder {
 flex: 1 0 auto;
}

.indexMiddle {
 overflow: auto;
 height: calc(100vh - 46pt);
 margin-top: 34pt;
}

body.about .indexMiddle {
 padding-left: 1em;
 padding-right: 1em;
}

div.fade {
 overflow: hidden auto;
 height: calc(100vh - 44pt);
 width: 100%;
 background-color: rgba(255, 255, 255, 0.875);
 margin-top: 32pt;
 margin-bottom: 12pt;
}

.menuIcon.wham, .wham { border: 3px inset currentColor; }

.wham:hover { background-image: linear-gradient(to bottom, #eaf6fd 0%, #a7d8f5 100%); }

button.cta {
 margin: 0 1em;
 padding: 2px 1ex;
 font-weight: bold;
 border-color: black;
 font-family: 'NK 124', sans-serif;
 color: #004000;
}

.blurb {
 position: relative;
 font-size: xx-large;
 margin: auto;
 text-align: center;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
}

.blurb > * {
 margin: 1em;
}

.blurb img {
 width: calc(100% - 2em);
 max-width: 50vw;
 max-height: 33vw;
 border-radius: 1ex;
 box-shadow: 2px 2px 2px black;
}

div.blurb button.cta {
 margin: 0;
}

div.blab {
 width: calc(33% - 2em);
 padding: 1em;
 margin: 1em;
 background-image: linear-gradient(to bottom, whitesmoke 50%, transparent 100%);
 border-top-left-radius: 1em;
 border-top-right-radius: 1em;
}

.blab h2 {
 text-align: center;
}

.blab .nk124 {
 font-weight: bold;
}

.fadedown {
 background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.67) 100%);
}

.fadeup {
 background-image: linear-gradient(rgba(255,255,255,0.67) 0%, rgba(255,255,255,0) 100%);
}

div.whywait {
 border: 1px outset;
 border-radius: 1ex;
 padding: 1ex 2em;
 box-shadow: 2px 2px 2px black;
 background-color: rgba(255, 255, 255, 0.5);
}

div.inter {
 font-size: x-large;
 text-align: center;
 padding: 3px;
 font-weight: 600;
}

div.inter > * {
 flex: 1 0 auto;
 background-image: url('ribbon-center.svg');
 height: 76px;
 padding-top: 30px;
 background-size: auto 100%;
}

div.inter > :first-child, div.inter > :last-child {
 flex: 0 0 auto;
 width: 150px;
 padding-top: none;
}

div.inter img {
 margin-left: 2em;
 margin-right: 2em;
 height: 1.5em;
}

div.inter > :first-child { background-image: url('ribbon-left.svg'); }
div.inter > :last-child { background-image: url('ribbon-right.svg'); }

.paper { background-image: url('/assets/paper-1809412.jpg'); }
.linenpaper { background-image: url('/assets/linenpaper.jpg'); }

.unit-draggable {
 cursor: move;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.zoomLock {
 text-align: center;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 height: 15em;
 margin: auto;
 color: white;
 text-shadow: 0 0 4px black;
 font-weight: 900;
 background-color: rgba(0,0,0,0.375);
 width: 35em;
 padding: 1em;
 border-radius: 1em;
 border: ridge;
 box-shadow: 2px 2px 4px black;
 opacity: 0;
 pointer-events: none;
 line-height: 2;
 z-index: 9999;
}

img.zoomImg {
 height: 1em;
 background-color: rgba(255,255,255,0.5);
 border-radius: 1ex;
 vertical-align: middle;
 padding: 0.5ex;
 border: 2px outset;
}

.zoomLock kbd {
 height: 1em;
 width: 1em;
 text-align: center;
 padding: 5px 5px 2px;
 border: 3px outset;
 background: grey;
 border-radius: 0.75ex;
 background-image: linear-gradient(to bottom, #f2f2f2 0%, #cfcfcf 100%);
 display: inline;
 color: black;
 text-shadow: 1px 1px 1px white;
 box-shadow: 1px 1px 1px black;
}

@keyframes zoomLockVisible {
 0% { opacity: 1; } 
 100% { opacity: 0; } 
}

input[disabled] + label {
 color: #707070;
 font-style: italic;
}

kbd {
 background-color: gray;
 border-radius: 0.5ex;
 border: 1px solid;
 box-shadow: 2px 2px 2px black;
 font-weight: 600;
 padding: 2px 4px;
 white-space: nowrap;
}

code b {
 text-shadow: 0 0 0.5px gray;
}

div.loginbox {
 height: 0;
 transition: all 250ms linear;
 box-shadow: 3px 3px 2px transparent;
 overflow: hidden;
 border-radius: 0 0 1em 1em;
 z-index: 9999;
 right: 0;
 top: 30pt;
 position: absolute;
 background-image: url('/assets/paper-1809412.jpg');
 background-attachment: fixed;
 opacity: 0;
}

div.loginbox.visible {
 box-shadow: 3px 3px 2px black;
 height: max-content;
 overflow: auto;
 max-height: 75vh;
 text-align: center;
 align-content: center;
 opacity: 1;
}

div.loginbox fieldset {
 margin: 1ex;
 text-align: center;
 width: calc(100% - 2ex);
}

@media only screen and (max-width: 320px) {
 .min320 { display: none !important; }

 .popHolder {
  height: calc(100vh - 45pt);
  width: calc(100vw - 40px);
  right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 0;
 }

 div.popup.visible {
  width: calc(100vw - 40px);
 }
}

@media only screen and (max-width: 640px) {
 .min640 { display: none !important; }
 .virtuarasa a {
  font-size: 18pt;
 }
}

@media only screen and (max-width: 848px) {
 .min848 { display: none !important; }
}

@media only screen and (min-width: 321px) {
 .max320 { display: none !important; }
}

@media only screen and (min-width: 900px) {
 .blurb {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
 }
}

@media only screen and (orientation: landscape) {
 body.chat div.prevChats {
  padding-right: 1ex;
  border-right: 3px solid gray;
  float: left;
  width: calc(100vw - 3ex - 263px);
  height: calc(100vh - 3em);
  padding-bottom: 3ex;
 }
}

.grabbing { cursor: grabbing; }
input.ucInitTotal { width: 3em; }

div.indexTop .loginButtons button, .loginButtons button {
 padding-left: 1ex;
 padding-right: 1ex;
 text-shadow: 1px 1px 1px white;
 background-image: unset;
 background-color: whitesmoke;
 border-width: 4px;
 font-size: 13pt;
 /* box-shadow: 0 0 3px gold;
 animation: throbShadow 3s infinite 2s; */
}

/* @keyframes throbShadow {
 0%, 100% {
  box-shadow: 0 0 6px gold;
 }
 50% {
  box-shadow: 0 0 0 gold;
 }
} */

.socketLED {
 position: absolute;
 bottom: -3px;
 left: 2px;
 color: #00ff00;
}

.copyMsg {
 position: absolute;
 pointer-events: none;
 opacity: 0;
 font-weight: bold;
 color: forestgreen;
 text-shadow: 1px 1px 1px white;
 padding: 1ex;
}

.iconDisplay {
 background-size: contain;
 background-position: center;
 background-repeat: no-repeat;
 height: 4em;
 width: 4em;
}

.fsAuras {
 max-height: 6em;
 overflow: auto;
}

.fsAuras input[type="color"] {
 width: 2em;
 height: 1.5em;
 padding: 3px;
}

.sudStatus div:nth-child(odd),
.fsAuras tr:nth-child(even) {
 background-color: #e0e0e0;
}

.fsAuras tr.newAura { border-top: 2px groove; }
.fsAuras tr.newAura:first-child { border-top: none; }

.fsAuras img.emoji {
 vertical-align: middle;
 width: 1em;
}

.sudStatus div {
 padding: 0 3px;
}

.setUnitData button {
 padding: 3px;
}

.setUnitData .fsAuras button {
 padding: 1px 4px;
}

.iconDisplay {
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;
}

.filednd {
 margin: 30px;
 padding: 2em;
 border-radius: 1em;
 border: 1px dotted grey;
}

.diceroll {
 border: 2px inset;
 box-shadow: -1px -1px 2px black;
 border-radius: 3px;
 line-height: 1.5;
 padding: 0 2px;
 margin: 0 4px;
}

.diceroll .struck {
 text-decoration: line-through;
 background-color: #b0b0b0;
 padding: 0 2px;
 color: white;
}

.altitude {
 position: absolute;
 border: 1px outset;
 right: -1ex;
 text-shadow: 0.5px 0.5px 1px white, -0.5px -0.5px 1px black;
 font-size: small;
 border-radius: 50%;
 height: 1em;
 top: calc(100% - 1em);
 bottom: 0;
 line-height: 1;
 padding: 3px;
}

.outstanding::after {
 display: inline;
 content: '\00a0(still sending\2026\fe0e)';
 color: red;
 font-size: xx-small;
}
.localChat { color: darkgray; }

.dialogContent {
 outline: none;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 max-height: 80vh;
 max-width: 80vw;
 z-index: 9998;
 overflow: visible; /* hopefully these don't get too big */
 width: fit-content;
 height: fit-content;
 border: 3px ridge;
 box-shadow: 2px 2px 4px black;
 padding: 1ex;
 border-radius: 1em;
 background-color: rgba(255, 255, 255, 0.75);
}

.dialogContent dt { font-weight: bold; }

div.dialogContent.error {
 text-align: center;
 font-weight: bold;
 color: red;
 top: 5em;
 bottom: unset;
}

div.realDialogContent {
 overflow: auto;
 max-height: calc(60vh - 16px);
 max-width: 80vw;
}

.uploadError {
 color: red;
 font-style: italic;
 font-size: x-small;
 text-align: center;
}

.canvasBackground {
 position: absolute;
 top: 0;
 left: 0;
}

.chattext { transition: var(--transition); }

.diceBox {
 max-width: 0;
 max-height: 0;
 overflow: hidden;
 transition: all 250ms ease-in-out;
}

.wham + .diceBox {
 max-height: 100%;
 max-width: 100%;
 overflow: auto;
 flex: 1 0 auto;
 width: min-content;
}

.rollLink {
 color: blue;
 cursor: pointer;
}

.rollLink:hover { text-decoration: underline; }

.tm::after {
 display: inline-block;
 content: '\2122\fe0e';
 font-family: var(--sans-fonts);
 text-shadow: none;
 font-size: smaller;
 position: relative;
 top: -8px;
 font-weight: 400;
}

.tag {
 padding: 0 3px;
 border-radius: var(--big-radius);
 background-color: rgba(255, 255, 255, 0.25);
 font-weight: bold;
}

.progressbar {
 position: absolute;
 top: 0;
 left: 0;
}

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

.noSpin[type="number"] {
 appearance: textfield;
}