:root {
    --black-05: rgba(18, 17, 42, .01);
    --black-10: rgba(18, 17, 42, .03);
    --black-20: rgba(18, 17, 42, .05);
    --black-30: rgba(18, 17, 42, .07);
    --black-40: rgba(6, 6, 31, .09);
    --black-50: rgba(2, 9, 16, .13);
    --black-60: rgba(6, 13, 20, .18);
    --black-70: rgba(6, 13, 20, .29);
    --black-80: rgba(4, 9, 13, .37);
    --black-90: rgba(7, 11, 15, .47);
    --black-100: rgba(6, 8, 10, .57);
    --black-110: rgba(6, 8, 10, .69);
    --black-120: rgba(12, 14, 16, .79);
    --black-130: rgba(14, 15, 17, .86);
    --black-132: rgba(14, 15, 17, .9);
    --black-134: rgba(15, 16, 18, .93);
    --black-140: rgba(15, 16, 18, .96);
    --black-150: #000;
    --grey-05: #fbfbfb;
    --grey-10: #f7f7f9;
    --grey-20: #f3f3f5;
    --grey-30: #edeef0;
    --grey-40: #e6e8eb;
    --grey-50: #dedfe0;
    --grey-60: #d0d2d4;
    --grey-70: #b7b9bd;
    --grey-80: #a2a4a8;
    --grey-90: #8b8c8f;
    --grey-100: #717273;
    --grey-110: #555557;
    --grey-120: #414142;
    --grey-130: #303030;
    --grey-132: #262626;
    --grey-134: #212121;
    --grey-140: #19191a;
    --white-00: #fff;
    --white-05: rgba(255, 255, 255, .99);
    --white-10: rgba(255, 255, 255, .97);
    --white-20: rgba(255, 255, 255, .95);
    --white-30: rgba(255, 255, 255, .93);
    --white-40: rgba(255, 255, 255, .91);
    --white-50: rgba(255, 255, 255, .87);
    --white-60: rgba(255, 255, 255, .82);
    --white-70: rgba(255, 255, 255, .72);
    --white-80: rgba(255, 255, 255, .64);
    --white-90: rgba(255, 255, 255, .55);
    --white-100: rgba(255, 255, 255, .45);
    --white-110: rgba(255, 255, 255, .33);
    --white-120: rgba(255, 255, 255, .26);
    --white-130: rgba(255, 255, 255, .19);
    --white-132: rgba(255, 255, 255, .15);
    --white-134: rgba(255, 255, 255, .13);
    --white-140: rgba(255, 255, 255, .1);
    --white-150: rgba(255, 255, 255, .08);
    --white-160: rgba(255, 255, 255, .05);
    --white-170: rgba(255, 255, 255, .03);
    --brand-light-10: #f4f8ff;
    --brand-light-20: #e5efff;
    --brand-light-30: #d0e3ff;
    --brand-light-40: #aecfff;
    --brand-light-50: #8bbbff;
    --brand-light-60: #6ba8ff;
    --brand-light-70: #5095ff;
    --brand-light-80: #4381ff;
    --brand-light-90: #336fff;
    --brand-light-100: #1f61ff;
    --brand-light-110: #0148dc;
    --brand-light-120: #0032a0;
    --brand-dark-10: #f4f8ff;
    --brand-dark-20: #e5efff;
    --brand-dark-30: #d0e3ff;
    --brand-dark-40: #aecfff;
    --brand-dark-50: #8bbbff;
    --brand-dark-60: #6ba8ff;
    --brand-dark-70: #5095ff;
    --brand-dark-80: #4381ff;
    --brand-dark-90: #336fff;
    --brand-dark-100: #1f61ff;
    --brand-dark-110: #0148dc;
    --brand-dark-120: #0032a0;
    --brand-tsp-light-10: rgba(35, 115, 255, .05);
    --brand-tsp-light-20: rgba(19, 110, 255, .11);
    --brand-tsp-light-30: rgba(8, 108, 255, .19);
    --brand-tsp-light-40: rgba(2, 105, 255, .32);
    --brand-tsp-light-50: rgba(3, 107, 255, .46);
    --brand-tsp-light-60: rgba(4, 108, 255, .59);
    --brand-tsp-dark-10: rgba(99, 129, 176, .1);
    --brand-tsp-dark-20: rgba(99, 129, 176, .2);
    --brand-tsp-dark-30: rgba(99, 129, 176, .3);
    --brand-tsp-dark-40: rgba(99, 129, 176, .4);
    --brand-tsp-dark-50: rgba(99, 129, 176, .5);
    --brand-tsp-dark-60: rgba(99, 129, 176, .6);
    --red-light-10: #fff4f1;
    --red-light-20: #ffebe5;
    --red-light-30: #ffded6;
    --red-light-40: #ffccc1;
    --red-light-50: #ffb3a2;
    --red-light-60: #ff957f;
    --red-light-70: #ff765f;
    --red-light-80: #ff5340;
    --red-light-90: #f43529;
    --red-light-100: #d92400;
    --red-light-110: #af0001;
    --red-light-120: #790d00;
    --red-dark-10: #ffded5;
    --red-dark-20: #ffcfc0;
    --red-dark-30: #ffbdad;
    --red-dark-40: #ffad9c;
    --red-dark-50: #fe9882;
    --red-dark-60: #fc8068;
    --red-dark-70: #f76751;
    --red-dark-80: #f04a39;
    --red-dark-90: #de2f24;
    --red-dark-100: #c1250f;
    --red-dark-110: #9f1c0c;
    --red-dark-120: #742010;
    --red-tsp-light-10: rgba(255, 72, 22, .06);
    --red-tsp-light-20: rgba(255, 73, 19, .11);
    --red-tsp-light-30: rgba(255, 61, 14, .17);
    --red-tsp-light-40: rgba(255, 51, 7, .25);
    --red-tsp-light-50: rgba(255, 50, 4, .37);
    --red-tsp-light-60: rgba(255, 47, 4, .51);
    --red-tsp-dark-10: rgba(188, 108, 92, .1);
    --red-tsp-dark-20: rgba(188, 108, 92, .2);
    --red-tsp-dark-30: rgba(188, 108, 92, .3);
    --red-tsp-dark-40: rgba(188, 108, 92, .4);
    --red-tsp-dark-50: rgba(188, 108, 92, .5);
    --red-tsp-dark-60: rgba(188, 108, 92, .6);
    --orange-light-10: #fff5eb;
    --orange-light-20: #ffeedc;
    --orange-light-30: #ffe3ca;
    --orange-light-40: #ffd6ad;
    --orange-light-50: #ffc68a;
    --orange-light-60: #ffb45d;
    --orange-light-70: #ffa225;
    --orange-light-80: #fe8b00;
    --orange-light-90: #f97316;
    --orange-light-100: #e35d00;
    --orange-light-110: #b24000;
    --orange-light-120: #772b00;
    --orange-dark-10: #fde3ce;
    --orange-dark-20: #fed8b7;
    --orange-dark-30: #fccc9f;
    --orange-dark-40: #fbc184;
    --orange-dark-50: #fdb76a;
    --orange-dark-60: #f9ab4d;
    --orange-dark-70: #f49d2d;
    --orange-dark-80: #f58a18;
    --orange-dark-90: #ee6f17;
    --orange-dark-100: #cc560a;
    --orange-dark-110: #a13d07;
    --orange-dark-120: #6b2904;
    --orange-tsp-light-10: rgba(255, 130, 5, .08);
    --orange-tsp-light-20: rgba(255, 134, 5, .14);
    --orange-tsp-light-30: rgba(255, 122, 3, .21);
    --orange-tsp-light-40: rgba(255, 131, 7, .33);
    --orange-tsp-light-50: rgba(255, 131, 1, .46);
    --orange-tsp-light-60: rgba(255, 138, 2, .64);
    --orange-tsp-dark-10: rgba(195, 141, 76, .1);
    --orange-tsp-dark-20: rgba(195, 141, 76, .2);
    --orange-tsp-dark-30: rgba(195, 141, 76, .3);
    --orange-tsp-dark-40: rgba(195, 141, 76, .4);
    --orange-tsp-dark-50: rgba(195, 141, 76, .5);
    --orange-tsp-dark-60: rgba(195, 141, 76, .6);
    --yellow-light-10: #fbf4e2;
    --yellow-light-20: #faeece;
    --yellow-light-30: #fde9b1;
    --yellow-light-40: #fae090;
    --yellow-light-50: #f8da75;
    --yellow-light-60: #f6d15b;
    --yellow-light-70: #f3c943;
    --yellow-light-80: #f1c024;
    --yellow-light-90: #eab308;
    --yellow-light-100: #d59c00;
    --yellow-light-110: #ab7a00;
    --yellow-light-120: #755100;
    --yellow-dark-10: #f0e3bf;
    --yellow-dark-20: #efdda8;
    --yellow-dark-30: #efd890;
    --yellow-dark-40: #efd378;
    --yellow-dark-50: #eece5e;
    --yellow-dark-60: #edc745;
    --yellow-dark-70: #eabf2c;
    --yellow-dark-80: #e5b512;
    --yellow-dark-90: #d9a607;
    --yellow-dark-100: #c4900d;
    --yellow-dark-110: #9a6e0c;
    --yellow-dark-120: #5e4209;
    --yellow-tsp-light-10: rgba(222, 163, 13, .12);
    --yellow-tsp-light-20: rgba(230, 170, 10, .2);
    --yellow-tsp-light-30: rgba(249, 184, 3, .31);
    --yellow-tsp-light-40: rgba(244, 185, 3, .44);
    --yellow-tsp-light-50: rgba(242, 188, 4, .55);
    --yellow-tsp-light-60: rgba(241, 184, 3, .65);
    --yellow-tsp-dark-10: rgba(186, 157, 57, .1);
    --yellow-tsp-dark-20: rgba(186, 157, 57, .2);
    --yellow-tsp-dark-30: rgba(186, 157, 57, .3);
    --yellow-tsp-dark-40: rgba(186, 157, 57, .4);
    --yellow-tsp-dark-50: rgba(186, 157, 57, .5);
    --yellow-tsp-dark-60: rgba(186, 157, 57, .6);
    --green-light-10: #e4fbe5;
    --green-light-20: #caf8c2;
    --green-light-30: #b0f7a6;
    --green-light-40: #92f388;
    --green-light-50: #7aec6a;
    --green-light-60: #61e054;
    --green-light-70: #4ed23a;
    --green-light-80: #3ec01e;
    --green-light-90: #3fae00;
    --green-light-100: #299a0c;
    --green-light-110: #237800;
    --green-light-120: #184b00;
    --green-dark-10: #cfe6c7;
    --green-dark-20: #bae6ac;
    --green-dark-30: #a0e28e;
    --green-dark-40: #8ddc73;
    --green-dark-50: #7dd45a;
    --green-dark-60: #6bcc46;
    --green-dark-70: #5bc335;
    --green-dark-80: #4bb525;
    --green-dark-90: #42a314;
    --green-dark-100: #2c8a14;
    --green-dark-110: #24650b;
    --green-dark-120: #193e08;
    --green-tsp-light-10: rgba(10, 219, 19, .11);
    --green-tsp-light-20: rgba(34, 226, 1, .24);
    --green-tsp-light-30: rgba(29, 232, 1, .35);
    --green-tsp-light-40: rgba(23, 229, 2, .47);
    --green-tsp-light-50: rgba(30, 223, 2, .59);
    --green-tsp-light-60: rgba(23, 209, 4, .68);
    --green-tsp-dark-10: rgba(124, 193, 98, .1);
    --green-tsp-dark-20: rgba(124, 193, 98, .2);
    --green-tsp-dark-30: rgba(124, 193, 98, .3);
    --green-tsp-dark-40: rgba(124, 193, 98, .4);
    --green-tsp-dark-50: rgba(124, 193, 98, .5);
    --green-tsp-dark-60: rgba(124, 193, 98, .6);
    --cyan-light-10: #eefcfc;
    --cyan-light-20: #c3fafa;
    --cyan-light-30: #97f7fa;
    --cyan-light-40: #64f2f1;
    --cyan-light-50: #2be9e9;
    --cyan-light-60: #03dcdb;
    --cyan-light-70: #01cdcc;
    --cyan-light-80: #06bdbb;
    --cyan-light-90: #06aaa7;
    --cyan-light-100: #009292;
    --cyan-light-110: #01706f;
    --cyan-light-120: #004746;
    --cyan-dark-10: #bee1e1;
    --cyan-dark-20: #a3dcdd;
    --cyan-dark-30: #88d9db;
    --cyan-dark-40: #6bd5d4;
    --cyan-dark-50: #51cece;
    --cyan-dark-60: #30c7c6;
    --cyan-dark-70: #0cbebd;
    --cyan-dark-80: #00b2b0;
    --cyan-dark-90: #00b2b0;
    --cyan-dark-100: #158484;
    --cyan-dark-110: #158484;
    --cyan-dark-120: #0d3938;
    --cyan-tsp-light-10: rgba(12, 212, 212, .07);
    --cyan-tsp-light-20: rgba(5, 234, 234, .24);
    --cyan-tsp-light-30: rgba(5, 234, 234, .24);
    --cyan-tsp-light-40: rgba(1, 234, 232, .61);
    --cyan-tsp-light-50: rgba(3, 229, 229, .84);
    --cyan-tsp-light-60: rgba(0, 220, 219, .99);
    --cyan-tsp-dark-10: rgba(81, 190, 189, .1);
    --cyan-tsp-dark-20: rgba(81, 190, 189, .2);
    --cyan-tsp-dark-30: rgba(81, 190, 189, .3);
    --cyan-tsp-dark-40: rgba(81, 190, 189, .4);
    --cyan-tsp-dark-50: rgba(81, 190, 189, .5);
    --cyan-tsp-dark-60: rgba(81, 190, 189, .6);
    --blue-light-10: #e9f4ff;
    --blue-light-20: #d8ebfe;
    --blue-light-30: #c0e0fe;
    --blue-light-40: #aad6fe;
    --blue-light-50: #92cafe;
    --blue-light-60: #81bffe;
    --blue-light-70: #67b5ff;
    --blue-light-80: #4ea8ff;
    --blue-light-90: #2e9cfe;
    --blue-light-100: #018be5;
    --blue-light-110: #0069b0;
    --blue-light-120: #004572;
    --blue-dark-10: #d0e1f0;
    --blue-dark-20: #c1d9ef;
    --blue-dark-30: #aaceee;
    --blue-dark-40: #96c4ef;
    --blue-dark-50: #81b9f1;
    --blue-dark-60: #6ab0f2;
    --blue-dark-70: #4ba5f2;
    --blue-dark-80: #3798ee;
    --blue-dark-90: #2089e2;
    --blue-dark-100: #0170ba;
    --blue-dark-110: #095189;
    --blue-dark-120: #11314d;
    --blue-tsp-light-10: rgba(11, 133, 255, .09);
    --blue-tsp-light-20: rgba(11, 130, 249, .16);
    --blue-tsp-light-30: rgba(3, 131, 251, .25);
    --blue-tsp-light-40: rgba(5, 134, 252, .34);
    --blue-tsp-light-50: rgba(2, 132, 253, .43);
    --blue-tsp-light-60: rgba(3, 127, 253, .5);
    --blue-tsp-dark-10: rgba(114, 177, 236, .1);
    --blue-tsp-dark-20: rgba(114, 177, 236, .2);
    --blue-tsp-dark-30: rgba(114, 177, 236, .3);
    --blue-tsp-dark-40: rgba(114, 177, 236, .4);
    --blue-tsp-dark-50: rgba(114, 177, 236, .5);
    --blue-tsp-dark-60: rgba(114, 177, 236, .6);
    --purple-light-10: #f7f3ff;
    --purple-light-20: #f2ebff;
    --purple-light-30: #e7dcff;
    --purple-light-40: #dacafd;
    --purple-light-50: #cbb1fc;
    --purple-light-60: #b99afc;
    --purple-light-70: #a97ffc;
    --purple-light-80: #9863ff;
    --purple-light-90: #8848f9;
    --purple-light-100: #8848f9;
    --purple-light-110: #5b00c3;
    --purple-light-120: #3f0089;
    --purple-dark-10: #e3dbfb;
    --purple-dark-20: #dacff8;
    --purple-dark-30: #cfc1f4;
    --purple-dark-40: #c3b1f4;
    --purple-dark-50: #b59df3;
    --purple-dark-60: #ac8cf4;
    --purple-dark-70: #a176f6;
    --purple-dark-80: #9460f8;
    --purple-dark-90: #8648f1;
    --purple-dark-100: #7227dd;
    --purple-dark-110: #5a17af;
    --purple-dark-120: #3f0a7e;
    --purple-tsp-light-10: rgba(95, 15, 255, .05);
    --purple-tsp-light-20: rgba(93, 5, 255, .08);
    --purple-tsp-light-30: rgba(84, 5, 255, .14);
    --purple-tsp-light-40: rgba(79, 3, 245, .21);
    --purple-tsp-light-50: rgba(87, 3, 245, .31);
    --purple-tsp-light-60: rgba(80, 3, 248, .4);
    --purple-tsp-dark-10: rgba(172, 140, 244, .1);
    --purple-tsp-dark-20: rgba(172, 140, 244, .2);
    --purple-tsp-dark-30: rgba(172, 140, 244, .3);
    --purple-tsp-dark-40: rgba(172, 140, 244, .4);
    --purple-tsp-dark-50: rgba(172, 140, 244, .5);
    --purple-tsp-dark-60: rgba(172, 140, 244, .6);
    --magenta-light-10: #fff3f7;
    --magenta-light-20: #ffe8ef;
    --magenta-light-30: #ffdae8;
    --magenta-light-40: #ffc2d9;
    --magenta-light-50: #ffa8ca;
    --magenta-light-60: #ff8bbb;
    --magenta-light-70: #ff6bab;
    --magenta-light-80: #ff469f;
    --magenta-light-90: #f71c96;
    --magenta-light-100: #de147f;
    --magenta-light-110: #b10e69;
    --magenta-light-120: #7e004c;
    --magenta-dark-10: #f6d2de;
    --magenta-dark-20: #f0c5d2;
    --magenta-dark-30: #eeb5cb;
    --magenta-dark-40: #f0a1c0;
    --magenta-dark-50: #f08cb4;
    --magenta-dark-60: #ee75a9;
    --magenta-dark-70: #ef5a9d;
    --magenta-dark-80: #eb3b92;
    --magenta-dark-90: #dc1886;
    --magenta-dark-100: #bb176b;
    --magenta-dark-110: #940f58;
    --magenta-dark-120: #62153e;
    --magenta-tsp-light-10: rgba(255, 15, 95, .05);
    --magenta-tsp-light-20: rgba(255, 25, 95, .1);
    --magenta-tsp-light-30: rgba(255, 8, 102, .15);
    --magenta-tsp-light-40: rgba(255, 1, 97, .24);
    --magenta-tsp-light-50: rgba(255, 6, 104, .35);
    --magenta-tsp-light-60: rgba(255, 3, 107, .46);
    --magenta-tsp-dark-10: rgba(225, 124, 167, .1);
    --magenta-tsp-dark-20: rgba(225, 124, 167, .2);
    --magenta-tsp-dark-30: rgba(225, 124, 167, .3);
    --magenta-tsp-dark-40: rgba(225, 124, 167, .4);
    --magenta-tsp-dark-50: rgba(225, 124, 167, .5);
    --magenta-tsp-dark-60: rgba(225, 124, 167, .6)
}

