:root {
    --header: 60px;
    --menu: 55px;
    --footer: 50px;
    --space: 12px;
    --radius: 0.5rem;
    --size: 38px
}

.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)*.5)
}

.mb-1 {
    margin-bottom: calc(var(--space)*.5)
}

.ml-1 {
    margin-left: calc(var(--space)*.5)
}

.mr-1 {
    margin-right: calc(var(--space)*.5)
}

.my-1 {
    margin-top: calc(var(--space)*.5);
    margin-bottom: calc(var(--space)*.5)
}

.mx-1 {
    margin-left: calc(var(--space)*.5);
    margin-right: calc(var(--space)*.5)
}

.ma-1 {
    margin: calc(var(--space)*.5)
}

.pt-1 {
    padding-top: calc(var(--space)*.5)
}

.pb-1 {
    padding-bottom: calc(var(--space)*.5)
}

.pl-1 {
    padding-left: calc(var(--space)*.5)
}

.pr-1 {
    padding-right: calc(var(--space)*.5)
}

.py-1 {
    padding-top: calc(var(--space)*.5);
    padding-bottom: calc(var(--space)*.5)
}

.px-1 {
    padding-left: calc(var(--space)*.5);
    padding-right: calc(var(--space)*.5)
}

.pa-1 {
    padding: calc(var(--space)*.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:1008px) {
    .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:1008px) {
    .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:1008px) {
    .box-resize-50 {
        width: calc(50% - var(--space)) !important
    }
}

.box-resize-33 {
    width: 100% !important;
    margin: calc(var(--space)/2)
}

@media(min-width:1008px) {
    .box-resize-33 {
        width: calc(33.33333% - var(--space)) !important
    }
}

.box-resize-20-50 {
    width: calc(50% - var(--space)) !important;
    margin: calc(var(--space)/2)
}

@media(min-width:1008px) {
    .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 .25s ease forwards
}

.up-leave-active {
    animation: up .25s ease reverse forwards
}

@keyframes down {
    0% {
        opacity: 0;
        transform: translateY(-30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.down-enter-active {
    animation: down .25s ease forwards
}

.down-leave-active {
    animation: down .25s ease reverse forwards
}

@keyframes zoom-mini {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.zoom-mini-enter-active {
    animation: zoom-mini .25s ease forwards
}

.zoom-mini-leave-active {
    animation: zoom-mini .25s ease reverse forwards
}

@keyframes zoom {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.zoom-enter-active {
    animation: zoom .25s ease forwards
}

.zoom-leave-active {
    animation: zoom .25s ease reverse forwards
}

@keyframes show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.show-enter-active {
    animation: show .25s ease forwards
}

.show-leave-active {
    animation: show .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(.9, 1.1)
    }

    50% {
        transform: scale(1.1, .9)
    }

    75% {
        transform: scale(.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-dice: 116, 52, 235;
    --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-rank: 54, 206, 148;
    --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-vip-11: 229, 124, 117;
    --ui-vip-12: 104, 60, 180;
    --ui-vip-13: 118, 222, 255;
    --ui-vip-14: 123, 193, 99;
    --ui-vip-15: 80, 58, 223;
    --ui-vip-16: 226, 165, 82;
    --ui-vip-17: 189, 62, 66;
    --ui-vip-18: 12, 77, 170;
    --ui-vip-19: 165, 198, 219;
    --ui-vip-20: 94, 167, 219;
    --ui-vip-21: 114, 115, 212;
    --ui-vip-22: 88, 69, 124;
    --ui-vip-23: 45, 115, 133;
    --ui-vip-24: 101, 210, 119;
    --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)
}

body[dark=true] {
    --ui-background: 38, 39, 47;
    --ui-content: 49, 50, 62;
    --ui-text: 210, 210, 210;
    --ui-dark: 100, 100, 100;
    --ui-gray-100: 52, 53, 66;
    --ui-gray-200: 38, 39, 47;
    --ui-type-0: 179, 179, 187
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    -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:1007px) {
    html {
        font-size: 15px
    }
}

body {
    background: rgb(var(--ui-background));
    background-attachment: fixed;
    color: rgba(var(--ui-text), 1);
    font-family: Quicksand;
    font-weight: 400;
    font-size: .95rem
}

button,
input {
    font-family: inherit;
    border: none
}

input {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    user-select: auto !important
}

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

input[type=number] {
    -moz-appearance: textfield
}

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), .7));
    color: rgb(var(--ui-light));
    box-shadow: 0 3px 3px rgba(var(--ui-alert-color), .15), 0 3px 1px -2px rgba(var(--ui-alert-color), .2), 0 1px 5px rgba(var(--ui-alert-color), .15);
    border-radius: var(--radius);
    padding: var(--space);
    font-size: .85rem;
    font-weight: 600
}

.UiAlert--border {
    background: rgba(var(--ui-alert-color), .1);
    color: rgba(var(--ui-alert-color), 1);
    border: 1px solid rgba(var(--ui-alert-color), 1);
    box-shadow: none
}

.UiBarge {
    position: relative
}

.UiBarge__Text {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    max-height: 16px;
    padding: 0 3px;
    transform: translate(4px);
    background: rgba(var(--ui-primary));
    color: rgba(var(--ui-light));
    font-size: .7rem;
    font-weight: 700
}

.UiBarge__Text,
.UiBox {
    border-radius: var(--radius);
    box-shadow: 0 0 20px -10px rgba(var(--ui-black), .2)
}

.UiBox {
    position: relative;
    width: var(--ui-box-width);
    max-width: var(--ui-box-width);
    background: rgba(var(--ui-content));
    border: 1px solid rgba(var(--ui-dark), .1);
    transition: all .25s ease
}

.UiBox__Header {
    background: rgba(var(--ui-black), .05);
    color: rgba(var(--ui-text), 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), .05);
    padding: calc(var(--space)*.5) var(--space);
    border-radius: 0 0 var(--radius) var(--radius)
}

.UiBox--color:not(.UiBox--flat) {
    background-image: linear-gradient(0deg, rgb(var(--ui-box-color)), rgba(var(--ui-box-color), .7));
    box-shadow: 0 3px 3px rgba(var(--ui-box-color), .15), 0 3px 1px -2px rgba(var(--ui-box-color), .2), 0 1px 5px rgba(var(--ui-box-color), .15)
}

.UiBox--color:not(.UiBox--flat) .UiBox__Body,
.UiBox--color:not(.UiBox--flat) .UiBox__Footer,
.UiBox--color:not(.UiBox--flat) .UiBox__Header {
    color: rgba(var(--ui-light), 1)
}

.UiBox--flat {
    border-color: rgba(var(--ui-box-color), .5)
}

.UiBox--flat,
.UiBox--flat .UiBox__Header {
    background: rgba(var(--ui-box-color), .1)
}

.UiBox--flat .UiBox__Footer {
    background: rgba(var(--ui-box-color), .05)
}

.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), .7));
    color: rgb(var(--ui-light));
    box-shadow: 0 3px 3px rgba(var(--ui-button-color), .15), 0 3px 1px -2px rgba(var(--ui-button-color), .2), 0 1px 5px rgba(var(--ui-button-color), .15);
    border-radius: var(--radius);
    padding: 0 var(--space);
    font-weight: 700;
    text-transform: uppercase;
    transition: all .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), .2);
    border: 1px solid rgba(var(--ui-dark), .1)
}

