/*202405*/
:root {
    --phoenix-body-color: #000;
    --phoenix-body-font-size: 14px;
    --mud-typography-body1-size: var(--phoenix-body-font-size) !important;
    --phoenix-nav-link-font-size: var(--phoenix-body-font-size) !important;
    --mud-zindex-dialog: 1058;
    --darkreader-bg--mud-palette-overlay-dark: rgb(255 255 255 / 0%);
    --mud-appbar-height: 200px;
    --mud-default-borderradius: 5px;
    --mud-palette-surface: var(--phoenix-body-bg) !important;
    --mud-zindex-snackbar: 9999;
    --mud-palette-success-text: #000 !important;
    --bs-gray-100: #f7f8f9;
    --bs-gray-200: #eff2f6;
    --bs-gray-300: #eef0f2;
    --bs-gray-400: #e1e4e6;
    --bs-gray-500: #a1a1a8;
    --bs-gray-600: #676a79;
    --bs-gray-700: #29292e;
    --bs-gray-800: #14191e;
    --bs-gray-900: #0f0f10;
    --bs-light: #202227;
    --phoenix-theme-control-toggle-bg: var(--rz-info-lighter);
    --phoenix-table-bg: transparent;
    --rz-grid-cell-padding: 0.36rem 0.5rem;
    --rz-pager-numeric-button-color: var(--bs-gray-900);
    --rz-pager-summary-color: var(--bs-gray-900);
    --rz-grid-header-color: var(--bs-gray-900);
    --rz-pager-back-button-color: var(--bs-gray-900);
    --rz-pager-back-button-background-color: var(--bs-gray-100);
    --rz-grid-frozen-cell-background-color: var(--bs-gray-200);
    --rz-datatable-border: var(--bs-gray-400);
    --phoenix-pagination-active-bg: #3874ff;
    --phoenix-gutter-y: 0;
    --phoenix-navbar-top-height: 1rem;
    --mud-zindex-dialog: 1600 !important;
    --mud-zindex-popover: 1650 !important;
    --mud-palette-text-primary: var(--phoenix-secondary-color) !important;
    --rz-pager-padding: 0.2rem 0.3rem;
    --rz-pager-first-button-margin: 0;
    --rz-grid-header-font-size: 13px;
    --rz-grid-header-cell-padding: 0.5rem 0;
    --chart-lighter: #f8f8f8;
    --container-max-width: 1050px;
    --stk-Red: #FF4C4C;
    --stk-Green: #3AFF45;
    --phoenix-body-font-family: Roboto, Helvetica, Arial, "sans-serif" !important;
    --mud-typography-default-family: var(--phoenix-body-font-family);
    --phoenix-body-bg: #e3e6ed;
    --phoenix-body-line-height: 2;
    --wc-black: #e9e9e9;
    --rz-grid-frozen-cell-border: #fff !important;
    --mud-palette-drawer-background: var(--phoenix-emphasis-bg)!important;    
    /*
        --rz-grid-sort-icon-width:0;
        --mud-palette-primary: var(--phoenix-primary-lighter) !important;
        dot=line-clamp-1=Line1 
    */
}

[data-bs-theme=dark] {
    --phoenix-body-bg: #0f111a;
    --rz-grid-frozen-cell-border: var(--phoenix-tertiary-color) !important;
    --bs-gray-100: #313235;
    --bs-gray-200: #464950;
    --bs-gray-300: #5f5f68;
    --bs-gray-400: #a1a1a8;
    --bs-gray-500: #bfc0c9;
    --bs-gray-600: #c5c6cc;
    --bs-gray-700: #ffffffb3;
    --bs-gray-800: #fffffff9;
    --bs-gray-900: #fff;
    --bs-light: #202227;
    --chart-lighter: #285093;
    --phoenix-emphasis-color: #fff;
    --phoenix-theme-control-toggle-bg: #000;
    --phoenix-table-bg: rgb(0 0 0 / 1);
    --rz-grid-frozen-cell-background-color: var(--phoenix-navbar-top-menu-bg-color);
    --rz-datatable-border: var(--bs-gray-100);
    --phoenix-body-color: #c8cddb;
    --phoenix-theme-control-toggle-color: var(--phoenix-success);
    --wc-black: #000;
}

body {
    overflow-x: hidden;
    letter-spacing: 0;
}

b, strong {
    font-weight: 800;
}

a:hover {
    text-decoration: none;
}

.WeicityUserColumnNavs {
    position: relative;
    z-index: 10;
}

#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: rgba(52, 152, 219, 0.5);
    transition: width 0.2s ease-out;
    z-index: 9999;
}

.stkRed {
    stroke: var(--stk-Red);
    stroke-width: 2;
    /*
    fill: var(--stk-Red);
    */
    color: var(--stk-Red);
}

.ContentIframe {
    min-height: 500px;
    height: 100%;
}


#mud-snackbar-container {
    z-index: 8000 !important;
}

.stkGreen {
    stroke: var(--stk-Green);
    stroke-width: 2;
    /*
    fill: var(--stk-Green);
    */
    color: var(--stk-Green);
}

.Line1, .Line2,
.TwoLine, .Line3,
.Line4, .Line5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制在1行 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.Line2, .TwoLine {
    -webkit-line-clamp: 2;
}

.Line3 {
    -webkit-line-clamp: 3;
}

.Line4 {
    line-height: 2;
    -webkit-line-clamp: 4;
}

.Line5 {
    line-height: 2;
    -webkit-line-clamp: 5;
}

figure {
    width: 100%;
    text-align: center;
}

iframe {
    min-height: 500px;
}



.mud-border-primary {
    border-color: #1976d2 !important; /* 使拖拽时颜色变化 */
}

    .mud-border-primary::deep(.mud-paper) {
        border-color: #1976d2 !important;
    }

/*#region Custom Ratios and height for Bootstrap 5*/
.ratio-1x1 {
    --phoenix-aspect-ratio: 100%;
}

.ratio-1x2 {
    --phoenix-aspect-ratio: 200%;
}

.ratio-2x1 {
    --phoenix-aspect-ratio: 50%;
}

.ratio-1x3 {
    --phoenix-aspect-ratio: 300%;
}

.ratio-3x1 {
    --phoenix-aspect-ratio: 33.3333333333%;
}

.ratio-1x4 {
    --phoenix-aspect-ratio: 400%;
}

.ratio-4x1 {
    --phoenix-aspect-ratio: 25%;
}

.ratio-1x5 {
    --phoenix-aspect-ratio: 500%;
}

.ratio-5x1 {
    --phoenix-aspect-ratio: 20%;
}

