/*
#### 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.wallet-actions {
  display: flex;
}
.WalletInfo div.wallet-actions a.sendButton {
  padding: 8px 8px;
}
.WalletInfo div.wallet-actions a.sendButton i {
  padding: 0;
}
/* The switch - the box around the slider */
div.ToggleSwitch {
  display: flex;
  align-items: center;
  font-size: larger;
  margin: 5px;
}
div.ToggleSwitch .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  margin-right: 4px;
  /* The slider */
}
div.ToggleSwitch .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
div.ToggleSwitch .switch input:checked + .slider {
  background-color: #2196f3;
}
div.ToggleSwitch .switch input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}
div.ToggleSwitch .switch input:checked + .slider:before {
  transform: translateX(24px);
}
div.ToggleSwitch .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
div.ToggleSwitch .switch .slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
div.ToggleSwitch .switch .slider.round {
  border-radius: 24px;
}
div.ToggleSwitch .switch .slider.round:before {
  border-radius: 50%;
}
div.ToggleSwitch .tooltip.-noFixed {
  position: unset;
  min-width: 70px;
}
div.Carousel {
  min-height: 100px;
  overflow: hidden;
  position: relative;
}
div.Carousel label {
  z-index: 1;
  position: absolute;
  font-size: 12px;
  top: 30%;
  border: 1px solid #aaa;
  color: #aaa;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  background-color: #eee;
  -webkit-transition: opacity 0.7s 0.4s;
  transition: opacity 0.7s 0.4s;
}
div.Carousel label:hover {
  background-color: #4c056a;
  color: #fff;
  border: 1px solid #000;
}
div.Carousel label:nth-child(3) {
  right: 0;
}
div.Carousel div.carousel-container {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  height: fit-content;
  margin-right: 28px;
  margin-left: 28px;
}
div.Carousel div.carousel-container::-webkit-scrollbar {
  display: none;
}
/**
  Small component that has two states: normal: show the wallet; edit: let's a user edit the content.
*/
.WalletBoxes .ScrollPane {
  max-height: 40vh;
}
.WalletBoxes button {
  cursor: pointer;
  margin: 0 2px;
}
.WalletBoxes .wallet-box {
  margin: 2px 0;
}
.WalletBoxes .wallet-box div.wallet-container {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}
.WalletBoxes .wallet-box div.wallet-container > div {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.WalletBoxes .wallet-box div.wallet-container > div,
.WalletBoxes .wallet-box div.wallet-container input[type='text'] {
  flex: 1;
}
.WalletBoxes.-web input[type='text'] {
  margin: 1px;
}
.CollectibleSelector {
  cursor: pointer;
  min-height: 52px;
  position: relative;
}
.CollectibleSelector ul {
  border: 1px solid #ccc;
  position: absolute;
  background: #f7f7f7;
  left: 0;
  top: 0;
  right: 0;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  min-height: 32px;
  max-height: 304px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 0 16px 0;
  padding: 0;
  z-index: 1;
}
.CollectibleSelector .select {
  padding: 8px;
  font-size: small;
  color: #aaa;
}
.CollectibleSelector li {
  list-style: none;
  clear: both;
  height: 2rem !important;
  overflow: hidden;
  margin: 0;
  padding: 4px;
}
.CollectibleSelector li img {
  width: 32px;
  float: left;
  margin-right: 4px;
}
.CollectibleSelector li > div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.CollectibleSelector li small {
  display: block;
  text-overflow: ellipsis;
  color: #333;
  white-space: nowrap;
  height: 1rem;
  overflow: hidden;
}
.CollectibleSelector li:hover {
  background: #b9b9b9;
}
.CollectibleSelector li:first-of-type {
  background: #fdfdfd;
  padding: 0;
}
.CollectibleSelector li:first-of-type > input[type='text'] {
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: black;
}
.CollectibleSelector li:first-of-type > input[type='text']:focus-visible,
.CollectibleSelector li:first-of-type > input[type='text'] :focus,
.CollectibleSelector li:first-of-type > input[type='text'] :focus-within {
  border: none;
  outline: none;
}
.CollectibleSelector.closed li {
  display: none;
}
.CollectibleSelector.closed li.selected {
  display: block;
  line-height: 32px;
  padding-left: 16px;
}
.GiftCollectible {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;
}
.GiftCollectible > * {
  margin: 4px 0;
}
.GiftCollectible form {
  display: flex;
}
.GiftCollectible form > div {
  flex: 2;
}
.GiftCollectible form > div label {
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.GiftCollectible form > div .Progressbar {
  margin-bottom: 0.25rem;
}
.GiftCollectible form > div > input[type='text'] {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 0 0 4px 0;
  font-size: larger;
  padding: 0;
}
.GiftCollectible form > div:last-of-type {
  margin-left: 3px;
}
.GiftCollectible .GiftCollectibleConfirm img {
  width: 52px;
  float: left;
  margin-right: 4px;
}
.GiftCollectible .GiftCollectibleConfirm > div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
}
.GiftCollectible .GiftCollectibleConfirm small {
  display: block;
  text-overflow: ellipsis;
  color: #aaa;
  white-space: nowrap;
  height: 1rem;
  overflow: hidden;
}
ul.HorizontalTabPanel {
  padding: 0;
  margin: 0;
  font-size: smaller !important;
  /*Ben's changes in his rampage*/
}
ul.HorizontalTabPanel * {
  margin: 0;
  padding: 0;
}
ul.HorizontalTabPanel a {
  color: inherit;
  background-color: unset;
}
ul.HorizontalTabPanel li + li {
  margin-left: 6px;
}
ul.HorizontalTabPanel li {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 10px !important;
  border-radius: 4px;
}
ul.HorizontalTabPanel li.-active > h5 {
  text-decoration: underline;
}
ul.HorizontalTabPanel.-avatar-profile li {
  color: #555;
  border: 1px solid #777;
}
ul.HorizontalTabPanel.-avatar-profile li h5 {
  color: black;
}
ul.HorizontalTabPanel.-avatar-profile li:hover {
  background-color: #efefef;
}
ul.HorizontalTabPanel.-avatar-profile li.-active > h5 {
  color: black;
}
div.CollapsibleComponent > header {
  cursor: pointer;
  padding: 4px;
}
div.CollapsibleComponent > header:hover {
  background-color: #f1f1f1;
}
div.CollapsibleComponent > header:after {
  content: '˄';
  font-size: 13px;
  float: right;
  margin-left: 5px;
}
div.CollapsibleComponent > header.-open {
  background-color: #f1f1f1;
}
div.CollapsibleComponent > header.-open:after {
  content: '˅';
}
div.CollapsibleComponent > div.CollapsibleContent {
  padding: 0 0 0 4px;
}
div.CollapsibleComponent div.CollapsibleContent {
  height: 0;
  overflow: hidden;
  transition: height 2s ease-in-out;
  -webkit-transition: height 2s ease-in-out;
  -moz-transition: height 2s ease-in-out;
  -ms-transition: height 2s ease-in-out;
}
div.CollapsibleComponent div.CollapsibleContent.-open {
  height: auto;
}
div.CollapsibleComponent.-report-table {
  border: 2px solid #e9e9e9;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.SendERC20Window p {
  margin-top: 0;
}
.SendERC20Window form div.currency-selection {
  display: flex;
}
.SendERC20Window form div.currency-selection > * {
  padding: 0 1px;
}
.SendERC20Window form input[type='text'] {
  width: 100%;
}
/* Snackbar */
.SnackbarsContainer {
  position: absolute;
  z-index: 12001;
  min-width: 33vw;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0px);
  pointer-events: none;
}
.snackbar {
  visibility: hidden;
  width: 100%;
}
.snackbar.show {
  visibility: visible;
}
.snackbar.clickable {
  pointer-events: none;
  cursor: pointer;
}
.snackbar .panel {
  background-color: #333;
  border-radius: 0.2rem;
  padding: 0.75rem;
  border: 1px solid #444;
  box-shadow: 0 1px 4px 0 #444;
  text-shadow: 1px 1px 2px #111;
}
.snackbar .panel.is-info {
  margin: 0.125rem 0;
  background-color: #333;
}
.snackbar .panel.is-success {
  background-color: #333;
}
.snackbar .panel.is-warning {
  background: #feaa00;
}
.snackbar .panel.is-danger {
  background: #d01a00;
}
.snackbar .panel.is-help {
  background-color: #333;
}
section.events .event-item {
  width: 20vw;
  padding-right: 2rem;
}
section.events h3 {
  width: 100vw;
  font-size: 1em;
}
.event-showcase {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5em;
}
.event-showcase h4 {
  margin: 0 0 0.5rem 0;
  padding: 0;
  border-bottom: 1px solid #55278c;
}
.event-showcase .event-item {
  margin-bottom: 1rem;
  max-width: 30rem;
}
.event-showcase .event-item .header {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-showcase .event-item .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-showcase .event-item .description .see-more {
  text-align: right;
}
.event-showcase .event-item .summary {
  color: var(--small);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: x-small;
}
.event-showcase .event-item .summary .host,
.event-showcase .event-item .summary .venue {
  font-style: italic;
}
.events {
  margin-bottom: 3rem;
}
.parcel-event-panel {
  border-bottom: 1px solid #ddd;
}
.parcel-event-panel .event-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.parcel-event-panel .content {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.parcel-event-panel .content .event-item {
  flex: 1 1 auto;
}
.parcel-event-panel .content .event-item > div {
  margin-bottom: 1rem;
}
.parcel-event-panel .content .event-item .event-time {
  flex: 0 0 95px;
  text-align: center;
}
.parcel-event-panel .content .event-item .event-time > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 85px;
  border: 1px solid #79148d;
}
.parcel-event-panel .content .event-item .event-time .first {
  flex: 1 0 1rem;
  background: #9218ab;
  text-shadow: 1px 1px #79148d;
  border-color: #79148d;
  border-width: 1px;
}
.parcel-event-panel .content .event-item .event-time .middle {
  flex-basis: 3rem;
  line-height: 3rem;
  font-size: 2rem;
}
.parcel-event-panel .content .event-item .event-time .last {
  padding: 0 0.5rem 0.25rem 0.5rem;
}
.parcel-event-panel .content .event-item .event-time .live-now {
  font-size: 2rem;
}
.parcel-event-panel .content .event-item .event-time.current .first {
  background: #55278c;
  text-shadow: 1px 1px #210e33;
  border-color: #210e33;
}
.parcel-event-panel .content .event-item .event-time.past .first {
  background: #adadad;
  text-shadow: 1px 1px #a9a9a9;
  border-color: #a9a9a9;
}
.parcel-event-panel .content .event-item .event-time .add-to-calendar {
  padding-top: 0.5rem;
  font-size: smaller;
}
.parcel-event-panel .content .event-item .location {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.parcel-event-panel .content .event-item .event-body {
  display: flex;
  column-gap: 0.5rem;
}
.parcel-event-panel .content .event-item .event-body .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1rem;
}
.parcel-event-panel .content .event-item .event-body .countdown {
  margin-top: 1rem;
}
.parcel-event-panel .content .preview {
  flex: 1 1 320px;
  border: 1px solid #ddd;
}
.event-page iframe {
  /* sizing mixin */
  min-width: calc(min(100%, 80vh, 1024px));
  aspect-ratio: 3/4;
  max-height: 60vh;
  border: none;
  outline: none;
}
.event-page .content {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.event-page .content .event-item {
  flex: 1 1 auto;
  max-width: 32rem;
}
.event-page .content .event-item > div {
  margin-bottom: 1rem;
}
.event-page .content .event-item .event-body {
  display: flex;
  column-gap: 0.5rem;
}
.event-page .content .event-item .event-body .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 1rem;
}
.event-page .content .event-item .event-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem;
}
.event-page .content .event-item .event-footer .event-actions {
  display: flex;
  flex-direction: column;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.event-page .content .event-item .event-footer .summary {
  flex: 1;
}
.event-page .content .event-item .event-footer .admin {
  flex-basis: 100%;
  display: flex;
  gap: 1rem;
  justify-content: end;
}
.event-page .content .preview {
  flex: 1 1 320px;
  border: 1px solid #ddd;
}
.OverlayWindow .event-body {
  padding-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
}
.OverlayWindow .event-body .event-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 45rem;
}
.OverlayWindow .event-body .event-description .meta {
  margin-top: 0.5rem;
}
.OverlayWindow .event-body .event-time {
  flex: 0 0 95px;
  text-align: center;
  flex: 0 0 120px;
}
.OverlayWindow .event-body .event-time > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 85px;
  border: 1px solid #79148d;
}
.OverlayWindow .event-body .event-time .first {
  flex: 1 0 1rem;
  background: #9218ab;
  text-shadow: 1px 1px #79148d;
  border-color: #79148d;
  border-width: 1px;
}
.OverlayWindow .event-body .event-time .middle {
  flex-basis: 3rem;
  line-height: 3rem;
  font-size: 2rem;
}
.OverlayWindow .event-body .event-time .last {
  padding: 0 0.5rem 0.25rem 0.5rem;
}
.OverlayWindow .event-body .event-time .live-now {
  font-size: 2rem;
}
.OverlayWindow .event-body .event-time.current .first {
  background: #55278c;
  text-shadow: 1px 1px #210e33;
  border-color: #210e33;
}
.OverlayWindow .event-body .event-time.past .first {
  background: #adadad;
  text-shadow: 1px 1px #a9a9a9;
  border-color: #a9a9a9;
}
.OverlayWindow .event-body .event-time .add-to-calendar {
  padding-top: 0.5rem;
  font-size: smaller;
}
.OverlayWindow .event-body .event-time > a > div,
.OverlayWindow .event-body .event-time > div {
  border-color: #0e0e0e;
}
.OverlayWindow .event-body .event-time .first {
  border-color: #021502;
}
.EventRow {
  position: relative;
  margin: 10px auto;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
  display: flex;
  max-height: 135px;
}
.EventRow > aside {
  margin-right: 8px;
}
.EventRow > aside div.userCount {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #3d2f5fbf;
}
.EventRow > aside img {
  width: 180px;
  height: 135px;
}
.EventRow > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.EventRow > div > header {
  display: flex;
  justify-content: space-between;
}
.EventRow > div > header div.event {
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
  max-width: 45rem;
}
.EventRow > div > header div.user {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right;
}
.EventRow > div > header div + div {
  margin-left: 4px;
}
.EventRow > div div.eventDescription {
  line-height: 1.3;
  margin: 5px 0;
  font-size: 90%;
  white-space: pre-line;
  display: flex;
  flex: 1;
  align-content: center;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 45rem;
}
.historic-events .event-item {
  margin-bottom: 0.5rem;
}
.historic-events .event-header h4 {
  padding: 0;
  margin: 0 0 0.25rem;
}
.historic-events .event-footer {
  display: flex;
  column-gap: 0.25rem;
}
.calTime {
  flex: 0 0 95px;
  text-align: center;
}
.calTime > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 85px;
  border: 1px solid #79148d;
}
.calTime .first {
  flex: 1 0 1rem;
  background: #9218ab;
  text-shadow: 1px 1px #79148d;
  border-color: #79148d;
  border-width: 1px;
}
.calTime .middle {
  flex-basis: 3rem;
  line-height: 3rem;
  font-size: 2rem;
}
.calTime .last {
  padding: 0 0.5rem 0.25rem 0.5rem;
}
.calTime .live-now {
  font-size: 2rem;
}
.calTime.current .first {
  background: #55278c;
  text-shadow: 1px 1px #210e33;
  border-color: #210e33;
}
.calTime.past .first {
  background: #adadad;
  text-shadow: 1px 1px #a9a9a9;
  border-color: #a9a9a9;
}
.calTime .add-to-calendar {
  padding-top: 0.5rem;
  font-size: smaller;
}
.create-event-form .field {
  margin-bottom: 1.5rem;
}
.create-event-form .field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
}
.create-event-form .field .starts-now {
  display: inline;
}
.create-event-form .field .starts-now label {
  display: inline;
}
.create-event-form .field input.name,
.create-event-form .field textarea {
  font-size: 0.85rem;
  width: 33rem;
}
.create-event-form .field.duration div {
  display: flex;
  column-gap: 0.25rem;
  align-items: center;
}
.create-event-form .submit {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.25rem;
  align-items: center;
}
.event-calendar .navigation {
  display: flex;
  justify-content: space-between;
  clear: both;
  margin-top: 0.5rem;
}
.event-readable-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.Form .field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0;
  flex-wrap: wrap;
}
.Form .field.TextArea {
  align-items: start;
}
.Form .field label {
  flex: 0 0 5rem;
  display: inline-block;
}
.Form .field input {
  flex: 0;
}
.Form .field input[type='color'],
.Form .field input[type='file'] {
  flex: unset;
}
.Form .field .help {
  color: #999;
}
.Form .submit {
  text-align: right;
}
:root {
  --semi: #2225;
  --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;
}
/**
  * Fix popup image size in leaflet map for WOMP cards
  */
