html {
	box-sizing: border-box;
  background-color: #231F20;
}

* {
	box-sizing: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

*:before, *:after {
	box-sizing: inherit;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html, body {
  -webkit-text-size-adjust: 100%;
}

html, body, * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#unity-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

button, input, textarea {
  outline: none!important;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: auto;
}

body {
	margin: 0;
	user-select: none;
	font-size: 14px;
	background: #ccc;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	background-color: #33142d;
}

.no-scroll {
  overflow-x: hidden;
  overflow-y: hidden;
}

.create-npc-header {
  width: 100%;
  position: absolute;
  z-index: 999999;
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

.create-npc-header > button {
  width: auto;
  padding: 16px;
}

#create-your-girl-button {
  display: none;
  position: absolute;
}

#talk-with-your-girl-button {
  display: none;
  position: absolute;
}

#talk-with-your-girl-button > span {
  margin-left: 8px;
}

#npc-created-name {
  margin-left: 4px;
}

.customize-npc-container {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  max-width: 1920px;
}

.npc-creation-container {
  display: none;
  justify-content: center;
  color: #fff;
  height: 100%;
}

.npc-creation-container > div {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.npc-creation-container > div > div {
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
   mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%);

  padding: 16px;
}

.npc-creation-container > div > div:first-of-type {
   mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%);
}

.npc-creation-container > div > div:last-of-type {
   mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image:
    linear-gradient(to top, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to left, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 10) 90%, rgba(0, 0, 0, 0) 100%);
    opacity: .5;
    transition: all .5s cubic-bezier(.25,.8,.25,1);
}

.npc-creation-container > div > div:last-of-type:hover {
  opacity: 1;
}

.npc-creation-level-required {
  display: none;
  position: absolute;
  z-index: 99999;
  text-align: center;
  margin: 0;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  backdrop-filter: blur(1rem);
  top: 50%;
  margin-top: -24px;
  color: #fff;
  flex-direction: column;
  padding: 12px;
  max-width: 340px;
}

.npc-creation-level-required > div {
  padding: 0;
  margin: 0;
}

.npc-creation-level-required > div:first-of-type {
  font-weight: bold;
}

.npc-creation-items {
	display: flex;
  overflow-x: scroll;
}

.npc-creation-items-scroll-container {
  overflow: hidden;
	position: relative;
}

.npc-creation-scroll {
  display: block;
  transition: all 1.2s cubic-bezier(.25,.8,.25,1);
  position: absolute;
  content: '';
  width: 33.3%;
  width: var(--npc-creation-steps-width, 0%);
  height: 100%;
  background: rgb(255, 64, 254);
  position: absolute;
  content: '';
  width: 30px;
  right: 0;
  z-index: 9;
  bottom: 16px;
  background: rgb(6,26,41);
  background: linear-gradient(90deg, rgba(6,26,41,0) 0%, rgba(6,26,41,0.7567620798319328) 52%, rgba(6,26,41,1) 100%);
  height: 100%;
  margin: 0;
  padding: 0;
  bottom: 0;
}

.npc-creation-title {
  text-align: center;
  margin-bottom: 16px;
  margin-top: 0;
}

.npc-creation-section-name {
  font-weight: bold;
  margin-top: 8px;
}

.npc-creation-items > div {
  position: relative;
	color: #FFF;
	cursor: pointer;
  padding: 4px 16px;
	margin-right: 8px;
	border-radius: 4px;
	flex-shrink: 0;
	justify-content: center;
}

.custom-option {
  background: #28283B;
  border: solid 2px #28283B;
  transition: all .3s cubic-bezier(.25,.8,.25,1);
}

.custom-option-selected {
  border: solid 2px #952f6b;
  background: #952f6b;
}

.custom-npc-errors {
  color: #ed0c48;
  margin: 8px 0;
  font-size: 14px;
  font-weight: bold;
  padding-left: 16px;
}

.custom-option > .locked-custom-option {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 0;
  backdrop-filter: blur(2px);
  border-radius: 17px;
}

.custom-option > .custom-option-coming-soon {
  transition: all .8s cubic-bezier(.25,.8,.25,1);
  align-items: center;
  opacity: 0;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 0;
  background: #28283B;
  font-size: 8px;
  border-radius: 17px;
}

.custom-option > .custom-option-coming-soon:hover {
  opacity: 1;
}

.npc-creation-steps {
  height: 4px;
  width: 100%;
  background: #292b33;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 1.2s cubic-bezier(.25,.8,.25,1);
  margin-bottom: 16px;
}

.npc-creation-steps:after {
  transition: all 1.2s cubic-bezier(.25,.8,.25,1);
  position: absolute;
  content: '';
  width: 33.3%;
  width: var(--npc-creation-steps-width, 0%);
  height: 100%;
  background: rgb(255, 64, 254);
}

.npc-creation-steps > div {
  background: #292b33;
  border: solid #292b33 2px;
  border-radius: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-weight: bold;
  transition: all 1.2s cubic-bezier(.25,.8,.25,1);
}

.npc-creation-steps > div > ion-icon {
  display: none;
}

.npc-creation-steps > .npc-creation-step-checked {
  background: rgb(255, 64, 254);
  border: solid rgb(255, 64, 254) 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.npc-creation-steps > .npc-creation-step-current {
  background: #fff;
  border: solid rgb(255, 64, 254) 2px;
}

.npc-creation-steps > .npc-creation-step-checked > ion-icon {
  display: block;
}

.option-locked > .locked-custom-option {
  display: flex;
}

.custom-npc-actions {
  display: flex;
  justify-content: space-between;
}

#create-npc {
  text-transform: uppercase;
  width: 100%;
  margin-top: 16px;
}

.customize-npc-button {
  display: none;
}

.animated-emoji-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-emoji-button > img {
  width: 24px;
  margin-right: 8px;
}

.animated-emoji-button > .static-emoji {
  display: block;
}

.animated-emoji-button > .animated-emoji {
  display: none;
}

.animated-emoji-button:hover > .static-emoji {
  display: none;
}

.animated-emoji-button:hover > .animated-emoji {
  display: block;
}

.npc-creation-loading {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center!important;
}

.npc-creation-loading > .spinner {
	border-left: 6px solid #28283B;
  border-right: 6px solid #28283B;
  border-bottom: 6px solid #28283B;
	border-top: 6px solid rgb(239 0 216 / 80%);
}

.pressed-button {
  padding: 12px 24px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  border: none;
  border-radius: 15px;
  background: rgb(255, 64, 254);
  border: 1px solid #952f6b;
  box-shadow: 0 5px #952f6b;  transition: all .2s cubic-bezier(.25,.8,.25,1);
  display: flex;
  align-items: center;
  min-height: 45px;
  filter: grayscale(0);
}

.pressed-button > .right-button-icon {
  margin-right: 8px;
}

.secondary-pressed-button {
  background: #bbadbb;
  border: 1px solid #585258;
  box-shadow: 0 5px #585258;  transition: all .2s cubic-bezier(.25,.8,.25,1);
}

.pressed-button:active {
  box-shadow: none;
  transform: translateY(5px);
}

.full-width-button {
  width: 100%;
  justify-content: center;
}

#unity-canvas {
	width: 100%!important;
	height: 100%!important;
}

#unity-logo-overlay {
	width: 100%;
	height: 100%;
	background-color: #231F20;
	position: absolute;
	top: 0;
	display: none;
	z-index: 9999999;
  transition: all 1.2s cubic-bezier(.25,.8,.25,1);
}

.splash-image-container {
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  font-size: 96px;
  color: white;
  /*opacity: 0.8;*/
  user-select: none;
  text-shadow: 1px 1px rgba(0,0,0,0.1);
}

.splash-spinner {
  display: flex;
  position: absolute;
  z-index: 100;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.made-with-unity-container {
  z-index: 100;
  margin-top: 140px;
  transition: all 1.8s cubic-bezier(.25,.8,.25,1);
  opacity: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  scale: .9;
}

.splash-image-container > img {
  width: 520px;
  object-fit: cover;
}

.made-with-unity-container > img {
  width: 300px;
  object-fit: cover;
}

:root {
  --color-bg1: rgb(180, 0, 120);
  --color-bg2: rgb(235, 0, 140);
  --color1: 200, 40, 150;
  --color2: 220, 70, 200;
  --color3: 235, 0, 140;
  --color4: 255, 128, 214;
  --color5: 255, 102, 204;
  --color-interactive: 180, 0, 120;
  --circle-size: 80%;
  --blending: hard-light;
}

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}

.gradient-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: 0;
  left: 0;
  z-index: 9999;
  svg {
    display: none;
  }

  .gradients-container {
    filter: url(#goo) blur(40px) ;
    width: 100%;
    height: 100%;
  }

  .g1 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: center center;
    animation: moveVertical 30s ease infinite;

    opacity: 1;
  }

  .g2 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;

    opacity: 1;
  }

  .g3 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);

    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;

    opacity: 1;
  }

  .g4 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;

    opacity: 0.7;
  }

  .g5 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));

    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;

    opacity: 1;
  }

  .interactive {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);
    width: 100%;
    height: 100%;
    top: -50%;
    left: -50%;
    opacity: 0.7;
  }
}

.custom-button {
  position: relative;
}

.custom-button > .gradient-bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.mobile-only {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99999;
	background: #231F20;
	align-items: center;
	justify-content: center;
	padding: 80px;
	text-align: center;
	color: white;
	font-size: 24px;
}

.desktop-only {
	display: flex;
}

.language-title {
	margin: 8px;
  font-size: 18px;
}

.secondary-text {
	font-size: 12px;
	color: #666;
	margin: 8px;
}

#open-pricing {
  cursor: pointer;
}

#balance {
	margin: 0 24px;
  font-size: 24px;
  align-items: center;
}

.notification-badge {
  padding: 12px;
  border: solid 2px #FFF;
  color: #fff;
  position: absolute;
  border-radius: 8px;
  top: 0;
  right: -8px;
  margin-right: -6px;
  margin-top: -12px;
  scale: 0;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
  background: #f78b8c;
  background: linear-gradient(180deg, rgba(247, 139, 140, 1) 0%, rgba(247, 25, 28, 1) 8%, rgba(202, 22, 39, 1) 91%, rgba(140, 3, 17, 1) 100%);
  box-shadow: 0px 3px 4px 3px rgba(0, 0, 0, 0.4);
  z-index: 9;
}

.notification-badge.show {
  scale: 1;
}

.notification-badge > span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.notification-container {
  position: absolute;
  background: #071929;
  text-align: left;
  color: #FFF;
  right: 0px;
  width: 380px;
  top: 87px;
  padding: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  font-size: 12px;
  margin-top: 0;
  display: none;
  z-index: 9999;
}

.notification-list {
	list-style: none;
	padding: 0;
	height: 240px;
	overflow-x: scroll;
	margin: 0;
}

.notification-title {
	font-size: 14px;
	font-weight: bold;
}

.notification-container::after {
	content: '';
	width: 16px;
	height: 16px;
	position: absolute;
	background: #071929;
	right: 0;
	top: -8px;
	margin-right: 21px;
	transform: rotate(45deg);
}

.notification-list-item {
	padding-top: 8px;
	border-top: solid 1px #777;
	margin-bottom: 16px;
	position: relative;
	opacity: .4;
}

.notification-list-item:nth-child(1) {
	padding-top: 0px;
	border-top: solid 0px #777;
}

.learn-more-button {
	margin-top: 16px;
}

.learn-more-button > a {
	padding: 8px 16px;
	color: white;
	border: 1px solid white;
	border-radius: 4px;
	text-transform: uppercase;
}

.notification-list-item:nth-last-child(1) {
	margin-bottom: 0;
}

.notification-content {
	color: #CCC;
}

.unread-notification {
	opacity: 1;
}

.unread-notification::after {
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	background: blue;
	right: 0;
	border-radius: 50%;
	top: calc(50% - 6px);
}

.npc-description-container {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	bottom: 0;
}

.npc-description {
	max-width: 1920px;
	width: 100%;
	margin: 0 16px;
}

.npc-name {
	margin: 0 8px;
	position: absolute;
	z-index: 999;
	color: #FFF;
	max-width: 380px;
	font-size: 16px;
}

.npc-description-content {
	margin: 32px 8px 0 8px;
	position: absolute;
	z-index: 999;
	color: #FFF;
	max-width: 380px;
}

#welcome-modal > .app-modal {
	width: 720px;
	padding: 16px 16px 0 16px;
}

#welcome-modal > .app-modal > .modal-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 16px;
}

#welcome-modal > .app-modal > .modal-title > img {
	width: 24px;
	margin: 0 16px;
}

.multi-actions-button {
	display: flex;
}

.multi-actions-button > button {
	display: flex;
	align-items: center;
	justify-content: center;
}

.multi-actions-button > button > img {
	width: 24px;
	margin-left: 8px;
}

.multi-actions-button > .action-button:first-of-type {
	margin-right: 4px;
}

.multi-actions-button > .action-button:last-of-type {
	margin-left: 4px;
}

#chars-modal > .app-modal {
	padding: 16px 8px;
	width: auto;
	display: flex!important;
	flex-direction: column;
	align-items: center;
}

.char-list {
	display: flex;
	justify-content: space-between;
  flex-wrap: wrap;
	width:;
}

#open-yearbook {
	padding-left: 16px;
	padding-right: 16px;
}

.exit-chat-button {
  display: flex;
  align-items: center;
}

#exit-chat-label {
  cursor: pointer;
}

#exit-chat {
	display: none;
  padding: 8px 0;
  margin: 0 0 0 8px;
  background: transparent;
  color: #FFF;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.school-yearbook {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.char-image-container {
	position: relative;
	overflow: hidden;
	margin: 8px;
	max-width: 120px;
	max-height: 120px;
}

.char-image-overlay {
	position: absolute;
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	top: 0;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}

.char-image-overlay:hover {
	background: rgba(0, 0, 0, 0);
}

.best-choice-plan {
  position: absolute;
  background: rgba(253, 45, 248, 1);
  padding: 4px 8px;
  left: -8px;
  top: -8px;
  font-size: 11px;
  font-weight: bold;
  z-index: 9;
}

.best-choice-plan::before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 0px 10px 10px;
  border-color: transparent transparent rgba(253, 45, 248, 1) transparent;
  transform: rotate(-90deg);
  top: 24px;
  left: 0;
  filter: brightness(0.5);
}

.best-choice-plan > img {
	width: 12px;
	height: 12px;
}