@media (prefers-color-scheme: light) {
    :root[data-theme-mode=auto] {
        --color--brand: #565dff;
        --color--sub__danger: #ff3c3c;
        --color--sub__tips: #f12d30;
        --color--text__primary: #000;
        --color--text__second1: rgba(0, 0, 0, .4);
        --color--text__second2: rgba(0, 0, 0, .5);
        --color--text__tertiary: rgba(0, 0, 0, .3);
        --color--text__quaternary: rgba(0, 0, 0, .2);
        --color--text__contrary: #fff;
        --color--text__special: #565dff;
        --color--text__second06: rgba(0, 0, 0, .6);
        --color--text__second08: rgba(0, 0, 0, .8);
        --color--text__red1: rgba(254, 0, 0, .8);
        --color--test__tip2: #343141;
        --color--test__tip3: #343141;
        --color--text__cancel: rgba(0, 0, 0, .6);
        --color--text__empty: #636363;
        --color--text--component: rgba(0, 0, 0, .72);
        --color--text--color04: rgba(0, 0, 0, .4);
        --color--text--color05: rgba(0, 0, 0, .3);
        --color--text--color06: rgba(0, 0, 0, .4);
        --color--icon__primary: #000;
        --color--icon__second1: rgba(0, 0, 0, .4);
        --color--icon__tertiary: rgba(0, 0, 0, .2);
        --color--icon__quaternary: #333;
        --color--icon__contrary: #fff;
        --color--icon__arrow: rbga(0, 0, 0, .4);
        --color--icon__toolbar-icon-fill2: rgba(0, 0, 0, .05);
        --color--icon_circle03: rgba(0, 0, 0, .3);
        --color--icon__block: rgba(255, 255, 255, .56);
        --color--icon__checkbox: rgba(0, 0, 0, .8);
        --color--icon__checkbox-all: #565dff;
        --color--icon__checkbox-little: #000;
        --color--icon__checkbox-little-disabled: rgba(0, 0, 0, .2);
        --color--icon__checkbox-non: #8b8c8f;
        --color--icon__down: rgba(0, 0, 0, .4);
        --color--bg__primary: #fff;
        --color--bg__second1-edit: #f2f2f2;
        --color--bg__second2-home: #f2f2f2;
        --color--bg__toolbar: #fff;
        --color--bg__canvas: #f8f8f8;
        --color--bg__split1: #e5e5e5;
        --color--bg__split2: #cdcdcd;
        --color--bg__second2: #f5f5f5;
        --color--bg__ruler: #fff;
        --color--bg__button1: #000;
        --color--bg__button2: rgba(0, 0, 0, .1);
        --color--bg__button3: rgba(0, 0, 0, .6);
        --color--bg__button4: rgba(0, 0, 0, .4);
        --color--bg__button02: rgba(0, 0, 0, .2);
        --color--bg__button03: rgba(0, 0, 0, .3);
        --color--bg__button5: #565dff;
        --color--bg__tint: #f5f5f5;
        --color--bg__progress: #ededed;
        --color--bg__recommended: #f4f4f4;
        --color--bg__pressed: #f2f2f2;
        --color--bg__plugins-icon: #fff;
        --color--bg__button05: rgba(0, 0, 0, .05);
        --color--bg__product_cmp: #fff;
        --color--sp__hover1: #dce1ea;
        --color--sp__hover2: #eaecf6;
        --color--sp__hover3: #dce1ea;
        --color--sp__hover4: rgba(0, 0, 0, .05);
        --color--sp__hover5: #ffe1ff;
        --color--sp__hover6: #dce1ea;
        --color--sp__hover7: #f2f2f2;
        --color--sp__text-selection: rgba(86, 93, 255, .24);
        --color--sp__text-selection2: rgba(47, 156, 255, .3);
        --color--sp__component: #565dff;
        --color--sp__component-second: rgba(86, 93, 255, .5);
        --color--sp__border1: rgba(0, 0, 0, .1);
        --color--sp__border2: #565dff;
        --color--sp__border3: #e5e5e5;
        --color--sp__border02: rgba(0, 0, 0, .2);
        --color--sp__border-secondary: #000;
        --color--sp__border-primary: #fff;
        --color--sp__fill: #fff;
        --color--sp__space-control-line: #f145ff;
        --color--sp__regular: #2f9cff;
        --color--sp__beta: #333;
        --color--sp__blue: #495af0;
        --color--sp__dialog-divider: #e5e5e5;
        --color--sp_team-project-border: #e5e5e5;
        --color--sp__bg-tag: #f2f2f2;
        --color--sp__shadow: rgba(0, 0, 0, .05);
        --color--sp__slider: rgba(120, 120, 128, .2);
        --color--sp__bg-func: rgba(86, 93, 255, .05);
        --color--sp__border4: rgba(0, 0, 0, .1);
        --color--sp__divider: #f5f5f5;
        --color--sp__bg-move: #e4e8ef;
        --color--sp__bg-success: #7ac23c;
        --color--sp__warn: #f2b133;
        --color--sp__arrow: #000;
        --color--bg__white: #fff;
        --color--sp__bg-import: #f2f2f2;
        --color--sp__bg-mask: rgba(0, 0, 0, .5);
        --color--sp_overlay: #33353f;
        --coloe--sp__dialog: #fff;
        --color--sp__bg-publish-card: #f8f8f8;
        --color--sp__border5: #e6e6e6;
        --color--sp__bg-btn: rgba(0, 0, 0, .02);
        --color--sp__border-cancel: rgba(0, 0, 0, .2);
        --color--bg__bg-loading-btn: rgba(0, 0, 0, .6);
        --color--sp__tag-menu: #eaecf6;
        --color--sp__tag-menu-bg: #fff;
        --color--sort-menu-bg: #fff;
        --color--sort-menu-border: #e2e2ea;
        --color--component-bg: rgba(53, 57, 141, .03);
        --color--component-scrollbar: #c4c4c4;
        --color--sp__input-border: rgba(0, 0, 0, .1);
        --color--sp__input-bg: #fff;
        --color--sp__cover-bg06: rgba(255, 255, 255, .6);
        --color--sp__bg-hover: #dce1ea;
        --color--sp__input-bg2: #fff;
        --color--sp__panel-hover: #dce1ea;
        --color--sp__panel-bg: #fff;
        --color--sp__modal-footer-shadow: rgba(0, 0, 0, .05);
        --color--sp_home_left_icon: #767676;
        --skeleton-color--bg: #f2f2f2;
        --skeleton-color--bg-primary: #e1e1e1;
        --skeleton-color--bg-content: #fff;
        --skeleton-color--border: #e5e5e5;
        --skeleton-color--viewport: #f8f8f8;
        --autolayout-constraints-current-box-color-bg: rgba(86, 93, 255, .1);
        --autolayout-constraints-current-box-item-color-hover: rgba(86, 93, 255, .3);
        --plugin-dropdown--bg: #fff;
        --plugin-dropdown--li__hover: #eaecf6;
        --color--multiplayer__dark1: #797dbc;
        --color--multiplayer__bright1: #696cfd;
        --scrollbar-thumb-bg: #d2d3d5;
        --quickframe--bg__active: rgba(0, 0, 0, .03);
        --v2--color-bg-brand-press: var(--brand-light-100);
        --v2--color-bg-brand-normal: var(--brand-light-90);
        --v2--color-bg-brand-hover: var(--brand-light-80);
        --v2--color-bg-brand-disable: var(--brand-light-40);
        --v2--color-brand-light: rgba(51, 111, 255, .1);
        --v2--color-bg-danger-press: var(--red-light-100);
        --v2--color-bg-danger-normal: var(--red-light-90);
        --v2--color-bg-danger-hover: var(--red-light-80);
        --v2--color-bg-danger-disable: var(--red-light-60);
        --v2--color-bg-success-normal: var(--green-light-90);
        --v2--color-bg-warming-normal: var(--orange-light-90);
        --v2--color-bg-info-normal: var(--blue-light-90);
        --v2--color-bg-bodybase: var(--grey-30);
        --v2--color-bg-body: var(--white-00);
        --v2--color-bg-bodyoverlay: var(--grey-10);
        --v2--color-bg-hover: var(--black-20);
        --v2--color-bg-hover-secondary: var(--black-10);
        --v2--color-bg-press: var(--black-30);
        --v2--color-bg-button-active: var(--brand-tsp-light-20);
        --v2--color-bg-button-active-hover: var(--brand-tsp-light-30);
        --v2--color-bg-button-normal: var(--black-10);
        --v2--color-bg-floatbase: var(--grey-30);
        --v2--color-bg-float: var(--white-00);
        --v2--color-bg-floatoverlay: var(--grey-10);
        --v2--color-border-primary: var(--black-30);
        --v2--color-border-secondary: var(--black-30);
        --v2--color-border-avatar: var(--black-10);
        --v2--color-border-button: var(--black-50);
        --v2--color-border-checkbox: var(--grey-132);
        --v2--color-border-float: var(--black-30);
        --v2--color-border-commentavatar: var(--brand-light-90);
        --v2--color-border-brand-normal: var(--brand-light-90);
        --v2--color-border-brand-press: var(--brand-light-100);
        --v2--color-border-brand-hover: var(--brand-light-80);
        --v2--color-border-brand-disable: var(--brand-light-40);
        --v2--color-text-primary: var(--grey-140);
        --v2--color-text-secondary: var(--grey-110);
        --v2--color-text-tertiary: var(--grey-90);
        --v2--color-text-quaternary: var(--grey-70);
        --v2--color-text-onfunctionandbrand: var(--white-00);
        --v2--color-text-onfunctionandbrand-dissable: var(--white-60);
        --v2--color-text-brand-ontips: var(--brand-light-80);
        --v2--color-text-brand-press: var(--brand-light-110);
        --v2--color-text-brand-normal: var(--brand-light-100);
        --v2--color-text-brand-hover: var(--brand-light-80);
        --v2--color-text-brand-tertiary: var(--brand-light-60);
        --v2--color-text-brand-disable: var(--brand-light-40);
        --v2--color-text-danger-press: var(--red-light-110);
        --v2--color-text-danger-normal: var(--red-light-100);
        --v2--color-text-danger-hover: var(--red-light-90);
        --v2--color-text-danger-disable: var(--red-light-60);
        --v2--color-text-success-normal: var(--green-light-100);
        --v2--color-text-warming-normal: var(--orange-light-100);
        --v2--color-text-info-normal: var(--blue-light-100);
        --v2--color-text-px-logo: var(--black-150);
        --v2--color-text-tag-brand: var(--brand-light-100);
        --v2--color-text-tag-green: var(--green-light-100);
        --v2--color-text-tag-red: var(--red-light-100);
        --v2--color-text-tag-yellow: var(--orange-light-100);
        --v2--color-text-tag-blue: var(--blue-light-100);
        --v2--color-text-tag-orange: var(--orange-light-100);
        --v2--color-icon-primary: #414142;
        --v2--color-icon-secondary: #a2a4a8;
        --v2--color-icon-tertiary: #d0d2d4;
        --v2--color-icon-onfunctionandbrand: #fff;
        --v2--color-icon-brand-normal: #336fff;
        --v2--color-icon-brand-press: #245cdb;
        --v2--color-icon-brand-hover: #4e84fd;
        --v2--color-icon-brand-dissable: #bacffd;
        --v2--color-icon-brand-tertiary: #c8d9fe;
        --v2--color-icon-quaternary: #9da7b7;
        --v2--color-bg-x-navigation: var(--grey-10);
        --v2--color-bg-x-navigation-hover: var(--black-10);
        --v2--color-bg-x-navigation-active: var(--black-20);
        --v2--color-bg-mask-primary: var(--black-100);
        --v2--color-bg-mask-secondary: var(--black-40);
        --v2--color-bg-tips-primary: var(--black-140);
        --v2--color-bg-tips-hover: var(--white-130);
        --v2--color-bg-scrollbar-normal: var(--black-60);
        --v2--color-bg-scrollbar-hover: var(--black-80);
        --v2--color-border-input: var(--black-40);
        --v2--color-border-input-focus: var(--brand-light-90);
        --v2--color-border-input-error: var(--red-light-90);
        --v2--color-bg-input: var(--grey-10);
        --v2--color-bg-input-hover: var(--grey-20);
        --v2--color-bg-input-disable: var(--black-10);
        --v2--color-file-menu-fill: rgba(255, 255, 255, .8);
        --v2--color-file-shadow: rgba(128, 128, 128, .1);
        --v2--color-box-shadow: rgba(128, 128, 128, .1);
        --v2--color-scrollbar: #d2d3d5;
        --v2--color-cover-mask-light: transparent;
        --v2--color-multiplayer-brand: var(--brand-light-90);
        --v2--color-multiplayer-purple: var(--purple-light-90);
        --v2--color-multiplayer-orange: var(--orange-light-90);
        --v2--color-multiplayer-cyan: var(--cyan-light-90);
        --v2--color-multiplayer-green: #4bcb08;
        --v2--color-multiplayer-blue: var(--blue-light-90);
        --v2--color-multiplayer-red: #f76b71;
        --v2--color-multiplayer-magenta: var(--magenta-light-90);
        --v2--color-multiplayer-yellow: #daab2b;
        --v2--color-border-x-canvasobject: var(--blue-light-90);
        --v2--color-border-x-canvascomponents: var(--purple-light-90);
        --v2--color-border-x-canvasslice: var(--grey-90);
        --v2--color-border-x-canvasedit: va(--grey-100);
        --v2--color-border-x-controlline: var(--magenta-light-90);
        --v2--color-border-x-spacingmeasurement: var(--red-light-90);
        --v2--color-bg-x-canvas: #efefef;
        --v2--color-bg-px-canvas-loading: var(--grey-10);
        --v2--color-bg-px-canvastext-active: var(--brand-tsp-light-40);
        --v2--color-bg-loading-primary: var(--grey-110);
        --v2--color-bg-loading-secondary: var(--black-30);
        --v2--color-bg-x-layer-primary: var(--brand-light-20);
        --v2--color-bg-x-layer-secondary: var(--brand-light-10);
        --v2--color-text-x-components-quaternary: var(--purple-light-50);
        --v2--color-text-x-components-quinary: var(--grey-30);
        --v2--color-text-x-components-primary: var(--purple-light-100);
        --v2--color-icon-x-components-quaternary: var(--purple-light-30);
        --v2--color-bg-optionstrip-normal: var(--grey-10);
        --v2--color-bg-optionstrip-active: var(--white-00);
        --v2--color-bg-slider: var(--grey-30);
        --v2--color-bg-slider-active: var(--brand-light-90);
        --v2--color-bg-onslider-normal: var(--white-00);
        --v2--color-bg-onslider-active: var(--brand-light-90);
        --v2--color-bg-stepper: var(--white-00);
        --v2--color-text-onstepper-normal: var(--grey-60);
        --v2--color-text-onstepper-hover: var(--grey-140);
        --v2--color-bg-dropdown: var(--white-00);
        --v2--color-border-dropdown: var(--black-30);
        --v2--color-bg-popover: var(--white-00);
        --v2--color-border-popover: var(--black-10);
        --v2--color-bg-toast: var(--black-140);
        --v2--color-border-toast: var(--grey-134);
        --v2--color-border-toast-secondary: var(--white-130);
        --v2--color-bg-page-hover: var(--grey-10);
        --v2--color-bg-page-active: var(--grey-20);
        --v2--color-loading-cover-water: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 51.76%, rgba(255, 255, 255, 0) 100%);
        --v2--color-bg-px-tableheader: var(--grey-05);
        --v2--color-bg-px-multiplestyletext: var(--grey-10);
        --v2--color-bg-tag-brand-primary: var(--brand-light-90);
        --v2--color-bg-tag-brand-secondary: var(--brand-tsp-light-20);
        --v2--color-bg-tag-green-primary: var(--green-light-90);
        --v2--color-bg-tag-green-secondary: var(--green-tsp-light-20);
        --v2--color-bg-tag-red-primary: var(--red-light-90);
        --v2--color-bg-tag-red-secondary: var(--red-tsp-light-20);
        --v2--color-bg-tag-yellow-primary: var(--orange-light-90);
        --v2--color-bg-tag-yellow-secondary: var(--orange-tsp-light-20);
        --v2--color-bg-tag-blue-primary: var(--blue-light-90);
        --v2--color-bg-tag-blue-secondary: var(--blue-tsp-light-20);
        --v2--color-bg-tag-grey-primary: var(--grey-90);
        --v2--color-bg-tag-grey-secondary: var(--black-30);
        --v2--color-bg-tag-purple-primary: var(--purple-light-90);
        --v2--color-bg-tag-purple-secondary: var(--purple-tsp-light-20);
        --v2--color-bg-tag-orange-primary: var(--orange-light-90);
        --v2--color-bg-tag-orange-secondary: var(--orange-tsp-light-20);
        --v2--color-bg-banner-light-blue: #d5f1ff;
        --v2--color-bg-px-banner-blue: var(--brand-light-30);
        --v2--color-bg-px-banner-yellow: var(--yellow-light-90);
        --v2--color-bg-px-banner-orange: var(--orange-light-90);
        --v2--color-bg-px-banner-red: var(--red-light-90);
        --v2--color-bg-px-chat-primary: #e5edff;
        --v2--color-bg-px-chat-secondary: #f3f3f5;
        --v2--color-bg-selected: var(--brand-light-20);
        --v2--color-bg-switch-normal: var(--grey-70);
        --v2--color-bg-switch-disable: var(--grey-40);
        --v2--color-bg-switch-brand-normal: var(--brand-light-90);
        --v2--color-bg-switch-brand-disable: var(--brand-light-40)
    }
}