div.leaflet-popup-content div.womp a > img {
  max-width: 100%;
  object-fit: contain;
}
/* flex helpers */
.is-flex {
  display: flex;
  flex-direction: row;
}
.is-flex.space-between {
  justify-content: space-between;
}
.is-flex.space-around {
  justify-content: space-around;
}
.flex-column {
  flex-direction: column;
}
.flex-fill {
  flex: 1;
}
.flex-one {
  flex: 1;
}
.flex-two {
  flex: 2;
}
.flex-three {
  flex: 3;
}
.flex-four {
  flex: 4;
}
.flex-col-gap {
  column-gap: 1rem;
}
.flex-row-gap {
  row-gap: 1rem;
}
.parcel-page {
  position: relative;
}
.parcels-details {
  position: relative;
}
.parcels-details a.play-now {
  margin: 0.3rem 0.5rem 0.2rem 0;
}
.parcels-details .row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.parcels-details .pd-a {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  margin-right: 10px;
}
.parcels-details .pd-b {
  flex-grow: 1;
}
.parcels-details .pd-c {
  flex-grow: 1;
  margin-top: 0.5rem;
}
.parcels-details h1 {
  margin: 0;
}
.parcels-details .parcelName-editable:hover {
  border-bottom: 2px solid #424242;
}
.parcels-details .parcelName-editable:focus {
  outline: none;
  border-bottom: 3px solid #383838;
}
.parcels-details h2.address {
  font-size: 1.5em;
  margin: 0;
}
.parcels-details.collection img {
  width: 75px;
  height: 75px;
}
.parcels-details .parcel-state-indicator {
  position: absolute;
  top: -8px;
  left: -19px;
  display: flex;
  flex-direction: column;
}
.parcels-details .parcel-state-indicator > .parcel_mode {
  width: 20px;
  height: 20px;
  justify-content: center;
  align-self: center;
  display: flex;
  cursor: default;
  font-size: large;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .parcels-details .parcel-state-indicator > .parcel_mode {
    width: 25px;
    height: 25px;
  }
}
.play-buttons {
  display: flex;
  flex-direction: row;
  margin-top: 0.2rem;
}
button.play-now,
a.play-now,
a.xr-now {
  cursor: pointer;
  border-radius: 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.panel_left {
  width: auto;
  position: initial;
  min-width: 20%;
}
.SplitPanel > aside.panel_left.-max40 {
  max-width: 40%;
}
.SplitPanel > div {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.SplitPanel > * + * {
  margin-left: 10px;
}
.SplitPanel.-column {
  flex-direction: column;
}
.SplitPanel.-column .Panel {
  margin-left: 0;
}
@media only screen and (max-width: 800px) {
  .SplitPanel {
    flex-direction: column;
    /* This is to make the whole SplitPanel scrollable */
    overflow-y: auto;
    /* remove scrollable attribute of Panels; */
  }
  .SplitPanel > div.Panel {
    overflow: unset;
    min-height: unset;
  }
  .SplitPanel > * + * {
    margin-left: 0;
    margin-bottom: 5px;
  }
}
.Panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.Panel > header {
  position: relative;
}
.Panel > header h3 {
  background: none;
}
.Panel > header button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #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;
  display: flex;
  gap: 4px;
}
.Pagination a:first-child,
.Pagination a:last-child {
  white-space: pre;
  padding: 0 8px;
}
.Pagination a,
.Pagination span {
  min-width: 24px;
  text-align: center;
  height: 24px;
  line-height: 24px;
}
.Pagination span {
  color: #aaa;
}
.Pagination a {
  border: 1px solid var(--border);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
.Pagination a.active {
  border: none;
  font-weight: bold;
}
div.SimpleNameMintInput {
  padding-bottom: 10px;
}
div.SimpleNameMintInput form {
  margin-bottom: 5px;
  text-align: center;
}
div.SimpleNameMintInput form label {
  font-weight: bold;
}
div.SimpleNameMintInput form input[type='text'] {
  width: 60%;
  line-height: 20px;
  border-radius: 5px;
  border: none;
  border-bottom: 2px solid black;
  margin: 2px 4px;
  padding: 2px;
}
.OverlayWindow.-wearable-transfer {
  max-width: 28rem;
}
.TransferCollectible,
.BatchTransferNFT {
  max-width: 95vh;
}
.TransferCollectible .progress,
.BatchTransferNFT .progress {
  display: flex;
  gap: 0.25rem;
}
.TransferCollectible .help,
.BatchTransferNFT .help {
  margin-top: 1rem;
}
.Progressbar {
  width: 100%;
  position: relative;
  height: 4px;
  overflow: hidden;
  transform: translateZ(0);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.6, 1) 0ms;
}
.Progressbar .progress-outer {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: top left;
  animation: none;
}
.Progressbar .progress-outer .progress-inner {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #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: white;
}
a:hover {
  text-decoration: underline;
}
.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 {
  background: #181511;
  border: none;
  border-radius: 1rem;
  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 iframe {
  border-radius: 1rem;
  background: #eee;
}
.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 + .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: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
}
.AssetCard.-small {
  height: 100%;
}
.AssetCard.-small > *:nth-child(2) {
  flex-grow: 1;
}
.AssetCard.-small > img {
  width: 140px;
  height: 140px;
}
.AssetCard.-large {
  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 > div.loading-image {
  width: 100%;
}
.AssetCard > div.loading-image > img {
  display: block;
  margin: auto;
}
.AssetCard > div.broken-image {
  width: 100%;
  height: 100%;
  filter: grayscale();
}
.AssetCard > div.broken-image > img {
  display: block;
  margin: auto;
}
.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.author {
  font-size: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.AssetCard footer div + div {
  margin-left: 4px;
}
.AssetCard div.viewsCount {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  border-radius: 5px;
  background: #3d2f5fbf;
  color: #ececec;
}
.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 .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: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 10px;
  /**
      * Each asset card container in the client;
      * mainly used to style the action buttons on hover;
      */
}
.assets .asset-browser img {
  border-radius: 2px;
}
.assets .asset-browser div.asset-card-container {
  position: relative;
}
.assets .asset-browser div.asset-card-container div.asset-card-actions {
  display: none;
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
}
.assets .asset-browser div.asset-card-container:hover div.asset-card-actions {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.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;
}
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 20px;
  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;
  color: white;
  font-weight: normal;
}
.FeatureSpawnList .add-buttons li img {
  width: 24px;
  position: absolute;
  left: 4px;
  top: 8px;
  filter: grayscale() brightness(1.5) contrast(2);
}
.FeatureSpawnList .add-buttons li small {
  display: block;
  color: #fff7;
  margin: 0;
}
.FeatureSpawnList .add-buttons li .middle-container {
  width: 71%;
}
.FeatureSpawnList .add-buttons li .meta {
  color: #dd0000;
  font-size: smaller;
  position: absolute;
  top: 10px;
  right: 4px;
}
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;
}
.map {
  /**
    * Tiny leaflet fixes
    */
  /**
  * Fix popup image size in leaflet map for WOMP cards
  */
}
.map.map-overlay {
  min-width: 10vw;
  height: 75vh;
  max-height: 75vh;
  overflow: hidden;
  margin-bottom: 20px;
}
.map.map-overlay .leaflet-tile-pane {
  opacity: 0.5;
}
.map.map-web {
  aspect-ratio: unset;
  margin-top: 1rem;
  height: 80vh;
  background: var(--border);
  border-radius: 2px;
}
.map.leaflet-container {
  width: 100%;
  border: 2px solid #333333a6;
  background: #333a;
  border-radius: 4px;
}
.map.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;
}
.map.leaflet-container .leaflet-control-layers button.closeControl:hover {
  background: #eee;
}
.map.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;
}
.map.leaflet-container > button:hover {
  background-color: #505050;
  border-color: #ffffff;
}
.map.leaflet-container > button:before {
  content: '';
}
.map.leaflet-container .map-teleport-popup button {
  cursor: pointer;
  border: #b6b6b6 2px solid;
  border-radius: 4px;
  color: black;
  margin: 2px;
  padding: 4px;
}
.map.leaflet-container .map-teleport-popup button:hover {
  background-color: #e6e6e6;
}
.map.leaflet-container .leaflet-control-layers {
  visibility: visible;
  color-scheme: light;
  background-color: #ffffffbf;
}
.map.leaflet-container div.SearchMapBar {
  position: absolute;
  z-index: 3001;
  top: 10px;
  left: 50px;
  width: 25%;
  height: 25px;
}
.map.leaflet-container div.SearchMapBar input {
  width: 100%;
  height: 100%;
  font-size: larger;
}
.map .leaflet-control-zoom-in,
.map .leaflet-control-zoom-out {
  text-indent: 1px;
  padding: 0 !important;
}
.map div.leaflet-popup-content div.womp a > img {
  max-width: 100%;
  object-fit: contain;
}
.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: 30px !important;
  z-index: 298;
  background-clip: padding-box;
  border-radius: 5px;
  background-color: #85858563;
  font-size: larger;
}
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;
}
/* 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;
  border-radius: 2rem;
  background: #3335 !important;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.72rem;
  text-align: center;
  touch-action: none;
}
/* Inspector ui */
.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;
}
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: 2px solid white;
  box-shadow: 2px 2px 0 white;
  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;
}
section.build-tab nav.build-main-tabs {
  display: flex;
  padding: 8px;
  margin-bottom: 4px;
  background-color: #333;
}
section.build-tab nav.build-main-tabs div.separator {
  width: 1px;
  background-color: #555;
  margin: 0 8px;
}
section.build-tab nav.build-main-tabs button {
  flex: 1;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  color: var(--color-text-secondary);
  font-weight: bold;
  cursor: pointer;
}
section.build-tab nav.build-main-tabs button[data-active='true'] {
  color: var(--color-text-primary);
  border-bottom: 2px solid #777;
}
.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: #999;
  border-radius: 6px;
}
/* Scrollbar track background */
::-webkit-scrollbar-track {
  background: #444;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 6px;
}
/* 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 {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: none;
  font-family: system-ui, 'helvetica neue', sans-serif;
  font-size: 15px;
}
body #babylonUnmuteIconBtn {
  left: 60px !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: 64px;
  left: 0;
  height: 150px;
  width: 150px;
  padding: 0;
  border: 30px solid transparent;
  touch-action: none;
  display: flex;
  z-index: 2000;
}
/* Chat unread */
.unread {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 0.8em;
  padding: 8px;
  text-shadow: 1px 1px 1px black;
  border-radius: 4px;
}
main.chat {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0 0 4px 0;
  padding: 4px;
  overflow-y: auto;
  background: var(--tinge);
  flex: 1;
  display: flex;
  flex-direction: column;
}
main.chat b {
  margin-right: 6px;
  font-weight: normal;
  color: #aaa;
}
main.chat a {
  color: inherit;
  text-decoration: none;
}
main.chat div.chat-messages {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}
main.chat div.chat-messages > div {
  margin-bottom: 0.25rem;
}
main.chat div {
  font-size: 14px;
}
main.chat div:first-child {
  margin-top: auto !important;
}
main.chat div.-helper {
  display: flex;
  margin: 10px 0;
}
main.chat div.-helper > i {
  display: block;
  margin-right: 5px;
  padding: 4px;
}
main.chat div.-helper > div {
  font-weight: bold;
  color: #cc92da;
  font-size: 90%;
  flex: 1;
}
main.chat div.-you {
  font-style: italic;
}
main.chat div span.-chat-user-tag {
  color: #f860ff;
  cursor: pointer;
}
main.chat div span.-chat-user-tag:hover {
  color: #f64bff;
  text-decoration: underline;
}
main.chat div.broadcast {
  background: #35246933;
}
main.chat 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;
}
main.chat div p b a {
  color: #eee;
}
main.chat div p span {
  flex: 1;
}
main.chat div p.action {
  opacity: 0.6;
}
main.chat a.teleport {
  margin-left: 10px;
  color: #aaa;
}
main.chat > 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 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.8;
  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;
}
/**
* Voxel Tool Belt; which is a minecraft-like bottom toolbar for selecting voxel types
*/
.VoxelToolBelt {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  max-height: 100px;
  /**
  * Mobile styles for voxel toolbelt
  */
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .VoxelToolBelt.active .wrapper {
    top: 0;
    transition: top 0.1s ease-out;
  }
  .VoxelToolBelt:hover .wrapper {
    top: 0;
    transition: top 0.1s ease-out;
  }
}
@media only screen and (max-width: 800px) {
  .VoxelToolBelt {
    /**
    * On mobile, we want the toolbelt to be vertical on the left side
    HOWEVER, note that on mobile almost nobody will ever see the toolbelt because it's pretty much impossible to login and therefore edit.
    */
    top: 40%;
    bottom: unset;
    transform: translateY(-50%) translateX(0);
    left: 40%;
    rotate: -90deg;
  }
}
.VoxelToolBelt div.wrapper {
  display: flex;
  align-items: center;
  padding-left: 2px;
  gap: 5px;
  position: relative;
  top: 100px;
  transition: top 0.1s ease-out;
  border-radius: 5px;
  background: #d3d3d3;
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination > span {
  padding: 2px;
  font-size: 0.7rem;
  cursor: pointer;
  background-color: rgba(129, 129, 129, 0.4);
  color: #000;
  text-align: center;
  border-radius: 3px;
  width: 1rem;
  aspect-ratio: '1 / 1';
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination > span[data-active='true'] {
  background-color: rgba(255, 255, 255, 0.4);
}
.VoxelToolBelt div.wrapper div.toolbelt-pagination > span[data-active='false']:hover {
  background-color: rgba(129, 129, 129, 0.6);
}
.VoxelToolBelt div.tint {
  outline: none;
  border-radius: 4px;
  border-width: 0;
  padding: 4px;
  cursor: pointer;
  height: 100%;
  font-size: 1.15rem;
  position: relative;
  color: black;
  background-color: rgba(230, 230, 230, 0.637);
  margin-right: 0;
}
.VoxelToolBelt div.tint:hover {
  background-color: rgba(160, 160, 160, 0.637);
}
.VoxelToolBelt div.tint ul.tint-chooser {
  z-index: 2;
  position: absolute;
  left: 0;
  top: -50px;
  width: 90px;
  display: flex;
  border-radius: 4px;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 3px;
}
.VoxelToolBelt div.tint ul.tint-chooser button {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 1px;
  cursor: pointer;
  border: 1px solid white;
}
.VoxelToolBelt div.tint ul.tint-chooser button:hover {
  border: none;
  background-color: black;
}
.VoxelToolBelt div.textures {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding-left: 0;
}
.VoxelToolBelt div.textures > div {
  margin-top: 2px;
  margin-bottom: 2px;
  position: relative;
}
.VoxelToolBelt div.textures > div span.keybind-help {
  position: absolute;
  pointer-events: none;
  bottom: 0px;
  right: 50%;
  transform: translateX(50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 0.7rem;
  padding: 0px 3px;
  border-radius: 3px;
}
.VoxelToolBelt div.textures img,
.VoxelToolBelt div.textures div {
  display: block;
  background-size: 384px 384px;
  background-repeat: repeat;
  background-blend-mode: multiply;
  background-color: black;
  border-radius: 2px;
  width: 40px;
  height: 40px;
}
.VoxelToolBelt div.textures img:hover,
.VoxelToolBelt div.textures div:hover {
  cursor: pointer;
  outline: 2px solid rgba(0, 0, 0, 0.7);
}
.VoxelToolBelt div.textures img.-selected,
.VoxelToolBelt div.textures div.-selected {
  outline: 2px solid black;
}
.VoxelToolBelt div.tool-modes {
  display: flex;
  gap: 0;
}
.VoxelToolBelt div.tool-modes > button:not(:last-child) {
  border-right: 1px solid #555;
}
.VoxelToolBelt div.tool-modes button {
  height: 38px;
  margin-right: 0;
  padding-right: 6px;
  padding-left: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.VoxelToolBelt div.tool-modes button svg {
  width: 20px;
  height: 20px;
}
.VoxelToolBelt div.tool-modes button:hover {
  background-color: var(--color-bg-hover);
}
.VoxelToolBelt div.tool-modes button.-erase {
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 4px !important;
}
.VoxelToolBelt div.tool-modes button.-paint {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px !important;
}
.VoxelToolBelt div.tool-modes button img {
  width: 20px;
  height: 20px;
}
@media only screen and (max-width: 800px) {
  .VoxelToolBelt div.wrapper {
    top: unset;
    transition: none;
  }
  .VoxelToolBelt div.wrapper div.textures > div {
    rotate: 90deg;
  }
  .VoxelToolBelt div.wrapper div.toolbelt-pagination > span {
    rotate: 90deg;
  }
  .VoxelToolBelt div.wrapper div.tool-modes > button {
    rotate: 90deg;
  }
}
.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);
}
dialog.editor {
  font-size: 1em;
}
dialog.editor textarea,
dialog.editor input {
  cursor: pointer;
}
dialog.editor button.asset-library {
  width: 100%;
  margin: 0.5rem 0 0 0;
  display: inline-block;
}
dialog.editor label a {
  color: #8a8a8a;
}
dialog.editor label a:visited {
  color: #7c7c7c;
}
dialog.editor .tabs {
  height: 32px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  position: relative;
}
dialog.editor .tabs li.active {
  border-bottom: none;
  background: #444;
  color: #eee;
}
dialog.editor .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;
}
dialog.editor .tabs li img {
  width: 12px;
  position: relative;
  top: 4px;
  left: 2px;
}
dialog.editor .tabs li.close-button {
  position: absolute;
  right: -2px;
  margin-top: 1px;
  padding-bottom: 10px !important;
  background: #444;
}
dialog.editor .button-tabs {
  border-bottom: 1px solid #999;
}
dialog.editor .button-tabs button {
  color: #d4d4d4;
  background: initial;
  padding: 0.4rem;
  border-radius: 0.4rem 0.4rem 0 0;
  margin: 0 0.4rem 0 0;
}
dialog.editor .button-tabs button.active {
  color: white;
  font-weight: bold;
}
dialog.editor .textures + p {
  margin-top: 16px;
  margin-left: 12px;
}
dialog.editor .textures + p small {
  opacity: 0.3;
  overflow-wrap: break-word;
}
dialog.editor .info {
  padding: 16px 0 2px 8px;
  position: relative;
}
dialog.editor .upload-url {
  padding-top: 5px;
}
dialog.editor h4 {
  text-shadow: 1px 1px 1px black;
}
dialog.editor .bake-parcel {
  padding: 16px 0 2px 8px;
}
dialog.editor .bake-parcel p.error {
  margin-top: 5px;
  color: #ffa9a9;
}
dialog.editor .vectors {
  box-sizing: border-box;
}
dialog.editor .vectors > div {
  display: flex;
  gap: 2px;
}
dialog.editor .vectors span:has(+ input),
dialog.editor .vectors input + span {
  width: 1rem;
  padding: 0.25rem;
  display: inline-block;
  height: calc(1rem + 2px);
  text-align: center;
  cursor: pointer;
}
dialog.editor .vectors span:has(+ input):hover,
dialog.editor .vectors input + span:hover {
  background: white;
  color: #111;
}
dialog.editor .vectors span:has(+ input) {
  border-radius: 0.4rem 0 0 0.4rem;
  background: #111;
  color: white;
}
dialog.editor .vectors input {
  border: none;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  height: 1.45rem;
  padding: 0 0.5rem;
}
dialog.editor .vectors input:hover {
  border-color: white;
}
dialog.editor .vectors input + span {
  border-radius: 0 0.4rem 0.4rem 0;
  background: #111;
  color: white;
  margin-right: 0.5rem;
}
dialog.editor .editor-toolbar .help {
  display: none;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}
dialog.editor .editor-toolbar .help a {
  color: inherit;
  text-decoration: underline;
  margin-left: 0.3rem;
}
dialog.editor .f {
  padding: 9px 2px 10px;
}
dialog.editor .f * {
  box-sizing: border-box;
}
dialog.editor .f label:first-child {
  display: block;
  padding-bottom: 3px;
}
dialog.editor .f .help-script {
  color: inherit;
  padding-left: 1em;
}
dialog.editor .f input[type='text'],
dialog.editor .f input[type='number'],
dialog.editor .f input[type='range'],
dialog.editor .f textarea {
  font: inherit;
  width: 100%;
  border: none;
  padding: 4px;
  background: #222;
  color: #aaa;
  border-radius: 4px;
}
dialog.editor .f.uv input[type='number'],
dialog.editor .f.uv input.number {
  width: 90px;
  margin-right: 8px;
}
dialog.editor .f input[type='checkbox'] {
  margin-right: 10px;
}
dialog.editor .f textarea.script-editor {
  height: 300px;
  white-space: pre-wrap;
  /* For firefox */
}
dialog.editor .f textarea {
  height: 150px;
}
dialog.editor .f small {
  display: block;
  margin-top: 10px;
}
dialog.editor .f input[type='checkbox'] + small {
  display: inline;
}
dialog.editor .f .sub-f {
  background-color: #272727;
  padding: 3px 5px 0 5px;
  margin: 5px 0;
  border-radius: 2px;
  transition: height 0.5s linear;
}
dialog.editor button {
  padding: 4px 8px;
  margin-right: 8px;
  background: #aaa;
  font: inherit;
  font-size: smaller;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
dialog.editor button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
dialog.editor button[disabled]:hover {
  background: #aaa;
}
dialog.editor .f select + div {
  margin-top: 4px;
}
dialog.editor .f.fs input[type='number'],
dialog.editor .f.fs input.number {
  width: 83px;
  margin-right: 4px;
}
dialog.editor .f.fs input.error {
  outline: 1px solid #ff0000;
  background: #402000;
  color: #eeeeee;
}
dialog.editor .f.fs .vector-field {
  padding: 2px 0;
  border: 1px solid #20184a;
  background: #333;
  margin-right: 4px;
}
dialog.editor .f.fs .vector-field .minus,
dialog.editor .f.fs .vector-field .plus {
  width: 16px;
  display: inline-block;
  text-align: center;
}
dialog.editor .f.fs .vector-field .minus:hover,
dialog.editor .f.fs .vector-field .plus:hover {
  cursor: pointer;
}
dialog.editor .f.fs .vector-field input.number {
  width: 50px;
  margin: 0;
  padding: 3px 0;
  text-align: center;
  background: #222;
  border-radius: 0;
}
dialog.editor .f.fs .vector-field input.number:focus {
  outline: none;
  box-shadow: 0 0 2px #fff;
}
dialog.editor .f.fs .vector-error {
  color: #ff6644;
}
dialog.editor .easingContainer {
  display: flex;
  flex-direction: row;
  column-gap: 4px;
}
dialog.editor .lock-aspect-ratio {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
}
dialog.editor .lock-aspect-ratio-keyframe {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
  margin-left: 4px;
}
dialog.editor .aspect-ratio-permanent-lock {
  margin-right: 0;
  padding: 3px 3px 3px 5px;
  min-width: 20px;
  color: black;
}
dialog.editor .keyframes {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 4px;
  row-gap: 2px;
}
dialog.editor .f-keyframe input {
  width: 50px !important;
}
dialog.editor .f-keyframe input.frame {
  background: #111;
  text-align: center;
}
dialog.editor div.color-selectors {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
dialog.editor div.color-selectors div > small > button {
  margin-right: 0;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  dialog.editor section.explorer[data-tab='map'] {
    width: 800px;
  }
}
@media only screen and (max-width: 800px) {
  dialog.editor section.explorer[data-tab='map'] {
    width: inherit;
  }
}
.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;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid white;
  border-radius: 2rem;
  color: white;
  font: inherit;
  padding: 0.8rem 1.4rem;
  outline: none;
  box-sizing: border-box;
}
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: #868686;
  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;
  background: var(--semi);
}
.BuildToolOverlayContainer .BuildToolOverlay.-canEdit {
  transform: translateX(0%);
  visibility: visible;
  opacity: 1;
}
.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;
}
.interact-bar {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  text-align: center;
  opacity: 0.8;
}
.interact-bar:focus-within {
  opacity: 1;
}
.interact-bar:hover {
  opacity: 1;
}
.interact-bar > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.interact-bar > ul > li {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 2.976rem;
  cursor: pointer;
}
.interact-bar > 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);
}
.interact-bar > ul > li > span.pendingBadge {
  padding: 0.3em 0.5em;
  border-radius: 12px;
  font-size: 10px;
  position: absolute;
  line-height: 10px;
  right: -5px;
  top: 5px;
}
.interact-bar > ul > li.-active u {
  background: #f3f3f3d4 !important;
  color: #333;
}
.interact-bar > 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 img {
  width: 26px;
  opacity: 0.8;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  .home-button img {
    width: 38px;
    opacity: 1;
  }
}
@media only screen and (max-width: 800px) {
  .home-button img {
    width: 2.72rem;
    opacity: 1;
  }
}
@media prefers-color-scheme: dark {
  .home-button 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;
  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;
}
.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;
  cursor: pointer;
}
.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;
}
@media only screen and (max-width: 800px) {
  .open-link {
    max-width: unset;
    width: 95%;
  }
}
.open-link img {
  width: 100%;
  aspect-ratio: 2/1;
}
.open-link p.url {
  margin-top: 2rem;
  font-size: 1.3rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 500px;
}
.open-link p.url a {
  background-color: #333;
  border-radius: 0.5rem;
  text-decoration: underline;
}
.open-link 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 */
button[accesskey] kbd {
  text-decoration: none;
}
button[accesskey]:hover kbd {
  text-decoration: underline;
}
.MyNFTSOverlay .scrollContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1rem;
}
.MyNFTSOverlay .scrollContainer img {
  width: 100%;
  background: #aaa5;
  border-radius: 2px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.MyNFTSOverlay .scrollContainer h3 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.8rem;
  margin: 0 0 0.2rem 0;
}
.MyNFTSOverlay .scrollContainer p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
}
.script-editor {
  margin: 0;
  padding: 0;
}
.script-editor .help-script,
.script-editor textarea {
  width: 100%;
  height: 25vh;
  font-family: monospace;
  font-size: 14px;
  line-height: 16px;
  background: #222;
  color: #fff;
  border-radius: 4px;
  border: none;
  resize: vertical;
  overflow: auto;
  box-sizing: border-box;
  padding: 4px;
  margin: 0;
  outline: none;
  margin-top: 0.5rem;
}
.script-editor .help-script {
  height: unset;
}
.codeflask-container {
  width: 100%;
  height: 40vh;
  font-family: Menlo, Monaco, Consolas, monospace;
  position: relative;
}
.codeflask-container textarea,
.codeflask-container pre {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: inherit;
  border: none;
  outline: none;
  resize: none;
}
.codeflask-container textarea {
  z-index: 110;
  color: transparent !important;
  background: transparent !important;
  caret-color: #fff !important;
}
.codeflask-container pre {
  z-index: 100;
}
.codeflask {
  background: #202123;
  color: #dcdcdc;
  caret-color: #fff;
}
.codeflask ::selection {
  background: #fff;
  /* background of selected text */
  color: #000;
  /* color of selected text */
}
/* Syntax tokens styled to match ChatGPT-ish tones */
.codeflask .token.punctuation {
  color: #999;
}
.codeflask .token.keyword {
  color: #ff7b72;
}
.codeflask .token.operator {
  color: #ff7b72;
}
.codeflask .token.string {
  color: #a5d6ff;
}
.codeflask .token.comment {
  color: #6a737d;
  font-style: italic;
}
.codeflask .token.function {
  color: #d2a8ff;
}
.codeflask .token.boolean {
  color: #ffab70;
}
.codeflask .token.number {
  color: #79c0ff;
}
.codeflask .token.selector {
  color: #79c0ff;
}
.codeflask .token.property {
  color: #ffa657;
}
.codeflask .token.tag {
  color: #7ee787;
}
.codeflask .token.attr-value {
  color: #a5d6ff;
}
.codeflask .token.class-name {
  color: #d2a8ff;
}
.codeflask .token.builtin {
  color: #ffa657;
}
.codeflask .token.constant {
  color: #ffab70;
}
.codeflask .token.attr-name {
  color: #7ee787;
}
/* Optional: soften scrollbars */
.codeflask ::-webkit-scrollbar {
  width: 8px;
}
.codeflask ::-webkit-scrollbar-thumb {
  background: #2c2e31;
  border-radius: 4px;
}
/* Aside sidebar */
aside.ui-toggle-mobile {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
aside.ui-toggle-mobile button {
  padding: 8px;
}
@media only screen and (min-width: 800px) and (min-height: 450px) {
  aside.ui-toggle-mobile {
    display: none;
  }
}
aside.ui-toggle-mobile.hidden {
  display: none;
}
aside {
  width: 8rem;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  /*
  Put the in-game sidebar back when active or hovered
  */
}
aside > ul {
  left: -8rem;
  transition: left 0.1s ease-out;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8rem;
  margin: 0;
  padding: 0;
}
aside > ul li:first-child {
  margin-top: 1rem;
}
aside > ul li {
  list-style: none;
  margin: 0;
  padding: 0 1rem;
}
aside > ul li.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
aside > ul li.disabled a {
  color: unset;
}
aside > ul a,
aside > ul u {
  display: block;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 1px 1px 1px black;
}
aside > ul a:hover,
aside > ul u:hover {
  text-decoration: underline;
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
}
aside > ul .active a,
aside > ul .active u {
  text-decoration: underline;
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
}
aside[data-active='true'] > ul.ui-sidebar,
aside:hover > ul.ui-sidebar,
aside:has(dialog) ul.ui-sidebar {
  left: 0;
  transition: left 0.1s ease-out;
}
aside dialog {
  position: fixed;
  top: 1rem;
  left: 8rem;
  bottom: 0;
  display: block;
  margin: 0;
  width: auto;
  width: 25rem;
  border: none;
  background: transparent;
}
aside dialog header {
  position: relative;
}
aside dialog header h1,
aside dialog header h2 {
  font-size: 1.22rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 2px black;
}
aside dialog header button.close {
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  background: #3335;
  border: none;
  cursor: pointer;
}
aside dialog header button.close:hover {
  font-weight: bold;
}
aside dialog > section {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
  border-radius: 1rem;
  padding: 0.5rem;
  background: #333;
}
dialog .baking textarea {
  width: 100%;
  background: transparent;
  height: 80vh;
  border: none;
}
.costume-overlay select {
  width: 100%;
  margin-bottom: 1rem;
}
.costume-overlay div.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.3rem;
}
.costume-overlay div.grid div {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 1rem;
}
.costume-overlay div.grid div img {
  width: 120px;
  border-radius: 0.4rem;
}
.inline-tabs {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.inline-tabs li {
  list-style: none;
  border-bottom: 2px solid transparent;
  line-height: 2rem;
  cursor: pointer;
}
.inline-tabs li.-active {
  border-bottom: 2px solid var(--bright);
}
/* Womps */
.le-wompies .grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
.le-wompies .grid p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.le-wompies .grid a {
  color: white;
}
.le-wompies .grid time {
  opacity: 0.3;
}
.le-wompies .grid div.womp img {
  max-width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* Login */
aside .login a.button {
  position: relative;
  background: white;
  color: black;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  line-height: 2rem;
  display: inline-block;
  cursor: pointer;
}
aside .login a.button img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  position: relative;
  top: 0.25rem;
}
/* Emotes */
aside .EmoteList ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 0.5rem;
}
aside .EmoteList ul li {
  filter: grayscale(100%);
}
aside .EmoteList ul li:hover {
  background: white;
  color: black;
  border-radius: 1rem;
  filter: unset;
}
aside .AnimateList ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}
aside .AnimateList ul li:hover {
  background: white;
  color: black;
  border-radius: 1rem;
}
/* Parcel name */
@keyframes drop-fade {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  5% {
    opacity: 1;
    transform: translateY(0);
  }
  95% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}