.best-choise-banner {
	background: red;
	text-align: center;
	position: absolute;
	width: 150px;
	opacity: .5;
	top: 0;
	transform: rotate(45deg);
	right: -51px;
	font-size: 8px;
	margin-top: 14px;
	text-transform: uppercase;
	font-weight: bold;
	padding: 4px 0;
}

.coming-soon-message {
	background: red;
	text-align: center;
	position: absolute;
	width: calc(100% - 10px);
	opacity: .6;
	top: 0;
	top: 15%;
	transform: rotate(45deg);
	right: -25%;
	font-size: 10px;
}

.char-list-item {
	width: 33.33%;
}

.family-owners > .char-list-item {
	width: 50%;
}

.char-name {
	text-align: center;
	position: absolute;
	width: 100%;
	font-size: 10px;
	background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.7469362745098039) 0%, rgba(0,0,0,0.53125) 69%, rgba(0,0,0,0) 100%);
	bottom: 0;
}

.char-image {
	width: 120px;
  height: 120px;
}

.char-image-disabled {
	filter: grayscale(70%);
}

#yearbook-continue {
	margin: 0!important;
	width: 140px;
}

.terms-and-privacy {
	background: #071929;
	overflow: scroll;
	display: flex;
	flex-direction: center;
	justify-content: center;
}

.terms-and-privacy > .terms-and-privacy-content {
	padding: 48px 16px 0;
}

.terms-and-privacy > .terms-and-privacy-content > .last-update {
	opacity: .2;
}

.terms-and-privacy > .terms-and-privacy-content > p {
	margin: 10px;
	max-width: 960px;
}

.terms-and-privacy > .terms-and-privacy-content > h1, h2 {
	margin: 0;
	color: #fff;
}

.header-container {
	width: 100%;
	position: absolute;
	justify-content: center;
	display: flex;
}

.level-icon {
  position: absolute;
  left: 8px;
  z-index: 9;
}

.xp-bar-container {
  display: none;
  width: 100%;
  z-index: 9;
  position: absolute;
  align-items: center;
  justify-content: center;
  margin-top: 19px;
  margin-left: -28px;
}

.xp-bar-container > .xp-bar {
  max-width: 800px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 52px;
}

.xp-bar-value {
  overflow: hidden;
}

.xp-bar-value > .bar {
  position: absolute;
  z-index: 0;
  background: #339fff;
  width: 0;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  height: 100%;
  z-index: -1;
}

.xp-bar-value > .bar:after {
  content: '';
  position: absolute;
  width: 0px;
  height: 100%;
  right: 0;
  box-shadow: 0px 0px 10px 6px #8dc9ff;
}

.xp-bar-value > .bar > .glow {
  width: 100%;
  max-width: 100%;
  height: 100%;
  float: right;
}

.xp-bar-value > span {
  width: 100%;
  width: 42px;
  background: #FFF;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -8px;
  border-radius: 50%;
  z-index: 2;
}

.xp-bar-container > .xp-bar > div {
  max-width: 800px;
  width: 100%;
  position: relative;
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
  border-radius: 8px;
  border: solid 2px #fff;
}

.xp-bar-container > .xp-bar > div::after {
  position: absolute;
  content: '';
  width: calc(100% - 16px);
  left: 8px;
  height: 33%;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
  top: 6px;
  border-radius: 4px;
  z-index: 2;
  opacity: .6;
}

.bar {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.bar > .bar-animated:after {
	position: absolute;
	content: '';
	background: #FFF;
  opacity: .8;
	margin: 0;
	width: 240%;
	height: 120px;
	top: -17%;
	left: -80%;
	transform: rotate(45deg);
	animation: placeholderAnimate 2s ease-out 0s infinite;
	z-index: 9;
}

.header-container > .header {
	width: 100%;
	max-width: 1920px;
	z-index: 9999;
	display: flex;
  justify-content: space-between;
	padding: 16px;
}

.header-icon {
	width: 32px;
	height: 32px;
	margin: 0 8px;
	cursor: pointer;
}

.header > div {
	color: white;
	display: flex;
	align-items: center;
	font-size: 24px;
	position: relative;
  gap: 32px;
}

.header > div:first-of-type > div {
  display: flex;
  align-items: center;
}

.header > div:first-of-type > button {
  margin-right: 16px;
}

.full-screen-image {
	background: url(./../Images/next_char.png);
	display: none;
	z-index: 9;
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.screen-overrides {
	width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

#reward-modal {
	text-align: center;
}

#reward-modal > .app-modal {
	padding: 16px;
  width: 300px;
	font-size: 14px;
}

#map-modal > .app-modal {
  width: 100vw;
  height: 100vh;
  background: transparent;
  box-shadow: none;
}

#open-map {
  max-width: 180px;
  margin-left: 16px;
}

.close-map {
  z-index: 9;
}

.map-modal > h1 {
  text-align: center;
  margin: 4px;
}

.location-list {
  display: flex;
  text-align: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
}

.you-are-here-pin {
  display: flex;
  align-items: center;
  justify-content: center;
}

.you-are-here-pin > div {
  color: #fff;
  background: red;
  border-radius: 40px;
  font-size: 14px;
  padding: 4px 16px;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 180px;
}

.location-list > .location-item {
  margin: 16px;
  cursor: pointer;
  position: relative;
  height: auto;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.location-list > .location-item > .location-item-name {
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  color: #4b4b4b;
}

.location-list > .location-item:hover > img {
	scale: 1.3;
  filter: brightness(1);
}

.location-list > .location-item:hover > .location-item-name {
  margin-top: 24px;
  scale: 1.3;
  color: #FFF;
}

.location-list > .location-item > img {
  filter: brightness(0.5);
  width: 240px;
  height: 240px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.location-list > .location-item-selected {
  filter: brightness(1);
}

.location-list > .location-item-selected > img {
  filter: brightness(1);
}

.location-list > .location-item-selected:hover > img {
	scale: 1;
  filter: brightness(1);
}

.location-list > .location-item-selected > .location-item-name {
  color: #FFF;
}

.location-list > .location-item-selected:hover > .location-item-name {
  margin-top: 0;
	scale: 1;
  color: #FFF;
}

.congratulations-image {
  position: absolute;
  top: -83px;
  left: 68px;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.congratulations-image > img:nth-child(1) {
  width: 180px;
}

.congratulations-image > img:nth-child(2) {
  position: absolute;
  width: 50px;
  top: -20px;
  left: 124px;
}

#reward-modal > .app-modal > .modal-title {
	font-size: 16px;
}

#progress-container {
	width: 100%;
	position: absolute;
	z-index: 9;
	display: flex;
	justify-content: center;
	margin-top: -62px;
	top: 50%;
  display: none;
}

#progress-container > div > div > .user-progress-bar {
  background: #000000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
  border: 1px solid #fff;
  border-radius: 8px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
 }

#progress-container > div > div > .user-progress-bar:before {
 position: absolute;
  content: '';
  width: calc(100% - 8px);
  left: 4px;
  height: 44%;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
  top: 4px;
  border-radius: 8px;
  z-index: 2;
  opacity: .4;
}

#progress-container > div {
	max-width: 1920px;
	width: 100%;
	display: flex;
  justify-content: end;
  margin-left: -16px;
}

#progress-container > div > div {
	max-width: 220px;
	width: 200px;
	height: 112px;
	margin-left: 16px;
	position: relative;
}

#player-modal {
  width: 420px;
  height: auto;
  z-index: 999999999;
}

#player-modal > .app-modal {
  background: #160818;
  padding: 16px;
  border-radius: 16px;
}

#lang-modal > .app-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 520px;
}

#lang-modal > .app-modal > .secondary-text {
  max-width: 240px;
}

#first-run-modal > .app-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 420px;
  padding: 16px;
}

#first-run-modal > .app-modal > .switch-container {
  display: flex;
  font-size: 12px;
  flex-direction: row;
  align-items: center;
}

.first-run-modal-title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
}

.first-run-modal-title > div > img {
  width: 32px;
}

.first-run-modal-languages {
  display: flex;
  margin: 4px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.first-run-modal-languages > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc(20% - 8px);
  max-width: calc(20% - 8px);
}

.first-run-modal-languages > div:nth-child(n+6) {
  max-width: calc(25% - 8px);
}

.first-run-modal-languages > div > span {
  font-size: 10px;
}

.first-run-modal-languages > div > img {
  width: 48px;
}

#auth-modal {
  height: auto;
  z-index: 999999999;
  width: 420px;
}

@media (min-width: 600px) {
  #auth-modal {
    width: 85vw;
    max-width: 900px;
    height: 75vh;
  }
}

#swing-rules {
  width: 420px;
  height: auto;
  z-index: 999999999;
}

#swing-rules > .app-modal {
	padding: 16px;
}

#swing-rules > .app-modal > .modal-title {
	font-weight: bold;
  font-size: 18px;
}

.interest-bar-info > img {
  margin-top: 8px;
  width: 160px;
}

#player-attribute-name {
	font-size: 24px;
}

.player-attributes-names > div > img {
	cursor: pointer;
	width: 16px;
	height: 16px;
}

.player-attributes-names {
	display: flex;
  justify-content: space-between;
	align-items: center;
}

.attribute-name {
  display: none;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 2px;
  padding: 0;
  height: 15px;
	overflow: hidden;
  margin: 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 15px;
  background: #292b33;
  border-radius: 2px;
}

input[type="range"]::-moz-range-track {
  height: 15px;
  background: #292b33;
  border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  width: 16px;
  background-color: #fff;
  margin: 0;
  border-radius: 2px;
  box-shadow: -407px 0 0 400px #EA38E1;
}

input[type="range"]::-webkit-slider-thumb::after {
	content: '';
	width: 4px;
	height: 24px;
	position: absolute;
	background: white;
}

input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  width: 16px;
  background-color: #fff;
  margin: 0;
  border-radius: 2px;
  box-shadow: -407px 0 0 400px #EA38E1;
}

input[type="range"]::-moz-range-thumb::after {
	content: '';
	width: 4px;
	height: 24px;
	position: absolute;
	background: white;
}

.range {
  overflow: hidden;
  border-radius: 2px;
 }

.player-attributes-description {
  margin-top: 24px;
  margin-bottom: 16px;
}

.attribute-bar {
  display: none;
	height: 8px;
	background: #292b33;
	position: relative;
	width: 100%;
	border-radius: 2px;
	overflow: hidden;
	margin: 8px 0;
  height: 12px;
  border: solid 1px #ff4fff;
  border-radius: 4px;
  position: relative;
}

.attribute-bar:before {
  position: absolute;
  content: '';
  width: calc(100% - 8px);
  height: 8px;
  top: 2px;
  background: linear-gradient(180deg, rgba(255, 170, 255, 1) 0%, rgba(255, 0, 183, .2) 80%);
  opacity: .6;
  margin: 0 4px;
  border-radius: 8px;
  z-index: 2;
}

.attribute-bar > div {
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
  background: #ff00b7;
  height: 100%;
  border-radius: 2px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  position: relative;
}

.attribute-bar > div:after {
  content: '';
  position: absolute;
  width: px;
  height: 100%;
  right: 0;
  box-shadow: 0px 0px 10px 6px #cb57a7;
}

.toasty {
  display: none;
  opacity: 0;
  background: #333333;
  z-index: 99999;
  position: absolute;
  top: 102px;
  right: -800px;
  padding: 16px 64px 16px 16px;
  color: #fff;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.toasty-message {
  max-width: 250px;
  display: flex;
  align-items: center;
}

.toasty::before {
  position: absolute;
  content: '';
  width: 6px;
  height: calc(100% - 32px);
  background: #4747ff;
  top: 16px;
  left: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.toasty-container {
  display: flex;
  align-items: center;
}

.toasty-content-icon {
  font-size: 24px;
  margin-right: 8px;
}

.toasty > .close-toasty {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 18px;
  cursor: pointer;
}

.toasty-type {
  font-weight: bold;
}

.wasd-icon {
  position: relative;
  padding: 0 8px;
}

.wasd-icon > img {
  height: 28px;
}

.request-error {
	position: absolute;
	z-index: 9999;
	bottom: -100%;
	width: 100%;
	cursor: pointer;
  display: flex;
	justify-content: center;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}

.request-error > .request-error-content {
	background: #333333;
	max-width: 320px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	color: white;
	border-radius: 4px;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

#request-error-retry {
	text-transform: uppercase;
	color: #F7FB00;
	background: transparent;
}

canvas {
	outline: none!important;
}

a {
	text-decoration: none;
	color: rgb(152,30,122);
	font-weight: bold;
}

.privacy-terms-link {
	width: 100%;
	text-align: center;
	bottom: 12px;
	margin: 0;
	left: 0;
	font-weight: bold;
	display: flex;
  text-align: center;
  margin: 16px 0 0 0;
}

.privacy-terms-link > div {
	width: 100%;
}

.privacy-terms-link > div > a {
	color: rgb(240 58 232)!important;
}

#open-modal-button {
  padding: 20px;
	background: #fff;
	cursor: pointer;
	z-index: 9999;
}

.customized-progress-bar-container {
	width: 100%;
	display: flex;
	justify-content: center;
	z-index: 9999999999;
	position: absolute;
	bottom: 0;
}

.customized-progress-bar-container > .customized-progress {
	width: 100%;
	max-width: 1920px;
	height: 20px;
}

.customized-progress-bar-container > .customized-progress > .customized-progress-border {
	width: 100%;
	height: 20px;
	position: relative;
}

.customized-progress-bar-container > .customized-progress > .customized-progress-border > .customized-progress-bar {
  background: #FFF;
  bordr-radius: 4px;
  z-index: 10;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
	width: 0%;
	height: 20px;
   -webkit-box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.8);
  -moz-box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.8);
}

.modal-container {
  display: flex;
	flex-direction: column;
	width: fit-content;
	height: fit-content;
	position: absolute;
	top: -150%;
	align-items: center;
	justify-content: center;
	z-index: 99999999999;
}

#auth-modal > div {
	width: 100%;
	height: 100%;
	max-width: 1920px;
	display: flex;
  border-radius: 0!important;
}

.auth-banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 16px;
  top: 0;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  margin-top: -32px;
  padding: 16px 0;
  min-height: 200px;
  overflow: hidden;
  background-color: #000;
}

.auth-banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
	object-position: 74% center;
}

.video-overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: linear-gradient(45deg, rgba(0,0,0,.4) 50%, rgba(0,0,0,.4) 50%);
	background-size: 2px 2px;
	z-index: 2;
}

.auth-banner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
  top: 0;
  left: 0;
  z-index: 2;
}

.auth-banner > span {
  color: #fff;
  z-index: 10;
  display: none;
  position: relative;
}