:root[data-theme-mode=light],
:root {
    --color--brand: #565dff;
    --color--sub__danger: #ff3c3c;
    --color--sub__tips: #f12d30;
    --color--text__primary: #000;
    --color--text__second1: rgba(0, 0, 0, .4);
    --color--text__second2: rgba(0, 0, 0, .5);
    --color--text__tertiary: rgba(0, 0, 0, .3);
    --color--text__quaternary: rgba(0, 0, 0, .2);
    --color--text__contrary: #fff;
    --color--text__special: #565dff;
    --color--text__second06: rgba(0, 0, 0, .6);
    --color--text__second08: rgba(0, 0, 0, .8);
    --color--text__red1: rgba(254, 0, 0, .8);
    --color--test__tip2: #343141;
    --color--test__tip3: #343141;
    --color--text__cancel: rgba(0, 0, 0, .6);
    --color--text__empty: #636363;
    --color--text--component: rgba(0, 0, 0, .72);
    --color--text--color04: rgba(0, 0, 0, .4);
    --color--text--color05: rgba(0, 0, 0, .3);
    --color--text--color06: rgba(0, 0, 0, .4);
    --color--icon__primary: #000;
    --color--icon__second1: rgba(0, 0, 0, .4);
    --color--icon__tertiary: rgba(0, 0, 0, .2);
    --color--icon__quaternary: #333;
    --color--icon__contrary: #fff;
    --color--icon__arrow: rbga(0, 0, 0, .4);
    --color--icon__toolbar-icon-fill2: rgba(0, 0, 0, .05);
    --color--icon_circle03: rgba(0, 0, 0, .3);
    --color--icon__block: rgba(255, 255, 255, .56);
    --color--icon__checkbox: rgba(0, 0, 0, .8);
    --color--icon__checkbox-all: #565dff;
    --color--icon__checkbox-little: #000;
    --color--icon__checkbox-little-disabled: rgba(0, 0, 0, .2);
    --color--icon__checkbox-non: #8b8c8f;
    --color--icon__down: rgba(0, 0, 0, .4);
    --color--bg__primary: #fff;
    --color--bg__second1-edit: #f2f2f2;
    --color--bg__second2-home: #f2f2f2;
    --color--bg__toolbar: #fff;
    --color--bg__canvas: #f8f8f8;
    --color--bg__split1: #e5e5e5;
    --color--bg__split2: #cdcdcd;
    --color--bg__second2: #f5f5f5;
    --color--bg__ruler: #fff;
    --color--bg__button1: #000;
    --color--bg__button2: rgba(0, 0, 0, .1);
    --color--bg__button3: rgba(0, 0, 0, .6);
    --color--bg__button4: rgba(0, 0, 0, .4);
    --color--bg__button02: rgba(0, 0, 0, .2);
    --color--bg__button03: rgba(0, 0, 0, .3);
    --color--bg__button5: #565dff;
    --color--bg__tint: #f5f5f5;
    --color--bg__progress: #ededed;
    --color--bg__recommended: #f4f4f4;
    --color--bg__pressed: #f2f2f2;
    --color--bg__plugins-icon: #fff;
    --color--bg__button05: rgba(0, 0, 0, .05);
    --color--bg__product_cmp: #fff;
    --color--sp__hover1: #dce1ea;
    --color--sp__hover2: #eaecf6;
    --color--sp__hover3: #dce1ea;
    --color--sp__hover4: rgba(0, 0, 0, .05);
    --color--sp__hover5: #ffe1ff;
    --color--sp__hover6: #dce1ea;
    --color--sp__hover7: #f2f2f2;
    --color--sp__text-selection: rgba(86, 93, 255, .24);
    --color--sp__text-selection2: rgba(47, 156, 255, .3);
    --color--sp__component: #565dff;
    --color--sp__component-second: rgba(86, 93, 255, .5);
    --color--sp__border1: rgba(0, 0, 0, .1);
    --color--sp__border2: #565dff;
    --color--sp__border3: #e5e5e5;
    --color--sp__border02: rgba(0, 0, 0, .2);
    --color--sp__border-secondary: #000;
    --color--sp__border-primary: #fff;
    --color--sp__fill: #fff;
    --color--sp__space-control-line: #f145ff;
    --color--sp__regular: #2f9cff;
    --color--sp__beta: #333;
    --color--sp__blue: #495af0;
    --color--sp__dialog-divider: #e5e5e5;
    --color--sp_team-project-border: #e5e5e5;
    --color--sp__bg-tag: #f2f2f2;
    --color--sp__shadow: rgba(0, 0, 0, .05);
    --color--sp__slider: rgba(120, 120, 128, .2);
    --color--sp__bg-func: rgba(86, 93, 255, .05);
    --color--sp__border4: rgba(0, 0, 0, .1);
    --color--sp__divider: #f5f5f5;
    --color--sp__bg-move: #e4e8ef;
    --color--sp__bg-success: #7ac23c;
    --color--sp__warn: #f2b133;
    --color--sp__arrow: #000;
    --color--bg__white: #fff;
    --color--sp__bg-import: #f2f2f2;
    --color--sp__bg-mask: rgba(0, 0, 0, .5);
    --color--sp_overlay: #33353f;
    --coloe--sp__dialog: #fff;
    --color--sp__bg-publish-card: #f8f8f8;
    --color--sp__border5: #e6e6e6;
    --color--sp__bg-btn: rgba(0, 0, 0, .02);
    --color--sp__border-cancel: rgba(0, 0, 0, .2);
    --color--bg__bg-loading-btn: rgba(0, 0, 0, .6);
    --color--sp__tag-menu: #eaecf6;
    --color--sp__tag-menu-bg: #fff;
    --color--sort-menu-bg: #fff;
    --color--sort-menu-border: #e2e2ea;
    --color--component-bg: rgba(53, 57, 141, .03);
    --color--component-scrollbar: #c4c4c4;
    --color--sp__input-border: rgba(0, 0, 0, .1);
    --color--sp__input-bg: #fff;
    --color--sp__cover-bg06: rgba(255, 255, 255, .6);
    --color--sp__bg-hover: #dce1ea;
    --color--sp__input-bg2: #fff;
    --color--sp__panel-hover: #dce1ea;
    --color--sp__panel-bg: #fff;
    --color--sp__modal-footer-shadow: rgba(0, 0, 0, .05);
    --color--sp_home_left_icon: #767676;
    --skeleton-color--bg: #f2f2f2;
    --skeleton-color--bg-primary: #e1e1e1;
    --skeleton-color--bg-content: #fff;
    --skeleton-color--border: #e5e5e5;
    --skeleton-color--viewport: #f8f8f8;
    --autolayout-constraints-current-box-color-bg: rgba(86, 93, 255, .1);
    --autolayout-constraints-current-box-item-color-hover: rgba(86, 93, 255, .3);
    --plugin-dropdown--bg: #fff;
    --plugin-dropdown--li__hover: #eaecf6;
    --color--multiplayer__dark1: #797dbc;
    --color--multiplayer__bright1: #696cfd;
    --scrollbar-thumb-bg: #d2d3d5;
    --quickframe--bg__active: rgba(0, 0, 0, .03);
    --v2--color-bg-brand-press: var(--brand-light-100);
    --v2--color-bg-brand-normal: var(--brand-light-90);
    --v2--color-bg-brand-hover: var(--brand-light-80);
    --v2--color-bg-brand-disable: var(--brand-light-40);
    --v2--color-brand-light: rgba(51, 111, 255, .1);
    --v2--color-bg-danger-press: var(--red-light-100);
    --v2--color-bg-danger-normal: var(--red-light-90);
    --v2--color-bg-danger-hover: var(--red-light-80);
    --v2--color-bg-danger-disable: var(--red-light-60);
    --v2--color-bg-success-normal: var(--green-light-90);
    --v2--color-bg-warming-normal: var(--orange-light-90);
    --v2--color-bg-info-normal: var(--blue-light-90);
    --v2--color-bg-bodybase: var(--grey-30);
    --v2--color-bg-body: var(--white-00);
    --v2--color-bg-bodyoverlay: var(--grey-10);
    --v2--color-bg-hover: var(--black-20);
    --v2--color-bg-hover-secondary: var(--black-10);
    --v2--color-bg-press: var(--black-30);
    --v2--color-bg-button-active: var(--brand-tsp-light-20);
    --v2--color-bg-button-active-hover: var(--brand-tsp-light-30);
    --v2--color-bg-button-normal: var(--black-10);
    --v2--color-bg-floatbase: var(--grey-30);
    --v2--color-bg-float: var(--white-00);
    --v2--color-bg-floatoverlay: var(--grey-10);
    --v2--color-border-primary: var(--black-30);
    --v2--color-border-secondary: var(--black-30);
    --v2--color-border-avatar: var(--black-10);
    --v2--color-border-button: var(--black-50);
    --v2--color-border-checkbox: var(--grey-132);
    --v2--color-border-float: var(--black-30);
    --v2--color-border-commentavatar: var(--brand-light-90);
    --v2--color-border-brand-normal: var(--brand-light-90);
    --v2--color-border-brand-press: var(--brand-light-100);
    --v2--color-border-brand-hover: var(--brand-light-80);
    --v2--color-border-brand-disable: var(--brand-light-40);
    --v2--color-text-primary: var(--grey-140);
    --v2--color-text-secondary: var(--grey-110);
    --v2--color-text-tertiary: var(--grey-90);
    --v2--color-text-quaternary: var(--grey-70);
    --v2--color-text-onfunctionandbrand: var(--white-00);
    --v2--color-text-onfunctionandbrand-dissable: var(--white-60);
    --v2--color-text-brand-ontips: var(--brand-light-80);
    --v2--color-text-brand-press: var(--brand-light-110);
    --v2--color-text-brand-normal: var(--brand-light-100);
    --v2--color-text-brand-hover: var(--brand-light-80);
    --v2--color-text-brand-tertiary: var(--brand-light-60);
    --v2--color-text-brand-disable: var(--brand-light-40);
    --v2--color-text-danger-press: var(--red-light-110);
    --v2--color-text-danger-normal: var(--red-light-100);
    --v2--color-text-danger-hover: var(--red-light-90);
    --v2--color-text-danger-disable: var(--red-light-60);
    --v2--color-text-success-normal: var(--green-light-100);
    --v2--color-text-warming-normal: var(--orange-light-100);
    --v2--color-text-info-normal: var(--blue-light-100);
    --v2--color-text-px-logo: var(--black-150);
    --v2--color-text-tag-brand: var(--brand-light-100);
    --v2--color-text-tag-green: var(--green-light-100);
    --v2--color-text-tag-red: var(--red-light-100);
    --v2--color-text-tag-yellow: var(--orange-light-100);
    --v2--color-text-tag-blue: var(--blue-light-100);
    --v2--color-text-tag-orange: var(--orange-light-100);
    --v2--color-icon-primary: #414142;
    --v2--color-icon-secondary: #a2a4a8;
    --v2--color-icon-tertiary: #d0d2d4;
    --v2--color-icon-onfunctionandbrand: #fff;
    --v2--color-icon-brand-normal: #336fff;
    --v2--color-icon-brand-press: #245cdb;
    --v2--color-icon-brand-hover: #4e84fd;
    --v2--color-icon-brand-dissable: #bacffd;
    --v2--color-icon-brand-tertiary: #c8d9fe;
    --v2--color-icon-quaternary: #9da7b7;
    --v2--color-bg-x-navigation: var(--grey-10);
    --v2--color-bg-x-navigation-hover: var(--black-10);
    --v2--color-bg-x-navigation-active: var(--black-20);
    --v2--color-bg-mask-primary: var(--black-100);
    --v2--color-bg-mask-secondary: var(--black-40);
    --v2--color-bg-tips-primary: var(--black-140);
    --v2--color-bg-tips-hover: var(--white-130);
    --v2--color-bg-scrollbar-normal: var(--black-60);
    --v2--color-bg-scrollbar-hover: var(--black-80);
    --v2--color-border-input: var(--black-40);
    --v2--color-border-input-focus: var(--brand-light-90);
    --v2--color-border-input-error: var(--red-light-90);
    --v2--color-bg-input: var(--grey-10);
    --v2--color-bg-input-hover: var(--grey-20);
    --v2--color-bg-input-disable: var(--black-10);
    --v2--color-file-menu-fill: rgba(255, 255, 255, .8);
    --v2--color-file-shadow: rgba(128, 128, 128, .1);
    --v2--color-box-shadow: rgba(128, 128, 128, .1);
    --v2--color-scrollbar: #d2d3d5;
    --v2--color-cover-mask-light: transparent;
    --v2--color-multiplayer-brand: var(--brand-light-90);
    --v2--color-multiplayer-purple: var(--purple-light-90);
    --v2--color-multiplayer-orange: var(--orange-light-90);
    --v2--color-multiplayer-cyan: var(--cyan-light-90);
    --v2--color-multiplayer-green: #4bcb08;
    --v2--color-multiplayer-blue: var(--blue-light-90);
    --v2--color-multiplayer-red: #f76b71;
    --v2--color-multiplayer-magenta: var(--magenta-light-90);
    --v2--color-multiplayer-yellow: #daab2b;
    --v2--color-border-x-canvasobject: var(--blue-light-90);
    --v2--color-border-x-canvascomponents: var(--purple-light-90);
    --v2--color-border-x-canvasslice: var(--grey-90);
    --v2--color-border-x-canvasedit: va(--grey-100);
    --v2--color-border-x-controlline: var(--magenta-light-90);
    --v2--color-border-x-spacingmeasurement: var(--red-light-90);
    --v2--color-bg-x-canvas: #efefef;
    --v2--color-bg-px-canvas-loading: var(--grey-10);
    --v2--color-bg-px-canvastext-active: var(--brand-tsp-light-40);
    --v2--color-bg-loading-primary: var(--grey-110);
    --v2--color-bg-loading-secondary: var(--black-30);
    --v2--color-bg-x-layer-primary: var(--brand-light-20);
    --v2--color-bg-x-layer-secondary: var(--brand-light-10);
    --v2--color-text-x-components-quaternary: var(--purple-light-50);
    --v2--color-text-x-components-quinary: var(--grey-30);
    --v2--color-text-x-components-primary: var(--purple-light-100);
    --v2--color-icon-x-components-quaternary: var(--purple-light-30);
    --v2--color-bg-optionstrip-normal: var(--grey-10);
    --v2--color-bg-optionstrip-active: var(--white-00);
    --v2--color-bg-slider: var(--grey-30);
    --v2--color-bg-slider-active: var(--brand-light-90);
    --v2--color-bg-onslider-normal: var(--white-00);
    --v2--color-bg-onslider-active: var(--brand-light-90);
    --v2--color-bg-stepper: var(--white-00);
    --v2--color-text-onstepper-normal: var(--grey-60);
    --v2--color-text-onstepper-hover: var(--grey-140);
    --v2--color-bg-dropdown: var(--white-00);
    --v2--color-border-dropdown: var(--black-30);
    --v2--color-bg-popover: var(--white-00);
    --v2--color-border-popover: var(--black-10);
    --v2--color-bg-toast: var(--black-140);
    --v2--color-border-toast: var(--grey-134);
    --v2--color-border-toast-secondary: var(--white-130);
    --v2--color-bg-page-hover: var(--grey-10);
    --v2--color-bg-page-active: var(--grey-20);
    --v2--color-loading-cover-water: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 51.76%, rgba(255, 255, 255, 0) 100%);
    --v2--color-bg-px-tableheader: var(--grey-05);
    --v2--color-bg-px-multiplestyletext: var(--grey-10);
    --v2--color-bg-tag-brand-primary: var(--brand-light-90);
    --v2--color-bg-tag-brand-secondary: var(--brand-tsp-light-20);
    --v2--color-bg-tag-green-primary: var(--green-light-90);
    --v2--color-bg-tag-green-secondary: var(--green-tsp-light-20);
    --v2--color-bg-tag-red-primary: var(--red-light-90);
    --v2--color-bg-tag-red-secondary: var(--red-tsp-light-20);
    --v2--color-bg-tag-yellow-primary: var(--orange-light-90);
    --v2--color-bg-tag-yellow-secondary: var(--orange-tsp-light-20);
    --v2--color-bg-tag-blue-primary: var(--blue-light-90);
    --v2--color-bg-tag-blue-secondary: var(--blue-tsp-light-20);
    --v2--color-bg-tag-grey-primary: var(--grey-90);
    --v2--color-bg-tag-grey-secondary: var(--black-30);
    --v2--color-bg-tag-purple-primary: var(--purple-light-90);
    --v2--color-bg-tag-purple-secondary: var(--purple-tsp-light-20);
    --v2--color-bg-tag-orange-primary: var(--orange-light-90);
    --v2--color-bg-tag-orange-secondary: var(--orange-tsp-light-20);
    --v2--color-bg-banner-light-blue: #d5f1ff;
    --v2--color-bg-px-banner-blue: var(--brand-light-30);
    --v2--color-bg-px-banner-yellow: var(--yellow-light-90);
    --v2--color-bg-px-banner-orange: var(--orange-light-90);
    --v2--color-bg-px-banner-red: var(--red-light-90);
    --v2--color-bg-px-chat-primary: #e5edff;
    --v2--color-bg-px-chat-secondary: #f3f3f5;
    --v2--color-bg-selected: var(--brand-light-20);
    --v2--color-bg-switch-normal: var(--grey-70);
    --v2--color-bg-switch-disable: var(--grey-40);
    --v2--color-bg-switch-brand-normal: var(--brand-light-90);
    --v2--color-bg-switch-brand-disable: var(--brand-light-40)
}