.UiCard__Header {
    background: rgba(var(--ui-black), .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)*.5) var(--space);
    border-radius: 0 0 var(--radius) var(--radius)
}

.UiChip {
    --ui-chip-color: var(--ui-primary);
    --ui-chip-text: var(--ui-text);
    --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), .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)*.8);
    min-height: calc(var(--ui-chip-height)*.8);
    max-width: calc(var(--ui-chip-height)*.8);
    max-height: calc(var(--ui-chip-height)*.8);
    background: rgb(var(--ui-chip-color));
    color: rgb(var(--ui-light));
    border-radius: var(--radius);
    margin-left: calc(var(--space)*.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), .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), .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
}

.UiChip.pointer {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !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 .25s ease forwards
}

.UiDialog--Full.show-leave-active {
    --ui-dialog-animation: show .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 .25s ease forwards
}

.UiDialog--Default.show-leave-active {
    --ui-dialog-animation: zoom .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, .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: .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), .1)
}

.UiInput__Content__Input {
    flex-grow: 1;
    height: 100%;
    background: none;
    color: rgba(var(--ui-text));
    font-weight: 500
}

.UiInput__Content__Input::-moz-placeholder {
    font-weight: 300;
    color: rgba(var(--ui-text), .8)
}

.UiInput__Content__Input::placeholder {
    font-weight: 300;
    color: rgba(var(--ui-text), .8)
}

