:root {
  --header: 60px;
  --menu: 55px;
  --footer: 50px;
  --space: 12px;
  --radius: 0.5rem;
  --size: 38px;
  --mobile: 576px;
}
.mt-0 {
  margin-top: calc(var(--space) * 0);
}
.mb-0 {
  margin-bottom: calc(var(--space) * 0);
}
.ml-0 {
  margin-left: calc(var(--space) * 0);
}
.mr-0 {
  margin-right: calc(var(--space) * 0);
}
.my-0 {
  margin-top: calc(var(--space) * 0);
  margin-bottom: calc(var(--space) * 0);
}
.mx-0 {
  margin-left: calc(var(--space) * 0);
  margin-right: calc(var(--space) * 0);
}
.ma-0 {
  margin: calc(var(--space) * 0);
}
.pt-0 {
  padding-top: calc(var(--space) * 0);
}
.pb-0 {
  padding-bottom: calc(var(--space) * 0);
}
.pl-0 {
  padding-left: calc(var(--space) * 0);
}
.pr-0 {
  padding-right: calc(var(--space) * 0);
}
.py-0 {
  padding-top: calc(var(--space) * 0);
  padding-bottom: calc(var(--space) * 0);
}
.px-0 {
  padding-left: calc(var(--space) * 0);
  padding-right: calc(var(--space) * 0);
}
.pa-0 {
  padding: calc(var(--space) * 0);
}
.mt-1 {
  margin-top: calc(var(--space) * 0.5);
}
.mb-1 {
  margin-bottom: calc(var(--space) * 0.5);
}
.ml-1 {
  margin-left: calc(var(--space) * 0.5);
}
.mr-1 {
  margin-right: calc(var(--space) * 0.5);
}
.my-1 {
  margin-top: calc(var(--space) * 0.5);
  margin-bottom: calc(var(--space) * 0.5);
}
.mx-1 {
  margin-left: calc(var(--space) * 0.5);
  margin-right: calc(var(--space) * 0.5);
}
.ma-1 {
  margin: calc(var(--space) * 0.5);
}
.pt-1 {
  padding-top: calc(var(--space) * 0.5);
}
.pb-1 {
  padding-bottom: calc(var(--space) * 0.5);
}
.pl-1 {
  padding-left: calc(var(--space) * 0.5);
}
.pr-1 {
  padding-right: calc(var(--space) * 0.5);
}
.py-1 {
  padding-top: calc(var(--space) * 0.5);
  padding-bottom: calc(var(--space) * 0.5);
}
.px-1 {
  padding-left: calc(var(--space) * 0.5);
  padding-right: calc(var(--space) * 0.5);
}
.pa-1 {
  padding: calc(var(--space) * 0.5);
}
.mt-2 {
  margin-top: calc(var(--space) * 1);
}
.mb-2 {
  margin-bottom: calc(var(--space) * 1);
}
.ml-2 {
  margin-left: calc(var(--space) * 1);
}
.mr-2 {
  margin-right: calc(var(--space) * 1);
}
.my-2 {
  margin-top: calc(var(--space) * 1);
  margin-bottom: calc(var(--space) * 1);
}
.mx-2 {
  margin-left: calc(var(--space) * 1);
  margin-right: calc(var(--space) * 1);
}
.ma-2 {
  margin: calc(var(--space) * 1);
}
.pt-2 {
  padding-top: calc(var(--space) * 1);
}
.pb-2 {
  padding-bottom: calc(var(--space) * 1);
}
.pl-2 {
  padding-left: calc(var(--space) * 1);
}
.pr-2 {
  padding-right: calc(var(--space) * 1);
}
.py-2 {
  padding-top: calc(var(--space) * 1);
  padding-bottom: calc(var(--space) * 1);
}
.px-2 {
  padding-left: calc(var(--space) * 1);
  padding-right: calc(var(--space) * 1);
}
.pa-2 {
  padding: calc(var(--space) * 1);
}
.mt-3 {
  margin-top: calc(var(--space) * 1.5);
}
.mb-3 {
  margin-bottom: calc(var(--space) * 1.5);
}
.ml-3 {
  margin-left: calc(var(--space) * 1.5);
}
.mr-3 {
  margin-right: calc(var(--space) * 1.5);
}
.my-3 {
  margin-top: calc(var(--space) * 1.5);
  margin-bottom: calc(var(--space) * 1.5);
}
.mx-3 {
  margin-left: calc(var(--space) * 1.5);
  margin-right: calc(var(--space) * 1.5);
}
.ma-3 {
  margin: calc(var(--space) * 1.5);
}
.pt-3 {
  padding-top: calc(var(--space) * 1.5);
}
.pb-3 {
  padding-bottom: calc(var(--space) * 1.5);
}
.pl-3 {
  padding-left: calc(var(--space) * 1.5);
}
.pr-3 {
  padding-right: calc(var(--space) * 1.5);
}
.py-3 {
  padding-top: calc(var(--space) * 1.5);
  padding-bottom: calc(var(--space) * 1.5);
}
.px-3 {
  padding-left: calc(var(--space) * 1.5);
  padding-right: calc(var(--space) * 1.5);
}
.pa-3 {
  padding: calc(var(--space) * 1.5);
}
.mt-4 {
  margin-top: calc(var(--space) * 2);
}
.mb-4 {
  margin-bottom: calc(var(--space) * 2);
}
.ml-4 {
  margin-left: calc(var(--space) * 2);
}
.mr-4 {
  margin-right: calc(var(--space) * 2);
}
.my-4 {
  margin-top: calc(var(--space) * 2);
  margin-bottom: calc(var(--space) * 2);
}
.mx-4 {
  margin-left: calc(var(--space) * 2);
  margin-right: calc(var(--space) * 2);
}
.ma-4 {
  margin: calc(var(--space) * 2);
}
.pt-4 {
  padding-top: calc(var(--space) * 2);
}
.pb-4 {
  padding-bottom: calc(var(--space) * 2);
}
.pl-4 {
  padding-left: calc(var(--space) * 2);
}
.pr-4 {
  padding-right: calc(var(--space) * 2);
}
.py-4 {
  padding-top: calc(var(--space) * 2);
  padding-bottom: calc(var(--space) * 2);
}
.px-4 {
  padding-left: calc(var(--space) * 2);
  padding-right: calc(var(--space) * 2);
}
.pa-4 {
  padding: calc(var(--space) * 2);
}
.mt-5 {
  margin-top: calc(var(--space) * 2.5);
}
.mb-5 {
  margin-bottom: calc(var(--space) * 2.5);
}
.ml-5 {
  margin-left: calc(var(--space) * 2.5);
}
.mr-5 {
  margin-right: calc(var(--space) * 2.5);
}
.my-5 {
  margin-top: calc(var(--space) * 2.5);
  margin-bottom: calc(var(--space) * 2.5);
}
.mx-5 {
  margin-left: calc(var(--space) * 2.5);
  margin-right: calc(var(--space) * 2.5);
}
.ma-5 {
  margin: calc(var(--space) * 2.5);
}
.pt-5 {
  padding-top: calc(var(--space) * 2.5);
}
.pb-5 {
  padding-bottom: calc(var(--space) * 2.5);
}
.pl-5 {
  padding-left: calc(var(--space) * 2.5);
}
.pr-5 {
  padding-right: calc(var(--space) * 2.5);
}
.py-5 {
  padding-top: calc(var(--space) * 2.5);
  padding-bottom: calc(var(--space) * 2.5);
}
.px-5 {
  padding-left: calc(var(--space) * 2.5);
  padding-right: calc(var(--space) * 2.5);
}
.pa-5 {
  padding: calc(var(--space) * 2.5);
}
.ml-auto {
  margin-left: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.mr-0,
.mx-0 {
  margin-right: 0 !important;
}
.mx-0 {
  margin-left: 0 !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ma-0 {
  margin: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.pr-0,
.px-0 {
  padding-right: 0 !important;
}
.px-0 {
  padding-left: 0 !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.pa-0 {
  padding: 0 !important;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.select-all {
  cursor: pointer;
}
.select-all,
.select-all * {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}
.box-resize {
  margin: calc(var(--space) / 2);
  width: calc(33.33333% - var(--space)) !important;
}
@media (min-width: 769px) {
  .box-resize {
    width: calc(25% - var(--space)) !important;
  }
}
.box-resize-scroll {
  margin-right: calc(var(--space) / 2);
  width: calc(33.33333% - var(--space)) !important;
}
@media (min-width: 769px) {
  .box-resize-scroll {
    width: calc(25% - var(--space)) !important;
  }
}
.box-resize-scroll:last-child {
  margin-right: 0;
}
.box-resize-50 {
  width: 100% !important;
  margin: calc(var(--space) / 2);
}
@media (min-width: 769px) {
  .box-resize-50 {
    width: calc(50% - var(--space)) !important;
  }
}
.box-resize-20-50 {
  width: calc(50% - var(--space)) !important;
  margin: calc(var(--space) / 2);
}
@media (min-width: 769px) {
  .box-resize-20-50 {
    width: calc(20% - var(--space)) !important;
  }
}
.pointer {
  cursor: pointer;
}
.disabled {
  pointer-events: none;
}
@keyframes up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.up-enter-active {
  animation: up 0.25s ease forwards;
}
.up-leave-active {
  animation: up 0.25s ease reverse forwards;
}
@keyframes down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.down-enter-active {
  animation: down 0.25s ease forwards;
}
.down-leave-active {
  animation: down 0.25s ease reverse forwards;
}
@keyframes zoom-mini {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.zoom-mini-enter-active {
  animation: zoom-mini 0.25s ease forwards;
}
.zoom-mini-leave-active {
  animation: zoom-mini 0.25s ease reverse forwards;
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.zoom-enter-active {
  animation: zoom 0.25s ease forwards;
}
.zoom-leave-active {
  animation: zoom 0.25s ease reverse forwards;
}
@keyframes show {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.show-enter-active {
  animation: show 0.25s ease forwards;
}
.show-leave-active {
  animation: show 0.25s ease reverse forwards;
}
@keyframes jump {
  30% {
    transform: scale(1.2);
  }
  40%,
  60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  to {
    transform: scale(1);
  }
}
.jump-anim {
  animation: jump 1s ease infinite;
}
@keyframes bounce {
  0%,
  to {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
.bounce-anim {
  animation: bounce 1s infinite;
}
@keyframes spin {
  0%,
  to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1turn);
  }
}
.spin-anim {
  animation: spin 2s infinite;
}
:root {
  --ui-background: 240 242 245;
  --ui-content: 255, 255, 255;
  --ui-text: 52, 71, 103;
  --ui-shadow: 2, 11, 29;
  --ui-box: 22, 56, 111;
  --ui-primary: 6, 122, 203;
  --ui-success: 76, 175, 80;
  --ui-info: 26, 115, 232;
  --ui-warn: 251, 140, 0;
  --ui-danger: 244, 67, 53;
  --ui-light: 240, 242, 245;
  --ui-dark: 52, 71, 103;
  --ui-white: 255, 255, 255;
  --ui-black: 0, 0, 0;
  --ui-gray: 38, 57, 84;
  --ui-gray-100: 248 249 250;
  --ui-gray-200: 240 242 245;
  --ui-gray-300: 222 226 230;
  --ui-gray-400: 206 212 218;
  --ui-gray-500: 173 181 189;
  --ui-gray-600: 108 117 125;
  --ui-money: 133, 187, 101;
  --ui-pay: 59, 89, 153;
  --ui-coin: 243, 199, 13;
  --ui-coin-lock: 0, 178, 114;
  --ui-diamond: 0, 175, 240;
  --ui-wheel: 245, 176, 66;
  --ui-unlucky: var(--ui-danger);
  --ui-time: 247, 106, 137;
  --ui-item: 23, 203, 184;
  --ui-home: 26, 115, 232;
  --ui-game: 38, 57, 84;
  --ui-shop: 28, 159, 247;
  --ui-event: 75, 224, 81;
  --ui-mission: 2, 178, 175;
  --ui-giftcode: 255, 65, 83;
  --ui-shop-recharge: 255, 98, 112;
  --ui-shop-item: 23, 203, 184;
  --ui-shop-currency: 54, 206, 148;
  --ui-vip-0: 25, 116, 57;
  --ui-vip-1: 232, 60, 72;
  --ui-vip-2: 153, 151, 150;
  --ui-vip-3: 87, 45, 28;
  --ui-vip-4: 0, 141, 166;
  --ui-vip-5: 191, 90, 162;
  --ui-vip-6: 96, 169, 12;
  --ui-vip-7: 163, 102, 151;
  --ui-vip-8: 52, 235, 168;
  --ui-vip-9: 178, 152, 40;
  --ui-vip-10: 134, 78, 175;
  --ui-type-0: 38, 57, 84;
  --ui-type-1: 133, 187, 101;
  --ui-type-2: 232, 60, 72;
  --ui-gate-banking: 243, 141, 26;
  --ui-gate-card: 90, 170, 61;
  --ui-gate-momo: 175, 32, 112;
  --ui-user: 90, 170, 61;
  --ui-password: 232, 60, 72;
  --ui-phone: 84, 174, 227;
  --ui-referraler: 244, 128, 58;
  --ui-status-0: var(--ui-warn);
  --ui-status-1: var(--ui-success);
  --ui-status-2: var(--ui-danger);
}
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
#app,
body,
html {
  min-height: 100%;
  height: 100%;
}
html {
  font-size: 18px;
}
@media (max-width: 576px) {
  html {
    font-size: 16px;
  }
}
body {
  background: rgb(var(--ui-background));
  background: url(/images/background.e053d0e0.gif) repeat scroll 0 0
    transparent;
  color: rgba(var(--ui-text), 1);
  font-family: Quicksand;
  font-weight: 400;
  font-size: 0.95rem;
}
button,
input {
  font-family: inherit;
  border: none;
}
input {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
}
img {
  pointer-events: none;
}
.UiAlert {
  --ui-alert-color: var(--ui-danger);
  display: flex;
  align-items: center;
  background-image: linear-gradient(
    0deg,
    rgb(var(--ui-alert-color)),
    rgba(var(--ui-alert-color), 0.7)
  );
  color: rgb(var(--ui-light));
  box-shadow: 0 3px 3px rgba(var(--ui-alert-color), 0.15),
    0 3px 1px -2px rgba(var(--ui-alert-color), 0.2),
    0 1px 5px rgba(var(--ui-alert-color), 0.15);
  border-radius: var(--radius);
  padding: var(--space);
  font-size: 0.85rem;
  font-weight: 600;
}
.UiAlert--border {
  background: rgba(var(--ui-alert-color), 0.1);
  color: rgba(var(--ui-alert-color), 1);
  border: 1px solid rgba(var(--ui-alert-color), 1);
  box-shadow: none;
}
.UiBox {
  position: relative;
  width: var(--ui-box-width);
  max-width: var(--ui-box-width);
  background: rgba(var(--ui-content));
  border-radius: var(--radius);
  box-shadow: 0 0 20px -10px rgba(var(--ui-black), 0.2);
  border: 1px solid rgba(var(--ui-dark), 0.1);
  transition: all 0.25s ease;
}
.UiBox__Header {
  background: rgba(var(--ui-black), 0.05);
  color: rgba(var(--ui-dark), 1);
  padding: calc(var(--space) / 2) var(--space);
  border-radius: var(--radius) var(--radius) 0 0;
}
.UiBox__Body {
  padding: var(--space);
}
.UiBox__Footer {
  background: rgba(var(--ui-black), 0.05);
  padding: calc(var(--space) * 0.5) var(--space);
  border-radius: 0 0 var(--radius) var(--radius);
}
.UiBox--color {
  background-image: linear-gradient(
    0deg,
    rgb(var(--ui-box-color)),
    rgba(var(--ui-box-color), 0.7)
  );
  box-shadow: 0 3px 3px rgba(var(--ui-box-color), 0.15),
    0 3px 1px -2px rgba(var(--ui-box-color), 0.2),
    0 1px 5px rgba(var(--ui-box-color), 0.15);
}
.UiBox--color .UiBox__Body,
.UiBox--color .UiBox__Footer,
.UiBox--color .UiBox__Header {
  color: rgba(var(--ui-light), 1);
}
.UiBox--noPadding .UiBox__Body {
  padding: 0;
}
.UiButton {
  --ui-button-color: var(--ui-primary);
  --ui-button-width: auto;
  --ui-button-height: var(--size);
  --ui-button-size: var(--size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-button-width);
  max-width: var(--ui-button-width);
  height: var(--ui-button-height);
  max-height: var(--ui-button-height);
  background-image: linear-gradient(
    0deg,
    rgb(var(--ui-button-color)),
    rgba(var(--ui-button-color), 0.7)
  );
  color: rgb(var(--ui-light));
  box-shadow: 0 3px 3px rgba(var(--ui-button-color), 0.15),
    0 3px 1px -2px rgba(var(--ui-button-color), 0.2),
    0 1px 5px rgba(var(--ui-button-color), 0.15);
  border-radius: var(--radius);
  padding: 0 var(--space);
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.25s ease;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.UiButton--block {
  display: flex;
}
.UiButton--avatar {
  min-width: var(--ui-button-size);
  max-width: var(--ui-button-size);
  min-height: var(--ui-button-size);
  max-height: var(--ui-button-size);
  padding: 0;
}
.UiCard {
  position: relative;
  background: rgba(var(--ui-content));
  border-radius: var(--radius);
  box-shadow: 0 0 20px -10px rgba(var(--ui-black), 0.2);
  border: 1px solid rgba(var(--ui-dark), 0.1);
}
.UiCard__Header {
  background: rgba(var(--ui-black), 0.05);
  border-radius: var(--radius) var(--radius) 0 0;
}
.UiCard__Body,
.UiCard__Header {
  padding: var(--space);
}
.UiCard__Footer {
  background: rgba(var(--ui-gray-100));
  padding: calc(var(--space) * 0.5) var(--space);
  border-radius: 0 0 var(--radius) var(--radius);
}
.UiChip {
  --ui-chip-color: var(--ui-primary);
  --ui-chip-text: var(--ui-dark);
  --ui-chip-width: auto;
  --ui-chip-height: 33px;
  position: relative;
  display: inline-flex;
  min-width: var(--ui-chip-width);
  max-width: var(--ui-chip-width);
  height: var(--ui-chip-height);
  background: rgb(var(--ui-gray-200));
  color: rgb(var(--ui-chip-text));
  border-radius: var(--radius);
  border: 1px dashed rgba(var(--ui-dark), 0.1);
  padding: 0 var(--space);
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all;
  overflow: hidden;
}
.UiChip,
.UiChip__Icon {
  align-items: center;
  justify-content: center;
}
.UiChip__Icon {
  display: flex;
  min-width: calc(var(--ui-chip-height) * 0.8);
  min-height: calc(var(--ui-chip-height) * 0.8);
  max-width: calc(var(--ui-chip-height) * 0.8);
  max-height: calc(var(--ui-chip-height) * 0.8);
  background: rgb(var(--ui-chip-color));
  color: rgb(var(--ui-light));
  border-radius: var(--radius);
  margin-left: calc(var(--space) * 0.8);
  font-size: 1rem;
}
.UiChip--icon {
  padding-right: 3px;
}
.UiChip--full {
  --ui-chip-text: var(--ui-light);
  background-image: linear-gradient(
    0deg,
    rgb(var(--ui-chip-color)),
    rgba(var(--ui-chip-color), 0.7)
  );
  border: none;
}
.UiChip--full .UiChip__Icon {
  background: rgb(var(--ui-chip-text));
  color: rgb(var(--ui-chip-color));
}
.UiChip--border {
  border-color: rgb(var(--ui-chip-color));
  color: rgb(var(--ui-chip-color));
}
.UiChip--flat {
  background: rgba(var(--ui-chip-color), 0.3);
  color: rgb(var(--ui-light));
}
.UiChip--large {
  min-height: var(--ui-chip-height);
  height: auto;
}
.UiChip--large .UiText {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}
.UiDialog {
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 99998;
}
.UiDialog--Full {
  --ui-dialog-max: 100%;
  padding: 0;
}
.UiDialog--Full.UiDialog--Blur {
  -webkit-backdrop-filter: saturate(180%) blur(50px);
  backdrop-filter: saturate(180%) blur(50px);
}
.UiDialog--Full.show-enter-active {
  --ui-dialog-animation: show 0.25s ease forwards;
}
.UiDialog--Full.show-leave-active {
  --ui-dialog-animation: show 0.25s reverse ease forwards;
}
.UiDialog--Full .UiDialog__Content {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.UiDialog--Default {
  --ui-dialog-max: 500px;
  padding: var(--space);
}
.UiDialog--Default--Blur {
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px);
}
.UiDialog--Default.show-enter-active {
  --ui-dialog-animation: zoom 0.25s ease forwards;
}
.UiDialog--Default.show-leave-active {
  --ui-dialog-animation: zoom 0.25s reverse ease;
}
.UiDialog--Default .UiDialog__Content {
  width: var(--ui-dialog-max);
  height: auto;
}
.UiDialog__Overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  z-index: 1;
}
.UiDialog__Overlay--Hidden {
  background: none;
}
.UiDialog__Content {
  align-items: center;
  justify-content: center;
  max-width: 100%;
  animation: var(--ui-dialog-animation);
  z-index: 2;
}
.UiDialog__Content,
.UiFlex[data-v-6947c76a] {
  position: relative;
  display: flex;
}
.UiFlex--full[data-v-6947c76a] {
  width: 100%;
}
.UiInput {
  --ui-input-color: var(--ui-gray-100);
  --ui-input-width: auto;
  --ui-input-height: calc(var(--size) + var(--space));
  position: relative;
  margin-bottom: var(--space);
  width: var(--ui-input-width);
}
.UiInput:last-child {
  margin-bottom: 0;
}
.UiInput__Label {
  color: rgb(var(--ui-gray-600));
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: calc(var(--space) / 2);
}
.UiInput__Content {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--ui-input-height);
  background: rgb(var(--ui-input-color));
  border-radius: var(--radius);
  padding: 0 var(--space);
  border: 1px dashed rgba(var(--ui-dark), 0.1);
}
.UiInput__Content__Input {
  flex-grow: 1;
  height: 100%;
  background: none;
  font-weight: 500;
}
.UiInput__Content__Input::-moz-placeholder {
  font-weight: 300;
}
.UiInput__Content__Input::placeholder {
  font-weight: 300;
}
.UiInput__Content__Icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size);
  max-width: var(--size);
  min-height: var(--size);
  max-height: var(--size);
  background-image: linear-gradient(
    0deg,
    rgb(var(--ui-input-icon-color)),
    rgba(var(--ui-input-icon-color), 0.7)
  );
  color: rgb(var(--ui-light));
  box-shadow: 0 3px 3px rgba(var(--ui-input-icon-color), 0.15),
    0 3px 1px -2px rgba(var(--ui-input-icon-color), 0.2),
    0 1px 5px rgba(var(--ui-input-icon-color), 0.15);
  border-radius: var(--radius);
}
.UiInput--icon .UiInput__Content {
  padding-left: calc(var(--space) * 0.5);
}
.UiItem {
  --ui-item-size: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-item-size);
  height: var(--ui-item-size);
  min-width: var(--ui-item-size);
  min-height: var(--ui-item-size);
  max-width: var(--ui-item-size);
  max-height: var(--ui-item-size);
  border-radius: 50%;
  margin: 3px;
  padding: 1px;
  background: rgb(var(--ui-gray-200));
  border-radius: var(--radius);
  border: 1px solid rgba(var(--ui-dark), 0.1);
  cursor: pointer;
}
.UiItem__Img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.UiItem__Amount {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgb(var(--ui-dark));
  color: rgb(var(--ui-light));
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 0.6rem;
  font-weight: 700;
}
.UiScrollX {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  transition: all 0.2s;
  will-change: transform;
  cursor: pointer;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.UiScrollX::-webkit-scrollbar {
  display: none;
}
.UiScrollX > div {
  display: inline-block;
}
.UiScrollX > div:last-child {
  margin-right: 0;
}
.UiInput .UiSelect {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  width: 100%;
  max-height: 190px;
  background: rgba(var(--ui-content));
  border-radius: var(--radius);
  box-shadow: 0 0 20px -5px rgba(var(--ui-black), 0.2);
  border: 1px solid rgba(var(--ui-dark), 0.1);
  overflow: auto;
  z-index: 99;
}
.UiInput .UiSelect__Item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  max-height: 38px;
  padding: 0 var(--space);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
}
@keyframes select-effect {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.UiInput .UiSelect.select-enter-active {
  animation: select-effect 0.25s ease forwards;
}
.UiInput .UiSelect.select-leave-active {
  animation: select-effect 0.25s ease reverse forwards;
}
.UiText--mini,
.UiText--nowrap {
  white-space: nowrap;
}
.UiText--mini {
  max-width: 100%;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
}
.UiTab {
  --ui-tab-color: var(--ui-primary);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
  background: rgba(var(--ui-content));
  border-radius: var(--radius);
  box-shadow: 0 0 20px -10px rgba(var(--ui-black), 0.2);
  border: 1px solid rgba(var(--ui-dark), 0.1);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
.UiTab .Tab {
  padding: calc(var(--space) * 0.8) var(--space);
  margin: 3px;
  border-radius: inherit;
  color: rgb(var(--ui-dark));
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.1s ease;
}
.UiTab .Tab--active {
  background-image: linear-gradient(
    0deg,
    rgb(var(--ui-tab-color)),
    rgba(var(--ui-tab-color), 0.7)
  );
  color: rgb(var(--ui-light));
}
.UiTable .UiChip {
  display: inline-flex;
}
.UiTable__NoData {
  padding: var(--space);
  font-size: 0.8rem;
  text-align: center;
}
.UiTable__Footer,
.UiTable__NoData {
  background: rgba(var(--ui-black), 0.05);
  border-radius: 0 0 var(--radius) var(--radius);
}
.UiTable__Footer {
  padding: calc(var(--space) / 2);
}
.UiTable .Table {
  width: 100%;
  border-radius: var(--radius);
  background: rgba(var(--ui-content));
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 0 20px -10px rgba(var(--ui-black), 0.2);
  border: 1px solid rgba(var(--ui-dark), 0.1);
}
.UiTable .Table__Content {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  border-radius: inherit;
  overflow: hidden;
}
.UiTable .Table__Content tbody,
.UiTable .Table__Content thead {
  width: 100%;
}
.UiTable .Table__Content thead th {
  padding: var(--space);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: capitalize;
  white-space: nowrap;
  background: rgba(var(--ui-black), 0.05);
  text-align: start;
}
.UiTable .Table__Content tbody tr {
  margin: 6px 0;
  text-align: left;
}
.UiTable .Table__Content tbody tr td {
  padding: 6px var(--space);
  background: rgba(var(--ui-content), 0.4);
  white-space: normal;
}
.UiPagination div {
  margin: 0 3px;
}
.UserCurrency .UiChip {
  margin-right: 6px;
}
.UserCurrency .UiChip:last-child {
  margin-right: 0;
}
.UiTableAdmin .UiChip:not(.pointer),
.UiTableAdmin .UiChip:not(.pointer) .UiText {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  user-select: text !important;
}
.UiTableAdmin__Box .UiBox__Body {
  max-height: 70vh;
  overflow-y: auto;
}
.UiTableAdmin__NoData {
  padding: var(--space);
  font-size: 0.8rem;
  text-align: center;
}
.UiTableAdmin__Footer,
.UiTableAdmin__NoData {
  background: rgba(var(--ui-black), 0.05);
  border-radius: 0 0 var(--radius) var(--radius);
}
.UiTableAdmin__Footer {
  padding: calc(var(--space) / 2);
}
.UiTableAdmin .Table {
  width: 100%;
  border-radius: var(--radius);
  background: rgba(var(--ui-content));
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 0 20px -10px rgba(var(--ui-black), 0.2);
  border: 1px solid rgba(var(--ui-dark), 0.1);
  overflow-x: auto;
}
.UiTableAdmin .Table__Sum {
  background: rgba(var(--ui-black), 0.05);
}
.UiTableAdmin .Table__Content {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  border-radius: inherit;
  overflow: hidden;
}
.UiTableAdmin .Table__Content tbody,
.UiTableAdmin .Table__Content thead {
  width: 100%;
}
.UiTableAdmin .Table__Content tr {
  text-align: left;
}
.UiTableAdmin .Table__Content thead th {
  padding: var(--space);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: capitalize;
  white-space: nowrap;
  background: rgba(var(--ui-black), 0.05);
  text-align: start;
  cursor: pointer;
}
.UiTableAdmin .Table__Content tbody tr:hover {
  background: rgba(var(--ui-dark), 0.2);
}
.UiTableAdmin .Table__Content tbody td {
  padding: calc(var(--space) * 0.8) var(--space);
  background: rgba(var(--ui-content), 0.4);
  white-space: normal;
}