.el-scrollbar,
.el-scrollbar .el-scrollbar__wrap {
    height: 100%
}

.el-scrollbar .el-scrollbar__thumb {
    background: var(--v2--color-bg-scrollbar-normal)
}

.el-scrollbar .el-scrollbar__thumb:hover {
    background: var(--v2--color-bg-scrollbar-hover)
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.inline-table {
    display: inline-table
}

.table-caption {
    display: table-caption
}

.table-cell {
    display: table-cell
}

.table-column {
    display: table-column
}

.table-column-group {
    display: table-column-group
}

.table-footer-group {
    display: table-footer-group
}

.table-header-group {
    display: table-header-group
}

.table-row-group {
    display: table-row-group
}

.table-row {
    display: table-row
}

.flow-root {
    display: flow-root
}

.grid {
    display: grid
}

.inline-grid {
    display: inline-grid
}

.contents {
    display: contents
}

.list-item {
    display: list-item
}

.hidden {
    display: none
}

.overflow__auto {
    overflow: auto
}

.overflow__hidden {
    overflow: hidden
}

.overflow__clip {
    overflow: clip
}

.overflow__visible {
    overflow: visible
}

.overflow__scroll {
    overflow: scroll
}

.overflow-x__auto {
    overflow-x: auto
}

.overflow-y__auto {
    overflow-y: auto
}

.overflow-x__hidden {
    overflow-x: hidden
}

.overflow-y__hidden {
    overflow-y: hidden
}

.overflow-x__clip {
    overflow-x: clip
}

.overflow-y__clip {
    overflow-y: clip
}

.overflow-x__visible {
    overflow-x: visible
}

.overflow-y__visible {
    overflow-y: visible
}

.overflow-x__scroll {
    overflow-x: scroll
}

.overflow-y__scroll {
    overflow-y: scroll
}

.flx {
    display: flex
}

.flx__center {
    display: flex;
    align-items: center;
    justify-content: center
}

.flx-space__between {
    display: flex;
    justify-content: space-between
}

.flx-align__center-space__between {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.flx-align__center {
    display: flex;
    align-items: center
}

.flx-justify__center {
    display: flex;
    justify-content: center
}

.flx-column {
    display: flex;
    flex-direction: column
}

.flx-column-align__center {
    display: flex;
    flex-direction: column;
    align-items: center
}

.flx-column-justify__space__between {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.flx-column__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.flx-xl {
    justify-content: flex-start
}

.flx-xc {
    justify-content: center
}

.flx-xr {
    justify-content: flex-end
}

.flx-yl {
    align-items: flex-start
}

.flx-yc {
    align-items: center
}

.flx-yr {
    align-items: flex-end
}

.flx__1 {
    flex: 1 1 0%
}

.flx__auto {
    flex: 1 1 auto
}

.flx__initial {
    flex: 0 1 auto
}

.flx__none {
    flex: none
}

.flx-grow {
    flex-grow: 1
}

.flx-grow__0 {
    flex-grow: 0
}

.flx-shrink {
    flex-shrink: 1
}

.flx-shrink__0 {
    flex-shrink: 0
}

.flx-order__1 {
    order: 1
}

.flx-order__2 {
    order: 2
}

.flx-order__3 {
    order: 3
}

.flx-order__4 {
    order: 4
}

.flx-order__5 {
    order: 5
}

.flx-order__6 {
    order: 6
}

.flx-order__7 {
    order: 7
}

.flx-order__8 {
    order: 8
}

.flx-order__9 {
    order: 9
}

.grid-gap__0 {
    gap: 0
}

.grid-x-gap__0 {
    column-gap: 0
}

.grid-y-gap__0 {
    row-gap: 0
}

.grid-gap__4 {
    gap: 4px
}

.grid-x-gap__4 {
    column-gap: 4px
}

.grid-y-gap__4 {
    row-gap: 4px
}

.grid-gap__8 {
    gap: 8px
}

.grid-x-gap__8 {
    column-gap: 8px
}

.grid-y-gap__8 {
    row-gap: 8px
}

.grid-gap__16 {
    gap: 16px
}

.grid-x-gap__16 {
    column-gap: 16px
}

.grid-y-gap__16 {
    row-gap: 16px
}

.box__border {
    box-sizing: border-box
}

.box__content {
    box-sizing: content-box
}

.pos__static {
    position: static
}

.pos__fixed {
    position: fixed
}

.pos__absolute {
    position: absolute
}

.pos__relative {
    position: relative
}

.pos__sticky {
    position: sticky
}

.t__0 {
    top: 0
}

.r__0 {
    right: 0
}

.b__0 {
    bottom: 0
}

.l__0 {
    left: 0
}

.y__0 {
    top: 0;
    bottom: 0
}

.x__0 {
    left: 0;
    right: 0
}

.t__1-4 {
    top: 25%
}

.r__1-4 {
    right: 25%
}

.b__1-4 {
    bottom: 25%
}

.l__1-4 {
    left: 25%
}

.y__1-4 {
    top: 25%;
    bottom: 25%
}

.x__1-4 {
    left: 25%;
    right: 25%
}

.t__1-3 {
    top: 33.33333%
}

.r__1-3 {
    right: 33.33333%
}

.b__1-3 {
    bottom: 33.33333%
}

.l__1-3 {
    left: 33.33333%
}

.y__1-3 {
    top: 33.33333%;
    bottom: 33.33333%
}

.x__1-3 {
    left: 33.33333%;
    right: 33.33333%
}

.t__1-2 {
    top: 50%
}

.r__1-2 {
    right: 50%
}

.b__1-2 {
    bottom: 50%
}

.l__1-2 {
    left: 50%
}

.y__1-2 {
    top: 50%;
    bottom: 50%
}

.x__1-2 {
    left: 50%;
    right: 50%
}

.t__2-3 {
    top: 66.66666%
}

.r__2-3 {
    right: 66.66666%
}

.b__2-3 {
    bottom: 66.66666%
}

.l__2-3 {
    left: 66.66666%
}

.y__2-3 {
    top: 66.66666%;
    bottom: 66.66666%
}

.x__2-3 {
    left: 66.66666%;
    right: 66.66666%
}

.t__3-4 {
    top: 75%
}

.r__3-4 {
    right: 75%
}

.b__3-4 {
    bottom: 75%
}

.l__3-4 {
    left: 75%
}

.y__3-4 {
    top: 75%;
    bottom: 75%
}

.x__3-4 {
    left: 75%;
    right: 75%
}

.t__full {
    top: 100%
}

.r__full {
    right: 100%
}

.b__full {
    bottom: 100%
}

.l__full {
    left: 100%
}

.y__full {
    top: 100%;
    bottom: 100%
}

.x__full {
    left: 100%;
    right: 100%
}

.t__auto {
    top: auto
}

.r__auto {
    right: auto
}

.b__auto {
    bottom: auto
}

.l__auto {
    left: auto
}

.y__auto {
    top: auto;
    bottom: auto
}

.x__auto {
    left: auto;
    right: auto
}

.z__0 {
    z-index: 0
}

.z__1 {
    z-index: 1
}

.z__10 {
    z-index: 10
}

.z__100 {
    z-index: 100
}

.z__1000 {
    z-index: 1000
}

.z__auto {
    z-index: auto
}

.border__none {
    border: none
}

.m__0,
.m__0 .m__0,
.m__0__1st:first-child,
.m__0__last:last-child {
    margin: 0
}

.mt__0__1st:first-child,
.mt__0 .mt__0,
.mt__0__last:last-child {
    margin-top: 0
}

.mr__0__1st:first-child,
.mr__0 .mr__0,
.mr__0__last:last-child {
    margin-right: 0
}

.mb__0__1st:first-child,
.mb__0 .mb__0,
.mb__0__last:last-child {
    margin-bottom: 0
}

.ml__0__1st:first-child,
.ml__0 .ml__0,
.ml__0__last:last-child {
    margin-left: 0
}

.my__0__1st:first-child,
.my__0 .my__0,
.my__0__last:last-child {
    margin-top: 0;
    margin-bottom: 0
}

.mx__0__1st:first-child,
.mx__0 .mx__0,
.mx__0__last:last-child {
    margin-left: 0;
    margin-right: 0
}

.m__4 {
    margin: 4px
}

.mt__4 {
    margin-top: 4px
}

.mr__4 {
    margin-right: 4px
}

.mb__4 {
    margin-bottom: 4px
}

.ml__4 {
    margin-left: 4px
}

.my__4 {
    margin-top: 4px;
    margin-bottom: 4px
}

.mx__4 {
    margin-left: 4px;
    margin-right: 4px
}

.m__8 {
    margin: 8px
}

.mt__8 {
    margin-top: 8px
}

.mr__8 {
    margin-right: 8px
}

.mb__8 {
    margin-bottom: 8px
}

.ml__8 {
    margin-left: 8px
}

.my__8 {
    margin-top: 8px;
    margin-bottom: 8px
}

.mx__8 {
    margin-left: 8px;
    margin-right: 8px
}

.m__16 {
    margin: 16px
}

.mt__16 {
    margin-top: 16px
}

.mr__16 {
    margin-right: 16px
}

.mb__16 {
    margin-bottom: 16px
}

.ml__16 {
    margin-left: 16px
}

.my__16 {
    margin-top: 16px;
    margin-bottom: 16px
}

.mx__16 {
    margin-left: 16px;
    margin-right: 16px
}

.m__24 {
    margin: 24px
}

.mt__24 {
    margin-top: 24px
}

.mr__24 {
    margin-right: 24px
}

.mb__24 {
    margin-bottom: 24px
}

.ml__24 {
    margin-left: 24px
}

.my__24 {
    margin-top: 24px;
    margin-bottom: 24px
}

.mx__24 {
    margin-left: 24px;
    margin-right: 24px
}

.m__32 {
    margin: 32px
}

.mt__32 {
    margin-top: 32px
}

.mr__32 {
    margin-right: 32px
}

.mb__32 {
    margin-bottom: 32px
}

.ml__32 {
    margin-left: 32px
}

.my__32 {
    margin-top: 32px;
    margin-bottom: 32px
}

.mx__32 {
    margin-left: 32px;
    margin-right: 32px
}

.m__40 {
    margin: 40px
}

.mt__40 {
    margin-top: 40px
}

.mr__40 {
    margin-right: 40px
}

.mb__40 {
    margin-bottom: 40px
}

.ml__40 {
    margin-left: 40px
}

.my__40 {
    margin-top: 40px;
    margin-bottom: 40px
}

.mx__40 {
    margin-left: 40px;
    margin-right: 40px
}

.m__auto {
    margin: auto
}

.my__auto {
    margin-top: auto;
    margin-bottom: auto
}

.mx__auto {
    margin-left: auto;
    margin-right: auto
}

.mt__auto {
    margin-top: auto
}

.mr__auto {
    margin-right: auto
}

.mb__auto {
    margin-bottom: auto
}

.ml__auto {
    margin-left: auto
}

.p__0__1st:first-child,
.p__0 .p__0,
.p__0__last:last-child {
    padding: 0
}

.pt__0__1st:first-child,
.pt__0 .pt__0,
.pt__0__last:last-child {
    padding-top: 0
}

.pr__0__1st:first-child,
.pr__0 .pr__0,
.pr__0__last:last-child {
    padding-right: 0
}

.pb__0__1st:first-child,
.pb__0 .pb__0,
.pb__0__last:last-child {
    padding-bottom: 0
}

.pl__0__1st:first-child,
.pl__0 .pl__0,
.pl__0__last:last-child {
    padding-left: 0
}

.py__0__1st:first-child,
.py__0 .py__0,
.py__0__last:last-child {
    padding-top: 0;
    padding-bottom: 0
}

.px__0__1st:first-child,
.px__0 .px__0,
.px__0__last:last-child {
    padding-left: 0;
    padding-right: 0
}

.p__4 {
    padding: 4px
}

.pt__4 {
    padding-top: 4px
}

.pr__4 {
    padding-right: 4px
}

.pb__4 {
    padding-bottom: 4px
}

.pl__4 {
    padding-left: 4px
}

.py__4 {
    padding-top: 4px;
    padding-bottom: 4px
}

.px__4 {
    padding-left: 4px;
    padding-right: 4px
}

.p__8 {
    padding: 8px
}

.pt__8 {
    padding-top: 8px
}

.pr__8 {
    padding-right: 8px
}

.pb__8 {
    padding-bottom: 8px
}

.pl__8 {
    padding-left: 8px
}

.py__8 {
    padding-top: 8px;
    padding-bottom: 8px
}

.px__8 {
    padding-left: 8px;
    padding-right: 8px
}

.p__16 {
    padding: 16px
}

.pt__16 {
    padding-top: 16px
}

.pr__16 {
    padding-right: 16px
}

.pb__16 {
    padding-bottom: 16px
}

.pl__16 {
    padding-left: 16px
}

.py__16 {
    padding-top: 16px;
    padding-bottom: 16px
}

.px__16 {
    padding-left: 16px;
    padding-right: 16px
}

.p__24 {
    padding: 24px
}

.pt__24 {
    padding-top: 24px
}

.pr__24 {
    padding-right: 24px
}

.pb__24 {
    padding-bottom: 24px
}

.pl__24 {
    padding-left: 24px
}

.py__24 {
    padding-top: 24px;
    padding-bottom: 24px
}

.px__24 {
    padding-left: 24px;
    padding-right: 24px
}

.p__32 {
    padding: 32px
}

.pt__32 {
    padding-top: 32px
}

.pr__32 {
    padding-right: 32px
}

.pb__32 {
    padding-bottom: 32px
}

.pl__32 {
    padding-left: 32px
}

.py__32 {
    padding-top: 32px;
    padding-bottom: 32px
}

.px__32 {
    padding-left: 32px;
    padding-right: 32px
}

.p__40 {
    padding: 40px
}

.pt__40 {
    padding-top: 40px
}

.pr__40 {
    padding-right: 40px
}

.pb__40 {
    padding-bottom: 40px
}

.pl__40 {
    padding-left: 40px
}

.py__40 {
    padding-top: 40px;
    padding-bottom: 40px
}

.px__40 {
    padding-left: 40px;
    padding-right: 40px
}

.p__auto {
    padding: auto
}

.py__auto {
    padding-top: auto;
    padding-bottom: auto
}

.px__auto {
    padding-left: auto;
    padding-right: auto
}

.pt__auto {
    padding-top: auto
}

.pr__auto {
    padding-right: auto
}

.pb__auto {
    padding-bottom: auto
}

.pl__auto {
    padding-left: auto
}

.border-com__sm {
    border: 1px solid var(--v2--color-border-button)
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.w__0 {
    width: 0
}

.w-auto {
    width: auto
}

.w__p-10 {
    width: 10%
}

.w__p-20 {
    width: 20%
}

.w__p-25 {
    width: 25%
}

.w__p-30 {
    width: 30%
}

.w__p-1-3 {
    width: 33.33333%
}

.w__p-40 {
    width: 40%
}

.w__p-50 {
    width: 50%
}

.w__p-60 {
    width: 60%
}

.w__p-2-3 {
    width: 66.66666%
}

.w__p-70 {
    width: 70%
}

.w__p-80 {
    width: 80%
}

.w__p-90 {
    width: 90%
}

.w__p-100,
.w__p-full {
    width: 100%
}

.h__0 {
    height: 0
}

.h-auto {
    height: auto
}

.h__p-10 {
    height: 10%
}

.h__p-20 {
    height: 20%
}

.h__p-25 {
    height: 25%
}

.h__p-30 {
    height: 30%
}

.h__p-1-3 {
    height: 33.33333%
}

.h__p-40 {
    height: 40%
}

.h__p-50 {
    height: 50%
}

.h__p-60 {
    height: 60%
}

.h__p-2-3 {
    height: 66.66666%
}

.h__p-70 {
    height: 70%
}

.h__p-80 {
    height: 80%
}

.h__p-90 {
    height: 90%
}

.h__p-100,
.h__p-full {
    height: 100%
}

.bg__fixed {
    background-attachment: fixed
}

.bg__local {
    background-attachment: local
}

.bg__scroll {
    background-attachment: scroll
}

.bg__auto {
    background-size: auto
}

.bg__cover {
    background-size: cover
}

.bg__contain {
    background-size: contain
}

.bg__repeat {
    background-repeat: repeat
}

.bg__no-repeat {
    background-repeat: no-repeat
}

.bg__repeat-x {
    background-repeat: repeat-x
}

.bg__repeat-y {
    background-repeat: repeat-y
}

.bg__repeat-round {
    background-repeat: round
}

.bg__repeat-space {
    background-repeat: space
}

.bg__bottom {
    background-position: bottom
}

.bg__center {
    background-position: center
}

.bg__left {
    background-position: left
}

.bg__left-bottom {
    background-position: left bottom
}

.bg__left-top {
    background-position: left top
}

.bg__right {
    background-position: right
}

.bg__right-bottom {
    background-position: right bottom
}

.bg__right-top {
    background-position: right top
}

.bg__top {
    background-position: top
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center
}

.flex-center-colum {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.flex-space-between {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.flex-align-center {
    display: flex;
    align-items: center
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center
}

.px-mask--dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1999;
    background-color: var(--v2--color-bg-mask-primary)
}

.px-mask--card {
    background-color: var(--v2--color-bg-mask-secondary)
}

:root[data-system=mac] {
    --font-weight-regular: 400;
    --font-weight-medium: 500
}

:root[data-system=win],
:root {
    --font-weight-regular: 400;
    --font-weight-medium: 600
}

.text-header1 {
    font-size: 26px;
    line-height: 36px;
    font-weight: var(--font-weight-medium)
}

.text-header2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--font-weight-medium)
}

.text-header3,
.text-header4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: var(--font-weight-medium)
}

.text-title1,
.text-title2 {
    font-size: 16px;
    line-height: 22px;
    font-weight: var(--font-weight-medium)
}

.text-subtitle1 {
    font-size: 16px;
    line-height: 22px
}

.text-subtitle2,
.text-subtitle3 {
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--font-weight-medium)
}

.text-subtitle4 {
    font-size: 14px;
    line-height: 20px;
    font-weight: var(--font-weight-regular)
}

.text-body1,
.text-body2 {
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-weight-medium)
}