.auth-banner > img {
  height: 108px;
  z-index: 10;
  position: relative;
}

#google-captcha {
	margin-bottom: 8px;
}

.auth-image {
	width: 50%;
}

.select-language-container {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #061929;
	z-index: 99999;
}

.select-language-container > div > h1 {
	color: #fff;
}

.select-language-container > div {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
}

.button-flag-icon {
	cursor: pointer;
	display: flex;
	color: #fff;
	align-items: center;
	color: rgb(245 60 237);
	font-weight: bold;
  opacity: .4;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.button-flat-img-container {
  position: relative;
  border-radius: 16px;
}

.button-flat-img-container:after {
  position: absolute;
  content: '';
  width: calc(100% - 6px);
  left: 3px;
  height: 49%;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 254, 255, 0.8) 0%, rgba(255, 255, 255, .2) 100%);
  top: 3px;
  border-top-left-radius: 100% 27px;
  border-top-right-radius: 100% 27px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.button-flag-icon-selected {
  opacity: 1;
}

.button-flag-icon > .button-flat-img-container > img {
	width: 48px;
	border-radius: 16px;
}

.button-flag-icon > span {
	padding: 0 16px;
}

.button-flag-icon > .button-flat-img-container > img {
	left: 0;
	top: 0;
}

.app-modal {
  width: 420px;
  background: #160818;
	border-radius: 2px;
	color: #fff;
	position: relative;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  width: 100%;
  height: auto;
  z-index: 99999999999;
}

.modal-background {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0rem);
  -webkit-backdrop-filter: blur(0rem);
  z-index: 99999999999;
  display: none;
  justify-content: center;
  align-items: center;
  color: white;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.player-settings-modal-background {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #160818;
  z-index: -1;
  top: 0;
  left: 0;
  margin-top: 100%;
}

.pulse-background {
  position: absolute;
  width: 100vw;
  background: rgba(0,0,0,.5);
  justify-content: center;
  align-items: center;
  color: white;
  display: none;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.challenge-pulse-background {
  z-index:  9;
  height: 1000vh;
  display: none;
}

.auth-screen {
	display: flex;
	width: 100%;
	position: absolute;
	height: 100%;
}

.auth-app-modal {
	border-radius: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 32px;
	background: #071929;
  width: 100%;
  margin: 0!important;
  position: relative;
}

.auth-modal-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}

.auth-forms-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 16px 8px;
}

.auth-forms-column > * {
  width: 100%;
  max-width: 420px;
}

.auth-forms-column .pricing-header {
  margin-top: 0;
  padding: 0 16px;
  width: 100%;
}

.app-modal > div {
 margin-bottom: 8px;
}

.app-modal > .app-modal-header {
	text-align: center;
	color: white;
}

.tap-to-start {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	color: #fff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 200px;
	z-index: 1;
	bottom: 115px;
	font-size: 16px;
	display: none;
}

.joystick-container {
	z-index: 8;
	position: absolute;
	width: 100%;
	margin: 0;
	bottom: 0;
}

#zone_joystick {
	width: 100%;
	height: 280px;
}

#zone_joystick > .nipple > {
	opacity: 1!important;
}

#zone_joystick > .nipple > .front {
	border: 1px solid #ff2eff;
	background-color: #ff2eff!important;
	opacity: 1!important;
	scale: .9!important;
	-webkit-box-shadow:0px 0px 106px 18px rgba(255,46,248,1);
	-moz-box-shadow: 0px 0px 106px 18px rgba(255,46,248,1);
	box-shadow: 0px 0px 106px 18px rgba(255,46,248,1);
	transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
	transition: transform .4s, background-color .2s;
}

#zone_joystick > .nipple > .back {
	background: transparent!important;
	border: 1px solid #ff2eff;
	opacity: 1!important;
}

.modal-container > .app-modal {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 24px;
}

#settings-modal > .app-modal {
	/*width: 400px;*/
	padding-bottom: 73px;
	padding: 16px;
  /*height: 580px;*/
}

#shop-modal > .app-modal {
	width: 100%;
	max-width: 1366px;
	padding: 0 16px 0 16px;
	max-width: fit-content;
}

.shop-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.shop-item > .action-button {
	margin-top: 8px;
}

.shop-item-name {
	position: absolute;
	width: 100%;
	text-align: center;
	padding: 8px;
	bottom: 4px;
	background: linear-gradient(0deg, rgba(0,0,0,0.7469362745098039) 0%, rgba(0,0,0,0.53125) 69%, rgba(0,0,0,0) 100%);
}

.shop-item-image {
	position: relative;
}

.shop-item-image > img {
	width: 320px;
}

.shop-item-tags {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.shop-item-tag {
	padding: 4px 8px;
	border-radius: 8px;
	background: #b432d5;
}

.shop-tag-inactive {
	opacity: .2;
}

#pricing-modal > .app-modal {
	width: 100%;
  background: #160818;
}

.credits-message {
	text-align: center;
	font-size: 16px;
	color: #6f6f6f;
	position: relative;
	z-index: 9999;
}

.pricing {
	display: flex;
	height: 100%;
}

.pricing-top-overlay, .pricing-bottom-overlay {
	display: none;
}

.pricing-header {
	display: flex;
	justify-content: center;
}

.pricing-header-item {
	padding: 8px;
	border-radius: 4px;
	color: #6f6f6f;
	width: 200px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.pricing-header > div {
	display: flex;
	padding: 8px;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
  background: #05121e;
	padding: 4px;
}

.pricing-header-item-active {
  background: #28283B;
	color: rgb(245 60 237);
	font-weight: bold;
}

#pricing-modal > .app-modal > .pricing-header .pricing-header-item-active {
  background: #26083b;
	color: rgb(245 60 237);
	font-weight: bold;
}

#pricing-modal > .app-modal > .modal-pricing-header > div {
  background: #000!important;
}

.security-payment {
  color: white;
  text-align: center;
}

.security-payment-cards {
	margin-top: 8px;
}

.security-payment-cards > img {
	height: 20px;
  width: 32px;
}

.close-modal {
  position: absolute;
	cursor: pointer;
	top: 0;
	right: 0;
}

#close-pricing {
	margin-top: 16px;
}

.pricing-item {
	position: relative;
	width: 320px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  /*overflow: hidden;*/
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  z-index: 9999;
}

.pricing-item:hover {
}

@keyframes pulseShadow {
  0% {
    box-shadow:
      0 0 20px rgba(147, 51, 234, 0.2),
      0 0 50px rgba(147, 51, 234, 0.15),
      0 0 100px rgba(147, 51, 234, 0.1);
  }
  100% {
    box-shadow:
      0 0 40px rgba(147, 51, 234, 0.5),
      0 0 100px rgba(147, 51, 234, 0.35),
      0 0 200px rgba(147, 51, 234, 0.25);
  }
}

.free-pricing-item:hover {
	scale: 1;
}

.focused-plan-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.focused-plan-badge {
  display: none;
  position: absolute;
  top: 0;
  margin-top: -10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.focused-plan-badge > div {
  background: #fd2df8;
  padding: 4px 12px;
  border-radius: 16px;
  z-index: 9;
  margin: -6px;
}

.plan-pulse {
  animation: plan-pulse 1s infinite ease-in-out alternate;
}
@keyframes plan-pulse {
  from { transform: scale(0.8); }
  to { transform: scale(1.2); }
}

.focused-plan:after {
	position: absolute;
	content: '';
	background: rgba(255, 255, 255, .2);
	margin: 0;
	width: 140%;
	height: 60px;
	top: 0;
	left: -20%;
	transform: rotate(27deg);
  animation: focused-plan-animation 1.2s ease-out 0s infinite;
	z-index: 9;
}

@keyframes focused-plan-animation {
  0% {
    top: -40%;
  }
  100% {
    top: 140%;
  }
}

.pricing-item > .action-button {
	margin: 8px;
	position: absolute;
  bottom: 0;
  left: 0;
	width: calc(100% - 16px);
}

.pricing-item-tier {
	margin-top: 16px;
	font-size: 24px;
	font-weight: bold;
  position: absolute;
  width: 100%;
  top: 0;
}

.pricing-item > div > .pricing-item-price {
	color: #fd2df8;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 8px;
}

.pricing-item > div > .pricing-item-description {
	color: #6f6f6f;
	margin: 8px 0;
	font-size: 11px;
	z-index: 1;
  position: absolute;
  width: 100%;
  bottom: -8px;
}

.pricing-item-bonus {
  position: absolute;
  width: 100%;
  bottom: 12px;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x2-event {
  position: relative;
}

.x2-event .old {
  color: #a17fa7;
  font-weight: bold;
  font-size: 16px;
  opacity: .8;
  position: relative;
  margin: 0;
}

.x2-event .old:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #a17fa7;
  left: 0;
  top: calc(50% - 1px);
  transform: rotate(-24deg);
}

.price-x2 {
  padding: 6px;
  border: solid 2px #FFF;
  color: #fff;
  position: absolute;
  border-radius: 8px;
  top: 0;
  right: -8px;
  margin-right: -6px;
  margin-top: -12px;
  scale: 1;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
  background: #f78b8c;
  background: linear-gradient(180deg, rgba(247, 139, 140, 1) 0%, rgba(247, 25, 28, 1) 8%, rgba(202, 22, 39, 1) 91%, rgba(140, 3, 17, 1) 100%);
  box-shadow: 0px 3px 4px 3px rgba(0, 0, 0, 0.4);
  z-index: 9;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -15px;
  right: -24px;
  rotate: 20deg;
  animation: off-price-pulse 1.5s linear infinite;
  scale: .8;
}

.price-x2 > span {
  scale: .8;
}

.offer-time-left {
  scale: .8;
  animation: off-price-pulse 1.5s linear infinite;
}

@keyframes off-price-pulse {
  0%{
    scale: .8;
  }
  50%{
    scale: 1;
  }
  100%{
    scale: .8;
  }
}

.nutaku-gold-pricing {
  width: 24px;
  height: 24px;
  margin: 0 8px;
}

.pricing-item-current-plan {
	display: none;
  border: solid 4px #23c179;
  position: absolute;
  top: -4px;
  height: calc(100% + 8px);
  width: calc(100% + 8px);
  left: -4px;
  border-radius: 21px;
}

.current-plan-text {
  position: absolute;
  top: -2px;
  width: calc(100% + 8px);
  padding: 2px;
  background: #23c179;
  margin: 0;
  left: -4px;
  z-index: 9;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 12px;
}

.other-game-bonus {
  margin-top: 16px 0;
}

.pricing-item-features {
	text-align: left;
  font-weight: bold;
  margin: 12px 0 0 0;
}

.pricing-item > .pricing-item-coming-soon {
	color: #6f6f6f;
  margin: 16px 0 0 0;
	text-align: left;
	font-size: 11px;
}

.pricing-item {
	margin: 16px;
	padding: 0 8px;
	display: flex;
	background: #1b012b;
  border: 2px solid #fd2df8;
  border-radius: 16px;
	color: #fff;
	flex-direction: column;
	text-align: center;
}

.pricing-header-container {
  position: relative;
}

.pricing-header-container > video {
  margin: 16px;
}

.pricing-item-price > span {
	font-size: 12px;
}

.old-price {
  color: #5a3061;
  font-weight: bold;
  font-size: 16px;
  opacity: .8;
  position: relative;
  margin: 0 8px;
}

.old-price:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #5a3061;
  left: 0;
  top: calc(50% - 1px);
  transform: rotate(-24deg);
}

.price-period {
	color: #6f6f6f;
}

.pricing-item-list {
  margin-top: 0;
	text-align: left;
	list-style: none;
	padding: 0;
  margin: 0 0 0 8px;
}

.pricing-item-list > li {
  display: flex;
  align-items: center;
}

.pricing-item-list > li > .tooltip-container {
  display: flex;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  top: 1px;
}

.pricing-item-list > .inactive-feature {
	opacity: .3;
}

.active-feature > div, .inactive-feature > div {
	display: flex;
	position: relative;
}

.feature-info > img {
	margin-right: 8px;
	width: 14px;
	height: 14px;
}

.nsfw-content-tag {
	cursor: pointer;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	backdrop-filter: blur(1px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(3px);
}

.nsfw-content-tag:hover {
	backdrop-filter: blur(0px);
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
}

.pricing-item > ul > li {
	margin: 4px 0;
  align-items: center;
}

.pricing-item-list-check {
	width: 16px;
	opacity: .6;
  margin-right: 8px;
}

.monthly-pricing, .one-time-pricing {
  display: none;
}

.annual-info {
  color: #6f6f6f;
  margin: 9px;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.annual-info > img {
  width: 16px;
  height: 16px;
  margin: 0 6px;
  opacity: .5;
}

.launcher {
	display: flex;
}

.panel:nth-child(1) {
	height: 100vh;
	width: 300px;
}

.panel:nth-child(2) {
	height: 100vh;
}

.actions {
	position: absolute;
	bottom: 32px;
	width: calc(250px - 32px);
}

.actions > button {
	width: 100%;
}

#progress-bar {
	width: 0%;
	background: #000;
	top: 0;
	position: absolute;
	border-left-top-radius: 4px;
	border-left-bottom-radius: 4px;
	opacity: 0.5;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

p {
	color: #FFF;
	margin: 0 0 -8px 12px;
}

.tabs {
	display: flex;
	margin-bottom: 16px;
	margin-top: 32px;
	width: 420px;
	font-family: 'Play', sans-serif;
}

.window-actions {
	position: absolute;
	top: 0;
	padding: 8px;
	right: 0;
	color: #fff;
	cursor: ponter;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	background: red;
}

.window-actions:hover {
	text-shadow: 0 0 6px #719ECE;
}

.tabs > .tab {
	width: 50%;
	outline: none;
	background: transparent;
	border: 0;
	padding: 16px 0;
	color: #666;
	border-bottom: 1px solid transparent;
	text-transform: uppercase;
}

.tabs > .active-tab {
	color: #FFF;
	border-bottom: 1px solid white;
}

.auth-body {
	background: #071929;
}

.auth-container {
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #FFF;
	width: 420px;
	padding: 8px;
}

#auth-tab {
	display: none;
  padding: 16px;
}

#register-tab {
  padding: 16px;
}

.auth-overlay {
	width: 50%;
	height: 100%;
	position: relative;
}

.auth-overlay:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(0, 0, 0, .8);
}

.auth-app-info {
	position: absolute;
	z-index: 9999;
	top: 50%;
	margin-top: -120px;
	left: 50%;
	margin-left: -120px;
	color: #fff;
}

.auth-app-info > ul {
	padding: 0;
	list-style: none;
}

