/*
#### This file contains styling for all client elements that are only on the client bundle.
*/
.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.torus-actions {
  padding: 5px 15px;
  margin: 5px -10px -10px;
}
.WalletInfo div.torus-actions a {
  align-items: center;
  display: inline-flex;
  padding: 3px 5px;
  margin-left: -5px;
}
.WalletInfo div.torus-actions a i {
  margin-right: 4px;
}
.WalletInfo div.torus-actions a + a {
  margin-left: 5px;
}
.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%;
  bottom: 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: #222c;
  --bright: #f3f3f3;
}
* {
  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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.roundedButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.roundedButton[disabled]:hover {
  background: #aaa;
}
a.RoundedButton,
button.RoundedButton {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
a.RoundedButton[disabled],
button.RoundedButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
a.RoundedButton[disabled]:hover,
button.RoundedButton[disabled]:hover {
  background: #aaa;
}
.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;
}
/* 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: 4px;
  border: black solid 2px;
  background-size: 200% 200%;
  background-position: 0 100%;
  background-color: #55278c;
  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: linear-gradient(45deg, #ae2dde, #4283df, #d13465);
  background-size: 400% 400%;
  -webkit-animation: button-rainbow-hover 1.5s ease infinite;
  animation: button-rainbow-hover 1.5s ease infinite;
  animation-fill-mode: forwards;
  color: white !important;
}
a.play-now {
  flex: 0.8;
}
a.play-now:only-child {
  flex: auto;
}
a.xr-now {
  flex: 0.2;
  margin-left: 4px;
  background: linear-gradient(-42deg, #d13465, #ae2dde, #4283df);
}
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: linear-gradient(339deg, #ff0000, #ffe300, #02ff00, #00fdff, #1c00ff, #fd00ff, #ff0000);
  background-size: 1400% 1400%;
  color: black;
  -webkit-animation: ColorRoll 4s ease infinite;
  -moz-animation: ColorRoll 4s ease infinite;
  animation: ColorRoll 4s ease infinite;
}
@-webkit-keyframes ColorRoll {
  0% {
    background-position: 14% 0;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0;
  }
}
@-moz-keyframes ColorRoll {
  0% {
    background-position: 14% 0;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0;
  }
}
@keyframes ColorRoll {
  0% {
    background-position: 14% 0;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0;
  }
}
.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;
}
/* Emoji badges */
.add-emoji,
.emoji-badge {
  color: #000;
  float: left;
  position: relative;
  border-radius: 3px;
  margin: 3px 5px 3px 3px;
  display: flex;
  align-items: center;
  column-gap: 3px;
}
.emoji-badge {
  cursor: pointer;
}
.emoji-badge .emoji {
  display: block;
  height: 1.5rem;
  padding: 0 0.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 1rem;
  border: none;
  background-color: #ddd;
}
.emoji-badge .emoji u {
  padding-left: 0.3rem;
  text-decoration: none;
  color: #555;
}
.emoji-badge .emoji.changing {
  cursor: wait;
  background-color: #ccbddc;
  border-color: #666;
  animation: color-cycle 1s infinite alternate ease-in-out;
}
@keyframes color-cycle {
  from {
    background-color: #f7f7f7;
  }
  to {
    background-color: #ccbddc;
  }
}
.emoji-badge:hover .emoji {
  background-color: #ccbddc;
  border-color: #666;
}
.emoji-badge.has-owner-vote .emoji {
  background-color: #ccbddc;
  border-color: #666;
}
.emoji-badge.has-owner-vote .emoji:hover {
  background-color: #f7f7f7;
  border-color: #ddd;
}
.emoji-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: flex-start;
  flex-direction: row;
}
.emoji-scores .spinner {
  display: block;
  align-self: center;
}
.emoji-scores .add-emoji svg {
  height: 1.25rem;
}
.emoji-scores .add-emoji svg:hover {
  filter: invert(18%) sepia(0%) saturate(0%) hue-rotate(254deg) brightness(92%) contrast(91%);
}
.emoji-scores .add-emoji.disabled svg {
  filter: invert(15%) sepia(0%) saturate(1557%) hue-rotate(179deg) brightness(96%) contrast(84%);
}
.emoji-scores .add-emoji:hover:not(.emoji-scores .add-emoji.disabled) .emojis-box {
  display: block;
}
.emoji-scores .add-emoji .emojis-box {
  display: none;
  color: #55258c;
  position: absolute;
  width: 290px;
  height: fit-content;
  background: #efefef;
  border-radius: 4px;
  border: 1px solid #ddd;
  left: -12px;
  top: 50%;
  z-index: 100;
  transition: all 0.1s ease-out;
}
.emoji-scores .add-emoji .emojis-box .emoji-icon {
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 190%;
  display: inline-block;
  border-radius: 5px;
  margin: 8px -1px 0 8px;
  text-align: center;
  transition: all 0.1s;
}
.emoji-scores .add-emoji .emojis-box .emoji-icon.has-owner-vote {
  background-color: #55258c;
}
.emoji-scores .add-emoji .emojis-box .emoji-icon:hover {
  transform: scale(1.2);
}
.emoji-scores .add-emoji .emojis-box.in-world {
  width: 250px;
}
.emoji-scores .add-emoji .emojis-box.in-world .emoji-icon {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 120%;
  margin: 4px -1px 0 4px;
}
.emoji-scores.in-world .add-emoji svg {
  filter: invert(97%) sepia(73%) saturate(7483%) hue-rotate(184deg) brightness(92%) contrast(87%);
}
.emoji-scores.in-world .add-emoji svg:hover {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(58deg) brightness(105%) contrast(101%);
}
.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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.PopupAction.-inWorld button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.PopupAction.-inWorld button[disabled]:hover {
  background: #aaa;
}
.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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.mailbox-icon.-inWorld button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.mailbox-icon.-inWorld button[disabled]:hover {
  background: #aaa;
}
.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 {
  min-width: 20%;
}
.SplitPanel > aside.-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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
}
.Panel > header button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.Panel > header button[disabled]:hover {
  background: #aaa;
}
.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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.login-options.-inWorld button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-options.-inWorld button[disabled]:hover {
  background: #aaa;
}
.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;
}
.Pagination a:first-child,
.Pagination a:last-child {
  padding: 0 8px;
}
.Pagination a,
.Pagination span {
  min-width: 24px;
  text-align: center;
  height: 24px;
  line-height: 24px;
  margin-right: 10px;
}
.Pagination span {
  color: #aaa;
}
.Pagination a {
  border: 1px solid var(--border);
  display: inline-block;
  text-decoration: none;
}
.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;
}
.editor-field label {
  display: block;
}
.editor-field .fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
.editor-field .fields .vector-field {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  margin: 0 2px;
}
.editor-field .fields .vector-field .minus,
.editor-field .fields .vector-field .plus {
  width: 16px;
  display: inline-block;
  text-align: center;
}
.editor-field .fields .vector-field .minus:hover,
.editor-field .fields .vector-field .plus:hover {
  cursor: pointer;
}
.editor-field .fields .vector-field input {
  padding: 3px 0;
  text-align: center;
  border: 1px solid transparent;
}
.editor-field .fields .vector-field input:focus {
  outline: none;
}
.dark .editor-field .error {
  color: #ff6644;
  text-shadow: 0 1px #0e0e0e;
}
.dark .editor-field .fields .vector-field {
  background: #333;
  border: 1px solid #111;
}
.dark .editor-field .fields input {
  color: #aaa;
  background: #222;
  border: 1px solid #111;
  border-top: 0;
  border-bottom: 0;
}
.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: #55258c;
  animation: none;
}
/* edit-name-window */
.name-window .f {
  position: relative;
  padding-left: 4rem;
  margin-bottom: 1.2rem;
}
.name-window .f label {
  position: absolute;
  left: 0;
  opacity: 0.69;
}
.name-window .f button {
  cursor: pointer;
}
.name-window .f .subtle {
  opacity: 0.69;
}
.name-window .f input,
.name-window .f select {
  width: 100%;
}
a {
  text-decoration: none;
  color: #55258c;
}
a:hover {
  text-decoration: underline;
  color: #55258c;
}
a:visited {
  color: #000000;
}
.ready-player-one .OverlayWindow {
  background: #181511;
  color: #f5f5f0;
  box-shadow: none;
}
.ready-player-one .OverlayWindow a {
  color: inherit;
}
.ready-player-one .OverlayWindow a.external:after {
  filter: invert(78%) sepia(35%) saturate(913%) hue-rotate(208deg) brightness(102%) contrast(104%);
}
.mailbox-dialog {
  min-height: 50vw;
}
.OverlayWindow {
  border: none;
  border-radius: 4px;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
  left: 50%;
  max-height: 95vh;
  overflow: auto;
  padding: 1rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  z-index: 12000;
  /* Makes more sense for OverlayWindow to be centered by default. Especially on web. */
  /* Creates a small window that isn't exactly a Main UI window
This is mainly used for the script-browser in exanded editor. The idea is to create an very small overlay window
similar to a dropdown */
}
.OverlayWindow h1,
.OverlayWindow h2,
.OverlayWindow h3,
.OverlayWindow h4,
.OverlayWindow h5,
.OverlayWindow h6 {
  color: inherit;
}
.OverlayWindow header img.blockie {
  position: absolute;
  left: 1rem;
  top: 1.3rem;
}
.OverlayWindow input,
.OverlayWindow button,
.OverlayWindow select,
.OverlayWindow textarea {
  color: #f5f5f0;
}
.OverlayWindow input i,
.OverlayWindow button i,
.OverlayWindow select i,
.OverlayWindow textarea i {
  color: #f5f5f0;
}
.OverlayWindow input:disabled,
.OverlayWindow button:disabled,
.OverlayWindow select:disabled,
.OverlayWindow textarea:disabled {
  color: #666;
}
@media only screen and (max-width: 800px) {
  .OverlayWindow {
    width: 80vw;
    height: 95vh;
  }
}
.OverlayWindow .close {
  background: none;
  border-radius: 2rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  color: #ccc;
  cursor: pointer;
}
.OverlayWindow h1 {
  font-weight: bold;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.OverlayWindow h1 a {
  text-decoration: underline !important;
}
.OverlayWindow h1 + .sub {
  font-size: 1rem;
}
.OverlayWindow .nft-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}
.OverlayWindow .nft-overlay a:hover {
  background: none !important;
}
.OverlayWindow .nft-overlay img {
  max-width: 100%;
  border-radius: 0.1rem;
}
.OverlayWindow p {
  user-select: text;
}
.OverlayWindow p,
.OverlayWindow h4 {
  margin: 0 0 1rem 0;
}
.OverlayWindow div.OverlayHighlightContent.-canEdit h4 {
  color: #ffef76;
}
.OverlayWindow div.OverlayHighlightContent.-moderator h4 {
  color: #7684ff;
}
.OverlayWindow div.OverlayHighlightContent.-wallet p {
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
}
.OverlayWindow div.OverlayHighlightContent button {
  margin: 2px;
}
.OverlayWindow.-takeWomp {
  height: auto;
  width: 700px;
}
.OverlayWindow.-takeWomp > header {
  padding: 16px;
}
.OverlayWindow.-takeWomp > header h3 i {
  margin-right: 3px;
}
.OverlayWindow.-takeWomp > header button.close {
  top: 16px;
  right: 16px;
}
.OverlayWindow.-noHiddenOverflow {
  overflow: initial;
}
.OverlayWindow.-WhatsNew .PagingButtons {
  margin-bottom: 15px;
}
.OverlayWindow.-WhatsNew .PagingButtons span {
  font-size: larger;
}
.OverlayWindow.-WhatsNew .markup {
  padding-left: 20px;
}
.OverlayWindow.-auto-height {
  height: fit-content;
}
@media only screen and (max-width: 800px) {
  .OverlayWindow.-auto-height {
    height: 90%;
  }
}
.OverlayWindow.-fixed {
  position: fixed;
}
.OverlayWindow.-top-offset {
  top: 10vh;
  transform: none;
  margin-left: -25vw;
}
.OverlayWindow.-right-offset {
  animation-name: slidein-right-offset;
  transform: none;
  left: unset;
  right: 10px;
  top: 54px;
}
.OverlayWindow.-script-library {
  animation-duration: unset;
  animation-name: none;
  top: unset;
  left: unset;
  transform: none;
  right: 0;
}
/* Grid for showing things*/
.CardList {
  padding: 4px 4px 4px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  width: 100%;
}
.CardList .EmptyList {
  margin: auto;
}
@media screen and (min-height: 1200px) {
  .CardList {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}
.CardList.small {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.CardList.small .Card {
  margin: 2px 4px;
  padding: 4px;
}
.EmptyList {
  display: flex;
  flex-direction: column;
}
.EmptyList .icon {
  display: none;
}
.EmptyList .lead {
  margin: 0;
  display: none;
}
.EmptyList .subtitle {
  margin: 0;
}
.Card {
  justify-content: center;
  margin: 4px 4px;
  padding: 4px 4px 4px 4px;
  display: block;
  position: relative;
  text-decoration: unset;
  overflow: hidden;
  cursor: pointer;
}
.Card img {
  border-radius: 0.25rem;
  box-sizing: border-box;
  display: block;
  margin: auto auto 5px;
  height: auto;
  width: 100%;
  object-fit: scale-down;
}
.Card .img_container {
  position: relative;
}
.Card .womp-time {
  display: none;
}
.Card.-compact {
  margin: 0;
  padding: 4px;
  border-radius: 0.25rem;
}
.Card.-compact .womp-time {
  display: none;
}
.Card.-compact:hover {
  background: none;
}
.Card.-compact:hover * {
  text-shadow: 1px 1px 3px black;
}
.Card.-compact:hover img {
  border: 2px solid white;
}
.Card a {
  text-decoration: none;
}
.Card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Card header div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.Card header div.user {
  font-size: 85%;
  float: right;
  text-align: right;
}
.Card header div.user a {
  color: var(--small);
}
.Card header div + div {
  margin-left: 4px;
}
.Card div.userDescription {
  display: flex;
  justify-content: space-between;
  color: #7e7e7e;
}
.Card div.userDescription div.description {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-style: italic;
  flex: 1;
  padding: 6px 0 0 0;
}
.Card div.teleport {
  display: flex;
  justify-content: center;
}
.Card div.teleport a,
.Card div.teleport button {
  text-align: center;
  background: #ffffff;
  border: 1px solid #7e7e7e;
  margin-top: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.Card div.userCount {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  border-radius: 0.25rem;
  background: #3d2f5fbf;
  color: #ececec;
}
.womp_time > p {
  font-size: 80%;
  font-weight: 600;
  float: right;
  line-height: 0;
  padding: 2px 10px 10px 0;
  margin: 2px;
}
.NewAssetOptions > * + h4 {
  margin-top: 10px;
}
.NewAssetOptions input[type='text'],
.NewAssetOptions select,
.NewAssetOptions textarea {
  width: 100%;
  box-sizing: border-box;
}
.NewAssetOptions textarea {
  margin: 0;
  width: 100%;
  height: 39px;
  padding: 5px;
  resize: vertical;
  min-height: 50px;
  max-height: 100px;
  box-sizing: border-box;
}
.AssetCard {
  display: block;
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}
.AssetCard.-small {
  width: 140px;
}
.AssetCard.-small > img {
  width: 140px;
  height: 140px;
}
.AssetCard.-large {
  width: 180px;
}
.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;
  box-sizing: border-box;
  display: block;
  margin-bottom: 5px;
}
.AssetCard a {
  text-decoration: none;
  color: #4c056a;
}
.AssetCard a:hover {
  color: #ce89eb;
}
.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 + div {
  margin-left: 4px;
}
.AssetCard div.viewsCount {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #3d2f5fbf;
  color: #ececec;
}
.AssetCard div.time {
  font-size: 90%;
}
.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 h3 {
  margin-bottom: 0.5rem;
}
.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 * {
  font-size: inherit;
}
.asset-library .SortingOptions {
  font-size: smaller;
}
.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;
  /* The buttons at the bottom of inspector: Remove, Report.. */
}
.inspector .asset-browser-inspector button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.inspector .asset-browser-inspector button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.inspector .asset-browser-inspector button[disabled]:hover {
  background: #aaa;
}
.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;
}
.assets {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.assets .asset-browser {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px;
}
.TopBar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: var(--semi);
  color: var(--bright);
  border-radius: 0;
  padding-left: 4px;
  opacity: 0.7;
  z-index: 1;
}
@media only screen and (max-width: 800px) {
  .TopBar {
    right: 0.5rem;
  }
}
.TopBar i {
  line-height: unset;
}
.TopBar a,
.TopBar a:visited {
  color: inherit;
}
.TopBar.-collapsed {
  padding-left: 0;
}
.TopBar.-collapsed .grabber {
  margin-left: 0;
  border-radius: 6px;
}
.TopBar.-collapsed li {
  display: none;
}
.TopBar.-collapsed li:last-child {
  display: block;
}
.TopBar > ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}
.TopBar > ul > li {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .TopBar > ul > li {
    font-size: 16px;
  }
}
.TopBar > ul > li > div.dropDown {
  white-space: normal;
  font-weight: normal;
  line-height: normal;
  cursor: default;
}
.TopBar > ul > li.-user {
  font-weight: bold;
}
.TopBar > ul > li.-user > i {
  padding-right: 2px;
  vertical-align: bottom;
}
.TopBar .location a:hover {
  background: none !important;
}
.TopBar .location small {
  opacity: 0.5;
}
.TopBar .TopbarEditableNameField input {
  padding: 0 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  line-height: 18px;
  font-size: 16px;
  max-width: 50px;
  background: none;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .TopBar .TopbarEditableNameField input {
    max-width: 90px;
  }
}
.TopBar .TopbarEditableNameField input:focus {
  border-bottom: 1px solid black;
}
.TopBarOverlay {
  display: block;
  position: absolute;
  border-radius: 0;
  background: var(--semi);
  margin-left: -80px;
  margin-top: 10px;
  width: 245px;
  padding: 15px;
  right: 4rem;
  font-size: 13px;
  z-index: 12001;
}
@media only screen and (max-width: 800px) {
  .TopBarOverlay {
    padding: 6px;
  }
}
.TopBarOverlay label {
  cursor: pointer;
}
.TopBarOverlay header span.closeButton {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.TopBarOverlay h2 {
  margin-top: 0;
}
.TopBarOverlay h4 {
  color: #fafafa;
  font-size: 1em;
  text-shadow: none;
}
.TopBarOverlay.-signIn {
  width: 260px;
}
.TopBarOverlay.-signIn header h2 {
  text-align: center;
  font-weight: normal;
}
.TopBarOverlay.-signIn a {
  color: #d1d1d1;
  text-decoration: underline;
}
.TopBarOverlay.-signIn label.rememberCheckbox {
  border-radius: 3px;
  padding: 5px;
  display: flex;
  font-size: 86%;
  align-items: center;
}
.TopBarOverlay.-signIn label.rememberCheckbox input {
  vertical-align: sub;
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.TopBarOverlay.-signIn label.rememberCheckbox span {
  flex: 1;
}
.TopBarOverlay.-persona {
  width: 180px;
}
.TopBarOverlay.-webPersona {
  width: 180px;
  left: 0;
  right: unset;
  margin-left: 0;
  margin-top: 0;
  border-top-left-radius: 0;
}
@media only screen and (max-width: 500px) {
  .TopBarOverlay.-webPersona {
    left: unset;
    right: 0;
  }
}
.TopBarOverlay .fs label {
  display: block;
}
.TopBarOverlay .fs label input[type='checkbox'] {
  vertical-align: bottom;
  margin-right: 5px;
  margin-bottom: 2px;
}
.TopBarOverlay .fs input[type='range'] {
  width: 230px;
}
.TopBarOverlay * + .fs {
  margin-top: 12px;
}
@media only screen and (max-width: 800px) {
  .TopBarOverlay * + .fs {
    margin-top: 6px;
  }
}
ul.PersonaMenu {
  list-style: none;
  margin: -6px -15px;
  font-size: 14px;
  padding: 0;
}
ul.PersonaMenu li {
  padding: 6px 20px;
  cursor: pointer;
}
ul.PersonaMenu li > span.unreadCount {
  background: #ff7979;
  padding: 0.3em 0.5em;
  border-radius: 12px;
  font-size: 82%;
}
ul.PersonaMenu li header {
  font-weight: bold;
}
span.unread {
  opacity: 0.4;
  border-radius: 1rem;
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  font-size: 0.72rem;
  position: relative;
  top: -0.1rem;
}
li.account {
  margin-bottom: 1.5rem;
  font-weight: bold;
}
li.account ul {
  font-weight: normal;
}
.WebTopBar {
  background: #333333a6;
  color: #ddd;
  text-shadow: 1px 1px 1px #111;
  border-radius: 6px;
  margin-left: auto;
  padding: 0 5px;
}
.WebTopBar i {
  line-height: unset;
}
@media only screen and (max-width: 500px) {
  .WebTopBar {
    padding: 5px 0;
  }
}
.WebTopBar > ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
@media only screen and (max-width: 500px) {
  .WebTopBar > ul {
    display: block;
  }
}
.WebTopBar > ul > li {
  font-size: 16px;
  list-style: none;
  margin: 0;
}
@media only screen and (max-width: 800px) {
  .WebTopBar > ul > li {
    font-size: 14px;
  }
}
.WebTopBar > ul > li:hover > div.dropDown.-hoverVisible {
  display: block;
}
.WebTopBar > ul > li.-unread > a > i {
  color: #ff6666;
}
.WebTopBar > ul > li > a {
  display: block;
  padding: 8px 10px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  color: unset;
}
@media only screen and (max-width: 500px) {
  .WebTopBar > ul > li > a {
    padding: 5px 20px;
  }
}
.WebTopBar > ul > li > a:hover {
  background-color: #111a;
}
.WebTopBar > ul > li > div.dropDown {
  white-space: normal;
  font-weight: normal;
  line-height: normal;
  cursor: default;
  position: relative;
  text-shadow: none;
}
.WebTopBar > ul > li > div.dropDown.-hoverVisible {
  display: none;
}
.WebTopBar > ul > li.-location {
  font-weight: bold;
}
.WebTopBar > ul > li.-user {
  font-weight: bold;
}
.WebTopBar > ul > li.-user > a > i {
  padding-right: 2px;
  vertical-align: bottom;
}
ul.WebMenu {
  list-style: none;
  margin: -6px -15px;
  font-size: 14px;
  padding: 0;
  text-shadow: 1px 1px 1px black;
}
ul.WebMenu li > a {
  display: block;
  padding: 6px 20px;
  cursor: pointer;
}
ul.WebMenu li > a > span.unreadCount {
  background: #ff7979;
  padding: 0.3em 0.5em;
  border-radius: 12px;
  font-size: 82%;
}
ul.WebMenu li > a i {
  display: inline-block;
  width: 20px;
  text-align: center;
}
ul.WebMenu li header {
  font-weight: bold;
}
.SortingOptions {
  margin: 5px 4px;
}
.SortingOptions > a,
.SortingOptions > button {
  padding: 4px 8px;
  text-decoration: none;
  background: #aaa;
  color: #111 !important;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 0;
}
.SortingOptions > a.active,
.SortingOptions > button.active {
  background: #848484;
}
.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: #b3b3b3;
}
.SortingOptions > a label,
.SortingOptions > button label {
  color: #111;
}
.SortingOptions > a.categories,
.SortingOptions > a.types {
  padding: 4px 0;
}
.SortingOptions > a.categories select,
.SortingOptions > a.types select {
  background: none;
  color: inherit;
  border: none;
}
.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 38px;
  position: relative;
  display: flex;
}
.FeatureSpawnList .add-buttons li.selectable {
  cursor: pointer;
}
.FeatureSpawnList .add-buttons li.selectable:hover {
  background: #3333;
  border-radius: 2px;
}
.FeatureSpawnList .add-buttons li.selectable .meta {
  opacity: 0.3;
  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;
}
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;
  overflow-y: auto;
}
div.NearbyPlayers ul {
  margin: 0;
  padding: 10px;
  list-style: none;
  display: block;
  column-count: 2;
}
div.NearbyPlayers ul li {
  cursor: pointer;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  white-space: nowrap;
  border-radius: 5px;
}
div.NearbyPlayers ul li:hover {
  text-decoration: underline;
}
div.NearbyPlayers ul li span.player-name {
  border-radius: 7px;
  padding: 0 6px;
  display: inline-block;
}
section.MyNFTSOverlay section.overlay-parcel-info-content.-flex {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}
section.MyNFTSOverlay section.overlay-parcel-info-content.-flex .Center h4 {
  margin: 3px;
}
section.MyNFTSOverlay div.NFTCard {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 29%;
  margin: 3px;
  padding: 2px;
  background-color: #462f4d;
  border-radius: 4px;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
}
section.MyNFTSOverlay div.NFTCard i {
  position: absolute;
  top: 0;
  right: -1px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
section.MyNFTSOverlay div.NFTCard i.eth {
  background-image: url('/images/ethereum_logo.png');
}
section.MyNFTSOverlay div.NFTCard i.polygon {
  background-image: url('/images/polygon-matic.png');
}
section.MyNFTSOverlay div.NFTCard img {
  width: 95%;
  min-height: 76px;
  max-height: 86px;
  margin: 3px;
}
section.MyNFTSOverlay div.NFTCard div.footer {
  width: 100%;
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}
section.MyNFTSOverlay div.NFTCard div.footer p {
  margin-bottom: 1px;
}
section.MyNFTSOverlay div.NFTCard div.footer p a {
  color: #9a9a9a;
}
section.MyNFTSOverlay div.NFTCard:hover {
  transform: scale(1.2);
}
section.MyNFTSOverlay div.description {
  padding: 0 6px;
}
section.MyNFTSOverlay div.description p {
  padding: 0;
}
section.MyNFTSOverlay div.scrollContainer {
  padding-bottom: 10px !important;
}
div.ExplorerMostReactedEmojis {
  margin-bottom: 0;
}
div.ExplorerMostReactedEmojis label {
  display: flex;
}
div.ExplorerMostReactedEmojis div.Carousel.-most-react-parcels .carousel-container {
  min-height: 105px;
}
div.ExplorerMostReactedEmojis div.Carousel.-most-react-parcels div.ParcelCard {
  position: relative;
}
div.ExplorerMostReactedEmojis div.Carousel.-most-react-parcels div.ParcelCard span {
  border-radius: 5px;
  position: absolute;
  top: -5px;
  left: -5px;
  color: lightgrey;
  background: #000000ab;
}
div.ExplorerMostReactedEmojis div.Carousel.-most-react-parcels div.ParcelCard > div {
  display: flex;
  flex-direction: column;
}
/* Mobile controls mobile*/
div.mobile-buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
div.mobile-buttons div.mobile-controls-container {
  text-align: right;
  height: 3.2rem;
  margin: 1rem;
  /* Camera view button mobile */
}
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;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.72rem;
  text-align: center;
  touch-action: none;
}
.InteractOverlay {
  background: var(--semi);
  overflow: auto;
  position: absolute;
  bottom: calc(4rem + 10px + 20px);
  left: 10px;
  margin-left: 0;
  top: 80px;
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 0.5rem;
  opacity: 0.8;
  transform: translateX(-100%);
  animation: slide-in-ltr 0.2s forwards ease-out;
  z-index: 2;
}
.InteractOverlay:focus-within {
  opacity: 1;
}
.InteractOverlay:hover {
  opacity: 1;
}
@keyframes slide-in-ltr {
  100% {
    transform: translateX(0%);
  }
}
.InteractOverlay > header {
  position: relative;
  padding: 4px 0;
  margin-bottom: 5px;
}
.InteractOverlay > header > button.close {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  background: #3335;
  border: none;
  right: 0;
  top: 0;
  position: absolute;
  cursor: pointer;
  margin-right: 0;
}
.InteractOverlay > header > button.close[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.InteractOverlay > header > button.close[disabled]:hover {
  background: #aaa;
}
.InteractOverlay div.card {
  background-color: #2222229e;
  border-radius: 5px;
  padding: 5px;
  margin: 3px 0;
}
.InteractOverlay div.card header {
  font-weight: 600;
  margin: 5px;
}
.InteractOverlay div.card button {
  cursor: pointer;
}
.InteractOverlay div.card div.notice {
  font-size: smaller;
  padding: 5px 11px 10px;
  font-style: italic;
  color: #aaa;
}
.InteractOverlay div.card span.count {
  margin-left: 10px;
  padding: 1px 5px;
  font-size: smaller;
  background-color: #7e5a8a;
}
.InteractOverlay div.card span.collapse {
  float: right;
  font-size: 12px;
}
.InteractOverlay > section {
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.InteractOverlay.-small-height {
  height: 42%;
  top: 10px;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .InteractOverlay.-small-height {
    height: 70%;
  }
}
.InteractOverlay.chat .channels {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}
.InteractOverlay.chat .channels .channel {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  border: 0;
  border-radius: 0;
  color: #e6e6e6;
  background: #111a;
  padding: 10px;
  margin: 0;
}
.InteractOverlay.chat .channels .channel:hover {
  background-color: #727272;
}
.InteractOverlay.chat .channels .channel.-active {
  color: #f6ffc4;
  background: var(--tinge);
}
.InteractOverlay.chat .channels .channel span.count {
  padding: 1px 5px;
  font-size: smaller;
  background-color: #7e5a8a;
}
.InteractOverlay.chat .channels .channel span.count.zero {
  visibility: hidden;
}
.thar-she-blows {
  width: 58vw;
  height: 75vh;
  max-height: 75vh;
  overflow: hidden;
  margin-bottom: 20px;
}
.thar-she-blows .leaflet-container {
  width: 100%;
  height: 100%;
  border: 2px solid #333333a6;
  background: #333a;
  border-radius: 4px;
}
.thar-she-blows .leaflet-container a {
  color: #55258c;
}
.thar-she-blows .leaflet-container .leaflet-control-layers button.closeControl {
  display: block;
  width: 100%;
  margin: 0 -5px -5px -5px;
  box-sizing: content-box;
  border: none;
  cursor: pointer;
  background: #e8e8e8;
}
.thar-she-blows .leaflet-container .leaflet-control-layers button.closeControl:hover {
  background: #eee;
}
.thar-she-blows .leaflet-container > button {
  position: absolute;
  z-index: inherit;
  padding-top: 2px;
  padding-bottom: 2px;
  top: 5px;
  right: 5px;
  cursor: pointer;
  border: #6d6d6d 2px solid;
  border-radius: 4px;
}
.thar-she-blows .leaflet-container > button:hover {
  background-color: #505050;
  border-color: #ffffff;
}
.thar-she-blows .leaflet-container > button:before {
  content: '';
}
.thar-she-blows .leaflet-container .leaflet-tile-pane {
  opacity: 0.5;
}
.thar-she-blows .leaflet-container .map-teleport-popup button {
  cursor: pointer;
  border: #b6b6b6 2px solid;
  border-radius: 4px;
  color: black;
  margin: 2px;
  padding: 4px;
}
.thar-she-blows .leaflet-container .map-teleport-popup button:hover {
  background-color: #e6e6e6;
}
.thar-she-blows .leaflet-container .leaflet-control-layers {
  visibility: visible;
  color-scheme: light;
  background-color: #ffffffbf;
}
.thar-she-blows .leaflet-container div.SearchMapBar {
  position: absolute;
  z-index: 3001;
  top: 10px;
  left: 50px;
  width: 25%;
  height: 25px;
}
.thar-she-blows .leaflet-container div.SearchMapBar input {
  width: 100%;
  height: 100%;
  font-size: larger;
}
/* Inspector ui */
.ParcelInspectorTab {
  background: #444;
  color: #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 4px;
}
.ParcelInspectorTab .InspectorTabTools {
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ParcelInspectorTab .scrollContainer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
.ParcelInspectorTab h3,
.ParcelInspectorTab h4 {
  color: #eee;
  margin-top: 10px;
}
.ParcelInspectorTab ul {
  margin: 4px 0 0 0;
  padding: 0;
}
.ParcelInspectorTab li:hover {
  color: #ddd;
  cursor: pointer;
}
.ParcelInspectorTab li {
  position: relative;
  font-size: smaller;
  top: 0;
  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 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;
  flex-direction: row;
}
.ParcelInspectorTab .feature-copy-container {
  width: 210px;
}
.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;
  flex-direction: row;
  padding: 9px 4px 9px 9px;
}
.ParcelInspectorTab .inspector-bottom-bar-buttons {
  width: 184px;
}
.ParcelInspectorTab .inspector-bottom-bar-checkbox-container {
  white-space: nowrap;
}
.ParcelInspectorTab .inspector-bottom-bar-buttons-group {
  width: 188px;
}
div.ChatHintNotification {
  position: absolute;
  top: -50px;
  z-index: 10100;
  font-size: small;
  background: #6d4f78;
  padding: 10px;
  width: 60px;
  left: 0px;
  border-radius: 5%;
  height: 1em;
  visibility: hidden;
}
div.ChatHintNotification.-show {
  visibility: visible;
  animation: chatHintFadein 0.5s, chatHintFadeout 0.5s 2.8s;
}
div.ChatHintNotification:before {
  content: '';
  width: 0;
  height: 0;
  max-height: 0;
  position: absolute;
  border-top: 10px solid #6d4f78;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  left: 20px;
  bottom: -10px;
}
div.ChatHintNotification .text-container {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: normal;
}
@keyframes chatHintFadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    bottom: -50px;
    opacity: 1;
  }
}
@keyframes chatHintFadeout {
  from {
    top: -50px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}
section.WelcomeShortcuts {
  min-height: 0;
  overflow-x: visible;
  overflow-y: visible;
}
section.WelcomeShortcuts a {
  color: #f8daff;
  font-weight: bold;
}
section.WelcomeShortcuts em,
section.WelcomeShortcuts strong,
section.WelcomeShortcuts span {
  transition: ease-in-out 0.5s;
}
section.WelcomeShortcuts em.-inactive,
section.WelcomeShortcuts strong.-inactive,
section.WelcomeShortcuts span.-inactive {
  opacity: 0.5;
}
section.WelcomeShortcuts em.-highlight,
section.WelcomeShortcuts strong.-highlight,
section.WelcomeShortcuts span.-highlight {
  color: #f4c6ff;
}
section.WelcomeShortcuts > div.pointer-lock-instructions {
  margin-top: 20px;
  position: relative;
}
section.WelcomeShortcuts > div.pointer-lock-instructions i.arrow {
  top: 0;
  right: 0;
  padding-left: 0;
  position: absolute;
  transition: all 0.5s ease-in-out;
  font-size: 15px;
}
section.WelcomeShortcuts > div.pointer-lock-instructions i.arrow.-pointing {
  animation-duration: 0.5s;
  animation-name: WelcomeShortcuts-pointer-lock-hint;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  font-size: 20px;
  padding-left: 5px;
}
section.WelcomeShortcuts > h3 {
  color: inherit;
  font-size: 100%;
  margin: 20px 0 0;
}
section.WelcomeShortcuts > dl {
  min-height: 0;
  background: var(--tinge);
  padding: 20px;
  margin: 10px 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  transition: opacity ease-in-out 1s;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
}
section.WelcomeShortcuts > dl dt,
section.WelcomeShortcuts > dl dd {
  margin: 0;
}
section.WelcomeShortcuts > dl dt {
  align-self: end;
  padding-bottom: 10px;
}
section.WelcomeShortcuts > dl dd {
  text-align: center;
}
section.WelcomeShortcuts > dl dd label {
  display: inline-block;
  padding: 10px;
  background: #222;
  border-radius: 3px;
  font-weight: bold;
  margin: 2px;
  min-width: 15px;
}
section.WelcomeShortcuts > dl dd label.-highlight {
  background: #525252;
}
section.WelcomeShortcuts > div.more-help {
  margin: 10px 0;
}
section.WelcomeShortcuts > div.more-help h3 {
  margin: 0;
  color: inherit;
  font-size: inherit;
}
section.WelcomeShortcuts > div.more-help ul {
  margin-left: 20px;
}
section.WelcomeShortcuts > div.more-help ul li {
  margin: 5px 0;
}
section.WelcomeShortcuts > div.interact-hint {
  margin: auto 0 10px;
}
section.WelcomeShortcuts > div.interact-hint i.-pointing {
  position: relative;
  animation-duration: 0.3s;
  animation-name: WelcomeShortcuts-interact-hint;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes WelcomeShortcuts-pointer-lock-hint {
  from {
    right: -5px;
  }
  to {
    right: -15px;
  }
}
@keyframes WelcomeShortcuts-interact-hint {
  from {
    top: 0;
  }
  to {
    top: 3px;
  }
}
div.NotificationOverlay {
  top: 43px;
  position: fixed;
  right: 25px;
  width: 305px;
}
div.NFTNotificationMessage {
  position: relative;
  top: 10px;
  right: 10px;
  z-index: 1000000;
  width: 300px;
  border-radius: 10px;
  padding: 15px 50px 15px 20px;
  margin: 2px 0;
  background-size: 40px;
  color: #cacaca;
  box-sizing: border-box;
  height: fit-content;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}
div.NFTNotificationMessage.-hidden {
  height: 1px;
  opacity: 0;
}
div.NFTNotificationMessage ul {
  overflow: hidden;
}
div.NFTNotificationMessage li {
  margin-top: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: none;
}
div.NFTNotificationMessage a.notif-close {
  position: absolute;
  top: -5px;
  left: -10px;
  cursor: pointer;
  color: #fff;
  border: 1px solid #aeaeae;
  border-radius: 50%;
  background: #605f61;
  font-size: 20px;
  display: inline-block;
  line-height: 0;
  padding: 11px 5px;
}
div.NFTNotificationMessage a.notif-close:before {
  content: '×';
}
div.NFTNotificationMessage a.notif-close:hover {
  background: #363536;
}
div.OverlayWindow.-nft-view {
  /* Large button that says "Try it on" */
}
div.OverlayWindow.-nft-view .overlay-large-button {
  border-radius: 4px;
  background: #aaa;
  padding: 4px;
  color: #222;
  cursor: pointer;
}
div.OverlayWindow.-nft-view .overlay-large-button h1 {
  color: #111;
}
div.OverlayWindow.-nft-view .overlay-large-button:hover {
  background: #909090;
}
div.OverlayWindow.-nft-view section.SplitPanel .Panel {
  /*image*/
}
div.OverlayWindow.-nft-view section.SplitPanel .Panel img {
  margin-bottom: 4px;
  width: 100%;
}
@media only screen and (max-width: 800px) {
  div.OverlayWindow.-nft-view {
    /* Make image or video smaller on mobile */
  }
  div.OverlayWindow.-nft-view section.SplitPanel .Panel img,
  div.OverlayWindow.-nft-view section.SplitPanel .Panel video {
    width: 80%;
  }
}
div.OverlayWindow.-avatar {
  width: 650px;
}
div.OverlayWindow.-avatar .right-column {
  width: 50%;
}
div.OverlayWindow.-avatar button {
  margin-right: 6px;
}
.NFTImageUILoading {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 11000;
  transform: translate(-50%, -50%);
  display: flex;
  align-content: center;
  gap: 0.5rem;
}
.NFTImageUI {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 12000;
  transform: translate(-50%, -50%);
  background: #181511;
  border-radius: 2px;
  color: #f5f5f0;
  padding: 1px 1px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.NFTImageUI.visible {
  opacity: 1;
  visibility: visible;
}
.NFTImageUI a {
  color: #f5f5f0;
  text-decoration: underline;
}
.NFTImageUI header {
  text-align: center;
  margin-bottom: 1rem;
  white-space: nowrap;
}
.NFTImageUI .body .nft-item {
  text-align: center;
}
.NFTImageUI .body .nft-item a {
  background-color: transparent;
}
.NFTImageUI .body .button-row {
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
}
.NFTImageUI .body .nft-description {
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  bottom: 2rem;
  overflow: auto;
  background-color: #000000c0;
  padding: 2rem;
  display: inline-block;
  white-space: pre-line;
}
.NFTImageUI .close {
  background: #181511;
  border: 1px solid #27221c;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: inherit;
  font-size: 1rem;
  color: #ccc;
  cursor: pointer;
}
div.ExplorerSuburbsTab div.selected-suburb-info {
  min-height: 35px;
  z-index: 1000;
  background: #111a;
  border-radius: 4px;
  padding: 10px;
  margin: -10px;
}
div.ExplorerSuburbsTab div.suburb-row {
  display: flex;
  margin: 5px;
  border-radius: 4px;
  width: 100%;
  min-width: 100%;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
div.ExplorerSuburbsTab div.suburb-row:hover {
  background-color: #444444;
}
div.ExplorerSuburbsTab div.suburb-row > img {
  min-height: 64px;
}
.Explorer {
  display: flex;
  flex-direction: column;
  width: calc(min(50vw, 512px)) !important;
}
.Explorer section {
  height: 100%;
  flex: 1;
  padding: 1rem;
}
.SnapshotItem > header {
  display: flex;
}
.SnapshotItem > header div:first-child {
  flex: 1;
}
.SnapshotItem > header button {
  margin-right: 0 !important;
}
.SnapshotItem li small > a {
  color: #55258c;
}
@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');
}
::-webkit-scrollbar {
  width: 12px;
}
/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 6px;
}
/* Scrollbar track background */
::-webkit-scrollbar-track {
  background: transparent;
}
/* Overlay Window */
:root {
  color-scheme: dark;
}
a {
  text-decoration: none;
}
/* canvas render */
canvas#renderCanvas {
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: none !important;
  width: 100vw;
  height: 100vh;
}
canvas#renderCanvas:hover::after {
  content: '';
}
.no-touch {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: none;
}
body.ready-player-one {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: 'source code pro', 'monospace' !important;
}
body.ready-player-one #babylonUnmuteIconBtn {
  left: 60px !important;
}
body.hide-ui .InteractBar,
body.hide-ui .InteractNotification,
body.hide-ui .BuildToolOverlay,
body.hide-ui .home-button {
  display: none;
}
body.hide-ui .MapOverlay {
  visibility: hidden !important;
}
.WebTopBar {
  position: absolute;
  top: 8px;
  right: 8px;
}
/* Animations Emote*/
.animations {
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
}
.animations li {
  list-style: none;
  margin: 0;
  padding: 16px;
  width: 64px;
}
.animations li:hover {
  cursor: pointer;
}
p,
li,
ul,
section,
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}
/* Mobile dpad*/
.mobile-dpad {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 150px;
  width: 150px;
  padding: 0;
  border: 30px solid transparent;
  touch-action: none;
  display: flex;
}
/* Chat unread */
.unread {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.8em;
  padding: 8px;
  text-shadow: 1px 1px 1px black;
  border-radius: 4px;
}
@keyframes chatslide {
  from {
    left: -2000px;
  }
  75% {
    left: -2000px;
  }
  to {
    left: 10px;
  }
}
.ChatMessages {
  margin: 0 0 4px 0;
  padding: 4px;
  overflow-y: auto;
  background: var(--tinge);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ChatMessages b {
  margin-right: 6px;
  font-weight: normal;
  color: #aaa;
}
.ChatMessages a {
  color: inherit;
  text-decoration: none;
}
.ChatMessages div {
  font-size: 14px;
}
.ChatMessages div:first-child {
  margin-top: auto !important;
}
.ChatMessages div.-helper {
  display: flex;
  margin: 10px 0;
}
.ChatMessages div.-helper > i {
  display: block;
  margin-right: 5px;
  padding: 4px;
}
.ChatMessages div.-helper > div {
  font-weight: bold;
  color: #cc92da;
  font-size: 90%;
  flex: 1;
}
.ChatMessages div.-you {
  font-style: italic;
}
.ChatMessages div span.-chat-user-tag {
  color: #f860ff;
  cursor: pointer;
}
.ChatMessages div span.-chat-user-tag:hover {
  color: #f64bff;
  text-decoration: underline;
}
.ChatMessages div.broadcast {
  background: #35246933;
}
.ChatMessages div p {
  line-height: 18px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  display: inline;
  color: #fff;
  font-weight: normal;
  margin: 0;
  user-select: text;
  word-break: break-word;
}
.ChatMessages div p b a {
  color: #eee;
}
.ChatMessages div p span {
  flex: 1;
}
.ChatMessages div p.action {
  opacity: 0.6;
}
.ChatMessages a.teleport {
  margin-left: 10px;
  color: #aaa;
}
.ChatMessages > div > p {
  padding: 2px;
  display: inline-block;
}
.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 {
  list-style: none;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 0;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  width: 100%;
}
.AnimateList ul li > i {
  margin-right: 5px;
}
.AnimateList ul li.-active {
  background-color: #2f0e4c42;
}
.AnimateList ul li:hover {
  background: #333a;
  border-radius: 2px;
}
.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;
  border-radius: 2px;
}
/* Overlay in-world */
.overlay {
  position: fixed;
  top: 4rem;
  right: 1rem;
  width: 20rem;
  height: calc(100vh - 21rem);
  z-index: 12000;
}
.overlay > * {
  height: 100%;
}
.overlay h3,
.overlay p {
  margin-bottom: 10px;
}
.overlay .button {
  font: inherit;
  padding: 8px 16px;
  display: inline-block;
  border: 1px solid #555;
  color: #444;
  background: linear-gradient(#f3f3f3, #fafafa);
  font-weight: bold;
}
.overlay .close {
  display: none;
}
.overlay .columns {
  display: flex;
  flex-direction: row;
}
.overlay .columns .left-column {
  flex: 1;
  position: relative;
}
.overlay .columns .right-column {
  width: 280px;
}
/*  Overlay in-world Spawn here (outdated) */
.overlay.spawn-here {
  width: 240px;
  box-sizing: border-box;
}
.overlay.buy-nft {
  max-width: 80%;
  height: 580px;
  background: #3337;
  border-radius: 4px;
  padding: 10px;
}
.overlay.buy-nft button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.overlay.buy-nft button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay.buy-nft button[disabled]:hover {
  background: #aaa;
}
.overlay.buy-nft h3 {
  font-size: inherit;
}
.overlay.buy-nft .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -32px 0 0 -32px;
}
.overlay.buy-nft iframe {
  border: none;
  width: 100%;
  /* bypass less min function and use the css one *(: */
  height: 540px;
  max-height: 80vh;
}
.overlay.buy-nft dl {
  border-top: 1px solid #ccc;
}
.overlay.buy-nft dt {
  position: absolute;
  padding: 5px;
}
.overlay.buy-nft dd {
  padding: 5px 5px 5px 120px;
  border-bottom: 1px solid #ccc;
  margin: 0;
}
.overlay.buy-nft dd small {
  color: #777;
  display: block;
}
.overlay.buy-nft .buying {
  margin-top: 20px;
}
.overlay.buy-nft .disabled {
  opacity: 0.5;
  cursor: default;
}
.overlay.message-owner {
  max-width: 80%;
  height: 580px;
  background: #3337;
  border-radius: 4px;
  padding: 10px;
  height: 260px;
  background: #303030a1;
  z-index: 69420;
  top: 5rem;
}
.overlay.message-owner button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.overlay.message-owner button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay.message-owner button[disabled]:hover {
  background: #aaa;
}
.overlay.message-owner h3 {
  font-size: inherit;
}
.overlay.message-owner .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -32px 0 0 -32px;
}
.overlay.message-owner iframe {
  border: none;
  width: 100%;
  /* bypass less min function and use the css one *(: */
  height: 540px;
  max-height: 80vh;
}
.overlay.message-owner dl {
  border-top: 1px solid #ccc;
}
.overlay.message-owner dt {
  position: absolute;
  padding: 5px;
}
.overlay.message-owner dd {
  padding: 5px 5px 5px 120px;
  border-bottom: 1px solid #ccc;
  margin: 0;
}
.overlay.message-owner dd small {
  color: #777;
  display: block;
}
.overlay.message-owner .buying {
  margin-top: 20px;
}
.overlay.message-owner .disabled {
  opacity: 0.5;
  cursor: default;
}
.overlay.message-owner textarea {
  width: 100%;
}
/* Location text overlay */
.location-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1.2em;
  text-shadow: 1px 1px 3px black;
  z-index: 1000;
}
.location-overlay a {
  color: inherit;
}
.location-overlay a:hover {
  background: none !important;
}
/* search */
.search-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
}
.search-overlay form.uncollapsed {
  border-radius: 4px;
  padding: 4px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  width: 240px;
}
.search-overlay form.uncollapsed input {
  font: inherit;
  width: 100%;
}
.search-overlay form.collapsed {
  font-size: 2em;
  text-shadow: 1px 1px 3px black;
  cursor: pointer;
}
.search-overlay .result {
  list-style: none;
  border-top: 1px solid #eee;
  margin: 0;
  padding: 4px 8px;
}
.search-overlay .result small {
  opacity: 0.5;
}
.search-overlay .result:hover {
  cursor: pointer;
}
/* inventory overlay (outdated) */
.overlay.inventory {
  left: auto;
  right: 10px;
  top: 10px;
  bottom: 60px;
  width: 260px;
  overflow: auto;
  overflow-x: hidden;
}
.overlay.inventory .nftitem {
  min-height: 98px;
  clear: both;
  position: relative;
}
.overlay.inventory .nftitem button.remove {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #555;
  padding: 0 4px;
}
.overlay.inventory .nftitem h3 {
  border-top: 1px solid #ccc;
  padding-top: 6px;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 1em;
  font-weight: bold;
}
.overlay.inventory .nftitem img {
  width: 64px;
  max-height: 48px;
  float: left;
  margin-right: 8px;
}
/* XR button overlay - unused */
.xr-button-overlay {
  left: 10px;
  top: 10px;
  right: unset !important;
  bottom: unset !important;
}
/* Parent-overlay - old */
.VoxelBuilder {
  /* override stupid default border on .f */
  border-bottom: none !important;
}
.VoxelBuilder header {
  display: flex;
}
.VoxelBuilder header h4 {
  flex: 1;
}
.VoxelBuilder header button.tint {
  position: relative;
  background-color: var(--tinge);
  margin-right: 0;
}
.VoxelBuilder header button.tint:hover {
  background-color: black;
}
.VoxelBuilder header button.tint span {
  height: 8px;
  width: 8px;
  display: inline-block;
  margin-left: 2px;
  border-radius: 2px;
}
.VoxelBuilder header button.tint ul {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  border-radius: 4px;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 3px;
}
.VoxelBuilder header button.tint ul button {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 1px;
  border: 1px solid white;
}
.VoxelBuilder header button.tint ul button:hover {
  border: none;
  background-color: black;
}
.VoxelBuilder .controls {
  margin-top: 5px;
}
.VoxelBuilder .controls button {
  margin: 0 !important;
  border-radius: 0 !important;
}
.VoxelBuilder .controls button.-erase {
  background: #ff9980;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.VoxelBuilder .controls button.-paint {
  background: #80bbff;
}
.VoxelBuilder .controls button.-build {
  background: #80ff80;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}
.VoxelBuilder div.textures {
  zoom: 0.6;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  padding-left: 0;
}
.VoxelBuilder div.textures > div {
  border-radius: 4px;
  cursor: pointer;
  margin: 2px;
  position: relative;
}
.VoxelBuilder div.textures > div.-selected {
  background: yellow !important;
}
.VoxelBuilder div.textures > div.-selected div {
  outline: 2px solid white;
}
.VoxelBuilder div.textures > div img,
.VoxelBuilder div.textures > div div {
  margin: 2px;
  display: block;
  background-size: 384px 384px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  background-color: black;
  border-radius: 2px;
  width: 48px;
  height: 48px;
}
.CustomizeVoxels div.textures {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  padding-left: 0;
}
.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:after,
.CustomizeVoxels div.textures > div.-dragOver:after {
  content: 'Replace';
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 23px;
}
.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);
}
.editor.overlay {
  font-size: 1em;
  top: 60px !important;
  transform: translateX(150%);
  animation: slide-in-rtl 0.2s forwards ease-out;
}
@keyframes slide-in-rtl {
  100% {
    transform: translateX(0%);
  }
}
.editor.overlay textarea,
.editor.overlay input {
  cursor: pointer;
}
.editor.overlay button.asset-library {
  width: 100%;
  margin: 0.5rem 0 0 0;
  display: inline-block;
}
.editor.overlay label a {
  color: #8a8a8a;
}
.editor.overlay label a:visited {
  color: #7c7c7c;
}
.editor.overlay section {
  background: var(--semi);
  flex: 1;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.editor.overlay section > header {
  padding: 10px;
  position: relative;
  color: #e6e6e6;
}
.editor.overlay section > header > button.close {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  background: #3335;
  border: none;
  right: 0;
  cursor: pointer;
}
.editor.overlay section > header > button.close[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.editor.overlay section > header > button.close[disabled]:hover {
  background: #aaa;
}
.editor.overlay section .scrollContainer {
  overflow-y: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  padding: 6px;
}
.editor.overlay .tabs {
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  position: relative;
}
.editor.overlay .tabs li.active {
  border-bottom: none;
  background: #444;
  color: #eee;
}
.editor.overlay .tabs li {
  margin: 0 2px 0 0;
  padding: 4px 10px;
  list-style: none;
  background: #222;
  color: #ccc;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid #111;
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editor.overlay .tabs li img {
  width: 12px;
  position: relative;
  top: 4px;
  left: 2px;
}
.editor.overlay .tabs li.close-button {
  position: absolute;
  right: -2px;
  margin-top: 1px;
  padding-bottom: 10px !important;
  background: #444;
}
.editor.overlay .button-tabs {
  border-bottom: 1px solid #999;
}
.editor.overlay .button-tabs button {
  background: #333a;
  padding: 0.4rem;
  border-radius: 0.4rem 0.4rem 0 0;
  margin: 0 0.4rem 0 0;
}
.editor.overlay .button-tabs button.active {
  color: black;
}
.editor.overlay .advanced-block {
  display: block;
  padding: 4px;
  margin-top: 30px;
  position: relative;
}
.editor.overlay .advanced-block h4.advanced {
  position: absolute;
  top: -22px;
  text-shadow: none;
  font-weight: bold;
  cursor: pointer;
}
.editor.overlay .advanced-block .f label {
  opacity: 0.7;
}
.editor.overlay .textures + p {
  margin-top: 16px;
  margin-left: 12px;
}
.editor.overlay .textures + p small {
  opacity: 0.3;
  overflow-wrap: break-word;
}
.editor.overlay .info {
  padding: 16px 0 2px 8px;
  position: relative;
}
.editor.overlay .upload-url {
  padding-top: 5px;
}
.editor.overlay h4 {
  text-shadow: 1px 1px 1px black;
}
.editor.overlay .bake-parcel {
  padding: 16px 0 2px 8px;
}
.editor.overlay .bake-parcel p.error {
  margin-top: 5px;
  color: #ffa9a9;
}
.editor.overlay .editor-toolbar .help {
  display: none;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}
.editor.overlay .editor-toolbar .help a {
  color: inherit;
  text-decoration: underline;
  margin-left: 0.3rem;
}
.editor.overlay ul.toolbar {
  margin-bottom: 10px;
  padding-left: 0;
  display: flex;
  list-style: none;
}
.editor.overlay ul.toolbar li {
  flex: 0 1 auto;
}
.editor.overlay ul.toolbar li button {
  margin-left: 2px;
}
.editor.overlay ul.toolbar li button:hover {
  background: #d9d9d9;
}
.editor.overlay .f {
  padding: 9px 2px 10px;
}
.editor.overlay .f * {
  box-sizing: border-box;
}
.editor.overlay .f label:first-child {
  display: block;
  padding-bottom: 3px;
}
.editor.overlay .f .help-script {
  color: inherit;
  padding-left: 1em;
}
.editor.overlay .f input[type='text'],
.editor.overlay .f input[type='number'],
.editor.overlay .f input[type='range'],
.editor.overlay .f textarea {
  font: inherit;
  width: 100%;
  border: none;
  padding: 4px;
  background: #222;
  color: #aaa;
  border-radius: 4px;
}
.editor.overlay .f.uv input[type='number'],
.editor.overlay .f.uv input.number {
  width: 90px;
  margin-right: 8px;
}
.editor.overlay .f input[type='checkbox'] {
  margin-right: 10px;
}
.editor.overlay .f textarea.script-editor {
  height: 300px;
  white-space: pre-wrap;
  /* For firefox */
}
.editor.overlay .f textarea {
  height: 150px;
}
.editor.overlay .f small {
  display: block;
  margin-top: 10px;
}
.editor.overlay .f input[type='checkbox'] + small {
  display: inline;
}
.editor.overlay .f .sub-f {
  background-color: #272727;
  padding: 3px 5px 0 5px;
  margin: 5px 0;
  border-radius: 2px;
  transition: height 0.5s linear;
}
.editor.overlay button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.editor.overlay button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.editor.overlay button[disabled]:hover {
  background: #aaa;
}
.editor.overlay .f select + div {
  margin-top: 4px;
}
.editor.overlay .f.fs input[type='number'],
.editor.overlay .f.fs input.number {
  width: 83px;
  margin-right: 4px;
}
.editor.overlay .f.fs input.error {
  outline: 1px solid #ff0000;
  background: #402000;
  color: #eeeeee;
}
.editor.overlay .f.fs .vector-field {
  padding: 2px 0;
  border: 1px solid #20184a;
  background: #333;
  margin-right: 4px;
}
.editor.overlay .f.fs .vector-field .minus,
.editor.overlay .f.fs .vector-field .plus {
  width: 16px;
  display: inline-block;
  text-align: center;
}
.editor.overlay .f.fs .vector-field .minus:hover,
.editor.overlay .f.fs .vector-field .plus:hover {
  cursor: pointer;
}
.editor.overlay .f.fs .vector-field input.number {
  width: 50px;
  margin: 0;
  padding: 3px 0;
  text-align: center;
  background: #222;
  border-radius: 0;
}
.editor.overlay .f.fs .vector-field input.number:focus {
  outline: none;
  box-shadow: 0 0 2px #fff;
}
.editor.overlay .f.fs .vector-error {
  color: #ff6644;
}
.editor.overlay .easingContainer {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
.editor.overlay .lock-aspect-ratio {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
}
.editor.overlay .lock-aspect-ratio-keyframe {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
  margin-left: 4px;
}
.editor.overlay .aspect-ratio-permanent-lock {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
  color: black;
}
.editor.overlay .add-keyframe-button {
  margin-top: 4px;
}
.editor.overlay .f-keyframe input {
  width: 50px !important;
}
.editor.overlay .f-keyframe input.frame {
  background: #111;
  text-align: center;
}
.editor.overlay div.color-selectors {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.editor.overlay div.color-selectors div > small > button {
  margin-right: 0;
}
.image-popup-overlay {
  position: absolute;
  top: 0;
  width: 400px;
  z-index: 50;
}
/* Inspector overlay */
.inspector.overlay {
  width: 240px;
  left: 40px;
  top: 40px;
  bottom: 40px;
  margin-left: 0;
  margin-top: 0;
  overflow-y: auto;
}
.inspector.overlay ul li {
  margin-bottom: 4px;
}
.inspector.overlay ul li p {
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inspector.overlay ul li small {
  color: #555;
  display: block;
  margin: 0;
}
@keyframes slidein-interact {
  from {
    left: -400px;
  }
  to {
    left: 10px;
  }
}
@keyframes slidein-instructions {
  from {
    top: -50%;
  }
  to {
    top: 50%;
  }
}
.overlay.inspect-feature {
  background: var(--semi);
  left: unset;
  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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.overlay.inspect-feature .feature-inspector-options button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay.inspect-feature .feature-inspector-options button[disabled]:hover {
  background: #aaa;
}
.overlay.suspended-window {
  background-color: #333333;
}
.overlay.suspended-window p {
  user-select: text;
}
.overlay.suspended-window button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.overlay.suspended-window button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay.suspended-window button[disabled]:hover {
  background: #aaa;
}
.overlay.suspended-window ul {
  margin: 0 0 0 15px;
}
.BroadcastedWomps {
  padding: 4px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.BroadcastedWomps > div.womp:first-child {
  margin-top: auto !important;
}
div.ChatInput {
  display: flex;
  width: 100%;
  align-items: center;
}
div.ChatInput input {
  flex: 1;
  text-shadow: 1px 1px 1px black;
  font: inherit;
  padding: 10px;
  outline: none;
  border: none;
  border-radius: 5px;
  box-sizing: border-box;
}
div.ChatInput input::placeholder {
  color: #aaa;
}
div.ChatInput .react-autocomplete-input {
  background-clip: padding-box;
  color: #fff;
  background-color: #363636;
  border: 1px solid rgba(0, 0, 0, 0.15);
  bottom: auto;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: block;
  font-size: 14px;
  list-style: none;
  padding: 1px;
  position: absolute;
  text-align: left;
}
div.ChatInput .react-autocomplete-input > li {
  cursor: pointer;
  padding: 10px;
  min-width: 100px;
}
div.ChatInput .react-autocomplete-input > li.active {
  background-color: #6d6d6e;
  color: #fff;
  text-shadow: 1px 1px 0 black;
}
button.TakeWompButton {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  font-size: 110%;
  padding: 10px;
  cursor: pointer;
  margin-right: 0;
  margin-top: 5px;
}
button.TakeWompButton[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
button.TakeWompButton[disabled]:hover {
  background: #aaa;
}
button.TakeWompButton:hover {
  background: var(--dark);
  color: #f9f9f9;
}
button.TakeWompButton i {
  margin-right: 2px;
}
.WompOptions textarea {
  width: 100%;
  height: 39px;
  margin: 0 0 10px;
  padding: 5px;
  resize: vertical;
  min-height: 50px;
  max-height: 100px;
  box-sizing: border-box;
}
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;
}
.overlay.empty-window-overlay h3 {
  text-overflow: ellipsis;
  max-height: 5vh;
  overflow: hidden;
}
.overlay.empty-window-overlay.opaque {
  background-color: #2b2b2b;
  height: fit-content;
  border-radius: 5px;
}
.overlay.empty-window-overlay .empty-window-container {
  background-color: #d6d6d6;
  padding: 10px 1px;
  border-radius: 5px;
}
.overlay.empty-window-overlay .empty-window-container.aligned-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.overlay.empty-window-overlay .empty-window-container p {
  color: black;
}
.overlay.empty-window-overlay .empty-window-container button {
  margin: 5px;
}
.OverlayWindow.-changeCostume {
  width: 30vw;
}
.OverlayWindow.-changeCostume .wardrobe {
  margin: 1rem 0;
}
.OverlayWindow.-changeCostume .wardrobe .emote-costume {
  cursor: pointer;
  padding: 0.25rem;
}
.OverlayWindow.-changeCostume .wardrobe .emote-costume.active {
  background: #5a5a5aaa;
  cursor: initial;
}
.OverlayWindow.-changeCostume .wardrobe .emote-costume.active:hover {
  background: #5a5a5aaa;
}
.OverlayWindow.-changeCostume .link-to-costumer {
  margin-top: 1rem;
}
.PanelTabs li {
  color: #e6e6e6;
  background: #111a;
}
.PanelTabs li ol li:hover {
  background-color: #727272;
}
.PanelTabs li h5 {
  color: #fafafa;
  text-shadow: 1px 1px 1px black;
}
.PanelTabs li:hover {
  background-color: #616161;
}
.PanelTabs li.-active > h5 {
  color: #f6ffc4;
}
.Panel > header {
  border-bottom: #dddddd 1px solid;
  margin-bottom: 1rem;
}
.Panel.-Scrollable {
  overflow-y: auto;
}
.ButtonList button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin: 0;
}
.ButtonList button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.ButtonList button[disabled]:hover {
  background: #aaa;
}
.ButtonList li {
  list-style: none;
  margin-bottom: 5px;
}
.AcaFeatureList {
  overflow-y: auto;
  overflow-x: hidden;
}
.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;
}
.help-overlay * {
  color: #eee;
}
.help-overlay .colos {
  display: flex;
  flex-direction: row;
}
.help-overlay .colos > ul:first-child {
  flex: 1;
}
.help-overlay .colos > ul:last-child {
  flex: 1;
  padding-left: 8px;
}
.help-overlay .bindings {
  margin: 0;
  padding: 0;
}
.help-overlay .bindings li {
  list-style: none;
  margin: 0 0 2px 0;
  padding: 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;
}
.PropertiesList label {
  display: block;
  margin-bottom: 1rem;
}
.PropertiesList select {
  float: right;
}
.PropertiesList a {
  color: inherit;
}
.PropertiesList small {
  opacity: 0.5;
}
.PropertiesList > button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 0;
}
.PropertiesList > button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.PropertiesList > button[disabled]:hover {
  background: #aaa;
}
.PropertiesList > button.active.up:after {
  content: '↑';
}
.PropertiesList > button.active.down:after {
  content: '↓';
}
.PropertiesList img.thumb {
  display: block;
  overflow: hidden;
  background: #ccc;
  width: 32px;
  height: 32px;
}
.PropertiesList td {
  vertical-align: top;
}
.ExplorerUsersOnline {
  display: block;
  list-style: none;
}
.ExplorerUsersOnline li {
  background-color: var(--dark) aa;
  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: #ffffff;
}
.ParcelCard {
  background: #3f3f3f;
}
.ui-wearable-list {
  list-style: none;
}
.ui-wearable-list li {
  color: #d3d3d3;
}
.ui-wearable-list li small {
  display: block;
}
/* The parcel admin overlay window  (extends OverlayWindow)*/
.ParcelAdminWindow .OverlayHighlightContent .FlexInput {
  display: flex;
}
.ParcelAdminWindow .OverlayHighlightContent input[type='text'],
.ParcelAdminWindow .OverlayHighlightContent textarea {
  flex: 2;
}
/* Make collectible selector darker
i.e. overrides the colors */
.CollectibleSelector ul {
  border: 1px solid #ccc;
  background: #181511;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.CollectibleSelector .select {
  color: #aaa;
}
.CollectibleSelector li small {
  color: #aaa;
}
.CollectibleSelector li:hover {
  background: #494949;
}
.CollectibleSelector li:first-of-type {
  background: #dadada;
}
.CollectibleSelector.closed li.selected {
  color: #999;
}
.PagingButtons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 5px;
}
.PagingButtons > button {
  margin: 0 4px;
}
.PagingButtons.-center {
  justify-content: center;
}
/* Parcel information overlay */
.overlay .parcel-information-overlay h5,
.overlay .parcel-information-overlay h4,
.overlay .parcel-information-overlay h3,
.overlay .parcel-information-overlay h2 {
  color: #d8d8d8;
}
.overlay .parcel-information-overlay a {
  color: #969696;
}
.overlay .parcel-information-overlay a:visited {
  color: aliceblue;
}
.overlay .parcel-information-overlay p {
  margin-bottom: 1px;
}
.overlay .parcel-information-overlay .parcels-details {
  padding: 5px;
  border-radius: 4px;
  border: none;
  background-color: var(--tinge);
}
.overlay .parcel-information-overlay .actions {
  margin-left: 7px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.overlay .parcel-information-overlay .actions > li {
  margin: 5px 0 2px 2px;
}
.overlay .parcel-information-overlay .actions > li a {
  text-decoration: none;
  background-color: var(--dark);
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  height: 15px;
  margin-right: 3px;
}
.overlay .parcel-information-overlay .actions > li a[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay .parcel-information-overlay .actions > li a[disabled]:hover {
  background: #aaa;
}
.overlay .parcel-information-overlay .actions > li:hover a {
  background-color: #464646;
}
.overlay .parcel-information-overlay .overlay-parcel-info-content {
  display: flex;
  flex-direction: column;
  background-color: var(--tinge);
  overflow: visible;
  border-radius: 4px;
  padding: 8px;
  margin: 2px 2px 10px;
}
.overlay .parcel-information-overlay .overlay-parcel-info-content > * {
  margin-bottom: 8px;
}
.overlay .parcel-information-overlay .overlay-parcel-info-content .event-item {
  background-color: #1d1d1d;
}
.overlay .parcel-information-overlay .overlay-parcel-info-content p {
  margin-bottom: 2px;
}
.overlay .parcel-information-overlay .overlay-parcel-info-content h1,
.overlay .parcel-information-overlay .overlay-parcel-info-content h2,
.overlay .parcel-information-overlay .overlay-parcel-info-content h3,
.overlay .parcel-information-overlay .overlay-parcel-info-content h4,
.overlay .parcel-information-overlay .overlay-parcel-info-content h5 {
  margin: 2px 0 2px 0;
  text-shadow: none;
}
.overlay .parcel-information-overlay .womp {
  width: 128px;
}
.overlay .debug-tools-overlay h5,
.overlay .debug-tools-overlay h4,
.overlay .debug-tools-overlay h3,
.overlay .debug-tools-overlay h2 {
  color: #d8d8d8;
}
.overlay .debug-tools-overlay a {
  color: #969696;
}
.overlay .debug-tools-overlay a:visited {
  color: aliceblue;
}
.overlay .debug-tools-overlay p {
  margin-bottom: 1px;
}
.overlay .debug-tools-overlay .parcels-details {
  padding: 5px;
  border-radius: 4px;
  border: none;
  background-color: var(--tinge);
}
.overlay .debug-tools-overlay .actions {
  margin-left: 7px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.overlay .debug-tools-overlay .actions > li {
  margin: 5px 0 2px 2px;
}
.overlay .debug-tools-overlay .actions > li a {
  text-decoration: none;
  background-color: var(--dark);
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  height: 15px;
  margin-right: 3px;
}
.overlay .debug-tools-overlay .actions > li a[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.overlay .debug-tools-overlay .actions > li a[disabled]:hover {
  background: #aaa;
}
.overlay .debug-tools-overlay .actions > li:hover a {
  background-color: #464646;
}
.overlay .debug-tools-overlay .overlay-parcel-info-content {
  display: flex;
  flex-direction: column;
  background-color: var(--tinge);
  overflow: visible;
  border-radius: 4px;
  padding: 8px;
  margin: 2px 2px 10px;
}
.overlay .debug-tools-overlay .overlay-parcel-info-content > * {
  margin-bottom: 8px;
}
.overlay .debug-tools-overlay .overlay-parcel-info-content .event-item {
  background-color: #1d1d1d;
}
.overlay .debug-tools-overlay .overlay-parcel-info-content p {
  margin-bottom: 2px;
}
.overlay .debug-tools-overlay .overlay-parcel-info-content h1,
.overlay .debug-tools-overlay .overlay-parcel-info-content h2,
.overlay .debug-tools-overlay .overlay-parcel-info-content h3,
.overlay .debug-tools-overlay .overlay-parcel-info-content h4,
.overlay .debug-tools-overlay .overlay-parcel-info-content h5 {
  margin: 2px 0 2px 0;
  text-shadow: none;
}
.overlay .debug-tools-overlay .womp {
  width: 128px;
}
/* Parcel states overlay */
.overlay .parcel-states .unordered-list {
  list-style: none;
  color: #ffffff;
  margin-top: 5px;
  border-top: 1px solid #6b6b6b;
}
.overlay .parcel-states .unordered-list li {
  background-color: var(--dark) aa;
  margin: 4px 1px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
}
.overlay .parcel-states .unordered-list li:hover {
  background-color: #272727aa;
}
.overlay .parcel-states .unordered-list li small > a {
  display: inherit;
}
.overlay .parcel-states .unordered-list a {
  color: #ffffff;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.overlay .parcel-states .overlay-header {
  background: var(--tinge);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 10px;
}
.overlay .parcel-states .overlay-header h3 {
  margin-right: 0;
  background: none;
}
/* Screen feature overlay */
.presenter.overlay {
  background: #3338;
  border-radius: 4px;
  left: 10px;
  top: 80px;
  margin: 0 0 0 0;
}
.presenter.overlay button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.presenter.overlay button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.presenter.overlay button[disabled]:hover {
  background: #aaa;
}
/* Boombox feature overlay */
.boombox-broadcast {
  background: #555;
  box-shadow: none;
  color: #ccc;
  border-radius: 4px;
  padding: 15px;
}
.boombox-broadcast .close {
  display: block;
}
.boombox-broadcast .fs {
  text-align: right;
}
.boombox-broadcast .fs button {
  padding: 5px;
}
.boombox-broadcast .broadcast-warning {
  background: #484200;
  padding: 5px;
  border: 1px solid #fff700;
  margin-bottom: 10px;
}
.boombox-broadcast .broadcast-status {
  background: #004826;
  padding: 5px;
  border: 1px solid #00ff88;
  margin-bottom: 10px;
}
.boombox-broadcast .broadcast-info {
  background: #ffec5f;
  color: #323232;
  padding: 5px;
  border: 1px solid #fadd00;
  margin-bottom: 10px;
}
.boombox-broadcast .broadcast-error {
  background: #480000;
  padding: 5px;
  border: 1px solid red;
  margin-bottom: 10px;
}
.boombox-broadcast .close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.boombox-broadcast .close[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.boombox-broadcast .close[disabled]:hover {
  background: #aaa;
}
.boombox-broadcast * {
  box-sizing: border-box;
}
.boombox-broadcast h3 img {
  width: 64px;
  float: left;
  margin-right: 5px;
  margin-left: -10px;
  margin-top: -10px;
}
/* Boombox feature overlay - audio meter */
.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;
}
/* youtube feature */
#youtube-css-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* Vidscreen feature - overlay */
@keyframes vidscreenslide {
  from {
    top: -200px;
  }
  to {
    top: 20px;
  }
}
.vid-screen {
  animation-duration: 0.15s;
  animation-name: vidscreenslide;
  transform: translate(-50%, 0%);
  background: #333a;
  border-radius: 4px;
  top: 60px;
}
/* Scripting feature - in=world */
.scripting-container .expandScript {
  float: right;
  margin-bottom: 3px;
  margin-top: -2px;
}
.scripting-container .parcelScriptStateIndicator {
  color: red;
  float: right;
}
.scripting-container .parcelScriptStateIndicator.active {
  color: green;
}
/* Scripting feature */
textarea.script-editor {
  white-space: pre-wrap;
  overflow: auto;
}
/* Scripting container */
.scripting-container-overlay {
  border-radius: 3px;
  padding: 5px;
  width: 60vw;
  background: #333;
}
.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 .overlay-Header {
  margin-bottom: 5px;
}
.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;
}
.scripting-container-overlay .editor-toolbar .script-library-menu > div > button {
  margin: 0 2px;
}
@media only screen and (max-width: 870px) {
  .scripting-container-overlay .editor-toolbar {
    display: block;
    margin-bottom: 5px;
  }
}
.scripting-container-overlay .editor-container {
  height: 100%;
  position: relative;
  display: inline-block;
  overflow-y: scroll;
}
.scripting-container-overlay .editor-container .editor-container-inner {
  display: grid;
  min-height: 100%;
  grid-template-columns: min-content auto;
}
.scripting-container-overlay .editor-container .line-nums {
  grid-column: 1;
  font-size: 14px;
  line-height: 16px;
  padding: 1px 4px;
  min-width: 20px;
  font-family: monospace;
  background: #eeec;
  text-align: right;
  border: 1px solid #999;
}
.scripting-container-overlay .editor-container textarea {
  overflow: hidden;
  grid-column: 2;
  resize: none;
  display: block;
  padding-left: 4px;
  font-size: 14px;
  line-height: 16px;
}
.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: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.scripting-container-overlay .scripting-buttonMenu button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.scripting-container-overlay .scripting-buttonMenu button[disabled]:hover {
  background: #aaa;
}
/* Post womp overlay */
.post-womp {
  width: 640px;
  height: 670px;
  margin: 1% 0 0 -2%;
  background: #555;
  box-shadow: none;
  color: #ccc;
  position: absolute;
}
.post-womp .close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.post-womp .close[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.post-womp .close[disabled]:hover {
  background: #aaa;
}
.post-womp .vignette {
  position: relative;
  height: 480px;
  width: 640px;
  display: block;
  margin-bottom: 4px;
}
.post-womp .vignette:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(circle, transparent 50%, black 150%);
}
.post-womp * {
  box-sizing: border-box;
}
.post-womp h3 img {
  width: 64px;
  position: relative;
  top: -24px;
  float: left;
}
.post-womp .fs {
  text-align: right;
}
.post-womp .fs button {
  font: inherit;
  padding: 8px;
  background: #eee;
  color: #555;
  border: none;
  border-radius: 4px;
}
.post-womp .fs button:hover {
  background: #fff;
  color: #444;
  cursor: pointer;
}
.post-womp .fs button:disabled {
  color: #b5b5b5;
}
.post-womp textarea {
  font: inherit;
  background: #222;
  width: 100%;
  height: 48px;
  padding: 4px;
  border: none;
  border-radius: 4px;
}
@media only screen and (max-width: 1000px) {
  .post-womp {
    width: 64vw;
    height: auto;
    margin: -2% 0 0 -2%;
  }
  .post-womp .vignette {
    width: 64vw;
    height: auto;
  }
  .post-womp .vignette img {
    width: 100%;
    height: auto;
  }
}
.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;
  box-shadow: 1px 1px 3px #171717;
}
.SearchBar li {
  padding: 5px 10px;
  cursor: pointer;
}
.SearchBar li header {
  font-weight: bold;
}
.SearchBar li:hover {
  background: #5a2973;
}
.BuildToolOverlayContainer {
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 1rem;
  top: 4rem;
}
.BuildToolOverlayContainer .BuildToolOverlay {
  transform: translateX(300%);
  visibility: hidden;
  opacity: 0;
}
.BuildToolOverlayContainer .BuildToolOverlay.-canEdit {
  transform: translateX(0%);
  visibility: visible;
  opacity: 1;
}
.BuildToolOverlay {
  color: #f3f3f3;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.2rem;
  margin-bottom: 0.5rem;
  padding: 0;
  text-align: center;
  cursor: pointer;
}
.BuildToolOverlay.active {
  background: #f3f3f3d4 !important;
  color: #333;
}
.MailboxMessage div.subject b {
  color: #e2c8ff;
}
.MailboxMessage div.subject b.read {
  color: #b1b1b1;
}
.SmallHomeMenu {
  display: block;
  position: absolute;
  border-radius: 4px;
  margin-left: 10px;
  width: 90px;
  padding: 15px;
  top: -20px;
  left: 5px;
  font-size: 13px;
  z-index: 10;
  /* Styles */
}
.SmallHomeMenu h4 {
  color: #fafafa;
}
.SmallHomeMenu ul {
  list-style: none;
  margin: -6px -15px;
  font-size: 14px;
}
.SmallHomeMenu li {
  padding: 6px 20px;
  cursor: pointer;
}
.SmallHomeMenu li:hover {
  background: #5a2973;
}
.SmallHomeMenu li > div.pendingBadge {
  display: none;
}
.SmallHomeMenu li.notify {
  position: relative;
}
.SmallHomeMenu li.notify > div.pendingBadge {
  display: block;
  padding: 0.5em 0.5em;
  border-radius: 12px;
  font-size: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.InteractBar {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  text-align: center;
  opacity: 0.8;
}
.InteractBar:focus-within {
  opacity: 1;
}
.InteractBar:hover {
  opacity: 1;
}
.InteractBar > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.InteractBar > ul > li {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.976rem;
  cursor: pointer;
}
.InteractBar > ul > li u {
  font-size: 0.8rem;
  text-decoration: none;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  width: 3.2rem;
  height: 3.2rem;
  text-align: center;
  display: block;
  color: var(--bright);
  background: var(--semi);
}
.InteractBar > ul > li > span.pendingBadge {
  padding: 0.3em 0.5em;
  border-radius: 12px;
  font-size: 10px;
  position: absolute;
  line-height: 10px;
  right: -5px;
  top: 5px;
}
.InteractBar > ul > li.-active u {
  background: #f3f3f3d4 !important;
  color: #333;
}
.InteractBar > ul > li + li {
  margin-left: 10px;
}
.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: #cccccc;
  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 {
    -ms-transform: scale(1.5);
    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;
}
.home-button {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}
.home-button > a > img {
  width: 26px;
  opacity: 0.8;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .home-button > a > img {
    width: 38px;
    opacity: 1;
  }
}
@media only screen and (max-width: 800px) {
  .home-button > a > img {
    width: 2.72rem;
    opacity: 1;
  }
}
@media prefers-color-scheme: dark {
  .home-button > a > img {
    filter: invert();
  }
}
.home-button > a:hover {
  background: none !important;
}
.upload-status {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000000;
  width: 220px;
  border-radius: 10px;
  padding: 15px 50px 15px 20px;
  background-size: 40px;
  color: #cacaca;
  animation: upload-pulse 1s infinite;
  box-sizing: border-box;
  overflow: hidden;
  transition: left 0.5s ease-in-out;
}
.upload-status.-hidden {
  left: -250px;
  animation: none;
}
.upload-status ul {
  overflow: hidden;
}
.upload-status li {
  margin-top: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: none;
}
.InteractNotification {
  position: fixed;
  bottom: 70px;
  left: 10px;
  z-index: 1000000;
  border-radius: 10px;
  box-sizing: border-box;
  transition: left 0.5s ease-in-out;
}
.InteractNotification button.close {
  padding: 4px 8px;
  background: #d2d2d2;
  color: #111;
  font: inherit;
  border: none;
  margin-right: 0;
  top: 14px;
  position: absolute;
  right: -25px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  opacity: 0.9;
  border-radius: 0 10px 10px 0;
}
.InteractNotification.-hidden {
  left: -280px;
  transition-delay: 2s;
}
.InteractNotification.-hidden:hover {
  transition-delay: 0s;
  left: 10px;
}
@keyframes interact-tab-pulse {
  0%,
  100% {
    background-color: #333333a6;
  }
  20% {
    background-color: #54077ba6;
  }
}
.overflow {
  --lh: 1.2rem;
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 0.35rem;
  /* space for ellipsis */
}
.overflow::before {
  position: absolute;
  content: '...';
  /*   inset-block-end: 0; */
  inset-inline-end: 5px;
  bottom: 0;
  right: 0;
}
.overflow::after {
  content: '';
  position: absolute;
  /*   inset-inline-end: 0; */
  right: 0;
  width: 1rem;
  height: 1rem;
}
/* Overwrite styling of Pagination in common.less */
/* Changes styles but not skeleton of component */
.Pagination {
  margin-bottom: 1em;
}
.Pagination a {
  background: #848484;
  border: none;
  color: #111;
  text-decoration: none;
  border-radius: 5px;
}
.Pagination a:hover {
  color: #111;
  background: #707070;
}
.Pagination a.active {
  background: #555555;
  color: #111;
  font-weight: bold;
}
.MoreDropDown {
  display: block;
  position: absolute;
  padding: 5px;
  border-radius: 4px;
  width: 120px;
  right: -40px;
  transition: 0.2s ease;
}
.MoreDropDown li {
  display: block;
  margin: 4px 0;
}
div.GraphDebugWindow {
  padding: 5px;
  border-radius: 5px;
  color: #dbdbdb;
  width: 340px;
  height: 209px;
  z-index: 12000;
  position: absolute;
  top: 65px;
  left: 15px;
}
div.css-icon div.party {
  border-radius: 50%;
  height: 18px;
  width: 18px;
  animation: pulsate 1s ease-out infinite;
  /*opacity: 0.0*/
}
div.css-icon div.party .inner-circle {
  transform: translate(-20%, -20%);
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  background-color: #55258c;
  border-radius: 50%;
  display: inline-block;
}
div.css-icon div.exhibition {
  border-radius: 50%;
  height: 18px;
  width: 18px;
  animation: pulsate 3s ease-out infinite;
}
div.css-icon div.exhibition .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);
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.1, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0;
  }
}
div.CheckUserIsAllowedInParcel ul {
  padding-left: 25px;
  list-style: none;
}
div.CheckUserIsAllowedInParcel ul li.tokensToEnter {
  margin: 5px;
}
div.CheckUserIsAllowedInParcel ul li.tokensToEnter > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
div.CheckUserIsAllowedInParcel ul li.tokensToEnter > div div#description {
  display: flex;
  flex-direction: column;
}
div.CheckUserIsAllowedInParcel ul li.tokensToEnter > div div#description b {
  display: block;
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 176px;
}
div.CheckUserIsAllowedInParcel ul li.tokensToEnter > div div#actions {
  display: flex;
  flex-direction: column;
}
div.CheckUserIsAllowedInParcel ul li.tokensToEnter > div div#actions button {
  margin: 2px 0;
}
.secret-flags span {
  color: #b5b5b5;
  background: #1a1a1a;
  padding: 2px;
  display: table;
  border-radius: 4px;
}
.secret-flags h3 {
  margin-top: 10px;
}
.tooltip-container {
  position: relative;
  display: inline-block;
  z-index: 2;
}
.tooltip-container .tooltip-main {
  border-bottom: 1px dotted black;
}
.tooltip-container .tooltip-label {
  display: none;
  width: 260px;
  background: #eeeeee;
  padding: 4px;
  color: #333;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  animation: fadeIn 0.6s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*  Open overlay in-world */
.open-link {
  max-width: 45vw;
  width: auto;
  box-sizing: border-box;
}
.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 p small {
  opacity: 0.5;
}
.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.-reconnecting {
  display: block;
}
.ConnectionStatus.-disconnected {
  display: block;
}
.ConnectionStatus.-disconnected i {
  color: #ff3b3b;
  text-shadow: 0 2px #6c1212;
}
.ConnectionStatus.-connected {
  display: none;
}
.ConnectionStatus.-hidden {
  display: none;
}
/* Tabs */
.demi-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--bright);
  margin-bottom: 1rem;
}
.demi-tabs li {
  margin: 0;
  list-style: none;
  padding: 0.1rem 1rem;
  border-bottom: 2px solid transparent;
  line-height: 2rem;
  cursor: pointer;
}
.demi-tabs li.-active {
  border-bottom: 2px solid var(--bright);
}
/* Login Overlay */
section.login {
  padding: 1rem;
}
section.login img {
  width: 2rem;
}
/* Overlays */
.OverlayWindow {
  background: #111a;
}
.InteractOverlay main.womps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
.InteractOverlay main.womps p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.InteractOverlay main.womps a {
  color: white;
}
.InteractOverlay main.womps time {
  opacity: 0.3;
}
.InteractOverlay main.womps div.womp img {
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* Partitioned Overlays */
.partitioned {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.partitioned > header {
  display: flex;
  justify-content: space-between;
}
.partitioned > main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: auto;
  height: 90vh;
}
.partitioned > footer {
  display: flex;
  justify-content: flex-end;
  height: 3rem;
  margin: 0;
  padding: 0;
}
.partitioned > footer button {
  width: 100%;
}