.text-body3 {
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--font-weight-regular)
}

.text-body4 {
    font-size: 12px;
    line-height: 16px;
    text-decoration: underline
}

.text-color__primary {
    color: var(--v2--color-text-primary)
}

.text-color__second1 {
    color: var(--v2--color-text-secondary)
}

.text-color__assist {
    color: var(--v2--color-text-tertiary)
}

.text__ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.text__ellipsis_2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.text__ellipsis_4 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

.word__break {
    word-break: break-word;
    white-space: pre-line
}

.txt__break-normal {
    overflow-wrap: normal;
    word-break: normal
}

.txt__break-words {
    overflow-wrap: break-word
}

.txt__break-all {
    word-break: break-all
}

.txt-whitespace__normal {
    white-space: normal
}

.txt-whitespace__nowrap {
    white-space: nowrap
}

.txt-whitespace__pre {
    white-space: pre
}

.txt-whitespace__pre-line {
    white-space: pre-line
}

.txt-whitespace__pre-wrap {
    white-space: pre-wrap
}

.txt__uppercase {
    text-transform: uppercase
}

.txt__lowercase {
    text-transform: lowercase
}

.txt__capitalize {
    text-transform: capitalize
}

.txt__normal-case {
    text-transform: none
}

.txt__underline {
    text-decoration-line: underline
}