.auth-app-info > ul > li {
  display: flex;
	align-items: center;
	margin-bottom: 6px;
}

.auth-app-info > ul > li > img {
	width: 16px;
	height: 16px;
	margin-right: 8px;
}

.auth-app-info > button {
	margin: 0!important;
}

.auth-app-logo {
	width: 80px;
	height: 80px;
	border-radius: 14px;
}

.auth-image {
	position: absolute;
	width: 100%;
	height: 100%;
}

.auth-image-nsfw {
	background-size: cover!important;
	background: url("./../images/auth_image_nsfw.png");
}

.auth-image-sfw {
	background-size: cover!important;
	background: url("./../images/auth_image_sfw.png");
}


.social-login {
	display: flex;
	flex-direction: column;
	width: calc(100% - 32px);
	align-items: center;
	width: 420px;
	position: relative;
	margin-top: 24px;
	padding: 0 16px;
}

.auth-divisor {
	margin-top: 16px;
	text-align: center;
}

.apple-login {
  margin-bottom: 8px;
  background: black;
  height: 44px;
  width: 233px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apple-login > img {
  width: 22px;
  margin: 0 8px 0 0;
}

.sl-login > button {
  background-color: #5a1c67;
  border-color: #5a1c67;
  color: #fff;
  border-radius: 4px;
  padding: 8px;
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: poniter;
}

.sl-login > button > span {
  margin-left: 8px;
}

.sl-login > button > img {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

.auth-divisor-text {
	z-index: 9;
	position: relative;
	background: #071929;
	padding: 0 8px;
	color: #666;
}

.auth-divisor-line {
	position: absolute;
	content: '';
	width: calc(100% - 32px);
	background: white;
	height: 1px;
	left: 0;
	margin-top: -10px;
	z-index: 8;
	opacity: .3;
	padding: 0 8px;
	margin-left: 16px;
}

.password-container {
  position: relative;
  cursor: pointer;
}

.password-container > ion-icon {
  position: absolute;
  right: 0;
  top: 0;
  margin: 8px;
}

.strong-password {
	width: 100%;
}

.strong-password > label {
	font-size: 12px;
	color: #666;
}

.strong-password-indicator{
	display: flex;
	width: calc(100% + 8px);
	margin-left: -4px;
}

.strong-password-indicator > div {
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	width: calc(25% - 2px);
	margin: 2px 4px;
	height: 4px;
	border-radius: 2px;
	background: #666;
}

textarea {
  resize: none;
}

textarea, input, select {
	font-size: 14px;
	padding: 8px;
	background: #292b33;
	border: 0;
	color: #fff;
	border-radius: 4px;
	outline-color: blue;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	margin-bottom: 8px;
	width: 100%;
}

#confirmation-container {
	margin: 16px auto;
	color: #FFF;
	text-align: center;
	display: none;
	max-width: 420px;
	padding: 24px;
}

#confirmation-container > p {
	margin: 0 0 16px 0;
}

#confirmation-container > div {
	display: flex;
	justify-content: center;
	margin: 0 0 16px 0;
}

.digit-input {
	width: 40px;
	height: 40px;
	margin: 8px;
	text-align: center;
	padding-top: 8px;
}

.digit-input:first-of-type {
	margin: 8px 8px 8px 0;
}

.digit-input:last-of-type {
	margin: 8px 0 8px 8px;
}

.resend-code {
	margin: 16px 0!important;
}

#resent-verification-code {
	font-size: 12px;
	margin: 0 0 0 4px;
  color: rgb(255, 64, 254);
	outline: none;
	background: transparent;
  cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@keyframes phone-rotate-animation {
  0% { transform: rotate(-20deg); }
  50% { transform: rotate(20deg); }
  90% { transform: rotate(-20deg); }
  100% { transform: rotate(-20deg); }
}

.phone-rotate {
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: 999999999;
	align-items: center;
	justify-content: center;
	background: #000;
	flex-direction: column;
	display: none;
}

.phone-rotate > img {
  animation: phone-rotate-animation 2.5s linear infinite;
}

#phone-rotate-text {
	padding-top: 16px;
	font-size: 14px;
	color: #fff;
}

.game-container {
	position: absolute;
	bottom: 32px;
	width: 100%;
	height: 100%;
	display: flex;
  align-items: center;
  justify-content: center;
}

#start-game, #go-to-create-account {
	display: none;
	position: absolute;
	z-index: 999;
	width: 300px;
	bottom: 24px;
	right: 50%;
	margin-right: -150px;
}

#skip-tutorial {
	max-width: 1920px;
	position: absolute;
	bottom: -32px;
	padding: 20px;
	width: 100%;
	max-width: 1920px;
	z-index: 999999;
	text-align: right;
	font-size: 24px;
	color: #FFF;
	text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
}

#skip-tutorial > label {
	cursor: pointer;
	display: none;
}

.character-expression {
	font-size: 100px;
	position: absolute;
	left: 54%;
	z-index: 9;
	top: 21%;
	color: #fff;
	display: flex;
	color: white;
  visibility: hidden;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 800;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: rgba(248,92,255,1);
	border: solid 2px rgba(248,92,255,1);
	color: white;
}

.character-expression {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.character-expression > div {
  display: none;
}

.character-expression .show {
  display: flex;
}

.shy div,
.fear div,
.angry div,
.excited div,
.moaning div {
  opacity: 0;
  transform: scale(0) rotate(var(--rotate)) translate(var(--translateX), var(--translateY));
  animation: appear 0.7s forwards, bounce 0.7s forwards, var(--glow) 1s alternate;
}

.shy div {
  --rotate: calc(var(--rotateAngle) * 1deg);
  --translateX: calc(var(--translateDistX) * 1%);
  --translateY: calc(var(--translateDistY) * 1%);
  --rotateAngle: 5;
  --translateDistX: -3;
  --translateDistY: 2;
  --glow: glow-shy;
}

.fear div {
  --rotate: calc(var(--rotateAngle) * 1deg);
  --translateX: calc(var(--translateDistX) * 1%);
  --translateY: calc(var(--translateDistY) * 1%);
  --rotateAngle: -5;
  --translateDistX: 3;
  --translateDistY: -2;
  --glow: glow-fear;
}

.angry div {
  --rotate: calc(var(--rotateAngle) * 1deg);
  --translateX: calc(var(--translateDistX) * 1%);
  --translateY: calc(var(--translateDistY) * 1%);
  --rotateAngle: 5;
  --translateDistX: -3;
  --translateDistY: 2;
  --glow: glow-angry;
}

.excited div {
  --rotate: calc(var(--rotateAngle) * 1deg);
  --translateX: calc(var(--translateDistX) * 1%);
  --translateY: calc(var(--translateDistY) * 1%);
  --rotateAngle: -5;
  --translateDistX: 3;
  --translateDistY: -2;
  --glow: glow-excited;
}

.moaning div {
  --rotate: calc(var(--rotateAngle) * 1deg);
  --translateX: calc(var(--translateDistX) * 1%);
  --translateY: calc(var(--translateDistY) * 1%);
  --rotateAngle: 5;
  --translateDistX: -3;
  --translateDistY: 2;
  --glow: glow-moaning;
}

.character-expression .shy div:nth-child(1) { animation-delay: 0s; transform: scale(.2); }
.character-expression .shy div:nth-child(2) { animation-delay: 0.3s; }
.character-expression .shy div:nth-child(3) { animation-delay: 0.6s; }

.character-expression .fear div:nth-child(1) { animation-delay: 0s; }
.character-expression .fear div:nth-child(2) { animation-delay: 0.3s; }

.character-expression .angry div:nth-child(1) { animation-delay: 0s; }
.character-expression .angry div:nth-child(2) { animation-delay: 0.3s; }

.character-expression .excited div:nth-child(1) { animation-delay: 0s; }
.character-expression .excited div:nth-child(2) { animation-delay: 0.3s; }
.character-expression .excited div:nth-child(3) { animation-delay: 0.6s; }
.character-expression .excited div:nth-child(4) { animation-delay: 0.9s; }

.character-expression .moaning div:nth-child(1) { animation-delay: 0s; }
.character-expression .moaning div:nth-child(2) { animation-delay: 0.3s; }
.character-expression .moaning div:nth-child(3) { animation-delay: 0.6s; }
.character-expression .moaning div:nth-child(4) { animation-delay: 0.9s; }
.character-expression .moaning div:nth-child(5) { animation-delay: 1.2s; }
.character-expression .moaning div:nth-child(6) { animation-delay: 1.5s; }
.character-expression .moaning div:nth-child(7) { animation-delay: 1.8s; }
.character-expression .moaning div:nth-child(8) { animation-delay: 2.1s; }

@keyframes appear {
  to {
    opacity: 1;
    transform: scale(1) rotate(0) translate(0, 0);
  }
}

@keyframes glow-shy {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffb6c1, 0 0 40px #ffb6c1, 0 0 50px #ffb6c1, 0 0 60px #ffb6c1, 0 0 70px #ffb6c1;
  }
  to {
    text-shadow: none;
  }
}

@keyframes glow-fear {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #000000, 0 0 40px #000000, 0 0 50px #000000, 0 0 60px #000000, 0 0 70px #000000;
  }
  to {
    text-shadow: none;
  }
}

@keyframes glow-angry {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000;
  }
  to {
    text-shadow: none;
  }
}

@keyframes glow-excited {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00, 0 0 60px #00ff00, 0 0 70px #00ff00;
  }
  to {
    text-shadow: none;
  }
}

@keyframes glow-moaning {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff69b4, 0 0 40px #ff69b4, 0 0 50px #ff69b4, 0 0 60px #ff69b4, 0 0 70px #ff69b4;
  }
  to {
    text-shadow: none;
  }
}

.footer-ads {
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.close-ads {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: #071929;
  position: absolute;
  z-index: 9;
  top: 0;
  margin-top: -10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 16px;
  z-index: 9999;
}

.footer-ads > .close-ads {
  margin-left: 728px;
}

.center-ads {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  display: none;
  align-items: center;
  justify-content: center;
	background: rgba(0,0,0, .4);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}

.center-ads > .ads-container {
  margin-top: -35px;
}

.ads-container {
  width: 308px;
  height: 286px;
  background: #FFF;
  z-index: 999;
  position: relative;
}

.footer-ads > .ads-container {
  width: 728px;
  height: 90px;
}

.ads-container > .close-ads {
  right: -8px;
}

.time-close-ads {
  cursor: pointer;
  background: #071929;
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  z-index: 999;
  padding: 8px;
  font-size: 12px;
  width: 140px;
  border-radius: 8px;
  border: 1px solid #fff;
  right: 0;
  bottom: -39px;
  width: 100%;
  opacity: .4;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}

.movement-tutorial {
	position: absolute;
	display: flex;
	width: 100%;
  align-items: center;
  justify-content: center;
	bottom: 48px;
  z-index: 999;
	display: none;
}

.movement-tutorial-container {
	position: absolute;
	margin: 0 8px;
	display: flex;
	background: blue;
	width: 100%;
	max-width: 1920px;
  bottom: 48px;
}

.movement-tutorial-input {
	margin: 4px;
	width: 48px;
	height: 48px;
	background: #28283B;
	color: #fff;
	display: flex;
	align-items: center;
	justify-items: center;
	border-radius: 4px;
	margin-top: -32px;
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.movement-tutorial-input:after {
	position: absolute;
	content: '';
	width: 36px;
	height: 36px;
	border: solid 1px #60607c;
	border-radius: 8px;
	margin-left: 6px;
}

.movement-tutorial-input > div {
	width: 100%;
	text-align: center;
}

.w-key {
	position: absolute;
	top: calc(-48px - 8px);
	margin-left: -24px;
}

.threesome-subtitles {
	position: absolute;
}

.premium-blur-overlay {
  height: 100%;
  z-index: 10;
  position: absolute;
  width: 100%;
  backdrop-filter: blur(.5rem);
  display: none;
}

#subtitle, #subtitle-1, #subtitle-2, #scene-description, #tutorial-subtitle {
	color: #FFF;
	width: 100%;
	text-align: center;
	position: absolute;
	padding: 0 16px;
	font-size: 16px;
	z-index: 9;
	top: 12px;
	max-width: 1920px;
	text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
	z-index: 1;
}

.npc-subtitle {
  color: #FFF;
  font-size: 16px;
  display: flex;
}

.npc-action-subtitle {
  font-size: 14px;
  width: 100%;
  text-align: left;
  color: #bbbbbb;
  font-style: italic;
}

.subtitle-actions {
	position: absolute;
	top: -30px;
	right: 0;
	display: flex;
  align-items: center;
  justify-content: center;
	z-index: 9;
}

.tooltip-container {
	cursor: pointer;
	position: relative;
  z-index: 999999;
}

.tooltip {
	position: absolute;
	top: -40px;
	font-size: 10px;
	color: white;
	width: 100px;
	background: rgba(0, 0, 0);
	opacity: .6;
	text-align: center;
	padding: 4px;
	border-radius: 6px;
	visibility: hidden;
	opacity: 0;
}

.tooltip > a {
	font-weight: bold;
	color: white;
}

.tooltip-container:hover .tooltip {
	visibility: visible;
	opacity: 1;
}

.tooltip:after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	background: rgb(0, 0, 0);
	bottom: -5px;
	border-radius: 2;
	left: calc(50% - 5px);
	transform: rotate(45deg);
}

.side-tooltip > .tooltip {
	margin-left: 0;
}

.side-tooltip > .tooltip:after {
	left: 5px;
}

.subtitle-with-name {
  display: flex;
}

.subtitle-actions > button {
	background: transparent;
	border: 0;
	outline: none;
}

.subtitle-actions > button > img {
	width: 16px;
}

#explain-better {
  border-radius: 4px;
	padding: 8px;
  max-width: 524px;
}

.explain-better-reasons {
	padding: 16px;
	display: flex;
  flex-wrap: wrap;
}

.feedback-reason {
	padding: 4px 8px;
	border: solid 1px white;
	cursor: pointer;
	opacity: .6;
	border-radius: 8px;
	margin-bottom: 8px;
	margin-right: 8px;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
}

.feedback-reason:hover {
	background: rgba(255, 255 , 255, .4);
}

.feedback-reason-header {
	color: white;
	text-align: left!important;
	font-size: 16px;
	margin: 16px 0 0 16px;
}

.explain-better-reasons > button {
	margin: 0;
}

.explain-better-reasons > .mobile-input {
  width: 100%;
}

.feedback-reason-active {
	background: #fff;
	opacity: 1;
	color: #071929;
}

.feedback-reason-active:hover {
	background: #fff;
}