.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), .7));
    color: rgb(var(--ui-light));
    box-shadow: 0 3px 3px rgba(var(--ui-input-icon-color), .15), 0 3px 1px -2px rgba(var(--ui-input-icon-color), .2), 0 1px 5px rgba(var(--ui-input-icon-color), .15);
    border-radius: var(--radius)
}

.UiInput--icon .UiInput__Content {
    padding-left: calc(var(--space)*.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), .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: .6rem;
    font-weight: 700
}

.UiScrollX {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    transition: all .2s;
    will-change: transform;
    white-space: nowrap;
    cursor: pointer;
    scrollbar-width: none;
    scroll-snap-type: x mandatory
}

.UiScrollX::-webkit-scrollbar {
    display: none
}

.UiScrollX>div {
    display: inline-block
}

.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), .2);
    border: 1px solid rgba(var(--ui-dark), .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: .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 .25s ease forwards
}

.UiInput .UiSelect.select-leave-active {
    animation: select-effect .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;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    background: rgba(var(--ui-content));
    border-radius: var(--radius);
    box-shadow: 0 0 20px -10px rgba(var(--ui-black), .2);
    border: 1px solid rgba(var(--ui-dark), .1);
    overflow-y: hidden;
    overflow-x: auto
}

.UiTab .Tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 0 var(--space);
    margin: 3px;
    border-radius: inherit;
    color: rgb(var(--ui-text));
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all .1s ease
}

.UiTab .Tab--active {
    background-image: linear-gradient(0deg, rgb(var(--ui-tab-color)), rgba(var(--ui-tab-color), .7));
    color: rgb(var(--ui-light))
}

.UiTable .UiChip {
    display: inline-flex
}

.UiTable__NoData {
    padding: var(--space);
    font-size: .8rem;
    text-align: center
}

.UiTable__Footer,
.UiTable__NoData {
    background: rgba(var(--ui-black), .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), .2);
    border: 1px solid rgba(var(--ui-dark), .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: .8rem;
    text-transform: capitalize;
    white-space: nowrap;
    background: rgba(var(--ui-black), .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), .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__NoData {
    padding: var(--space);
    font-size: .8rem;
    text-align: center
}

.UiTableAdmin__Footer,
.UiTableAdmin__NoData {
    background: rgba(var(--ui-black), .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), .2);
    border: 1px solid rgba(var(--ui-dark), .1);
    overflow-x: auto
}

.UiTableAdmin .Table__Sum {
    background: rgba(var(--ui-black), .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: .8rem;
    text-transform: capitalize;
    white-space: nowrap;
    background: rgba(var(--ui-black), .05);
    text-align: start;
    cursor: pointer
}

.UiTableAdmin .Table__Content tbody tr:hover {
    background: rgba(var(--ui-dark), .2)
}

.UiTableAdmin .Table__Content tbody td {
    padding: calc(var(--space)*.8) var(--space);
    background: rgba(var(--ui-content), .4);
    white-space: normal
}