﻿/*
rem：相对于 根元素 html 的 font-size（通常 16px）。
em： 相对于 当前元素或父元素 的 font-size。

word-break:  break-word;    允许在“单词内部”断行
white-space: nowrap;        强制所有空白符（空格、换行）都不产生换行，文本必须在一行内排完
border-collapse: separate;  作用：默认 separate 把 table 的边框模型设回“分离模式”，collapse 相邻边框会合并成一条，圆角会被忽略。
border-spacing: 0;          设置“单元格之间”的间隙
display: table;             把当前元素渲染成“表格框”

手机：≤767px
@media (max-width: 767px) {}
平板：768px - 1023px
@media (min-width: 768px) and (max-width: 1023px) { }
桌面：≥1024px
@media (min-width: 1024px) { }

*/
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", Rubik,"Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-serif: "Times New Roman", Times, serif;
    --font-mono: "Fira Code", "Courier New", monospace;

    --color-primary:   #E1000F;
    --color-success:   #43BF58;
    --color-error:     #F2616D;
    --color-warning:   #EF9E4E;

    --color-red:       #FF0000;
    --color-green:     #33cc00;
    --color-blue:      #0000FF;
    --color-yellow:    #FFFF00;
    --color-orange:    #FFA500;
    --color-purple:    #800080;

    --color-white:     #FFFFFF;
    --color-off-white: #FAFAFB;
    --color-dark:      #333333;
    --color-grey:      #808080;
}

/* ===============================
    全局基础样式
    box-sizing: border-box;  让元素的宽度计算包含内边距(padding)和边框(border)，防止实际渲染宽度超出设定值
=============================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html {
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-sans);
    font-size: 16px;
}

 /* inherit 表示继承 */
body {
    font-family: inherit;
    line-height: inherit;
    font-size: 1rem;
    color: var(--color-dark);
    background-color: var(--color-white);
}

@font-face{font-family:__ethno_regular;src:url(ethnocentric-regular.ttf) format("truetype");font-display:swap}
.x-font-ethno{font-family:__ethno_regular;}

/* 容器：保持宽高比 */
.x-aspect-box {
    position: relative;
    width: 100%;
    aspect-ratio: var(--aspect-ratio, 1);
    overflow: hidden !important;
}
/* 填充内容（img / video） */
.x-aspect-box > img,
.x-aspect-box > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

ul,ol { list-style: none; margin: 0; padding: 0; }