#scene-description {
	max-width: 900px;
  min-height: 80px;
  position: relative;
	z-index: 1;
  overflow: hidden;
}

#scene-description > .text {
  max-height: 80px;
  overflow: hidden;
}

.view-complete-description {
  position: absolute;
  right: 0;
  color: #fff;
  margin-top: 8px;
  font-weight: bold;
  background: transparent;
}

.complete-description-text {
  max-height: 280px;
  overflow: scroll;
  margin-bottom: 16px;
}

#complete-description-modal > .app-modal > .modal-content {
  margin: 16px;
}

#complete-description-modal {
  width: 400px;
}

#tutorial-subtitle {
	bottom: 32px;
	font-size: 16px;
	position: absolute;
	z-index: 99;
	width: 100%;
	max-width: 1920px;
}

#subtitle, #subtitle-1, #subtitle-2 {
	top: -36px;
	font-size: 14px;
	transform: translateY(-100%);
	white-space: pre-wrap;
	max-width: 900px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rendered-subtitle{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
  flex-direction: column;
}

.rendered-subtitle > .tooltip-container {
	position: absolute;
	right: -36px;
	top: 4px;
}

.play-subtitle {
	width: 24px;
	height: 24px;
  position: absolute;
	margin-left: 8px;
  margin-top: 2px;
	cursor: pointer;
  right: -32px;
}

#subtitle-1 {
	top: -137px;
	font-size: 16px;
	text-align: center;
}

#subtitle-2 {
	top: -56px;
	font-size: 16px;
	text-align: center;
}

#hide-prompt {
	position: absolute;
	top: -32px;
	background: transparent;
}

#hide-prompt-icon {
	width: 42px;
	height: 24px;
	rotate: -180deg;
	cursor: pointer;
}

#dialog-from {
  z-index: 99;
}

.dialog-conatiner {
	position: absolute;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
	z-index: 999;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

#close-ai-alert-message {
  cursor: pointer;
  font-size: 18px;
}

#enable-advanced-options {
	color: white;
	cursor: pointer;
	font-weight: bold;
	margin-bottom: 8px;
  position: relative;
  z-index: 99999;
}

#challenge-tutorial-button {
  display: none;
  z-index: 999999;
}

.pulse-circle {
  width: 16px;
  height: 16px;
  background: #f73350;
  border-radius: 50%;
  color: #FFF;
  animation: animate-pulse 3s linear infinite;
  cursor: pointer;
  position: absolute;
  z-index: 999;
}

.tutorial-popup-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.tutorial-popup-content {
  margin-bottom: 16px;
}

.tutorial-popup > div > h1 {
  margin: 0;
}

.tutorial-popup {
  background: white;
  width: 500px;
  position: absolute;
  color: #000;
  left: -20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  top: 36px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  display: none;
}

.tutorial-popup:after {
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  background: #fff;
  top: -8px;
  transform: rotate(45deg);
}

@keyframes animate-pulse{
  0%{

    box-shadow: 0 0 0 0 rgba(255, 109, 74,0.7),  0 0 0 0 rgba(255, 109, 74,0.7);
  }
  40%{
    box-shadow: 0 0 0 16px rgba(255, 109, 74,0.0),  0 0 0 0 rgba(255, 109, 74,0.7);
  }
  80%{
    box-shadow: 0 0 0 10px rgba(255, 109, 74,0.0),  0 0 0 10px rgba(255, 109, 74,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(255, 109, 74,0.0),  0 0 0 10px rgba(255, 109, 74,0);
  }
}

.tutorial-button {
  display: none;
  position: absolute;
  padding: 20px;
  z-index: 99;
  align-items: center;
  justify-content: center;
}

#advanced-options {
	display: none;
}

.ai-alert-message {
  display: none;
}

.objectives-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.objectives-container > div {
  max-width: 1920px;
  display: flex;
  margin-top: 98px;
  gap: 16px;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  margin-left: 24px;
  justify-content: end;
  left: 0;
  width: 100%;
}

.objectives-container > div > button {
  z-index: 999;
}

#daily-reward-button {
  display: none;
}

#objectives-button {
  display: none;
}

#objectives-button > img {
  width: 16px;
}

#objectives-modal {
  width: 640px;
}

#objectives-modal > .app-modal {
  padding: 16px;
}

#objectives-modal > .app-modal > h1 {
  margin: 0;
  text-align: center;
  margin-top: -8px;
  margin-bottom: 8px;
}

.challenges-modal-content {
  position: relative;
  width: calc(100% - 80px);
}

.challenges-modal-content > .challenge {
  margin: 16px 0;
}

#community-npcs-button {
  transition: all 1s cubic-bezier(.25,.8,.25,1);
  display: none;
}

#community-npcs-modal {
  max-width: 720px;
}

.community-npcs-tutorial-info {
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0!important;
}

#community-npcs-modal > .app-modal {
  padding: 16px;
}

#community-npcs-modal > .app-modal > h1 {
  margin: 0;
}

.community-npcs-tags {
  position: relative;
}

.community-npcs-tags-scroll {
  position: absolute;
  content: '';
  width: 100px;
  height: 100%;
  right: 0;
  z-index: 9;
  top: 0;
  background: rgb(6, 26, 41);
  background: linear-gradient(90deg, rgba(6, 26, 41, 0) 0%, rgba(6, 26, 41, 0.7567620798319328) 52%, rgba(6, 26, 41, 1) 100%);
}

.community-npcs-tags-content {
  position: relative;
  display: flex;
  gap: 8px;
  overflow: scroll;
}

.community-npcs-tags-content > div {
  white-space: nowrap;
  background: #28283B;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.community-npcs-tags-content > .active {
  background: rgb(97 34 95);
}


.community-npcs-tags-content > .active > ion-icon{
  margin-left: 4px;
  font-size: 20px;
}

.community-npcs-container {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  max-height: 480px;
  min-height: 480px;
  overflow: scroll;
  flex-direction: column;
  display: flex;
  position: relative;
}

.empty-community-npcs {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: column;
}

.empty-community-npcs > h1 {
  font-size: 22px;
}

.community-npcs-container > .community-npcs-item {
  width: 100%;
  border: 2px solid #28283B;
  background: #28283B;
  padding: 16px;
  display: flex;
  border-radius: 16px;
  cursor: pointer;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}

 .community-npcs-container > .selected-community-npcs-item {
  border: 2px solid rgb(255, 64, 254);
}

.community-npcs-container > .disabled-community-npcs-item {
  opacity: .7;
  filter: grayscale(100%);
}

.community-npc-info {
  width: calc(100% - 80px);
}

.community-npc-description {
  padding-right: 8px;
}

.community-npcs-container > .community-npcs-item > img {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  border-radius: 16px;
}

.community-npcs-container > .community-npc-name {
  font-size: 16px;
}

.community-npcs-container > .community-npc-author {
  font-size: 12px;
  color: #666;
}

.community-npc-tags {
  display: flex;
  margin-top: 8px;
  gap: 8px;
  overflow: scroll;
  margin-right: 8px;
}

.community-npc-tags > div {
  padding: 4px 8px;
  border-radius: 12px;
  background: #071929;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.manage-npc-memory {
  padding: 16px 0;
}

.manage-npc-memory > span {
  color: #FFF;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
  border: 1px solid #535353;
  position: relative;
}

.manage-npc-memory > span:before {
  position: absolute;
  content: '';
  width: calc(100% - 16px);
  left: 8px;
  height: 33%;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
  top: 6px;
  border-radius: 4px;
  z-index: 1;
  opacity: .3;
}

.manage-npc-memory > span:hover {
  filter: brightness(2);
}

#npc-memory-modal > .app-modal {
  min-width: 840px;
  max-width: 840px;
}

.npc-memory-modal-content {
  padding: 16px;
}

.npc-memory-list {
  list-style: none;
  padding: 0;
  border: 1px solid #535353;
  border-radius: 8px;
  height: 400px;
  max-height: 400px;
  position: relative;
  overflow: scroll;
}