div.location {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  animation: drop-fade 4s ease-in-out;
  animation-fill-mode: forwards;
  display: flex;
  flex-direction: column;
}
div.location a.address {
  width: 100vw;
  position: relative;
  font-weight: bold;
  font-style: normal;
  font-size: 48px;
  color: white;
  letter-spacing: -2px;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8);
}
div.location a.address:hover {
  text-decoration: none;
}
@media only screen and (max-width: 800px) {
  div.location a.address {
    font-size: 32px;
    letter-spacing: 0;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  }
}
/* Common dialog form styles */
dialog ul.toolbar {
  margin-bottom: 10px;
  padding-left: 0;
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 0;
}
dialog ul.toolbar li {
  flex: 0 1 auto;
}
dialog ul.toolbar li button {
  background: #007fff;
  color: white;
  margin-left: 2px;
  font-size: unset;
}
dialog ul.toolbar li button:hover {
  background: #d9d9d9;
}
/**
  * Shows a tiny message on the screen " X mode is active "
  */
.feature-mode-overlay {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(170, 170, 170, 0.582);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}
/* Costumes */
.costume-overlay ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}
.costume-overlay ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 1rem;
}
.costume-overlay ul li img {
  width: 100%;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  border-radius: 0.5rem;
}
/* NFT Display */
.nft-view {
  max-height: calc(100vh - 3rem);
  width: auto;
  max-width: calc(100vw - 3rem);
  box-sizing: border-box;
  background: #555;
}
.nft-view h1 {
  text-shadow: 2px 2px 2px black;
}
.nft-view h1 a {
  text-decoration: none;
  color: white;
}
.nft-view h1 a:hover {
  text-decoration: underline;
}
.nft-view audio {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.nft-view img,
.nft-view video {
  display: block;
  border-radius: 1rem;
  height: calc(100vh - 20rem);
  object-fit: contain;
  image-rendering: auto;
  /* default: smooth */
  image-rendering: optimizeQuality;
}
.nft-view .nft-description {
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: #ccc;
  padding: 1rem;
}