@font-face {
  font-family: "Hopes Letter";
  src: url("HopesLetterRegular.woff2") format("woff2"),
    url("HopesLetterRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #c518ae;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff00ea;
}

.f-hopes {
  font-family: "Hopes Letter";
}

body {
  background-color: black;
  touch-action: manipulation;
}

.redesign-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: black;
  background: radial-gradient(#0007df, #000000);
  background-image: url(https://i.imgur.com/nwTm66v.jpeg);
}

.bottom-fade {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 91%,
    rgba(0, 0, 0, 1) 100%
  );
  height: 80px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.top-fade {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 91%,
    rgba(0, 0, 0, 0.5) 100%
  );
  height: 80px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.bg-backdrop {
  width: 100%;
  max-width: 1920px;
  max-height: 1080px;
  width: 1920px;
  height: 1080px;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 20px;
  background-image: url("/img/redesign/empty.png");
}

.bg-backdrop-border {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 110;
  border: 2px solid #e500c4;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 4px #e500c4;
}

.bg-overlay {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 80;
  border-radius: 20px;
}

.bg-overlay .img-fluid {
  border-radius: 20px;
}

.font-wrapper {
  width: 100%;
  height: 100%;
  position: static;
}

.bg-backdrop .floating.overlay {
  width: 9%;
  max-width: 150px;
  top: -13%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 150;
}

.bg-backdrop .floating.sign-overlay {
  width: 50%;
  top: 15%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 140;
}

.bg-backdrop .sign-bg-dimmer {
  z-index: 139;
}

.bg-backdrop .floating.sign-overlay .petstore-closed-voucher {
  width: 6.1%;
  bottom: 23.7%;
  z-index: 141;
  left: 46.4%;
}

.bg-backdrop .floating.sign-overlay .petstore-closed-opensea {
  width: 8.8%;
  bottom: 29%;
  z-index: 141;
  left: 46.4%;
}

.bg-backdrop .floating.sign-overlay .shelter-closed-opensea {
  width: 8.8%;
  bottom: 30%;
  z-index: 141;
  left: 46.8%;
}

.bg-backdrop .floating.sign-overlay .vouchers-closed-opensea {
  width: 8.8%;
  bottom: 26%;
  z-index: 141;
  left: 46.4%;
}

.bg-backdrop .floating.sign-overlay.blueprint {
  width: 62%;
  top: 15%;
  left: 50%;
  z-index: 141;
}

.bg-backdrop .floating.sign-overlay.tailor-info {
  width: 57%;
  top: 8%;
  left: 50%;
  z-index: 141;
}

.bg-backdrop .floating.sign-overlay.tailor-info img {
  border-radius: 2%;
}

.bg-backdrop .floating.sign-overlay.tailor-clothes {
  width: 50%;
  top: 10%;
  left: 50%;
  z-index: 141;
}

.floating {
  position: absolute;
  z-index: 130;
}

.floating-btn {
  position: absolute;
  z-index: 130;

  animation-duration: 1s;
  animation-name: btnFloatAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  cursor: pointer;

  filter: brightness(1);
  transition: filter 0.4s;
}

.floating-btn:disabled {
  filter: grayscale(0.88);
  cursor: default !important;
}

.floating-btn.subtle {
  animation-name: btnFloatSubtleAnim;
}

.floating-btn.subtle:hover img {
  filter: brightness(1.2);
}

.floating-btn.less-glow {
  animation-name: btnFloatLessGlowAnim;
}

.floating-btn:not(.subtle) img {
  filter: brightness(1);
  transform: scale(1, 1);
  transition: all 0.4s;
}

.floating-btn:not(.subtle, .less-glow) img:hover {
  filter: brightness(1.25);
  transform: scale(1.2, 1.2);
}

.floating-btn.less-glow img:hover {
  filter: brightness(1.09);
  transform: scale(1.2, 1.2);
}

@keyframes btnFloatAnim {
  from {
    transform: translateY(0);
    transform: scale(1, 1);
    filter: brightness(1);
  }

  to {
    transform: translateY(-7px);
    transform: scale(1.05, 1.05);
    filter: brightness(1.22);
  }
}

@keyframes btnFloatSubtleAnim {
  from {
    transform: translateY(0);
    transform: scale(1, 1);
  }

  to {
    transform: translateY(-7px);
    transform: scale(1.02, 1.02);
  }
}

@keyframes btnFloatLessGlowAnim {
  from {
    transform: translateY(0);
    transform: scale(1, 1);
    filter: brightness(1);
  }

  to {
    transform: translateY(-7px);
    transform: scale(1.05, 1.05);
    filter: brightness(1.09);
  }
}

.message-overlay {
  padding: 40px 26px;
  width: fit-content;
  height: auto;
  position: absolute;
  z-index: 145;
  min-width: 300px;
  min-height: 100px;
  max-width: 80%;
  background-color: #ebebeb;
  border: 4px solid #d5399d;
  border-radius: 12px;
  font-weight: 500;
  color: #000000;
  font-size: 18px;
  text-align: center;
  top: 40%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.message-overlay.warning {
  background-color: #f7f7b7;
}

.message-overlay.success {
  background-color: #19a725;
}

.message-overlay.error {
  background-color: #a81b1b;
}

.message-overlay .message-close-btn {
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 2px;
  right: 10px;
  text-align: center;
  transition: all 0.5s;
  color: #ff6a5f;
}
.message-overlay .message-close-btn:hover {
  color: #d82939;
}

.message-overlay a {
  color: #2156e7;
  transition: color 0.2s;
  font-weight: 700;
  text-decoration: underline;
}

.message-overlay a:hover {
  color: #2198e7;
}

.prelanding-page .mastercats-logo {
  width: 40%;
  top: 3.5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.prelanding-page .gif {
  width: 13%;
  transform: translateX(29.5%);
}

.prelanding-page .gif.gif-1 {
  top: 26%;
  left: 25%;
}

.prelanding-page .gif.gif-2 {
  top: 26%;
  left: 39.2%;
}

.prelanding-page .gif.gif-3 {
  top: 26%;
  left: 53.6%;
}

.prelanding-page .gif.gif-4 {
  top: 51.2%;
  left: 25%;
}

.prelanding-page .gif.gif-5 {
  top: 51.2%;
  left: 39.2%;
}

.prelanding-page .gif.gif-6 {
  top: 51.2%;
  left: 53.6%;
}

.prelanding-page .start-btn {
  width: 9%;
  top: 73.03%;
  left: 45%;
}

.prelanding-page .sub-msg {
  width: fit-content;
  top: 92%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #e500c4;
  font-size: 1.2vw;
}

.landing-page .enter-btn {
  width: 13%;
  bottom: 13.4%;
  left: 41%;
}

.lobby-page .left-info {
  width: 24%;
  top: 28%;
  left: 17%;
}

.lobby-page .left-info.alt {
  opacity: 0;
  transition: opacity 0.8s;
}

.lobby-page .left-info.alt:hover {
  opacity: 1;
}

.lobby-page .twitter-icon {
  width: 2.3%;
  top: 37.04%;
  left: 28.62%;
}

.lobby-page .right-info {
  width: 24%;
  top: 28%;
  left: 61%;
}

.lobby-page .merch-btn {
  width: 7.27%;
  top: 0.21%;
  left: 0.63%;
}

.lobby-page .nll-portal-btn {
  width: 8.13%;
  top: 13%;
  left: 0.17%;
}

.lobby-page .music-btn {
  width: 10%;
  top: 48.2%;
  left: 17%;
}

.lobby-page .music-notes {
  width: 11%;
  top: 47%;
  left: 9%;
}

.lobby-page .opensea-btn {
  width: 5.7%;
  top: 47.3%;
  left: 61.98%;
}

.lobby-page .twitter-btn {
  width: 6%;
  top: 47.43%;
  left: 68.46%;
}

.lobby-page .discord-btn {
  width: 6%;
  top: 47.25%;
  left: 75.35%;
}

.lobby-page .medium-btn {
  width: 6%;
  top: 47.1%;
  left: 81.75%;
}

.lobby-page .blueprint-btn {
  width: 9%;
  bottom: 32.5%;
  left: 47.7%;
}

.lobby-page .petstore-btn {
  width: 14%;
  bottom: 0%;
  left: 43%;
}

.lobby-page .vouchers-btn {
  width: 14%;
  bottom: 0%;
  left: 16%;
}

.lobby-page .shelter-btn {
  width: 14%;
  bottom: 0%;
  right: 16%;
}

.vouchers-page .lobby-btn {
  width: 7%;
  top: 34%;
  left: 2%;
}

.vouchers-page .vouchers-vid {
  width: 14%;
  bottom: 5.7%;
  right: 16%;
  border: #e500c4 8px solid;
}

.vouchers-page .vouchers-vid.alpha {
  width: 14%;
  bottom: 45%;
  right: 35.5%;
  /* transform: rotateZ(358deg); */
  border-radius: 8px;
}

.vouchers-page .vouchers-vid.beta {
  width: 14%;
  bottom: 45.5%;
  right: 11%;
  /* transform: rotateZ(359deg); */
  border-radius: 8px;
}

.vouchers-page .alpha-info {
  width: 16%;
  bottom: 25%;
  right: 33.5%;
}

.vouchers-page .beta-info {
  width: 16%;
  bottom: 27%;
  right: 9%;
}

.vouchers-page .alpha-mint {
  width: 12%;
  bottom: 19%;
  right: 35.9%;
}

.vouchers-page .beta-mint {
  width: 12%;
  bottom: 19%;
  right: 11.4%;
}

.vouchers-page .alpha-qty-minus {
  width: 2.7%;
  bottom: 13.6%;
  right: 43.7%;
}

.vouchers-page .alpha-qty-info {
  width: 2.7%;
  bottom: 13.6%;
  right: 40.2%;
}

.vouchers-page .alpha-qty-info-text {
  width: 2.7%;
  bottom: 13.37%;
  right: 40.26%;
  text-align: center;
  font-size: 1.4vw;
  font-weight: 700;
}

.vouchers-page .alpha-qty-plus {
  width: 2.7%;
  bottom: 13.6%;
  right: 36.7%;
}

.vouchers-page .beta-qty-minus {
  width: 2.7%;
  bottom: 13.6%;
  right: 19.3%;
}

.vouchers-page .beta-qty-info {
  width: 2.7%;
  bottom: 13.6%;
  right: 15.8%;
}

.vouchers-page .beta-qty-info-text {
  width: 2.7%;
  bottom: 13.56%;
  right: 15.86%;
  text-align: center;
  font-size: 1.4vw;
  font-weight: 700;
}

.vouchers-page .beta-qty-plus {
  width: 2.7%;
  bottom: 13.6%;
  right: 12.44%;
}

.vouchers-page .remaining-text {
  width: fit-content;
  text-align: center;
  font-size: 1.95vw;
  font-weight: 700;
  color: #f148b4;
  bottom: 71.3%;
  background-color: #00000026;
  border-radius: 6px;
  padding: 8px;
}

.vouchers-page .remaining-text.alpha {
  right: 35.4%;
}

.vouchers-page .remaining-text.beta {
  right: 10.8%;
}

.vouchers-page .connect-btn {
  width: 13%;
  bottom: 18.5%;
  right: 24.5%;
}

.vouchers-page .connection-info {
  /* width: 10%;
    bottom: 45.4%;
    left: 2.5%; */
  color: rgb(226, 226, 226);
  font-size: 0.82vw;
  width: 10%;
  bottom: 18.5%;
  right: 24.5%;
}

.vouchers-page .connection-info.connected-acc {
  width: 10%;
  bottom: 44.25%;
  left: 1.3%;
}

.vouchers-page .connection-info.disconnect {
  width: 10%;
  bottom: 41%;
  left: 0.2%;
  font-size: 0.66vw;
  color: #000000;
}

.vouchers-page .connection-info .disconnect {
  cursor: pointer;
  text-decoration: underline;
}

.vouchers-page .alert {
  display: inline-block;
  margin: 0 auto 30px auto;
  width: auto;
}

.vouchers-page .alert a {
  color: inherit;
  text-decoration: underline !important;
}

.petstore-page .lobby-btn {
  width: 7%;
  top: 34%;
  left: 2%;
}

.petstore-page .connect-btn {
  width: 12%;
  bottom: 23%;
  left: 17%;
}

.petstore-page .adopt-btn {
  width: 12%;
  bottom: 23%;
  left: 3%;
}

.petstore-page .select-btn {
  width: 12%;
  bottom: 23%;
  left: 17%;
}

.petstore-page .deselect-btn {
  width: 12%;
  bottom: 23%;
  left: 17%;
}

.petstore-page .voucher-balance {
  font-size: 2vw;
  color: #fff;
  top: 5%;
  right: 15%;
}

.petstore-page .shelves {
  width: 45%;
  bottom: 3%;
  right: 4%;
}

.petstore-page .artwork {
  width: 8.5%;
  transition: all 0.6s;
}

.petstore-page .artwork.focused {
  width: 13% !important;
  bottom: 35% !important;
  right: 70.5% !important;
}

.petstore-page .artwork.art-1 {
  bottom: 66.3%;
  right: 37%;
}

.petstore-page .artwork.art-2 {
  bottom: 66.3%;
  right: 22.9%;
}

.petstore-page .artwork.art-3 {
  bottom: 65.8%;
  right: 9.1%;
}

.petstore-page .artwork.art-4 {
  bottom: 43.7%;
  right: 37%;
}

.petstore-page .artwork.art-5 {
  bottom: 43.7%;
  right: 22.9%;
}

.petstore-page .artwork.art-6 {
  bottom: 43.4%;
  right: 9.1%;
}

.petstore-page .artwork.art-7 {
  bottom: 22.2%;
  right: 37%;
}

.petstore-page .artwork.art-8 {
  bottom: 21.3%;
  right: 22.9%;
}

.petstore-page .artwork.art-9 {
  bottom: 21.3%;
  right: 9.1%;
}

.petstore-page .focused-artwork {
  width: 13%;
  bottom: 21.3%;
  left: 18%;
}

.petstore-page .artwork-container {
  position: relative;
  cursor: pointer;
}

.petstore-page .artwork.main-focus .artwork-container {
  cursor: default;
}

.petstore-page .artwork-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 400px;
  background-color: #000000;
  opacity: 0.45;
  transition: opacity 0.4s ease;
}

.petstore-page .artwork:hover .artwork-overlay {
  opacity: 0;
}

.petstore-page .artwork-container.focused .artwork-overlay {
  opacity: 0;
}

.petstore-page .artwork-img {
  border: 6px solid #303030;
  transition: border 0.4s ease;
  max-width: 400px;
}

.petstore-page .artwork:hover .artwork-img {
  border: 6px solid #b8ec86;
}

.petstore-page .artwork-img.focused {
  border: 6px solid #b8ec86;
}

.petstore-page .artwork:hover .artwork-img.selected {
  border: 6px solid #e500c4;
}

.petstore-page .artwork-img.focused.selected {
  border: 6px solid #e500c4;
}

.petstore-page .artwork.selected {
  animation-duration: 0.6s;
  animation-name: petstoreSelectedAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transition: filter 0.4s;
}

/* .petstore-page .artwork.selected.main-focus {
    animation-name: petstoreSelectedAnimLg;
  } */

@keyframes petstoreSelectedAnim {
  from {
    transform: scale(0.58, 0.58);
  }
  to {
    transform: scale(0.69, 0.69);
  }
}

@keyframes petstoreSelectedAnimLg {
  from {
    transform: scale(0.82, 0.82);
  }
  to {
    transform: scale(0.93, 0.93);
  }
}

.petstore-page .artwork.selected.z-1 .artwork-img.focused.selected {
  border: 6px solid #e500c4;
}
.petstore-page .artwork.selected.z-2 .artwork-img.focused.selected {
  border: 6px solid #fdb359;
}
.petstore-page .artwork.selected.z-3 .artwork-img.focused.selected {
  border: 6px solid #f0f11e;
}
.petstore-page .artwork.selected.z-4 .artwork-img.focused.selected {
  border: 6px solid #cf1515;
}
.petstore-page .artwork.selected.z-5 .artwork-img.focused.selected {
  border: 6px solid #363636;
}
.petstore-page .artwork.selected.z-6 .artwork-img.focused.selected {
  border: 6px solid #5bf5a5;
}
.petstore-page .artwork.selected.z-7 .artwork-img.focused.selected {
  border: 6px solid #5900ed;
}
.petstore-page .artwork.selected.z-8 .artwork-img.focused.selected {
  border: 6px solid #22d6dd;
}
.petstore-page .artwork.selected.z-9 .artwork-img.focused.selected {
  border: 6px solid #efefef;
}

.petstore-page .artwork.selected.z-1 {
  z-index: 131;
  left: 1%;
  top: 81%;
}

.petstore-page .artwork.selected.z-2 {
  z-index: 132;
  left: 3%;
  top: 81%;
}

.petstore-page .artwork.selected.z-3 {
  z-index: 133;
  left: 5%;
  top: 81%;
}

.petstore-page .artwork.selected.z-4 {
  z-index: 134;
  left: 7%;
  top: 81%;
}

.petstore-page .artwork.selected.z-5 {
  z-index: 135;
  left: 9%;
  top: 81%;
}

.petstore-page .artwork.selected.z-6 {
  z-index: 136;
  left: 11%;
  top: 81%;
}

.petstore-page .artwork.selected.z-7 {
  z-index: 137;
  left: 13%;
  top: 81%;
}

.petstore-page .artwork.selected.z-8 {
  z-index: 138;
  left: 15%;
  top: 81%;
}

.petstore-page .artwork.selected.z-9 {
  z-index: 139;
  left: 17%;
  top: 81%;
}

.petstore-page .artwork.main-focus {
  z-index: 140;
}

.petstore-page .connection-info {
  color: rgb(226, 226, 226);
  font-size: 15px;
  font-size: 0.82vw;
  width: 10%;
  bottom: 10%;
  right: 48.5%;
}

.petstore-page .connection-info.connected-acc {
  width: 10%;
  bottom: 44.25%;
  left: 1.3%;
}

.petstore-page .connection-info.disconnect {
  width: 10%;
  bottom: 41%;
  left: 0.2%;
  font-size: 0.66vw;
  color: #000000;
}

.petstore-page .connection-info .disconnect {
  cursor: pointer;
  text-decoration: underline;
}

.petstore-page .alert {
  display: inline-block;
  margin: 0 auto 30px auto;
  width: auto;
}

.petstore-page .alert a {
  color: inherit;
  text-decoration: underline !important;
}

.shelter-page .lobby-btn {
  width: 5.7%;
  top: 27%;
  left: 50.8%;
}

.shelter-page .rescue-btn {
  width: 15%;
  top: 86.4%;
  left: 43%;
}

.shelter-page .nft-info {
  width: 16%;
  top: 71%;
  left: 45%;
}

.shelter-page .qty-plus {
  width: 3.3%;
  top: 72.5%;
  left: 41%;
}

.shelter-page .qty-minus {
  width: 3.3%;
  top: 78%;
  left: 41%;
}

.shelter-page .qty-info-text {
  width: 16%;
  top: 73%;
  left: 44.5%;
  font-size: 2.3vw;
  font-weight: 700;
}

.shelter-page .price-info-text {
  width: 16%;
  top: 78%;
  left: 44.5%;
  font-size: 2.3vw;
  font-weight: 700;
  color: #e500c4;
}

.shelter-page .connect-btn {
  width: 12%;
  top: 74%;
  left: 46%;
}

.shelter-page .connection-info {
  color: rgb(226, 226, 226);
  font-size: 15px;
  font-size: 0.82vw;
}

.shelter-page .connection-info.connected-acc {
  width: 10%;
  bottom: 7.7%;
  left: 20%;
}

.shelter-page .connection-info.disconnect {
  width: 10%;
  bottom: 5.7%;
  left: 20%;
  font-size: 0.66vw;
  color: #bdbdbd;
}

.shelter-page .connection-info .disconnect {
  cursor: pointer;
  text-decoration: underline;
}

.tailor-page .lobby-btn {
  width: 5%;
  top: 15.66%;
  left: 89.08%;
}

.tailor-page .clothes-btn {
  width: 15.15%;
  top: 52.9%;
  left: 75.47%;
}

.tailor-page .connect-btn {
  width: 15%;
  top: 75.51%;
  left: 50.14%;
  font-size: 2.27%;
}

.tailor-page .inventory-btn {
  width: 15%;
  top: 75.51%;
  left: 50.14%;
  font-size: 2.27%;
}

.tailor-page .carrier-btn {
  width: 5.66%;
  top: 48.17%;
  left: 24.12%;
}

.tailor-page .fitting-btn {
  width: 6.22%;
  top: 30.84%;
  left: 57.16%;
}

.tailor-page .info-btn {
  width: 4.86%;
  top: 39.88%;
  left: 40.3%;
}

.tailor-page .connection-info {
  color: rgb(226, 226, 226);
  font-size: 15px;
  font-size: 10%;
}

.tailor-page .connection-info.connected-acc {
  top: 86.3%;
  left: 54.39%;
  font-size: 16.44%;
}

.tailor-page .connection-info.disconnect {
  width: fit-content;
  top: 89.77%;
  left: 54.91%;
  font-size: 10.78%;
  color: #bdbdbd;
}

.tailor-page .connection-info .disconnect {
  cursor: pointer;
  text-decoration: underline;
}

.tailor-page .inventory-modal {
  background-color: #ffffffe1;
  background-color: #0c0c0ca3;
  border: #d5399d 3px solid;
  border-radius: 8px;
  padding: 3.5%;
  padding-top: 2.5%;
  text-align: center;
  width: 65%;
  min-height: 77%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 132;
}

.tailor-page .token-selection-overlay {
  width: 100%;
  /* height: 100%; */
  z-index: 160;
}

.tailor-page .token-selection-overlay .left {
  width: 60%;
  text-align: left;
}
.tailor-page .token-selection-overlay .right {
  width: 40%;
}

.tailor-page .token-selection-title {
  font-size: 38%;
  color: #ff00ea;
  line-height: 1;
}

.tailor-page .token-selection-desc {
  font-size: 19%;
  color: #ebebeb;
  line-height: 1;
  margin-top: 1%;
}

.tailor-page .token-selection-desc.sm {
  font-size: 12%;
}

.tailor-page .tokens-no-owned-tokens {
  font-size: 22%;
  color: #d6d6d6;
  margin-top: 10%;
  margin-left: 24%;
}

.tailor-page .transfer-token-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.tailor-page .expected-cancel-btn {
  background-color: rgb(60 60 60);
  color: #fff;
  font-size: 24%;
  padding: 5% 5%;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.4s;
  width: fit-content;
  animation-duration: 1s;
  animation-name: btnFloatSubtleAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.tailor-page .expected-cancel-btn:hover {
  background-color: rgb(150, 33, 33);
}

.tailor-page .transfer-token-btn {
  font-size: 24%;
  color: #fff;
  padding: 5% 5%;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  width: fit-content;
  background-color: #ff00ea;
  animation-duration: 1s;
  animation-name: btnFloatSubtleAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* transition: filter 0.4s; */
}

.tailor-page .transfer-token-btn.no-bg {
  background-color: #ff00ea00;
}

.tailor-page .transfer-token-btn .loading {
  text-align: center;
  margin: auto;
}

.tailor-page .transfer-token-btn.disabled {
  /* font-size: 16%; */
  /* color: #ed2828; */
  cursor: default;
  background-color: #bfbfbf2b !important;
  color: #747474;
}

.tailor-page .transfer-token-btn img {
  /* width: 20%; */
  max-width: 32px;
  transform: scale(2.4);
  margin: auto;
  text-align: center;
}

.tailor-page .transfer-submitted-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  /* background-color: #000; might need this */
  transform: translateX(-4px);
}

.tailor-page .transfer-submitted-overlay .loading-container {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.tailor-page .transfer-submitted-overlay .loading-container .placing-bid-img {
  width: 65%;
}

.tailor-page
  .transfer-submitted-overlay
  .loading-container
  .placing-bid-goo-img {
  width: 30%;
}

.tailor-page .upper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* justify-content: space-between;
    align-items: flex-end; */
}

.tailor-page .token-gallery {
  border-top: 3px solid #d5399d;
  margin-top: 4%;
  border-radius: 2%;
}

.tailor-page .token-gallery-scrollable {
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  bottom: 0;
  padding: 4%;
}

.tailor-page .token-gallery-content {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
  border-radius: 2%;
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.tailor-page .token-container {
  width: 15%;
  max-width: 15%;
  min-width: 15%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  height: fit-content;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  min-height: 0;
  display: flex;
  flex: 1;
  min-height: 0px;
  border: 4px solid #ffffff00;
  border-color: #ffffff00;
  border-radius: 8px;
  transition: all 0.15s;
  opacity: 1;
}

.tailor-page .token-container.selected {
  border-color: #ff00ea;
}

.tailor-page .token-container.claimed:not(.selected) {
  border-color: #0084ff;
}

.tailor-page .token-container.redeemed {
  border-color: #f57100 !important;
}

.tailor-page .token-container.luxury.selected {
  border-color: #cb9418;
}

.tailor-page .token-container.null.selected {
  border-color: #4c4646;
}

.tailor-page .token-container:not(.selected, .claimed):hover {
  border-color: #c230b6c0;
}

.tailor-page .token-container.transferring {
  opacity: 0.2;
}

.tailor-page .token-container.ineligible {
  opacity: 0.2;
}

.tailor-page .token-container .token-img {
  /* border-radius: 8px; */
}

.tailor-page .token-container .token-carrier {
  position: absolute;
  text-align: center;
  width: fit-content;
  font-size: 18%;
  color: #fff;
  top: 60%;
  left: 42%;
  background-color: #ff00eac7;
  padding: 2% 6%;
  border-radius: 5px;
  font-weight: 500;
  transform: rotate(21deg) translate(-50%, -50%);
}

.tailor-page .token-container .token-carrier.luxury {
  background-color: #cb9418;
}

.tailor-page .token-container .token-carrier.null {
  background-color: #4c4646;
}

.tailor-page .token-container .token-carrier.claimed {
  background-color: #0084ff;
}

.tailor-page .token-container .token-carrier.redeemed {
  background-color: #f57100 !important;
}

.tailor-page .token-container .token-id {
  position: absolute;
  text-align: center;
  width: fit-content;
  font-size: 21%;
  color: #fff;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0000008a;
  padding: 2% 4%;
  border-radius: 5px;
}

.tailor-page .token-container .carrier-token-id {
  position: absolute;
  text-align: right;
  width: fit-content;
  font-size: 16%;
  color: #fff;
  top: 0%;
  right: 3%;
  background-color: #00000000;
  padding: 2% 4%;
  border-radius: 5px;
}

.tailor-page .token-container.selected .token-id {
  /* background-color: #ff66009f; */
  color: #ff00ea;
}

.tailor-page .inventory-home {
  width: 100%;
  height: 100%;
  z-index: 133;
  display: block;
}

.tailor-page .inventory-home .hr {
  width: 84%;
  height: 4px;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff00ea;
  opacity: 0.6;
}

.tailor-page .tailor-title {
  font-size: 45%;
  text-align: center;
  width: 80%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 133;
  font-weight: 700;
  color: #ff00ea;
}

.tailor-page .inventory-category-btn {
  width: 37%;
  top: 32%;
  z-index: 134;
  border-radius: 4%;
  border: 4px solid #d5399c00;
  transition: border 0.35s ease;
}

.tailor-page .inventory-category-btn:hover {
  border: 4px solid #d5399d;
}

.tailor-page .inventory-category-btn.cats {
  left: 8%;
}

.tailor-page .inventory-category-btn.carriers {
  right: 8%;
}

.tailor-page .inventory-category-btn img {
  display: block;
  border-radius: 2%;
}

.tailor-page .inventory-category-btn img.highlight {
  display: none;
}

.tailor-page .inventory-category-btn:hover img.highlight {
  display: block;
}

.tailor-page .inventory-category-btn:hover img:not(.highlight) {
  display: none;
}

.locker-page .lobby-btn {
  width: 6.92%;
  top: -5.46%;
  left: 25.76%;
}

.locker-page .connect-btn {
  width: 12%;
  top: 73.97%;
  left: 49.45%;
  font-size: 2.27%;
}

.locker-page .inventory-btn {
  width: 13.31%;
  top: -0.84%;
  left: 75.38%;
}

.locker-page .prev-life-btn {
  width: 4.71%;
  top: 41.74%;
  left: 31.12%;
}

.locker-page .next-life-btn {
  width: 4.71%;
  top: 41.54%;
  left: 78.75%;
}

.locker-page .prev-btn {
  width: 10.15%;
  top: 84.61%;
  left: 25.05%;
}

.locker-page .next-btn {
  width: 10.15%;
  top: 84.61%;
  left: 76.63%;
}

.locker-page .download-btn {
  width: 10.15%;
  top: 84.61%;
  left: 41.71%;
}

.locker-page .pay-unlock-btn {
  width: 10.15%;
  top: 94.61%;
  left: 41.71%;
}

.locker-page .primary-btn {
  width: 10.15%;
  top: 84.61%;
  left: 58.68%;
}

.locker-modal .set-life-all-btn {
  width: 20%;
  top: 1%;
  left: 75.5%;
  z-index: 161;
}

.locker-page .connection-info {
  color: rgb(218, 218, 218);
  font-size: 15px;
  font-size: 12%;
}

.locker-page .connection-info.connected-acc {
  width: fit-content;
  top: 84.02%;
  left: 53.66%;
}

.locker-page .connection-info.disconnect {
  width: 10%;
  top: 86.53%;
  left: 51.35%;
  font-size: 10%;
  color: #a5a5a5;
}

.locker-page .connection-info .disconnect {
  cursor: pointer;
  text-decoration: underline;
}

.locker-page .cat-display {
  width: 28.6%;
  top: 31.96%;
  left: 42.1%;
}

.locker-page .cat-display img {
}

.locker-life-popup {
  padding: 40px 26px;
  width: fit-content;
  height: auto;
  position: absolute;
  z-index: 145;
  min-width: 417px;
  min-height: 240px;
  max-width: 80%;
  background-color: #000000c4;
  border: 4px solid #d5399d;
  border-radius: 12px;
  font-weight: 500;
  color: #d5399d;
  font-size: 18px;
  text-align: center;
  top: 40%;
  left: 56.2%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.locker-life-popup .loading {
  position: absolute;
  width: 38%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.locker-life-popup .message {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.locker-life-popup .message.success {
  color: #1ce72d;
}

.locker-life-popup.warning {
  background-color: #f7f7b7;
}

.locker-life-popup.success {
  background-color: #19a725;
}

.locker-life-popup.error {
  background-color: #a81b1b;
}

.locker-life-popup .message-close-btn {
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 2px;
  right: 10px;
  text-align: center;
  transition: all 0.5s;
  color: #d5399d;
}
.locker-life-popup .message-close-btn:hover {
  color: #ff0015;
}

.locker-life-popup a {
  color: #2156e7;
  transition: color 0.2s;
  font-weight: 700;
  text-decoration: underline;
}

.locker-life-popup a:hover {
  color: #2198e7;
}

.locker-life-popup .set-btn {
  margin: auto;
  margin-top: 9%;
  color: #d5399d;
  border: 4px solid #d5399d;
  border-radius: 12px;
  background-color: #000;
  text-align: center;
  padding: 2%;
  transition: all 0.2s;
  cursor: pointer;
  width: fit-content;
}

.locker-life-popup .set-btn:hover {
  color: #fff;
  background-color: #d5399d;
}

.pink-checkbox {
  box-sizing: border-box;
  --background-color: #000;
  --checkbox-height: 25px;
  margin-top: 5%;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.pink-checkbox input[type="checkbox"] {
  display: none;
}

.pink-checkbox .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * 0.1) solid #d5399d;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}
.pink-checkbox .check-box::before,
.pink-checkbox .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * 0.2);
  background-color: #d5399d;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}
.pink-checkbox .check-box::before {
  top: calc(var(--checkbox-height) * 0.72);
  left: calc(var(--checkbox-height) * 0.41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * 0.05) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.pink-checkbox .check-box::after {
  top: calc(var(--checkbox-height) * 0.37);
  left: calc(var(--checkbox-height) * 0.05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.pink-checkbox input[type="checkbox"]:checked + .check-box,
.pink-checkbox .check-box.checked {
  border-color: #d5399d;
}
.pink-checkbox input[type="checkbox"]:checked + .check-box::after,
.pink-checkbox .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}
.pink-checkbox input[type="checkbox"]:checked + .check-box::before,
.pink-checkbox .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}

.pay-unlock-modal {
  background-color: #ffffffe1;
  background-color: #0c0c0ca3;
  border: #d5399d 3px solid;
  border-radius: 8px;
  padding: 3.5%;
  padding-top: 5%;
  text-align: center;
  width: 65%;
  min-height: 77%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 132;
}

.pay-unlock-modal .token-selection-overlay {
  width: 100%;
  /* height: 100%; */
  z-index: 160;
}

.pay-unlock-modal .token-selection-overlay .left {
  width: 60%;
  text-align: left;
}
.pay-unlock-modal .token-selection-overlay .right {
  width: 40%;
}

.pay-unlock-modal .token-selection-title {
  font-size: 38%;
  color: #ff00ea;
  line-height: 1;
}

.pay-unlock-modal .token-selection-desc {
  font-size: 19%;
  color: #ebebeb;
  line-height: 1;
  margin-top: 4%;
}

.pay-unlock-modal .token-selection-price {
  font-size: 27%;
  color: #ff00ea;
  line-height: 1;
  margin-top: 7%;
}

.pay-unlock-modal .token-selection-price.eth {
  font-size: 17%;
  color: #913b8a;
  line-height: 1;
  margin-top: 1%;
}

.pay-unlock-modal .p2u-disclaimer {
  font-size: 13%;
  color: #ebebeb;
  line-height: 1;
  margin-top: 1%;
  margin-right: 10px;
}

#dl-3d-btn {
  position: absolute;
  font-size: 20%;
  color: #fff;
  padding: 2% 4%;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  width: fit-content;
  background-color: #ff00ea;
  animation-duration: 1s;
  animation-name: btnFloatSubtleAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* transition: filter 0.4s; */
  top: 9%;
  z-index: 1000;
}

#dl-3d-btn.dl-mode {
  background-color: #fff0;
  color: #ff00ea;
}

#dl-3d-btn.dl-mode.enabled {
  color: #ff0050;
}

.pay-unlock-modal .pay-unlock-input {
  width: 50%;
  height: 39px;
  font-size: 20px;
  text-align: center;
  background-color: #000;
  color: #ff00ea;
  line-height: 1;
  border-radius: 8px;
  border: 2px solid;
  margin-bottom: 40px;
}

.pay-unlock-modal .input-label {
  font-size: 20%;
  color: #ff00ea;
}

.pay-unlock-modal .input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 4%;
}

.pay-unlock-modal .transfer-token-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pay-unlock-modal .p2u-accept-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4%;
}

.pay-unlock-modal .pink-checkbox {
  line-height: 1;
  display: flex;
  margin-bottom: 2%;
}

.pay-unlock-modal .pink-checkbox a {
  text-decoration: underline !important;
}

.pay-unlock-modal .pink-checkbox a:hover {
  color: #ff00ea;
}

.pay-unlock-modal .transfer-token-btn {
  font-size: 24%;
  color: #fff;
  padding: 5% 5%;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  width: fit-content;
  background-color: #ff00ea;
  animation-duration: 1s;
  animation-name: btnFloatSubtleAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin: auto;
  /* transition: filter 0.4s; */
}

.pay-unlock-modal .transfer-token-btn.no-bg {
  background-color: #ff00ea00;
}

.pay-unlock-modal .transfer-token-btn .loading {
  text-align: center;
  margin: auto;
}

.pay-unlock-modal .transfer-token-btn.disabled {
  /* font-size: 16%; */
  /* color: #ed2828; */
  cursor: default;
  background-color: #bfbfbf2b !important;
  color: #747474;
}

.pay-unlock-modal .transfer-token-btn img {
  /* width: 20%; */
  max-width: 32px;
  transform: scale(2.4);
  margin: auto;
  text-align: center;
}

.pay-unlock-modal .transfer-submitted-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  /* background-color: #000; might need this */
  transform: translateX(-4px);
}

.pay-unlock-modal .transfer-submitted-overlay .loading-container {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.pay-unlock-modal
  .transfer-submitted-overlay
  .loading-container
  .placing-bid-img {
  width: 65%;
}

.pay-unlock-modal
  .transfer-submitted-overlay
  .loading-container
  .placing-bid-goo-img {
  width: 30%;
}

.locker-modal {
  background-color: #ffffffe1;
  background-color: #0c0c0ca3;
  border: #d5399d 3px solid;
  border-radius: 8px;
  padding: 3.5%;
  padding-top: 2.5%;
  text-align: center;
  width: 65%;
  min-height: 77%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 132;
}

.locker-modal .token-selection-overlay {
  width: 100%;
  /* height: 100%; */
  z-index: 160;
}

.locker-modal .token-selection-overlay .left {
  width: 60%;
  text-align: left;
}
.locker-modal .token-selection-overlay .right {
  width: 40%;
}

.locker-modal .token-selection-title {
  font-size: 38%;
  color: #ff00ea;
  line-height: 1;
}

.locker-modal .token-selection-desc {
  font-size: 19%;
  color: #ebebeb;
  line-height: 1;
  margin-top: 1%;
}

.locker-modal .token-selection-desc.sm {
  font-size: 12%;
}

.locker-modal .tokens-no-owned-tokens {
  font-size: 22%;
  color: #d6d6d6;
  text-align: center;
  width: 100%;
  margin-top: 5%;
}

.locker-modal .transfer-token-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.locker-modal .transfer-token-btn {
  font-size: 24%;
  color: #fff;
  padding: 5% 5%;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  width: fit-content;
  background-color: #ff00ea;
  animation-duration: 1s;
  animation-name: btnFloatSubtleAnim;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* transition: filter 0.4s; */
}

.locker-modal .transfer-token-btn.no-bg {
  background-color: #ff00ea00;
}

.locker-modal .transfer-token-btn .loading {
  text-align: center;
  margin: auto;
}

.locker-modal .transfer-token-btn.disabled {
  /* font-size: 16%; */
  /* color: #ed2828; */
  cursor: default;
  background-color: #bfbfbf2b !important;
  color: #747474;
}

.locker-modal .transfer-token-btn img {
  /* width: 20%; */
  max-width: 32px;
  transform: scale(2.4);
  margin: auto;
  text-align: center;
}

.locker-modal .transfer-submitted-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  /* background-color: #000; might need this */
  transform: translateX(-4px);
}

.locker-modal .transfer-submitted-overlay .loading-container {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.locker-modal .transfer-submitted-overlay .loading-container .placing-bid-img {
  width: 65%;
}

.locker-modal
  .transfer-submitted-overlay
  .loading-container
  .placing-bid-goo-img {
  width: 30%;
}

.locker-modal .upper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* justify-content: space-between;
    align-items: flex-end; */
}

.locker-modal .token-gallery {
  border-top: 3px solid #d5399d;
  margin-top: 15%;
  border-radius: 2%;
}

.locker-modal .token-gallery-scrollable {
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  bottom: 0;
  padding: 4%;
}

.locker-modal .token-gallery-content {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
  border-radius: 2%;
  flex-grow: 1;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.locker-modal .token-container {
  width: 15%;
  max-width: 15%;
  min-width: 15%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 2%;
  height: fit-content;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  min-height: 0;
  display: flex;
  flex: 1;
  min-height: 0px;
  border: 4px solid #ffffff00;
  border-color: #ffffff00;
  border-radius: 8px;
  transition: all 0.15s;
  opacity: 1;
}

.locker-modal .token-container.selected {
  border-color: #ff00ea;
}

.locker-modal .token-container.claimed {
  border-color: #0084ff;
}

.locker-modal .token-container.luxury.selected {
  border-color: #cb9418;
}

.locker-modal .token-container.null.selected {
  border-color: #4c4646;
}

.locker-modal .token-container:not(.selected):hover {
  border-color: #e31ad2;
  transform: scale(1.05);
}

.locker-modal .token-container.transferring {
  opacity: 0.2;
}

.locker-modal .token-container.ineligible {
  opacity: 0.2;
}

.locker-modal .token-container .token-img {
  /* border-radius: 8px; */
}

.locker-modal .token-container .token-carrier {
  position: absolute;
  text-align: center;
  width: fit-content;
  font-size: 18%;
  color: #fff;
  top: 60%;
  left: 42%;
  background-color: #ff00eac7;
  padding: 2% 6%;
  border-radius: 5px;
  font-weight: 500;
  transform: rotate(21deg) translate(-50%, -50%);
}

.locker-modal .token-container .token-carrier.luxury {
  background-color: #cb9418;
}

.locker-modal .token-container .token-carrier.null {
  background-color: #4c4646;
}

.locker-modal .token-container .token-id {
  position: absolute;
  text-align: center;
  width: fit-content;
  font-size: 21%;
  color: #fff;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0000008a;
  padding: 2% 4%;
  border-radius: 5px;
}

.locker-modal .token-container.selected .token-id {
  /* background-color: #ff66009f; */
  color: #ff00ea;
}

.locker-modal .hr {
  width: 84%;
  height: 4px;
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff00ea;
  opacity: 0.6;
}

.locker-modal .tailor-title {
  font-size: 45%;
  text-align: center;
  width: 80%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 133;
  font-weight: 700;
  color: #ff00ea;
}

/* NEW STUFF */
.inventory-modal-close-btn {
  font-size: 24%;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 1%;
  right: 2%;
  text-align: center;
  transition: all 0.5s;
  color: #ff6a5f;
}

.inventory-modal-close-btn:hover {
  color: #d82939;
}

.inventory-modal-back-btn {
  font-size: 24%;
  font-weight: 700;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 0.4%;
  left: 1.3%;
  text-align: center;
  transition: all 0.5s;
  color: #ff6a5f;
}

.inventory-modal-back-btn:hover {
  color: #d82939;
}

@media only screen and (max-width: 1311px) {
}

@media only screen and (min-width: 1810px) {
}

.pr-0 {
  padding-right: 0 !important;
}

.mailing-row {
  max-width: 217px;
  text-align: left;
}

.mailing-btn {
  padding-left: 8px;
  padding-right: 8px;
  cursor: pointer;
  color: #bdbdbd;
  border: 1px solid #e500c4;
  width: fit-content;
  height: 20px;
  max-height: 20px;
  border-radius: 6px;
  transition: color 0.6s;
}

.mailing-btn:hover {
  color: #e500c4;
}

.mailing-title {
  margin-top: 7px;
  margin-bottom: 3px;
  font-size: 12px;
}

.mailing-message {
  margin-top: 2px;
  font-size: 12px;
  color: #bdbdbd;
}

.mailing-message.red {
  color: rgb(192, 13, 13);
}

.mailing-message.green {
  color: #e500c4;
}

.mailing-input {
  border-radius: 6px;
  height: 20px;
  max-height: 20px;
  width: 100%;
}

.nll-footer {
  /* border-top: 2px solid #a1a1a1 9e; */
  position: relative;
  z-index: 10;
  left: 0;
  bottom: 0;
  min-height: 80px;
  width: 100%;
  overflow-y: hidden;
  margin: auto;
  text-align: center;
}
.nll-footer .footer-bottom {
  padding-bottom: 16px;
  padding-left: 14px;
  padding-right: 14px;
  position: relative;
}
.nll-footer .footer-bottom .flex-row {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 991px) {
  .nll-footer .footer-bottom .flex-row {
    display: block;
    text-align: center;
  }

  .mailing-row {
    margin: auto;
  }

  .mailing-title {
    text-align: left;
    max-width: 217px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    transform: translateX(14px);
  }

  .mailing-message {
    text-align: left;
    max-width: 217px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    transform: translateX(14px);
  }
}
.nll-footer .footer-bottom .footer-rights {
  color: #bdbdbd;
  text-align: right;
  width: 200px;
}

.nll-footer .footer-bottom .footer-rights.left {
  text-align: left;
}
.nll-footer .footer-bottom .footer-rights {
  font-size: 12px;
  margin-top: 13px;
}
.nll-footer .footer-bottom .footer-rights a {
  display: inline-block;
  color: #e500c4;
  text-decoration: none;
  transition: color 0.4s;
}
.nll-footer .footer-bottom .footer-rights a:hover {
  color: #fff;
}

.nll-footer .footer-bottom .footer-rights a.inverted {
  color: #bdbdbd;
}
.nll-footer .footer-bottom .footer-rights a.inverted:hover {
  color: #e500c4;
}
.nll-footer .footer-bottom .footer-rights a.inverted.text-underline:hover {
  text-decoration: underline !important;
}
@media only screen and (max-width: 991px) {
  .nll-footer .footer-bottom .footer-rights {
    width: 100%;
    text-align: center;
  }
  .nll-footer .footer-bottom .footer-rights.left {
    width: 100%;
    text-align: center;
  }
  .nll-footer .footer-bottom .footer-rights.dummy {
    display: none;
  }
}
.nll-footer .footer-bottom .footer-logo {
  text-align: center;
  display: block;
}
.nll-footer .footer-bottom .footer-logo img {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 75%;
  max-width: 180px;
  min-width: 60px;
}
@media only screen and (max-width: 767px) {
  .nll-footer .footer-bottom .footer-logo img {
  }
}
.nll-footer .footer-bottom .footer-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nll-footer .footer-bottom .footer-list ul li {
  display: block;
}
.nll-footer .footer-bottom .footer-list ul li:not(:last-child) {
  margin-right: 6px;
}
.nll-footer .footer-bottom .footer-list ul li a {
  display: block;
  transition: all 0.2s ease-in;
}
.nll-footer .footer-bottom .footer-list ul li a:hover {
  opacity: 0.7;
}

.text-underline {
  text-decoration: underline !important;
}

.faq-top-logo {
  margin: auto;
  text-align: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 40px;
}

.faq-top-logo img {
  width: 170px;
  max-width: 170px;
}

.faq-page .single-faq {
  background-color: #f4c0efcc;
  background-color: #c90bb7cc;
}

.faq-page .main-btn {
  display: inline-block;
  position: relative;
  margin: auto;
  margin-bottom: 40px;
  text-align: center;
  border-radius: 8px;
  /* background-color: #ad89d6; */
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  transition: color 0.4s;
  width: fit-content;
  padding: 12px;
  z-index: 200;
}

.faq-page .main-btn:hover {
  /* background-color: #D5399D; */
  color: #d5399d;
}

/* mobile */
.redesign-wrapper .mob {
  display: none;
}

@media (max-width: 900px) {
  .redesign-wrapper .mob {
    display: block;
  }

  .bg-overlay img:not(.mob) {
    display: none;
  }

  .bg-backdrop .floating.overlay {
    width: 18%;
    top: -5.5%;
  }

  .bg-backdrop .floating.sign-overlay {
    width: 100%;
    top: 15%;
  }

  .bg-backdrop .floating.sign-overlay .petstore-closed-voucher {
    width: 6.4%;
    bottom: 22.7%;
    left: 46.4%;
  }

  .bg-backdrop .floating.sign-overlay.blueprint {
    width: 100%;
  }

  .bg-backdrop .floating.sign-overlay.tailor-info {
    width: 100%;
  }

  .bg-backdrop .floating.sign-overlay.tailor-info img {
    border-radius: 0;
  }

  .bg-backdrop .floating.sign-overlay.tailor-clothes {
    width: 90%;
  }

  .prelanding-page .mastercats-logo {
    width: 90%;
    top: 6.5%;
  }

  .prelanding-page .gif {
    width: 24%;
    transform: translateX(7.2%);
  }

  .prelanding-page .gif.gif-1 {
    top: 26%;
    left: 10%;
  }

  .prelanding-page .gif.gif-2 {
    top: 26%;
    left: 36.5%;
  }

  .prelanding-page .gif.gif-3 {
    top: 26%;
    left: 63%;
  }

  .prelanding-page .gif.gif-4 {
    top: 41.8%;
    left: 10%;
  }

  .prelanding-page .gif.gif-5 {
    top: 41.8%;
    left: 36.5%;
  }

  .prelanding-page .gif.gif-6 {
    top: 41.8%;
    left: 63%;
  }

  .prelanding-page .start-btn {
    width: 26%;
    top: 67.19%;
    left: 37.45%;
  }

  .prelanding-page .sub-msg {
    width: 100%;
    top: 81.57%;
    left: 50.71%;
    font-size: 43.64%;
  }

  .landing-page .enter-btn {
    width: 30%;
    top: 41.91%;
    left: 35.53%;
  }

  .lobby-page .left-info {
    width: 52%;
    top: 31%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .lobby-page .left-info.alt {
    opacity: 0;
    transition: opacity 0.8s;
  }

  .lobby-page .left-info.alt:hover {
    opacity: 1;
  }

  .lobby-page .right-info {
    width: 52%;
    top: 52.5%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .lobby-page .merch-btn {
    width: 9%;
    top: 10%;
    left: 76.39%;
  }

  .lobby-page .nll-portal-btn {
    width: 9%;
    top: 10%;
    left: 16%;
  }

  .lobby-page .music-btn {
    width: 10%;
    top: 16.3%;
    left: 17.28%;
  }

  .lobby-page .twitter-icon {
    width: 4.11%;
    top: 42.07%;
    left: 49.76%;
  }

  .lobby-page .music-notes {
    width: 11%;
    top: 16.03%;
    left: 10.52%;
  }

  .lobby-page .opensea-btn {
    width: 5.8%;
    top: 15.8%;
    left: 59.79%;
  }

  .lobby-page .twitter-btn {
    width: 6%;
    top: 15.77%;
    left: 67.35%;
  }

  .lobby-page .discord-btn {
    width: 6%;
    top: 15.75%;
    left: 74.66%;
  }

  .lobby-page .medium-btn {
    width: 6%;
    top: 15.69%;
    left: 81.89%;
  }

  .lobby-page .blueprint-btn {
    width: 9%;
    top: 15.84%;
    left: 46.79%;
  }

  .lobby-page .petstore-btn {
    width: 29%;
    bottom: 20%;
    left: 35.2%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .lobby-page .vouchers-btn {
    width: 29%;
    bottom: 12%;
    right: auto;
    left: 35.2%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .lobby-page .shelter-btn {
    width: 29%;
    bottom: 4%;
    right: auto;
    left: 35.2%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .vouchers-page .lobby-btn {
    width: 12%;
    top: 8%;
    left: 7.5%;
  }

  .vouchers-page .vouchers-vid {
    width: 14%;
    bottom: 5.7%;
    right: 16%;
    border: #e500c4 8px solid;
  }

  .vouchers-page .vouchers-vid.alpha {
    width: 36%;
    bottom: 62%;
    right: 57%;
    /* transform: rotateZ(358deg); */
    border-radius: 8px;
  }

  .vouchers-page .vouchers-vid.beta {
    width: 36%;
    bottom: 62%;
    right: 7%;
    /* transform: rotateZ(359deg); */
    border-radius: 8px;
  }

  .vouchers-page .alpha-info {
    width: 34%;
    bottom: 49.5%;
    right: 56.5%;
  }

  .vouchers-page .beta-info {
    width: 35%;
    bottom: 50.7%;
    right: 6%;
  }

  .vouchers-page .alpha-mint {
    width: 30%;
    bottom: 37%;
    right: 60%;
  }

  .vouchers-page .beta-mint {
    width: 30%;
    bottom: 37%;
    right: 9.5%;
  }

  .vouchers-page .alpha-qty-minus {
    width: 8%;
    bottom: 44.3%;
    right: 82%;
  }

  .vouchers-page .alpha-qty-info {
    width: 8%;
    bottom: 44.3%;
    right: 71%;
  }

  .vouchers-page .alpha-qty-info-text {
    width: 8%;
    bottom: 44.3%;
    right: 71%;
    font-size: 4.4vw;
  }

  .vouchers-page .alpha-qty-plus {
    width: 8%;
    bottom: 44.3%;
    right: 60%;
  }

  .vouchers-page .beta-qty-minus {
    width: 8%;
    bottom: 44.3%;
    right: 31.5%;
  }

  .vouchers-page .beta-qty-info {
    width: 8%;
    bottom: 44.3%;
    right: 20.5%;
  }

  .vouchers-page .beta-qty-info-text {
    width: 8%;
    bottom: 44.3%;
    right: 20.5%;
    font-size: 4.4vw;
  }

  .vouchers-page .beta-qty-plus {
    width: 8%;
    bottom: 44.3%;
    right: 9.5%;
  }

  .vouchers-page .remaining-text {
    font-size: 4vw;
    bottom: 32.2%;
  }

  .vouchers-page .remaining-text.alpha {
    right: 61.9%;
  }

  .vouchers-page .remaining-text.beta {
    right: 10.6%;
  }

  .vouchers-page .connect-btn {
    width: 37%;
    bottom: 34%;
    right: 31%;
  }

  .vouchers-page .connection-info {
    /* width: 10%;
        bottom: 45.4%;
        left: 2.5%; */
    color: rgb(226, 226, 226);
    font-size: 3.2vw;
    width: 10%;
    bottom: 18.5%;
    right: 24.5%;
  }

  .vouchers-page .connection-info.connected-acc {
    width: 40%;
    bottom: 30%;
    left: 29.5%;
  }

  .vouchers-page .connection-info.disconnect {
    width: 40%;
    bottom: 26.3%;
    left: 29.6%;
    font-size: 2.6vw;
    font-weight: 400;
    color: #000000;
  }

  .vouchers-page .connection-info .disconnect {
    cursor: pointer;
    text-decoration: underline;
  }

  .vouchers-page .alert {
    display: inline-block;
    margin: 0 auto 30px auto;
    width: auto;
  }

  .vouchers-page .alert a {
    color: inherit;
    text-decoration: underline !important;
  }

  /* pet store page*/
  .petstore-page .lobby-btn {
    width: 16%;
    top: 5%;
    left: 3.5%;
  }

  .petstore-page .adopt-btn {
    width: 18%;
    bottom: 9.5%;
    left: 3%;
  }

  .petstore-page .select-btn {
    width: 18%;
    bottom: 9.5%;
    left: 23%;
  }

  .petstore-page .deselect-btn {
    width: 18%;
    bottom: 9.5%;
    left: 23%;
  }

  .petstore-page .voucher-balance {
    font-size: 3vw;
    color: #fff;
    top: 55%;
    right: 57.9%;
  }

  .petstore-page .shelves .img-fluid:not(.mob) {
    display: none;
  }

  .petstore-page .shelves {
    width: 26.8%;
    bottom: 1.6%;
    right: 9.8%;
  }

  .petstore-page .artwork {
    width: 12.5%;
  }

  .petstore-page .artwork.focused {
    width: 18% !important;
    bottom: 15.79% !important;
    right: 60% !important;
  }

  .petstore-page .artwork.art-1 {
    bottom: 85.8%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-2 {
    bottom: 76%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-3 {
    bottom: 66.7%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-4 {
    bottom: 56.99%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-5 {
    bottom: 46.85%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-6 {
    bottom: 37.3%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-7 {
    bottom: 27.5%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-8 {
    bottom: 17.92%;
    right: 18.8%;
  }

  .petstore-page .artwork.art-9 {
    bottom: 8.25%;
    right: 18.8%;
  }

  .petstore-page .focused-artwork {
    width: 13%;
    bottom: 21.3%;
    left: 18%;
  }

  .petstore-page .artwork.selected.z-1 {
    z-index: 131;
    left: 1%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-2 {
    z-index: 132;
    left: 4%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-3 {
    z-index: 133;
    left: 7%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-4 {
    z-index: 134;
    left: 10%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-5 {
    z-index: 135;
    left: 13%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-6 {
    z-index: 136;
    left: 17%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-7 {
    z-index: 137;
    left: 20%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-8 {
    z-index: 138;
    left: 23%;
    top: 91.3%;
  }

  .petstore-page .artwork.selected.z-9 {
    z-index: 139;
    left: 27%;
    top: 91.3%;
  }

  .petstore-page .connect-btn {
    width: 37%;
    bottom: 34%;
    left: 7%;
  }

  .petstore-page .connection-info {
    /* width: 10%;
        bottom: 45.4%;
        left: 2.5%; */
    color: rgb(226, 226, 226);
    font-size: 3.2vw;
    width: 10%;
    bottom: 18.5%;
    right: 24.5%;
  }

  .petstore-page .connection-info.connected-acc {
    width: 40%;
    bottom: 37.4%;
    left: 4.99%;
  }

  .petstore-page .connection-info.disconnect {
    width: 40%;
    bottom: 35.3%;
    left: 5%;
    font-size: 2.6vw;
    font-weight: 400;
    color: #000000;
  }

  .shelter-page .lobby-btn {
    width: 11%;
    top: 25.5%;
    left: 46%;
  }

  .shelter-page .rescue-btn {
    width: 38%;
    top: 76%;
    left: 31%;
  }

  .shelter-page .nft-info {
    width: 40%;
    top: 61%;
    left: 33%;
  }

  .shelter-page .qty-plus {
    width: 14%;
    top: 62%;
    left: 20%;
  }

  .shelter-page .qty-minus {
    width: 14%;
    top: 67%;
    left: 20%;
  }

  .shelter-page .qty-info-text {
    width: 32%;
    top: 62.7%;
    left: 36%;
    font-size: 5.9vw;
    font-weight: 700;
  }

  .shelter-page .price-info-text {
    width: 32%;
    top: 67.1%;
    left: 36%;
    font-size: 5.3vw;
    font-weight: 700;
    color: #e500c4;
  }

  .shelter-page .connect-btn {
    width: 40%;
    top: 74%;
    left: 30.2%;
  }

  .shelter-page .connection-info {
    color: rgb(226, 226, 226);
    font-size: 15px;
    font-size: 3vw;
  }

  .shelter-page .connection-info.connected-acc {
    width: 57%;
    bottom: 7.7%;
    left: 20%;
  }

  .shelter-page .connection-info.disconnect {
    width: 20%;
    bottom: 5.7%;
    left: 38.4%;
    font-size: 2.2vw;
    color: #bdbdbd;
  }

  .shelter-page .connection-info .disconnect {
    cursor: pointer;
    text-decoration: underline;
  }

  .tailor-page .lobby-btn {
    width: 5%;
    top: 15.66%;
    left: 89.08%;
  }

  .tailor-page .clothes-btn {
    width: 30.1%;
    top: 68.96%;
    left: 66.55%;
  }

  .tailor-page .connect-btn {
    width: 38%;
    top: 45.88%;
    left: 52.62%;
  }

  .tailor-page .inventory-btn {
    width: 38%;
    top: 45.88%;
    left: 52.62%;
  }

  .tailor-page .carrier-btn {
    width: 10.4%;
    top: 31.82%;
    left: 74.46%;
  }

  .tailor-page .fitting-btn {
    width: 20.65%;
    top: 85.94%;
    left: 11.79%;
  }

  .tailor-page .fitting-btn .img-fluid:not(.mob) {
    display: none;
  }

  .tailor-page .info-btn {
    width: 8.24%;
    top: 28.15%;
    left: 54.78%;
  }

  .tailor-page .connection-info {
    font-size: 15px;
    font-size: 10%;
  }

  .tailor-page .connection-info.connected-acc {
    width: fit-content;
    top: 55.74%;
    left: 60.38%;
    font-size: 56.05%;
  }

  .tailor-page .connection-info.disconnect {
    width: fit-content;
    top: 60.13%;
    left: 62.23%;
    font-size: 40.51%;
  }

  .tailor-page .connection-info .disconnect {
    cursor: pointer;
    text-decoration: underline;
  }

  .fg-overlay-semi img {
    display: none;
  }

  .tailor-page .inventory-modal {
    background-color: #0c0c0cf0;
    border: #d5399d 3px solid;
    border-radius: 0;
    width: 100%;
    height: 100%;
  }

  .inventory-modal-close-btn {
    font-size: 76%;
  }

  .inventory-modal-back-btn {
    font-size: 76%;
    top: 0.4%;
    left: 1.3%;
  }

  .tailor-page .token-selection-overlay {
    width: 100%;
    padding-top: 10%;
  }

  .tailor-page .token-selection-overlay .left {
    width: 100%;
    text-align: left;
  }
  .tailor-page .token-selection-overlay .right {
    width: 100%;
    padding-top: 7%;
  }

  .tailor-page .token-selection-title {
    font-size: 100%;
  }

  .tailor-page .token-selection-desc {
    font-size: 45%;
  }

  .tailor-page .token-selection-desc.sm {
    font-size: 40%;
  }

  .tailor-page .tokens-no-owned-tokens {
    font-size: 22%;
    color: #d6d6d6;
    margin-top: 10%;
    margin-left: 24%;
  }

  .tailor-page .transfer-token-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .tailor-page .expected-cancel-btn {
    background-color: rgb(60 60 60);
    color: #fff;
    font-size: 50%;
    padding: 5% 5%;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.4s;
    width: fit-content;
    animation-duration: 1s;
    animation-name: btnFloatSubtleAnim;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  .tailor-page .expected-cancel-btn:hover {
    background-color: rgb(150, 33, 33);
  }

  .tailor-page .transfer-token-btn {
    font-size: 50%;
  }

  .tailor-page .transfer-token-btn.no-bg {
    background-color: #ff00ea00;
  }

  .tailor-page .transfer-token-btn .loading {
    text-align: center;
    margin: auto;
  }

  .tailor-page .transfer-token-btn.disabled {
    /* font-size: 16%; */
    /* color: #ed2828; */
    cursor: default;
    background-color: #bfbfbf2b !important;
    color: #747474;
  }

  .tailor-page .transfer-token-btn img {
    /* width: 20%; */
    max-width: 32px;
    transform: scale(2.4);
    margin: auto;
    text-align: center;
  }

  .tailor-page .transfer-submitted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    /* background-color: #000; might need this */
    transform: translateX(-4px);
  }

  .tailor-page .transfer-submitted-overlay .loading-container {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .tailor-page .transfer-submitted-overlay .loading-container .placing-bid-img {
    width: 65%;
  }

  .tailor-page
    .transfer-submitted-overlay
    .loading-container
    .placing-bid-goo-img {
    width: 30%;
  }

  .tailor-page .upper {
    flex-direction: column;
    /* justify-content: space-between;
        align-items: flex-end; */
  }

  .tailor-page .token-gallery {
    border-top: 3px solid #d5399d;
    margin-top: 4%;
    border-radius: 2%;
  }

  .tailor-page .token-gallery-scrollable {
    /* right: 0;
        top: 24%;
        bottom: 0;
        padding: 4%; */
    top: 38%;
  }

  .tailor-page .token-gallery-content {
    /* padding-top: 20%; */
  }

  .tailor-page .token-container {
    width: 27%;
    max-width: 27%;
    min-width: 27%;
  }

  .tailor-page .token-container .token-img {
    /* border-radius: 8px; */
  }

  .tailor-page .token-container .token-carrier {
    font-size: 45%;
    top: 60%;
    left: 42%;
  }

  .tailor-page .token-container .token-id {
    font-size: 50%;
  }

  .tailor-page .token-container.selected .token-id {
    /* background-color: #ff66009f; */
    color: #ff00ea;
  }

  .tailor-page .token-container .carrier-token-id {
    font-size: 47%;
  }

  .tailor-page .inventory-home {
    width: 100%;
    height: 100%;
    z-index: 133;
    display: block;
  }

  .tailor-page .inventory-home .hr {
    width: 84%;
    height: 4px;
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff00ea;
    opacity: 0.6;
  }

  .tailor-page .tailor-title {
    font-size: 94%;
  }

  .tailor-page .inventory-category-btn {
    width: 52%;
    border: 4px solid #d5399d;
  }

  .tailor-page .inventory-category-btn.cats {
    left: 24%;
    top: 30%;
  }

  .tailor-page .inventory-category-btn.carriers {
    right: 23.6%;
    top: 65%;
  }

  .tailor-page .inventory-category-btn img {
    display: block;
    border-radius: 2%;
  }

  .tailor-page .inventory-category-btn img.highlight {
    display: none;
  }

  .tailor-page .inventory-category-btn:hover img.highlight {
    display: block;
  }

  .tailor-page .inventory-category-btn:hover img:not(.highlight) {
    display: none;
  }
  .fg-overlay-semi {
    box-shadow: none;
    border: none;
  }

  .locker-modal {
    background-color: #0c0c0cf0;
    border: #d5399d 3px solid;
    border-radius: 0;
    width: 100%;
    height: 100%;
  }

  .locker-modal .token-selection-overlay {
    width: 100%;
    /* height: 100%; */
    z-index: 160;
  }

  .locker-modal .token-selection-overlay .left {
    width: 60%;
    text-align: left;
  }
  .locker-modal .token-selection-overlay .right {
    width: 40%;
  }

  .locker-modal .token-selection-title {
    font-size: 38%;
    color: #ff00ea;
    line-height: 1;
  }

  .locker-modal .token-selection-desc {
    font-size: 19%;
    color: #ebebeb;
    line-height: 1;
    margin-top: 1%;
  }

  .locker-modal .token-selection-desc.sm {
    font-size: 12%;
  }

  .locker-modal .tokens-no-owned-tokens {
    font-size: 22%;
    color: #d6d6d6;
    margin-top: 10%;
    margin-left: 24%;
  }

  .locker-modal .transfer-token-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .locker-modal .transfer-token-btn {
    font-size: 24%;
    color: #fff;
    padding: 5% 5%;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
    width: fit-content;
    background-color: #ff00ea;
    animation-duration: 1s;
    animation-name: btnFloatSubtleAnim;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* transition: filter 0.4s; */
  }

  .locker-modal .transfer-token-btn.no-bg {
    background-color: #ff00ea00;
  }

  .locker-modal .transfer-token-btn .loading {
    text-align: center;
    margin: auto;
  }

  .locker-modal .transfer-token-btn.disabled {
    /* font-size: 16%; */
    /* color: #ed2828; */
    cursor: default;
    background-color: #bfbfbf2b !important;
    color: #747474;
  }

  .locker-modal .transfer-token-btn img {
    /* width: 20%; */
    max-width: 32px;
    transform: scale(2.4);
    margin: auto;
    text-align: center;
  }

  .locker-modal .transfer-submitted-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    /* background-color: #000; might need this */
    transform: translateX(-4px);
  }

  .locker-modal .transfer-submitted-overlay .loading-container {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .locker-modal
    .transfer-submitted-overlay
    .loading-container
    .placing-bid-img {
    width: 65%;
  }

  .locker-modal
    .transfer-submitted-overlay
    .loading-container
    .placing-bid-goo-img {
    width: 30%;
  }

  .locker-modal .upper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    /* justify-content: space-between;
        align-items: flex-end; */
  }

  .locker-modal .token-gallery {
    border-top: 3px solid #d5399d;
    margin-top: 31%;
    border-radius: 2%;
  }

  .locker-modal .token-gallery-scrollable {
    top: 24%;
  }

  .locker-modal .token-gallery-content {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    border-radius: 2%;
    flex-grow: 1;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .locker-modal .token-container {
    width: 27%;
    max-width: 27%;
    min-width: 27%;
  }

  .locker-modal .token-container .token-img {
    /* border-radius: 8px; */
  }

  .locker-modal .token-container .token-carrier {
    position: absolute;
    text-align: center;
    width: fit-content;
    font-size: 18%;
    color: #fff;
    top: 60%;
    left: 42%;
    background-color: #ff00eac7;
    padding: 2% 6%;
    border-radius: 5px;
    font-weight: 500;
    transform: rotate(21deg) translate(-50%, -50%);
  }

  .locker-modal .token-container .token-id {
    font-size: 50%;
  }

  .locker-modal .token-container.selected .token-id {
    /* background-color: #ff66009f; */
    color: #ff00ea;
  }

  .locker-modal .hr {
    width: 84%;
    height: 4px;
    position: absolute;
    top: 24%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff00ea;
    opacity: 0.6;
  }

  .locker-modal .tailor-title {
    font-size: 90%;
  }

  .locker-page .connection-info {
    /* width: 10%;
        bottom: 45.4%;
        left: 2.5%; */
    color: rgb(226, 226, 226);
    font-size: 3.2vw;
    width: 10%;
    bottom: 18.5%;
    right: 24.5%;
  }

  .locker-page .connection-info.connected-acc {
    width: 40%;
    bottom: 37.4%;
    left: 4.99%;
  }

  .locker-page .connection-info.disconnect {
    width: 40%;
    bottom: 35.3%;
    left: 5%;
    font-size: 2.6vw;
    font-weight: 400;
    color: #000000;
  }

  .locker-page .lobby-btn {
    width: 11.96%;
    top: -0.9%;
    left: 4.14%;
  }

  .locker-page .connect-btn {
    width: 50%;
    top: 49.87%;
    left: 24.07%;
    font-size: 2.27%;
  }

  .locker-page .inventory-btn {
    width: 21.59%;
    top: 25.45%;
    left: 75.38%;
  }

  .locker-page .prev-life-btn {
    width: 6.33%;
    top: 18.57%;
    left: 14.35%;
  }

  .locker-page .next-life-btn {
    width: 6.33%;
    top: 18.57%;
    left: 81.58%;
  }

  .locker-page .prev-btn {
    width: 27.52%;
    top: 44.99%;
    left: 16.76%;
  }

  .locker-page .next-btn {
    width: 27.52%;
    top: 44.99%;
    left: 56.22%;
  }

  .locker-page .download-btn {
    width: 27.52%;
    top: 52.2%;
    left: 16.76%;
  }

  .locker-page .pay-unlock-btn {
    width: 27.52%;
    top: 66.2%;
    left: 16.76%;
  }

  .locker-page .primary-btn {
    width: 27.52%;
    top: 52.2%;
    left: 56.22%;
  }

  .locker-modal .set-life-all-btn {
    width: 20%;
    top: 1%;
    left: 75.5%;
    z-index: 161;
  }

  .locker-page .cat-display {
    width: 42.13%;
    top: 15.27%;
    left: 28.77%;
  }
}

@media (max-width: 760px) {
  .bg-backdrop .floating.overlay {
    width: 18%;
    top: -6.5%;
  }
}

.mcats-dev-controls {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: #fff 2px dashed;
  top: 0;
  left: 0;
  z-index: 200;
}

.mcats-dev-controls .resizer {
  width: 12px;
  height: 12px;
  background-color: rgb(224, 221, 18);
  position: absolute;
  cursor: ew-resize;
  border-radius: 50%;
}

.mcats-dev-controls .resizer:hover {
  background-color: rgb(255, 251, 0);
}

.mcats-dev-controls.font-mode .resizer {
  background-color: rgb(36, 206, 65);
}

.mcats-dev-controls.font-mode .resizer:hover {
  background-color: rgb(51, 255, 0);
}

.mcats-dev-controls .resizer.tl {
  top: -6px;
  left: -6px;
}

.mcats-dev-controls .resizer.bl {
  bottom: -6px;
  left: -6px;
}

.mcats-dev-controls .resizer.tr {
  top: -6px;
  right: -6px;
}

.mcats-dev-controls .resizer.br {
  bottom: -6px;
  right: -6px;
}

.mcats-dev-muted {
  cursor: default !important;
}

.mcats-dev-hover {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box; /* Opera/IE 8+ */
  outline: rgba(255, 255, 255, 0.527) 2px dashed;
}

.mcats-dev-info {
  background-color: #7c7c7c00;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  margin: auto;
  min-width: 400px;
  width: fit-content;
  border-radius: 20px;
}

.mcats-dev-info textarea {
  background-color: #686868;
  color: #fff;
}

.mcats-dev-info textarea.mcats-dev-info-new {
  background-color: #686868;
  color: rgb(28, 228, 21);
}

.mcats-dev-info-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: left;
}

.mcats-dev-info-class {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.3px;
  color: #ff9ee6;
}

.mcats-dev-info-new span.changed {
  color: #1db925;
}

.mcats-dev-toggle {
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  margin: auto;
  color: #fcff23;
  transition: color 0.2s;
}

.mcats-dev-toggle:hover {
  color: #d89c19;
}

.copy-btn {
  cursor: pointer;
  color: #9e9e9e;
  transition: color 0.2s;
}

.copy-btn:hover {
  color: #d89c19;
}

.fg-overlay {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 131;
  border-radius: 20px;
  border: 2px solid #d6d6d6;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 4px #d6d6d6;
}

.fg-overlay .img-fluid {
  border-radius: 20px;
}

.fg-overlay-semi {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 131;
  border-radius: 20px;
  border: 2px solid #d6d6d6;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 4px #d6d6d6;
}

.fg-overlay-semi .img-fluid {
  border-radius: 20px;
}