.npc-memory-list > .unlock-user-npc-memories {
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  margin: 8px 0 1px 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unlock-user-npc-memories > div {
  cursor: pointer;
  padding: 48px;
}

.npc-memory-list > li {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #535353;
}

.npc-memory-progress-bar {
  position: relative;
  border: 1px solid #535353;
  border-radius: 8px;
}

.npc-memory-progress-bar:before {
  position: absolute;
  content: '';
  width: calc(100% - 16px);
  left: 8px;
  height: 33%;
  background: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
  top: 6px;
  border-radius: 4px;
  z-index: 1;
  opacity: .3;
}

.npc-memory-progress-bar > div {
  padding: 6px;
  width: 0%;
  border-radius: 6px;
  transition-delay: 1s;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
  margin: 4px;
  padding: 16px 0;
  position: relative;
  display: flex;
  align-items: center;
}

.npc-memory-progress-bar > div > label {
  position: absolute;
  margin-left: 4px;
  width: 100%;
  opacity: 0;
}

.memory-tip {
  margin-top: 8px;
  margin-left: 16px;
}

.remove-memory {
  cursor: pointer;
  opacity: .6;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.remove-memory:hover {
  opacity: 1;
}

.npc-memory-list > li:last-child {
  border-bottom: 0;
}

.memory-modal-header {
  padding: 16px;
  border-bottom: 1px solid #535353;
  font-size: 24px;
  margin: 0;
}

.clear-memories-actions {
  display: flex;
  justify-content: end;
}

.clear-memories-actions > .clear-memories-button {
  border: solid 1px #dd2726;
  background: transparent;
  color: #dd2726;
  padding: 6px 12px;
  border-radius: 20px;
  position: relative;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.clear-memories-button:hover {
  background: #1f3243;
}

.no-user-npc-memories {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center!important;
  text-align: center;
}

.no-user-npc-memories > div > button {
  padding: 16px;
  margin-top: 16px;
}

.other-game-container {
	position: absolute;
	height: 300px;
	width: 100%;
	bottom: 0;
	display: flex;
	justify-content: center;
}

.other-game-container > .other-game-center {
	height: 300px;
	position: absolute;
	width: 100%;
	max-width: 1920px;
	color: #fff;
}

.other-game-container > .other-game-center > .other-game {
	z-index: 9999;
	position: absolute;
	width: 600px;
	height: 300px;
	margin-left: 20px;
	bottom: -400px;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.other-game-container > .other-game-center > .other-game > .close-modal {
	padding: 16px 32px;
	position: absolute;
	cursor: pointer;
	top: 90px;
	right: 0;
	z-index: 9999;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.other-game-container > .other-game-center > .other-game > img {
	height: 300px;
	position: absolute;
	z-index: 9999;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.other-game-content {
	width: 400px;
	height: 211px;
	z-index: 99;
	position: absolute;
	background: #021124;
	top: 89px;
	left: 199px;
	padding: 16px 16px 16px 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-top-right-radius: 8px;
}

.other-game-content > div > h1, .other-game-content > div > p, .other-game-content > .action-button {
	margin: 0;
}

#objectives {
	transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.challenge {
	height: 64px;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}

.challenges-container {
	position: absolute;
	width: 100%;
	display: none;
	align-items: center;
	justify-content: center;
}

.challenges-container > .challenges-content {
	width: 100%;
	max-width: 1920px;
	position: relative;
	margin-top: 68px;
	margin-left: 16px;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
  z-index: 99;
}

.challenges-container > .challenges-content > h1{
	position: relative;
	margin-bottom: 0;
	color: white;
  z-index: 9;
  margin-top: 0;
}

.challenges-container > .challenges-content .challenge {
	max-width: 380px;
	width: 100%;
	padding: 16px;
	padding-bottom: 24px;
	background: rgba(0,0,0, .4);
	color: #FFF;
	margin-bottom: 8px;
	display: flex;
	position: relative;
	justify-content: space-between;
	z-index: 9;
}

.challenges-hide {
	position: absolute;
	z-index: 9999;
	left: 459px;
	margin-left: 4px;
	top: 43px;
	transform: rotate(-90deg);
	top: 40px;
	z-index: 9;
}

.challenges-content > .side-tooltip > .tooltip {
	transform: rotate(90deg)!important;
	top: 40px!important;
	top: 78px !important;
	margin-left: -31px;
}

.challenges-content > .side-tooltip > .tooltip:after {
	left: -4px;
	bottom: 6px;
}

#hide-challenges-icon {
	height: 32px;
	cursor: pointer;
}

.completed-challenge {
	width: 24px;
	height: 24px;
	background-color: rgba(0,0,0, .4);
  margin: 8px 0;
}

.completed {
	background-image: url('./../images/check.png');
	background-repeat: no-repeat;
  background-position: center;
}

.challenge-label {
	display: flex;
	display: flex;
	width: 100%;
	margin-right: 8px;
  align-items: center;
}

.challenge-label > .challenge-description {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 0 8px;
  width: 100% - 64px;
}

.challenge-bar {
  position: relative;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
  width: 100% - 32px;
  height: 12px;
  bottom: 8px;
  margin-top: 16px;
  border-radius: 8px;
}

.challenge-bar:before {
  position: absolute;
  content: '';
  width: calc(100% - 8px);
  height: 8px;
  top: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
  opacity: .4;
  margin: 0 4px;
  border-radius: 8px;
  z-index: 2;
}

.challenge-bar-value {
	background: #EA38E1;
	height: 100%;
	display: flex;
	justify-content: space-between;
	width: 0%;
	transition: all 1s cubic-bezier(.25,.8,.25,1);
	margin-right: 8px;
}

.challenge-reward {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
	margin-left: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: bold;
	position: absolute;
	right: -84px;
	height: 100%;
	top: 0;
	border-radius: 0;
  width: 78px;
  margin-top: -4px;
  border-radius: 8px;
}

.challenge-reward:before {
  position: absolute;
  content: '';
  width: calc(100% - 8px);
  height: 8px;
  top: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
  opacity: .4;
  margin: 0 4px;
  border-radius: 8px;
  z-index: 2;
}

.challenge-reward-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.challenge-reward-value > img {
	width: 24px;
}

.challenge > div {
	overflow: hidden;
}

.placeholder-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
  overflow: hidden;
}

.placeholder:after {
	position: absolute;
	content: '';
	background: rgba(255, 255, 255, .4);
	margin: 0;
	width: 240%;
	height: 140%;
	top: -17%;
	left: -80%;
	transform: rotate(45deg);
	animation: placeholderAnimate 1.8s ease-out 0s infinite;
	z-index: 9;
}

@keyframes placeholderAnimate {
	0% {
		left: -300%;
	}
	100% {
		left: 200%;
	}
}

.character-profile {
	display: flex;
	position: relative;
  gap: 4px;
}

.character-profile-item {
  position: relative;
	color: #FFF;
	cursor: pointer;
	padding: 8px;
	border-radius: 4px;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 50%;
	text-align: center;
	border: solid 2px #28283B;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  display: flex;
  border-radius: 8px;
  background: #000000;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.09) 100%);
}

.character-profile-item:before {
	position: absolute;
	content: '';
	width: calc(100% - 16px);
	left: 8px;
	height: 33%;
	background: #ffffff;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.33) 100%);
	top: 6px;
	border-radius: 4px;
	z-index: 1;
	opacity: .3;
}

.character-profile-item > ion-icon {
  margin-right: 4px;
}

.character-profile-item-active {
	border: solid 2px #EA38E1;
}

.character-profile-item-male-active {
  color: #005aff;
  border: solid 2px #005aff;
}

.character-profile-item-female-active {
  color: #ff00b7;
  border: solid 2px #ff00b7;
}

.character-profile-item-disabled {
	opacity: .6;
}

.gender-info {
  color: #676767;
  font-size: 10px;
}

.version-value {
  position: absolute;
  z-index: 99999999999;
  color: #FFF;
  right: 0;
  margin: 8px;
  font-weight: bold;
  text-shadow: 0px 2px 16px #000000;
}

.version-value-mobile-app {
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 8px -8;
}

.dialog {
  background: #160818;
  backdrop-filter: blur(.4rem);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 16px;
	position: relative;
	opacity: .7;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.dialog:hover {
  opacity: 1;
}

.dialog-actions {
	display: flex;
  overflow-x: scroll;
	position: relative;
	margin-bottom: 8px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  white-space: nowrap;
}

.dialog-actions-left-button,
.dialog-actions-right-button {
  top: 0;
  background: #071929;
  display: flex;
  padding: 8px;
  position: absolute;
  z-index: 9;
  border-radius: 50%;
  color: #FFF;
  font-size: 19px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.8s cubic-bezier(.25,.8,.25,1);
  margin: 0px -8px;
}

.dialog-actions-right-button {
  right: 0;
 }

.dialog-actions-left-button {
  left: 0;
}

.dialog-actions-left-button:hover,
.dialog-actions-right-button:hover {
  background: #2f4e69;
}

.dialog-actions-scroll ::-webkit-scrollbar {
  display: none;
}

.dialog-actions > .dialog-action {
	color: #FFF;
	cursor: pointer;
	padding: 8px;
	margin-right: 8px;
	border-radius: 4px;
  background: #28283B;
	flex-shrink: 0;
	justify-content: center;
}

.dialog-action-placeholder {
  background: #28283B;
	margin-right: 8px;
	width: 180px;
	height: 34px;
	overflow: hidden;
}

.premium-action-icon {
	width: 16px;
	height: 16px;
}

.dialog-actions > .dialog-premium-action {
	background: rgb(152, 30, 122);
  background: linear-gradient(0deg, rgba(152, 30, 122, 1) 0%, rgba(253, 45, 248, 1) 100%);
}

.dialog-options-container {
  color: #fff;
}

.ai-alert-message {
  background: #4f3a28;
  margin-bottom: 16px;
  padding: 8px;
  border: rgb(255, 236, 153) solid 1px;
  border-radius: 6px;
}

.ai-alert-message > h1 {
  color: rgb(255, 236, 153);
  margin: 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-alert-message > p {
  margin: 0;
}
/*.dialog-overlay {*/
	/*position: absolute;*/
	/*background: rgba(0,0,0,.8);*/
/*}*/

#talk-button, #coming-soon-npc, #door-button {
	display: none;
	position: absolute;
	width: 100%;
	bottom: 124px;
	z-index: 999999;
	justify-content: center;
}

#talk-button > div, #coming-soon-npc  > div, #door-button > div {
	padding: 16px;
	color: #FFF;
	cursor: pointer;
	padding: 16px 24px;
	font-size: 16px;
	margin-right: 8px;
	border-radius: 4px;
  background: #28283B;
	flex-shrink: 0;
	justify-content: center;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.npc-info {
  display: none;
  opacity: 0;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 1;
  color: #fff;
  top: 0;
  flex-direction: column;
  align-items: center;
  transition: all 1s cubic-bezier(.25,.8,.25,1);
}

.npc-info > .npc-info-name {
  font-size: 42px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.npc-info-tags {
  z-index: 999;
  display: flex;
}

.npc-info-tags {
  display: flex;
  width: 100%;
  max-width: 380px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.npc-info-tags > .npc-info-tag {
  padding: 4px 16px;
  background: #28283B;
  border-radius: 50px;
}

.dialog-action-text {
	margin: 8px 0;
	color: #FFF;
}

.switch-container {
	color: white;
	display: flex;
  flex-direction: column;
  align-items: start;
}

.switch-container > .switch-item {
  align-items: center;
  gap: 8px;
  display: flex;
  margin: 0;
}

.switch-settings {
 justify-content: space-between;
}

.switch-container > div {
	margin-left: 8px;
}

#toogle-onomatopoeia-container {
	display: none;
	align-items: center;
  gap: 8px;
}

.switch[type=checkbox]{
	height: 0;
	width: 0;
	padding: 0;
	visibility: hidden;
  position: absolute;
}

.switch-label {
	cursor: pointer;
	text-indent: -9999px;
	width: 50px;
	height: 25px;
	background: grey;
	display: block;
	border-radius: 100px;
	position: relative;
}

.switch-label:after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 90px;
	transition: 0.3s;
}

.switch:checked + label {
	background: #E838DF;
}

.switch:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

.switch-label:active:after {
	width: 25px;
}

.dialog-conatiner > .dialog {
	max-width: 520px;
	width: 100%;
}

.discord-button {
	display: none;
	padding: 8px;
	padding: 8px;
	justify-content: center;
	align-items: center;
	background: transparent;
	border-radius: 4px;
	background: #535fee;
	color: #FFF;
	width: 180px;
	height: 50px;
	margin: 0 16px;
	background: #535fee;
}

.discord-full-text {
	width: 328px;
}

.discord-button > img {
	width: 32px;
	height: 24px;
	margin: 0 8px 0 0;
}

.dialog-conatiner > .dialog > .pressed-button {
	margin-left: 0;
	margin-bottom: 0;
	z-index: 10;
  width: 100%;
}

.dialog-conatiner > .dialog > .pressed-button {
	display: flex;
	justify-content: center;
}

.dialog-conatiner > .dialog > .pressed-button > div {
	margin: 0 4px;
}


.dialog-conatiner > .dialog > .pressed-button > span > div > img {
	width: 16px;
}

.dialog-conatiner > .dialog > .pressed-button > span > div > img {
	width: 16px;
}

.talk-coin-icon {
	width: 16px;
}

#send-message-button > .button-spinner-container {
  position: absolute;
  top: 0;
}

.action-button > ion-icon {
  margin-right: 8px;
}

#custom-action-input {
  margin-top: 8px;
}

textarea:disabled, input:disabled {
	opacity: 0.4;
}

textarea, input:focus {
	outline: none !important;
}

.dialog-input {
  height: auto;
  overflow-y: hidden;
}

.dialog-input-continer {
  position: relative;
}

.dialog-input-continer > span {
  color: #CCC;
  position: absolute;
  right: 0;
  bottom: -10px;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: -10px;
}

.error-message {
	color: #ed0c48;
	margin: 8px 0 0 0;
	text-align: center;
	font-size: 16px;
}

.success-message {
	color: #0dbf0d;
	margin: 8px 0 0 0;
	text-align: center;
	font-size: 16px;
}

.action-button, .secondary-action-button {
	padding: 8px;
	text-transform: uppercase;
	width: 100%;
	color: #fff;
	padding: 16px 0;
	border-radius: 4px;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(255,64,254);
  background: linear-gradient(66deg, rgba(255,64,254,1) 0%, rgba(230,45,162,1) 41%, rgba(230,45,162,1) 49%, rgba(255,64,254,1) 100%);
  background-size: 200% 200%;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.action-button:hover, #verify-account-button:hover {
  animation: gradient-animation 4s ease infinite;
}

.secondary-action-button {
  animation: gradient-animation 4s ease infinite;
  background: transparent;
}

.secondary-action-button:hover {
	filter: brightness(1);
}

.pricing {
  height: calc(100% - 227px);
}

.pricing-action-button {
  margin-top: 8px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 0;
  width: calc(100% - 16px);
  margin-bottom: 16px;
}

.pricing-action-button:disabled {
	filter: grayscale(100%);
	cursor: auto;
}

.unsubscription-button {}

.confirm-modal-title {
	text-align: center;
  text-align: left;
  font-size: 22px;
  font-weight: bold;
}

.confirm-modal-container {
  padding: 16px;
}

#confirm-button-no {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 4px;
}

#confirm-button-yes {
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 4px;
}

.confirm-buttons {
	display: flex;
  justify-content: end;
	margin: 0;
  position: relative;
  margin-top: 16px;
}

#confirm-button-no {
  background:#58980C;
  border-color:#76c91e;
  box-shadow:
    0 0 0 3px #2f5206,
    0 8px 0 0 #2f5206;
}

#confirm-button-no:active {
  transform: translateY(6px);
  box-shadow:
    0 0 0 3px #2f5206,
    inset 0 6px 10px #2f5206;
}

#confirm-button-no::before {
  background: linear-gradient(180deg, rgba(180,220,120,1) 0%, rgba(88,152,12,1) 74%);
}

@media (min-width: 600px) {
  .pricing-confirm-modal.confirm-modal-container {
    max-width: 480px !important;
  }

  .confirm-modal-container.pricing-confirm-modal ~ * {
    max-width: 480px;
  }

  #confirm-modal .pricing-confirm-modal {
    max-width: 480px;
  }

  #confirm-modal:has(.pricing-confirm-modal) .app-modal {
    max-width: 480px;
  }

  /* Layout desktop do auth-modal */
  #auth-modal .auth-modal-layout {
    flex-direction: row;
    height: 100%;
    min-height: 550px;
  }

  #auth-modal .auth-banner {
    width: 45%;
    height: 100%;
    margin-top: 0;
    padding: 48px;
    min-height: 100%;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
  }

  #auth-modal .auth-banner::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  }

  #auth-modal .auth-banner > span {
    display: block;
    font-size: 18px;
    font-weight: 600;
  }

  #auth-modal .auth-banner > img {
    height: 140px;
    object-fit: contain;
  }

  #auth-modal .auth-forms-column {
    width: 55%;
    padding: 32px 24px;
    overflow-y: auto;
  }

  #auth-modal .auth-forms-column .social-login,
  #auth-modal .auth-forms-column .auth-container,
  #auth-modal .auth-forms-column #confirmation-container,
  #auth-modal .auth-forms-column .forget-password-continer {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 8px;
  }

  #auth-modal .auth-app-modal {
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
  }

  #auth-modal .app-modal {
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  }

  #auth-modal #close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 999;
  }
}

.action-button {
	/*margin: 16px 0;*/
}

.window-title {
	color: #fff;
	text-align: center;
	margin-top: 14px;
	font-size: 14px;
	width: 100%;
	position: absolute;
}

.create-account {
	text-align: center;
}

button {
	font-family: 'Play', sans-serif;
	cursor: pointer;
	background: rgb(0,93,255);
	border: 0;
	font-weight: 700;
	font-size: 16px;
	position: relative;
}

.button-icon {
	position: absolute;
	right: 8px;
	top: 16px;
}

button:disabled {
	opacity: 0.4;
}

.pressed-button:disabled {
  opacity: .7;
  background: #bbadbb;
  border: 1px solid #585258;
  box-shadow: 0 5px #585258;
  transition: all .2s cubic-bezier(.25,.8,.25,1);
  filter: grayscale(1);
}

.pressed-button:disabled:active {
  box-shadow: 0 5px #585258;  transition: all .2s cubic-bezier(.25,.8,.25,1);
  transform: translateY(0);
}

#update-button:disabled {
	opacity: 1;
}

#close-button {
	background: transparent;
}

#auth-modal .window-actions {
	z-index: 999;
	right: 8px;
	top: 8px;
}

.hello {
	font-size:;
}

#logout-button {
	position: absolute;
	bottom: 0;
	margin: 8px;
	width: auto;
	background: transparent;
	color: #fff;
  display: none;
  align-items: center;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 99999999999;
}

.play-button {
	background: rgb(36,110,42);
	background: linear-gradient(180deg, rgba(36,110,42,1) 13%, rgba(15,189,77,1) 94%);
}

#forget-password {
  color: rgb(152,30,122);
  margin-top: -4px;
  margin-bottom: 8px;
  font-size: 12px;
  cursor: pointer;
}

.forget-password-continer {
  width: 100%;
  padding: 16px;
  display: none;
}

.forget-password-continer > h2 {
  text-align: center;
}

.terms-and-conditions-link {
	color: rgb(240 58 232);
  cursor: pointer;
}

/*checkbox*/

.input-label {
	margin: 4px 0;
}

.checkbox-container {
	margin-bottom: 8px;
}

.checkbox-container > label {
	margin: 0!important;
}

input[type=checkbox],
input[type=radio] {
    --active: rgb(152,30,122);
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: rgb(152,30,122);
    --border-hover: rgb(152,30,122);
    --background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  input[type=checkbox]:after,
	input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  input[type=checkbox]:checked,
	input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  input[type=checkbox]:disabled,
	input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.4;
  }
  input[type=checkbox]:disabled:checked,
	input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type=checkbox]:disabled + label,
	input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  input[type=checkbox]:hover:not(:checked):not(:disabled),
	input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type=checkbox]:focus,
	input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  input[type=checkbox]:not(.switch),
	input[type=radio]:not(.switch) {
    width: 21px;
  }
  input[type=checkbox]:not(.switch):after,
	input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  input[type=checkbox]:not(.switch):checked,
	input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  input[type=checkbox] + label,
	input[type=radio] + label {
    font-size: 14px;
    line-height: 21px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
		margin: 8px 0;
  }

  input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }

  input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  input[type=checkbox].switch {
    width: 0;
    border-radius: 11px;
  }
  input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }

  input[type=radio] {
    border-radius: 50%;
  }
  input[type=radio]:after {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
  }
  input[type=radio]:checked {
    --s: .5;
  }
}

/*Progress bar*/
.user-progress-bar {
  height: 16px;
  width: 100%;
  position: relative;
  z-index: 999;
	height: 20px!important;
	width: 100%;
  border-radius: 2px;
}