.txt__no-underline {
    text-decoration-line: none
}

.txt__overline {
    text-decoration-line: overline
}

.txt__line-through {
    text-decoration-line: line-through
}

.txt__truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.txt__ellipsis {
    text-overflow: ellipsis
}

.txt__clip {
    text-overflow: clip
}

.txt-v__baseline {
    vertical-align: baseline
}

.txt-v__top {
    vertical-align: top
}

.txt-v__middle {
    vertical-align: middle
}

.txt-v__bottom {
    vertical-align: bottom
}

.txt-v__text-top {
    vertical-align: text-top
}

.txt-v__text-bottom {
    vertical-align: text-bottom
}

.txt-v__sub {
    vertical-align: sub
}

.txt-v__super {
    vertical-align: super
}

.txt-h__left {
    text-align: left
}

.txt-h__center {
    text-align: center
}

.txt-h__right {
    text-align: right
}

.t-body-12 {
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--font-weight-regular)
}

.t-publicbody-13 {
    font-size: 13px;
    line-height: 22px;
    font-weight: var(--font-weight-regular)
}

.t-body-14 {
    font-size: 14px;
    line-height: 22px;
    font-weight: var(--font-weight-regular)
}

.t-body-16 {
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--font-weight-regular)
}

.t-body-20 {
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--font-weight-regular)
}

.t-css-body-12 {
    font-family: JetBrainsMono-Regular;
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--font-weight-regular)
}

.t-title-12 {
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--font-weight-medium)
}

.t-publictitle-13 {
    font-size: 13px;
    line-height: 22px;
    font-weight: var(--font-weight-medium)
}

.t-title-14 {
    font-size: 14px;
    line-height: 22px;
    font-weight: var(--font-weight-medium)
}

.t-title-16 {
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--font-weight-medium)
}

.t-title-20 {
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--font-weight-medium)
}

.t-css-title-12 {
    font-family: JetBrainsMono-Regular;
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--font-weight-medium)
}

.t-en-title-12 {
    font-family: Inter;
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--font-weight-medium)
}

.t-en-publictitle-13 {
    font-family: Inter;
    font-size: 13px;
    line-height: 22px;
    font-weight: var(--font-weight-medium)
}

.t-en-title-14 {
    font-family: Inter;
    font-size: 14px;
    line-height: 22px;
    font-weight: var(--font-weight-medium)
}

.t-en-title-16 {
    font-family: Inter;
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--font-weight-medium)
}

.t-en-title-20 {
    font-family: Inter;
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--font-weight-medium)
}

.t-en-body-12 {
    font-family: Inter;
    font-size: 12px;
    line-height: 20px;
    font-weight: var(--font-weight-regular)
}

.t-en-publicbody-13 {
    font-family: Inter;
    font-size: 13px;
    line-height: 22px;
    font-weight: var(--font-weight-regular)
}

.t-en-body-14 {
    font-family: Inter;
    font-size: 14px;
    line-height: 22px;
    font-weight: var(--font-weight-regular)
}

.t-en-body-16 {
    font-family: Inter;
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--font-weight-regular)
}

.t-en-body-20 {
    font-family: Inter;
    font-size: 20px;
    line-height: 28px;
    font-weight: var(--font-weight-regular)
}

.color-brand__press {
    color: var(--v2--color-bg-brand-press)
}

.color-brand-bg__press {
    background-color: var(--v2--color-bg-brand-press)
}

.color-brand-outline__press {
    outline-color: var(--v2--color-bg-brand-press)
}

.color-brand-border__press {
    border-color: var(--v2--color-bg-brand-press)
}

.color-brand__primary {
    color: var(--v2--color-bg-brand-normal)
}

.color-brand-bg__primary {
    background-color: var(--v2--color-bg-brand-normal)
}

.color-brand-outline__primary {
    outline-color: var(--v2--color-bg-brand-normal)
}

.color-brand-border__primary {
    border-color: var(--v2--color-bg-brand-normal)
}

.color-brand__hover:hover {
    color: var(--v2--color-bg-brand-hover)
}

.color-brand-bg__hover:hover {
    background-color: var(--v2--color-bg-brand-hover)
}

.color-brand-outline__hover:hover {
    outline-color: var(--v2--color-bg-brand-hover)
}

.color-brand-border__hover:hover {
    border-color: var(--v2--color-bg-brand-hover)
}

.color-brand__disable {
    color: var(--v2--color-bg-brand-disable)
}

.color-brand-bg__disable {
    background-color: var(--v2--color-bg-brand-disable)
}

.color-brand-outline__disable {
    outline-color: var(--v2--color-bg-brand-disable)
}

.color-brand-border__disable {
    border-color: var(--v2--color-bg-brand-disable)
}

.color-brand__light {
    color: var(--v2--color-brand-light)
}

.color-brand-bg__light {
    background-color: var(--v2--color-brand-light)
}

.color-brand-outline__light {
    outline-color: var(--v2--color-brand-light)
}

.color-brand-border__light {
    border-color: var(--v2--color-brand-light)
}

.color-func__success {
    color: var(--v2--color-bg-success-normal)
}

.color-func-bg__success {
    background-color: var(--v2--color-bg-success-normal)
}

.color-func-outline__success {
    outline-color: var(--v2--color-bg-success-normal)
}

.color-func-border__success {
    border-color: var(--v2--color-bg-success-normal)
}

.color-func__error {
    color: var(--v2--color-bg-danger-normal)
}

.color-func-bg__error {
    background-color: var(--v2--color-bg-danger-normal)
}

.color-func-outline__error {
    outline-color: var(--v2--color-bg-danger-normal)
}

.color-func-border__error {
    border-color: var(--v2--color-bg-danger-normal)
}

.color-func__warning {
    color: var(--v2--color-bg-warming-normal)
}

.color-func-bg__warning {
    background-color: var(--v2--color-bg-warming-normal)
}

.color-func-outline__warning {
    outline-color: var(--v2--color-bg-warming-normal)
}

.color-func-border__warning {
    border-color: var(--v2--color-bg-warming-normal)
}

.color-body-bg__base {
    background-color: var(--v2--color-bg-bodybase)
}

.color-body-bg {
    background-color: var(--v2--color-bg-body)
}

.color-body-bg__overlay {
    background-color: var(--v2--color-bg-bodyoverlay)
}

.color-body-bg__hover:hover {
    background-color: var(--v2--color-bg-hover)
}

.color-body-bg__press:active {
    background-color: var(--v2--color-bg-press)
}

.color-input-bg {
    background-color: var(--v2--color-bg-input)
}

.color-input-hover:hover {
    background-color: var(--v2--color-bg-input-hover)
}

.color-fl-bg__base {
    background-color: var(--v2--color-bg-floatbase)
}

.color-fl-bg {
    background-color: var(--v2--color-bg-float)
}

.color-fl-bg__overlay {
    background-color: var(--v2--color-bg-floatoverlay)
}

.color-line-bg {
    background-color: var(--v2--color-border-primary)
}

.color-line-module-bg {
    background-color: var(--v2--color-border-secondary)
}

.color-avater-outline {
    outline-color: var(--v2--color-border-avatar)
}

.color-avater-border {
    border-color: var(--v2--color-border-avatar)
}

.color-com-outline {
    outline-color: var(--v2--color-border-button)
}

.color-com-border {
    border-color: var(--v2--color-border-button)
}

.color-fl-border {
    border-color: var(--v2--color-border-float)
}

.color-txt__primary {
    color: var(--v2--color-text-primary)
}

.color-txt__secondary {
    color: var(--v2--color-text-secondary)
}

.color-txt__assist {
    color: var(--v2--color-text-tertiary)
}

.color-txt__disable {
    color: var(--v2--color-text-quaternary)
}

.color-txt__contrary {
    color: var(--v2--color-text-onfunctionandbrand)
}

.color-icon__primary {
    color: var(--v2--color-icon-primary)
}

.color-icon__secondary {
    color: var(--v2--color-icon-secondary)
}

.color-icon__tertiary {
    color: var(--v2--color-icon-tertiary)
}

.color-icon__contrary {
    color: var(--v2--color-icon-onfunctionandbrand)
}

.color-icon__special1 {
    color: var(--v2--color-icon-tertiary)
}

.color-icon__special2 {
    color: var(--v2--color-icon-quaternary)
}

.color-navigation-bg,
.color-left-navigation-bg {
    background-color: var(--v2--color-bg-x-navigation)
}

.color-mask-bg__default {
    background-color: var(--v2--color-bg-mask-primary)
}

.color-mask-bg__light {
    background-color: var(--v2--color-bg-mask-secondary)
}

.color-tip-bg {
    background-color: var(--v2--color-bg-tips-primary)
}

.color-scrollbar {
    color: var(--v2--color-bg-scrollbar-normal);
    scrollbar-width: thin;
    scrollbar-color: #d4dedf #fff
}

.color-scrollbar::-webkit-scrollbar {
    width: 6px
}

.color-scrollbar::-webkit-scrollbar-thumb:vertical {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
    background-color: var(--v2--color-bg-scrollbar-normal)
}

.color-scrollbar::-webkit-scrollbar-track:vertical {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
    background-color: var(--v2--color-bg-scrollbar-normal)
}

.opacity__0 {
    opacity: 0
}

.opacity__10 {
    opacity: .1
}

.opacity__20 {
    opacity: .2
}

.opacity__30 {
    opacity: .3
}

.opacity__40 {
    opacity: .4
}

.opacity__50 {
    opacity: .5
}

.opacity__60 {
    opacity: .6
}

.opacity__70 {
    opacity: .7
}

.opacity__80 {
    opacity: .8
}

.opacity__90 {
    opacity: .9
}

.opacity__100 {
    opacity: 1
}

.trans-scale100 {
    transform: scale(1)
}

.trans-scale120 {
    transform: scale(1.2)
}

.rounded__none {
    border-radius: 0
}

.rounded__md {
    border-radius: 6px
}

.rounded__lg {
    border-radius: 10px
}

:root {
    --v2--shadow__down1: 0px 5px 12px rgba(0, 0, 0, .09), 0px 3px 6px rgba(0, 0, 0, .12), 0px 1px 2px rgba(0, 0, 0, .16);
    --v2--shadow__down2: 0px 9px 28px rgba(49, 50, 51, .05), 0px 6px 16px rgba(49, 50, 51, .08), 0px 3px 6px rgba(49, 50, 51, .12);
    --v2--shadow__down3: 0px 12px 48px rgba(49, 50, 51, .03), 0px 9px 28px rgba(49, 50, 51, .05), 0px 6px 16px rgba(49, 50, 51, .08)
}

:root,
:root[data-theme-mode=light] {
    --v2--shadow_s: 0px 0px 1px 0px rgba(25, 25, 26, .08), 0px 2px 8px 0px rgba(25, 25, 26, .12);
    --v2--shadow_m: 0px 2px 12px 0px rgba(25, 25, 26, .04), 0px 6px 20px 0px rgba(25, 25, 26, .06);
    --v2--shadow_l: 0px 2px 12px 0px rgba(25, 25, 26, .04), 0px 6px 20px 0px rgba(25, 25, 26, .06)
}

:root[data-theme-mode=dark] {
    --v2--shadow_s: 0px 0px 1px 0px rgba(0, 0, 0, .15), 0px 2px 8px 0px rgba(0, 0, 0, .25);
    --v2--shadow_m: 0px 2px 12px 0px rgba(0, 0, 0, .1), 0px 6px 20px 0px rgba(0, 0, 0, .2);
    --v2--shadow_l: 0px 0px 4px 0px rgba(0, 0, 0, .15), 0px 4px 16px 0px rgba(0, 0, 0, .15), 0px 8px 24px 0px rgba(0, 0, 0, .25)
}

.shadow__none {
    box-shadow: none
}

.shadow__down1 {
    box-shadow: 0 5px 12px #00000017, 0 3px 6px #0000001f, 0 1px 2px #00000029
}

.shadow__down2 {
    box-shadow: 0 9px 28px #3132330d, 0 6px 16px #31323314, 0 3px 6px #3132331f
}

.shadow__down3 {
    box-shadow: 0 12px 48px #31323308, 0 9px 28px #3132330d, 0 6px 16px #31323314
}

.shadow__sp {
    box-shadow: 0 6px 20px #8080801a
}

.shadow__s {
    box-shadow: var(--v2--shadow_s)
}

.shadow__m {
    box-shadow: var(--v2--shadow_m)
}

.shadow__l {
    box-shadow: var(--v2--shadow_l)
}

.border-component {
    border: 1px solid var(--v2--color-border-button)
}

.border-float {
    border: 1px solid var(--v2--color-border-float)
}

.border-transparent {
    border: 1px solid transparent
}

.transition-preset1 {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s
}

.transition-preset1__all {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s;
    transition-property: all
}

.hover-trans120 {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s;
    transform: scale(1)
}

.hover-trans120:hover {
    transform: scale(1.2)
}

.hover-opacity__0-1 {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s;
    opacity: 0
}

.hover-opacity__0-1:hover {
    opacity: 1
}

.hover-bk {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s
}

.hover-bk:hover {
    background-color: var(--v2--color-bg-hover)
}

.hover-bk:active {
    background-color: var(--v2--color-bg-press)
}

.hover-shadow__sp {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s;
    box-shadow: none
}

.hover-shadow__sp:hover {
    box-shadow: 0 6px 20px #8080801a
}

.hover-icon {
    border-radius: 6px;
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s
}

.hover-icon:hover {
    background-color: var(--v2--color-bg-hover)
}

.hover-icon:active {
    background-color: var(--v2--color-bg-press)
}

.cursor-default {
    cursor: default
}

.cursor-pointer {
    cursor: pointer
}

.cursor-wait {
    cursor: wait
}

.cursor-not-allowed {
    cursor: not-allowed
}

.modal-footer {
    width: 100%;
    height: 64px;
    background: #fff;
    box-shadow: 0 -1px 20px #0000000d;
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center
}

