/*
 * Client-only (in-world) styles. Single file, showbox skin.
 * Merged from the old per-component imports; dead web-header + NFT-notification
 * styles were dropped. See old-client.less for the original pile.
 */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  -webkit-transition:
    -webkit-transform 0.3s ease-out,
    opacity 0.3s ease-in;
  -moz-transition:
    -moz-transform 0.3s ease-out,
    opacity 0.3s ease-in;
  -o-transition:
    -o-transform 0.3s ease-out,
    opacity 0.3s ease-in;
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
  /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
  -webkit-transition:
    -webkit-stroke-dashoffset 0.3s ease-out,
    -webkit-stroke-opacity 0.3s ease-in;
  -moz-transition:
    -moz-stroke-dashoffset 0.3s ease-out,
    -moz-stroke-opacity 0.3s ease-in;
  -o-transition:
    -o-stroke-dashoffset 0.3s ease-out,
    -o-stroke-opacity 0.3s ease-in;
  transition:
    stroke-dashoffset 0.3s ease-out,
    stroke-opacity 0.3s ease-in;
}

.WalletInfo {
  display: flex;
  /* send eth or erc20 button */
}
.WalletInfo div.info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.WalletInfo div.info div.name {
  min-height: 2rem;
}
.WalletInfo div.wallet-actions {
  display: flex;
}
.WalletInfo div.wallet-actions a.sendButton {
  padding: 8px 8px;
}
.WalletInfo div.wallet-actions a.sendButton i {
  padding: 0;
}
/* The switch - the box around the slider */
div.ToggleSwitch {
  display: flex;
  align-items: center;
  font-size: larger;
  margin: 5px;
}
div.ToggleSwitch .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  margin-right: 4px;
  /* The slider */
}
div.ToggleSwitch .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
div.ToggleSwitch .switch input:checked + .slider {
  background-color: #2196f3;
}
div.ToggleSwitch .switch input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
div.ToggleSwitch .switch input:checked + .slider:before {
  transform: translateX(24px);
}
div.ToggleSwitch .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
div.ToggleSwitch .switch .slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
div.ToggleSwitch .switch .slider.round {
  border-radius: 24px;
}
div.ToggleSwitch .switch .slider.round:before {
  border-radius: 50%;
}
div.ToggleSwitch .tooltip.-noFixed {
  position: unset;
  min-width: 70px;
}
div.Carousel {
  min-height: 100px;
  overflow: hidden;
  position: relative;
}
div.Carousel label {
  z-index: 1;
  position: absolute;
  font-size: 12px;
  top: 30%;
  border: 1px solid #aaa;
  color: #aaa;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  background-color: #eee;
  -webkit-transition: opacity 0.7s 0.4s;
  transition: opacity 0.7s 0.4s;
}
div.Carousel label:hover {
  background-color: #4c056a;
  color: #fff;
  border: 1px solid #000;
}
div.Carousel label:nth-child(3) {
  right: 0;
}
div.Carousel div.carousel-container {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  height: fit-content;
  margin-right: 28px;
  margin-left: 28px;
}
div.Carousel div.carousel-container::-webkit-scrollbar {
  display: none;
}
/**
  Small component that has two states: normal: show the wallet; edit: let's a user edit the content.
*/
.WalletBoxes .ScrollPane {
  max-height: 40vh;
}
.WalletBoxes button {
  cursor: pointer;
  margin: 0 2px;
}
.WalletBoxes .wallet-box {
  margin: 2px 0;
}
.WalletBoxes .wallet-box div.wallet-container {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.WalletBoxes .wallet-box div.wallet-container > div {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.WalletBoxes .wallet-box div.wallet-container > div,
.WalletBoxes .wallet-box div.wallet-container input[type='text'] {
  flex: 1;
}
.WalletBoxes.-web input[type='text'] {
  margin: 1px;
}
.CollectibleSelector {
  cursor: pointer;
  min-height: 52px;
  position: relative;
}
.CollectibleSelector ul {
  border: 1px solid #ccc;
  position: absolute;
  background: #f7f7f7;
  left: 0;
  top: 0;
  right: 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  min-height: 32px;
  max-height: 304px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 0 16px 0;
  padding: 0;
  z-index: 1;
}
.CollectibleSelector .select {
  padding: 8px;
  font-size: small;
  color: #aaa;
}
.CollectibleSelector li {
  list-style: none;
  clear: both;
  height: 2rem !important;
  overflow: hidden;
  margin: 0;
  padding: 4px;
}
.CollectibleSelector li img {
  width: 32px;
  float: left;
  margin-right: 4px;
}
.CollectibleSelector li > div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.CollectibleSelector li small {
  display: block;
  text-overflow: ellipsis;
  color: #333;
  white-space: nowrap;
  height: 1rem;
  overflow: hidden;
}
.CollectibleSelector li:hover {
  background: #b9b9b9;
}
.CollectibleSelector li:first-of-type {
  background: #fdfdfd;
  padding: 0;
}
.CollectibleSelector li:first-of-type > input[type='text'] {
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: black;
}
.CollectibleSelector li:first-of-type > input[type='text']:focus-visible,
.CollectibleSelector li:first-of-type > input[type='text'] :focus,
.CollectibleSelector li:first-of-type > input[type='text'] :focus-within {
  border: none;
  outline: none;
}
.CollectibleSelector.closed li {
  display: none;
}
.CollectibleSelector.closed li.selected {
  display: block;
  line-height: 32px;
  padding-left: 16px;
}
.GiftCollectible {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;
}
.GiftCollectible > * {
  margin: 4px 0;
}
.GiftCollectible form {
  display: flex;
}
.GiftCollectible form > div {
  flex: 2;
}
.GiftCollectible form > div label {
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.GiftCollectible form > div .Progressbar {
  margin-bottom: 0.25rem;
}
.GiftCollectible form > div > input[type='text'] {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 4px 0;
  font-size: larger;
  padding: 0;
}
.GiftCollectible form > div:last-of-type {
  margin-left: 3px;
}
.GiftCollectible .GiftCollectibleConfirm img {
  width: 52px;
  float: left;
  margin-right: 4px;
}
.GiftCollectible .GiftCollectibleConfirm > div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.GiftCollectible .GiftCollectibleConfirm small {
  display: block;
  text-overflow: ellipsis;
  color: #aaa;
  white-space: nowrap;
  height: 1rem;
  overflow: hidden;
}
ul.HorizontalTabPanel {
  padding: 0;
  margin: 0;
  font-size: smaller !important;
  /*Ben's changes in his rampage*/
}
ul.HorizontalTabPanel * {
  margin: 0;
  padding: 0;
}
ul.HorizontalTabPanel a {
  color: inherit;
  background-color: unset;
}
ul.HorizontalTabPanel li + li {
  margin-left: 6px;
}
ul.HorizontalTabPanel li {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 10px !important;
  border-radius: 4px;
}
ul.HorizontalTabPanel li.-active > h5 {
  text-decoration: underline;
}
ul.HorizontalTabPanel.-avatar-profile li {
  color: #555;
  border: 1px solid #777;
}
ul.HorizontalTabPanel.-avatar-profile li h5 {
  color: black;
}
ul.HorizontalTabPanel.-avatar-profile li:hover {
  background-color: #efefef;
}
ul.HorizontalTabPanel.-avatar-profile li.-active > h5 {
  color: black;
}
div.CollapsibleComponent > header {
  cursor: pointer;
  padding: 4px;
}
div.CollapsibleComponent > header:hover {
  background-color: #f1f1f1;
}
div.CollapsibleComponent > header:after {
  content: '˄';
  font-size: 13px;
  float: right;
  margin-left: 5px;
}
div.CollapsibleComponent > header.-open {
  background-color: #f1f1f1;
}
div.CollapsibleComponent > header.-open:after {
  content: '˅';
}
div.CollapsibleComponent > div.CollapsibleContent {
  padding: 0 0 0 4px;
}
div.CollapsibleComponent div.CollapsibleContent {
  height: 0;
  overflow: hidden;
  transition: height 2s ease-in-out;
  -webkit-transition: height 2s ease-in-out;
  -moz-transition: height 2s ease-in-out;
  -ms-transition: height 2s ease-in-out;
}
div.CollapsibleComponent div.CollapsibleContent.-open {
  height: auto;
}
div.CollapsibleComponent.-report-table {
  border: 2px solid #e9e9e9;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.SendERC20Window p {
  margin-top: 0;
}
.SendERC20Window form div.currency-selection {
  display: flex;
}
.SendERC20Window form div.currency-selection > * {
  padding: 0 1px;
}
.SendERC20Window form input[type='text'] {
  width: 100%;
}
/* Snackbar */
.SnackbarsContainer {
  position: absolute;
  z-index: 12001;
  min-width: 33vw;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0px);
  pointer-events: none;
}
.snackbar {
  visibility: hidden;
  width: 100%;
}
.snackbar.show {
  visibility: visible;
}
.snackbar.clickable {
  pointer-events: none;
  cursor: pointer;
}
.snackbar .panel {
  background-color: #333;
  border-radius: 0.2rem;
  padding: 0.75rem;
  border: 1px solid #444;
  box-shadow: 0 1px 4px 0 #444;
  text-shadow: 1px 1px 2px #111;
}
.snackbar .panel.is-info {
  margin: 0.125rem 0;
  background-color: #333;
}
.snackbar .panel.is-success {
  background-color: #333;
}
.snackbar .panel.is-warning {
  background: #feaa00;
}
.snackbar .panel.is-danger {
  background: #d01a00;
}
.snackbar .panel.is-help {
  background-color: #333;
}
section.events .event-item {
  width: 20vw;
  padding-right: 2rem;
}
section.events h3 {
  width: 100vw;
  font-size: 1em;
}
.event-showcase {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5em;
}
.event-showcase h4 {
  margin: 0 0 0.5rem 0;
  padding: 0;
  border-bottom: 1px solid #55278c;
}
.event-showcase .event-item {
  margin-bottom: 1rem;
  max-width: 30rem;
}
.event-showcase .event-item .header {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-showcase .event-item .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-showcase .event-item .description .see-more {
  text-align: right;
}
.event-showcase .event-item .summary {
  color: var(--small);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: x-small;
}
.event-showcase .event-item .summary .host,
.event-showcase .event-item .summary .venue {
  font-style: italic;
}
.events {
  margin-bottom: 3rem;
}
.parcel-event-panel {
  border-bottom: 1px solid #ddd;
}
.parcel-event-panel .event-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.parcel-event-panel .content {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.parcel-event-panel .content .event-item {
  flex: 1 1 auto;
}
.parcel-event-panel .content .event-item > div {
  margin-bottom: 1rem;
}
.parcel-event-panel .content .event-item .event-time {
  flex: 0 0 95px;
  text-align: center;
}
.parcel-event-panel .content .event-item .event-time > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 85px;
  border: 1px solid #79148d;
}
.parcel-event-panel .content .event-item .event-time .first {
  flex: 1 0 1rem;
  background: #9218ab;
  text-shadow: 1px 1px #79148d;
  border-color: #79148d;
  border-width: 1px;
}
.parcel-event-panel .content .event-item .event-time .middle {
  flex-basis: 3rem;
  line-height: 3rem;
  font-size: 2rem;
}
.parcel-event-panel .content .event-item .event-time .last {
  padding: 0 0.5rem 0.25rem 0.5rem;
}
.parcel-event-panel .content .event-item .event-time .live-now {
  font-size: 2rem;
}
.parcel-event-panel .content .event-item .event-time.current .first {
  background: #55278c;
  text-shadow: 1px 1px #210e33;
  border-color: #210e33;
}
.parcel-event-panel .content .event-item .event-time.past .first {
  background: #adadad;
  text-shadow: 1px 1px #a9a9a9;
  border-color: #a9a9a9;
}
.parcel-event-panel .content .event-item .event-time .add-to-calendar {
  padding-top: 0.5rem;
  font-size: smaller;
}
.parcel-event-panel .content .event-item .location {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.parcel-event-panel .content .event-item .event-body {
  display: flex;
  column-gap: 0.5rem;
}
.parcel-event-panel .content .event-item .event-body .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1rem;
}
.parcel-event-panel .content .event-item .event-body .countdown {
  margin-top: 1rem;
}
.parcel-event-panel .content .preview {
  flex: 1 1 320px;
  border: 1px solid #ddd;
}
.event-page iframe {
  /* sizing mixin */
  min-width: calc(min(100%, 80vh, 1024px));
  aspect-ratio: 3/4;
  max-height: 60vh;
  border: none;
  outline: none;
}
.event-page .content {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.event-page .content .event-item {
  flex: 1 1 auto;
  max-width: 32rem;
}
.event-page .content .event-item > div {
  margin-bottom: 1rem;
}
.event-page .content .event-item .event-body {
  display: flex;
  column-gap: 0.5rem;
}
.event-page .content .event-item .event-body .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1rem;
}
.event-page .content .event-item .event-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem;
}
.event-page .content .event-item .event-footer .event-actions {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.event-page .content .event-item .event-footer .summary {
  flex: 1;
}
.event-page .content .event-item .event-footer .admin {
  flex-basis: 100%;
  display: flex;
  gap: 1rem;
  justify-content: end;
}
.event-page .content .preview {
  flex: 1 1 320px;
  border: 1px solid #ddd;
}
.OverlayWindow .event-body {
  padding-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
}
.OverlayWindow .event-body .event-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 45rem;
}
.OverlayWindow .event-body .event-description .meta {
  margin-top: 0.5rem;
}
.OverlayWindow .event-body .event-time {
  flex: 0 0 95px;
  text-align: center;
  flex: 0 0 120px;
}
.OverlayWindow .event-body .event-time > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 85px;
  border: 1px solid #79148d;
}
.OverlayWindow .event-body .event-time .first {
  flex: 1 0 1rem;
  background: #9218ab;
  text-shadow: 1px 1px #79148d;
  border-color: #79148d;
  border-width: 1px;
}
.OverlayWindow .event-body .event-time .middle {
  flex-basis: 3rem;
  line-height: 3rem;
  font-size: 2rem;
}
.OverlayWindow .event-body .event-time .last {
  padding: 0 0.5rem 0.25rem 0.5rem;
}
.OverlayWindow .event-body .event-time .live-now {
  font-size: 2rem;
}
.OverlayWindow .event-body .event-time.current .first {
  background: #55278c;
  text-shadow: 1px 1px #210e33;
  border-color: #210e33;
}
.OverlayWindow .event-body .event-time.past .first {
  background: #adadad;
  text-shadow: 1px 1px #a9a9a9;
  border-color: #a9a9a9;
}
.OverlayWindow .event-body .event-time .add-to-calendar {
  padding-top: 0.5rem;
  font-size: smaller;
}
.OverlayWindow .event-body .event-time > a > div,
.OverlayWindow .event-body .event-time > div {
  border-color: #0e0e0e;
}
.OverlayWindow .event-body .event-time .first {
  border-color: #021502;
}
.EventRow {
  position: relative;
  margin: 10px auto;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
  display: flex;
  max-height: 135px;
}
.EventRow > aside {
  margin-right: 8px;
}
.EventRow > aside div.userCount {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #3d2f5fbf;
}
.EventRow > aside img {
  width: 180px;
  height: 135px;
}
.EventRow > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.EventRow > div > header {
  display: flex;
  justify-content: space-between;
}
.EventRow > div > header div.event {
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  max-width: 45rem;
}
.EventRow > div > header div.user {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right;
}
.EventRow > div > header div + div {
  margin-left: 4px;
}
.EventRow > div div.eventDescription {
  line-height: 1.3;
  margin: 5px 0;
  font-size: 90%;
  white-space: pre-line;
  display: flex;
  flex: 1;
  align-content: center;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 45rem;
}
.historic-events .event-item {
  margin-bottom: 0.5rem;
}
.historic-events .event-header h4 {
  padding: 0;
  margin: 0 0 0.25rem;
}
.historic-events .event-footer {
  display: flex;
  column-gap: 0.25rem;
}
.calTime {
  flex: 0 0 95px;
  text-align: center;
}
.calTime > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 85px;
  border: 1px solid #79148d;
}
.calTime .first {
  flex: 1 0 1rem;
  background: #9218ab;
  text-shadow: 1px 1px #79148d;
  border-color: #79148d;
  border-width: 1px;
}
.calTime .middle {
  flex-basis: 3rem;
  line-height: 3rem;
  font-size: 2rem;
}
.calTime .last {
  padding: 0 0.5rem 0.25rem 0.5rem;
}
.calTime .live-now {
  font-size: 2rem;
}
.calTime.current .first {
  background: #55278c;
  text-shadow: 1px 1px #210e33;
  border-color: #210e33;
}
.calTime.past .first {
  background: #adadad;
  text-shadow: 1px 1px #a9a9a9;
  border-color: #a9a9a9;
}
.calTime .add-to-calendar {
  padding-top: 0.5rem;
  font-size: smaller;
}
.create-event-form .field {
  margin-bottom: 1.5rem;
}
.create-event-form .field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
}
.create-event-form .field .starts-now {
  display: inline;
}
.create-event-form .field .starts-now label {
  display: inline;
}
.create-event-form .field input.name,
.create-event-form .field textarea {
  font-size: 0.85rem;
  width: 33rem;
}
.create-event-form .field.duration div {
  display: flex;
  column-gap: 0.25rem;
  align-items: center;
}
.create-event-form .submit {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.25rem;
  align-items: center;
}
.event-calendar .navigation {
  display: flex;
  justify-content: space-between;
  clear: both;
  margin-top: 0.5rem;
}
.event-readable-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.Form .field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}
.Form .field.TextArea {
  align-items: start;
}
.Form .field label {
  flex: 0 0 5rem;
  display: inline-block;
}
.Form .field input {
  flex: 0;
}
.Form .field input[type='color'],
.Form .field input[type='file'] {
  flex: unset;
}
.Form .field .help {
  color: #999;
}
.Form .submit {
  text-align: right;
}
:root {
  --semi: rgba(13, 13, 13, 0.85);
  --bright: #f5f5f0;
  --dark: #0d0d0d;
  --tinge: #1a1a1a;
}
* {
  touch-action: manipulation;
}
body,
html {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'helvetica neue', sans-serif;
  font-size: 0.85em;
}
body * {
  font-family: inherit;
}
img.blockie {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
a.wallet {
  position: relative;
  padding-left: 1.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
a.wallet .blockie {
  width: 1.5rem;
  position: absolute;
  left: 0;
  top: -0.2rem;
}
input[type='checkbox'] {
  margin-bottom: 2px;
}
section {
  padding: 0 8px;
}
@media only screen and (max-width: 800px) {
  section {
    margin: 0;
    padding: 0 20px;
  }
}
@media only screen and (max-width: 500px) {
  section {
    padding: 0 10px;
  }
}
section section {
  padding: 0;
}
section .columns {
  display: flex;
  flex-direction: column;
}
section .alt-columns {
  display: flex;
  flex-direction: column-reverse;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  section .columns {
    display: flex;
    flex-direction: row;
  }
  section .columns .left-column {
    flex: 1;
    position: relative;
    padding-bottom: 80px;
  }
  section .columns .right-column {
    width: 280px;
    margin-left: 20px;
  }
  section .alt-columns {
    display: flex;
    flex-direction: row;
  }
  section .alt-columns .left-column {
    width: 280px;
    margin-right: 20px;
  }
  section .alt-columns .right-column {
    flex: 1;
    position: relative;
    padding-bottom: 80px;
  }
}
section > video {
  max-width: 100%;
}
section > h1:first-child {
  margin-top: 20px;
}
footer {
  margin-top: 40px;
  padding-top: 20px;
  margin-bottom: 40px;
  text-align: center;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: inherit;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-size: unset;
  }
}
h1 {
  font-size: 1.6em;
  font-weight: normal;
  margin: 0 0 0.4em 0;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  h1 {
    font-size: 2em;
  }
}
h2 {
  font-size: 1em;
  font-weight: bold;
}
h3 {
  font-size: 1.3em;
}
p {
  line-height: 1.5em;
}
.roundedButton {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.roundedButton:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.roundedButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.roundedButton[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
a.RoundedButton,
button.RoundedButton {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
a.RoundedButton:hover,
button.RoundedButton:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
a.RoundedButton[disabled],
button.RoundedButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
a.RoundedButton[disabled]:hover,
button.RoundedButton[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.desktop-only {
  display: none;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .desktop-only {
    display: block;
  }
}
.map-icon {
  width: 15px !important;
  height: 15px !important;
  display: inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.map-icon.sandbox {
  background-image: url(/icons/mapIcons/sandbox_icon.png);
}
.map-icon.gallery {
  background-image: url(/icons/mapIcons/gallery_icon.png);
}
.map-icon.club {
  background-image: url(/icons/mapIcons/club_icon.png);
}
.map-icon.park {
  background-image: url(/icons/mapIcons/park_icon.png);
}
.map-icon.bar {
  background-image: url(/icons/mapIcons/bar_icon.png);
}
.map-icon.theater {
  background-image: url(/icons/mapIcons/theater_icon.png);
}
.map-icon.food {
  background-image: url(/icons/mapIcons/food_icon.png);
}
.map-icon.rest {
  background-image: url(/icons/mapIcons/rest_icon.png);
}
.map-icon.animal {
  background-image: url(/icons/mapIcons/animal_icon.png);
}
.map-icon.education {
  background-image: url(/icons/mapIcons/education_icon.png);
}
.map-icon.library {
  background-image: url(/icons/mapIcons/library_icon.png);
}
.map-icon.sports {
  background-image: url(/icons/mapIcons/sports_icon.png);
}
.map-icon.factory {
  background-image: url(/icons/mapIcons/factory_icon.png);
}
.map-icon.beach {
  background-image: url(/icons/mapIcons/beach_icon.png);
}
.map-icon.teleports {
  background-image: url(/icons/mapIcons/teleports_icon.png);
}
.map-icon.shops {
  background-image: url(/icons/mapIcons/shops_icon.png);
}
.map-icon.scenic {
  background-image: url(/icons/mapIcons/scenic_icon.png);
}
.map-icon.game {
  background-image: url(/icons/mapIcons/game_icon.png);
}
.map-icon.event {
  background-image: url(/icons/mapIcons/event_icon.png);
}
.map-icon.concert {
  background-image: url(/icons/mapIcons/concert_icon.png);
}
.map-icon.music {
  background-image: url(/icons/mapIcons/music_icon.png);
}
.map-icon.sale {
  background-image: url(/icons/mapIcons/sale_icon.png);
}
.map-icon.womp {
  background-image: url(/images/camera-transparent.png);
  transform: scale(1.8);
}
.map-icon.avatar {
  background-image: url(/images/marker.png);
}
.map-icon.money {
  background-image: url(/icons/mapIcons/money_icon.png);
}
/* !important needed here as somehow leaflet forces an element-specific style*/
div.leaflet-marker-icon.MarkersClusters {
  margin-left: -20px !important;
  margin-top: -20px !important;
  width: 40px !important;
  height: 40px !important;
  z-index: 298;
  background-clip: padding-box;
  border-radius: 20px;
}
div.leaflet-marker-icon.MarkersClusters br {
  height: 8px;
}
div.leaflet-marker-icon.MarkersClusters > div {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  border-radius: 15px;
  font: 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
/**
  * Fix popup image size in leaflet map for WOMP cards
  */
div.leaflet-popup-content div.womp a > img {
  max-width: 100%;
  object-fit: contain;
}
/* flex helpers */
.is-flex {
  display: flex;
  flex-direction: row;
}
.is-flex.space-between {
  justify-content: space-between;
}
.is-flex.space-around {
  justify-content: space-around;
}
.flex-column {
  flex-direction: column;
}
.flex-fill {
  flex: 1;
}
.flex-one {
  flex: 1;
}
.flex-two {
  flex: 2;
}
.flex-three {
  flex: 3;
}
.flex-four {
  flex: 4;
}
.flex-col-gap {
  column-gap: 1rem;
}
.flex-row-gap {
  row-gap: 1rem;
}
.parcel-page {
  position: relative;
}
.parcels-details {
  position: relative;
}
.parcels-details a.play-now {
  margin: 0.3rem 0.5rem 0.2rem 0;
}
.parcels-details .row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.parcels-details .pd-a {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  margin-right: 10px;
}
.parcels-details .pd-b {
  flex-grow: 1;
}
.parcels-details .pd-c {
  flex-grow: 1;
  margin-top: 0.5rem;
}
.parcels-details h1 {
  margin: 0;
}
.parcels-details .parcelName-editable:hover {
  border-bottom: 2px solid #424242;
}
.parcels-details .parcelName-editable:focus {
  outline: none;
  border-bottom: 3px solid #383838;
}
.parcels-details h2.address {
  font-size: 1.5em;
  margin: 0;
}
.parcels-details.collection img {
  width: 75px;
  height: 75px;
}
.parcels-details .parcel-state-indicator {
  position: absolute;
  top: -8px;
  left: -19px;
  display: flex;
  flex-direction: column;
}
.parcels-details .parcel-state-indicator > .parcel_mode {
  width: 20px;
  height: 20px;
  justify-content: center;
  align-self: center;
  display: flex;
  cursor: default;
  font-size: large;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .parcels-details .parcel-state-indicator > .parcel_mode {
    width: 25px;
    height: 25px;
  }
}
.play-buttons {
  display: flex;
  flex-direction: row;
  margin-top: 0.2rem;
}
button.play-now,
a.play-now,
a.xr-now {
  cursor: pointer;
  border-radius: 0;
  border: 1px solid #dc1e1e;
  background: #dc1e1e;
  color: #fff;
  white-space: nowrap;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  padding: 0 16px;
  line-height: 42px;
  height: 42px;
  text-decoration: none !important;
}
button.play-now:hover,
a.play-now:hover,
a.xr-now:hover {
  background: #fff;
  border-color: #fff;
  color: #0d0d0d !important;
}
a.play-now {
  flex: 0.8;
}
a.play-now:only-child {
  flex: auto;
}
a.xr-now {
  flex: 0.2;
  margin-left: 4px;
}
a.xr-now img {
  width: 1rem;
  margin-top: 10%;
}
.actions {
  margin: -8px 0 0 0;
  padding: 0;
  position: relative;
  width: fit-content;
}
.actions .not-favourite {
  filter: grayscale(100%);
}
.actions .favourite {
  background: #ffa;
}
.actions > li {
  display: inline-block;
  list-style: none;
  margin: 20px 0 2px 2px;
  padding: 0;
  position: relative;
}
.actions .visit a {
  border: none;
  box-shadow: none;
}
.actions .toggleOrbit {
  margin: 20px 0 1px 1px;
}
.actions a,
.actions button {
  border: none;
  display: inline-block;
  font: inherit;
  border-radius: 2px;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  margin: 0;
  cursor: pointer;
}
.actions button {
  padding-bottom: 32px;
}
.actions .add-colors:hover {
  background: #dc1e1e;
  color: #fff;
}
.actions div.BuildTab a:hover {
  color: black;
  background: transparent;
}
.actions img {
  width: 84px;
}
/* Loading gif */
.loading {
  width: 32px;
  height: 32px;
  position: relative;
  top: 12px;
  margin-right: 0;
  display: inline-block;
  background: no-repeat center;
}
@media prefers-color-scheme: dark {
  .loading {
    filter: invert();
  }
}
.loading-icon {
  width: max-content;
  -webkit-animation: loading-icon-spin 1s linear infinite;
  -moz-animation: loading-icon-spin 1s linear infinite;
  animation: loading-icon-spin 1s linear infinite;
}
.loading-icon i {
  position: relative;
  top: 0.1em;
}
.loading-icon.inline {
  display: inline-block;
  position: relative;
  top: 4px;
  margin-right: 8px;
}
.loading-icon.very-large {
  font-size: x-large;
}
@-moz-keyframes loading-icon-spin {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading-icon-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-icon-spin {
  100% {
    transform: rotate(360deg);
  }
}
.panel {
  border-radius: 2px;
  padding: 5px;
  text-align: center;
}
.overlay .panel {
  color: black;
  word-break: break-word;
}
.collapsible.collapsed {
  display: none;
}
.panel {
  text-shadow: 0 1px #808080;
  margin: 0.75em 0 0.75em 0;
}
.panel.is-warning {
  background: #ff881f;
  text-shadow: 0 1px #5e2f00;
}
.panel.is-danger {
  background: #b3261e;
  text-shadow: 0 1px #802020;
}
.panel.is-info {
  background: #771be6;
  text-shadow: 0 1px #3b0e77;
}
.panel.is-help {
  color: #333333;
  text-shadow: none;
  background: #e0e0e0;
}
.panel.is-success {
  background: #4cae50;
  text-shadow: 0 1px #2a6d2d;
}
/* badges label */
.rarity-label {
  display: none;
}
.dot {
  height: 2px;
  width: 2px;
  border-radius: 50%;
  margin-left: 0;
  padding: 0.2em;
}
.no-margin {
  margin: 0;
}
/* has borders helper*/
.has-borders {
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 4px;
  border-bottom: 2px solid;
}
.PopupAction {
  position: relative;
}
.PopupAction .PopupWindow {
  color: black;
  position: absolute;
  background-color: #fafafa;
  border: 1px solid gainsboro;
  border-radius: 4px;
  height: 500px;
  width: 300px;
  right: -120px;
  top: 16px;
  padding: 1px 4px;
  z-index: 50000;
  overflow: hidden;
  overflow-y: auto;
  -webkit-box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .PopupAction .PopupWindow {
    height: 300px;
    width: 250px;
    right: -100px;
  }
}
.PopupAction .PopupWindow .submenu {
  margin-bottom: 15px;
  display: block;
  padding: 4px 0;
}
.PopupAction .PopupWindow .submenu h2 {
  margin: auto;
  display: inline-block;
  font-size: inherit;
}
.PopupAction .PopupWindow .submenu span {
  margin: 0 2px;
  float: right;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px;
}
.PopupAction .PopupWindow .submenu span:hover {
  cursor: pointer;
  background-color: #eeeeee;
}
.PopupAction.-inWorld a {
  color: #ddd;
}
.PopupAction.-inWorld > a {
  padding: 8px 1px;
}
.PopupAction.-inWorld button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.PopupAction.-inWorld button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.PopupAction.-inWorld button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.PopupAction.-inWorld button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.PopupAction.-inWorld .PopupWindow {
  text-shadow: none;
  background: #444;
  border: 1px solid #767676;
}
.PopupAction.-inWorld .PopupWindow .submenu span {
  border: 1px solid #555;
  background: #aaa;
  color: #111;
}
.PopupAction.-inWorld .PopupWindow .submenu span:hover {
  background-color: #555;
}
.mailbox-icon {
  position: relative;
}
.mailbox-icon .PopupWindow {
  color: black;
  position: absolute;
  background-color: #fafafa;
  border: 1px solid gainsboro;
  border-radius: 4px;
  height: 500px;
  width: 300px;
  right: -120px;
  top: 16px;
  padding: 1px 4px;
  z-index: 50000;
  overflow: hidden;
  overflow-y: auto;
  -webkit-box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .mailbox-icon .PopupWindow {
    height: 300px;
    width: 250px;
    right: -100px;
  }
}
.mailbox-icon .PopupWindow .submenu {
  margin-bottom: 15px;
  display: block;
  padding: 4px 0;
}
.mailbox-icon .PopupWindow .submenu h2 {
  margin: auto;
  display: inline-block;
  font-size: inherit;
}
.mailbox-icon .PopupWindow .submenu span {
  margin: 0 2px;
  float: right;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px;
}
.mailbox-icon .PopupWindow .submenu span:hover {
  cursor: pointer;
  background-color: #eeeeee;
}
.mailbox-icon.-inWorld a {
  color: #ddd;
}
.mailbox-icon.-inWorld > a {
  padding: 8px 1px;
}
.mailbox-icon.-inWorld button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.mailbox-icon.-inWorld button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.mailbox-icon.-inWorld button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.mailbox-icon.-inWorld button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.mailbox-icon.-inWorld .PopupWindow {
  text-shadow: none;
  background: #444;
  border: 1px solid #767676;
}
.mailbox-icon.-inWorld .PopupWindow .submenu span {
  border: 1px solid #555;
  background: #aaa;
  color: #111;
}
.mailbox-icon.-inWorld .PopupWindow .submenu span:hover {
  background-color: #555;
}
.mailbox-icon .inbox .submenu span.cog {
  font-size: smaller;
}
.mailbox-icon .inbox .mail-subject {
  cursor: pointer;
}
.mailbox-icon .inbox .mail-subject:hover {
  background-color: #f0f0f0;
}
.mailbox-icon .inbox .mail-subject b {
  color: black;
  display: block;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
}
.mailbox-icon .inbox .mail-subject b.read {
  color: #777;
}
.mailbox-icon .inbox .mail-content {
  color: black;
  margin-top: 4px;
  background-color: #f3f3f3;
  padding: 2px;
  border: 1px solid #dedede;
  word-break: break-word;
}
.mailbox-icon .inbox .mail-write-form input[type='text'] {
  width: 90%;
}
.mailbox-icon .inbox .mail-write-form textarea {
  width: 90%;
}
.mailbox-icon .unread-mails {
  position: absolute;
  top: 0;
  right: -2px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: red;
}
.mailbox-icon.-inWorld .mail-subject b {
  color: #ffffff;
}
.mailbox-icon.-inWorld .mail-subject b.read {
  color: #777;
}
.mailbox-icon.-inWorld .mail-subject small {
  color: #a2a2a2;
}
.mailbox-icon.-inWorld .mail-subject:hover b {
  color: #494949;
}
.mailbox-icon.-inWorld .mail-subject:hover b.read {
  color: #b9b9b9;
}
.mailbox-icon.-inWorld .mail-subject:hover small {
  color: #a2a2a2;
}
.mailbox-icon.-inWorld .mail-content {
  color: #ffffff;
  background-color: #313131;
  border: 1px solid #747474;
}
.mailbox-icon.-inWorld .mail-content a {
  color: darkgray;
}
.mailbox-icon.-inWorld .mail-write-form input,
.mailbox-icon.-inWorld .mail-write-form textarea {
  background: #222;
  color: #aaa;
}
.Center {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.Center.-no-flex {
  display: block;
  flex-direction: unset;
}
.ScrollPane {
  max-height: 250px;
  overflow-y: auto;
}
@media only screen and (max-height: 900px) {
  .ScrollPane {
    max-height: 95px;
  }
}
.SplitPanel {
  display: flex;
}
.SplitPanel > aside.panel_left {
  width: auto;
  position: initial;
  min-width: 20%;
}
.SplitPanel > aside.panel_left.-max40 {
  max-width: 40%;
}
.SplitPanel > div {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.SplitPanel > * + * {
  margin-left: 10px;
}
.SplitPanel.-column {
  flex-direction: column;
}
.SplitPanel.-column .Panel {
  margin-left: 0;
}
@media only screen and (max-width: 800px) {
  .SplitPanel {
    flex-direction: column;
    /* This is to make the whole SplitPanel scrollable */
    overflow-y: auto;
    /* remove scrollable attribute of Panels; */
  }
  .SplitPanel > div.Panel {
    overflow: unset;
    min-height: unset;
  }
  .SplitPanel > * + * {
    margin-left: 0;
    margin-bottom: 5px;
  }
}
.Panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.Panel > header {
  position: relative;
}
.Panel > header h3 {
  background: none;
}
.Panel > header button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
}
.Panel > header button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.Panel > header button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.Panel > header button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.Panel h4 {
  color: black;
  margin: 5px 0;
}
.PanelTabs {
  margin: 0;
  padding: 0;
}
.PanelTabs a {
  color: #1f2950;
}
.PanelTabs.-numbered li {
  list-style: number;
  padding: 0 !important;
  background: transparent;
  margin-left: 20px;
  margin-top: 10px !important;
}
.PanelTabs.-numbered li.-none {
  list-style: none;
}
.PanelTabs.-numbered li.-none:hover {
  background: transparent;
}
.PanelTabs li + li {
  margin-top: 5px;
}
.PanelTabs li {
  color: #0e0e0e;
  cursor: pointer;
  list-style: none;
  padding: 10px !important;
  background: #555555;
  border-radius: 4px;
}
.PanelTabs li ol {
  padding: 0;
  margin: 10px 0 0;
}
.PanelTabs li ol li {
  background: transparent;
  padding: 5px 10px;
  font-weight: normal !important;
}
.PanelTabs li ol li:hover {
  background-color: #313131;
}
.PanelTabs li h5 {
  color: #e6e6e6;
  font-size: 1em;
  margin: 0;
}
.PanelTabs li:hover {
  background-color: #313131;
}
.PanelTabs li.-active > h5 {
  color: #ffe100;
}
.MessageWriteForm {
  padding: 8px 10px;
}
.MessageWriteForm * + section {
  margin-top: 10px;
}
.MessageWriteForm input,
.MessageWriteForm textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 120%;
  padding: 4px;
  display: block;
  margin-top: 4px;
}
.MessageWriteForm button {
  padding: 5px 10px;
}
.MessageWriteForm button i {
  margin-right: 4px;
}
.MailboxMessage div.subject {
  cursor: pointer;
  padding: 10px;
  border-radius: 6px;
}
.MailboxMessage div.subject:hover {
  background: #f4e4fc;
}
.MailboxMessage div.subject b {
  color: #370c63;
  display: block;
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
}
.MailboxMessage div.subject b.read {
  color: #414141;
}
.MailboxMessage div.content {
  color: black;
  background-color: #f3f3f3;
  padding: 10px;
  border: 1px solid #dedede;
  word-break: break-word;
  border-radius: 4px;
}
.MailboxMessage p {
  margin: 0;
}
.login-options {
  position: relative;
}
.login-options .PopupWindow {
  color: black;
  position: absolute;
  background-color: #fafafa;
  border: 1px solid gainsboro;
  border-radius: 4px;
  height: 500px;
  width: 300px;
  right: -120px;
  top: 16px;
  padding: 1px 4px;
  z-index: 50000;
  overflow: hidden;
  overflow-y: auto;
  -webkit-box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 11px 10px 5px -11px rgba(0, 0, 0, 0.75);
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .login-options .PopupWindow {
    height: 300px;
    width: 250px;
    right: -100px;
  }
}
.login-options .PopupWindow .submenu {
  margin-bottom: 15px;
  display: block;
  padding: 4px 0;
}
.login-options .PopupWindow .submenu h2 {
  margin: auto;
  display: inline-block;
  font-size: inherit;
}
.login-options .PopupWindow .submenu span {
  margin: 0 2px;
  float: right;
  border: 1px solid black;
  border-radius: 5px;
  padding: 2px;
}
.login-options .PopupWindow .submenu span:hover {
  cursor: pointer;
  background-color: #eeeeee;
}
.login-options.-inWorld a {
  color: #ddd;
}
.login-options.-inWorld > a {
  padding: 8px 1px;
}
.login-options.-inWorld button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.login-options.-inWorld button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.login-options.-inWorld button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-options.-inWorld button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.login-options.-inWorld .PopupWindow {
  text-shadow: none;
  background: #444;
  border: 1px solid #767676;
}
.login-options.-inWorld .PopupWindow .submenu span {
  border: 1px solid #555;
  background: #aaa;
  color: #111;
}
.login-options.-inWorld .PopupWindow .submenu span:hover {
  background-color: #555;
}
/* Parcel Details on parcel page and parcel-info tab.*/
dl.deets dt {
  font-weight: 400;
  font-size: 0.7rem;
  position: absolute;
  padding-top: 14px;
  padding-left: 10px;
}
dl.deets dd {
  padding-left: 8em;
  margin: 0 0 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  min-height: 1em;
}
dl.deets dd.clear {
  padding-left: 10px;
  padding-top: 2em;
}
.ParcelCard {
  width: 100px;
  min-width: 100px;
  margin: 0 3px;
  z-index: 0;
  cursor: pointer;
}
.ParcelCard:first-child {
  margin-left: 0;
}
.ParcelCard:last-child {
  margin-right: 0;
}
.ParcelCard img {
  width: 100px;
  height: 100px;
  display: block;
  margin: 2px auto;
}
.ParcelCard img:hover {
  transform: scaleY(1.025);
  transform-origin: 0 0;
}
.ParcelCard .parcel-card-content {
  padding: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: smaller;
}
.ParcelCard .parcel-card-content b,
.ParcelCard .parcel-card-content small {
  display: block;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}
.PropertyItem .property-item-header {
  display: flex;
  padding: 5px 0;
  cursor: pointer;
}
.PropertyItem .property-item-header > div:first-child {
  width: 10%;
  text-align: center;
  margin: auto 0;
}
.PropertyItem .property-item-header > div:not(:first-child) {
  margin: auto 5px;
}
.PropertyItem .property-item-header img {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .PropertyItem .property-item-header img {
    width: 50px;
    height: 50px;
  }
}
.PropertyItem .property-item-header > div:last-child {
  text-align: center;
  margin: auto 5px auto auto;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .PropertyItem .property-item-header > div:last-child {
    flex-direction: row;
  }
  .PropertyItem .property-item-header > div:last-child a:last-child {
    margin: 0 0 0 10px;
  }
}
.PropertyItem .property-item-header.-space {
  justify-content: space-between;
}
.PropertyItem .property-item-header.-space > div:last-child {
  margin: unset;
}
.PropertyItem div.property-item-body {
  display: flex;
  justify-content: space-evenly;
  margin: 8px 0;
  font-size: xx-small;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .PropertyItem div.property-item-body {
    font-size: inherit;
  }
}
.PropertyItem div.property-item-body.collapsed {
  display: none;
}
.PropertyItem div.property-item-body > div {
  margin: 0 5px 0 5px;
}
.PropertyItem div.property-item-body.-space {
  justify-content: flex-end;
}
.PropertyItem div.property-item-body.-space > div > a {
  padding: 5px;
  background: #ebebeb;
  border-radius: 4px;
  color: black;
  cursor: pointer;
}
.PropertyItem div.property-item-body.-space > div > a:hover {
  background-color: #d4d4d4;
}
.bubble {
  position: absolute;
  font-size: 12px;
  line-height: 15px;
  text-shadow: none;
  width: 250px;
  min-width: 180px;
  background: #fff;
  margin-top: 15px;
  border-radius: 5px;
  padding: 24px;
  text-align: center;
  color: #000;
  z-index: 50000;
}
.bubble .close {
  background: #7a7a7a;
  color: #000000;
  font: inherit;
  font-weight: bold;
  background: none;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  position: absolute;
  top: 8px;
  right: 4px;
  cursor: pointer;
}
.bubble .close:hover {
  background: #5e5e5e;
}
.bubble.bubble-top-right {
  left: -250px;
  top: 10px;
}
.bubble.bubble-top-left {
  left: -3px;
  top: 5px;
}
.bubble-top-right:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  border-right: 24px solid #fff;
  border-left: 12px solid transparent;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  right: 32px;
  top: -24px;
}
.bubble-top-left:before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  border-left: 24px solid #fff;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #fff;
  border-top: 20px solid transparent;
  left: 32px;
  top: -16px;
}
.Pagination {
  margin-bottom: 1em;
  display: flex;
  gap: 4px;
}
.Pagination a:first-child,
.Pagination a:last-child {
  white-space: pre;
  padding: 0 8px;
}
.Pagination a,
.Pagination span {
  min-width: 24px;
  text-align: center;
  height: 24px;
  line-height: 24px;
}
.Pagination span {
  color: #aaa;
}
.Pagination a {
  border: 1px solid var(--border);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
.Pagination a.active {
  border: none;
  font-weight: bold;
}
div.SimpleNameMintInput {
  padding-bottom: 10px;
}
div.SimpleNameMintInput form {
  margin-bottom: 5px;
  text-align: center;
}
div.SimpleNameMintInput form label {
  font-weight: bold;
}
div.SimpleNameMintInput form input[type='text'] {
  width: 60%;
  line-height: 20px;
  border-radius: 5px;
  border: none;
  border-bottom: 2px solid black;
  margin: 2px 4px;
  padding: 2px;
}
.OverlayWindow.-wearable-transfer {
  max-width: 28rem;
}
.TransferCollectible,
.BatchTransferNFT {
  max-width: 95vh;
}
.TransferCollectible .progress,
.BatchTransferNFT .progress {
  display: flex;
  gap: 0.25rem;
}
.TransferCollectible .help,
.BatchTransferNFT .help {
  margin-top: 1rem;
}
.Progressbar {
  width: 100%;
  position: relative;
  height: 4px;
  overflow: hidden;
  transform: translateZ(0);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.Progressbar .progress-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: top left;
  animation: none;
}
.Progressbar .progress-outer .progress-inner {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #dc1e1e;
  animation: none;
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path {
	background-image: url(images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

@font-face {
  font-family: 'source code pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Code Pro'), url(/fonts/sourcecodepro-regular.woff) format('woff');
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Press Start 2P'), url(/fonts/pressstart2p-400.woff2) format('woff2');
}
:root {
  color-scheme: dark;
}
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  background: #444;
  margin: 1rem 0;
  border-radius: 6px;
}
a {
  text-decoration: none;
  color: white;
}
a:hover {
  text-decoration: underline;
}
canvas#renderCanvas {
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  outline: none !important;
  width: 100vw;
  height: 100vh;
}
.no-touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  font-family: 'source code pro', monospace;
  font-size: 15px;
}
body #babylonUnmuteIconBtn {
  left: 60px !important;
}
p,
li,
ul,
section,
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}
button.iconish {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  aspect-ratio: 1/1;
  display: inline-block;
  text-align: center;
  text-shadow: 2px 2px black;
}
/* Sidebar nav */
aside.ui-toggle-mobile {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
aside.ui-toggle-mobile button {
  position: relative;
  padding: 8px;
}
aside.ui-toggle-mobile .chat-unread-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e74c3c;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  aside.ui-toggle-mobile {
    display: none;
  }
}
aside.ui-toggle-mobile.hidden {
  display: none;
}
@media screen and (max-width: 799px), screen and (max-height: 449px) {
  aside:not(.ui-toggle-mobile)[data-active='false'] > ul.ui-sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    pointer-events: none;
  }
  aside:not(.ui-toggle-mobile)[data-active='false'] main.chat {
    visibility: hidden;
    pointer-events: none;
  }
}
aside {
  width: 8rem;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}
aside > ul {
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8rem;
  margin: 0;
  padding: 0;
}
aside > ul li:first-child {
  margin-top: 1rem;
}
aside > ul li {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}
aside > ul li.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
aside > ul li.disabled a {
  color: unset;
}
aside > ul a,
aside > ul u {
  display: block;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
}
aside > ul a:hover,
aside > ul u:hover {
  text-decoration: underline;
  font-weight: bold;
}
aside > ul .active a,
aside > ul .active u {
  text-decoration: underline;
  font-weight: bold;
  color: #dc1e1e;
}
aside dialog {
  position: fixed;
  top: 1rem;
  left: 8rem;
  bottom: 0;
  display: block;
  margin: 0;
  width: 25rem;
  border: none;
  background: transparent;
}
aside dialog header {
  position: relative;
}
aside dialog header h1,
aside dialog header h2 {
  font-size: 1.22rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 2px black;
}
aside dialog header button.close {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  background: #3335;
  border: none;
  cursor: pointer;
}
aside dialog header button.close:hover {
  font-weight: bold;
}
aside dialog > section {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  border-radius: 1rem;
  padding: 0.5rem;
  background: #333;
}
dialog .baking textarea {
  width: 100%;
  background: transparent;
  height: 80vh;
  border: none;
}
/* Chat */
main.chat {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0 0 4px 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
main.chat .chat-messages {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 2px;
}
main.chat s.profanity {
  filter: blur(4px);
  text-decoration: none;
  cursor: pointer;
}
main.chat s.profanity:hover {
  filter: none;
}
main.chat .chat-messages.at-cap {
  mask-image: linear-gradient(to bottom, transparent 0, black 40px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 40px);
}
main.chat p {
  margin: 0 0.6rem;
}
main.chat p span {
  padding: 2px 0.4rem;
  text-shadow: 1px 1px 1px black;
  background: #0005;
  border-radius: 2px;
}
main.chat form {
  padding: 0 0.5rem;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
main.chat form button,
main.chat form input {
  padding: 0.3rem;
}
main.chat form input {
  font-size: 16px;
}
/* Emote + animate lists */
.AnimateList {
  margin: 5px 0;
  background: var(--tinge);
  border-radius: 5px;
}
.AnimateList ul {
  margin: 0;
  padding: 10px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.AnimateList ul li {
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  width: 100%;
}
.AnimateList ul li > i {
  margin-right: 5px;
}
.AnimateList ul li.-active {
  background-color: #2f0e4c42;
}
.AnimateList ul li:hover {
  background: #333a;
}
.EmoteList {
  font-size: 32px;
}
.EmoteList ul {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px;
  justify-content: space-between;
}
.EmoteList ul li {
  margin: 0;
  padding: 5px;
  width: 40px;
  cursor: pointer;
  text-align: center;
}
.EmoteList ul li:hover {
  background: #333a;
}
aside .EmoteList ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 0.5rem;
}
aside .EmoteList ul li {
  filter: grayscale(100%);
}
aside .EmoteList ul li:hover {
  background: white;
  color: black;
  border-radius: 1rem;
  filter: unset;
}
aside .AnimateList ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
aside .AnimateList ul li:hover {
  background: white;
  color: black;
  border-radius: 1rem;
}
/* Feature editor */
dialog.editor {
  font-size: 1em;
}
dialog.editor textarea,
dialog.editor input {
  cursor: pointer;
}
dialog.editor button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
dialog.editor button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
dialog.editor button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
dialog.editor button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
dialog.editor button.asset-library {
  width: 100%;
  margin: 0.5rem 0 0 0;
  display: inline-block;
}
dialog.editor label a {
  color: #8a8a8a;
}
dialog.editor .tabs {
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}
dialog.editor .tabs li {
  margin: 0 2px 0 0;
  padding: 4px 10px;
  list-style: none;
  background: #222;
  color: #ccc;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid #111;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
dialog.editor .tabs li img {
  width: 12px;
  position: relative;
  top: 4px;
  left: 2px;
}
dialog.editor .tabs li.active {
  border-bottom: none;
  background: #444;
  color: #eee;
}
dialog.editor .tabs li.close-button {
  position: absolute;
  right: -2px;
  margin-top: 1px;
  padding-bottom: 10px !important;
  background: #444;
}
dialog.editor .button-tabs {
  border-bottom: 1px solid #999;
}
dialog.editor .button-tabs button {
  color: #d4d4d4;
  background: initial;
  padding: 0.4rem;
  border-radius: 0.4rem 0.4rem 0 0;
  margin: 0 0.4rem 0 0;
}
dialog.editor .button-tabs button.active {
  color: #dc1e1e;
  font-weight: bold;
}
dialog.editor .info,
dialog.editor .bake-parcel {
  padding: 16px 0 2px 8px;
  position: relative;
}
dialog.editor .bake-parcel p.error {
  margin-top: 5px;
  color: #ffa9a9;
}
dialog.editor .upload-url {
  padding-top: 5px;
}
dialog.editor h4 {
  text-shadow: 1px 1px 1px black;
}
dialog.editor .textures + p {
  margin: 16px 0 0 12px;
}
dialog.editor .textures + p small {
  opacity: 0.3;
  overflow-wrap: break-word;
}
dialog.editor .vectors {
  box-sizing: border-box;
}
dialog.editor .vectors > div {
  display: flex;
  gap: 2px;
}
dialog.editor .vectors span:has(+ input),
dialog.editor .vectors input + span {
  width: 1rem;
  padding: 0.25rem;
  display: inline-block;
  height: calc(1rem + 2px);
  text-align: center;
  cursor: pointer;
  background: #111;
  color: white;
}
dialog.editor .vectors span:has(+ input):hover,
dialog.editor .vectors input + span:hover {
  background: white;
  color: #111;
}
dialog.editor .vectors span:has(+ input) {
  border-radius: 0.4rem 0 0 0.4rem;
}
dialog.editor .vectors input + span {
  border-radius: 0 0.4rem 0.4rem 0;
  margin-right: 0.5rem;
}
dialog.editor .vectors input {
  border: none;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  height: 1.45rem;
  padding: 0 0.5rem;
}
dialog.editor .vectors input:hover {
  border-color: white;
}
dialog.editor .editor-toolbar .help {
  display: none;
}
dialog.editor .f {
  padding: 9px 2px 10px;
}
dialog.editor .f * {
  box-sizing: border-box;
}
dialog.editor .f label:first-child {
  display: block;
  padding-bottom: 3px;
}
dialog.editor .f .help-script {
  color: inherit;
  padding-left: 1em;
}
dialog.editor .f input[type='text'],
dialog.editor .f input[type='number'],
dialog.editor .f input[type='range'],
dialog.editor .f textarea {
  font: inherit;
  width: 100%;
  border: none;
  padding: 4px;
  background: #222;
  color: #aaa;
  border-radius: 4px;
}
dialog.editor .f.uv input[type='number'],
dialog.editor .f.uv input.number {
  width: 90px;
  margin-right: 8px;
}
dialog.editor .f input[type='checkbox'] {
  margin-right: 10px;
}
dialog.editor .f textarea.script-editor {
  height: 300px;
  white-space: pre-wrap;
}
dialog.editor .f textarea {
  height: 150px;
}
dialog.editor .f small {
  display: block;
  margin-top: 10px;
}
dialog.editor .f input[type='checkbox'] + small {
  display: inline;
}
dialog.editor .f .sub-f {
  background-color: #272727;
  padding: 3px 5px 0 5px;
  margin: 5px 0;
  border-radius: 2px;
}
dialog.editor .f select + div {
  margin-top: 4px;
}
dialog.editor .f.fs input[type='number'],
dialog.editor .f.fs input.number {
  width: 83px;
  margin-right: 4px;
}
dialog.editor .f.fs input.error {
  outline: 1px solid #ff0000;
  background: #402000;
  color: #eee;
}
dialog.editor .f.fs .vector-field {
  padding: 2px 0;
  border: 1px solid #20184a;
  background: #333;
  margin-right: 4px;
}
dialog.editor .f.fs .vector-field .minus,
dialog.editor .f.fs .vector-field .plus {
  width: 16px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
dialog.editor .f.fs .vector-field input.number {
  width: 50px;
  margin: 0;
  padding: 3px 0;
  text-align: center;
  background: #222;
  border-radius: 0;
}
dialog.editor .f.fs .vector-field input.number:focus {
  outline: none;
  box-shadow: 0 0 2px #fff;
}
dialog.editor .f.fs .vector-error {
  color: #ff6644;
}
dialog.editor .easingContainer {
  display: flex;
  column-gap: 4px;
}
dialog.editor .lock-aspect-ratio,
dialog.editor .lock-aspect-ratio-keyframe,
dialog.editor .aspect-ratio-permanent-lock {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
}
dialog.editor .lock-aspect-ratio-keyframe {
  margin-left: 4px;
}
dialog.editor .keyframes {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 4px;
  row-gap: 2px;
}
dialog.editor .f-keyframe input {
  width: 50px !important;
}
dialog.editor .f-keyframe input.frame {
  background: #111;
  text-align: center;
}
dialog.editor div.color-selectors {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
dialog.editor div.color-selectors div > small > button {
  margin-right: 0;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  dialog.editor section.explorer[data-tab='map'] {
    width: 800px;
  }
}
dialog ul.toolbar {
  margin-bottom: 10px;
  padding-left: 0;
  display: flex;
  list-style: none;
  gap: 0;
}
dialog ul.toolbar li button {
  background: #222;
  color: #f5f5f0;
  border: 1px solid #555;
  margin-left: 2px;
}
dialog ul.toolbar li button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
/* Build tab + add menu */
section.build-tab nav.build-main-tabs {
  display: flex;
  padding: 8px;
  margin-bottom: 4px;
  background-color: #0d0d0d;
}
section.build-tab nav.build-main-tabs div.separator {
  width: 1px;
  background-color: #555;
  margin: 0 8px;
}
section.build-tab nav.build-main-tabs button {
  flex: 1;
  padding: 8px 12px;
  background: none;
  border: none;
  color: #ccc;
  font-weight: bold;
  cursor: pointer;
}
section.build-tab nav.build-main-tabs button[data-active='true'] {
  color: #fff;
  border-bottom: 2px solid #777;
}
.FeatureSpawnList > header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.FeatureSpawnList > header h4 {
  flex: 1;
}
.FeatureSpawnList > header button {
  margin-right: 0 !important;
}
.FeatureSpawnList .add-buttons li {
  list-style: none;
  margin: 0 0 2px 0;
  padding: 8px 0 8px 20px;
  position: relative;
  display: flex;
}
.FeatureSpawnList .add-buttons li.selectable {
  cursor: pointer;
}
.FeatureSpawnList .add-buttons li.selectable:hover {
  background: #555;
  border-radius: 0.4rem;
}
.FeatureSpawnList .add-buttons li.selectable .meta {
  opacity: 0.3;
  color: white;
  font-weight: normal;
}
.FeatureSpawnList .add-buttons li img {
  width: 24px;
  position: absolute;
  left: 4px;
  top: 8px;
  filter: grayscale() brightness(1.5) contrast(2);
}
.FeatureSpawnList .add-buttons li small {
  display: block;
  color: #fff7;
  margin: 0;
}
.FeatureSpawnList .add-buttons li .middle-container {
  width: 71%;
}
.FeatureSpawnList .add-buttons li .meta {
  color: #dd0000;
  font-size: smaller;
  position: absolute;
  top: 10px;
  right: 4px;
}
.NewAssetOptions > * + h4 {
  margin-top: 10px;
}
.NewAssetOptions input[type='text'],
.NewAssetOptions select,
.NewAssetOptions textarea {
  width: 100%;
  box-sizing: border-box;
}
.NewAssetOptions textarea {
  margin: 0;
  height: 39px;
  padding: 5px;
  resize: vertical;
  min-height: 50px;
  max-height: 100px;
}
/* Login */
section.login {
  padding: 1rem;
}
section.login img {
  width: 2rem;
}
aside .login a.button {
  position: relative;
  background: white;
  color: black;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  line-height: 2rem;
  display: inline-block;
  cursor: pointer;
}
aside .login a.button img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  position: relative;
  top: 0.25rem;
}
/* Voxel tool belt (minecraft-like bottom bar) */
.VoxelToolBelt {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  max-height: 100px;
}
.VoxelToolBelt .add-menu-anchor {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: -2px 2px -2px -2px;
}
.VoxelToolBelt .add-menu-toolbelt-btn {
  box-sizing: border-box;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 3px 0 0 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  background: rgba(0, 0, 0, 0.08);
  border-right: 1px solid #555;
}
.VoxelToolBelt .add-menu-toolbelt-btn:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .VoxelToolBelt.active .wrapper,
  .VoxelToolBelt:hover .wrapper {
    top: 0;
    transition: top 0.1s ease-out;
  }
}
@media only screen and (max-width: 800px) {
  .VoxelToolBelt {
    top: 40%;
    bottom: unset;
    transform: translateY(-50%) translateX(0);
    left: 40%;
    rotate: -90deg;
  }
}
.VoxelToolBelt div.wrapper {
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 5px;
  position: relative;
  top: 100px;
  transition: top 0.2s ease-out;
  border-radius: 5px;
  background: #d3d3d3;
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination > span {
  padding: 2px;
  font-size: 0.7rem;
  cursor: pointer;
  background-color: rgba(129, 129, 129, 0.4);
  color: #000;
  text-align: center;
  border-radius: 3px;
  width: 1rem;
  aspect-ratio: 1 / 1;
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination > span[data-active='true'] {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination > span[data-active='false']:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.VoxelToolBelt .tint-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.VoxelToolBelt .tint-wrap button.tint {
  outline: none;
  border-radius: 4px;
  border: none;
  height: 38px;
  margin-right: 0;
  padding: 0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.18);
}
.VoxelToolBelt .tint-wrap button.tint svg {
  width: 24px;
  height: 24px;
  z-index: 2;
  flex-shrink: 0;
}
.VoxelToolBelt .tint-wrap button.tint path {
  fill: #fff;
}
.VoxelToolBelt .tint-wrap button.tint:hover {
  background-color: rgba(0, 0, 0, 0.28);
}
.VoxelToolBelt .tint-wrap button.tint.-selected {
  background-color: rgba(0, 0, 0, 0.4);
}
.VoxelToolBelt .tint-wrap div.tint-chooser {
  z-index: 2;
  position: absolute;
  left: 0;
  top: -50px;
  width: 90px;
  display: flex;
  border-radius: 4px;
  flex-wrap: wrap;
  list-style: none;
  padding: 3px;
  background: rgba(211, 211, 211, 0.85);
}
.VoxelToolBelt .tint-wrap div.tint-chooser > button:not(.tint-chooser-edit) {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 1px;
  cursor: pointer;
  border: 1px solid white;
}
.VoxelToolBelt .tint-wrap div.tint-chooser > button:not(.tint-chooser-edit):hover {
  border: none;
  background-color: black;
}
.VoxelToolBelt .tint-wrap div.tint-chooser .tint-chooser-edit {
  flex: 1 1 100%;
  margin-top: 2px;
  padding: 2px 4px;
  font-size: 0.65rem;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.6);
  color: #000;
}
.VoxelToolBelt .tint-wrap div.tint-chooser .tint-chooser-edit:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}
.VoxelToolBelt div.textures {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px;
}
.VoxelToolBelt div.textures > div {
  margin: 2px 0;
  position: relative;
}
.VoxelToolBelt div.textures > div span.keybind-help {
  position: absolute;
  pointer-events: none;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 0.7rem;
  padding: 0 3px;
  border-radius: 3px;
}
.VoxelToolBelt div.textures img,
.VoxelToolBelt div.textures div {
  display: block;
  background-size: 384px 384px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  background-color: black;
  border-radius: 2px;
  width: 40px;
  height: 40px;
}
.VoxelToolBelt div.textures img:hover,
.VoxelToolBelt div.textures div:hover {
  cursor: pointer;
  outline: 2px solid rgba(0, 0, 0, 0.7);
}
.VoxelToolBelt div.textures img.-selected,
.VoxelToolBelt div.textures div.-selected {
  outline: 2px solid black;
}
.VoxelToolBelt div.dem-buttons {
  display: flex;
  gap: 4px;
}
.VoxelToolBelt div.dem-buttons button {
  height: 40px;
  width: 40px;
}
@media only screen and (max-width: 800px) {
  .VoxelToolBelt div.wrapper {
    top: unset;
    transition: none;
  }
  .VoxelToolBelt div.wrapper div.textures > div,
  .VoxelToolBelt div.wrapper div.toolbelt-pagination > span,
  .VoxelToolBelt div.wrapper div.tool-modes > button {
    rotate: 90deg;
  }
}
/* Tint editor modal + customize voxels */
.tint-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
}
.tint-modal-panel {
  position: relative;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow: hidden auto;
  padding: 16px 18px 14px;
  border-radius: 8px;
  background: #0d0d0d;
  border: 1px solid #333;
  color: #f5f5f0;
}
.tint-modal-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #f5f5f0;
  font-size: 1.1rem;
  padding: 2px 6px;
}
.CustomizeVoxels div.textures {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}
.CustomizeVoxels div.textures > div {
  margin: 3px;
  cursor: pointer;
}
.CustomizeVoxels div.textures > div:hover,
.CustomizeVoxels div.textures > div.-dragOver {
  background-color: #000;
  border-radius: 5px;
  position: relative;
}
.CustomizeVoxels div.textures > div:hover img,
.CustomizeVoxels div.textures > div.-dragOver img,
.CustomizeVoxels div.textures > div:hover div,
.CustomizeVoxels div.textures > div.-dragOver div {
  opacity: 0.2;
}
.CustomizeVoxels div.textures > div img,
.CustomizeVoxels div.textures > div div {
  display: block;
  margin: 7px;
  background-size: 384px 384px;
  background-repeat: repeat;
  border-radius: 2px;
  width: 48px;
  height: 48px;
}
.CustomizeVoxels div.textures > div small {
  display: block;
  color: #999;
}
.CustomizeVoxels div.tints {
  margin-top: 10px;
}
.CustomizeVoxels div.tints input {
  width: 24px;
  height: 24px;
  margin-right: 3px;
  cursor: pointer;
  border: none;
}
.CustomizeVoxels div.OtherTextures {
  border-top: 2px solid #3c2744;
  padding: 2px 0;
  border-radius: 5px;
}
.CustomizeVoxels div.OtherTextures img.other-parcel-texture {
  margin: 4px;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.CustomizeVoxels div.OtherTextures img.other-parcel-texture:hover {
  transform: scale(1.1);
}
.voxel-library {
  height: 150px;
  overflow-y: auto;
  padding: 4px 1px;
  margin: 5px 1px;
  background-color: var(--dark);
}
.voxel-library .category-name {
  cursor: pointer;
}
.voxel-library .category-name h5 {
  color: #ccc;
  margin: 2px 2px 5px;
}
.voxel-library .category-models {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.voxel-library .category-models a {
  padding: 3px;
}
.voxel-library .category-models img {
  width: 40px;
  height: 40px;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .voxel-library .category-models img {
    width: 55px;
    height: 55px;
  }
  .voxel-library .category-models img:hover {
    transform: scale(1.5);
    transition: all 0.2s ease-in-out;
  }
}
.voxel-library .category-models p {
  margin: auto 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Asset library */
.asset-library {
  display: flex;
  flex-direction: column;
}
.asset-library .spinny {
  text-align: center;
  margin: 2rem 0 4rem 0;
}
.asset-library .spinny,
.asset-library .spinny * {
  mix-blend-mode: multiply;
}
.asset-library .SortingOptions,
.asset-library .filter-options {
  padding: 0.5rem;
}
.asset-library .SortingOptions select,
.asset-library .filter-options select {
  width: 100%;
  margin-bottom: 0.2rem;
  font-size: smaller;
}
.asset-library .SortingOptions {
  font-size: smaller;
}
.SortingOptions {
  margin: 5px 4px;
}
.SortingOptions > a,
.SortingOptions > button {
  padding: 4px 8px;
  text-decoration: none;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border: 1px solid #555;
  cursor: pointer;
  margin-left: 5px;
}
.SortingOptions > a.active,
.SortingOptions > button.active {
  background: #444;
}
.SortingOptions > a.active.ascending:after,
.SortingOptions > button.active.ascending:after {
  content: '↑';
}
.SortingOptions > a.active.descending:after,
.SortingOptions > button.active.descending:after {
  content: '↓';
}
.SortingOptions > a:hover,
.SortingOptions > button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
}
.SortingOptions > a.categories,
.SortingOptions > a.types {
  padding: 4px 0;
}
.SortingOptions > a.categories select,
.SortingOptions > a.types select {
  background: none;
  color: inherit;
  border: none;
}
.AssetCard {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}
.AssetCard.-small {
  height: 100%;
}
.AssetCard.-small > *:nth-child(2) {
  flex-grow: 1;
}
.AssetCard.-small > img {
  width: 140px;
  height: 140px;
}
.AssetCard.-large > img {
  width: 180px;
  height: 180px;
}
.AssetCard.-preview {
  cursor: default;
  margin: 0 5px 0 0;
}
.AssetCard > img {
  width: 180px;
  height: 180px;
  background-color: #333;
  display: block;
  margin-bottom: 5px;
}
.AssetCard > div.loading-image,
.AssetCard > div.broken-image {
  width: 100%;
}
.AssetCard > div.loading-image > img,
.AssetCard > div.broken-image > img {
  display: block;
  margin: auto;
}
.AssetCard > div.broken-image {
  height: 100%;
  filter: grayscale();
}
.AssetCard a {
  text-decoration: none;
  color: #f5f5f0;
}
.AssetCard a:hover {
  color: #dc1e1e;
}
.AssetCard header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.AssetCard header div.name {
  font-size: 90%;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.AssetCard footer {
  margin: 0 0 0.5rem 0;
  padding: 0;
  border-top: none;
  color: #fff7;
  font-size: x-small;
  display: flex;
  justify-content: space-between;
}
.AssetCard footer div.type img {
  filter: grayscale() brightness(1.5) contrast(2);
  opacity: 0.5;
  display: block;
  width: 16px;
  height: 16px;
}
.AssetCard footer div.author {
  font-size: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.AssetCard footer div + div {
  margin-left: 4px;
}
.AssetCard div.viewsCount {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #3d2f5fbf;
  color: #ececec;
}
.assets {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.assets .asset-browser {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 10px;
}
.assets .asset-browser img {
  border-radius: 2px;
}
.assets .asset-browser div.asset-card-container {
  position: relative;
}
.assets .asset-browser div.asset-card-container div.asset-card-actions {
  display: none;
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
}
.assets .asset-browser div.asset-card-container:hover div.asset-card-actions {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.inspector {
  position: relative;
}
.inspector img {
  aspect-ratio: 1;
  width: 100%;
  max-height: 320px;
}
.inspector.scripts img {
  display: none;
}
.inspector .asset-browser-inspector {
  display: flex;
  flex-direction: column;
  margin: 10px;
  max-height: calc(100vh - 200px);
  overflow: auto;
}
.inspector .asset-browser-inspector button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.inspector .asset-browser-inspector button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.inspector .asset-browser-inspector button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.inspector .asset-browser-inspector button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.inspector .asset-browser-inspector dt {
  color: #fff7;
  font-size: x-small;
}
.inspector .asset-browser-inspector dd {
  margin: 0 0 1rem 0;
}
.inspector .asset-browser-inspector header {
  position: relative;
}
.inspector .asset-browser-inspector header button {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  margin: 0;
}
.inspector .asset-browser-inspector div.MainActionsButtons {
  margin: 0 0 20px 0;
  display: flex;
  justify-content: space-evenly;
}
.inspector .asset-browser-inspector div.MainActionsButtons button {
  margin-right: unset;
  height: 32px;
}
.inspector .asset-browser-inspector textarea {
  width: 100%;
}
.inspector .asset-browser-inspector dd.user-actions button.-red {
  background-color: #a93f3f;
}
/* Inspector tree tab */
.ParcelInspectorTab .InspectorTabTools {
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ParcelInspectorTab .scrollContainer {
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
}
.ParcelInspectorTab h3,
.ParcelInspectorTab h4 {
  color: #eee;
  margin-top: 10px;
}
.ParcelInspectorTab ul {
  margin: 4px 0 0 0;
  padding: 0;
}
.ParcelInspectorTab li {
  position: relative;
  font-size: smaller;
  background-color: var(--tinge);
  border-radius: 5px;
  list-style: none;
  padding: 8px 4px 4px 34px;
  border: none;
  border-bottom: 1px solid #333;
  margin: 0 0 2px;
}
.ParcelInspectorTab li:hover {
  color: #ddd;
  cursor: pointer;
}
.ParcelInspectorTab li p {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ParcelInspectorTab li img {
  width: 24px;
  position: absolute;
  left: 4px;
}
.ParcelInspectorTab li small {
  color: #888 !important;
}
.ParcelInspectorTab .feature-container {
  display: flex;
}
.ParcelInspectorTab .feature-copy-container,
.ParcelInspectorTab .feature-copy-container-group {
  width: 210px;
}
.ParcelInspectorTab .feature-checkbox {
  margin-top: 12px;
}
.ParcelInspectorTab .checkbox {
  cursor: pointer;
  height: 15px;
  width: 15px;
}
.ParcelInspectorTab .inspector-bottom-bar {
  display: flex;
  padding: 9px 4px 9px 9px;
}
.ParcelInspectorTab .inspector-bottom-bar-buttons {
  width: 184px;
}
.ParcelInspectorTab .inspector-bottom-bar-buttons-group {
  width: 188px;
}
.ParcelInspectorTab .inspector-bottom-bar-checkbox-container {
  white-space: nowrap;
}
.inspector.overlay {
  width: 240px;
  inset: 40px auto 40px 40px;
  margin: 0;
  overflow-y: auto;
}
.inspector.overlay ul li {
  margin-bottom: 4px;
}
.inspector.overlay ul li p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspector.overlay ul li small {
  color: #555;
  display: block;
}
/* Snapshots */
.SnapshotItem > header {
  display: flex;
}
.SnapshotItem > header div:first-child {
  flex: 1;
}
.SnapshotItem > header button {
  margin-right: 0 !important;
}
.SnapshotItem li small > a {
  color: #dc1e1e;
}
/* Womps */
.le-wompies .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
.le-wompies .grid p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.le-wompies .grid a {
  color: white;
}
.le-wompies .grid time {
  opacity: 0.3;
}
.le-wompies .grid div.womp img {
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.WompOptions textarea {
  width: 100%;
  margin: 0 0 10px;
  padding: 5px;
  resize: vertical;
  min-height: 50px;
  max-height: 100px;
  box-sizing: border-box;
}
button.TakeWompButton {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
  font-size: 110%;
  padding: 10px;
  margin: 5px 0 0 0;
}
button.TakeWompButton:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
button.TakeWompButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
button.TakeWompButton[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
form.PermissionsRadioSelector > div {
  margin: 10px 0;
}
form.PermissionsRadioSelector > div > label {
  cursor: pointer;
  display: flex;
}
form.PermissionsRadioSelector > div > label > div {
  margin-left: 5px;
  flex: 1;
}
form.PermissionsRadioSelector > div > label > div div.info {
  font-size: 90%;
  color: #bdbdbd;
}
/* Scratchpad guide */
.scratchpad-guide {
  position: fixed;
  left: 12rem;
  bottom: 7rem;
  z-index: 600;
  max-width: 14rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 0.5rem;
  color: white;
  text-shadow: 1px 1px 1px black;
}
.scratchpad-guide .scratchpad-guide-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  gap: 1rem;
}
.scratchpad-guide ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.scratchpad-guide li {
  margin: 0.25rem 0;
}
.scratchpad-guide li.done,
.scratchpad-guide li.skipped {
  opacity: 0.45;
}
.scratchpad-guide .mark {
  display: inline-block;
  width: 1.75rem;
  font-family: monospace;
}
.scratchpad-guide .hint {
  margin: 0.25rem 0 0.25rem 1.75rem;
  color: #aaa;
}
.scratchpad-guide button.linkish {
  margin-left: 1.75rem;
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.scratchpad-guide button.linkish:hover {
  color: #eee;
}
.scratchpad-guide.scratchpad-guide-mini {
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.5rem 1rem;
}
.scratchpad-guide.scratchpad-guide-mini button.linkish {
  margin-left: 0;
  color: white;
}
.scratchpad-guide-restart {
  position: fixed;
  left: 12rem;
  bottom: 7rem;
  z-index: 600;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 0.5rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  border: none;
  cursor: pointer;
}
/* Help */
.help-overlay * {
  color: #eee;
}
.help-overlay .colos {
  display: flex;
}
.help-overlay .colos > ul {
  flex: 1;
}
.help-overlay .colos > ul:last-child {
  padding-left: 8px;
}
.help-overlay .bindings {
  margin: 0;
  padding: 0;
}
.help-overlay .bindings li {
  list-style: none;
  margin: 0 0 2px 0;
}
.help-overlay .bindings .titl {
  padding-bottom: 1rem;
  text-shadow: 1px 1px 3px black;
}
.help-overlay .bindings span {
  display: inline-block;
  text-align: center;
  min-width: 18px;
  max-width: 64px;
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  background: linear-gradient(#444, #666);
  border: 2px solid black;
  border-radius: 4px;
  box-shadow: inset -4px -4px 0 #333;
}
.help-overlay .bindings u {
  display: block;
  font-weight: bold;
  margin-top: 1rem;
}
.help-overlay .bindings u + p {
  color: #aaa;
  display: inline-block;
  margin: 0;
}
.help-overlay .scratchpad-help-steps {
  margin: 0 0 1rem 1.25rem;
  padding: 0;
  line-height: 1.5;
}
.help-overlay .scratchpad-help-outro {
  margin: 0 0 1rem 0;
  color: #aaa;
  font-size: 0.9em;
}
/* Parcel info + debug tools */
.parcel-information-overlay h2,
.parcel-information-overlay h3,
.parcel-information-overlay h4,
.parcel-information-overlay h5 {
  color: #d8d8d8;
}
.parcel-information-overlay a {
  color: #969696;
}
.parcel-information-overlay p {
  margin-bottom: 1px;
}
.parcel-information-overlay .parcels-details {
  padding: 5px;
  border-radius: 4px;
  border: none;
  background-color: var(--tinge);
}
.parcel-information-overlay .actions {
  margin: 5px 0 5px 7px;
}
.parcel-information-overlay .actions > li {
  margin: 5px 0 2px 2px;
}
.parcel-information-overlay .actions > li a {
  text-decoration: none;
  background-color: var(--dark);
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
  height: 15px;
  margin-right: 3px;
}
.parcel-information-overlay .actions > li a:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.parcel-information-overlay .actions > li a[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.parcel-information-overlay .actions > li a[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.parcel-information-overlay .actions > li:hover a {
  background-color: #464646;
}
.parcel-information-overlay .overlay-parcel-info-content {
  display: flex;
  flex-direction: column;
  background-color: var(--tinge);
  border-radius: 4px;
  padding: 8px;
  margin: 2px 2px 10px;
}
.parcel-information-overlay .overlay-parcel-info-content > * {
  margin-bottom: 8px;
}
.parcel-information-overlay .overlay-parcel-info-content .event-item {
  background-color: #1d1d1d;
}
.parcel-information-overlay .overlay-parcel-info-content p {
  margin-bottom: 2px;
}
.parcel-information-overlay .overlay-parcel-info-content h1,
.parcel-information-overlay .overlay-parcel-info-content h2,
.parcel-information-overlay .overlay-parcel-info-content h3,
.parcel-information-overlay .overlay-parcel-info-content h4,
.parcel-information-overlay .overlay-parcel-info-content h5 {
  margin: 2px 0;
  text-shadow: none;
}
.parcel-information-overlay .womp {
  width: 128px;
}
.debug-tools-overlay h2,
.debug-tools-overlay h3,
.debug-tools-overlay h4,
.debug-tools-overlay h5 {
  color: #d8d8d8;
}
.debug-tools-overlay a {
  color: #969696;
}
.debug-tools-overlay p {
  margin-bottom: 1px;
}
.debug-tools-overlay .parcels-details {
  padding: 5px;
  border-radius: 4px;
  border: none;
  background-color: var(--tinge);
}
.debug-tools-overlay .actions {
  margin: 5px 0 5px 7px;
}
.debug-tools-overlay .actions > li {
  margin: 5px 0 2px 2px;
}
.debug-tools-overlay .actions > li a {
  text-decoration: none;
  background-color: var(--dark);
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
  height: 15px;
  margin-right: 3px;
}
.debug-tools-overlay .actions > li a:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.debug-tools-overlay .actions > li a[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.debug-tools-overlay .actions > li a[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.debug-tools-overlay .actions > li:hover a {
  background-color: #464646;
}
.debug-tools-overlay .overlay-parcel-info-content {
  display: flex;
  flex-direction: column;
  background-color: var(--tinge);
  border-radius: 4px;
  padding: 8px;
  margin: 2px 2px 10px;
}
.debug-tools-overlay .overlay-parcel-info-content > * {
  margin-bottom: 8px;
}
.debug-tools-overlay .overlay-parcel-info-content .event-item {
  background-color: #1d1d1d;
}
.debug-tools-overlay .overlay-parcel-info-content p {
  margin-bottom: 2px;
}
.debug-tools-overlay .overlay-parcel-info-content h1,
.debug-tools-overlay .overlay-parcel-info-content h2,
.debug-tools-overlay .overlay-parcel-info-content h3,
.debug-tools-overlay .overlay-parcel-info-content h4,
.debug-tools-overlay .overlay-parcel-info-content h5 {
  margin: 2px 0;
  text-shadow: none;
}
.debug-tools-overlay .womp {
  width: 128px;
}
.parcel-states .unordered-list {
  list-style: none;
  color: #fff;
  margin-top: 5px;
  border-top: 1px solid #6b6b6b;
}
.parcel-states .unordered-list li {
  margin: 4px 1px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.parcel-states .unordered-list li:hover {
  background-color: #272727aa;
}
.parcel-states .unordered-list a {
  color: #fff;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.parcel-states .overlay-header {
  background: var(--tinge);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
}
.overlay.inspect-feature {
  background: #0d0d0d;
  border-radius: 5px;
  padding: 10px;
  width: 25vw;
}
.overlay.inspect-feature.view-source .close {
  display: block;
}
.overlay.inspect-feature pre {
  font-family: monospace;
  user-select: text;
  padding: 5px;
  max-height: 70vh;
  overflow-y: auto;
}
.overlay.inspect-feature .feature-inspector-container {
  padding: 10px;
  user-select: text;
}
.overlay.inspect-feature .feature-inspector-container table tr.-moderatorOnly th,
.overlay.inspect-feature .feature-inspector-container table tr.-moderatorOnly td,
.overlay.inspect-feature .feature-inspector-container table tr.-moderatorOnly td a {
  color: #7684ff;
}
.overlay.inspect-feature .feature-inspector-container table th,
.overlay.inspect-feature .feature-inspector-container table td {
  text-align: left;
  padding: 5px;
}
.overlay.inspect-feature .feature-inspector-options {
  margin-top: 10px;
}
.overlay.inspect-feature .feature-inspector-options h4 {
  margin: 10px 0;
}
.overlay.inspect-feature .feature-inspector-options.-moderator h4 {
  color: #7684ff;
}
.overlay.inspect-feature .feature-inspector-options.-builder h4 {
  color: #ffef76;
}
.overlay.inspect-feature .feature-inspector-options button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.overlay.inspect-feature .feature-inspector-options button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.overlay.inspect-feature .feature-inspector-options button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay.inspect-feature .feature-inspector-options button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
/* Explorer: users online + nearby players + search */
.ExplorerUsersOnline {
  display: block;
  list-style: none;
}
.ExplorerUsersOnline li {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  margin: 5px -5px;
}
.ExplorerUsersOnline li:hover {
  background-color: #272727aa;
}
.ExplorerUsersOnline li > div:first-of-type {
  flex: 2;
}
.ExplorerUsersOnline li > div:last-of-type {
  flex: 1;
  text-align: right;
  align-self: center;
}
.ExplorerUsersOnline li > div:last-of-type small {
  display: block;
}
.ExplorerUsersOnline a {
  color: #fff;
}
div.NearbyPlayers {
  background: #222;
  border-radius: 5px;
  margin: 2px 0;
}
div.NearbyPlayers header {
  cursor: pointer;
}
div.NearbyPlayers p {
  color: #fbfafb;
  margin: 3px 0 0 5px;
}
div.NearbyPlayers div.ScrollContainer {
  max-height: 100px;
  overflow: hidden auto;
}
div.NearbyPlayers ul {
  margin: 0;
  padding: 10px;
  list-style: none;
  column-count: 2;
}
div.NearbyPlayers ul li {
  cursor: pointer;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  white-space: nowrap;
}
div.NearbyPlayers ul li:hover {
  text-decoration: underline;
}
div.NearbyPlayers ul li span.player-name {
  border-radius: 7px;
  padding: 0 6px;
  display: inline-block;
}
.SearchBar {
  position: relative;
}
.SearchBar input {
  width: 100%;
  box-sizing: border-box;
  color: #fff;
}
.SearchBar:focus-within ul {
  display: block;
}
.SearchBar ul {
  display: none;
  position: absolute;
  background: #1d1d1df2;
  list-style: none;
  z-index: 2;
  left: 0;
  right: 0;
  border: 1px solid #424242;
  border-radius: 3px;
}
.SearchBar li {
  padding: 5px 10px;
  cursor: pointer;
}
.SearchBar li header {
  font-weight: bold;
}
.SearchBar li:hover {
  background: #dc1e1e;
}
/* Map (leaflet) - .map-icon + MarkersClusters live in common.less */
.map.map-overlay {
  min-width: 10vw;
  height: 75vh;
  max-height: 75vh;
  overflow: hidden;
  margin-bottom: 20px;
}
.map.map-overlay .leaflet-tile-pane {
  opacity: 0.5;
}
.map.leaflet-container {
  width: 100%;
  border: 2px solid #333333a6;
  background: #333a;
  border-radius: 4px;
}
.map.leaflet-container > button {
  position: absolute;
  z-index: inherit;
  padding: 2px 0;
  top: 5px;
  right: 5px;
  cursor: pointer;
  border: #6d6d6d 2px solid;
  border-radius: 4px;
}
.map.leaflet-container > button:hover {
  background-color: #505050;
  border-color: #fff;
}
.map.leaflet-container .map-teleport-popup button {
  cursor: pointer;
  border: #b6b6b6 2px solid;
  border-radius: 4px;
  color: black;
  margin: 2px;
  padding: 4px;
}
.map.leaflet-container .map-teleport-popup button:hover {
  background-color: #e6e6e6;
}
.map.leaflet-container .leaflet-control-layers {
  visibility: visible;
  color-scheme: light;
  background-color: #ffffffbf;
}
.map.leaflet-container div.SearchMapBar {
  position: absolute;
  z-index: 3001;
  top: 10px;
  left: 50px;
  width: 25%;
  height: 25px;
}
.map.leaflet-container div.SearchMapBar input {
  width: 100%;
  height: 100%;
  font-size: larger;
}
.map .leaflet-control-zoom-in,
.map .leaflet-control-zoom-out {
  text-indent: 1px;
  padding: 0 !important;
}
/* Connection status */
.ConnectionStatus {
  position: absolute;
  z-index: 100;
  padding: 3px 3px 0 3px;
  top: 4rem;
  left: 1.1rem;
  opacity: 0.85;
}
.ConnectionStatus:hover {
  cursor: help;
}
.ConnectionStatus i {
  font-size: 21px;
  color: #ff9303;
  text-shadow: 0 2px #601f10;
}
.ConnectionStatus.-disconnected i {
  color: #ff3b3b;
  text-shadow: 0 2px #6c1212;
}
.ConnectionStatus.-connected,
.ConnectionStatus.-hidden {
  display: none;
}
/* Upload status */
.upload-status {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000000;
  width: 220px;
  border-radius: 10px;
  padding: 15px 50px 15px 20px;
  color: #cacaca;
  box-sizing: border-box;
  overflow: hidden;
  transition: left 0.5s ease-in-out;
}
.upload-status.-hidden {
  left: -250px;
}
.upload-status ul {
  overflow: hidden;
}
.upload-status li {
  margin-top: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: none;
}
/* Minimap corner controls */
.minimap-corner-controls {
  position: fixed;
  bottom: calc(15vw - 26px);
  right: 4px;
  z-index: 10;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
}
.minimap-corner-controls > button {
  pointer-events: auto;
}
@media only screen and (max-width: 800px) {
  .minimap-corner-controls {
    display: none;
  }
}
.minimap-expand,
.minimap-online-count {
  box-sizing: border-box;
  height: 22px;
  min-height: 22px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  color: rgba(255, 255, 255, 0.75);
  padding: 0 5px;
  cursor: pointer;
  border-radius: 3px;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.minimap-expand:hover,
.minimap-online-count:hover {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.minimap-expand {
  width: 22px;
  padding: 0;
  line-height: 0;
  font-size: inherit;
}
.minimap-online-count {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-shadow: 1px 1px black;
  aspect-ratio: auto;
}
/* Conga status overlays */
.feature-mode-overlay,
.conga-status-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(170, 170, 170, 0.582);
  color: white;
  border-radius: 0.5rem;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}
.feature-mode-overlay {
  bottom: 4rem;
  padding: 0.5rem 1rem;
}
.conga-status-overlay {
  bottom: 6.75rem;
  padding: 0.45rem 1rem 0.5rem;
  text-align: center;
  white-space: normal;
  max-width: min(22rem, 92vw);
}
.conga-status-overlay--join-hint {
  background: rgba(90, 130, 95, 0.55);
}
.conga-status-overlay--started {
  background: rgba(120, 110, 170, 0.55);
}
.conga-status-overlay__badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.conga-status-overlay__main {
  font-size: 0.95rem;
  white-space: nowrap;
}
.conga-status-overlay__hint {
  font-size: 0.72rem;
  opacity: 0.88;
  margin-top: 0.2rem;
  white-space: nowrap;
}
.conga-status-overlay__kbd {
  font-family: ui-monospace, monospace;
  font-weight: 600;
}
/* Mobile controls */
div.mobile-buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
div.mobile-buttons div.mobile-controls-container {
  text-align: right;
  height: 3.2rem;
  margin: 1rem;
}
div.mobile-buttons div.mobile-controls-container > button.hex-button {
  position: relative;
  padding: 0;
  margin: 0 0.5rem 0 0;
  font-size: 0.8rem;
  border: none;
  color: #f3f3f3;
  border-radius: 2rem;
  background: #3335 !important;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.72rem;
  text-align: center;
  touch-action: none;
}
/* Overlay windows (admin / nft / take-womp etc) */
.OverlayWindow {
  background: #0d0d0d;
  color: #f5f5f0;
  border: none;
  border-radius: 1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  max-height: 95vh;
  overflow: auto;
  padding: 1rem;
  z-index: 12000;
}
@media only screen and (max-width: 800px) {
  .OverlayWindow {
    width: 80vw;
    height: 95vh;
  }
}
.OverlayWindow h1,
.OverlayWindow h2,
.OverlayWindow h3,
.OverlayWindow h4,
.OverlayWindow h5,
.OverlayWindow h6 {
  color: inherit;
}
.OverlayWindow h1 {
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.OverlayWindow input,
.OverlayWindow button,
.OverlayWindow select,
.OverlayWindow textarea {
  color: #f5f5f0;
}
.OverlayWindow input:disabled,
.OverlayWindow button:disabled,
.OverlayWindow select:disabled,
.OverlayWindow textarea:disabled {
  color: #666;
}
.OverlayWindow .close {
  background: none;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  font-size: 1rem;
  color: #ccc;
  cursor: pointer;
}
.OverlayWindow.-auto-height {
  height: fit-content;
}
@media only screen and (max-width: 800px) {
  .OverlayWindow.-auto-height {
    height: 90%;
  }
}
.OverlayWindow.-fixed {
  position: fixed;
}
.OverlayWindow iframe {
  border-radius: 1rem;
  background: #eee;
}
.ParcelAdminWindow .OverlayHighlightContent .FlexInput {
  display: flex;
}
.ParcelAdminWindow .OverlayHighlightContent input[type='text'],
.ParcelAdminWindow .OverlayHighlightContent textarea {
  flex: 2;
}
.nft-view {
  max-height: calc(100vh - 3rem);
  max-width: calc(100vw - 3rem);
  box-sizing: border-box;
  background: #0d0d0d;
}
.nft-view h1 a {
  text-decoration: none;
  color: white;
}
.nft-view img,
.nft-view video {
  display: block;
  border-radius: 1rem;
  height: calc(100vh - 20rem);
  object-fit: contain;
}
.nft-view .nft-description {
  white-space: pre-line;
  word-break: break-word;
  color: #ccc;
  padding: 1rem;
}
.AcaFeatureList {
  overflow: hidden auto;
}
.AcaFeatureList li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AcaFeatureList li li {
  margin-left: 10px;
}
.AcaFeatureList li + li {
  margin-top: 3px;
}
.AcaFeatureList ol {
  margin: 0;
  padding: 0;
}
.overlay.suspended-window {
  background-color: #333;
}
.overlay.suspended-window p {
  user-select: text;
}
.overlay.suspended-window button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.overlay.suspended-window button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.overlay.suspended-window button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay.suspended-window button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.overlay.suspended-window ul {
  margin: 0 0 0 15px;
}
/* Scripting */
.scripting-container-overlay {
  border-radius: 3px;
  padding: 5px;
  width: 60vw;
  background: #0d0d0d;
}
.scripting-container-overlay h4,
.scripting-container-overlay label,
.scripting-container-overlay a {
  color: #fff;
}
.scripting-container-overlay .scripting-container {
  display: flex;
  flex-direction: column;
  height: inherit;
}
.scripting-container-overlay .editor-toolbar {
  display: flex;
  margin-bottom: 5px;
}
.scripting-container-overlay .editor-toolbar .f {
  margin-right: 10px;
}
.scripting-container-overlay .editor-toolbar select {
  min-width: 130px;
  max-width: 180px;
}
@media only screen and (max-width: 870px) {
  .scripting-container-overlay .editor-toolbar {
    display: block;
  }
}
.scripting-container-overlay .script-editor {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #222;
  color: #ddd;
}
.scripting-container-overlay .scripting-buttonMenu {
  text-align: right;
  margin-top: 5px;
}
.scripting-container-overlay .scripting-buttonMenu button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #222;
  color: #f5f5f0;
  font: inherit;
  font-size: smaller;
  border-radius: 0;
  border: 1px solid #555;
  cursor: pointer;
}
.scripting-container-overlay .scripting-buttonMenu button:hover {
  background: #dc1e1e;
  border-color: #dc1e1e;
  color: #fff;
}
.scripting-container-overlay .scripting-buttonMenu button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.scripting-container-overlay .scripting-buttonMenu button[disabled]:hover {
  background: #222;
  border-color: #555;
  color: #f5f5f0;
}
.script-editor {
  margin: 0;
  padding: 0;
}
.script-editor .help-script,
.script-editor textarea {
  width: 100%;
  height: 25vh;
  font-size: 14px;
  line-height: 16px;
  background: #222;
  color: #fff;
  border-radius: 4px;
  border: none;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
  padding: 4px;
  margin-top: 0.5rem;
  outline: none;
}
.script-editor .help-script {
  height: unset;
}
.codeflask {
  background: #202123;
  color: #dcdcdc;
  caret-color: #fff;
}
.codeflask-container {
  width: 100%;
  height: 40vh;
  position: relative;
}
.codeflask-container textarea,
.codeflask-container pre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
  background: inherit;
  border: none;
  outline: none;
  resize: none;
}
.codeflask-container textarea {
  z-index: 110;
  color: transparent !important;
  background: transparent !important;
  caret-color: #fff !important;
}
.codeflask-container pre {
  z-index: 100;
}
/* Misc */
.home-button img {
  width: 26px;
  opacity: 0.8;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .home-button img {
    width: 38px;
    opacity: 1;
  }
}
@media prefers-color-scheme: dark {
  .home-button img {
    filter: invert();
  }
}
.home-button > a:hover {
  background: none !important;
}
.open-link {
  max-width: 45vw;
  box-sizing: border-box;
}
@media only screen and (max-width: 800px) {
  .open-link {
    max-width: unset;
    width: 95%;
  }
}
.open-link img {
  width: 100%;
  aspect-ratio: 2/1;
}
.open-link p.url {
  margin-top: 2rem;
  font-size: 1.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 500px;
}
.open-link p.url a {
  background-color: #333;
  border-radius: 0.5rem;
  text-decoration: underline;
}
.open-link a {
  text-decoration: underline;
}
.demi-tabs,
.inline-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.demi-tabs li,
.inline-tabs li {
  margin: 0;
  list-style: none;
  border-bottom: 2px solid transparent;
  line-height: 2rem;
  cursor: pointer;
}
.demi-tabs li.-active,
.inline-tabs li.-active {
  border-bottom: 2px solid #dc1e1e;
}
.demi-tabs {
  border-bottom: 1px solid var(--bright);
}
.demi-tabs li {
  padding: 0.1rem 1rem;
}
div.location a.address {
  width: 100vw;
  position: relative;
  color: white;
  font-weight: bold;
  font-size: 48px;
  letter-spacing: -2px;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
}
div.location a.address:hover {
  text-decoration: none;
}
@media only screen and (max-width: 800px) {
  div.location a.address {
    font-size: 32px;
    letter-spacing: 0;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  }
}
.audio-meter {
  min-height: 20px;
  background: #1f1f1f;
  padding: 1px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.audio-meter.clipping span {
  background: #c20000;
}
.audio-meter span {
  background: #00ff00;
  flex: 1;
  height: 10px;
  width: 100%;
}
.audio-meter span.audio-meter--r {
  margin-top: 1px;
}
.overflow {
  --lh: 1.2rem;
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 0.35rem;
}
.overflow::before {
  position: absolute;
  content: '...';
  inset-inline-end: 5px;
  bottom: 0;
  right: 0;
}
button[accesskey] kbd {
  text-decoration: none;
}
button[accesskey]:hover kbd {
  text-decoration: underline;
}
/* Map marker css icons */
div.css-icon div.party,
div.css-icon div.exhibition {
  border-radius: 50%;
  height: 18px;
  width: 18px;
  animation: pulsate 1s ease-out infinite;
}
div.css-icon div.exhibition {
  animation-duration: 3s;
}
div.css-icon .inner-circle {
  transform: translate(-20%, -20%);
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  display: inline-block;
}
@keyframes pulsate {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
* {
  accent-color: #dc1e1e;
}
.demi-tabs li.-active,
.inline-tabs li.-active {
  border-bottom-color: #dc1e1e;
}
.overlay.inspect-feature,
.scripting-container-overlay {
  background: #0d0d0d;
  color: #f5f5f0;
}