.user-progress-bar .progress {
  position: relative;
  background: #EA38E1!important;
	height: 20px!important;
  transition: all 1.8s cubic-bezier(.25,.8,.25,1);
  border-radius: 2px;
  width: 0;
}

.user-progress-bar .glow {
  width: 40px;
  max-width: 100%;
  height: 100%;
  float: right;
}

.user-progress-bar .glow::before,
.user-progress-bar .glow::after {
  content: "";
  display: block;
  position: relative;
  border-radius: 0px 2px 2px 0px;
}

.user-progress-bar .glow::before {
  background: transparent;
  height: 100%;
  box-shadow: 0px 0px 32px #EA38E1, 0px 0px 32px #EA38E1;
  z-index: -5;
}

.progress-label {
  color: white;
  text-shadow: 0px 0px 2px #EA38E1;
  font-size: 24px;
	height: 20px;
}

@keyframes label {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}

.party, .daily-reward-party {
  position: relative;
  cursor: pointer;
	z-index: 999;
  transform-style: preserve-3d;
}

.daily-reward-party, .party:hover, .daily-reward-party, .party:focus {
  background-position: 0 10px;
}

@-webkit-keyframes bounce {
  0% {
    transform: scale(1,1) translate(0px, 0px);
  }

  30%{
    transform: scale(1,0.8) translate(0px, 10px);
  }

  75%{
    transform: scale(1,1.1) translate(0px, -25px);
  }

 100% {
    transform: scale(1,1) translate(0px, 0px);
  }
}

.bounce {
  animation: bounce 0.75s;
}

.bounce1 {
  animation: bounce 0.75s;
	animation-delay: .5s;
}

.bounce2 {
  animation: bounce 0.75s;
	animation-delay: .8s;
}

.bounce3 {
  animation: bounce 0.75s;
	animation-delay: 1.2s;
}

.bounce4 {
  animation: bounce 0.75s;
	animation-delay: 2s;
}

.discord-bounce {
  animation: bounce 0.75s;
	animation-delay: 10s;
}

.confeti {
  position: absolute;
  inset: 50%;
  opacity: 0;
  transform-style: preserve-3d;
  z-index: 9999999;
}

.confeti > span {
  width: var(--confeti-size);
  aspect-ratio: 1;
  position: absolute;
  background: hsl(var(--hue), 100%, 50%);
  border-radius: var(--shape);
}
.confeti > span:nth-child(1) {
  --shape: -46.7318712964vw;
  --hue: 67;
  --confeti-size: 10px;
  --offsetY: 7.5vh;
  /*    --offsetX: 37vw; */
  --offsetX: -22vw;
  --offsetZ: -44px;
  --spin: 8turn;
}
.confeti > span:nth-child(2) {
  --shape: -18.3996518672vw;
  --hue: -143;
  --confeti-size: 20px;
  --offsetY: -17.5vh;
  /*    --offsetX: -5vw; */
  --offsetX: -21vw;
  --offsetZ: 47px;
  --spin: 5turn;
}
.confeti > span:nth-child(3) {
  --shape: 14.2611629249vw;
  --hue: -94;
  --confeti-size: 7px;
  --offsetY: 0.5vh;
  /*    --offsetX: 19vw; */
  --offsetX: -28vw;
  --offsetZ: -9px;
  --spin: 10turn;
}
.confeti > span:nth-child(4) {
  --shape: 28.9149339773vw;
  --hue: -46;
  --confeti-size: 15px;
  --offsetY: -4.5vh;
  /*    --offsetX: -25vw; */
  --offsetX: 13vw;
  --offsetZ: -98px;
  --spin: 3turn;
}
.confeti > span:nth-child(5) {
  --shape: -29.738498434vw;
  --hue: 104;
  --confeti-size: 6px;
  --offsetY: -11.5vh;
  /*    --offsetX: -23vw; */
  --offsetX: -32vw;
  --offsetZ: 109px;
  --spin: 6turn;
}
.confeti > span:nth-child(6) {
  --shape: 21.2468336152vw;
  --hue: 119;
  --confeti-size: 11px;
  --offsetY: 8.5vh;
  /*    --offsetX: -27vw; */
  --offsetX: -33vw;
  --offsetZ: 196px;
  --spin: 10turn;
}
.confeti > span:nth-child(7) {
  --shape: -4.4765858946vw;
  --hue: 123;
  --confeti-size: 17px;
  --offsetY: 16.5vh;
  /*    --offsetX: 37vw; */
  --offsetX: -20vw;
  --offsetZ: -138px;
  --spin: 1turn;
}
.confeti > span:nth-child(8) {
  --shape: 29.7339573473vw;
  --hue: -11;
  --confeti-size: 4px;
  --offsetY: -16.5vh;
  /*    --offsetX: -26vw; */
  --offsetX: -20vw;
  --offsetZ: 61px;
  --spin: 1turn;
}
.confeti > span:nth-child(9) {
  --shape: -49.9284080345vw;
  --hue: -59;
  --confeti-size: 10px;
  --offsetY: 14.5vh;
  /*    --offsetX: 14vw; */
  --offsetX: -21vw;
  --offsetZ: -114px;
  --spin: 10turn;
}
.confeti > span:nth-child(10) {
  --shape: 15.1884097521vw;
  --hue: -40;
  --confeti-size: 14px;
  --offsetY: -12.5vh;
  /*    --offsetX: -18vw; */
  --offsetX: -30vw;
  --offsetZ: -44px;
  --spin: 2turn;
}
.confeti > span:nth-child(11) {
  --shape: 3.5305717046vw;
  --hue: -93;
  --confeti-size: 11px;
  --offsetY: -13.5vh;
  /*    --offsetX: -14vw; */
  --offsetX: 23vw;
  --offsetZ: 161px;
  --spin: 5turn;
}
.confeti > span:nth-child(12) {
  --shape: -19.1464099613vw;
  --hue: 18;
  --confeti-size: 19px;
  --offsetY: 14.5vh;
  /*    --offsetX: 10vw; */
  --offsetX: -20vw;
  --offsetZ: 162px;
  --spin: 8turn;
}
.confeti > span:nth-child(13) {
  --shape: 38.0964450364vw;
  --hue: -50;
  --confeti-size: 9px;
  --offsetY: 5.5vh;
  /*    --offsetX: 32vw; */
  --offsetX: -18vw;
  --offsetZ: -220px;
  --spin: 5turn;
}
.confeti > span:nth-child(14) {
  --shape: 0.7231166245vw;
  --hue: 154;
  --confeti-size: 3px;
  --offsetY: -2.5vh;
  /*    --offsetX: 8vw; */
  --offsetX: -15vw;
  --offsetZ: -179px;
  --spin: 10turn;
}
.confeti > span:nth-child(15) {
  --shape: 25.4474783781vw;
  --hue: -97;
  --confeti-size: 5px;
  --offsetY: 6.5vh;
  /*    --offsetX: -34vw; */
  --offsetX: -19vw;
  --offsetZ: 92px;
  --spin: 10turn;
}
.confeti > span:nth-child(16) {
  --shape: -8.7107903191vw;
  --hue: 108;
  --confeti-size: 16px;
  --offsetY: 2.5vh;
  /*    --offsetX: 17vw; */
  --offsetX: 18vw;
  --offsetZ: 55px;
  --spin: 9turn;
}
.confeti > span:nth-child(17) {
  --shape: -16.6748548092vw;
  --hue: -119;
  --confeti-size: 14px;
  --offsetY: 15.5vh;
  /*    --offsetX: -13vw; */
  --offsetX: 33vw;
  --offsetZ: 15px;
  --spin: 10turn;
}
.confeti > span:nth-child(18) {
  --shape: -33.2824333221vw;
  --hue: 115;
  --confeti-size: 3px;
  --offsetY: 4.5vh;
  /*    --offsetX: -32vw; */
  --offsetX: 8vw;
  --offsetZ: 188px;
  --spin: 9turn;
}
.confeti > span:nth-child(19) {
  --shape: 19.1034734453vw;
  --hue: -69;
  --confeti-size: 14px;
  --offsetY: 9.5vh;
  /*    --offsetX: -19vw; */
  --offsetX: -2vw;
  --offsetZ: -61px;
  --spin: 1turn;
}
.confeti > span:nth-child(20) {
  --shape: 29.2546576064vw;
  --hue: -170;
  --confeti-size: 4px;
  --offsetY: 4.5vh;
  /*    --offsetX: -19vw; */
  --offsetX: -10vw;
  --offsetZ: -124px;
  --spin: 7turn;
}
.confeti > span:nth-child(21) {
  --shape: -36.8489465651vw;
  --hue: -24;
  --confeti-size: 20px;
  --offsetY: -10.5vh;
  /*    --offsetX: -7vw; */
  --offsetX: -3vw;
  --offsetZ: -92px;
  --spin: 3turn;
}
.confeti > span:nth-child(22) {
  --shape: 30.6213904883vw;
  --hue: -69;
  --confeti-size: 2px;
  --offsetY: 16.5vh;
  /*    --offsetX: 4vw; */
  --offsetX: 18vw;
  --offsetZ: -51px;
  --spin: 5turn;
}
.confeti > span:nth-child(23) {
  --shape: 29.0887892286vw;
  --hue: 80;
  --confeti-size: 17px;
  --offsetY: -8.5vh;
  /*    --offsetX: -32vw; */
  --offsetX: 36vw;
  --offsetZ: 223px;
  --spin: 7turn;
}
.confeti > span:nth-child(24) {
  --shape: -39.882146378vw;
  --hue: -138;
  --confeti-size: 18px;
  --offsetY: -12.5vh;
  /*    --offsetX: -30vw; */
  --offsetX: 0vw;
  --offsetZ: -153px;
  --spin: 9turn;
}
.confeti > span:nth-child(25) {
  --shape: 43.7512631404vw;
  --hue: -131;
  --confeti-size: 3px;
  --offsetY: 10.5vh;
  /*    --offsetX: -22vw; */
  --offsetX: -33vw;
  --offsetZ: -200px;
  --spin: 2turn;
}
.confeti > span:nth-child(26) {
  --shape: 0.3281831816vw;
  --hue: 81;
  --confeti-size: 10px;
  --offsetY: 1.5vh;
  /*    --offsetX: -13vw; */
  --offsetX: -35vw;
  --offsetZ: 76px;
  --spin: 1turn;
}
.confeti > span:nth-child(27) {
  --shape: 36.2222293433vw;
  --hue: -167;
  --confeti-size: 6px;
  --offsetY: 3.5vh;
  /*    --offsetX: 24vw; */
  --offsetX: 6vw;
  --offsetZ: -214px;
  --spin: 8turn;
}
.confeti > span:nth-child(28) {
  --shape: -7.3682562597vw;
  --hue: -56;
  --confeti-size: 8px;
  --offsetY: 12.5vh;
  /*    --offsetX: 3vw; */
  --offsetX: -34vw;
  --offsetZ: 59px;
  --spin: 9turn;
}
.confeti > span:nth-child(29) {
  --shape: -18.0415273378vw;
  --hue: -60;
  --confeti-size: 5px;
  --offsetY: 16.5vh;
  /*    --offsetX: -30vw; */
  --offsetX: -3vw;
  --offsetZ: -248px;
  --spin: 4turn;
}
.confeti > span:nth-child(30) {
  --shape: 2.2629347092vw;
  --hue: -44;
  --confeti-size: 18px;
  --offsetY: 8.5vh;
  /*    --offsetX: -28vw; */
  --offsetX: -23vw;
  --offsetZ: -172px;
  --spin: 4turn;
}
.confeti > span:nth-child(31) {
  --shape: -47.7673529352vw;
  --hue: -76;
  --confeti-size: 17px;
  --offsetY: -13.5vh;
  /*    --offsetX: -39vw; */
  --offsetX: 13vw;
  --offsetZ: -64px;
  --spin: 1turn;
}
.confeti > span:nth-child(32) {
  --shape: 22.7872679602vw;
  --hue: 151;
  --confeti-size: 7px;
  --offsetY: -12.5vh;
  /*    --offsetX: 28vw; */
  --offsetX: -40vw;
  --offsetZ: 32px;
  --spin: 10turn;
}
.confeti > span:nth-child(33) {
  --shape: 5.2090772537vw;
  --hue: -101;
  --confeti-size: 17px;
  --offsetY: -9.5vh;
  /*    --offsetX: -1vw; */
  --offsetX: 2vw;
  --offsetZ: 201px;
  --spin: 10turn;
}
.confeti > span:nth-child(34) {
  --shape: 17.4968410371vw;
  --hue: -160;
  --confeti-size: 20px;
  --offsetY: -14.5vh;
  /*    --offsetX: -21vw; */
  --offsetX: -21vw;
  --offsetZ: -80px;
  --spin: 7turn;
}
.confeti > span:nth-child(35) {
  --shape: 14.5680556586vw;
  --hue: 124;
  --confeti-size: 19px;
  --offsetY: -13.5vh;
  /*    --offsetX: -8vw; */
  --offsetX: -3vw;
  --offsetZ: 248px;
  --spin: 4turn;
}
.confeti > span:nth-child(36) {
  --shape: -1.7054911151vw;
  --hue: 159;
  --confeti-size: 10px;
  --offsetY: 0.5vh;
  /*    --offsetX: 26vw; */
  --offsetX: 16vw;
  --offsetZ: -235px;
  --spin: 6turn;
}
.confeti > span:nth-child(37) {
  --shape: -24.7994498674vw;
  --hue: -149;
  --confeti-size: 16px;
  --offsetY: 3.5vh;
  /*    --offsetX: 9vw; */
  --offsetX: -17vw;
  --offsetZ: 117px;
  --spin: 1turn;
}
.confeti > span:nth-child(38) {
  --shape: -46.6450346458vw;
  --hue: -101;
  --confeti-size: 14px;
  --offsetY: -0.5vh;
  /*    --offsetX: -22vw; */
  --offsetX: -35vw;
  --offsetZ: 16px;
  --spin: 7turn;
}
.confeti > span:nth-child(39) {
  --shape: -37.4091060823vw;
  --hue: 149;
  --confeti-size: 9px;
  --offsetY: -14.5vh;
  /*    --offsetX: 10vw; */
  --offsetX: -30vw;
  --offsetZ: -95px;
  --spin: 2turn;
}
.confeti > span:nth-child(40) {
  --shape: 7.649989603vw;
  --hue: -23;
  --confeti-size: 19px;
  --offsetY: 14.5vh;
  /*    --offsetX: -20vw; */
  --offsetX: -25vw;
  --offsetZ: -136px;
  --spin: 8turn;
}
.confeti > span:nth-child(41) {
  --shape: -20.5133386787vw;
  --hue: 121;
  --confeti-size: 14px;
  --offsetY: 13.5vh;
  /*    --offsetX: -21vw; */
  --offsetX: -11vw;
  --offsetZ: -141px;
  --spin: 6turn;
}
.confeti > span:nth-child(42) {
  --shape: 6.4980085727vw;
  --hue: -31;
  --confeti-size: 7px;
  --offsetY: 16.5vh;
  /*    --offsetX: 29vw; */
  --offsetX: 11vw;
  --offsetZ: -173px;
  --spin: 9turn;
}
.confeti > span:nth-child(43) {
  --shape: 25.1710299772vw;
  --hue: 61;
  --confeti-size: 12px;
  --offsetY: -8.5vh;
  /*    --offsetX: 19vw; */
  --offsetX: 19vw;
  --offsetZ: 199px;
  --spin: 8turn;
}
.confeti > span:nth-child(44) {
  --shape: 46.9658152539vw;
  --hue: -27;
  --confeti-size: 10px;
  --offsetY: 11.5vh;
  /*    --offsetX: -31vw; */
  --offsetX: -6vw;
  --offsetZ: -46px;
  --spin: 3turn;
}
.confeti > span:nth-child(45) {
  --shape: 34.1917506068vw;
  --hue: 63;
  --confeti-size: 5px;
  --offsetY: -15.5vh;
  /*    --offsetX: -37vw; */
  --offsetX: 37vw;
  --offsetZ: -92px;
  --spin: 2turn;
}
.confeti > span:nth-child(46) {
  --shape: -11.4631119741vw;
  --hue: -10;
  --confeti-size: 8px;
  --offsetY: -4.5vh;
  /*    --offsetX: 33vw; */
  --offsetX: 27vw;
  --offsetZ: -87px;
  --spin: 3turn;
}
.confeti > span:nth-child(47) {
  --shape: -27.238365329vw;
  --hue: 82;
  --confeti-size: 18px;
  --offsetY: -9.5vh;
  /*    --offsetX: 35vw; */
  --offsetX: 17vw;
  --offsetZ: -50px;
  --spin: 7turn;
}
.confeti > span:nth-child(48) {
  --shape: -6.9630509574vw;
  --hue: -72;
  --confeti-size: 1px;
  --offsetY: -9.5vh;
  /*    --offsetX: 16vw; */
  --offsetX: -30vw;
  --offsetZ: -218px;
  --spin: 8turn;
}
.confeti > span:nth-child(49) {
  --shape: 47.2811964944vw;
  --hue: 146;
  --confeti-size: 15px;
  --offsetY: 4.5vh;
  /*    --offsetX: -1vw; */
  --offsetX: 27vw;
  --offsetZ: -126px;
  --spin: 10turn;
}
.confeti > span:nth-child(50) {
  --shape: 34.6214395452vw;
  --hue: 49;
  --confeti-size: 16px;
  --offsetY: -8.5vh;
  /*    --offsetX: -5vw; */
  --offsetX: -40vw;
  --offsetZ: -132px;
  --spin: 5turn;
}