.modal-footer-btn__cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid var(--color--sp__border1);
    color: var(--color--text__primary);
    margin-right: 16px
}

.modal-footer-btn__confirm {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    background: var(--color--bg__button1);
    color: var(--color--text__contrary);
    margin-right: 24px
}

.modal-footer-btn__confirm__disable {
    cursor: no-drop;
    background: var(--color--bg__button02)
}

.animation-dropdown-menu {
    animation: animation_dropdown_menu .15s ease-in-out
}

@-moz-keyframes animation_rotate_clockwise {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes animation_rotate_clockwise {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-o-keyframes animation_rotate_clockwise {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes animation_rotate_clockwise {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@-moz-keyframes animation_dropdown_menu {
    0% {
        opacity: 0;
        transform: translateY(-4px)
    }

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

@-webkit-keyframes animation_dropdown_menu {
    0% {
        opacity: 0;
        transform: translateY(-4px)
    }

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

@-o-keyframes animation_dropdown_menu {
    0% {
        opacity: 0;
        transform: translateY(-4px)
    }

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

@keyframes animation_dropdown_menu {
    0% {
        opacity: 0;
        transform: translateY(-4px)
    }

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

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

.com-menuitem {
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s;
    transition-property: all;
    display: flex;
    align-items: center
}

.com-menuitem:hover,
.com-menuitem:active,
.com-menuitem.com-menuitem__active {
    color: var(--v2--color-bg-brand-normal);
    background-color: var(--v2--color-brand-light);
    border-radius: 6px
}

.com-btn {
    padding: 0;
    border: none;
    outline: none;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    color: #fff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-timing-function: cubic-bezier(.25, .1, .25, 1);
    transition-duration: .15s;
    transition-property: all;
    font-family: inherit
}

.com-btn.com-btn__lg {
    padding-left: 16px;
    padding-right: 16px;
    height: 40px
}

.com-btn.com-btn__def,
.com-btn.com-btn__sm {
    padding-left: 12px;
    padding-right: 12px;
    height: 32px
}

.com-btn.com-btn__default {
    background-color: transparent;
    color: var(--v2--color-text-primary);
    border-color: var(--v2--color-border-button)
}

.com-btn.com-btn__default:hover {
    background-color: var(--v2--color-bg-hover)
}

.com-btn.com-btn__default:active {
    background-color: var(--v2--color-bg-press)
}

.com-btn.com-btn__default.com-btn__disable {
    background-color: transparent;
    color: var(--v2--color-text-quaternary)
}

.com-btn.com-btn__primary {
    background-color: var(--v2--color-bg-brand-normal);
    border-color: var(--v2--color-bg-brand-normal);
    color: var(--v2--color-text-onfunctionandbrand)
}

.com-btn.com-btn__primary:hover {
    background-color: var(--v2--color-bg-brand-hover);
    border-color: var(--v2--color-bg-brand-hover)
}

.com-btn.com-btn__primary:active {
    background-color: var(--v2--color-bg-brand-press);
    border-color: var(--v2--color-bg-brand-press)
}

.com-btn.com-btn__primary.com-btn__disable {
    background-color: var(--v2--color-bg-brand-disable);
    border-color: transparent;
    cursor: no-drop;
    color: var(--v2--color-text-onfunctionandbrand-dissable)
}

.com-btn.com-btn__primary.is-plain {
    border: 1px solid var(--v2--color-border-commentavatar);
    color: var(--v2--color-border-brand-normal);
    background: transparent
}

.com-btn.com-btn__primary.is-plain:hover {
    border: 1px solid var(--v2--color-text-brand-hover)
}

.com-btn.com-btn__primary.is-plain:active {
    border: 1px solid var(--v2--color-text-brand-press)
}

.com-btn.com-btn__primary.is-plain.com-btn__disable {
    color: var(--v2--color-text-brand-disable);
    border: 1px solid var(--v2--color-text-brand-disable)
}

.com-btn.com-btn__primary.is-plain.com-btn__disable .ed-svg-icon {
    color: var(--v2--color-icon-brand-dissable)
}

.com-btn.com-btn__secondary {
    background-color: transparent;
    color: var(--v2--color-text-primary);
    border-color: var(--v2--color-border-button)
}

.com-btn.com-btn__secondary:hover {
    background-color: var(--v2--color-bg-hover)
}

.com-btn.com-btn__secondary:active {
    background-color: var(--v2--color-bg-press)
}

.com-btn.com-btn__secondary.com-btn__disable {
    background-color: transparent;
    color: var(--v2--color-text-quaternary)
}

.com-btn.com-btn__text {
    background-color: transparent;
    color: var(--v2--color-text-brand-normal);
    border-color: transparent
}

.com-btn.com-btn__text:hover {
    color: var(--v2--color-text-brand-hover)
}

.com-btn.com-btn__text:active {
    color: var(--v2--color-text-brand-press)
}

.com-btn.com-btn__text.com-btn__disable {
    color: var(--v2--color-text-brand-disable)
}

.com-btn.com-btn__error {
    background-color: var(--v2--color-bg-danger-normal);
    border-color: var(--v2--color-bg-danger-normal);
    color: var(--v2--color-text-onfunctionandbrand)
}

.com-btn.com-btn__error:hover {
    background-color: var(--v2--color-bg-danger-hover);
    border-color: var(--v2--color-bg-danger-hover)
}

.com-btn.com-btn__error:active {
    background-color: var(--v2--color-bg-danger-press);
    border-color: var(--v2--color-bg-danger-press)
}

.com-btn.com-btn__error.com-btn__disable {
    background-color: var(--v2--color-bg-danger-disable);
    border-color: var(--v2--color-bg-danger-disable)
}

.com-btn.com-btn__error.is-plain {
    border: 1px solid var(--v2--color-bg-danger-normal);
    color: var(--v2--color-bg-danger-normal);
    background: transparent
}

.com-btn.com-btn__error.is-plain:hover {
    border: 1px solid var(--v2--color-bg-danger-hover);
    color: var(--v2--color-bg-danger-hover)
}

.com-btn.com-btn__error.is-plain:active {
    border: 1px solid var(--v2--color-bg-danger-press);
    color: var(--v2--color-bg-danger-press)
}

.com-btn.com-btn__error.is-plain.com-btn__disable {
    color: var(--v2--color-bg-danger-disable);
    border: var(--v2--color-bg-danger-disable)
}

.com-btn.com-btn__error.is-plain.com-btn__disable .ed-svg-icon {
    color: var(--v2--color-bg-danger-disable)
}

.com-input-contain {
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: var(--v2--color-border-input);
    padding: 8px;
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--v2--color-text-primary);
    transition: border-color .3s;
    background-color: var(--v2--color-bg-body)
}

.com-input-contain .com-input {
    height: 100%;
    width: 100%;
    background-color: var(--v2--color-bg-body);
    color: var(--v2--color-text-primary)
}

.com-input-contain .com-input-error {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4px 0;
    font-size: 14px;
    transform: translateY(100%);
    font-weight: 400;
    line-height: 22px;
    color: #f53f3f
}

.com-input-contain:hover {
    border-color: var(--v2--color-border-input-focus)
}

.com-input-contain.com-input-contain__focus {
    border-color: var(--v2--color-border-input-focus);
    border-width: 2px;
    padding: 7px
}

.com-input-contain.com-input-contain__focus .com-input-error {
    bottom: -1px;
    left: -1px
}

.com-input-contain.com-input-contain__error {
    border-color: var(--v2--color-border-input-error)
}

.scrollbar-n {
    overflow: overlay
}

.scrollbar-n::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    visibility: hidden;
    background-color: var(--v2--color-bg-scrollbar-normal);
    background-clip: content-box
}

.scrollbar-n:hover::-webkit-scrollbar-thumb {
    visibility: visible
}

.scrollbar-n:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--v2--color-bg-scrollbar-hover)
}

.scrollbar-n::-webkit-scrollbar {
    width: 10px
}

.scrollbar-n::-webkit-scrollbar-thumb {
    border-radius: 5px
}

.scrollbar-s {
    overflow: overlay
}

.scrollbar-s::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    visibility: hidden;
    background-color: var(--v2--color-bg-scrollbar-normal);
    background-clip: content-box
}

.scrollbar-s:hover::-webkit-scrollbar-thumb {
    visibility: visible
}

.scrollbar-s:hover::-webkit-scrollbar-thumb:hover {
    background-color: var(--v2--color-bg-scrollbar-hover)
}

.scrollbar-s::-webkit-scrollbar {
    width: 8px
}

.scrollbar-s::-webkit-scrollbar-thumb {
    border-radius: 4px
}

.new-tips-dot {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background-color: var(--v2--color-bg-brand-normal)
}

.svg-icon-hover {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition-timing-function: ease;
    transition-duration: .15s
}

.svg-icon-hover:hover {
    background-color: var(--v2--color-bg-hover)
}

.svg-icon-hover:active {
    background-color: var(--v2--color-bg-press)
}

.com-btn {
    position: relative
}

.com-btn.com-btn__lg {
    padding-left: 16px;
    padding-right: 16px
}

.com-btn.com-btn__def {
    padding-left: 12px;
    padding-right: 12px
}

.com-btn.is-fill {
    font-weight: var(--font-weight-medium)
}

.com-btn__operate {
    padding-right: 45px
}

.com-btn__no_border {
    border: none
}

.com-btn__no_radius {
    border-radius: 0
}

.com-btn--icon {
    display: flex;
    align-items: center;
    margin-right: 2px;
    margin-left: -2px
}

.token {
    color: var(--color--icon__quaternary)
}

.px-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    box-sizing: border-box
}

.px-switch.is-disabled {
    cursor: no-drop
}

.px-switch.is-disabled .px-switch--core {
    background-color: var(--v2--color-bg-switch-disable)
}

.px-switch.is-disabled .px-switch--core:after {
    background-color: var(--v2--color-text-onfunctionandbrand)
}

.px-switch.is-disabled.is-mixed .px-switch--core {
    background: var(--v2--color-bg-floatoverlay) !important
}

.px-switch.is-disabled.is-checked .px-switch--core {
    background-color: var(--v2--color-bg-switch-brand-disable)
}

.px-switch.is-disabled.is-checked .px-switch--core:after {
    background-color: var(--v2--color-text-onfunctionandbrand)
}

.px-switch.is-checked .px-switch--core {
    background-color: var(--v2--color-bg-switch-brand-normal)
}

.px-switch.is-checked .px-switch--core:after {
    left: calc(100% - 1px);
    transform: translate(-100%) translateY(-50%)
}

.px-switch.is-mixed .px-switch--core {
    cursor: no-drop
}

.px-switch.is-mixed .px-switch--core:after {
    display: none !important
}

.px-switch.is-mixed .px-switch--core:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 2px;
    border-radius: 1px;
    background: var(--v2--color-text-onfunctionandbrand)
}

.px-switch--input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0
}

.px-switch--label {
    transition: .2s;
    display: inline-block;
    vertical-align: middle;
    color: var(--v2--color-text-primary)
}

.px-switch--label__left {
    margin-right: 4px
}

.px-switch--label__right {
    margin-left: 4px
}

.px-switch--label.is-active {
    color: var(--v2--color-bg-brand-normal)
}

.px-switch--core {
    margin: 0;
    display: inline-block;
    position: relative;
    width: 24px;
    height: 12px;
    outline: 0;
    border-radius: 6px;
    box-sizing: border-box;
    background: var(--v2--color-bg-switch-normal);
    vertical-align: middle
}

.px-switch--core:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background-color: var(--v2--color-text-onfunctionandbrand)
}

.px-checkbox {
    position: relative;
    display: flex;
    align-items: center
}

.px-checkbox:hover .px-checkbox--icon svg>path {
    fill: var(--v2--color-bg-brand-hover)
}

.px-checkbox.is-disabled {
    cursor: no-drop
}

.px-checkbox.is-disabled .px-checkbox--lael {
    color: var(--v2--color-text-quaternary)
}

.px-checkbox.is-small .px-checkbox--icon {
    margin-top: 0
}

.px-checkbox--input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0
}

.px-checkbox--label {
    margin-left: 4px;
    width: calc(100% - 24px);
    color: var(--v2--color-text-primary)
}

.px-checkbox--icon {
    display: inline-flex;
    font-size: 0;
    align-self: flex-start;
    margin-top: 1px;
    flex-shrink: 0
}

.px-checkbox--icon__disabled svg>path {
    fill: var(--v2--color-text-tertiary) !important
}

.px-radio:hover .px-radio--icon {
    display: inline-flex
}

.px-radio:hover .px-radio--icon svg>path:last-child {
    fill: var(--v2--color-bg-brand-hover)
}

.px-radio--input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0
}

.px-radio--icon,
.px-radio--label {
    cursor: inherit
}

.px-radio--icon {
    align-self: flex-start
}

.px-radio--icon__disabled {
    cursor: no-drop
}

.px-radio--icon__disabled svg>path:last-child {
    fill: var(--v2--color-text-tertiary) !important
}

.px-radio--label {
    margin-left: 4px;
    width: calc(100% - 24px)
}

.px-search {
    position: relative;
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--v2--color-bg-input);
    box-sizing: border-box
}

.px-search:hover {
    background: var(--v2--color-bg-input-hover)
}

.px-search.is-small {
    height: 28px
}

.px-search.is-light,
.px-search.is-light:hover {
    background: 0 0
}

.px-search.is-focus {
    border: 1px solid var(--v2--color-bg-brand-normal)
}

.px-search.is-focus.is-light {
    border: 1px solid transparent;
    background: 0 0
}

.px-search.is-focus.is-light:hover {
    background: 0 0
}

.px-search.is-focus .px-search--input {
    caret-color: var(--v2--color-bg-brand-normal)
}

.px-search--icon {
    flex-shrink: 0;
    color: var(--v2--color-text-secondary)
}

.px-search--input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-right: 24px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: 0 0;
    color: var(--v2--color-text-primary)
}

.px-search--input::webkit-input-placeholder {
    color: var(--v2--color-text-tertiary)
}

.px-search--input:-moz-placeholder {
    color: var(--v2--color-text-tertiary)
}

.px-search--input:-ms-input-placeholder {
    color: var(--v2--color-text-tertiary)
}

.px-search--input::-webkit-input-placeholder {
    color: var(--v2--color-text-tertiary)
}

.px-search--close {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border-radius: 50%;
    color: var(--v2--color-text-secondary)
}

.px-search--close:hover {
    background-color: var(--v2--color-bg-hover)
}

.px-dropdown {
    z-index: 8;
    border-radius: 8px;
    padding: 4px;
    background-color: var(--v2--color-bg-dropdown);
    border: 1px solid var(--v2--color-border-dropdown)
}

.px-dropdown-height__small .px-dropdown-item {
    height: 32px
}

