/* ===== THEME VARIABLES ===== */
:root {
    --header:50px;
    --menu:55px;
    --footer:50px;
    --space:12px;
    --radius:1rem;
    --size:38px;

    /* Màu nền và content - tối chủ đạo */
    --ui-background:10,14,20;
    --ui-content:18,22,30;
    --ui-content-gradient:linear-gradient(to bottom, rgba(24,28,36,1), rgba(30,34,44,1));
    --ui-content-gradient-header:linear-gradient(to top, rgba(24,28,36,1), rgba(30,34,44,1));
	--ui-content-gradient-nav:linear-gradient(to top, rgba(24,28,36,1), rgba(45,45,45,1));

    /* Màu chữ và hiển thị */
    --ui-text:230,240,255;
    --ui-dark:40,50,60;
    --ui-black:185,195,205;
	--ui-gray:66,77,110;
	--ui-gray-100:33,38,44;
	--ui-gray-200:20,25,32;
	--ui-gray-300:44,48,55;
	--ui-gray-400:88,99,110;
	--ui-gray-500:132,143,154;
	--ui-gray-600:198,209,220;
	--ui-type-0:220,231,242;

    /* Shadow và box */
    --ui-shadow:0,0,0;
    --ui-box:50,100,160;

    /* Màu chính */
    --ui-primary:0,153,255;        /* Xanh biển tươi */
/* --ui-primary:17,63,97; */
    --ui-success:76,175,80;
    --ui-info:0,184,212;
    --ui-warn:255,193,7;
    --ui-danger:244,67,54;
    --ui-light:248,249,250;
    --ui-white:10,14,20;

    /* Màu game và tính năng */
    --ui-money:133,187,101;
    --ui-pay:36,123,160;
    --ui-coin:243,199,13;
    --ui-coin-lock:0,178,114;
    --ui-diamond:0,175,240;
    --ui-wheel:245,176,66;
    --ui-dice:81,132,235;
    --ui-unlucky:var(--ui-danger);
    --ui-time:247,106,137;
    --ui-item:23,203,184;
    --ui-home:26,115,232;
    --ui-game:20,40,70;
    --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;

    /* VIP - điều chỉnh tone đậm */
    --ui-vip-0:0,188,212;
    --ui-vip-1:255,82,82;
    --ui-vip-2:158,158,158;
    --ui-vip-3:100,75,60;
    --ui-vip-4:30,144,255;
    --ui-vip-5:233,30,99;
    --ui-vip-6:139,195,74;
    --ui-vip-7:140,104,200;
    --ui-vip-8:102,255,168;
    --ui-vip-9:255,193,7;
    --ui-vip-10:56,103,214;
    --ui-vip-11:255,138,128;
    --ui-vip-12:124,77,255;
    --ui-vip-13:0,191,255;
    --ui-vip-14:129,199,132;
    --ui-vip-15:0,153,255;
    --ui-vip-16:255,183,77;
    --ui-vip-17:229,115,115;
    --ui-vip-18:0,184,212;
    --ui-vip-19:144,202,249;
    --ui-vip-20:100,181,246;
    --ui-vip-21:121,134,203;
    --ui-vip-22:149,117,205;
    --ui-vip-23:77,182,172;
    --ui-vip-24:129,199,132;

    /* Màu loại */
    --ui-type-1:0,200,100;
    --ui-type-2:244,67,54;

    /* Màu cổng thanh toán */
    --ui-gate-banking:0,153,255;
    --ui-gate-card:76,175,80;
    --ui-gate-momo:233,30,99;

    /* Màu UI input */
	--ui-input:20,24,32;
    --ui-user:76,175,80;
    --ui-password:244,67,54;
    --ui-phone:100,181,246;
    --ui-referraler:255,167,38;

    /* Trạng thái */
    --ui-status-0:var(--ui-warn);
    --ui-status-1:var(--ui-success);
    --ui-status-2:var(--ui-danger);
}

/* ===== BASE STYLES ===== */
* {
    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:Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:.95rem;
    line-height:1.6;
}

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
}

/* ===== IMPROVED STYLES ===== */
a {
    color: rgb(var(--ui-primary));
    text-decoration: none;
}

a:hover {
    color: rgb(var(--ui-info));
    text-decoration: underline;
}
/*
::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}*/

::-webkit-scrollbar-track {
    background: rgb(var(--ui-gray-200));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--ui-gray-500));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--ui-gray-600));
}
/* input:focus, */
button:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgb(var(--ui-primary));
    /* outline-offset: 2px; */
}

::selection {
    background: rgba(var(--ui-primary), 0.3);
    color: rgb(var(--ui-text));
}

::-moz-selection {
    background: rgba(var(--ui-primary), 0.3);
    color: rgb(var(--ui-text));
}

/* ===== SPACING UTILITIES ===== */
.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) }

/* ===== UTILITY CLASSES ===== */
.ml-auto { margin-left:auto!important }
.mr-auto { margin-right:auto!important }
.uppercase { text-transform:uppercase }
.capitalize { text-transform:capitalize }
.pointer { cursor:pointer }
.disabled { pointer-events:none }

/* ===== TEXT UTILITIES ===== */
.select-all { cursor:pointer }
.select-all,.select-all * {
    -webkit-user-select:all!important;
    -moz-user-select:all!important;
    user-select:all!important
}

/* ===== RESPONSIVE UTILITIES ===== */
.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
    }
}

/* ===== ANIMATIONS ===== */
@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 }

.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)));
    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-text),.2)
}
.UiBox {
    position:relative;
    width:var(--ui-box-width);
    max-width:var(--ui-box-width);
    background:var(--ui-content-gradient);
    border:1px solid rgba(var(--ui-text),.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)));
    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:linear-gradient(0deg,rgb(var(--ui-button-color),1),rgba(var(--ui-button-color),1));
    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:var(--ui-content-gradient);
    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)));
    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-input);
    --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)));
    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:rgb(var(--ui-gray-100));
    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:var(--ui-content-gradient);
    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)));
    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:var(--ui-content-gradient);
    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:var(--ui-content-gradient);
    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
}