.explosion {
  -webkit-animation: confetiSettle 5s;
          animation: confetiSettle 5s;
	animation-delay: 0.8s;
}

.explosion > span {
  -webkit-animation: confetiSpread 10s cubic-bezier(0, 1.31, 1, 1);
          animation: confetiSpread 10s cubic-bezier(0, 1.31, 1, 1);

			animation-delay: 0.8s;
}

@-webkit-keyframes confetiSpread {
  25% {
    translate: 0 -35vh;
  }
  100% {
    translate: 0 -35vh;
    transform: translateX(var(--offsetX)) translateY(var(--offsetY)) translateZ(var(--offsetZ)) rotateX(var(--spin));
  }
}

@keyframes confetiSpread {
  25% {
    translate: 0 -35vh;
  }
  100% {
    translate: 0 -35vh;
    transform: translateX(var(--offsetX)) translateY(var(--offsetY)) translateZ(var(--offsetZ)) rotateX(var(--spin));
  }
}
@-webkit-keyframes confetiSettle {
  0%, 70% {
    opacity: 1;
  }
  100% {
    transform: translateY(50vh);
    opacity: 0;
  }
}
@keyframes confetiSettle {
  0%, 70% {
    opacity: 1;
  }
  100% {
    transform: translateY(50vh);
    opacity: 0;
  }
}

.spinner-container {
	display: none;
  background: rgba(0, 0, 0, .8);
	z-index: 9999999999999;
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.spinner-container-no-background {
  background: #061929;
}

.spinner {
  position: relative;
	width: 52px;
	padding-top: 40px;
	-webkit-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left: 6px solid rgba(0, 174, 239, 0.15);
  border-right: 6px solid rgba(0, 174, 239, 0.15);
  border-bottom: 6px solid rgba(0, 174, 239, 0.15);
	border-top: 6px solid rgb(239 0 216 / 80%);
	border-radius: 50%;
}

.spinner-message {
	color: white;
	position: absolute;
	margin-top: 120px;
	text-align: center;
}

.button-spinner-container {
	height: 18px;
}

.pressed-button > .button-spinner-container {
  margin-top: -32px;
  position: absolute;
}

.button-spinner-container > .spinner {
	scale: .5;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -26px;
	border-left: 6px solid #28283B;
  border-right: 6px solid #28283B;
  border-bottom: 6px solid #28283B;
	border-top: 6px solid rgb(239 0 216 / 80%);
}

.splash-spinner > .spinner {
	scale: .5;
	position: absolute;
  margin-top: 280px;
	left: 50%;
	margin-left: -26px;
	border-left: 6px solid #790a4f;
  border-right: 6px solid #790a4f;
  border-bottom: 6px solid #790a4f;
	border-top: 6px solid #FFF;
}

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

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


@media only screen and (max-width: 599px) {
	.splash-image-container > img {
		width: 80%;
		object-fit: cover;
	}

	.made-with-unity-container > img {
    width: 40%;
    object-fit: cover;
	}

  .splash-spinner {
    margin-top: -40px;
  }

  .made-with-unity-container {
    margin-top: 100px;
  }

  .mobile-only {
		display: flex;
	}

	.desktop-only {
		display: none!important;
	}

	.spinner-message {
		margin-top: 160px;
		padding: 0 16px;
		font-size: 12px;
	}

	.auth-overlay {
		width: 50%;
		height: 100%;
		display: none;
	}

	.auth-app-modal {
		width: 100%;
		height: 100%;
    overflow: scroll;
	}

	#auth-modal {
		width: 100%;
		height: 100%;
	}

	#auth-modal .auth-modal-layout {
		flex-direction: column;
		height: auto;
		min-height: auto;
	}

	#auth-modal .auth-banner {
		width: 100%;
		height: auto;
		margin-top: -32px;
		padding: 16px 0;
		min-height: 200px;
		border-radius: 0;
	}

	#auth-modal .auth-banner-video {
		border-radius: 0;
	}

	#auth-modal .auth-banner > img {
		height: 108px;
	}

	#auth-modal .auth-forms-column {
		width: 100%;
		padding: 8px;
	}

	#auth-modal .app-modal {
		height: 100%;
		border-radius: 0;
	}

  #map-modal {
    backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  }

  .notification-container {
    width: calc(100vw - 60px);
  }

  #open-map {
    padding: 12px;
    margin: 0;
    margin-left: 8px;
  }

  #open-map > ion-icon {
    display: none;
  }

  .create-npc-header {
    bottom: 60px;
  }

  .header-icon {
    margin: 0 0 0 8px;
  }

  .objectives-container > div {
    margin-left: 8px;
  }

  #open-notification {
    margin-right: 16px;
  }

  .community-npcs-container {
    min-height: calc(100dvh -  216px);
    max-height: calc(100dvh -  216px);
    height: calc(100dvh -  216px);
  }

  .location-list {
    flex-direction: column;
  }

  .location-list > .location-item > img {
    width: 180px;
    height: 180px;
    filter: brightness(1);
  }

  .location-list > .location-item:hover > .location-item-name {
    margin-top: 0;
    scale: 1;
  }

  .location-list > .location-item:hover > img {
    scale: 1;
    filter: brightness(1);
  }

  .location-list > .location-item > .location-item-name {
    color: #fff;
  }

  .you-are-here-pin > div {
    margin-top: 124px;
  }

  .location-list > .location-item-selected > img {
    filter: brightness(.5);
  }

  .location-list > .location-item {
    filter: brightness(1);
  }

	.auth-container {
		width: 100%;
		margin: 0;
	}

	.social-login {
		width: 100%;
	}

	.app-modal {
		width: 100%;
		height: 100%;
	}

  .modal-container {
    width: 100%!important;
    height: 100%!important;
    top: 0;
    left: 0;
  }

  .modal-container > .app-modal {
    height: 100%!important;
    border-radius: 0;
  }

  #npc-memory-modal > .app-modal {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
  }

  .npc-memory-list {
    min-height: calc(100vh - 252px);
    min-height: calc(100vh - 252px);
    height: calc(100vh - 252px);
  }

  #confirm-modal > .app-modal {
		width: auto!important;
		height: auto!important;
  }

	#reward-modal > .app-modal {
		height: auto!important;
	}

  #player-modal > .app-modal {
    height: auto!important;
    padding: 0!important;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #player-modal > .app-modal > div {
    padding-bottom: 24px;
    margin: 16px 16px 0 16px;
  }

  .congratulations-image {
    top: 50%!important;
    margin-left: 54px;
    margin-top: -291px !important;
  }

	.secondary-text {
		text-align: center;
	}

	.privacy-terms-link > div:first-child {
		display: none;
	}

	.privacy-terms-link > div:last-child {
		width: 100%;
	}

	.app-modal > .app-modal-header {
		padding: 0 42px;
	}

	.header-container > .header {
    padding: 8px;
  }

  .pressed-button {
    padding: 12px;
  }

	.header-container > .header > div > button {
    padding: 12px 32px;
  }

	#pricing-modal > .app-modal {
		height: 100%;
		width: 100%;
	}

	#close-pricing {
		margin-top: 0;
	}

	.pricing {
		display: block;
		overflow: scroll;
		position: relative;
	}

	.pricing > .pricing-item {
		width: calc(100% - 32px);
		margin: 16px;
		height: auto;
    z-index: 999;
    padding-bottom: 16px;
    padding-top: 16px;
	}

	.pricing-item:hover {
		scale: 1;
    z-index: 99;
    animation: none;
	}

  .pricing-action-button {
    margin-top: 32px;
    margin-bottom: 0px;
  }

	#free-plan {
		padding-bottom: 16px;
	}

	.pricing-top-overlay {
		display: block;
		width: 100%;
		height: 35px;
		left: 0;
		content: '';
		position: absolute;
		z-index: 99999;
		background: linear-gradient(0deg, rgba(22, 8, 24, 0) 0%, rgba(22, 8, 24, 0.7567620798319328) 52%, rgba(22, 8, 24, 1) 100%);
    margin-top: -2px;
	}

	.pricing-bottom-overlay {
		display: block;
		width: 100%;
		height: 33px;
		left: 0;
		margin-top: -31px;
		content: '';
		position: absolute;
		z-index: 99999999;
    background: linear-gradient(180deg, rgba(22, 8, 24, 0) 0%, rgba(22, 8, 24, 0.7567620798319328) 52%, rgba(22, 8, 24, 1) 100%);;
	}

  .credits-message {
		z-index: 99999999;
  }

  .app-modal-header {
		font-size: 16px;
	}

	.rendered-subtitle > span:first-of-type {
		font-size: 11px;
	}

	.rendered-subtitle > span:last {
		font-size: 14px;
	}

	#subtitle {
		padding: 0 48px 0 16px;
	}

  .current-subtitle {
    text-align: left;
  }

	#scene-description {
		font-size: 11px;
    margin-top: 52px;
    overflow: hidden;
	}

	.header-container {
		padding: 8px 0;
	}

	.attribute-name {
		font-size: 14px!important;
	}

	#objectives {
		font-size: 18px;
	}

	.challenges-container > .challenges-content {
		margin-left: 8px!important;
		margin-top: 62px;
	}

	.challenges-container > .challenges-content .challenge {
		padding: 8px;
		max-width: 60%;
	}

	.completed-challenge {
		width: 16px;
		height: 16px;
	}

	.challenge-label > div {
		font-size: 12px;
	}

	.completed {
		background-size: 10px;
	}

	.challenge-reward-value {
		font-size: 8px;
	}

	.challenge {
		height: auto;
	}

	.challenges-hide {
    left: calc(58% + 82px);
		top: 26px;
		z-index: 10;
	}

	.tooltip {
		display: none!important;
	}

	.challenge-reward {
		width: 64px;
		right: -74px;
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
	}

	.challenge-reward-value > img {
		display: none;
	}

	#hide-challenges-icon {
		height: 24px;
	}

	#progress-container {
    top: 216px;
	}

	.progress-label {
		font-size: 14px;
	}

	.user-progress-bar .progress {
		height: 12px!important;
    margin: 0!important;
	}

	#progress-container > div > div {
		width: 112px;
    display: flex;
    flex-direction: column;
	}

  .xp-bar-value {
    height: 14px;
  }

  .xp-bar-container {
    width: 100%;
    max-width: 100%;
    margin: 92px 0 0 0;
  }

  .xp-bar-container > .xp-bar {
    width: 100%;
    left: 0;
    margin: 0 8px 0 0;
  }

  .xp-bar-container > .xp-bar > div {
    height: 20px;
  }

  .xp-bar-value > span {
    width: 32px;
    height: 32px;
  }

	.user-progress-bar {
    height: 12px;
    margin-top: 0!important;
    margin: 0!important;
	}

	.dialog-actions > .dialog-action {
		font-size: 12px;
		padding: 6px 12px;
	}

  .dialog-actions-left-button,
  .dialog-actions-right-button {
     margin-top: -4px;
  }

 .premium-action-icon {
    margin-top: -5px;
    margin-right: 4px;
	}

	.dialog-actions > .dialog-premium-action {
		display: flex;
    align-items: center;
	}

	#talk-button {
		bottom: 265px;
		font-size: 12px;
		padding: 12px 18px;
	}

  .npc-info {
    top: 153px;
    scale: .8;
  }

	.npc-description {
		font-size: 10px;
		max-width: 45%;
		position: absolute;
		left: 0;
		margin-left: 0;
	}

	.npc-description-content {
		margin: 24px 8px 0 8px;
	}

	.npc-name {
		font-size: 14px;
	}

	.dialog-conatiner > .dialog {
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
}