/*32px、28px、24px、20px */
h1, h2, h3, h4 {color: #1b365d; margin: 1rem 0 0.5rem 0;}
h1 {font-size:2.0rem; line-height:1.3; font-weight: 700; } 
h2 {font-size:1.75rem; line-height:1.4; font-weight: 600; }
h3 {font-size:1.5rem; line-height:1.5; font-weight: 500; }
h4 {font-size:1.25rem; line-height:1.6; font-weight: 500; }

a {
    text-decoration: none;
    color: var(--color-dark);
    outline: none;
    cursor: pointer;
}
a:hover { color: var(--color-orange); }
.x-a-blue { color: var(--color-blue); }
.x-a-gray { color: var(--color-grey); }

.x-a-white-with-red { color: var(--color-off-white); }
.x-a-white-with-red:hover { color: var(--color-red); }
.x-a-white-with-red.active { color: var(--color-red); }

.x-a-yellow-with-black { color: var(--color-yellow); }
.x-a-yellow-with-black:hover { color: var(--color-dark); }
.x-a-yellow-with-black.active { color: var(--color-dark); }

.x-a-black-with-grey { color: var(--color-dark); }
.x-a-black-with-grey:hover { color: var(--color-grey); }
.x-a-black-with-grey.active { color: var(--color-grey); }

.x-a-black-with-red { color: var(--color-dark); }
.x-a-black-with-red:hover { color: var(--color-red); }
.x-a-black-with-red.active { color: var(--color-red); }

.x-a-black-with-yellow { color: var(--color-dark); }
.x-a-black-with-yellow:hover { color: var(--color-yellow); }
.x-a-black-with-yellow.active { color: var(--color-yellow); }

.x-radius5 { border-radius: 0.3125rem; overflow: hidden; }
.x-radius10 { border-radius: 0.625rem; overflow: hidden; }
.x-radius20 { border-radius: 1.25rem; overflow: hidden; }
.x-round { border-radius: 6.25rem; overflow: hidden; }

/* 文本溢出省略 */
.x-ellipsis__1,
.x-ellipsis__2,
.x-ellipsis__3,
.x-ellipsis__4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.x-ellipsis__1 {-webkit-line-clamp: 1;}
.x-ellipsis__2 {-webkit-line-clamp: 2;}
.x-ellipsis__3 {-webkit-line-clamp: 3;}
.x-ellipsis__4 {-webkit-line-clamp: 4;}

.x-absolute{position: absolute;}
.x-relative{position: relative;}
.x-width-full{width: 100%;}
.x-height-full{height: 100%;}

 /* 保持比例并覆盖容器充满 */
.x-object-cover{object-fit: cover;}

.x-flex__1 { flex: 1; }

.x-column { display: flex; flex-direction: column; }
.x-column-center { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.x-column-h-center { display: flex; flex-direction: column; align-items: center; }
.x-column-v-center { display: flex; flex-direction: column; justify-content: center; }
.x-column-left { display: flex; flex-direction: column; align-items: flex-start; }
.x-column-right { display: flex; flex-direction: column; align-items: flex-end; }
.x-column-top { display: flex; flex-direction: column; justify-content: flex-start; }
.x-column-bottom { display: flex; flex-direction: column; justify-content: flex-end; }


.x-row { display: flex; flex-direction: row; }
.x-row-top { display: flex; flex-direction: row; align-items: flex-start; }
.x-row-wrap { display: flex; flex-direction: row; flex-wrap: wrap; }
.x-row-between-v-center-wrap { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.x-row-center { display: flex; flex-direction: row; align-items: center; justify-content: center; }
.x-row-v-center { display: flex; flex-direction: row; align-items: center; }
.x-row-v-bottom { display: flex; flex-direction: row; align-items: flex-end; }
.x-row-around { display: flex; flex-direction: row; justify-content: space-around; }
.x-row-around-v-center { display: flex; flex-direction: row; justify-content: space-around; align-items: center; }
.x-row-between { display: flex; flex-direction: row; justify-content: space-between; }
.x-row-between-top { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; }
.x-row-between-v-center { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.x-row-between-v-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; }
.x-row-right { display: flex; flex-direction: row; justify-content: flex-end; }
.x-row-right-v-center { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }
.x-row-right-v-bottom { display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end; }

/* 间距 */
.x-p5 { padding: 0.3125rem; }
.x-p10 { padding: 0.625rem; }
.x-p20 { padding: 1.25rem; }
.x-p30 { padding: 1.875rem; }
.x-p40 { padding: 2.5rem; }

.x-pv5 { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
.x-pv10 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.x-pv20 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.x-pv30 { padding-top: 1.875rem; padding-bottom: 1.875rem; }
.x-pv40 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

.x-ph5 { padding-left: 0.3125rem; padding-right: 0.3125rem; }
.x-ph10 { padding-left: 0.625rem; padding-right: 0.625rem; }
.x-ph20 { padding-left: 1.25rem; padding-right: 1.25rem; }
.x-ph30 { padding-left: 1.875rem; padding-right: 1.875rem; }
.x-ph40 { padding-left: 2.5rem; padding-right: 2.5rem; }

.x-pt5 { padding-top: 0.3125rem; }
.x-pt10 { padding-top: 0.625rem; }
.x-pt20 { padding-top: 1.25rem; }
.x-pt30 { padding-top: 1.875rem; }
.x-pt40 { padding-top: 2.5rem; }

.x-pr5 { padding-right: 0.3125rem; }
.x-pr10 { padding-right: 0.625rem; }
.x-pr20 { padding-right: 1.25rem; }
.x-pr30 { padding-right: 1.875rem; }
.x-pr40 { padding-right: 2.5rem; }

.x-pl5 { padding-left: 0.3125rem; }
.x-pl10 { padding-left: 0.625rem; }
.x-pl20 { padding-left: 1.25rem; }
.x-pl30 { padding-left: 1.875rem; }
.x-pl40 { padding-left: 2.5rem; }

.x-pb5 { padding-bottom: 0.3125rem; }
.x-pb10 { padding-bottom: 0.625rem; }
.x-pb20 { padding-bottom: 1.25rem; }
.x-pb30 { padding-bottom: 1.875rem; }
.x-pb40 { padding-bottom: 2.5rem; }

.x-m5 { margin: 0.3125rem; }
.x-m10 { margin: 0.625rem; }
.x-m20 { margin: 1.25rem; }
.x-m30 { margin: 1.875rem; }
.x-m40 { margin: 2.5rem; }

.x-mv5 { margin-top: 0.3125rem; margin-bottom: 0.3125rem; }
.x-mv10 { margin-top: 0.625rem; margin-bottom: 0.625rem; }
.x-mv20 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.x-mv30 { margin-top: 1.875rem; margin-bottom: 1.875rem; }
.x-mv40 { margin-top: 2.5rem; margin-bottom: 2.5rem; }

.x-mh5 { margin-left: 0.3125rem; margin-right: 0.3125rem; }
.x-mh10 { margin-left: 0.625rem; margin-right: 0.625rem; }
.x-mh20 { margin-left: 1.25rem; margin-right: 1.25rem; }
.x-mh30 { margin-left: 1.875rem; margin-right: 1.875rem; }
.x-mh40 { margin-left: 2.5rem; margin-right: 2.5rem; }

.x-ml5 { margin-left: 0.3125rem; }
.x-ml10 { margin-left: 0.625rem; }
.x-ml20 { margin-left: 1.25rem; }
.x-ml30 { margin-left: 1.875rem; }
.x-ml40 { margin-left: 2.5rem; }

.x-mr5 { margin-right: 0.3125rem; }
.x-mr10 { margin-right: 0.625rem; }
.x-mr20 { margin-right: 1.25rem; }
.x-mr30 { margin-right: 1.875rem; }
.x-mr40 { margin-right: 2.5rem; }

.x-mt5 { margin-top: 0.3125rem; }
.x-mt10 { margin-top: 0.625rem; }
.x-mt20 { margin-top: 1.25rem; }
.x-mt30 { margin-top: 1.875rem; }
.x-mt40 { margin-top: 2.5rem; }
.x-mt50 { margin-top: 3.15rem; }
.x-mt60 { margin-top: 3.75rem; }

.x-mb5 { margin-bottom: 0.3125rem; }
.x-mb10 { margin-bottom: 0.625rem; }
.x-mb20 { margin-bottom: 1.25rem; }
.x-mb30 { margin-bottom: 1.875rem; }
.x-mb40 { margin-bottom: 2.5rem; }
.x-mb50 { margin-bottom: 3.15rem; }
.x-mb60 { margin-bottom: 3.75rem; }


/* ===============================
   统一文本类的基础行高（添加字体平滑处理）
=============================== */
[class^="x-text"], [class*=" x-text"] {
    line-height: 1.6;
    font-weight: 400;
    color: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 字体大小（相对 body 的 16px） */
.x-text8  { font-size: 0.5rem;   line-height: 1.6; }
.x-text10 { font-size: 0.625rem; line-height: 1.6; }
.x-text12 { font-size: 0.75rem;  line-height: 1.6; }
.x-text14 { font-size: 0.875rem; line-height: 1.5; }
.x-text16 { font-size: 1rem;     line-height: 1.6; }
.x-text18 { font-size: 1.125rem; line-height: 1.6; }
.x-text20 { font-size: 1.25rem;  line-height: 1.5; }
.x-text22 { font-size: 1.375rem; line-height: 1.5; }
.x-text24 { font-size: 1.5rem;   line-height: 1.55; }
.x-text26 { font-size: 1.625rem; line-height: 1.5; }
.x-text28 { font-size: 1.75rem;  line-height: 1.45; }
.x-text30 { font-size: 1.875rem; line-height: 1.4; }
.x-text34 { font-size: 2.125rem; line-height: 1.35; }
.x-text38 { font-size: 2.375rem; line-height: 1.3; }
.x-text40 { font-size: 2.5rem;   line-height: 1.25; }
.x-text44 { font-size: 2.75rem;  line-height: 1.25; }
.x-text48 { font-size: 3rem;     line-height: 1.2; }
.x-text50 { font-size: 3.125rem; line-height: 1.2; }
.x-text54 { font-size: 3.375rem; line-height: 1.2; }
.x-text58 { font-size: 3.625rem; line-height: 1.18; }
.x-text60 { font-size: 3.75rem;  line-height: 1.18; }


/* 文本样式 */
.x-textCenter { text-align: center; }
.x-textRight { text-align: right; }
.x-textBold { font-weight: 700; }
.x-textNormal { font-weight: 400; }
.x-textItalic { font-style: italic; }
.x-textDelete { text-decoration: line-through; }

.x-textWhite { color: var(--color-off-white); }
.x-textGrey { color: var(--color-grey); }
.x-textDark { color: var(--color-dark); }
.x-textRed { color: var(--color-red); }
.x-textBlue { color: var(--color-blue); }
.x-textGreen { color: var(--color-green); }
.x-textYellow { color: var(--color-yellow); }
.x-textOrange { color: var(--color-orange); }
.x-textPurple { color: var(--color-purple); }


/* 其它 */
.x-bg-gray { background-color: #ededed; }
.x-border-gray { border: 1px #eeeeee solid; }
.x-background-yellow {
    background-color: var(--color-yellow) !important;
}


/* 当加载中时禁止滚动与点击 */
body.x-no-scroll {
    overflow: hidden !important;
    pointer-events: none;
    touch-action: none;
}
/* Loading 遮罩 与 禁止点击 */
.x-loading-overlay {
    position: fixed;
    inset: 0;

    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    transition: opacity 0.3s ease;
}
/* 激活状态 */
.x-loading-overlay.active {
    display: flex;
    backdrop-filter: blur(3px);
    opacity: 1;
}
.x-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #cccccc;
    border-top-color: #0078d4;
    border-radius: 50%;
    animation: x-spin 0.8s linear infinite;
}
@keyframes x-spin {
    to {
        transform: rotate(360deg);
    }
}



/* 
1. 常见断点（通用方案）：
        手机：@media (max-width: 767px) { ... }
        平板：media (min-width: 768px) and (max-width: 1023px) { ... }
        桌面：@media (min-width: 1024px) { ... }

2. 更细分的方案（Bootstrap 风格）：
        超小屏：(Mobile small): max-width: 575px
          小屏：(Mobile large): min-width: 576px
          中屏：(Tablet): min-width: 768px
          大屏：(Laptop): min-width: 992px
        超大屏：(Desktop / Wide monitor): min-width: 1200px
        更宽屏：(4K 等): min-width: 1400px 或 1536px

3. MudBlazor 默认：
         手机（Mobile）：xs 0–599px
         平板（Tablet）：sm 600–959px，
                         md 960–1279px
        桌面（Desktop）：lg 1280–1919px，
                         xl ≥1920px

4. 纯 CSS（配合 MudBlazor 使用）
        手机 (<= 599px)         xs
            @media (max-width: 599px) {}

        平板 (600px ~ 1279px)   sm、md
            @media (min-width: 600px) and (max-width: 1279px) {}

        桌面 (>= 1280px)        lg、xl
            @media (min-width: 1280px) {}

*/


/* 手机 (<=599px)  0.875rem ≈14px */
@media (max-width: 599px) {
    html { font-size: 0.875rem; }
    h1 { font-size: 1.875rem; line-height: 1.35; }
    h2 { font-size: 1.625rem; line-height: 1.4; }
    h3 { font-size: 1.375rem; line-height: 1.45; }
    h4 { font-size: 1.125rem; line-height: 1.5; }

    /* 文本稍微紧凑 */
    [class^="x-text"], [class*=" x-text"] {
        line-height: 1.5;
    }
}

/* 平板 (600px ~ 1279px) 0.937rem  ≈15px */
@media (min-width: 600px) and (max-width: 1279px) {
    html { font-size: 0.937rem; }
}

/* 桌面 (>=1280px) */
@media (min-width: 1280px) {
    html { font-size: 1rem; }
}

/* ===============================
   MudBlazor 移动端表格优化
=============================== */
@media (max-width: 900px) {
    .mud-xs-table .mud-table-cell {
        display: flex; 
        flex-direction: column; 
        align-items: flex-start;
        border: none;
        padding: 14px 16px;
    }

    .mud-xs-table .mud-table-head {
        display: none;
    }
}


/* ===============================
国旗
=============================== */
.x-countryFlag i {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    width: 20px;
    height: 13px;
    background-image: url('../images/country_list.png');
    background-repeat: no-repeat;
}
.x-countryFlag i.AD{background-position:0 -18px}.x-countryFlag i.AE{background-position:0 -2232px}.x-countryFlag i.AF{background-position:0 -36px}.x-countryFlag i.AG{background-position:0 -54px}.x-countryFlag i.AI{background-position:0 -72px}.x-countryFlag i.AL{background-position:0 -90px}.x-countryFlag i.AM{background-position:0 -108px}.x-countryFlag i.AN{background-position:0 -126px}.x-countryFlag i.AO{background-position:0 -144px}.x-countryFlag i.AQ{background-position:0 -162px}.x-countryFlag i.AR{background-position:0 -180px}.x-countryFlag i.AS{background-position:0 -198px}.x-countryFlag i.AT{background-position:0 -216px}.x-countryFlag i.AU{background-position:0 -234px}.x-countryFlag i.AW{background-position:0 -252px}.x-countryFlag i.AZ{background-position:0 -270px}.x-countryFlag i.BA{background-position:0 -288px}.x-countryFlag i.BB{background-position:0 -306px}.x-countryFlag i.BD{background-position:0 -324px}.x-countryFlag i.BE{background-position:0 -342px}.x-countryFlag i.BF{background-position:0 -360px}.x-countryFlag i.BG{background-position:0 -378px}.x-countryFlag i.BH{background-position:0 -396px}.x-countryFlag i.BI{background-position:0 -414px}.x-countryFlag i.BJ{background-position:0 -432px}.x-countryFlag i.BM{background-position:0 -450px}.x-countryFlag i.BN{background-position:0 -468px}.x-countryFlag i.BO{background-position:0 -486px}.x-countryFlag i.BR{background-position:0 -504px}.x-countryFlag i.BS{background-position:0 -522px}.x-countryFlag i.BT{background-position:0 -540px}.x-countryFlag i.BV{background-position:0 -558px}.x-countryFlag i.BW{background-position:0 -576px}.x-countryFlag i.BY{background-position:0 -594px}.x-countryFlag i.BZ{background-position:0 -612px}.x-countryFlag i.CA{background-position:0 -630px}.x-countryFlag i.CC{background-position:0 -648px}.x-countryFlag i.CD{background-position:0 -666px}.x-countryFlag i.CF{background-position:0 -684px}.x-countryFlag i.CG{background-position:0 -702px}.x-countryFlag i.CH{background-position:0 -720px}.x-countryFlag i.CI{background-position:0 -738px}.x-countryFlag i.CK{background-position:0 -756px}.x-countryFlag i.CL{background-position:0 -774px}.x-countryFlag i.CM{background-position:0 -792px}.x-countryFlag i.CN{background-position:0 -810px}.x-countryFlag i.CO{background-position:0 -828px}.x-countryFlag i.CR{background-position:0 -846px}.x-countryFlag i.CU{background-position:0 -864px}.x-countryFlag i.CV{background-position:0 -882px}.x-countryFlag i.CX{background-position:0 -900px}.x-countryFlag i.CY{background-position:0 -918px}.x-countryFlag i.CZ{background-position:0 -936px}.x-countryFlag i.DE{background-position:0 -954px}.x-countryFlag i.DJ{background-position:0 -972px}.x-countryFlag i.DK{background-position:0 -990px}.x-countryFlag i.DM{background-position:0 -1008px}.x-countryFlag i.DO{background-position:0 -1026px}.x-countryFlag i.DZ{background-position:0 -1044px}.x-countryFlag i.EC{background-position:0 -1062px}.x-countryFlag i.EE{background-position:0 -1080px}.x-countryFlag i.EG{background-position:0 -1098px}.x-countryFlag i.EH{background-position:0 -1116px}.x-countryFlag i.ER{background-position:0 -1134px}.x-countryFlag i.ES{background-position:0 -1152px}.x-countryFlag i.ET{background-position:0 -1170px}.x-countryFlag i.FI{background-position:0 -1188px}.x-countryFlag i.FJ{background-position:0 -1206px}.x-countryFlag i.FK{background-position:0 -1224px}.x-countryFlag i.FM{background-position:0 -1242px}.x-countryFlag i.FO{background-position:0 -1260px}.x-countryFlag i.FR{background-position:0 -1278px}.x-countryFlag i.FX{background-position:0 -1296px}.x-countryFlag i.GA{background-position:0 -1314px}.x-countryFlag i.UK{background-position:0 -1332px}.x-countryFlag i.GD{background-position:0 -1350px}.x-countryFlag i.GE{background-position:0 -1368px}.x-countryFlag i.GF{background-position:0 -1386px}.x-countryFlag i.GG{background-position:0 -1404px}.x-countryFlag i.GH{background-position:0 -1422px}.x-countryFlag i.GI{background-position:0 -1440px}.x-countryFlag i.GL{background-position:0 -1458px}.x-countryFlag i.GM{background-position:0 -1476px}.x-countryFlag i.GN{background-position:0 -1494px}.x-countryFlag i.GP{background-position:0 -1512px}.x-countryFlag i.GQ{background-position:0 -1530px}.x-countryFlag i.GR{background-position:0 -1548px}.x-countryFlag i.GS{background-position:0 -1566px}.x-countryFlag i.GT{background-position:0 -1584px}.x-countryFlag i.GU{background-position:0 -1602px}.x-countryFlag i.GW{background-position:0 -1620px}.x-countryFlag i.GY{background-position:0 -1638px}.x-countryFlag i.HK{background-position:0 -1656px}.x-countryFlag i.HM{background-position:0 -1674px}.x-countryFlag i.HN{background-position:0 -1692px}.x-countryFlag i.HR{background-position:0 -1710px}.x-countryFlag i.HT{background-position:0 -1728px}.x-countryFlag i.HU{background-position:0 -1746px}.x-countryFlag i.ID{background-position:0 -1764px}.x-countryFlag i.IE{background-position:0 -1782px}.x-countryFlag i.IL{background-position:0 -1800px}.x-countryFlag i.IN{background-position:0 -1818px}
.x-countryFlag i.IO{background-position:0 -1836px}.x-countryFlag i.IQ{background-position:0 -1854px}.x-countryFlag i.IR{background-position:0 -1872px}.x-countryFlag i.IS{background-position:0 -1890px}.x-countryFlag i.IT{background-position:0 -1908px}.x-countryFlag i.JE{background-position:0 -1926px}.x-countryFlag i.JM{background-position:0 -1944px}.x-countryFlag i.JO{background-position:0 -1962px}.x-countryFlag i.JP{background-position:0 -1980px}.x-countryFlag i.KE{background-position:0 -1998px}.x-countryFlag i.KG{background-position:0 -2016px}.x-countryFlag i.KH{background-position:0 -2034px}.x-countryFlag i.KI{background-position:0 -2052px}.x-countryFlag i.KM{background-position:0 -2070px}.x-countryFlag i.KN{background-position:0 -2088px}.x-countryFlag i.KP{background-position:0 -2106px}.x-countryFlag i.KR{background-position:0 -2124px}.x-countryFlag i.KW{background-position:0 -2142px}.x-countryFlag i.KY{background-position:0 -2160px}.x-countryFlag i.KZ{background-position:0 -2178px}.x-countryFlag i.LA{background-position:0 -2196px}.x-countryFlag i.LB{background-position:0 -2214px}.x-countryFlag i.LC{background-position:0 0}.x-countryFlag i.LI{background-position:0 -2250px}.x-countryFlag i.LK{background-position:0 -2268px}.x-countryFlag i.LR{background-position:0 -2286px}.x-countryFlag i.LS{background-position:0 -2304px}.x-countryFlag i.LT{background-position:0 -2322px}.x-countryFlag i.LU{background-position:0 -2340px}.x-countryFlag i.LV{background-position:0 -2358px}.x-countryFlag i.LY{background-position:0 -2376px}.x-countryFlag i.MA{background-position:0 -2394px}.x-countryFlag i.MC{background-position:0 -2412px}.x-countryFlag i.MD{background-position:0 -2430px}.x-countryFlag i.ME{background-position:0 -2448px}.x-countryFlag i.MG{background-position:0 -2466px}.x-countryFlag i.MH{background-position:0 -2484px}.x-countryFlag i.MK{background-position:0 -2502px}.x-countryFlag i.ML{background-position:0 -2520px}.x-countryFlag i.MM{background-position:0 -2538px}.x-countryFlag i.MN{background-position:0 -2556px}.x-countryFlag i.MO{background-position:0 -2574px}.x-countryFlag i.MP{background-position:0 -2592px}.x-countryFlag i.MQ{background-position:0 -2610px}.x-countryFlag i.MR{background-position:0 -2628px}.x-countryFlag i.MS{background-position:0 -2646px}.x-countryFlag i.MT{background-position:0 -2664px}.x-countryFlag i.MU{background-position:0 -2682px}.x-countryFlag i.MV{background-position:0 -2700px}.x-countryFlag i.MW{background-position:0 -2718px}.x-countryFlag i.MX{background-position:0 -2736px}.x-countryFlag i.MY{background-position:0 -2754px}.x-countryFlag i.MZ{background-position:0 -2772px}.x-countryFlag i.NA{background-position:0 -2790px}.x-countryFlag i.NC{background-position:0 -2808px}.x-countryFlag i.NE{background-position:0 -2826px}.x-countryFlag i.NF{background-position:0 -2844px}.x-countryFlag i.NG{background-position:0 -2862px}.x-countryFlag i.NI{background-position:0 -2880px}.x-countryFlag i.NL{background-position:0 -2898px}.x-countryFlag i.NO{background-position:0 -2916px}.x-countryFlag i.NP{background-position:0 -2934px}.x-countryFlag i.NR{background-position:0 -2952px}.x-countryFlag i.NU{background-position:0 -2970px}.x-countryFlag i.NZ{background-position:0 -2988px}.x-countryFlag i.OM{background-position:0 -3006px}.x-countryFlag i.PA{background-position:0 -3024px}.x-countryFlag i.PE{background-position:0 -3042px}.x-countryFlag i.PF{background-position:0 -3060px}.x-countryFlag i.PG{background-position:0 -3078px}.x-countryFlag i.PH{background-position:0 -3096px}.x-countryFlag i.PK{background-position:0 -3114px}.x-countryFlag i.PL{background-position:0 -3132px}.x-countryFlag i.PM{background-position:0 -3150px}.x-countryFlag i.PN{background-position:0 -3168px}.x-countryFlag i.PR{background-position:0 -3186px}.x-countryFlag i.PS{background-position:0 -3204px}.x-countryFlag i.PT{background-position:0 -3222px}.x-countryFlag i.PW{background-position:0 -3240px}.x-countryFlag i.PY{background-position:0 -3258px}.x-countryFlag i.QA{background-position:0 -3276px}.x-countryFlag i.RE{background-position:0 -3294px}.x-countryFlag i.RO{background-position:0 -3312px}.x-countryFlag i.RS{background-position:0 -3330px}.x-countryFlag i.RU{background-position:0 -3348px}.x-countryFlag i.RW{background-position:0 -3366px}.x-countryFlag i.SA{background-position:0 -3384px}.x-countryFlag i.SB{background-position:0 -3402px}.x-countryFlag i.SC{background-position:0 -3420px}.x-countryFlag i.SD{background-position:0 -3438px}.x-countryFlag i.SE{background-position:0 -3456px}.x-countryFlag i.SG{background-position:0 -3474px}.x-countryFlag i.SH{background-position:0 -3492px}.x-countryFlag i.SI{background-position:0 -3510px}.x-countryFlag i.SJ{background-position:0 -3528px}.x-countryFlag i.SK{background-position:0 -3546px}.x-countryFlag i.SL{background-position:0 -3564px}.x-countryFlag i.SM{background-position:0 -3582px}.x-countryFlag i.SN{background-position:0 -3600px}.x-countryFlag i.SO{background-position:0 -3618px}.x-countryFlag i.SR{background-position:0 -3636px}
.x-countryFlag i.ST{background-position:0 -3654px}.x-countryFlag i.SV{background-position:0 -3672px}.x-countryFlag i.SY{background-position:0 -3690px}.x-countryFlag i.SZ{background-position:0 -3708px}.x-countryFlag i.TC{background-position:0 -3726px}.x-countryFlag i.TD{background-position:0 -3744px}.x-countryFlag i.TF{background-position:0 -3762px}.x-countryFlag i.TG{background-position:0 -3780px}.x-countryFlag i.TH{background-position:0 -3798px}.x-countryFlag i.TJ{background-position:0 -3816px}.x-countryFlag i.TK{background-position:0 -3834px}.x-countryFlag i.TM{background-position:0 -3852px}.x-countryFlag i.TN{background-position:0 -3870px}.x-countryFlag i.TO{background-position:0 -3888px}.x-countryFlag i.TP{background-position:0 -3906px}.x-countryFlag i.TR{background-position:0 -3924px}.x-countryFlag i.TT{background-position:0 -3942px}.x-countryFlag i.TV{background-position:0 -3960px}.x-countryFlag i.TW{background-position:0 -3978px}.x-countryFlag i.TZ{background-position:0 -3996px}.x-countryFlag i.UA{background-position:0 -4014px}.x-countryFlag i.UG{background-position:0 -4032px}.x-countryFlag i.UM{background-position:0 -4050px}.x-countryFlag i.UN{background-position:0 -4068px}.x-countryFlag i.US{background-position:0 -4086px}.x-countryFlag i.UY{background-position:0 -4104px}.x-countryFlag i.UZ{background-position:0 -4122px}.x-countryFlag i.VA{background-position:0 -4140px}.x-countryFlag i.VC{background-position:0 -4158px}.x-countryFlag i.VE{background-position:0 -4176px}.x-countryFlag i.VG{background-position:0 -4194px}.x-countryFlag i.VI{background-position:0 -4212px}.x-countryFlag i.VN{background-position:0 -4230px}.x-countryFlag i.VU{background-position:0 -4248px}.x-countryFlag i.WF{background-position:0 -4266px}.x-countryFlag i.WS{background-position:0 -4284px}.x-countryFlag i.XC{background-position:0 -4302px}.x-countryFlag i.XK{background-position:0 -4320px}.x-countryFlag i.YE{background-position:0 -4338px}.x-countryFlag i.YK{background-position:0 -4356px}.x-countryFlag i.YT{background-position:0 -4374px}.x-countryFlag i.YU{background-position:0 -4392px}.x-countryFlag i.ZA{background-position:0 -4410px}.x-countryFlag i.ZM{background-position:0 -4428px}.x-countryFlag i.ZR{background-position:0 -4446px}.x-countryFlag i.ZW{background-position:0 -4464px}



/* ---------- 其它组件样式覆盖 ---------- */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}



/* ===============================
   Quill 编辑器部分
=============================== */

/* 输入区域的高度 */
.x-editor-edit .ql-editor {
    min-height: 200px;
    max-height: 500px;
}

.x-editor-edit hr,
.x-editor-content hr {
    border: none;
    border-top: 1px solid #cccccc;
    margin: 1.5rem 0;
}

/* 自定义插入<hr>按钮图标 或者 使用 FontAwesome / SVG */
.ql-insertHr::before {
    content: "―";
    font-weight: 700;
    font-size: 18px;
}
/*之定义样式必须ql-开头*/
.ql-background-yellow-true {
    background-color: var(--color-yellow) !important;
    color:#000000 !important;
    padding:0 0 1px 0;
}
/* 自定义按钮外观：设置文字高亮样式 */
.ql-backgroundYellow::before {
    content: "🖍";
    font-weight: 700;
    font-size: 18px;
}
/* 鼠标悬停提示 */
.ql-backgroundYellow:hover {
    background-color: #fffde7;
}

/* 1.06rem ≈ 17px*/
.ql-editor {
    font-size: 1.06rem;
    line-height: 1.75;
    color: #333333;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 图片占位符 */
.ql-editor img,
.ql-editor video {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 分隔文字样式 */
.ql-editor span {
    color: #555555;
}

/* 标题层次 */
.ql-editor > h1 { margin: 2.8rem 0 1.2rem; color: #003366; }
.ql-editor > h2 { margin: 2.2rem 0 1rem; color: #003366; }
.ql-editor > h3 { margin: 1.8rem 0 0.8rem; color: #003366; }
.ql-editor > h4 { margin: 1.4rem 0 0.8rem; color: #003366; }


/* 段落与间距 */
.ql-editor > p,
.ql-editor > div{ margin: 1.25rem 0; }

/* 列表基础样式 */
.ql-editor ol,
.ql-editor ul {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}
/* 修复 counter 未定义 */
.ql-editor ol { counter-reset: list-1; }

/* 列表项基础样式 */
.ql-editor li { margin-top: 0; margin-bottom: 0.5rem; }

/* ========== 每层缩进距离 ========== */
.ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 1.5rem;}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3rem;}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 1.5rem;}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 3rem;}

.ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 3rem;}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 4.5rem;}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 3rem;}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 4.5rem;}

.ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 4.5rem;}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 6rem;}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 4.5rem;}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 6rem;}

.ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 6rem;}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 7.5rem;}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 6rem;}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 7.5rem;}

.ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: 7.5rem;}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 9rem;}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 7.5rem;}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 9rem;}

.ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: 9rem;}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 10.5rem;}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 9rem;}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 10.5rem;}

.ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: 10.5rem;}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 12rem;}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 10.5rem;}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 12rem;}

.ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: 12rem;}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 13.5rem;}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 12rem;}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 13.5rem;}

.ql-editor .ql-indent-9:not(.ql-direction-rtl) { padding-left: 13.5rem;}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 15rem;}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 13.5rem;}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 15rem;}


/* 有序列表 都使用阿拉伯数字 */
.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before { content: counter(list-1, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before { content: counter(list-2, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before { content: counter(list-3, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before { content: counter(list-4, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before { content: counter(list-5, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before { content: counter(list-6, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before { content: counter(list-7, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before { content: counter(list-8, decimal) "."; }
.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before { content: counter(list-9, decimal) "."; }

 /* ========= 无序列表层级变化符号 ========= */
.ql-editor li[data-list=bullet].ql-indent-1 > .ql-ui:before { content: "◦"; }
.ql-editor li[data-list=bullet].ql-indent-2 > .ql-ui:before { content: "▪"; }
.ql-editor li[data-list=bullet].ql-indent-3 > .ql-ui:before { content: "▫"; }
.ql-editor li[data-list=bullet].ql-indent-4 > .ql-ui:before { content: "‣"; }
.ql-editor li[data-list=bullet].ql-indent-5 > .ql-ui:before { content: "•"; }
.ql-editor li[data-list=bullet].ql-indent-6 > .ql-ui:before { content: "◦"; }
.ql-editor li[data-list=bullet].ql-indent-7 > .ql-ui:before { content: "▪"; }
.ql-editor li[data-list=bullet].ql-indent-8 > .ql-ui:before { content: "▫"; }
.ql-editor li[data-list=bullet].ql-indent-9 > .ql-ui:before { content: "‣"; }

 /* ========= 无序列表符号边大 ========= */
.ql-editor li[data-list=bullet] > .ql-ui:before {
    content: '\2022';
    font-size: 1.6rem;
    line-height: 1;
    color: #616666;
}
.ql-editor li[data-list=checked] > .ql-ui:before {
    content: '\2611';
    font-size: 1.6rem;
    line-height: 1;
    color: #616666;
}
.ql-editor li[data-list=unchecked] > .ql-ui:before {
    content: '\2610';
    font-size: 1.6rem;
    line-height: 1;
    color: #616666;
}

/* h1 huge 40px、 h3 large 24px、small 12px */
.ql-editor .ql-size-huge { font-size:2.5rem; line-height: 1.2;  color:#333300}
.ql-editor .ql-size-large {font-size:1.5rem; line-height: 1.3;  color:#333300}
.ql-editor .ql-size-small {font-size: .75rem; line-height: 1.4; color:#333300}


/* ============== x-editor-content  文本编辑器相关，使用覆盖方式 ============== */

.x-editor-content .ql-editor {
    padding: 0 !important;
}


/* ===============================
   基本表格样式 (0.937em≈15px)
=============================== */
.x-editor-content .x-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 1.25em 0;
    border-radius: 6px;
    background: #ffffff;
}

/* 滚动条样式 */
.x-editor-content .x-table-scroll::-webkit-scrollbar {
    height: 6px;
}
.x-editor-content .x-table-scroll::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 3px;
}
.x-editor-content .x-table-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* 表格本体 */
.x-editor-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.937em;
    line-height: 1.6;
    background: #fff;
    border: none;
    min-width: 100%;
}

/* 清理内部段落、div 的默认间距 */
.x-editor-content table p,
.x-editor-content table div {
    margin: 0;
    padding: 0;
}

/* 表头样式 */
.x-editor-content thead {
    background: #e9e9e9;
    color: #333333;
    font-weight: 600;
}
.x-editor-content th,
.x-editor-content td {
    padding: 10px 12px;
    text-align: left;
    border: 1px solid #eeeeee;
    vertical-align: middle;
}

/* 行交替与悬停 */
.x-editor-content tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.x-editor-content tbody tr:hover {
    background-color: #f0f7ff;
    transition: background-color 0.25s ease;
}

/* ===============================
   小屏幕优化
=============================== */
@media (max-width: 768px) {
    /* 让滚动容器负责横向滚动，而非 table */
    .x-editor-content .x-table-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* 保证表格宽度随内容自动扩展 */
    .x-editor-content table {
        width: max-content;
        min-width: 100%;
    }

    /* 不换行防止塌陷，可根据需要换成 normal */
    .x-editor-content th,
    .x-editor-content td {
        white-space: nowrap;
    }

    /* 自定义滚动条 (重复定义确保覆盖性) */
    .x-editor-content .x-table-scroll::-webkit-scrollbar {
        height: 6px;
    }
    .x-editor-content .x-table-scroll::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }
}