.px-dropdown-menu {
    display: grid;
    list-style-type: none
}

.px-dropdown-item {
    position: relative;
    height: 36px;
    background-color: var(--v2--color-bg-dropdown);
    color: var(--v2--color-text-primary);
    border-radius: 4px;
    outline: 0;
    white-space: nowrap
}

.px-dropdown-item:not(.px-dropdown-item__disabled):focus {
    background-color: var(--v2--color-bg-hover)
}

.px-dropdown-item--content {
    width: 100%;
    height: 100%
}

.px-dropdown-item--title {
    width: 0;
    flex: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.px-dropdown-item--subTitle {
    color: var(--v2--color-text-tertiary);
    font-family: inter-regular
}

.px-dropdown-item--subTitle,
.px-dropdown-item__suffix {
    margin-left: auto
}

.px-dropdown-item__checked {
    width: 16px;
    height: 16px;
    margin-left: -4px
}

.px-dropdown-item.px-dropdown-item__disabled,
.px-dropdown-item.px-dropdown-item__disabled .px-dropdown-item--subTitle {
    color: var(--v2--color-text-quaternary)
}

.px-dropdown-item.px-dropdown-item__disabled .px-dropdown-item__checked .ed-svg-icon {
    color: var(--v2--color-text-tertiary)
}

.px-dropdown-item--divider {
    width: 100%;
    margin: 4px 0;
    border-top: 1px solid var(--v2--color-border-primary)
}

.dialog-fade-enter-active,
.dialog-fade-leave-active {
    transition: opacity .3s
}

.dialog-fade-enter,
.dialog-fade-leave-to {
    opacity: 0
}

.dialog-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--v2--color-bg-mask-primary);
    z-index: 1999
}

.dialog-bg .dialog-contain {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--v2--color-bg-float);
    border-radius: 10px;
    z-index: 2000
}

.dialog-bg .dialog-contain .dialog-header {
    padding: 24px 16px 16px 24px;
    color: var(--v2--color-text-primary);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--v2--color-border-primary)
}

.dialog-bg .dialog-contain .dialog-header .dialog-header-tabs {
    display: flex;
    align-items: center;
    color: var(--v2--color-text-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.dialog-bg .dialog-contain .dialog-header .dialog-header-tabs .dialog-header-tab {
    position: relative;
    margin-right: 24px
}

.dialog-bg .dialog-contain .dialog-header .dialog-header-tabs .dialog-header-tab:before {
    content: "";
    height: 4px;
    width: 0;
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translate(-50%);
    background-color: var(--v2--color-bg-brand-normal);
    border-radius: 2px
}

.dialog-bg .dialog-contain .dialog-header .dialog-header-tabs .dialog-header-tab.dialog-header-tab-active {
    font-weight: var(--font-weight-medium)
}

.dialog-bg .dialog-contain .dialog-header .dialog-header-tabs .dialog-header-tab.dialog-header-tab-active:before {
    width: 24px
}

.dialog-bg .dialog-contain .dialog-header .empty {
    flex: 1
}

.dialog-bg .dialog-contain .dialog-content {
    padding: 16px 24px 24px;
    color: var(--v2--color-text-primary);
    word-break: break-all
}

.dialog-bg .dialog-contain .dialog-content.hide-header-border {
    padding: 8px 24px 24px
}

.dialog-bg .dialog-contain .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 24px
}

.dialog-bg .dialog-contain .dialog-footer .btn-cancel {
    margin-right: 16px
}

.dialog-sm:not(.dialog-common) .dialog-contain .dialog-header {
    height: 40px;
    padding: 10px 6px 10px 16px
}

.dialog-sm:not(.dialog-common) .dialog-contain .dialog-content {
    padding: 16px
}

.dialog-sm:not(.dialog-common) .dialog-contain .dialog-footer {
    padding: 10px 16px
}

.dialog-sm:not(.dialog-common) .dialog-contain .dialog-footer .btn-cancel {
    margin-right: 8px
}

.dialog-common:not(.dialog-sm) .dialog-contain .dialog-header {
    font-size: 14px
}

.dialog-common:not(.dialog-sm) .dialog-contain .dialog-header .dialog-header-tabs {
    font-size: 14px
}

.dialog-common:not(.dialog-sm) .dialog-contain .dialog-content {
    font-size: 14px
}

.dialog-common:not(.dialog-sm) .dialog-contain .dialog-footer .com-btn {
    font-size: 14px
}

.dialog-common .dialog-contain .dialog-header,
.dialog-common .dialog-contain .dialog-header .dialog-header-tabs,
.dialog-common .dialog-contain .dialog-content,
.dialog-common .dialog-contain .dialog-footer .com-btn {
    font-size: 13px
}

.com-input-contain {
    background: 0 0;
    padding: 0 4px 0 8px
}

.com-input-contain.com-input-contain__focus {
    padding: 0 4px 0 8px
}

.com-input-contain.is-small {
    height: 32px
}

.com-input-contain.is-disabled {
    border-color: var(--v2--color-border-secondary);
    background: var(--v2--color-bg-input-disable)
}

.com-input-contain input {
    background: 0 0 !important
}

.com-input-contain .com-input-error {
    padding: 0;
    font-size: 12px;
    line-height: 20px
}

.com-input-contain .com-input-close,
.com-input-contain .com-input-show-pw-eye {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 4px
}

.px-slider--contianer {
    width: 100%;
    height: 20px
}

.px-slider--text {
    flex-shrink: 0;
    margin-right: 8px;
    color: var(--v2--color-text-primary)
}

.px-slider--group {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center
}

.px-slider--bar,
.px-slider--bar__active {
    width: 100%;
    height: 2px;
    position: relative;
    flex: 1;
    border-radius: 2px
}

.px-slider--bar {
    background: var(--v2--color-bg-slider)
}

.px-slider--bar__active {
    z-index: 1;
    width: 0;
    background: var(--v2--color-bg-brand-normal)
}

.px-slider--btn {
    background: var(--v2--color-text-onfunctionandbrand);
    box-shadow: 0 .235761px 1.88609px #0000001f, 0 2.82913px 6.12979px #0000001f;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto 0;
    border-radius: 50%;
    z-index: 2
}

.px-slider--btn:active {
    background: var(--v2--color-bg-brand-normal)
}

.px-slider--num {
    flex-shrink: 0;
    margin-left: 8px;
    min-width: 32px;
    text-align: right;
    color: var(--v2--color-text-primary)
}

.px-slider-active .px-slider--btn {
    background-color: var(--v2--color-bg-brand-normal)
}

.px-badge {
    position: relative;
    display: inline-flex
}

.px-badge--content {
    position: absolute;
    top: 3px;
    right: 3px;
    transform: translate(100%, -100%);
    background: var(--v2--color-bg-danger-normal);
    color: var(--v2--color-text-onfunctionandbrand);
    padding: 0 6px;
    border-radius: 10px
}

.px-badge--content.is-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 50%
}

.px-message {
    position: fixed;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 12px #00000026;
    border-radius: 6px;
    z-index: 3000;
    left: 50%;
    transform: translate(-50%);
    background: var(--v2--color-bg-toast);
    border: solid 1px var(--v2--color-border-toast);
    color: var(--v2--color-text-onfunctionandbrand);
    transition: opacity .3s, transform .4s, top .4s, bottom .4s;
    overflow: hidden;
    max-width: 836px;
    white-space: nowrap
}

.px-message__toast {
    padding: 11px 20px
}

.px-message--icon {
    display: flex;
    margin-right: 8px
}

.px-message--content {
    text-overflow: ellipsis;
    overflow: hidden
}

.px-message__notification {
    padding: 8px 8px 8px 20px
}

.px-message__notification:after {
    position: absolute;
    content: "";
    top: 0;
    right: 44px;
    width: 1px;
    height: 100%;
    background: #5c5d5e
}

.px-message__notification .px-message--content {
    margin-right: 24px
}

.px-message--close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.px-message--close-btn .svg-icon-hover {
    width: 28px;
    height: 28px;
    color: #fff;
    border-radius: 4px
}

.px-message--close-btn .svg-icon-hover:hover {
    background: #5c5d5e
}

.px-message__dialog {
    padding: 0 0 0 24px;
    min-height: 44px
}

.px-message__dialog .px-message--content {
    padding-right: 32px
}

.px-message--btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--v2--color-text-onfunctionandbrand);
    border-left: 1px solid #5c5d5e
}

.px-message--btns.single-btn {
    min-height: 44px
}

.px-message--btns .px-message--btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 16px;
    border-bottom: 1px solid #5c5d5e
}

.px-message--btns .px-message--btn:last-child {
    border-bottom: none
}

.px-message--btns .px-message--btn:hover {
    background-color: #fff3
}

.px-message-fade-enter-from,
.px-message-fade-leave-to,
.px-message-fade-enter,
.px-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%)
}

@keyframes animation_rotate_anti {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

.px-number-input--icon {
    height: 32px;
    width: 32px;
    border: solid 1px var(--v2--color-border-secondary)
}

.px-number-input--icon:hover {
    background: var(--v2--color-bg-hover)
}

.px-number-input--icon.is-disabled {
    background: var(--v2--color-bg-input);
    cursor: no-drop
}

.px-number-input--icon-left {
    border-right: none;
    border-left-width: 1px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.px-number-input--icon-right {
    border-left: none;
    border-right-width: 1px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.px-number-input-container {
    height: 32px;
    width: 112px;
    border-radius: 6px;
    overflow: hidden
}

.px-number-input--input {
    width: 48px;
    text-align: center;
    height: 32px;
    background: 0 0;
    color: var(--v2--color-text-primary);
    border: solid 1px var(--v2--color-border-secondary)
}

.px-number-input--input:focus {
    border: solid 2px var(--v2--color-border-commentavatar)
}

.px-number-input--icon-disabled,
.px-number-input--icon-disabled:hover {
    background: var(--v2--color-bg-input)
}

.px-number-input--icon-disabled .ed-svg-icon {
    color: var(--v2--color-text-tertiary)
}

.cookie-setting--dialog .svg-icon-hover {
    position: absolute;
    top: 12px;
    right: 12px
}

.cookie-setting-footer {
    position: fixed;
    bottom: 0px;
    height: 94px;
    width: 100vw;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(18, 17, 42, .07);
    z-index: 99999;
    padding: 4px 16px;
}

.cookie-info {
    margin-right: 24px;
    color: var(--v2--color-text-primary)
}

.cookie-into-title {
    color: #19191a;
    font-family: Outfit;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left
}

.cookie-info-sub {
    color: #19191a;
    font-family: Outfit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
    margin-top: 6px
}

.cookie-setting-btn {
    margin: 0 12px;
    width: 160px
}

.cookie-accept-btn {
    width: 160px
}

.cookie-reject-btn {
    padding: 10px 8px;
    cursor: pointer;
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 14px;
}

.cookie-setting--dialog.dialog-bg .dialog-contain .dialog-header {
    padding: 28px 36px 16px;
    height: 64px
}

.cookie-setting--dialog.dialog-bg .dialog-contain .dialog-content {
    position: relative;
    padding: 0px 36px 24px
    
}

.cookie-setting--dialog.dialog-bg .dialog-contain .dialog-content .hide-header-border {
    padding: 0 36px 16px
}

.cookie-setting-manage-title {
    margin-bottom: 12px
}

.cookie-setting-context {
    word-break: break-word;
    color: #19191a;
    font-family: Outfit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left
}

.cookie-setting-learn {
    text-decoration: underline;
    color: var(--v2--color-text-primary);
    cursor: pointer
}

.cookie-setting-learn:hover {
    color: var(--v2--color-text-brand-normal)
}

.cookie-setting--dialog.dialog-bg .dialog-contain .dialog-footer {
    padding: 0 36px 28px
}

.cookie-setting--dialog.dialog-bg .dialog-contain .dialog-footer .com-btn.com-btn__def {
    padding: 10px 16px;
    height: 40px
}

.cookie-setting-manage {
    margin-top: 20px
}

.cookie-setting-manage-item {
    background: rgb(247, 247, 249);
    border-radius: 10px;
    transition: all .2s;
    cursor: default;
    padding: 14px 12px 14px 8px
}

.manage-item-content {
    padding: 0 4px 0 22px;
    word-break: break-word
}

.cookie-setting-content {
    height: 436px;
    overflow: scroll
}

.cookie-setting-content::-webkit-scrollbar {
    display: none
}

.cookie-setting-content-scroll:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--v2--color-border-secondary);
    z-index: 1
}

.manage-item-switch .px-switch--core {
    width: 42px;
    height: 22px;
    border-radius: 16px
}

.manage-item-switch .px-switch--core:after {
    width: 18px;
    height: 18px
}

.cookie-setting--dialog .dialog-contain {
    max-width: 760px;
    width: calc(100vw - 32px) !important
}

@media screen and (max-width: 870px) {
    .cookie-setting-footer {
        padding: 0 16px
    }

    .cookie-into-title {
        font-size: 12px;
        line-height: 16px
    }

    .cookie-into-sub {
        font-size: 10px;
        line-height: 14px
    }

    .cookie-info {
        margin-right: 16px
    }

    .cookie-reject-btn {
        font-size: 12px;
        padding: 5px 3px
    }

    .cookie-btns .com-btn.com-btn__lg {
        height: 32px;
        font-size: 12px;
        padding: 0 12px;
        width: 120px
    }

    .cookie-setting--dialog .dialog-header span {
        font-size: 14px
    }

    .cookie-setting--dialog .cookie-setting-context {
        font-size: 12px
    }

    .cookie-setting--dialog .cookie-setting-manage {
        margin-top: 16px
    }

    .cookie-setting--dialog .cookie-setting-manage-item .manage-item-content {
        font-size: 12px
    }

    .cookie-setting--dialog .dialog-contain .dialog-footer .com-btn.com-btn__def {
        padding: 8px 12px !important;
        height: 32px !important
    }
}

@media screen and (max-width: 680px) {
    .cookie-setting-footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        height: fit-content
    }

    .cookie-into-title {
        font-size: 14px;
        line-height: 20px
    }

    .cookie-into-sub {
        font-size: 12px;
        line-height: 14px
    }

    .cookie-btns {
        margin-top: 16px;
        align-self: flex-end
    }

    .cookie-setting--dialog.dialog-bg .dialog-contain {
        height: 100vh;
        width: 100vw !important;
        border-radius: 0;
        display: flex;
        flex-direction: column
    }

    .cookie-setting--dialog.dialog-bg .dialog-contain .cookie-setting-content {
        height: 100%
    }

    .cookie-setting--dialog.dialog-bg .dialog-contain .dialog-footer {
        justify-content: flex-end;
        flex: 1;
        align-items: flex-end;
        align-self: flex-end
    }
}