.ratio-3x2 {
    --phoenix-aspect-ratio: 66.6666666667%;
}

.ratio-2x3 {
    --phoenix-aspect-ratio: 150%;
}

.ratio-3x4 {
    --phoenix-aspect-ratio: 133.3333333333%;
}

.ratio-4x3 {
    --phoenix-aspect-ratio: 75%;
}

.ratio-16x9 {
    --phoenix-aspect-ratio: 56.25%;
}

.ratio-9x16 {
    --phoenix-aspect-ratio: 177.7777777778%;
}

.ratio-21x9 {
    --phoenix-aspect-ratio: 42.8571428571%;
}

.ratio-9x21 {
    --phoenix-aspect-ratio: 233.3333333333%;
}

.ratio-9x32 {
    --phoenix-aspect-ratio: 355.5555555556%;
}

.ratio-32x9 {
    --phoenix-aspect-ratio: 28.125%;
}
/* X-Small */
@media (max-width: 575px) {
    .ratio-xs-1x1 {
        --phoenix-aspect-ratio: 100%;
    }

    .ratio-xs-1x2 {
        --phoenix-aspect-ratio: 200%;
    }

    .ratio-xs-2x1 {
        --phoenix-aspect-ratio: 50%;
    }

    .ratio-xs-1x3 {
        --phoenix-aspect-ratio: 300%;
    }

    .ratio-xs-3x1 {
        --phoenix-aspect-ratio: 33.3333333333%;
    }

    .ratio-xs-1x4 {
        --phoenix-aspect-ratio: 400%;
    }

    .ratio-xs-4x1 {
        --phoenix-aspect-ratio: 25%;
    }

    .ratio-xs-1x5 {
        --phoenix-aspect-ratio: 500%;
    }

    .ratio-xs-5x1 {
        --phoenix-aspect-ratio: 20%;
    }

    .ratio-xs-3x2 {
        --phoenix-aspect-ratio: 66.6666666667%;
    }

    .ratio-xs-2x3 {
        --phoenix-aspect-ratio: 150%;
    }

    .ratio-xs-3x4 {
        --phoenix-aspect-ratio: 133.3333333333%;
    }

    .ratio-xs-4x3 {
        --phoenix-aspect-ratio: 75%;
    }

    .ratio-xs-16x9 {
        --phoenix-aspect-ratio: 56.25%;
    }

    .ratio-xs-9x16 {
        --phoenix-aspect-ratio: 177.7777777778%;
    }

    .ratio-xs-21x9 {
        --phoenix-aspect-ratio: 42.8571428571%;
    }

    .ratio-xs-9x21 {
        --phoenix-aspect-ratio: 233.3333333333%;
    }

    .ratio-xs-9x32 {
        --phoenix-aspect-ratio: 355.5555555556%;
    }

    .ratio-xs-32x9 {
        --phoenix-aspect-ratio: 28.125%;
    }
}
/* Small */
@media (min-width: 576px) {
    .ratio-sm-1x1 {
        --phoenix-aspect-ratio: 100%;
    }

    .ratio-sm-1x2 {
        --phoenix-aspect-ratio: 200%;
    }

    .ratio-sm-2x1 {
        --phoenix-aspect-ratio: 50%;
    }

    .ratio-sm-1x3 {
        --phoenix-aspect-ratio: 300%;
    }

    .ratio-sm-3x1 {
        --phoenix-aspect-ratio: 33.3333333333%;
    }

    .ratio-sm-1x4 {
        --phoenix-aspect-ratio: 400%;
    }

    .ratio-sm-4x1 {
        --phoenix-aspect-ratio: 25%;
    }

    .ratio-sm-1x5 {
        --phoenix-aspect-ratio: 500%;
    }

    .ratio-sm-5x1 {
        --phoenix-aspect-ratio: 20%;
    }

    .ratio-sm-3x2 {
        --phoenix-aspect-ratio: 66.6666666667%;
    }

    .ratio-sm-2x3 {
        --phoenix-aspect-ratio: 150%;
    }

    .ratio-sm-3x4 {
        --phoenix-aspect-ratio: 133.3333333333%;
    }

    .ratio-sm-4x3 {
        --phoenix-aspect-ratio: 75%;
    }

    .ratio-sm-16x9 {
        --phoenix-aspect-ratio: 56.25%;
    }

    .ratio-sm-9x16 {
        --phoenix-aspect-ratio: 177.7777777778%;
    }

    .ratio-sm-21x9 {
        --phoenix-aspect-ratio: 42.8571428571%;
    }

    .ratio-sm-9x21 {
        --phoenix-aspect-ratio: 233.3333333333%;
    }

    .ratio-sm-9x32 {
        --phoenix-aspect-ratio: 355.5555555556%;
    }

    .ratio-sm-32x9 {
        --phoenix-aspect-ratio: 28.125%;
    }
}
/* Medium */
@media (min-width: 768px) {
    .ratio-md-1x1 {
        --phoenix-aspect-ratio: 100%;
    }

    .ratio-md-1x2 {
        --phoenix-aspect-ratio: 200%;
    }

    .ratio-md-2x1 {
        --phoenix-aspect-ratio: 50%;
    }

    .ratio-md-1x3 {
        --phoenix-aspect-ratio: 300%;
    }

    .ratio-md-3x1 {
        --phoenix-aspect-ratio: 33.3333333333%;
    }

    .ratio-md-1x4 {
        --phoenix-aspect-ratio: 400%;
    }

    .ratio-md-4x1 {
        --phoenix-aspect-ratio: 25%;
    }

    .ratio-md-1x5 {
        --phoenix-aspect-ratio: 500%;
    }

    .ratio-md-5x1 {
        --phoenix-aspect-ratio: 20%;
    }

    .ratio-md-3x2 {
        --phoenix-aspect-ratio: 66.6666666667%;
    }

    .ratio-md-2x3 {
        --phoenix-aspect-ratio: 150%;
    }

    .ratio-md-3x4 {
        --phoenix-aspect-ratio: 133.3333333333%;
    }

    .ratio-md-4x3 {
        --phoenix-aspect-ratio: 75%;
    }

    .ratio-md-16x9 {
        --phoenix-aspect-ratio: 56.25%;
    }

    .ratio-md-9x16 {
        --phoenix-aspect-ratio: 177.7777777778%;
    }

    .ratio-md-21x9 {
        --phoenix-aspect-ratio: 42.8571428571%;
    }

    .ratio-md-9x21 {
        --phoenix-aspect-ratio: 233.3333333333%;
    }

    .ratio-md-9x32 {
        --phoenix-aspect-ratio: 355.5555555556%;
    }

    .ratio-md-32x9 {
        --phoenix-aspect-ratio: 28.125%;
    }
}
/* Large */
@media (min-width: 992px) {
    .ratio-lg-1x1 {
        --phoenix-aspect-ratio: 100%;
    }

    .ratio-lg-1x2 {
        --phoenix-aspect-ratio: 200%;
    }

    .ratio-lg-2x1 {
        --phoenix-aspect-ratio: 50%;
    }

    .ratio-lg-1x3 {
        --phoenix-aspect-ratio: 300%;
    }

    .ratio-lg-3x1 {
        --phoenix-aspect-ratio: 33.3333333333%;
    }

    .ratio-lg-1x4 {
        --phoenix-aspect-ratio: 400%;
    }

    .ratio-lg-4x1 {
        --phoenix-aspect-ratio: 25%;
    }

    .ratio-lg-1x5 {
        --phoenix-aspect-ratio: 500%;
    }

    .ratio-lg-5x1 {
        --phoenix-aspect-ratio: 20%;
    }

    .ratio-lg-3x2 {
        --phoenix-aspect-ratio: 66.6666666667%;
    }

    .ratio-lg-2x3 {
        --phoenix-aspect-ratio: 150%;
    }

    .ratio-lg-3x4 {
        --phoenix-aspect-ratio: 133.3333333333%;
    }

    .ratio-lg-4x3 {
        --phoenix-aspect-ratio: 75%;
    }

    .ratio-lg-16x9 {
        --phoenix-aspect-ratio: 56.25%;
    }

    .ratio-lg-9x16 {
        --phoenix-aspect-ratio: 177.7777777778%;
    }

    .ratio-lg-21x9 {
        --phoenix-aspect-ratio: 42.8571428571%;
    }

    .ratio-lg-9x21 {
        --phoenix-aspect-ratio: 233.3333333333%;
    }

    .ratio-lg-9x32 {
        --phoenix-aspect-ratio: 355.5555555556%;
    }

    .ratio-lg-32x9 {
        --phoenix-aspect-ratio: 28.125%;
    }
}
/* Extra large */
@media (min-width: 1200px) {
    .ratio-xl-1x1 {
        --phoenix-aspect-ratio: 100%;
    }

    .ratio-xl-1x2 {
        --phoenix-aspect-ratio: 200%;
    }

    .ratio-xl-2x1 {
        --phoenix-aspect-ratio: 50%;
    }

    .ratio-xl-1x3 {
        --phoenix-aspect-ratio: 300%;
    }

    .ratio-xl-3x1 {
        --phoenix-aspect-ratio: 33.3333333333%;
    }

    .ratio-xl-1x4 {
        --phoenix-aspect-ratio: 400%;
    }

    .ratio-xl-4x1 {
        --phoenix-aspect-ratio: 25%;
    }

    .ratio-xl-1x5 {
        --phoenix-aspect-ratio: 500%;
    }

    .ratio-xl-5x1 {
        --phoenix-aspect-ratio: 20%;
    }

    .ratio-xl-3x2 {
        --phoenix-aspect-ratio: 66.6666666667%;
    }

    .ratio-xl-2x3 {
        --phoenix-aspect-ratio: 150%;
    }

    .ratio-xl-3x4 {
        --phoenix-aspect-ratio: 133.3333333333%;
    }

    .ratio-xl-4x3 {
        --phoenix-aspect-ratio: 75%;
    }

    .ratio-xl-16x9 {
        --phoenix-aspect-ratio: 56.25%;
    }

    .ratio-xl-9x16 {
        --phoenix-aspect-ratio: 177.7777777778%;
    }

    .ratio-xl-21x9 {
        --phoenix-aspect-ratio: 42.8571428571%;
    }

    .ratio-xl-9x21 {
        --phoenix-aspect-ratio: 233.3333333333%;
    }

    .ratio-xl-9x32 {
        --phoenix-aspect-ratio: 355.5555555556%;
    }

    .ratio-xl-32x9 {
        --phoenix-aspect-ratio: 28.125%;
    }
}
/* Extra extra large */
@media (min-width: 1400px) {
    .ratio-xxl-1x1 {
        --phoenix-aspect-ratio: 100%;
    }

    .ratio-xxl-1x2 {
        --phoenix-aspect-ratio: 200%;
    }

    .ratio-xxl-2x1 {
        --phoenix-aspect-ratio: 50%;
    }

    .ratio-xxl-1x3 {
        --phoenix-aspect-ratio: 300%;
    }

    .ratio-xxl-3x1 {
        --phoenix-aspect-ratio: 33.3333333333%;
    }

    .ratio-xxl-1x4 {
        --phoenix-aspect-ratio: 400%;
    }

    .ratio-xxl-4x1 {
        --phoenix-aspect-ratio: 25%;
    }

    .ratio-xxl-1x5 {
        --phoenix-aspect-ratio: 500%;
    }

    .ratio-xxl-5x1 {
        --phoenix-aspect-ratio: 20%;
    }

    .ratio-xxl-3x2 {
        --phoenix-aspect-ratio: 66.6666666667%;
    }

    .ratio-xxl-2x3 {
        --phoenix-aspect-ratio: 150%;
    }

    .ratio-xxl-3x4 {
        --phoenix-aspect-ratio: 133.3333333333%;
    }

    .ratio-xxl-4x3 {
        --phoenix-aspect-ratio: 75%;
    }

    .ratio-xxl-16x9 {
        --phoenix-aspect-ratio: 56.25%;
    }

    .ratio-xxl-9x16 {
        --phoenix-aspect-ratio: 177.7777777778%;
    }

    .ratio-xxl-21x9 {
        --phoenix-aspect-ratio: 42.8571428571%;
    }

    .ratio-xxl-9x21 {
        --phoenix-aspect-ratio: 233.3333333333%;
    }

    .ratio-xxl-9x32 {
        --phoenix-aspect-ratio: 355.5555555556%;
    }

    .ratio-xxl-32x9 {
        --phoenix-aspect-ratio: 28.125%;
    }

    .h-0px {
        height: 0 !important
    }

    .h-xs-0px {
        height: 0 !important
    }

    @media (min-width: 576px) {
        .h-sm-0px {
            height: 0 !important
        }
    }

    @media (min-width: 768px) {
        .h-md-0px {
            height: 0 !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-0px {
            height: 0 !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-0px {
            height: 0 !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-0px {
            height: 0 !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-0px {
            height: 0 !important
        }
    }

    .h-50px {
        height: 50px !important
    }

    .h-xs-50px {
        height: 50px !important
    }

    @media (min-width: 576px) {
        .h-sm-50px {
            height: 50px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-50px {
            height: 50px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-50px {
            height: 50px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-50px {
            height: 50px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-50px {
            height: 50px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-50px {
            height: 50px !important
        }
    }

    .h-100px {
        height: 100px !important
    }

    .h-xs-100px {
        height: 100px !important
    }

    @media (min-width: 576px) {
        .h-sm-100px {
            height: 100px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-100px {
            height: 100px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-100px {
            height: 100px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-100px {
            height: 100px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-100px {
            height: 100px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-100px {
            height: 100px !important
        }
    }

    .h-150px {
        height: 150px !important
    }

    .h-xs-150px {
        height: 150px !important
    }

    @media (min-width: 576px) {
        .h-sm-150px {
            height: 150px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-150px {
            height: 150px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-150px {
            height: 150px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-150px {
            height: 150px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-150px {
            height: 150px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-150px {
            height: 150px !important
        }
    }

    .h-200px {
        height: 200px !important
    }

    .h-xs-200px {
        height: 200px !important
    }

    @media (min-width: 576px) {
        .h-sm-200px {
            height: 200px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-200px {
            height: 200px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-200px {
            height: 200px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-200px {
            height: 200px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-200px {
            height: 200px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-200px {
            height: 200px !important
        }
    }

    .h-250px {
        height: 250px !important
    }

    .h-xs-250px {
        height: 250px !important
    }

    @media (min-width: 576px) {
        .h-sm-250px {
            height: 250px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-250px {
            height: 250px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-250px {
            height: 250px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-250px {
            height: 250px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-250px {
            height: 250px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-250px {
            height: 250px !important
        }
    }

    .h-300px {
        height: 300px !important
    }

    .h-xs-300px {
        height: 300px !important
    }

    @media (min-width: 576px) {
        .h-sm-300px {
            height: 300px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-300px {
            height: 300px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-300px {
            height: 300px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-300px {
            height: 300px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-300px {
            height: 300px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-300px {
            height: 300px !important
        }
    }

    .h-350px {
        height: 350px !important
    }

    .h-xs-350px {
        height: 350px !important
    }

    @media (min-width: 576px) {
        .h-sm-350px {
            height: 350px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-350px {
            height: 350px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-350px {
            height: 350px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-350px {
            height: 350px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-350px {
            height: 350px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-350px {
            height: 350px !important
        }
    }

    .h-400px {
        height: 400px !important
    }

    .h-xs-400px {
        height: 400px !important
    }

    @media (min-width: 576px) {
        .h-sm-400px {
            height: 400px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-400px {
            height: 400px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-400px {
            height: 400px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-400px {
            height: 400px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-400px {
            height: 400px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-400px {
            height: 400px !important
        }
    }

    .h-450px {
        height: 450px !important
    }

    .h-xs-450px {
        height: 450px !important
    }

    @media (min-width: 576px) {
        .h-sm-450px {
            height: 450px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-450px {
            height: 450px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-450px {
            height: 450px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-450px {
            height: 450px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-450px {
            height: 450px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-450px {
            height: 450px !important
        }
    }

    .h-500px {
        height: 500px !important
    }

    .h-xs-500px {
        height: 500px !important
    }

    @media (min-width: 576px) {
        .h-sm-500px {
            height: 500px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-500px {
            height: 500px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-500px {
            height: 500px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-500px {
            height: 500px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-500px {
            height: 500px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-500px {
            height: 500px !important
        }
    }

    .h-550px {
        height: 550px !important
    }

    .h-xs-550px {
        height: 550px !important
    }

    @media (min-width: 576px) {
        .h-sm-550px {
            height: 550px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-550px {
            height: 550px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-550px {
            height: 550px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-550px {
            height: 550px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-550px {
            height: 550px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-550px {
            height: 550px !important
        }
    }

    .h-600px {
        height: 600px !important
    }

    .h-xs-600px {
        height: 600px !important
    }

    @media (min-width: 576px) {
        .h-sm-600px {
            height: 600px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-600px {
            height: 600px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-600px {
            height: 600px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-600px {
            height: 600px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-600px {
            height: 600px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-600px {
            height: 600px !important
        }
    }

    .h-5px {
        height: 5px !important
    }

    .h-xs-5px {
        height: 5px !important
    }

    @media (min-width: 576px) {
        .h-sm-5px {
            height: 5px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-5px {
            height: 5px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-5px {
            height: 5px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-5px {
            height: 5px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-5px {
            height: 5px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-5px {
            height: 5px !important
        }
    }

    .h-10px {
        height: 10px !important
    }

    .h-xs-10px {
        height: 10px !important
    }

    @media (min-width: 576px) {
        .h-sm-10px {
            height: 10px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-10px {
            height: 10px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-10px {
            height: 10px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-10px {
            height: 10px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-10px {
            height: 10px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-10px {
            height: 10px !important
        }
    }

    .h-15px {
        height: 15px !important
    }

    .h-xs-15px {
        height: 15px !important
    }

    @media (min-width: 576px) {
        .h-sm-15px {
            height: 15px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-15px {
            height: 15px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-15px {
            height: 15px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-15px {
            height: 15px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-15px {
            height: 15px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-15px {
            height: 15px !important
        }
    }

    .h-20px {
        height: 20px !important
    }

    .h-xs-20px {
        height: 20px !important
    }

    @media (min-width: 576px) {
        .h-sm-20px {
            height: 20px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-20px {
            height: 20px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-20px {
            height: 20px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-20px {
            height: 20px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-20px {
            height: 20px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-20px {
            height: 20px !important
        }
    }

    .h-25px {
        height: 25px !important
    }

    .h-xs-25px {
        height: 25px !important
    }

    @media (min-width: 576px) {
        .h-sm-25px {
            height: 25px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-25px {
            height: 25px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-25px {
            height: 25px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-25px {
            height: 25px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-25px {
            height: 25px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-25px {
            height: 25px !important
        }
    }

    .h-30px {
        height: 30px !important
    }

    .h-xs-30px {
        height: 30px !important
    }

    @media (min-width: 576px) {
        .h-sm-30px {
            height: 30px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-30px {
            height: 30px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-30px {
            height: 30px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-30px {
            height: 30px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-30px {
            height: 30px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-30px {
            height: 30px !important
        }
    }

    .h-35px {
        height: 35px !important
    }

    .h-xs-35px {
        height: 35px !important
    }

    @media (min-width: 576px) {
        .h-sm-35px {
            height: 35px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-35px {
            height: 35px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-35px {
            height: 35px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-35px {
            height: 35px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-35px {
            height: 35px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-35px {
            height: 35px !important
        }
    }

    .h-40px {
        height: 40px !important
    }

    .h-xs-40px {
        height: 40px !important
    }

    @media (min-width: 576px) {
        .h-sm-40px {
            height: 40px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-40px {
            height: 40px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-40px {
            height: 40px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-40px {
            height: 40px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-40px {
            height: 40px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-40px {
            height: 40px !important
        }
    }

    .h-45px {
        height: 45px !important
    }

    .h-xs-45px {
        height: 45px !important
    }

    @media (min-width: 576px) {
        .h-sm-45px {
            height: 45px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-45px {
            height: 45px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-45px {
            height: 45px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-45px {
            height: 45px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-45px {
            height: 45px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-45px {
            height: 45px !important
        }
    }

    .h-50px {
        height: 50px !important
    }

    .h-xs-50px {
        height: 50px !important
    }

    @media (min-width: 576px) {
        .h-sm-50px {
            height: 50px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-50px {
            height: 50px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-50px {
            height: 50px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-50px {
            height: 50px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-50px {
            height: 50px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-50px {
            height: 50px !important
        }
    }

    .h-55px {
        height: 55px !important
    }

    .h-xs-55px {
        height: 55px !important
    }

    @media (min-width: 576px) {
        .h-sm-55px {
            height: 55px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-55px {
            height: 55px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-55px {
            height: 55px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-55px {
            height: 55px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-55px {
            height: 55px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-55px {
            height: 55px !important
        }
    }

    .h-60px {
        height: 60px !important
    }

    .h-xs-60px {
        height: 60px !important
    }

    @media (min-width: 576px) {
        .h-sm-60px {
            height: 60px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-60px {
            height: 60px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-60px {
            height: 60px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-60px {
            height: 60px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-60px {
            height: 60px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-60px {
            height: 60px !important
        }
    }

    .h-65px {
        height: 65px !important
    }

    .h-xs-65px {
        height: 65px !important
    }

    @media (min-width: 576px) {
        .h-sm-65px {
            height: 65px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-65px {
            height: 65px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-65px {
            height: 65px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-65px {
            height: 65px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-65px {
            height: 65px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-65px {
            height: 65px !important
        }
    }

    .h-70px {
        height: 70px !important
    }

    .h-xs-70px {
        height: 70px !important
    }

    @media (min-width: 576px) {
        .h-sm-70px {
            height: 70px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-70px {
            height: 70px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-70px {
            height: 70px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-70px {
            height: 70px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-70px {
            height: 70px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-70px {
            height: 70px !important
        }
    }

    .h-75px {
        height: 75px !important
    }

    .h-xs-75px {
        height: 75px !important
    }

    @media (min-width: 576px) {
        .h-sm-75px {
            height: 75px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-75px {
            height: 75px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-75px {
            height: 75px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-75px {
            height: 75px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-75px {
            height: 75px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-75px {
            height: 75px !important
        }
    }

    .h-80px {
        height: 80px !important
    }

    .h-xs-80px {
        height: 80px !important
    }

    @media (min-width: 576px) {
        .h-sm-80px {
            height: 80px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-80px {
            height: 80px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-80px {
            height: 80px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-80px {
            height: 80px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-80px {
            height: 80px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-80px {
            height: 80px !important
        }
    }

    .h-85px {
        height: 85px !important
    }

    .h-xs-85px {
        height: 85px !important
    }

    @media (min-width: 576px) {
        .h-sm-85px {
            height: 85px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-85px {
            height: 85px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-85px {
            height: 85px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-85px {
            height: 85px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-85px {
            height: 85px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-85px {
            height: 85px !important
        }
    }

    .h-90px {
        height: 90px !important
    }

    .h-xs-90px {
        height: 90px !important
    }

    @media (min-width: 576px) {
        .h-sm-90px {
            height: 90px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-90px {
            height: 90px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-90px {
            height: 90px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-90px {
            height: 90px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-90px {
            height: 90px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-90px {
            height: 90px !important
        }
    }

    .h-95px {
        height: 95px !important
    }

    .h-xs-95px {
        height: 95px !important
    }

    @media (min-width: 576px) {
        .h-sm-95px {
            height: 95px !important
        }
    }

    @media (min-width: 768px) {
        .h-md-95px {
            height: 95px !important
        }
    }

    @media (min-width: 992px) {
        .h-lg-95px {
            height: 95px !important
        }
    }

    @media (min-width: 1200px) {
        .h-xl-95px {
            height: 95px !important
        }
    }

    @media (min-width: 1400px) {
        .h-xxl-95px {
            height: 95px !important
        }
    }

    @media (min-width: 1800px) {
        .h-xxxl-95px {
            height: 95px !important
        }
    }
}
/*#endregion*/

.navbar-toggle-icon .toggle-line,
.navbar-toggle-icon:after, .navbar-toggle-icon:before {
    background-color: var(--phoenix-success);
}

.form-label {
    color: var(--bs-gray-800);
    font-size: 13px;
    font-weight: 700;
}

.theme-control-toggle .theme-control-toggle-label,
.theme-control-toggle .theme-control-toggle-label:hover,
.theme-control-toggle .theme-control-toggle-label label {
    background: #fff0;
    background-color: #fff0;
}

    .theme-control-toggle .theme-control-toggle-label:hover {
        color: initial;
    }

.ContentTitle,
.form-label {
    text-transform: capitalize !important;
}

.setting-toggle {
    left: -30px;
    right: auto !important;
    z-index: 5;
    transform: rotate(90deg) !important;
    font-weight: bolder;
}

.lead-details-offcanvas {
    padding: .5rem !important;
}

.card-footer {
    color: var(--phoenix-secondary-color) !important;
}


/*#region PageContent*/

.pb-200 {
    padding-bottom: 198px !important;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    line-height: 2;
}

.EditorHtmlContent ul:not(.list-unstyled),
.AdminEditorHtmlContent ul:not(.list-unstyled),
.footerEditor ul:not(.list-unstyled) {
    list-style: initial;
}

.nav,
.navbar-nav,
.dropdown-menu {
    list-style: none !important;
}

.notContainer_Fluid.pageContent {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pageContent .EditorHtmlContent,
.AdminEditorHtmlContent {
    max-width: 100%;
    overflow: hidden;
}

    #tinymce img:not(.rounded-soft),
    .AdPageContent img:not(.rounded-soft),
    .pageContent .EditorHtmlContent img:not(.rounded-soft),
    .PageNumberTable img:not(.rounded) {
        max-width: 100% !important;
        margin: auto auto;
        /*
            max-width: 98% !important;
        padding: 1rem;
        */
    }

.newspaper-paragraph::first-letter {
    font-size: 3.5em;
    font-weight: bold;
    float: left;
    margin-right: 5px;
    line-height: 1;
}

.wrap-content {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bgImg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: .5rem;
}

.blur-overlay {
    position: absolute;
    width: 100%;
    left: 0;
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 2;
}

/*#endregion*/

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}

.slide-up {
    display: inline-block;
    animation: slide-up 0.5s forwards;
}

/* UI */
@media all {

    /* 内部安全区域，宽高比为4:3 */
    .safe-area-4-3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 将安全区居中 */
        width: 75%; /* 保持4:3宽高比 */
        height: 99%; /* 保持4:3宽高比 */
        outline: 1px dashed #ff000069; /* 安全区域的虚线边框 */
        pointer-events: none; /* 禁止鼠标事件，确保不影响16:9内容的交互 */
    }

    #eZlogo-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .avatar-5xl {
        height: 7rem;
        width: 7rem;
    }

    #scrollTopButton {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
    }

    .ExcelCard *:not(i),
    .rz-cell-data,
    .rz-cell-data *:not(i),
    .stkNumber:not(i), .stkNumber *:not(i),
    .FontNumber:not(i), .FontNumber *:not(i) {
        /*
        font-family: 'Courier New', monospace;
        font-family: monospace !important;
        */
        font-feature-settings: 'tnum';
        letter-spacing: 0;
    }

    .row > .offcanvas,
    .row > .offcanvas-backdrop {
        margin-top: 0;
    }

    .row > .rz-data-grid {
        padding-left: 0;
        padding-right: 0;
    }

    [data-navigation-type=combo] .navbar-top.navbar-expand-lg ~ .content {
        padding-right: 0;
    }

    #navbar_domainLogo {
        height: 22px;
    }

    .navbar-top.navbar-slim .navbar-brand {
        margin-left: -10px;
        color: var(--phoenix-emphasis-color);
    }

    .PageLoading {
        /*
        visibility: hidden;
        */
    }

    .Upper {
        text-transform: uppercase !important;
    }

    .copyBtn {
        cursor: pointer;
    }

    .tooltip {
        z-index: 9999 !important;
    }

    .textareaNoResize {
        resize: none;
    }

    .Scale80-right {
        transform: scale(0.8);
        transform-origin: right center;
    }

    .text-black {
        color: #000 !important;
    }

    #components-reconnect-modal {
        background-color: rgba(0, 0, 0,0) !important;
    }

        #components-reconnect-modal div {
            display: none !important;
        }

        #components-reconnect-modal h5 {
            margin-top: 1px !important;
            color: #000;
            font-size: .5rem;
        }

    .blurBg {
        backdrop-filter: blur(10px);
    }

    [data-bs-theme="dark"] .mud-dialog {
        border: solid 1px rgb(50 50 50 / 88%);
    }

    [data-bs-theme="dark"] .alert {
        /*
        color: #000;
        */
        font-weight: 500;
    }

    [data-navigation-type=horizontal] .navbar-top.navbar-expand-lg .navbar-nav-top .nav-link, [data-navigation-type=dual] .navbar-top.navbar-expand-lg .navbar-nav-top .nav-link, [data-navigation-type=combo] .navbar-top.navbar-expand-lg .navbar-nav-top .nav-link {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .dropdown-profile {
        min-width: 16rem;
    }

    .blurBg {
        backdrop-filter: blur(10px);
    }

    .nav-item.disabled {
        pointer-events: none;
        opacity: .65
    }

    .hand {
        cursor: pointer;
    }

    /*#regon Size*/

    .h-50px {
        height: 50px !important;
    }

    .h-100px {
        height: 100px !important;
    }

    .h-150px {
        height: 150px !important;
    }

    .h-200px {
        height: 200px !important;
    }

    .w-50px {
        width: 50px !important;
    }

    .w-80px {
        width: 80px !important;
    }

    .w-100px {
        width: 100px !important;
    }

    .w-110px {
        width: 105px !important;
    }

    .w-115px {
        width: 115px !important;
    }

    .w-120px {
        width: 120px !important;
    }

    .w-125px {
        width: 125px !important;
    }

    .w-150px {
        width: 150px !important;
    }

    .w-180px {
        width: 180px !important;
    }

    .w-200px {
        width: 200px !important;
    }

    .ts9 {
        transform: scale(0.9);
    }

    .ts8 {
        transform: scale(0.8);
    }

    .ts7 {
        transform: scale(0.7);
    }

    .ts6 {
        transform: scale(0.6);
    }

    .ts5 {
        transform: scale(0.5);
    }

    /*#endregion*/

    .display-6 {
        font-size: calc(1.375rem + 1.5vw);
        font-weight: 700;
        line-height: 1.25
    }

    .fullscreen-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }

    .fullscreen-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        cursor: pointer;
    }

    .loading-overlay {
        z-index: 9999 !important;
    }

    .IFRAMEFOOTER {
        overflow: hidden !important;
    }

    @media (min-width: 992px) {
        .navbar-vertical .navbar-vertical-content .navbar-nav .nav-link.active, .navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-link:hover {
            background-color: var(--wc-black);
        }

        .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg + .navbar.navbar-top ~ .content {
            margin-left: var(--avbar-vertical-width) !important;
        }

        .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg {
            position: fixed;
            width: var(--avbar-vertical-width);
        }

            .navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg .navbar-vertical-footer {
                width: calc(var(--avbar-vertical-width) - 1px);
            }

        .navbar-vertical.navbar-expand-lg .navbar-collapse {
            position: static;
        }
    }
}

/*#region ImagePreview */

#EzChatBoxImagePreViewModal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 改为 hidden，防止滚动条 */
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    /* 禁用文本选择，提升触摸体验 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* 禁用滚动链接 */
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    /* 触摸操作优化 */
    touch-action: none;
}

    #EzChatBoxImagePreViewModal img {
        transform-origin: center center;
        transition: transform 0.1s ease-out;
        /* 图片平滑渲染 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        /* 防止图片被选中 */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        /* 防止图片拖拽 */
        -webkit-user-drag: none;
        -khtml-user-drag: none;
        -moz-user-drag: none;
        -o-user-drag: none;
        user-drag: none;
        /* 指针事件 */
        pointer-events: auto;
        /* 确保图片可以被缩放 */
        max-width: none;
        max-height: none;
        width: auto;
        height: auto;
    }

        /* 当图片被缩放时，改变光标样式 */
        #EzChatBoxImagePreViewModal img.scaled {
            cursor: grab;
        }

            #EzChatBoxImagePreViewModal img.scaled:active {
                cursor: grabbing;
            }

    #EzChatBoxImagePreViewModal .modal-content {
        position: relative;
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    #EzChatBoxImagePreViewModal .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        z-index: 10001; /* 确保关闭按钮在最上层 */
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        #EzChatBoxImagePreViewModal .close:hover,
        #EzChatBoxImagePreViewModal .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
            background: rgba(0,0,0,0.7);
        }

    #EzChatBoxImagePreViewModal .prev, #EzChatBoxImagePreViewModal .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 38px;
        transition: 0.3s;
        user-select: none;
        text-decoration: none;
        z-index: 10001; /* 确保导航按钮在最上层 */
        background: rgba(0,0,0,0.3);
        border-radius: 8px;
    }

    #EzChatBoxImagePreViewModal .prev {
        left: 20px;
    }

    #EzChatBoxImagePreViewModal .next {
        right: 20px;
    }

        #EzChatBoxImagePreViewModal .prev:hover, #EzChatBoxImagePreViewModal .next:hover {
            background-color: rgba(55, 109, 245, 0.6);
            border-radius: 8px;
        }

/* 移动设备优化 */
@media (max-width: 768px) {
    #EzChatBoxImagePreViewModal .close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    #EzChatBoxImagePreViewModal .prev, #EzChatBoxImagePreViewModal .next {
        font-size: 24px;
        padding: 12px;
    }

    #EzChatBoxImagePreViewModal .prev {
        left: 10px;
    }

    #EzChatBoxImagePreViewModal .next {
        right: 10px;
    }
}

#EzChatBoxImagePreViewModal .zoom-indicator {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    z-index: 10001;
    transition: opacity 0.3s ease;
    pointer-events: none;
    min-width: 60px;
    text-align: center;
}

/* 移动设备优化 */
@media (max-width: 768px) {
    #EzChatBoxImagePreViewModal .close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    #EzChatBoxImagePreViewModal .zoom-indicator {
        top: 10px;
        left: 10px;
        font-size: 12px;
        padding: 6px 10px;
    }

    #EzChatBoxImagePreViewModal .prev, #EzChatBoxImagePreViewModal .next {
        font-size: 24px;
        padding: 12px;
    }

    #EzChatBoxImagePreViewModal .prev {
        left: 10px;
    }

    #EzChatBoxImagePreViewModal .next {
        right: 10px;
    }
}

/*#endregion*/

/*Back-end*/
@media all {
    [data-bs-theme=dark] .mud-icon-button {
        color: rgb(255 255 255 / 56%);
    }

    .movingOver {
        background-color: #000;
        color: #ff0;
        transition: background-color 0.5s ease-in-out;
        transition: color 0.5s ease-in-out;
    }

    .tox-statusbar__branding {
        display: none !important;
    }
}

/* C */
@media all {

    .tox-editor-container {
        padding-top: 0 !important;
    }

    .mud-snackbar {
        padding: 0 16px;
    }

    .mud-treeview-item-content {
        padding: 0 8px;
    }

    .mud-button-root:not(.mud-ripple-switch):not(.mud-ripple-icon) {
        background-color: var(--phoenix-body-bg) !important;
        /*
        margin: auto .5rem;
        */
    }

    .mud-input.mud-input-underline:after {
        border-bottom: 1px solid var(--phoenix-body-color);
    }

    .mud-button-text.mud-button-text-primary {
        color: var(--phoenix-danger-light);
        --mud-ripple-color: var(--phoenix-danger-light);
    }


    .mud-treeview.mud-treeview-selected-primary .mud-treeview-item-content.mud-treeview-item-selected {
        color: var(--phoenix-warning);
        font-weight: bolder;
    }

    @media (hover: hover) and (pointer: fine) {
        .mud-input.mud-input-underline:hover:not(.mud-disabled):before {
            border-bottom: 1px solid var(--phoenix-emphasis-color);
        }
    }

    .text-center .mud-input-root-text {
        text-align: center;
    }

    .fileUploadPanel > label {
        width: 100%
    }

    .fileUploadPanel > input[type=file] {
        display: none
    }

    .fileUploadPanel .progress {
        /*
    height: 1px;
        height: 3px;
    */
        margin-top: 3px;
    }

    [data-bs-theme=dark] .mud-picker-calendar-header-day .mud-day-label {
        color: var(--rz-base-50) !important;
    }

    .mud-dialog {
        border: solid 1px rgb(215 210 210);
    }

    .mud-icon-size-medium {
        font-size: 1.1rem;
    }

    .mud-treeview-item-icon {
        margin-inline-end: -8px;
    }

    .mud-dialog .mud-dialog-title {
        padding-bottom: 0;
    }

    .fileUploadPanel .progressThin {
        height: 1px;
    }

    .tox .tox-dropzone,
    .rz-tabview-panels,
    .rz-tabview-nav .rz-tabview-selected {
        background-color: var(--phoenix-navbar-top-menu-bg-color) !important;
        color: var(--phoenix-emphasis-color);
    }

    .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
        background-color: var(--phoenix-body-bg);
        color: rgba(var(--phoenix-secondary-rgb), var(--phoenix-text-opacity));
    }

    .rz-tabview-nav li {
        background-color: var(--phoenix-kanban-ghost-bg);
        color: rgba(var(--phoenix-secondary-rgb), var(--phoenix-text-opacity));
        list-style: none;
    }

    .tox .tox-dialog__header, .tox .tox-dialog__footer {
        padding: 8px 16px 18px 16px !important;
    }

    .tox .tox-dialog__body-content {
        padding: 0 16px !important;
    }

    .tox .tox-editor-header {
        background: var(--phoenix-navbar-top-menu-bg-color) !important;
    }

    .UIFrameworkHeader .rz-textbox {
        height: 25px;
    }

    .CustomAdminRadzenTabs > .rz-tabview-nav {
        margin-bottom: -28px;
        z-index: 50;
    }

        .CustomAdminRadzenTabs > .rz-tabview-nav li {
            margin-bottom: 0px !important;
            border-radius: 5px !important;
            margin-right: -1px !important;
            transform: scale(0.9);
            transform-origin: right center;
        }

            .CustomAdminRadzenTabs > .rz-tabview-nav li a {
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-bottom: 3px !important;
            }

                .CustomAdminRadzenTabs > .rz-tabview-nav li a span {
                    color: var(--phoenix-quaternary-color) !important;
                }

        .CustomAdminRadzenTabs > .rz-tabview-nav > li:first-child {
            margin-right: -11px !important;
        }

    .CustomAdminRadzenTabs .rz-tabview-panels {
        overflow-x: hidden !important;
        border-radius: 18px;
    }

    .CustomAdminRadzenTabs .rz-tabview-selected .CustomAdminRadzenTabsTabClass {
        color: var(--phoenix-primary) !important;
    }

    .CustomAdminRadzenTabs > .rz-tabview-panels > .rz-tabview-panel {
        padding: 0 !important;
        margin-top: -8px;
    }

    @media (max-width: 576px) {

        .mud-dialog-width-full {
            width: 100%;
        }

        .rz-tabview-panel {
            padding: 5px;
        }
    }
}

/* Datatable */
@media all {

    .rz-sortable-column .rzi-sort-desc,
    .rz-sortable-column .rzi-sort-asc {
        color: var(--phoenix-success-darker);
    }

        .rz-sortable-column .rzi-sort-desc:before {
            content: "arrow_drop_up" !important;
        }

        .rz-sortable-column .rzi-sort-asc:before {
            content: "arrow_drop_down" !important;
        }

    .rz-datatable-thead th, .rz-grid-table thead th {
        background: var(--phoenix-navbar-top-menu-bg-color)
    }

    .rz-custom-footer .pageInput {
        margin-right: 0;
        margin-left: auto;
        padding-right: .1rem;
        margin-top: -2.5rem;
        margin-bottom: .1rem;
        transform: scale(0.9);
    }

    .PageNumberTable {
        background-color: var(--phoenix-body-bg);
    }

        .PageNumberTable .rz-pager {
            border-top: solid 1px var(--rz-datatable-border);
            padding-right: 8.8rem;
            padding-top: .5rem;
        }

        .PageNumberTable.TheadHide thead {
            display: none !important;
        }

        .PageNumberTable.TheadHide .rz-datatable {
            border: none;
        }

    .rz-pager-next,
    .rz-pager-last {
        display: none;
    }

    .customPageLastButton.fs-8 {
        padding-top: 10px;
    }

    .rz-pager a, .rz-custom-footer {
        transform: scale(0.9);
        transform-origin: right center;
    }

    .rz-pager-pages {
        margin: 0;
    }

    .rz-pager-summary {
        color: var(--phoenix-secondary-color);
    }

    .rz-datatable {
        border: none;
    }

    .rz-datatable,
    .rz-pager,
    .rz-grid-table-fixed .rz-frozen-cell-left {
        background-color: transparent;
    }

        .rz-datatable tbody tr.rz-data-row td.rz-frozen-cell-left:after, .rz-datatable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:after, .rz-datatable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left:after, .rz-datatable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-left-inner:after {
            z-index: -2;
            background-color: var(--phoenix-body-bg);
        }

    .rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
        color: var(--phoenix-body-highlight-color);
    }

    .rz-datatable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left:before, .rz-datatable tbody tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell-left-inner:before,
    .rz-datatable tbody tr.rz-data-row.rz-state-highlight > td {
        /*
        background-color: var(--phoenix-pagination-active-bg);
        background-color: rgb(var(--phoenix-primary-lighter-rgb), 0.5);
        */
        background-color: var(--phoenix-warning-bg-subtle);
    }

    .rz-pager-page {
        background-color: transparent;
    }

        .rz-pager-page.rz-state-active {
            background-color: rgb(0, 0, 0, 0.90);
        }

    .rz-pager-element, .rz-date-filter-buttons .rz-button, .rz-button-md {
        font-size: 0.78rem;
    }

        .rz-pager-element:not(.rz-state-disabled):hover:not(:active), .rz-button:not(.rz-state-disabled):hover:not(:active) {
            box-shadow: none;
        }

    .rz-datatable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td {
        background-color: var(--phoenix-body-bg);
    }

    .rz-datatable-thead th, .rz-grid-table thead th {
        background-color: rgba(var(--phoenix-body-highlight-bg-rgb)) !important;
    }

    .rz-grid-table-fixed .rz-frozen-cell-left, .rz-grid-table-fixed .rz-frozen-cell-right, .rz-grid-table-fixed .rz-frozen-cell-left-inner, .rz-grid-table-fixed .rz-frozen-cell-right-inner {
        background: var(--rz-grid-frozen-cell-background-color);
    }

    .rz-datatable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data {
        color: var(--rz-grid-hover-color);
    }

    .StkData .rz-datatable {
        min-height: 580px;
    }
    /* border Color */
    .overflow-x-scroll .rz-data-grid-data {
        /*
        border: solid 1px var(--rz-datatable-border);
        cursor: grab;ew-resize
        */
        cursor: grab;
    }

    .rz-data-grid-data.active {
        cursor: ew-resize !important;
    }

    .rz-datatable-data td, .rz-grid-table td {
        border-bottom: solid 1px var(--rz-datatable-border);
    }

        .rz-grid-table thead th:not(:last-child),
        .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) {
            border-right: solid 1px var(--rz-datatable-border);
            border-inline-end: none;
        }

    .PageNumberTable.Slim .rz-grid-table th {
        padding: 0.2rem 0;
    }

    .PageNumberTable.Slim .rz-grid-table td {
        padding: 0.2rem 0.58rem;
    }

    .rz-pager-element, .rz-button-md {
        line-height: 1rem;
        min-height: 1rem;
    }

        .rz-pager-element, .rz-button-md.rz-button-icon-only {
            padding: 0.38rem;
        }
}

@media all {
    .picmo__searchContainer,
    .picmo__preview {
        display: none !important;
    }

    .picmo__picker {
        padding-bottom: .5rem;
    }
}

@media (min-width: 1540px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container, .product-filter-container {
        /* max-width: 1678px;max-width: 1184px; */
        max-width: var(--container-max-width);
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container, .product-filter-container {
        max-width: var(--container-max-width);
    }
}

@media(min-width: 1200px) {
    .display-6 {
        font-size: 2.5rem
    }
}

@media(max-height: 1000px) {
    #navbarVerticalNav {
        padding-bottom: 6rem;
    }
}

/* Mobile（max width 576px） */
@media (max-width: 768px) {
    .rz-pager-next,
    .rz-pager-last {
        display: inherit;
    }

    .customPageLastButton {
        display: none;
    }
}

@media (max-width: 576px) {
    .content {
        padding-left: 0;
        padding-right: 0;
    }
}

.components-reconnect-dialog {
    position: relative;
    background-color: var(--bg-body);
    width: 10rem !important;
    margin: 2vh auto;
    padding: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: components-reconnect-slideUp 1.5scubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-fadeInOpacity 0.5sease-out 0.3s;
    animation-fill-mode: forwards;
    z-index: 10001;
}

    .components-reconnect-dialog .components-rejoining-animation {
        display: none;
    }