/* shadow */ /* sizing */ /* spacing */ body, body .semi-always-light { --semi-amber-0: 254,251,235; --semi-amber-1: 252,245,206; --semi-amber-2: 249,232,158; --semi-amber-3: 246,216,111; --semi-amber-4: 243,198,65; --semi-amber-5: 240,177,20; --semi-amber-6: 200,138,15; --semi-amber-7: 160,102,10; --semi-amber-8: 120,70,6; --semi-amber-9: 80,43,3; --semi-black: 0,0,0; --semi-blue-0: 234,245,255; --semi-blue-1: 203,231,254; --semi-blue-2: 152,205,253; --semi-blue-3: 101,178,252; --semi-blue-4: 50,149,251; --semi-blue-5: 0,100,250; --semi-blue-6: 0,98,214; --semi-blue-7: 0,79,179; --semi-blue-8: 0,61,143; --semi-blue-9: 0,44,107; --semi-cyan-0: 229,247,248; --semi-cyan-1: 194,239,240; --semi-cyan-2: 138,221,226; --semi-cyan-3: 88,203,211; --semi-cyan-4: 44,184,197; --semi-cyan-5: 5,164,182; --semi-cyan-6: 3,134,152; --semi-cyan-7: 1,105,121; --semi-cyan-8: 0,77,91; --semi-cyan-9: 0,50,61; --semi-green-0: 236,247,236; --semi-green-1: 208,240,209; --semi-green-2: 164,224,167; --semi-green-3: 125,209,130; --semi-green-4: 90,194,98; --semi-green-5: 59,179,70; --semi-green-6: 48,149,59; --semi-green-7: 37,119,47; --semi-green-8: 27,89,36; --semi-green-9: 17,60,24; --semi-grey-0: 249,249,249; --semi-grey-1: 230,232,234; --semi-grey-2: 198,202,205; --semi-grey-3: 167,171,176; --semi-grey-4: 136,141,146; --semi-grey-5: 107,112,117; --semi-grey-6: 85,91,97; --semi-grey-7: 65,70,76; --semi-grey-8: 46,50,56; --semi-grey-9: 28,31,35; --semi-indigo-0: 236,239,248; --semi-indigo-1: 209,216,240; --semi-indigo-2: 167,179,225; --semi-indigo-3: 128,144,211; --semi-indigo-4: 94,111,196; --semi-indigo-5: 63,81,181; --semi-indigo-6: 51,66,161; --semi-indigo-7: 40,52,140; --semi-indigo-8: 31,40,120; --semi-indigo-9: 23,29,99; --semi-light-blue-0: 233,247,253; --semi-light-blue-1: 201,236,252; --semi-light-blue-2: 149,216,248; --semi-light-blue-3: 98,195,245; --semi-light-blue-4: 48,172,241; --semi-light-blue-5: 0,149,238; --semi-light-blue-6: 0,123,202; --semi-light-blue-7: 0,99,167; --semi-light-blue-8: 0,75,131; --semi-light-blue-9: 0,53,95; --semi-light-green-0: 243,248,236; --semi-light-green-1: 227,240,208; --semi-light-green-2: 200,226,165; --semi-light-green-3: 173,211,126; --semi-light-green-4: 147,197,91; --semi-light-green-5: 123,182,60; --semi-light-green-6: 100,152,48; --semi-light-green-7: 78,121,38; --semi-light-green-8: 57,91,27; --semi-light-green-9: 37,61,18; --semi-lime-0: 242,250,230; --semi-lime-1: 227,246,197; --semi-lime-2: 203,237,142; --semi-lime-3: 183,227,91; --semi-lime-4: 167,218,44; --semi-lime-5: 155,209,0; --semi-lime-6: 126,174,0; --semi-lime-7: 99,139,0; --semi-lime-8: 72,104,0; --semi-lime-9: 47,70,0; --semi-orange-0: 255,248,234; --semi-orange-1: 254,238,204; --semi-orange-2: 254,217,152; --semi-orange-3: 253,193,101; --semi-orange-4: 253,166,51; --semi-orange-5: 252,136,0; --semi-orange-6: 210,103,0; --semi-orange-7: 168,74,0; --semi-orange-8: 126,49,0; --semi-orange-9: 84,29,0; --semi-pink-0: 253,236,239; --semi-pink-1: 251,207,216; --semi-pink-2: 246,160,181; --semi-pink-3: 242,115,150; --semi-pink-4: 237,72,123; --semi-pink-5: 233,30,99; --semi-pink-6: 197,19,86; --semi-pink-7: 162,11,72; --semi-pink-8: 126,5,58; --semi-pink-9: 90,1,43; --semi-purple-0: 247,233,247; --semi-purple-1: 239,202,240; --semi-purple-2: 221,155,224; --semi-purple-3: 201,111,209; --semi-purple-4: 180,73,194; --semi-purple-5: 158,40,179; --semi-purple-6: 135,30,158; --semi-purple-7: 113,22,138; --semi-purple-8: 92,15,117; --semi-purple-9: 73,10,97; --semi-red-0: 254,242,237; --semi-red-1: 254,221,210; --semi-red-2: 253,183,165; --semi-red-3: 251,144,120; --semi-red-4: 250,102,76; --semi-red-5: 249,57,32; --semi-red-6: 213,37,21; --semi-red-7: 178,20,12; --semi-red-8: 142,8,5; --semi-red-9: 106,1,3; --semi-teal-0: 228,247,244; --semi-teal-1: 192,240,232; --semi-teal-2: 135,224,211; --semi-teal-3: 84,209,193; --semi-teal-4: 39,194,176; --semi-teal-5: 0,179,161; --semi-teal-6: 0,149,137; --semi-teal-7: 0,119,111; --semi-teal-8: 0,89,85; --semi-teal-9: 0,60,58; --semi-violet-0: 243,237,249; --semi-violet-1: 226,209,244; --semi-violet-2: 196,167,233; --semi-violet-3: 166,127,221; --semi-violet-4: 136,91,210; --semi-violet-5: 106,58,199; --semi-violet-6: 87,47,179; --semi-violet-7: 70,37,158; --semi-violet-8: 54,28,138; --semi-violet-9: 40,20,117; --semi-white: 255,255,255; --semi-yellow-0: 255,253,234; --semi-yellow-1: 254,251,203; --semi-yellow-2: 253,243,152; --semi-yellow-3: 252,232,101; --semi-yellow-4: 251,218,50; --semi-yellow-5: 250,200,0; --semi-yellow-6: 208,170,0; --semi-yellow-7: 167,139,0; --semi-yellow-8: 125,106,0; --semi-yellow-9: 83,72,0; } body[theme-mode=dark], body .semi-always-dark { --semi-red-0: 108,9,11; --semi-red-1: 144,17,16; --semi-red-2: 180,32,25; --semi-red-3: 215,51,36; --semi-red-4: 251,73,50; --semi-red-5: 252,114,90; --semi-red-6: 253,153,131; --semi-red-7: 253,190,172; --semi-red-8: 254,224,213; --semi-red-9: 255,243,239; --semi-pink-0: 92,7,48; --semi-pink-1: 128,14,65; --semi-pink-2: 164,23,81; --semi-pink-3: 199,34,97; --semi-pink-4: 235,47,113; --semi-pink-5: 239,86,134; --semi-pink-6: 243,126,159; --semi-pink-7: 247,168,188; --semi-pink-8: 251,211,220; --semi-pink-9: 253,238,241; --semi-purple-0: 74,16,97; --semi-purple-1: 94,23,118; --semi-purple-2: 115,31,138; --semi-purple-3: 137,40,159; --semi-purple-4: 160,51,179; --semi-purple-5: 181,83,194; --semi-purple-6: 202,120,209; --semi-purple-7: 221,160,225; --semi-purple-8: 239,206,240; --semi-purple-9: 247,235,247; --semi-violet-0: 64,27,119; --semi-violet-1: 76,36,140; --semi-violet-2: 88,46,160; --semi-violet-3: 100,57,181; --semi-violet-4: 114,70,201; --semi-violet-5: 136,101,212; --semi-violet-6: 162,136,223; --semi-violet-7: 190,173,233; --semi-violet-8: 221,212,244; --semi-violet-9: 241,238,250; --semi-indigo-0: 23,30,101; --semi-indigo-1: 32,41,122; --semi-indigo-2: 41,54,142; --semi-indigo-3: 52,68,163; --semi-indigo-4: 64,83,183; --semi-indigo-5: 95,113,197; --semi-indigo-6: 129,145,212; --semi-indigo-7: 167,180,226; --semi-indigo-8: 209,216,241; --semi-indigo-9: 237,239,248; --semi-blue-0: 5,49,112; --semi-blue-1: 10,70,148; --semi-blue-2: 19,92,184; --semi-blue-3: 29,117,219; --semi-blue-4: 41,144,255; --semi-blue-5: 84,169,255; --semi-blue-6: 127,193,255; --semi-blue-7: 169,215,255; --semi-blue-8: 212,236,255; --semi-blue-9: 239,248,255; --semi-light-blue-0: 0,55,97; --semi-light-blue-1: 0,77,133; --semi-light-blue-2: 3,102,169; --semi-light-blue-3: 10,129,204; --semi-light-blue-4: 19,159,240; --semi-light-blue-5: 64,180,243; --semi-light-blue-6: 110,200,246; --semi-light-blue-7: 157,220,249; --semi-light-blue-8: 206,238,252; --semi-light-blue-9: 235,248,254; --semi-cyan-0: 4,52,61; --semi-cyan-1: 7,79,92; --semi-cyan-2: 10,108,123; --semi-cyan-3: 14,137,153; --semi-cyan-4: 19,168,184; --semi-cyan-5: 56,187,198; --semi-cyan-6: 98,205,212; --semi-cyan-7: 145,223,227; --semi-cyan-8: 198,239,241; --semi-cyan-9: 231,247,248; --semi-teal-0: 2,60,57; --semi-teal-1: 4,90,85; --semi-teal-2: 7,119,111; --semi-teal-3: 10,149,136; --semi-teal-4: 14,179,161; --semi-teal-5: 51,194,176; --semi-teal-6: 94,209,193; --semi-teal-7: 142,225,211; --semi-teal-8: 196,240,232; --semi-teal-9: 230,247,244; --semi-green-0: 18,60,25; --semi-green-1: 28,90,37; --semi-green-2: 39,119,49; --semi-green-3: 50,149,61; --semi-green-4: 62,179,73; --semi-green-5: 93,194,100; --semi-green-6: 127,209,132; --semi-green-7: 166,225,168; --semi-green-8: 208,240,209; --semi-green-9: 236,247,236; --semi-light-green-0: 38,61,19; --semi-light-green-1: 59,92,29; --semi-light-green-2: 81,123,40; --semi-light-green-3: 103,153,52; --semi-light-green-4: 127,184,64; --semi-light-green-5: 151,198,95; --semi-light-green-6: 176,212,129; --semi-light-green-7: 201,227,167; --semi-light-green-8: 228,241,209; --semi-light-green-9: 243,248,237; --semi-lime-0: 49,70,3; --semi-lime-1: 75,105,5; --semi-lime-2: 103,141,9; --semi-lime-3: 132,176,12; --semi-lime-4: 162,211,17; --semi-lime-5: 174,220,58; --semi-lime-6: 189,229,102; --semi-lime-7: 207,237,150; --semi-lime-8: 229,246,201; --semi-lime-9: 243,251,233; --semi-yellow-0: 84,73,3; --semi-yellow-1: 126,108,6; --semi-yellow-2: 168,142,10; --semi-yellow-3: 210,175,15; --semi-yellow-4: 252,206,20; --semi-yellow-5: 253,222,67; --semi-yellow-6: 253,235,113; --semi-yellow-7: 254,245,160; --semi-yellow-8: 254,251,208; --semi-yellow-9: 255,254,236; --semi-amber-0: 81,46,9; --semi-amber-1: 121,75,15; --semi-amber-2: 161,107,22; --semi-amber-3: 202,143,30; --semi-amber-4: 242,183,38; --semi-amber-5: 245,202,80; --semi-amber-6: 247,219,122; --semi-amber-7: 250,234,166; --semi-amber-8: 252,246,210; --semi-amber-9: 254,251,237; --semi-orange-0: 85,31,3; --semi-orange-1: 128,53,6; --semi-orange-2: 170,80,10; --semi-orange-3: 213,111,15; --semi-orange-4: 255,146,20; --semi-orange-5: 255,174,67; --semi-orange-6: 255,199,114; --semi-orange-7: 255,221,161; --semi-orange-8: 255,239,208; --semi-orange-9: 255,249,237; --semi-grey-0: 28,31,35; --semi-grey-1: 46,50,56; --semi-grey-2: 65,70,76; --semi-grey-3: 85,91,97; --semi-grey-4: 107,112,117; --semi-grey-5: 136,141,146; --semi-grey-6: 167,171,176; --semi-grey-7: 198,202,205; --semi-grey-8: 230,232,234; --semi-grey-9: 249,249,249; --semi-white: 255, 255, 255; --semi-black: 0, 0, 0; } body, body[theme-mode=dark] .semi-always-light { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; --semi-color-white: rgba(var(--semi-white), 1); --semi-color-black: rgba(var(--semi-black), 1); --semi-color-primary: rgba(var(--semi-blue-5), 1); --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); --semi-color-primary-active: rgba(var(--semi-blue-7), 1); --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1); --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1); --semi-color-secondary: rgba(var(--semi-blue-5), 1); --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1); --semi-color-secondary-active: rgba(var(--semi-blue-7), 1); --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-secondary-light-default: rgba(var(--semi-blue-0), 1); --semi-color-secondary-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-secondary-light-active: rgba(var(--semi-blue-2), 1); --semi-color-tertiary: rgba(var(--semi-grey-5), 1); --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1); --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1); --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1); --semi-color-default: rgba(var(--semi-grey-0), 1); --semi-color-default-hover: rgba(var(--semi-grey-1), 1); --semi-color-default-active: rgba(var(--semi-grey-2), 1); --semi-color-info: rgba(var(--semi-blue-5), 1); --semi-color-info-hover: rgba(var(--semi-blue-6), 1); --semi-color-info-active: rgba(var(--semi-blue-7), 1); --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); --semi-color-info-light-default: rgba(var(--semi-blue-0), 1); --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1); --semi-color-info-light-active: rgba(var(--semi-blue-2), 1); --semi-color-success: rgba(var(--semi-green-5), 1); --semi-color-success-hover: rgba(var(--semi-green-6), 1); --semi-color-success-active: rgba(var(--semi-green-7), 1); --semi-color-success-disabled: rgba(var(--semi-green-2), 1); --semi-color-success-light-default: rgba(var(--semi-green-0), 1); --semi-color-success-light-hover: rgba(var(--semi-green-1), 1); --semi-color-success-light-active: rgba(var(--semi-green-2), 1); --semi-color-danger: rgba(var(--semi-red-5), 1); --semi-color-danger-hover: rgba(var(--semi-red-6), 1); --semi-color-danger-active: rgba(var(--semi-red-7), 1); --semi-color-danger-light-default: rgba(var(--semi-red-0), 1); --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1); --semi-color-danger-light-active: rgba(var(--semi-red-2), 1); --semi-color-warning: rgba(var(--semi-orange-5), 1); --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); --semi-color-warning-active: rgba(var(--semi-orange-7), 1); --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1); --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1); --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1); --semi-color-focus-border: rgba(var(--semi-blue-5), 1); --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); --semi-color-shadow: rgba(var(--semi-black), .04); --semi-color-link: rgba(var(--semi-blue-5), 1); --semi-color-link-hover: rgba(var(--semi-blue-6), 1); --semi-color-link-active: rgba(var(--semi-blue-7), 1); --semi-color-link-visited: rgba(var(--semi-blue-5), 1); --semi-color-border: rgba(var(--semi-grey-9), .08); --semi-color-nav-bg: rgba(var(--semi-white), 1); --semi-color-overlay-bg: rgba(22, 22, 26, .6); --semi-color-fill-0: rgba(var(--semi-grey-8), .05); --semi-color-fill-1: rgba(var(--semi-grey-8), .09); --semi-color-fill-2: rgba(var(--semi-grey-8), .13); --semi-color-bg-0: rgba(var(--semi-white), 1); --semi-color-bg-1: rgba(var(--semi-white), 1); --semi-color-bg-2: rgba(var(--semi-white), 1); --semi-color-bg-3: rgba(var(--semi-white), 1); --semi-color-bg-4: rgba(var(--semi-white), 1); --semi-color-text-0: rgba(var(--semi-grey-9), 1); --semi-color-text-1: rgba(var(--semi-grey-9), .8); --semi-color-text-2: rgba(var(--semi-grey-9), .62); --semi-color-text-3: rgba(var(--semi-grey-9), .35); --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1); --semi-border-radius-extra-small: 3px; --semi-border-radius-small: 3px; --semi-border-radius-medium: 6px; --semi-border-radius-large: 12px; --semi-border-radius-circle: 50%; --semi-border-radius-full: 9999px; } body[theme-mode=dark], body .semi-always-dark { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; --semi-color-white: rgba(228, 231, 245, 1); --semi-color-black: rgba(var(--semi-black), 1); --semi-color-primary: rgba(var(--semi-blue-5), 1); --semi-color-primary-hover: rgba(var(--semi-blue-6), 1); --semi-color-primary-active: rgba(var(--semi-blue-7), 1); --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2); --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4); --semi-color-secondary: rgba(var(--semi-blue-5), 1); --semi-color-secondary-hover: rgba(var(--semi-blue-6), 1); --semi-color-secondary-active: rgba(var(--semi-blue-7), 1); --semi-color-secondary-disabled: rgba(var(--semi-blue-2), 1); --semi-color-secondary-light-default: rgba(var(--semi-blue-5), .2); --semi-color-secondary-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-secondary-light-active: rgba(var(--semi-blue-5), .4); --semi-color-tertiary: rgba(var(--semi-grey-5), 1); --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1); --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1); --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2); --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3); --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4); --semi-color-default: rgba(var(--semi-grey-0), 1); --semi-color-default-hover: rgba(var(--semi-grey-1), 1); --semi-color-default-active: rgba(var(--semi-grey-2), 1); --semi-color-info: rgba(var(--semi-blue-5), 1); --semi-color-info-hover: rgba(var(--semi-blue-6), 1); --semi-color-info-active: rgba(var(--semi-blue-7), 1); --semi-color-info-disabled: rgba(var(--semi-blue-2), 1); --semi-color-info-light-default: rgba(var(--semi-blue-5), .2); --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3); --semi-color-info-light-active: rgba(var(--semi-blue-5), .4); --semi-color-success: rgba(var(--semi-green-5), 1); --semi-color-success-hover: rgba(var(--semi-green-6), 1); --semi-color-success-active: rgba(var(--semi-green-7), 1); --semi-color-success-disabled: rgba(var(--semi-green-2), 1); --semi-color-success-light-default: rgba(var(--semi-green-5), .2); --semi-color-success-light-hover: rgba(var(--semi-green-5), .3); --semi-color-success-light-active: rgba(var(--semi-green-5), .4); --semi-color-danger: rgba(var(--semi-red-5), 1); --semi-color-danger-hover: rgba(var(--semi-red-6), 1); --semi-color-danger-active: rgba(var(--semi-red-7), 1); --semi-color-danger-light-default: rgba(var(--semi-red-5), .2); --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3); --semi-color-danger-light-active: rgba(var(--semi-red-5), .4); --semi-color-warning: rgba(var(--semi-orange-5), 1); --semi-color-warning-hover: rgba(var(--semi-orange-6), 1); --semi-color-warning-active: rgba(var(--semi-orange-7), 1); --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2); --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3); --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4); --semi-color-focus-border: rgba(var(--semi-blue-5), 1); --semi-color-disabled-text: rgba(var(--semi-grey-9), .35); --semi-color-disabled-border: rgba(var(--semi-grey-1), 1); --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1); --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04); --semi-color-link: rgba(var(--semi-blue-5), 1); --semi-color-link-hover: rgba(var(--semi-blue-6), 1); --semi-color-link-active: rgba(var(--semi-blue-7), 1); --semi-color-link-visited: rgba(var(--semi-blue-5), 1); --semi-color-nav-bg: rgba(35, 36, 41, 1); --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25); --semi-color-overlay-bg: rgba(22, 22, 26, .6); --semi-color-fill-0: rgba(var(--semi-white), .12); --semi-color-fill-1: rgba(var(--semi-white), .16); --semi-color-fill-2: rgba(var(--semi-white), .20); --semi-color-border: rgba(var(--semi-white), .08); --semi-color-shadow: rgba(var(--semi-black), .04); --semi-color-bg-0: rgba(22, 22, 26, 1); --semi-color-bg-1: rgba(35, 36, 41, 1); --semi-color-bg-2: rgba(53, 54, 60, 1); --semi-color-bg-3: rgba(67, 68, 74, 1); --semi-color-bg-4: rgba(79, 81, 89, 1); --semi-color-text-0: rgba(var(--semi-grey-9), 1); --semi-color-text-1: rgba(var(--semi-grey-9), .8); --semi-color-text-2: rgba(var(--semi-grey-9), .6); --semi-color-text-3: rgba(var(--semi-grey-9), .35); --semi-border-radius-extra-small: 3px; --semi-border-radius-small: 3px; --semi-border-radius-medium: 6px; --semi-border-radius-large: 12px; --semi-border-radius-circle: 50%; --semi-border-radius-full: 9999px; } .semi-portal { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; } .semi-portal-inner { position: absolute; background-color: transparent; min-width: fit-content; } .semi-anchor { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-y: auto; overflow-x: hidden; position: relative; } .semi-anchor-size-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-anchor-slide { position: absolute; left: 0; top: 0; height: 100%; } .semi-anchor-slide-muted { display: none; } .semi-anchor-slide-bar { display: none; position: absolute; top: 0; width: 2px; border-radius: 1px; } .semi-anchor-slide-bar-active { display: inline-block; } .semi-anchor-slide-bar-default { height: 28px; } .semi-anchor-slide-bar-small { height: 24px; } .semi-anchor-slide-bar-primary { background-color: var(--semi-color-primary); } .semi-anchor-slide-bar-tertiary { background-color: var(--semi-color-tertiary); } .semi-anchor-slide::before { position: absolute; display: block; width: 2px; height: 100%; background-color: var(--semi-color-border); border-radius: 1px; content: " "; } .semi-anchor-link { padding-left: 8px; } .semi-anchor-link-title { cursor: pointer; color: var(--semi-color-text-2); padding-top: 4px; padding-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-anchor-link-title:hover { color: var(--semi-color-tertiary-hover); } .semi-anchor-link-title-active { color: var(--semi-color-text-0); } .semi-anchor-link-title-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-anchor-link-title-disabled:hover { color: var(--semi-color-disabled-text); } .semi-anchor-link-tooltip { cursor: pointer; color: var(--semi-color-text-2) !important; } .semi-anchor-link-tooltip-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-anchor-link-tooltip:hover { color: var(--semi-color-tertiary-hover) !important; } .semi-anchor-link-tooltip-active { color: var(--semi-color-text-0) !important; } .semi-anchor-link-tooltip-disabled { color: var(--semi-color-disabled-text) !important; cursor: not-allowed; } .semi-anchor-link-tooltip-disabled:hover { color: var(--semi-color-disabled-text) !important; } .semi-rtl .semi-anchor, .semi-portal-rtl .semi-anchor { direction: rtl; } .semi-rtl .semi-anchor-slide, .semi-portal-rtl .semi-anchor-slide { right: 0; left: auto; } .semi-rtl .semi-anchor-link, .semi-portal-rtl .semi-anchor-link { padding-right: 8px; padding-left: auto; } .semi-select-option { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; color: var(--semi-color-text-0); border-radius: 0; position: relative; display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; box-sizing: border-box; } .semi-select-option-icon { width: 12px; color: transparent; visibility: hidden; margin-right: 8px; display: flex; justify-content: center; align-content: center; } .semi-select-option-text { display: flex; flex-wrap: wrap; white-space: pre; } .semi-select-option-keyword { color: var(--semi-color-primary); background-color: inherit; font-weight: 600; } .semi-select-option:active { background-color: var(--semi-color-fill-1); } .semi-select-option-empty { cursor: not-allowed; color: var(--semi-color-disabled-text); justify-content: center; } .semi-select-option-empty:hover { background-color: inherit; } .semi-select-option-empty:active { background-color: inherit; } .semi-select-option-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-select-option-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-select-option-selected { font-weight: 600; } .semi-select-option-selected .semi-select-option-icon { visibility: visible; color: var(--semi-color-text-2); } .semi-select-option-focused { background-color: var(--semi-color-fill-0); } .semi-select-option:first-of-type { margin-top: 4px; } .semi-select-option:last-of-type { margin-bottom: 4px; } .semi-autocomplete { cursor: text; display: inline-flex; vertical-align: middle; box-sizing: border-box; } .semi-autocomplete-option-list { overflow-x: hidden; overflow-y: auto; } .semi-autocomplete-option-list-chosen .semi-autocomplete-option-icon { display: flex; } .semi-autocomplete-loading-wrapper { padding-top: 8px; padding-bottom: 8px; cursor: not-allowed; } .semi-autocomplete-loading-wrapper .semi-spin { width: 100%; } .semi-rtl .semi-autocomplete, .semi-portal-rtl .semi-autocomplete { direction: rtl; } .semi-avatar { position: relative; display: inline-flex; overflow: hidden; align-items: center; justify-content: center; white-space: nowrap; text-align: center; vertical-align: middle; } .semi-avatar .semi-avatar-label { display: flex; align-items: center; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .semi-avatar-content { position: absolute; user-select: none; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center; } .semi-avatar-extra-extra-small { width: 20px; height: 20px; } .semi-avatar-extra-extra-small .semi-avatar-content { transform-origin: center; transform: scale(0.8) translate(-62.5%, -62.5%); } .semi-avatar-extra-extra-small .semi-avatar-label { font-size: 10px; line-height: 15px; } .semi-avatar-extra-small { width: 24px; height: 24px; } .semi-avatar-extra-small .semi-avatar-content { transform-origin: center; transform: scale(0.8) translate(-62.5%, -62.5%); } .semi-avatar-extra-small .semi-avatar-label { font-size: 10px; line-height: 15px; } .semi-avatar-small { width: 32px; height: 32px; } .semi-avatar-small .semi-avatar-label { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-default { width: 40px; height: 40px; } .semi-avatar-default .semi-avatar-label { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-medium { width: 48px; height: 48px; } .semi-avatar-medium .semi-avatar-label { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-large { width: 72px; height: 72px; } .semi-avatar-large .semi-avatar-label { font-size: 32px; line-height: 44px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-avatar-extra-large { width: 128px; height: 128px; } .semi-avatar-extra-large .semi-avatar-label { font-size: 64px; line-height: 77px; } .semi-avatar-circle { border-radius: var(--semi-border-radius-circle); } .semi-avatar-image { background-color: transparent; } .semi-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; } .semi-avatar-hover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .semi-avatar:hover { cursor: pointer; } .semi-avatar-group { display: inline-block; } .semi-avatar-group .semi-avatar { box-sizing: border-box; } .semi-avatar-group .semi-avatar:first-child { margin-left: 0; } .semi-avatar-group .semi-avatar-extra-large { border: 3px var(--semi-color-bg-1) solid; margin-left: -32px; } .semi-avatar-group .semi-avatar-large { border: 3px var(--semi-color-bg-1) solid; margin-left: -18px; } .semi-avatar-group .semi-avatar-medium { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-default { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-small { border: 2px var(--semi-color-bg-1) solid; margin-left: -12px; } .semi-avatar-group .semi-avatar-extra-small { border: 1px var(--semi-color-bg-1) solid; margin-left: -10px; } .semi-avatar-group .semi-avatar-extra-extra-small { border: 1px var(--semi-color-bg-1) solid; margin-left: -4px; } .semi-avatar-group .semi-avatar-item-start-0 { z-index: 100; } .semi-avatar-group .semi-avatar-item-end-0 { z-index: 80; } .semi-avatar-group .semi-avatar-item-start-1 { z-index: 99; } .semi-avatar-group .semi-avatar-item-end-1 { z-index: 81; } .semi-avatar-group .semi-avatar-item-start-2 { z-index: 98; } .semi-avatar-group .semi-avatar-item-end-2 { z-index: 82; } .semi-avatar-group .semi-avatar-item-start-3 { z-index: 97; } .semi-avatar-group .semi-avatar-item-end-3 { z-index: 83; } .semi-avatar-group .semi-avatar-item-start-4 { z-index: 96; } .semi-avatar-group .semi-avatar-item-end-4 { z-index: 84; } .semi-avatar-group .semi-avatar-item-start-5 { z-index: 95; } .semi-avatar-group .semi-avatar-item-end-5 { z-index: 85; } .semi-avatar-group .semi-avatar-item-start-6 { z-index: 94; } .semi-avatar-group .semi-avatar-item-end-6 { z-index: 86; } .semi-avatar-group .semi-avatar-item-start-7 { z-index: 93; } .semi-avatar-group .semi-avatar-item-end-7 { z-index: 87; } .semi-avatar-group .semi-avatar-item-start-8 { z-index: 92; } .semi-avatar-group .semi-avatar-item-end-8 { z-index: 88; } .semi-avatar-group .semi-avatar-item-start-9 { z-index: 91; } .semi-avatar-group .semi-avatar-item-end-9 { z-index: 89; } .semi-avatar-group .semi-avatar-item-start-10 { z-index: 90; } .semi-avatar-group .semi-avatar-item-end-10 { z-index: 90; } .semi-avatar-group .semi-avatar-item-start-11 { z-index: 89; } .semi-avatar-group .semi-avatar-item-end-11 { z-index: 91; } .semi-avatar-group .semi-avatar-item-start-12 { z-index: 88; } .semi-avatar-group .semi-avatar-item-end-12 { z-index: 92; } .semi-avatar-group .semi-avatar-item-start-13 { z-index: 87; } .semi-avatar-group .semi-avatar-item-end-13 { z-index: 93; } .semi-avatar-group .semi-avatar-item-start-14 { z-index: 86; } .semi-avatar-group .semi-avatar-item-end-14 { z-index: 94; } .semi-avatar-group .semi-avatar-item-start-15 { z-index: 85; } .semi-avatar-group .semi-avatar-item-end-15 { z-index: 95; } .semi-avatar-group .semi-avatar-item-start-16 { z-index: 84; } .semi-avatar-group .semi-avatar-item-end-16 { z-index: 96; } .semi-avatar-group .semi-avatar-item-start-17 { z-index: 83; } .semi-avatar-group .semi-avatar-item-end-17 { z-index: 97; } .semi-avatar-group .semi-avatar-item-start-18 { z-index: 82; } .semi-avatar-group .semi-avatar-item-end-18 { z-index: 98; } .semi-avatar-group .semi-avatar-item-start-19 { z-index: 81; } .semi-avatar-group .semi-avatar-item-end-19 { z-index: 99; } .semi-avatar-group .semi-avatar-item-start-20 { z-index: 80; } .semi-avatar-group .semi-avatar-item-end-20 { z-index: 100; } .semi-avatar-group .semi-avatar-item-more { background-color: rgba(var(--semi-grey-5), 1); } .semi-avatar-amber { background-color: rgba(var(--semi-amber-3), 1); color: white; } .semi-avatar-blue { background-color: rgba(var(--semi-blue-3), 1); color: white; } .semi-avatar-cyan { background-color: rgba(var(--semi-cyan-3), 1); color: white; } .semi-avatar-green { background-color: rgba(var(--semi-green-3), 1); color: white; } .semi-avatar-grey { background-color: rgba(var(--semi-grey-3), 1); color: white; } .semi-avatar-indigo { background-color: rgba(var(--semi-indigo-3), 1); color: white; } .semi-avatar-light-blue { background-color: rgba(var(--semi-light-blue-3), 1); color: white; } .semi-avatar-light-green { background-color: rgba(var(--semi-light-green-3), 1); color: white; } .semi-avatar-lime { background-color: rgba(var(--semi-lime-3), 1); color: white; } .semi-avatar-orange { background-color: rgba(var(--semi-orange-3), 1); color: white; } .semi-avatar-pink { background-color: rgba(var(--semi-pink-3), 1); color: white; } .semi-avatar-purple { background-color: rgba(var(--semi-purple-3), 1); color: white; } .semi-avatar-red { background-color: rgba(var(--semi-red-3), 1); color: white; } .semi-avatar-teal { background-color: rgba(var(--semi-teal-3), 1); color: white; } .semi-avatar-violet { background-color: rgba(var(--semi-violet-3), 1); color: white; } .semi-avatar-yellow { background-color: rgba(var(--semi-yellow-3), 1); color: white; } .semi-rtl .semi-avatar, .semi-portal-rtl .semi-avatar { direction: rtl; } .semi-rtl .semi-avatar-content, .semi-portal-rtl .semi-avatar-content { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content, .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content { transform: scale(0.8) translate(62.5%, -62.5%); } .semi-rtl .semi-avatar-extra-small .semi-avatar-content, .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content { transform: scale(0.8) translate(62.5%, -62.5%); } .semi-rtl .semi-avatar-hover, .semi-portal-rtl .semi-avatar-hover { left: auto; right: 0; } .semi-rtl .semi-avatar-group, .semi-portal-rtl .semi-avatar-group { direction: rtl; } .semi-rtl .semi-avatar-group .semi-avatar:first-child, .semi-portal-rtl .semi-avatar-group .semi-avatar:first-child { margin-left: auto; margin-right: 0; } .semi-rtl .semi-avatar-group .semi-avatar-extra-large, .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-large { margin-left: auto; margin-right: -32px; } .semi-rtl .semi-avatar-group .semi-avatar-large, .semi-portal-rtl .semi-avatar-group .semi-avatar-large { margin-left: auto; margin-right: -18px; } .semi-rtl .semi-avatar-group .semi-avatar-medium, .semi-rtl .semi-avatar-group .semi-avatar-small, .semi-portal-rtl .semi-avatar-group .semi-avatar-medium, .semi-portal-rtl .semi-avatar-group .semi-avatar-small { margin-left: auto; margin-right: -12px; } .semi-rtl .semi-avatar-group .semi-avatar-extra-small, .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-small { margin-left: auto; margin-right: -10px; } .semi-rtl .semi-avatar-group .semi-avatar-extra-extra-small, .semi-portal-rtl .semi-avatar-group .semi-avatar-extra-extra-small { margin-left: auto; margin-right: -4px; } .semi-backtop { position: fixed; box-sizing: border-box; right: 100px; bottom: 50px; z-index: 10; cursor: pointer; text-align: center; overflow: hidden; } .semi-rtl .semi-backtop, .semi-portal-rtl .semi-backtop { direction: rtl; right: auto; left: 100px; } .semi-badge { position: relative; display: inline-block; } .semi-badge-dot { box-sizing: border-box; width: 8px; height: 8px; border-radius: var(--semi-border-radius-circle); background-color: var(--semi-color-bg-1); border: 1px var(--semi-color-bg-1) solid; z-index: 1; } .semi-badge-count { box-sizing: border-box; height: 18px; min-width: 18px; border-radius: 9px; padding: 0px 4px; background-color: var(--semi-color-bg-1); border: 1px var(--semi-color-bg-1) solid; z-index: 1; text-align: center; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 14px; color: var(--semi-color-bg-2); } .semi-badge-rightTop { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); transform-origin: 100% 0%; } .semi-badge-rightBottom { position: absolute; right: 0; bottom: 0; transform: translate(50%, 50%); transform-origin: 100% 0%; } .semi-badge-leftTop { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); transform-origin: 100% 0%; } .semi-badge-leftBottom { position: absolute; bottom: 0; left: 0; transform: translate(-50%, 50%); transform-origin: 100% 0%; } .semi-badge-custom { display: flex; } .semi-badge-block { position: static; display: inline-block; } .semi-badge-light::before { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; top: 0; left: 0; background-color: var(--semi-color-bg-2); z-index: -1; } .semi-badge-light::after { content: ""; display: block; width: 100%; height: 100%; border-radius: inherit; position: absolute; top: 0; left: 0; background-color: inherit; z-index: -1; } .semi-badge-primary.semi-badge-solid { background-color: var(--semi-color-primary); } .semi-badge-primary.semi-badge-light { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-primary); } .semi-badge-primary.semi-badge-inverted { color: var(--semi-color-primary); } .semi-badge-secondary.semi-badge-solid { background-color: var(--semi-color-secondary); } .semi-badge-secondary.semi-badge-light { background-color: var(--semi-color-secondary-light-default); color: var(--semi-color-secondary); } .semi-badge-secondary.semi-badge-inverted { color: var(--semi-color-secondary); } .semi-badge-tertiary.semi-badge-solid { background-color: var(--semi-color-tertiary); } .semi-badge-tertiary.semi-badge-light { background-color: var(--semi-color-tertiary-light-default); color: var(--semi-color-tertiary); } .semi-badge-tertiary.semi-badge-inverted { color: var(--semi-color-tertiary); } .semi-badge-danger.semi-badge-solid { background-color: var(--semi-color-danger); } .semi-badge-danger.semi-badge-light { background-color: var(--semi-color-danger-light-default); color: var(--semi-color-danger); } .semi-badge-danger.semi-badge-inverted { color: var(--semi-color-danger); } .semi-badge-warning.semi-badge-solid { background-color: var(--semi-color-warning); } .semi-badge-warning.semi-badge-light { background-color: var(--semi-color-warning-light-default); color: var(--semi-color-warning); } .semi-badge-warning.semi-badge-inverted { color: var(--semi-color-warning); } .semi-rtl .semi-badge, .semi-portal-rtl .semi-badge { direction: rtl; } .semi-banner { padding: 12px 12px; } .semi-banner-content-wrapper { display: flex; flex-direction: row; } .semi-banner-description { margin: 0; } .semi-banner .semi-banner-content-wrapper .semi-banner-content { display: flex; flex: 1; align-items: top; } .semi-banner-in-container { border-radius: var(--semi-border-radius-small); } .semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body { flex: 1; } .semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body .semi-banner-title + .semi-banner-description { margin-top: 2px; } .semi-banner-full .semi-banner-content-wrapper .semi-banner-content { justify-content: center; } .semi-banner-full .semi-banner-content-wrapper .semi-banner-icon, .semi-banner-full .semi-banner-content-wrapper .semi-banner-content-body { display: flex; align-items: center; } .semi-banner-close { margin-left: 12px; height: 24px; width: 24px; } .semi-banner-extra { margin-top: 8px; } .semi-banner-icon { display: flex; margin-right: 12px; } .semi-banner-info { background-color: var(--semi-color-info-light-default); color: var(--semi-color-info); } .semi-banner-info.semi-banner-bordered { border: 1px solid var(--semi-color-info); } .semi-banner-warning { background-color: var(--semi-color-warning-light-default); color: var(--semi-color-warning); } .semi-banner-warning.semi-banner-bordered { border: 1px solid var(--semi-color-warning); } .semi-banner-success { background-color: var(--semi-color-success-light-default); color: var(--semi-color-success); } .semi-banner-success.semi-banner-bordered { border: 1px solid var(--semi-color-success); } .semi-banner-danger { background-color: var(--semi-color-danger-light-default); color: var(--semi-color-danger); } .semi-banner-danger.semi-banner-bordered { border: 1px solid var(--semi-color-danger); } .semi-rtl .semi-banner, .semi-portal-rtl .semi-banner { direction: rtl; } .semi-rtl .semi-banner-close, .semi-portal-rtl .semi-banner-close { margin-left: 0; margin-right: 12px; height: 24px; width: 24px; } .semi-rtl .semi-banner-icon, .semi-portal-rtl .semi-banner-icon { margin-right: 0; margin-left: 12px; } .semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar { width: 8px; height: 8px; } .semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0); } .semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner { background-color: rgba(0, 0, 0, 0); } .semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb { border-radius: 6px; background: transparent; transition: all 1s; } .semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb { background: var(--semi-color-fill-2); } .semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover { background: var(--semi-color-fill-1); } .semi-breadcrumb { overflow: hidden; } .semi-breadcrumb-wrapper { display: flex; flex-wrap: wrap; } .semi-breadcrumb-wrapper-loose { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-breadcrumb-wrapper-compact { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-breadcrumb-item-wrap { display: inline-flex; align-items: center; margin: 4px 0; margin-right: 4px; } .semi-breadcrumb-item { display: inline; margin-right: 4px; color: var(--semi-color-text-2); font-weight: 400; } .semi-breadcrumb-item .semi-typography { color: inherit; } .semi-breadcrumb-item-title-inline { display: inline-flex; } .semi-breadcrumb-item-active { color: var(--semi-color-text-0); font-weight: 600; } .semi-breadcrumb-item-active:hover, .semi-breadcrumb-item-active:active { border: none; margin-bottom: 0px; color: var(--semi-color-text-0); cursor: default; } .semi-breadcrumb-item-icon { margin-bottom: -1px; } .semi-breadcrumb-item-more svg { vertical-align: middle; } .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title { margin-left: 4px; } .semi-breadcrumb-item-link { display: inline-flex; align-items: center; column-gap: 4px; text-decoration: inherit; } .semi-breadcrumb-item-link:hover { color: var(--semi-color-link); cursor: pointer; } .semi-breadcrumb-item-link:active { color: var(--semi-color-link-hover); cursor: pointer; } .semi-breadcrumb-collapse { display: inline-flex; flex-shrink: 0; } .semi-breadcrumb-separator { display: flex; color: var(--semi-color-text-2); } .semi-breadcrumb-restItem { color: var(--semi-color-text-2); margin-right: 8px; } .semi-rtl .semi-breadcrumb-wrapper, .semi-portal-rtl .semi-breadcrumb-wrapper { direction: rtl; } .semi-rtl .semi-breadcrumb-item-wrap, .semi-portal-rtl .semi-breadcrumb-item-wrap { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-breadcrumb-item, .semi-portal-rtl .semi-breadcrumb-item { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-breadcrumb-restItem, .semi-portal-rtl .semi-breadcrumb-restItem { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title, .semi-portal-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title { margin-left: 0; margin-right: 4px; display: inline-block; } .semi-button-split { display: inline-block; } .semi-button-split .semi-button { border-radius: 0; margin-right: 1px; } .semi-button-split :first-child { border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-button-split :last-child { border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); margin-right: unset; } .semi-button-split:hover .semi-button-borderless:active { background-color: var(--semi-color-fill-1); } .semi-button { box-shadow: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; user-select: none; border: 0 transparent solid; border-radius: var(--semi-border-radius-small); padding-left: 12px; padding-right: 12px; padding-top: 6px; padding-bottom: 6px; font-weight: 600; outline: none; vertical-align: middle; white-space: nowrap; } .semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible { outline: 2px solid var(--semi-color-primary-light-active); } .semi-button-danger { background-color: var(--semi-color-danger); color: white; } .semi-button-danger:hover { background-color: var(--semi-color-danger-hover); } .semi-button-danger:active { background-color: var(--semi-color-danger-active); } .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless { color: var(--semi-color-danger); } .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible { outline: 2px solid var(--semi-color-danger-light-active); } .semi-button-warning { background-color: var(--semi-color-warning); color: white; } .semi-button-warning:hover { background-color: var(--semi-color-warning-hover); } .semi-button-warning:active { background-color: var(--semi-color-warning-active); } .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless { color: var(--semi-color-warning); } .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible { outline: 2px solid var(--semi-color-warning-light-active); } .semi-button-tertiary { background-color: var(--semi-color-tertiary); color: white; } .semi-button-tertiary:hover { background-color: var(--semi-color-tertiary-hover); } .semi-button-tertiary:active { background-color: var(--semi-color-tertiary-active); } .semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless { color: var(--semi-color-text-1); } .semi-button-primary { background-color: var(--semi-color-primary); color: white; } .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover { background-color: var(--semi-color-primary-hover); } .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active { background-color: var(--semi-color-primary-active); } .semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless { color: var(--semi-color-primary); } .semi-button-secondary { background-color: var(--semi-color-secondary); outline-color: var(--semi-color-secondary); color: white; } .semi-button-secondary:hover { background-color: var(--semi-color-secondary-hover); } .semi-button-secondary:active { background-color: var(--semi-color-secondary-active); } .semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless { color: var(--semi-color-secondary); } .semi-button-disabled { color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-bg); cursor: not-allowed; } .semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover { color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-bg); } .semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless { color: var(--semi-color-disabled-text); } .semi-button-borderless { background-color: transparent; border: 0 transparent solid; } .semi-button-borderless:not(.semi-button-disabled):hover { background-color: var(--semi-color-fill-0); border: 0 transparent solid; } .semi-button-borderless:not(.semi-button-disabled):active { background-color: var(--semi-color-fill-1); border: 0 transparent solid; } .semi-button-light { background-color: var(--semi-color-fill-0); border: 0 transparent solid; } .semi-button-light:not(.semi-button-disabled):hover { background-color: var(--semi-color-fill-1); border: 0 transparent solid; } .semi-button-light:not(.semi-button-disabled):active { background-color: var(--semi-color-fill-2); border: 0 transparent solid; } .semi-button-size-small { height: 24px; padding-top: 2px; padding-bottom: 2px; padding-left: 12px; padding-right: 12px; } .semi-button-size-large { height: 40px; padding-top: 10px; padding-bottom: 10px; padding-left: 16px; padding-right: 16px; } .semi-button-block { width: 100%; } .semi-button-group > .semi-button { margin: 0; padding-left: 0; padding-right: 0; border-radius: 0; } .semi-button-group > .semi-button .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-button-group > .semi-button-size-large .semi-button-content { padding-left: 16px; padding-right: 16px; } .semi-button-group > .semi-button-size-small .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-button-group > .semi-button.semi-button-with-icon-only { padding-left: 0; padding-right: 0; } .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { padding-left: 8px; padding-right: 8px; } .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { padding-left: 4px; padding-right: 4px; } .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-button-group > .semi-button:first-child { border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-button-group > .semi-button:not(:last-child) .semi-button-content { border-right: 1px var(--semi-color-border) solid; } .semi-button-group > .semi-button:last-child { border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button, .semi-portal-rtl .semi-button { direction: rtl; padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-small, .semi-portal-rtl .semi-button-size-small { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-large, .semi-portal-rtl .semi-button-size-large { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group, .semi-portal-rtl .semi-button-group { direction: rtl; } .semi-rtl .semi-button-group > .semi-button, .semi-portal-rtl .semi-button-group > .semi-button { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button:first-child, .semi-portal-rtl .semi-button-group > .semi-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content { border-left: 1px var(--semi-color-border) solid; border-right: 0; } .semi-rtl .semi-button-group > .semi-button:last-child, .semi-portal-rtl .semi-button-group > .semi-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button.semi-button-with-icon-only { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-content-left, .semi-portal-rtl .semi-button-content-left { margin-left: 8px; margin-right: 0; } .semi-rtl .semi-button-content-right, .semi-portal-rtl .semi-button-content-right { margin-right: 8px; margin-left: 0; } .semi-calendar-day ul, .semi-calendar-day li, .semi-calendar-week ul, .semi-calendar-week li, .semi-calendar-month ul, .semi-calendar-month li { padding: 0; margin: 0; list-style: none; } .semi-calendar-day-sticky-top, .semi-calendar-week-sticky-top, .semi-calendar-month-sticky-top { position: sticky; position: -webkit-sticky; top: 0; left: 0; right: 0; background-color: var(--semi-color-bg-2); z-index: 20; } .semi-calendar-day .semi-calendar-weekend, .semi-calendar-week .semi-calendar-weekend, .semi-calendar-month .semi-calendar-weekend { background-color: var(--semi-color-fill-0); } .semi-calendar-day .semi-calendar-event-items, .semi-calendar-week .semi-calendar-event-items, .semi-calendar-month .semi-calendar-event-items { pointer-events: none; } .semi-calendar-day .semi-calendar-event-items > *, .semi-calendar-week .semi-calendar-event-items > *, .semi-calendar-month .semi-calendar-event-items > * { pointer-events: auto; } .semi-calendar-day .semi-calendar-event-items .semi-calendar-event-day, .semi-calendar-week .semi-calendar-event-items .semi-calendar-event-day, .semi-calendar-month .semi-calendar-event-items .semi-calendar-event-day { position: absolute; left: 0; right: 0; z-index: 5; overflow: hidden; } .semi-calendar-day .semi-calendar-custom-container, .semi-calendar-week .semi-calendar-custom-container, .semi-calendar-month .semi-calendar-custom-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .semi-calendar-day, .semi-calendar-week { overflow: auto; } .semi-calendar-day-sticky-left, .semi-calendar-week-sticky-left { position: sticky; position: -webkit-sticky; left: 0; background-color: var(--semi-color-bg-2); z-index: 10; } .semi-calendar-day .semi-calendar-tag, .semi-calendar-week .semi-calendar-tag { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 70px; color: var(--semi-color-text-2); } .semi-calendar-day-scroll, .semi-calendar-week-scroll { display: flex; flex: 1 1 auto; position: relative; } .semi-calendar-day .semi-calendar-grid, .semi-calendar-week .semi-calendar-grid { display: flex; align-items: flex-start; flex: 1 1 auto; position: relative; } .semi-calendar-day .semi-calendar-grid-skeleton, .semi-calendar-week .semi-calendar-grid-skeleton { position: relative; box-sizing: border-box; } .semi-calendar-day .semi-calendar-grid-skeleton li, .semi-calendar-week .semi-calendar-grid-skeleton li { height: 30px; } .semi-calendar-day .semi-calendar-grid-skeleton li:last-child, .semi-calendar-day .semi-calendar-grid-skeleton li:nth-last-child(2), .semi-calendar-week .semi-calendar-grid-skeleton li:last-child, .semi-calendar-week .semi-calendar-grid-skeleton li:nth-last-child(2) { height: 0; } .semi-calendar-day .semi-calendar-grid-skeleton-row-line::after, .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { content: ""; border-bottom: 1px solid var(--semi-color-border); position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; } .semi-calendar-day .semi-calendar-grid-skeleton-row-line:first-child::after, .semi-calendar-week .semi-calendar-grid-skeleton-row-line:first-child::after { border: 0; } .semi-calendar-day .semi-calendar-grid-content, .semi-calendar-week .semi-calendar-grid-content { flex: 1 0 auto; min-width: 130px; height: 100%; } .semi-calendar-day .semi-calendar-grid-curr-circle, .semi-calendar-week .semi-calendar-grid-curr-circle { background: var(--semi-color-danger); border-radius: var(--semi-border-radius-circle); content: ""; position: absolute; height: 8px; width: 8px; margin-top: -4px; z-index: 8; } .semi-calendar-day .semi-calendar-grid-curr-line, .semi-calendar-week .semi-calendar-grid-curr-line { position: absolute; left: 0; right: 0; z-index: 8; border-top: 1px solid var(--semi-color-danger); pointer-events: none; } .semi-calendar-day .semi-calendar-all-day, .semi-calendar-week .semi-calendar-all-day { display: flex; flex: 1 1 auto; border-bottom: 1px solid var(--semi-color-border); } .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag { text-align: right; padding-right: 8px; } .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag span, .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag span { line-height: 26px; } .semi-calendar-day .semi-calendar-all-day-content, .semi-calendar-week .semi-calendar-all-day-content { display: flex; flex: 1 0 auto; height: 100%; min-height: 26px; min-width: 130px; } .semi-calendar-day .semi-calendar-all-day .semi-calendar-event-items, .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items { width: 100%; } .semi-calendar-day .semi-calendar-time, .semi-calendar-week .semi-calendar-time { height: auto; display: flex; flex: none; align-items: flex-start; padding-right: 8px; } .semi-calendar-day .semi-calendar-time-item, .semi-calendar-week .semi-calendar-time-item { position: relative; height: 60px; text-align: right; } .semi-calendar-day .semi-calendar-time-item span, .semi-calendar-week .semi-calendar-time-item span { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; position: relative; top: -10px; color: var(--semi-color-text-2); } .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, .semi-calendar-week .semi-calendar-time .semi-calendar-time-items { position: relative; min-width: 70px; background-color: var(--semi-color-bg-2); box-sizing: border-box; margin-left: auto; } .semi-calendar-week .semi-calendar-today .semi-calendar-today-date, .semi-calendar-month .semi-calendar-today .semi-calendar-today-date { width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: var(--semi-border-radius-circle); background-color: var(--semi-color-primary); color: var(--semi-color-bg-1); } .semi-calendar-day-scroll-wrapper { height: calc(100% - 28px); } .semi-calendar-week { position: relative; display: grid; } .semi-calendar-week-scroll-wrapper { height: calc(100% - 55px); } .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { left: 0; } .semi-calendar-week .semi-calendar-grid-skeleton li { border-right: 1px solid var(--semi-color-border); } .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li { border-right: 0; } .semi-calendar-week-header, .semi-calendar-week-grid-row { display: flex; align-items: flex-start; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); } .semi-calendar-week-header { flex: 1 1 auto; border-bottom: 1px solid var(--semi-color-border); } .semi-calendar-week-grid { display: flex; flex: 1 0 auto; } .semi-calendar-week-grid-row { display: flex; flex: 1 0 auto; } .semi-calendar-week-grid-row li { display: flex; flex: 1 1 0; border-right: 1px solid transparent; height: auto; box-sizing: border-box; justify-content: center; align-items: center; } .semi-calendar-week-grid-row li span { display: flex; align-items: center; justify-content: center; line-height: 26px; } .semi-calendar-week-grid-row li span:last-child { padding: 0 4px; } .semi-calendar-week .semi-calendar-all-day { font-size: 26px; } .semi-calendar-week .semi-calendar-all-day-content { padding-left: 0; position: relative; } .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton { display: flex; flex: 1 1 auto; } .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li { flex: 1 1 auto; min-width: 130px; box-sizing: border-box; border-right: 1px solid var(--semi-color-border); } .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child { border-right: 1px solid transparent; } .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items { position: absolute; } .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items .semi-calendar-event-allday { position: absolute; } .semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items .semi-calendar-event-allday > * { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-week .semi-calendar-week-tag { text-align: right; line-height: 26px; } .semi-calendar-week .semi-calendar-week-tag:first-child { padding-right: 8px; } .semi-calendar-month { display: flex; flex-direction: column; height: 100%; overflow: hidden; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-month-grid-wrapper { height: calc(100% - 27px); } .semi-calendar-month-week, .semi-calendar-month-skeleton { height: 100%; } .semi-calendar-month-header { display: flex; flex: 1 1 auto; align-items: flex-start; color: var(--semi-color-text-2); } .semi-calendar-month-grid { flex: 1 1 auto; box-sizing: border-box; } .semi-calendar-month-grid li { line-height: 26px; } .semi-calendar-month-grid-row, .semi-calendar-month-skeleton { display: flex; box-sizing: border-box; } .semi-calendar-month-grid-row li, .semi-calendar-month-skeleton li { flex: 1; white-space: nowrap; text-align: right; padding-right: 8px; box-sizing: border-box; border-bottom: 1px solid var(--semi-color-border); color: var(--semi-color-text-2); } .semi-calendar-month-grid-row li span, .semi-calendar-month-skeleton li span { display: inline-block; text-align: right; } .semi-calendar-month-skeleton { position: absolute; overflow: hidden; left: 0; right: 0; } .semi-calendar-month-skeleton li { position: relative; overflow: hidden; border-right: 1px solid var(--semi-color-border); height: 100%; padding-top: 4px; } .semi-calendar-month-skeleton li span { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-month-skeleton li:last-child { border-right: none; } .semi-calendar-month-skeleton .semi-calendar-month-same { color: var(--semi-color-text-0); } .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: block; position: absolute; right: 8px; padding-top: 2px; user-select: none; } .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper:hover { cursor: pointer; } .semi-calendar-month .semi-calendar-event-items { position: absolute; top: 31px; right: 0; bottom: 20px; left: 0; overflow: hidden; } .semi-calendar-month-grid-col { display: flex; flex-direction: column; flex: 1; height: 100%; } .semi-calendar-month-weekrow { flex: 1 1 auto; position: relative; } .semi-calendar-month-weekrow .semi-calendar-event-items .semi-calendar-event-month { position: absolute; font-size: 24px; height: 1em; overflow: hidden; } .semi-calendar-month-weekrow .semi-calendar-event-items .semi-calendar-event-month > * { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-calendar-month-date { position: absolute; right: 4px; z-index: 3; } .semi-calendar-month-event-card { width: 220px; } .semi-calendar-month-event-card ul, .semi-calendar-month-event-card li { padding: 0; margin: 0; list-style: none; } .semi-calendar-month-event-card-close { margin-right: -4px; } .semi-calendar-month-event-card-content { padding: 12px 0; } .semi-calendar-month-event-card-header { display: flex; flex-direction: row; margin: 12px 20px; } .semi-calendar-month-event-card-header-info { display: flex; flex: 1; flex-direction: column; align-items: center; } .semi-calendar-month-event-card-header-info-weekday { color: var(--semi-color-text-2); } .semi-calendar-month-event-card-header-info-date { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 4px; } .semi-calendar-month-event-card-body { padding: 0 16px; } .semi-calendar-month-event-card-body li { height: 24px; } .semi-rtl .semi-calendar-day, .semi-rtl .semi-calendar-week, .semi-rtl .semi-calendar-month, .semi-portal-rtl .semi-calendar-day, .semi-portal-rtl .semi-calendar-week, .semi-portal-rtl .semi-calendar-month { direction: rtl; } .semi-rtl .semi-calendar-day-sticky-left, .semi-rtl .semi-calendar-week-sticky-left, .semi-portal-rtl .semi-calendar-day-sticky-left, .semi-portal-rtl .semi-calendar-week-sticky-left { left: auto; right: 0; } .semi-rtl .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, .semi-rtl .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag, .semi-portal-rtl .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag { text-align: left; padding-right: 0; padding-left: 8px; } .semi-rtl .semi-calendar-day .semi-calendar-time, .semi-rtl .semi-calendar-week .semi-calendar-time, .semi-portal-rtl .semi-calendar-day .semi-calendar-time, .semi-portal-rtl .semi-calendar-week .semi-calendar-time { padding-right: 0; padding-left: 8px; } .semi-rtl .semi-calendar-day .semi-calendar-time-item, .semi-rtl .semi-calendar-week .semi-calendar-time-item, .semi-portal-rtl .semi-calendar-day .semi-calendar-time-item, .semi-portal-rtl .semi-calendar-week .semi-calendar-time-item { text-align: left; } .semi-rtl .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, .semi-rtl .semi-calendar-week .semi-calendar-time .semi-calendar-time-items, .semi-portal-rtl .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, .semi-portal-rtl .semi-calendar-week .semi-calendar-time .semi-calendar-time-items { margin-left: 0; margin-right: auto; } .semi-rtl .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after, .semi-portal-rtl .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { left: 0; right: 0; } .semi-rtl .semi-calendar-week .semi-calendar-grid-skeleton li, .semi-portal-rtl .semi-calendar-week .semi-calendar-grid-skeleton li { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li, .semi-portal-rtl .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li { border-left: 0; } .semi-rtl .semi-calendar-week .semi-calendar-all-day-content, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content { padding-left: auto; padding-right: 0; } .semi-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child, .semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child { border-left: 1px solid transparent; } .semi-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag, .semi-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag, .semi-portal-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag, .semi-portal-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag { text-align: left; } .semi-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag:first-child, .semi-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag:first-child, .semi-portal-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag:first-child, .semi-portal-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag:first-child { padding-right: auto; padding-left: 8px; } .semi-rtl .semi-calendar-month-grid-row li, .semi-rtl .semi-calendar-month-skeleton li, .semi-portal-rtl .semi-calendar-month-grid-row li, .semi-portal-rtl .semi-calendar-month-skeleton li { text-align: left; padding-right: auto; padding-left: 8px; } .semi-rtl .semi-calendar-month-grid-row li span, .semi-rtl .semi-calendar-month-skeleton li span, .semi-portal-rtl .semi-calendar-month-grid-row li span, .semi-portal-rtl .semi-calendar-month-skeleton li span { text-align: left; } .semi-rtl .semi-calendar-month-skeleton li, .semi-portal-rtl .semi-calendar-month-skeleton li { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-calendar-month-skeleton li:last-child, .semi-portal-rtl .semi-calendar-month-skeleton li:last-child { border-left: none; } .semi-rtl .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper, .semi-portal-rtl .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper { right: auto; left: 8px; } .semi-rtl .semi-calendar-month-date, .semi-portal-rtl .semi-calendar-month-date { right: auto; left: 4px; } .semi-rtl .semi-calendar-month-event-card-close, .semi-portal-rtl .semi-calendar-month-event-card-close { margin-right: 0; margin-left: -4px; } .semi-card { box-sizing: border-box; margin: 0; padding: 0; border-radius: var(--semi-border-radius-medium); overflow: hidden; background-color: var(--semi-color-bg-0); font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0em; } .semi-card-shadows { cursor: pointer; transition: box-shadow 0.3s; } .semi-card-shadows-hover:hover { box-shadow: var(--semi-shadow-elevated); z-index: 1; } .semi-card-shadows-always { box-shadow: var(--semi-shadow-elevated); } .semi-card-bordered { border: 1px solid var(--semi-color-border); } .semi-card-header { padding: 20px; } .semi-card-header-bordered { border-bottom: 1px solid var(--semi-color-border); } .semi-card-header-wrapper { display: flex; align-items: flex-start; flex-direction: row-reverse; justify-content: space-between; } .semi-card-header-wrapper-spacing { margin-right: 20px; } .semi-card-header-wrapper-title { width: 100%; overflow: hidden; } .semi-card-header-wrapper-extra { flex-shrink: 0; font-size: 16px; font-style: normal; font-weight: 700; letter-spacing: 0em; color: var(--semi-color-text-0); } .semi-card-cover > * { display: block; width: 100%; } .semi-card-body { padding: 20px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0em; color: var(--semi-color-text-1); } .semi-card-body-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--semi-color-border); } .semi-card-footer { padding: 20px; } .semi-card-footer-bordered { border-top: 1px solid var(--semi-color-border); } .semi-card-meta { display: flex; align-items: center; justify-content: flex-start; } .semi-card-meta-avatar { margin-right: 12px; } .semi-card-meta-wrapper-title { font-size: 16px; font-style: normal; font-weight: 700; line-height: 22px; letter-spacing: 0em; color: var(--semi-color-text-0); } .semi-card-meta-wrapper-description { font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: 0em; color: var(--semi-color-text-2); } .semi-card-group-grid .semi-card { border-radius: 0; } .semi-card-group-grid .semi-card { margin-left: -1px; margin-top: -1px; } .semi-rtl .semi-card, .semi-portal-rtl .semi-card { direction: rtl; } .semi-rtl .semi-card-header-wrapper, .semi-portal-rtl .semi-card-header-wrapper { align-items: flex-end; } .semi-rtl .semi-card-header-wrapper-title, .semi-portal-rtl .semi-card-header-wrapper-title { display: flex; align-items: flex-end; } .semi-rtl .semi-card-header-wrapper-spacing, .semi-portal-rtl .semi-card-header-wrapper-spacing { margin-left: 20px; margin-right: 0; } .semi-rtl .semi-card-meta-avatar, .semi-portal-rtl .semi-card-meta-avatar { margin-left: 12px; margin-right: 0; } .semi-rtl .semi-card-group, .semi-portal-rtl .semi-card-group { direction: rtl; } .semi-rtl .semi-card-group-grid .semi-card, .semi-portal-rtl .semi-card-group-grid .semi-card { margin-left: 0; margin-top: 0; margin-right: -1px; margin-bottom: -1px; } .semi-cascader { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; min-width: 80px; min-height: 32px; height: auto; line-height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-flex; align-items: center; vertical-align: middle; position: relative; cursor: pointer; } .semi-cascader:hover { background-color: var(--semi-color-fill-1); border: 1px transparent solid; } .semi-cascader-small { min-height: 24px; line-height: 24px; } .semi-cascader-large { min-height: 40px; line-height: 40px; } .semi-cascader-focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-cascader-focus:hover, .semi-cascader-focus:active { background-color: var(--semi-color-fill-0); border: 1px solid var(--semi-color-focus-border); } .semi-cascader-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-cascader-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-cascader-warning.semi-cascader-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-cascader-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-cascader-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-cascader-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-cascader-error.semi-cascader-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-cascader-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-cascader-selection { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; display: inline-flex; align-items: center; flex-wrap: wrap; flex-grow: 1; overflow: hidden; padding-left: 12px; padding-right: 12px; cursor: pointer; color: var(--semi-color-text-0); } .semi-cascader-selection-multiple { padding-left: 4px; padding-right: 4px; } .semi-cascader-selection-placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--semi-color-text-2); } .semi-cascader-selection-tag { margin: 1px 2px 1px 0; } .semi-cascader-selection-tag:first-child { margin-left: 0; } .semi-cascader-selection-tag-disabled.semi-tag { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close { color: var(--semi-color-disabled-text); cursor: not-allowed; pointer-events: none; } .semi-cascader-selection-n { cursor: pointer; font-size: 12px; margin-right: 4px; color: var(--semi-color-text-0); padding-left: 8px; padding-right: 8px; } .semi-cascader-selection-n-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-cascader-selection span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .semi-cascader-selection .semi-cascader-tagInput-wrapper { border: hidden; background: transparent; margin-left: -4px; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper { height: 30px; margin-left: 4px; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input { padding-left: 0; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper-small { height: 22px; } .semi-cascader-selection .semi-tagInput .semi-input-wrapper-large { height: 38px; } .semi-cascader-arrow, .semi-cascader-clearbtn { display: inline-flex; align-items: center; height: 100%; justify-content: center; width: 16px; color: var(--semi-color-text-2); margin-right: 12px; } .semi-cascader-clearbtn:hover { color: var(--semi-color-primary-hover); } .semi-cascader-clearbtn:active { color: var(--semi-color-primary-active); } .semi-cascader-prefix, .semi-cascader-suffix { display: inline; display: flex; justify-content: center; align-items: center; } .semi-cascader-prefix-text, .semi-cascader-suffix-text { margin: 0 12px; } .semi-cascader-prefix-icon, .semi-cascader-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-cascader-inset-label { display: inline; margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-cascader.semi-cascader-with-prefix { display: inline-flex; align-items: center; } .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection { padding-left: 0; } .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection { padding-right: 0; } .semi-cascader-disabled { cursor: not-allowed; user-select: none; background-color: var(--semi-color-disabled-fill); } .semi-cascader-disabled .semi-cascader-selection { cursor: not-allowed; } .semi-cascader-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-cascader-disabled .semi-cascader-selection, .semi-cascader-disabled .semi-cascader-selection-placeholder, .semi-cascader-disabled .semi-cascader-prefix, .semi-cascader-disabled .semi-cascader-suffix { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-cascader-disabled .semi-cascader-arrow { color: var(--semi-color-disabled-text); } .semi-cascader-popover .semi-cascader-search-wrapper { padding: 8px 12px; border-bottom: 1px solid var(--semi-color-fill-0); } .semi-cascader-popover .semi-cascader-option-empty { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 150px; color: var(--semi-color-disabled-text); margin: 0; padding: 8px 12px; user-select: none; text-align: center; cursor: not-allowed; } .semi-cascader-single.semi-cascader-filterable { display: inline-flex; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper { width: 100%; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper { height: 100%; width: 100%; border: none; background-color: transparent; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper-focus { border: none; } .semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input { padding-left: 0; padding-right: 0; } .semi-cascader-option-lists { display: flex; overflow: hidden; padding: 0; margin: 0; height: 180px; } .semi-cascader-option-lists-empty { height: auto; } .semi-cascader-option-lists ul, .semi-cascader-option-lists li { list-style-type: none; padding: 0; margin: 0; } .semi-cascader-option-lists ul > li { padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 16px; } .semi-cascader-option-lists .semi-cascader-option-list { box-sizing: border-box; display: inline-block; min-width: 150px; height: 100%; margin: 0; padding: 4px 0px; overflow: auto; list-style: none; border-left: 1px solid var(--semi-color-fill-0); } .semi-cascader-option-lists .semi-cascader-option-list:first-child { border-left: none; } .semi-cascader-option-lists .semi-cascader-option { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: min-content; word-break: break-all; color: var(--semi-color-text-0); position: relative; } .semi-cascader-option-lists .semi-cascader-option:hover { background-color: var(--semi-color-fill-0); } .semi-cascader-option-lists .semi-cascader-option:active { background-color: var(--semi-color-fill-1); } .semi-cascader-option-lists .semi-cascader-option-icon { display: inline-flex; flex-shrink: 0; width: 16px; color: var(--semi-color-text-2); } .semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty { margin-right: 8px; } .semi-cascader-option-lists .semi-cascader-option-label { display: flex; align-items: center; white-space: pre; } .semi-cascader-option-lists .semi-cascader-option-label-checkbox { margin-right: 8px; } .semi-cascader-option-lists .semi-cascader-option-hidden { display: none; } .semi-cascader-option-lists .semi-cascader-option-active { background-color: var(--semi-color-primary-light-default); } .semi-cascader-option-lists .semi-cascader-option-active:hover { background-color: var(--semi-color-primary-light-default); } .semi-cascader-option-lists .semi-cascader-option-select, .semi-cascader-option-lists .semi-cascader-option-label-highlight { font-weight: 600; color: var(--semi-color-primary); } .semi-cascader-option-lists .semi-cascader-option-disabled { cursor: not-allowed; } .semi-cascader-option-lists .semi-cascader-option-disabled:hover { background-color: transparent; } .semi-cascader-option-lists .semi-cascader-option-disabled:active { background-color: transparent; } .semi-cascader-option-lists .semi-cascader-option-disabled .semi-cascader-option-label { color: var(--semi-color-disabled-text); } .semi-cascader-option-lists .semi-cascader-option-flatten { padding-right: 64px; } .semi-rtl .semi-cascader, .semi-portal-rtl .semi-cascader { direction: rtl; } .semi-rtl .semi-cascader-arrow, .semi-rtl .semi-cascader-clearbtn, .semi-portal-rtl .semi-cascader-arrow, .semi-portal-rtl .semi-cascader-clearbtn { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-cascader-inset-label, .semi-portal-rtl .semi-cascader-inset-label { margin-right: 12px; margin-left: 12px; } .semi-rtl .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection, .semi-portal-rtl .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection { padding-left: auto; padding-right: 0; } .semi-rtl .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection, .semi-portal-rtl .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection { padding-right: auto; padding-left: 0; } .semi-rtl .semi-cascader-selection-multiple, .semi-portal-rtl .semi-cascader-selection-multiple { padding-right: 4px; padding-left: 4px; } .semi-rtl .semi-cascader-selection-tag:first-child, .semi-portal-rtl .semi-cascader-selection-tag:first-child { margin-right: 0; } .semi-rtl .semi-cascader-selection-n, .semi-portal-rtl .semi-cascader-selection-n { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-cascader-selection .semi-cascader-tagInput-wrapper, .semi-portal-rtl .semi-cascader-selection .semi-cascader-tagInput-wrapper { margin-left: 0; margin-right: -4px; } .semi-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper, .semi-portal-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input, .semi-portal-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input { padding-right: 0; } .semi-cascader-option-label-checkbox { margin-right: 0; margin-left: 8px; } .semi-cascader-option-lists-rtl { direction: rtl; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl ul > li { padding-right: 12px; padding-left: auto; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list { border-left: 0; border-right: 1px solid var(--semi-color-fill-0); } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child { border-right: none; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty { margin-right: 0; margin-left: 8px; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option-flatten { padding-right: 0; padding-left: 64px; } .semi-cascader-option-lists .semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right { transform: scaleX(-1); } .semi-checkbox { box-sizing: border-box; position: relative; display: flex; align-items: center; flex-wrap: wrap; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .semi-checkbox input[type=checkbox] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; } .semi-checkbox-addon { display: flex; flex: 1; align-items: center; padding-left: 8px; color: var(--semi-color-text-0); line-height: 20px; user-select: none; } .semi-checkbox:hover .semi-checkbox-inner-display { background: var(--semi-color-fill-0); box-shadow: inset 0 0 0 1px var(--semi-color-focus-border); } .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-hover); box-shadow: none; } .semi-checkbox:active .semi-checkbox-inner-display { background: var(--semi-color-fill-1); } .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-active); box-shadow: none; } .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display { background: var(--semi-color-disabled-fill); box-shadow: inset 0 0 0 1px var(--semi-color-border); } .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-disabled); box-shadow: none; } .semi-checkbox-inner { position: relative; display: flex; align-items: center; width: 16px; height: 20px; user-select: none; cursor: pointer; } .semi-checkbox-inner-display { box-sizing: border-box; position: relative; width: 16px; height: 16px; margin: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--semi-color-text-3); border-radius: var(--semi-border-radius-extra-small); } .semi-checkbox-inner-display .semi-icon { font-size: 16px; } .semi-checkbox-inner-pureCardType { display: none; } .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary); color: var(--semi-color-white); box-shadow: inset 0 0 0 1px var(--semi-color-primary); border-radius: var(--semi-border-radius-extra-small); } .semi-checkbox-inner-checked > .semi-checkbox-addon { color: var(--semi-color-text-0); } .semi-checkbox:hover .semi-checkbox-inner-display { background: var(--semi-color-fill-0); } .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display { background: var(--semi-color-primary-hover); box-shadow: none; color: var(--semi-color-white); } .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-hover); border-color: var(--semi-color-primary-hover); color: var(--semi-color-white); } .semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display { background: var(--semi-color-white); } .semi-checkbox:active .semi-checkbox-inner-display { background: var(--semi-color-fill-1); } .semi-checkbox:active.semi-checkbox-indeterminate .semi-checkbox-inner-display { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); color: var(--semi-color-white); box-shadow: none; } .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); color: var(--semi-color-white); } .semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_unDisabled .semi-checkbox-inner-display { background: var(--semi-color-white); } .semi-checkbox-cardType { flex-wrap: nowrap; align-items: flex-start; border-radius: 3px; padding: 12px 16px; background: transparent; border: 1px solid transparent; } .semi-checkbox-cardType .semi-checkbox-inner { position: relative; margin-right: 8px; flex-shrink: 0; } .semi-checkbox-cardType .semi-checkbox-inner-display { background: var(--semi-color-white); } .semi-checkbox-cardType .semi-checkbox-addon { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--semi-color-text-0); margin-left: 0; padding-left: 0; } .semi-checkbox-cardType .semi-checkbox-extra { font-weight: normal; font-size: 14px; line-height: 20px; color: var(--semi-color-text-2); padding-left: 0; } .semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren { margin-top: 0; } .semi-checkbox-cardType:hover { background: var(--semi-color-fill-0); } .semi-checkbox-cardType:active { background: var(--semi-color-fill-1); } .semi-checkbox-cardType_checked { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary); } .semi-checkbox-cardType_checked:hover { background: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary-hover); } .semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { box-shadow: none; } .semi-checkbox-cardType_checked:active { background: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary-active); } .semi-checkbox-cardType_disabled:active { background: transparent; } .semi-checkbox-cardType_disabled:hover { background: transparent; } .semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary-disabled); } .semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { box-shadow: none; } .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display { background: var(--semi-color-primary); color: var(--semi-color-white); box-shadow: inset 0 0 0 1px var(--semi-color-primary); border-radius: var(--semi-border-radius-extra-small); } .semi-checkbox-indeterminate .semi-checkbox-inner-display:hover, .semi-checkbox-checked .semi-checkbox-inner-display:hover { background: var(--semi-color-primary-hover); border-color: var(--semi-color-primary-hover); color: var(--semi-color-white); } .semi-checkbox-indeterminate .semi-checkbox-inner-display:active, .semi-checkbox-checked .semi-checkbox-inner-display:active { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); color: var(--semi-color-white); } .semi-checkbox-indeterminate .semi-checkbox-inner-addon, .semi-checkbox-checked .semi-checkbox-inner-addon { color: var(--semi-color-text-0); } .semi-checkbox-disabled { cursor: not-allowed; } .semi-checkbox-disabled .semi-checkbox-inner { cursor: not-allowed; } .semi-checkbox-disabled .semi-checkbox-inner-display { color: var(--semi-color-white); background: var(--semi-color-disabled-fill); box-shadow: inset 0 0 0 1px var(--semi-color-border); } .semi-checkbox-disabled .semi-checkbox-inner-display:hover { color: var(--semi-color-white); background: transparent; } .semi-checkbox-disabled .semi-checkbox-inner-checked { color: var(--semi-color-white); } .semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display { opacity: 0.75; background: var(--semi-color-primary-disabled); box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled); } .semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display:hover { color: var(--semi-color-white); background: var(--semi-color-primary-disabled); } .semi-checkbox-disabled .semi-checkbox-addon { color: var(--semi-color-disabled-text); } .semi-checkbox-disabled .semi-checkbox-extra { color: var(--semi-color-disabled-text); } .semi-checkbox.semi-checkbox-disabled.semi-checkbox-indeterminate .semi-checkbox-inner-display { opacity: 0.75; background: var(--semi-color-primary-disabled); box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled); color: var(--semi-color-white); } .semi-checkbox-extra { flex-shrink: 0; flex-grow: 1; flex-basis: 100%; box-sizing: border-box; padding-left: 24px; color: var(--semi-color-text-2); margin-top: 4px; } .semi-checkboxGroup { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 14px; } .semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical { margin-bottom: 16px; } .semi-checkboxGroup-horizontal .semi-checkbox { margin-right: 16px; display: inline-flex; } .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type { margin-right: 0; } .semi-checkboxGroup-vertical .semi-checkbox { margin-bottom: 12px; } .semi-checkboxGroup-vertical .semi-checkbox:last-of-type { margin-bottom: 0; } .semi-checkboxGroup-vertical-cardType .semi-checkbox { margin-bottom: 16px; } .semi-rtl .semi-checkbox, .semi-portal-rtl .semi-checkbox { direction: rtl; } .semi-rtl .semi-checkbox input[type=checkbox], .semi-portal-rtl .semi-checkbox input[type=checkbox] { left: auto; right: 0; } .semi-rtl .semi-checkbox-addon, .semi-portal-rtl .semi-checkbox-addon { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-checkbox-extra, .semi-portal-rtl .semi-checkbox-extra { padding-left: 0; padding-right: 24px; } .semi-rtl .semi-checkbox-cardType .semi-checkbox-inner, .semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-inner { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-checkbox-cardType .semi-checkbox-addon, .semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-addon { margin-right: 0; padding-right: 0; } .semi-rtl .semi-checkbox-cardType .semi-checkbox-extra, .semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-extra { padding-right: 0; } .semi-rtl .semi-checkboxGroup, .semi-portal-rtl .semi-checkboxGroup { direction: rtl; } .semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox, .semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox { margin-right: 0; margin-left: 16px; } .semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type, .semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type { margin-left: 0; } .semi-collapse-item { border-bottom: 1px solid var(--semi-color-border); } .semi-collapse-header { display: flex; align-items: center; justify-content: space-between; margin: 4px 8px; padding: 8px; border-radius: var(--semi-border-radius-small); outline: none; cursor: pointer; color: var(--semi-color-text-0); font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-collapse-header-right { display: flex; align-items: center; } .semi-collapse-header-right span { display: flex; padding-right: 8px; } .semi-collapse-header-right span:last-child { padding-right: 0; } .semi-collapse-header-icon { width: 16px; height: 16px; color: var(--semi-color-text-2); } .semi-collapse-header-iconLeft { justify-content: flex-start; } .semi-collapse-header-iconLeft .semi-collapse-header-icon { margin-right: 8px; } .semi-collapse-header-iconDisabled { color: var(--semi-color-disabled-text); } .semi-collapse-header:hover { background-color: var(--semi-color-fill-0); } .semi-collapse-header:active { background-color: var(--semi-color-fill-1); } .semi-collapse-content { padding: 4px 16px 8px 16px; color: var(--semi-color-text-1); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-collapse-content p { margin: 0; } .semi-rtl .semi-collapse, .semi-portal-rtl .semi-collapse { direction: rtl; } .semi-rtl .semi-collapse-header-right span, .semi-portal-rtl .semi-collapse-header-right span { display: flex; padding-right: 0; padding-left: 8px; } .semi-rtl .semi-collapse-header-right span:last-child, .semi-portal-rtl .semi-collapse-header-right span:last-child { padding-right: 0; padding-left: 0; } .semi-datepicker { box-sizing: border-box; display: inline-block; vertical-align: top; } .semi-datepicker-month-grid { user-select: none; display: flex; } .semi-datepicker-month-grid-left, .semi-datepicker-month-grid-right { position: relative; padding: 0; display: inline-flex; flex-direction: column; justify-content: flex-start; } .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-yam { height: 100%; } .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam { height: calc(100% - 54px); } .semi-datepicker-month-grid .semi-datepicker-yam-showing { min-height: 378px; min-width: 284px; } .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing { min-height: 325px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year], .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] { min-height: 312px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time], .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] { min-height: 314px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation { padding-top: 8px; padding-bottom: 8px; } .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk { min-height: 100%; } .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam { height: 100%; } .semi-datepicker-month-grid .semi-datepicker-yearmonth-header { background: var(--semi-color-bg-3); padding: 12px 16px; border-bottom: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0; display: flex; align-items: center; } .semi-datepicker-month-grid .semi-scrolllist { background: var(--semi-color-bg-3); position: relative; box-shadow: none; height: auto; width: 100%; height: 100%; overflow: hidden; flex: 1; } .semi-datepicker-month-grid .semi-scrolllist-header, .semi-datepicker-month-grid .semi-scrolllist-body { box-sizing: border-box; width: 100%; } .semi-datepicker-month-grid .semi-scrolllist-header { border-bottom: 1px solid var(--semi-color-border); padding: 16px; } .semi-datepicker-month-grid .semi-scrolllist-body { height: 100%; overflow: hidden; padding: 0; flex: 1; } .semi-datepicker-month-grid .semi-scrolllist-line { display: none; } .semi-datepicker-month-grid .semi-scrolllist-header-title { padding: 0; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-height: 24px; line-height: 24px; } .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks { min-height: 216px; } .semi-datepicker-panel-yam { max-width: 284px; } .semi-datepicker-panel-yam .semi-scrolllist { box-shadow: none; height: 266px; } .semi-datepicker-panel-yam .semi-scrolllist-list-outer > ul > li { min-width: 64px; } .semi-datepicker-panel-yam .semi-scrolllist-body { padding: 0; overflow: hidden; } .semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel { border: none; } .semi-datepicker-footer { padding-top: 10px; padding-right: 8px; padding-bottom: 10px; text-align: right; background-color: var(--semi-color-fill-0); } .semi-datepicker-footer .semi-button:first-of-type { margin-right: 12px; } .semi-datepicker-footer .semi-button:nth-of-type(2) { margin-right: 8px; } .semi-datepicker-yam { position: absolute; top: 0; width: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .semi-datepicker-tpk { position: absolute; top: 0; height: calc(100% - 54px); width: 100%; display: flex; flex-direction: column; } .semi-datepicker-tpk .semi-datepicker-time { height: 100%; } .semi-datepicker-navigation { display: flex; align-items: center; box-sizing: content-box; height: 32px; padding: 12px 16px; } .semi-datepicker-navigation-left, .semi-datepicker-navigation-right { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .semi-datepicker-navigation .semi-button { color: var(--semi-color-text-2); min-width: 32px; } .semi-datepicker-navigation-month { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; flex-grow: 1; text-align: center; font-weight: 600; color: var(--semi-color-text-0); } .semi-datepicker-navigation-month .semi-button { color: var(--semi-color-text-0); } .semi-datepicker-month { width: 252px; box-sizing: content-box; padding: 16px; padding-top: 0; } .semi-datepicker-weekday { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-2); border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-weekday-item { width: 36px; height: 36px; line-height: 36px; text-align: center; display: inline-block; } .semi-datepicker-weeks { color: var(--semi-color-text-0); } .semi-datepicker-week { display: flex; align-items: center; } .semi-datepicker-day { box-sizing: border-box; display: inline-block; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .semi-datepicker-day-main { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin: 0 auto; box-sizing: border-box; border-radius: var(--semi-border-radius-small); } .semi-datepicker-day-main:hover { background-color: var(--semi-color-fill-0); } .semi-datepicker-day-main:active { background-color: var(--semi-color-fill-1); } .semi-datepicker-day-today .semi-datepicker-day-main { color: var(--semi-color-primary); background-color: var(--semi-color-fill-0); font-weight: 600; } .semi-datepicker-day-today.semi-datepicker-day-disabled .semi-datepicker-day-main { color: var(--semi-color-primary-disabled); } .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main, .semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main { border-radius: 0; margin-left: 0; margin-right: 0; width: 36px; } .semi-datepicker-day-selected .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small); } .semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small); } .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { width: 34px; margin-left: 2px; margin-right: 0; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { width: 34px; margin-right: 2px; margin-left: 0; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main { border-radius: 0; } .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { background-color: var(--semi-color-fill-0); } .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-hoverday-offset .semi-datepicker-day-main { background-color: var(--semi-color-fill-1); } .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-default); } .semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-active); } .semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-active); } .semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-selected-end .semi-datepicker-day-main { background-color: var(--semi-color-primary); color: var(--semi-color-white); } .semi-datepicker-day-selected .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-start .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-end .semi-datepicker-day-main:hover { background-color: var(--semi-color-primary); } .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { background-color: var(--semi-color-primary-light-hover); } .semi-datepicker-day-selected-start-afterhover .semi-datepicker-day-main, .semi-datepicker-day-selected-end-beforehover .semi-datepicker-day-main { border: 1px solid var(--semi-color-primary-active); } .semi-datepicker-day-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-datepicker-day-disabled .semi-datepicker-day-main:hover { background-color: transparent; } .semi-datepicker-day-disabled .semi-datepicker-day-main:active { background-color: transparent; } .semi-datepicker-day-disabled.semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday-offset .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { background-color: var(--semi-color-disabled-fill); color: var(--semi-color-disabled-text); } .semi-datepicker-switch { text-align: center; display: flex; border-top: 1px solid var(--semi-color-border); margin-top: auto; } .semi-datepicker-switch-date, .semi-datepicker-switch-time { width: 50%; cursor: pointer; padding-top: 16px; padding-bottom: 16px; display: flex; justify-content: center; align-items: center; color: var(--semi-color-text-2); } .semi-datepicker-switch-date:not(.semi-datepicker-switch-time-disabled):hover, .semi-datepicker-switch-time:not(.semi-datepicker-switch-time-disabled):hover { background-color: var(--semi-color-fill-0); } .semi-datepicker-switch-date-active, .semi-datepicker-switch-time-active { color: var(--semi-color-text-0); font-weight: 600; cursor: auto; } .semi-datepicker-switch-date-active:hover, .semi-datepicker-switch-time-active:hover { background-color: inherit; } .semi-datepicker-switch-date-disabled, .semi-datepicker-switch-time-disabled { cursor: not-allowed; } .semi-datepicker-switch-text { padding-left: 8px; } .semi-datepicker-time .semi-jumperlist { box-shadow: none; border-radius: 0; } .semi-datepicker-quick-control { box-sizing: border-box; border-top: 1px solid var(--semi-color-border); display: flex; align-items: center; background-color: transparent; padding: 16px; border-radius: 0 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium); flex-wrap: wrap; } .semi-datepicker-quick-control-item { margin-right: 8px; } .semi-datepicker-quick-control-month, .semi-datepicker-quick-control-date, .semi-datepicker-quick-control-dateTime { max-width: 284px; } .semi-datepicker-quick-control-dateRange, .semi-datepicker-quick-control-dateTimeRange { max-width: 568px; } .semi-datepicker-topSlot { border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-bottomSlot { border-top: 1px solid var(--semi-color-border); } .semi-datepicker .semi-popover-trigger { width: 100%; } .semi-datepicker .semi-popover-trigger .semi-input-wrapper { font-size: 13px; } .semi-datepicker .semi-popover-trigger .semi-input-suffix { color: var(--semi-color-primary); } .semi-datepicker .semi-datepicker-input-readonly { cursor: pointer; } .semi-datepicker-inset-input-wrapper { display: flex; flex-wrap: nowrap; justify-content: space-between; box-sizing: border-box; column-gap: 8px; padding: 12px 16px; padding-bottom: 0; width: 284px; } .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] { width: 568px; } .semi-datepicker-inset-input-wrapper[x-type=month] { width: 204px; } .semi-datepicker-inset-input-wrapper .semi-input-wrapper { flex: 1; flex-shrink: 0; } .semi-datepicker-inset-input-separator { flex-grow: 0; flex-shrink: 0; height: 32px; line-height: 32px; padding: 0 4px; color: var(--semi-color-text-3); } .semi-datepicker-range-input { display: flex; align-items: center; box-sizing: border-box; border-radius: var(--semi-border-radius-small); height: 32px; color: var(--semi-color-text-2); background-color: var(--semi-color-fill-0); } .semi-datepicker-range-input-wrapper { box-sizing: border-box; background-color: transparent; padding: 0 8px; height: 100%; width: 100%; border: 1px solid transparent; border-radius: var(--semi-border-radius-small); display: flex; align-items: center; } .semi-datepicker-range-input-wrapper .semi-input-wrapper { background-color: transparent; border: none; } .semi-datepicker-range-input-wrapper-focus { border-color: transparent; background-color: var(--semi-color-fill-1); border-radius: var(--semi-border-radius-small); transition: background-color 0.16s ease-in-out; } .semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn { display: flex; } .semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix { display: none; } .semi-datepicker-range-input-wrapper .semi-input { padding: 2px 4px; } .semi-datepicker-range-input-wrapper-icon { flex-shrink: 0; } .semi-datepicker-range-input-wrapper:hover { background-color: var(--semi-color-fill-1); } .semi-datepicker-range-input-wrapper-start { border-top-right-radius: 0; border-bottom-right-radius: 0; } .semi-datepicker-range-input-wrapper-start-with-prefix { border-radius: 0; } .semi-datepicker-range-input-wrapper-end { border-radius: 0; } .semi-datepicker-range-input-wrapper-active { border-color: var(--semi-color-focus-border); background-color: var(--semi-color-fill-1); } .semi-datepicker-range-input-separator { display: flex; align-items: center; } .semi-datepicker-range-input-separator-active { color: var(--semi-color-text-0); } .semi-datepicker-range-input-small { height: 24px; } .semi-datepicker-range-input-large { height: 40px; } .semi-datepicker-range-input-large .semi-input-default { font-size: 16px; } .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn { display: flex; color: var(--semi-color-primary-hover); cursor: pointer; } .semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix { display: none; } .semi-datepicker-range-input-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-fill); } .semi-datepicker-range-input-disabled .semi-datepicker-range-input-wrapper:hover { background-color: transparent; } .semi-datepicker-range-input-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-datepicker-range-input-disabled .semi-datepicker-range-input-prefix, .semi-datepicker-range-input-disabled .semi-datepicker-range-input-suffix, .semi-datepicker-range-input-disabled .semi-datepicker-range-input-clearbtn { color: var(--semi-color-disabled-text); } .semi-datepicker-range-input-warning { background-color: var(--semi-color-warning-light-default); } .semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper:hover { background-color: var(--semi-color-warning-light-hover); } .semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active { border-color: var(--semi-color-warning); background-color: var(--semi-color-warning-light-hover); } .semi-datepicker-range-input-error { background-color: var(--semi-color-danger-light-default); } .semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper:hover { background-color: var(--semi-color-danger-light-hover); } .semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active { border-color: var(--semi-color-danger); background-color: var(--semi-color-danger-light-hover); } .semi-datepicker-range-input .semi-datepicker-range-input-clearbtn { display: none; } .semi-datepicker-range-input-prefix, .semi-datepicker-range-input-suffix, .semi-datepicker-range-input-clearbtn { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; line-height: 20px; white-space: nowrap; color: var(--semi-color-text-2); } .semi-datepicker-range-input-prefix { padding-left: 12px; padding-right: 8px; } .semi-datepicker-range-input-suffix { padding-left: 8px; padding-right: 12px; } .semi-datepicker-range-input-suffix-hidden { display: none; } .semi-datepicker-range-input-clearbtn { padding-left: 8px; padding-right: 12px; } /* * 小尺寸 DatePicker */ .semi-datepicker-compact { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam { height: calc(100% - 32px); } .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left { border-right: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam-showing { min-height: 268px; min-width: 216px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing { min-height: 284px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header { box-sizing: border-box; height: 48px; padding: 12px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-header { display: none; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-list-outer > ul > li { height: 32px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel { border-right: 0; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-selector { height: 32px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre { margin-top: -17px; } .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post { margin-top: 17px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks { min-height: 168px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year], .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] { min-height: 236px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time], .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] { min-height: 236px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing { min-height: 236px; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk { min-height: 100%; } .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam { height: 100%; } .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-tpk { height: calc(100% - 32px); } .semi-datepicker-compact .semi-datepicker-navigation { height: 24px; padding: 12px; padding-bottom: 0; } .semi-datepicker-compact .semi-datepicker-navigation-left, .semi-datepicker-compact .semi-datepicker-navigation-right { width: 24px; height: 24px; } .semi-datepicker-compact .semi-datepicker-navigation .semi-button { min-width: 24px; min-height: 24px; } .semi-datepicker-compact .semi-datepicker-navigation-month .semi-button { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; } .semi-datepicker-compact .semi-datepicker-month { width: 216px; padding: 0; } .semi-datepicker-compact .semi-datepicker-weeks { padding: 10px; padding-top: 6px; } .semi-datepicker-compact .semi-datepicker-weekday { box-sizing: border-box; height: 36px; padding-left: 10px; padding-right: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-weekday-item { width: 28px; height: 28px; line-height: 28px; } .semi-datepicker-compact .semi-datepicker-day { width: 28px; height: 28px; } .semi-datepicker-compact .semi-datepicker-day-main { width: 24px; height: 24px; } .semi-datepicker-compact .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { width: 28px; } .semi-datepicker-compact .semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 4px; } .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: 4px 0 0 4px; } .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 0 4px 4px 0; } .semi-datepicker-compact .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main { border-radius: 4px 0 0 4px; } .semi-datepicker-compact .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { border-radius: 0 4px 4px 0; } .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { width: 34px; margin-left: 2px; margin-right: 0; border-radius: 4px 0 0 4px; } .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { width: 34px; margin-right: 2px; margin-left: 0; border-radius: 0 4px 4px 0; } .semi-datepicker-compact .semi-datepicker-switch { box-sizing: border-box; height: 32px; } .semi-datepicker-compact .semi-datepicker-switch-date, .semi-datepicker-compact .semi-datepicker-switch-time { padding-top: 6px; padding-bottom: 6px; } .semi-datepicker-compact .semi-datepicker-switch-date { border-right: 1px solid var(--semi-color-border); } .semi-datepicker-compact .semi-datepicker-switch-text { padding-left: 0; } .semi-datepicker-compact .semi-datepicker-quick-control { padding: 12px; } .semi-datepicker-compact .semi-datepicker-quick-control-month, .semi-datepicker-compact .semi-datepicker-quick-control-date, .semi-datepicker-compact .semi-datepicker-quick-control-dateTime { max-width: 216px; } .semi-datepicker-compact .semi-datepicker-quick-control-dateRange, .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange { max-width: 432px; } .semi-datepicker-compact .semi-datepicker-footer { padding-top: 10px; padding-right: 8px; padding-bottom: 10px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper { column-gap: 4px; padding: 8px 8px; padding-bottom: 0; width: 216px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] { width: 432px; padding-top: 0; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper { margin-top: 8px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] { width: 195px; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper { height: 28px; box-sizing: border-box; } .semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input { font-size: 12px; line-height: 26px; height: 26px; vertical-align: top; } .semi-datepicker-compact .semi-datepicker-inset-input-separator { border-left: 1px solid var(--semi-color-border); transform: translateX(50%); height: auto; } .semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks { min-height: 216px; } .semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks { min-height: 168px; } .semi-rtl, .semi-portal-rtl { /* * 小尺寸 DatePicker */ } .semi-rtl .semi-datepicker, .semi-portal-rtl .semi-datepicker { direction: rtl; } .semi-rtl .semi-datepicker-footer, .semi-portal-rtl .semi-datepicker-footer { padding-right: 0; padding-left: 8px; text-align: left; } .semi-rtl .semi-datepicker-footer .semi-button:first-of-type, .semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type { margin-left: 0; margin-right: 0; } .semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2), .semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) { margin-right: 12px; margin-left: 0; } .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { margin-right: 2px; margin-left: auto; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { margin-left: 2px; margin-right: auto; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-rtl .semi-datepicker-switch-text, .semi-portal-rtl .semi-datepicker-switch-text { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-datepicker-quick-control-item, .semi-portal-rtl .semi-datepicker-quick-control-item { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left, .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left, .semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left, .semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left, .semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left, .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right, .semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left, .semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right { transform: scaleX(-1); } .semi-rtl .semi-datepicker-range-input-prefix, .semi-portal-rtl .semi-datepicker-range-input-prefix { padding-left: 8px; padding-right: 12px; } .semi-rtl .semi-datepicker-range-input-suffix, .semi-portal-rtl .semi-datepicker-range-input-suffix { padding-left: 12px; padding-right: 8px; } .semi-rtl .semi-datepicker-range-input-suffix-hidden, .semi-portal-rtl .semi-datepicker-range-input-suffix-hidden { display: none; } .semi-rtl .semi-datepicker-range-input-clearbtn, .semi-portal-rtl .semi-datepicker-range-input-clearbtn { padding-left: 12px; padding-right: 8px; } .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left { border-left: 1px solid var(--semi-color-border); border-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel { border-left: 0; border-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { border-radius: 0 4px 4px 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { border-radius: 4px 0 0 4px; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main { margin-left: 0; margin-right: 2px; border-radius: 0 4px 4px 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main { margin-right: 0; margin-left: 2px; border-radius: 4px 0 0 4px; } .semi-rtl .semi-datepicker-compact .semi-datepicker-switch-date, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-date { border-left: 1px solid var(--semi-color-border); border-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-switch-text, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-text { padding-left: auto; padding-right: 0; } .semi-rtl .semi-datepicker-compact .semi-datepicker-footer, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-footer { padding-left: 8px; padding-right: auto; } .semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator, .semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator { border-right: 1px solid var(--semi-color-border); border-left: 0; transform: translateX(-50%); } .semi-descriptions { line-height: 20px; } .semi-descriptions table, .semi-descriptions tr, .semi-descriptions th, .semi-descriptions td { margin: 0; padding: 0; border: 0; } .semi-descriptions th { padding-right: 24px; } .semi-descriptions .semi-descriptions-item { margin: 0; padding-bottom: 12px; text-align: left; vertical-align: top; } .semi-descriptions-key { font-weight: normal; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-height: 14px; white-space: nowrap; color: var(--semi-color-text-2); } .semi-descriptions-value { font-weight: normal; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-0); } .semi-descriptions-center .semi-descriptions-item-th { text-align: right; } .semi-descriptions-center .semi-descriptions-item-td { text-align: left; } .semi-descriptions-left .semi-descriptions-item-th, .semi-descriptions-left .semi-descriptions-item-td { text-align: left; } .semi-descriptions-justify .semi-descriptions-item-th { text-align: left; } .semi-descriptions-justify .semi-descriptions-item-td { text-align: right; } .semi-descriptions-plain .semi-descriptions-key, .semi-descriptions-plain .semi-descriptions-value { display: inline-block; } .semi-descriptions-plain .semi-descriptions-value { padding-left: 8px; } .semi-descriptions-plain .semi-descriptions-value .semi-tag { vertical-align: middle; } .semi-descriptions-double tbody { display: flex; flex-wrap: wrap; } .semi-descriptions-double tr { display: inline-flex; flex-direction: column; } .semi-descriptions-double .semi-descriptions-item { padding: 0; flex: 1; } .semi-descriptions-double .semi-descriptions-value { font-weight: 600; } .semi-descriptions-double-small .semi-descriptions-item { padding-right: 48px; } .semi-descriptions-double-small .semi-descriptions-key { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; padding-bottom: 0; } .semi-descriptions-double-small .semi-descriptions-value { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-descriptions-double-medium .semi-descriptions-item { padding-right: 60px; } .semi-descriptions-double-medium .semi-descriptions-key { padding-bottom: 4px; } .semi-descriptions-double-medium .semi-descriptions-value { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-descriptions-double-large .semi-descriptions-item { padding-right: 80px; } .semi-descriptions-double-large .semi-descriptions-key { padding-bottom: 4px; } .semi-descriptions-double-large .semi-descriptions-value { font-size: 28px; line-height: 40px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-rtl .semi-descriptions, .semi-portal-rtl .semi-descriptions { direction: rtl; } .semi-rtl .semi-descriptions th, .semi-portal-rtl .semi-descriptions th { direction: rtl; padding-right: 0; padding-left: 24px; } .semi-rtl .semi-descriptions .semi-descriptions-item, .semi-portal-rtl .semi-descriptions .semi-descriptions-item { text-align: right; } .semi-rtl .semi-descriptions-center .semi-descriptions-item-th, .semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-th { text-align: left; } .semi-rtl .semi-descriptions-center .semi-descriptions-item-td, .semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-td { text-align: right; } .semi-rtl .semi-descriptions-left .semi-descriptions-item-th, .semi-rtl .semi-descriptions-left .semi-descriptions-item-td, .semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-th, .semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-td { text-align: left; } .semi-rtl .semi-descriptions-justify .semi-descriptions-item-th, .semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-th { text-align: right; } .semi-rtl .semi-descriptions-justify .semi-descriptions-item-td, .semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-td { text-align: left; } .semi-rtl .semi-descriptions-plain .semi-descriptions-key, .semi-rtl .semi-descriptions-plain .semi-descriptions-value, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-key, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value { display: inline-block; } .semi-rtl .semi-descriptions-plain .semi-descriptions-value, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag, .semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag { vertical-align: middle; } .semi-rtl .semi-descriptions-double, .semi-portal-rtl .semi-descriptions-double { direction: rtl; } .semi-rtl .semi-descriptions-double .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double .semi-descriptions-item { text-align: right; } .semi-rtl .semi-descriptions-double-small .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double-small .semi-descriptions-item { padding-right: 0; padding-left: 48px; } .semi-rtl .semi-descriptions-double-medium .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double-medium .semi-descriptions-item { padding-right: 0; padding-left: 60px; } .semi-rtl .semi-descriptions-double-large .semi-descriptions-item, .semi-portal-rtl .semi-descriptions-double-large .semi-descriptions-item { padding-right: 0; padding-left: 80px; } .semi-dropdown { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-dropdown-wrapper { box-shadow: var(--semi-shadow-elevated); position: relative; z-index: 1050; border-radius: var(--semi-border-radius-medium); background: var(--semi-color-bg-3); visibility: hidden; } .semi-dropdown-wrapper-show { visibility: visible; } .semi-dropdown-trigger { display: inline-block; } .semi-dropdown-menu { list-style: none; padding: 4px 0; margin: 0; } .semi-dropdown-title { color: var(--semi-color-text-2); padding-top: 8px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: default; } .semi-dropdown-title-withTick { padding-left: 31px; } .semi-dropdown-item { padding: 8px 16px; color: var(--semi-color-text-0); max-width: 280px; display: flex; align-items: center; } .semi-dropdown-item:not(.semi-dropdown-item-active):hover { background-color: var(--semi-color-fill-0); cursor: pointer; } .semi-dropdown-item:not(.semi-dropdown-item-active):active { background-color: var(--semi-color-fill-1); } .semi-dropdown-item-icon { display: inline-flex; align-items: center; margin-right: 8px; } .semi-dropdown-item-danger { color: var(--semi-color-danger); } .semi-dropdown-item-secondary { color: var(--semi-color-secondary); } .semi-dropdown-item-warning { color: var(--semi-color-warning); } .semi-dropdown-item-tertiary { color: var(--semi-color-tertiary); } .semi-dropdown-item-primary { color: var(--semi-color-primary); } .semi-dropdown-item-withTick { padding-left: 12px; } .semi-dropdown-item > .semi-icon { flex-shrink: 0; margin-right: 9px; font-size: 12px; } .semi-dropdown-item-active { font-weight: 600; } .semi-dropdown-item.semi-dropdown-item-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-dropdown-item.semi-dropdown-item-disabled:hover, .semi-dropdown-item.semi-dropdown-item-disabled:active { cursor: not-allowed; background-color: transparent; } .semi-dropdown-divider { display: block; height: 1px; width: 100%; min-width: 100%; clear: both; background: var(--semi-color-border); margin: 4px 0; } .semi-rtl .semi-dropdown-wrapper, .semi-portal-rtl .semi-dropdown-wrapper { direction: rtl; } .semi-rtl .semi-dropdown-title-withTick, .semi-portal-rtl .semi-dropdown-title-withTick { padding-left: 0; padding-right: 31px; } .semi-rtl .semi-dropdown-item-withTick, .semi-portal-rtl .semi-dropdown-item-withTick { padding-left: auto; padding-right: 12px; } .semi-rtl .semi-dropdown-item > .semi-icon, .semi-portal-rtl .semi-dropdown-item > .semi-icon { margin-right: 0; margin-left: 9px; } .semi-empty { display: flex; } .semi-empty-image { display: flex; justify-content: center; user-select: none; -webkit-user-drag: none; pointer-events: none; } .semi-empty-vertical { align-items: center; flex-direction: column; } .semi-empty-vertical .semi-empty-content { margin-top: 24px; } .semi-empty-vertical .semi-empty-title, .semi-empty-vertical .semi-empty-description { text-align: center; } .semi-empty-horizontal .semi-empty-content { margin-left: 32px; } .semi-empty-title.semi-typography { display: block; font-weight: 600; } .semi-empty-title + .semi-empty-description { margin-top: 16px; } .semi-empty-description { color: var(--semi-color-text-1); } .semi-empty-footer { margin-top: 24px; } .semi-rtl .semi-empty, .semi-portal-rtl .semi-empty { direction: rtl; } .semi-rtl .semi-empty-horizontal .semi-empty-content, .semi-portal-rtl .semi-empty-horizontal .semi-empty-content { margin-left: auto; margin-right: 32px; } .semi-form .semi-form-field { box-sizing: border-box; } .semi-form-horizontal { display: flex; flex-wrap: wrap; } .semi-form-horizontal .semi-form-field { margin-left: 0; padding-right: 16px; } .semi-form-horizontal .semi-form-field:last-child { margin-right: 16px; } .semi-form-horizontal .semi-form-field-group { padding-right: 16px; } .semi-form-horizontal .semi-row { display: block; } .semi-form-vertical .semi-form-field { margin: 0; padding-top: 12px; padding-bottom: 12px; overflow: hidden; } .semi-form-vertical .semi-form-field .semi-form-col-right { display: flex; justify-content: flex-end; } .semi-form-vertical .semi-form-field .semi-form-col-left { display: flex; justify-content: flex-start; } .semi-form-field-label { box-sizing: border-box; padding-right: 16px; font-weight: 600; color: var(--semi-color-text-0); margin-bottom: 4px; display: inline-block; vertical-align: middle; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; flex-shrink: 0; user-select: none; } .semi-form-field-label-disabled { color: var(--semi-color-disabled-text); } .semi-form-field-label-with-extra .semi-form-field-label-text { display: inline-block; } .semi-form-field-label-with-extra .semi-form-field-label-extra { display: flex; align-items: center; margin-left: 4px; } .semi-form-field-label-required .semi-form-field-label-text::after { content: "*"; margin-left: 4px; color: var(--semi-color-danger); font-weight: 600; } .semi-form-field-label-required-disabled { color: var(--semi-color-danger); } .semi-form-field-label-left { text-align: left; } .semi-form-field-label-right { text-align: right; } .semi-form-field-error-message, .semi-form-field-help-text { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; margin-top: 4px; } .semi-form-field-error-message .semi-icon-alert_triangle, .semi-form-field-help-text .semi-icon-alert_triangle { color: var(--semi-color-warning); } .semi-form-field-error-message { color: var(--semi-color-danger); } .semi-form-field[x-label-pos=top] .semi-form-field-label { display: block; } .semi-form-field[x-label-pos=top] .semi-checkboxGroup, .semi-form-field[x-label-pos=top] .semi-radioGroup { padding-top: 4px; padding-bottom: 4px; } .semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra { display: flex; align-items: center; } .semi-form-field[x-label-pos=left] { display: flex; } .semi-form-field[x-label-pos=left] .semi-form-field-label { margin-bottom: 0; margin-right: 0; padding-top: 6px; padding-bottom: 6px; } .semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra { display: flex; align-items: center; } .semi-form-field[x-label-pos=left] .semi-checkboxGroup, .semi-form-field[x-label-pos=left] .semi-radioGroup { padding-top: 6px; padding-bottom: 6px; } .semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio { padding-top: 0; padding-bottom: 0; } .semi-form-field[x-label-pos=left] .semi-switch, .semi-form-field[x-label-pos=left] .semi-rating { vertical-align: middle; margin-top: 4px; margin-bottom: 4px; } .semi-form-field[x-extra-pos=middle] .semi-form-field-extra { margin-top: 4px; margin-bottom: 4px; } .semi-form-field[x-extra-pos=bottom] .semi-form-field-extra { margin-top: 4px; } .semi-form-field-main { width: 100%; } .semi-form-field-validate-status-icon { margin-right: 4px; flex-shrink: 0; align-self: flex-start; position: relative; top: 2px; } .semi-form-field-extra { color: var(--semi-color-tertiary); } .semi-form-field-extra-string { color: var(--semi-color-tertiary); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-form-vertical .semi-form-field-group { margin-top: 0; margin-bottom: 0; padding-top: 12px; padding-bottom: 12px; } .semi-form-vertical .semi-form-field-group .semi-form-field { margin-top: 0; margin-bottom: 0; } .semi-form-field-group[x-label-pos=left] { display: flex; } .semi-form-field-group[x-label-pos=left] .semi-form-field-label { margin-bottom: 0; margin-right: 0; padding-top: 6px; padding-bottom: 6px; } .semi-form-section { width: 100%; margin-top: 28px; } .semi-form-section-text { margin-block-start: 0; margin-block-end: 0; font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--semi-color-border); margin-bottom: 4px; color: var(--semi-color-text-0); } .semi-form-section:nth-of-type(1) { margin-top: 0; } .semi-rtl .semi-form, .semi-portal-rtl .semi-form { direction: rtl; } .semi-rtl .semi-form-horizontal .semi-form-field, .semi-portal-rtl .semi-form-horizontal .semi-form-field { margin-left: 0; margin-right: 0; padding-right: 0; padding-left: 16px; } .semi-rtl .semi-form-horizontal .semi-form-field:last-child, .semi-portal-rtl .semi-form-horizontal .semi-form-field:last-child { margin-left: 16px; } .semi-rtl .semi-form-horizontal .semi-form-field-group, .semi-portal-rtl .semi-form-horizontal .semi-form-field-group { padding-right: 0; padding-left: 16px; } .semi-rtl .semi-form-field-label, .semi-portal-rtl .semi-form-field-label { padding-right: 0; padding-left: 16px; } .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra, .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-form-field-label-required .semi-form-field-label-text::after, .semi-portal-rtl .semi-form-field-label-required .semi-form-field-label-text::after { content: "*"; margin-left: 0; margin-right: 4px; } .semi-rtl .semi-form-field-label-left, .semi-portal-rtl .semi-form-field-label-left { text-align: right; } .semi-rtl .semi-form-field-label-right, .semi-portal-rtl .semi-form-field-label-right { text-align: left; } .semi-rtl .semi-form-field, .semi-portal-rtl .semi-form-field { direction: rtl; } .semi-rtl .semi-form-field[x-label-pos=left] .semi-form-field-label, .semi-portal-rtl .semi-form-field[x-label-pos=left] .semi-form-field-label { margin-right: 0; margin-left: 0; } .semi-rtl .semi-form-field-validate-status-icon, .semi-portal-rtl .semi-form-field-validate-status-icon { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-form-section, .semi-portal-rtl .semi-form-section { direction: rtl; } .semi-row { position: relative; height: auto; margin-right: 0; margin-left: 0; zoom: 1; display: block; box-sizing: border-box; } .semi-row::before, .semi-row::after { display: table; content: ""; } .semi-row::after { clear: both; } .semi-row-flex { display: flex; flex-flow: row wrap; } .semi-row-flex::before, .semi-row-flex::after { display: flex; } .semi-col-0 { display: none; } .semi-row-flex-start { justify-content: flex-start; } .semi-row-flex-center { justify-content: center; } .semi-row-flex-end { justify-content: flex-end; } .semi-row-flex-space-between { justify-content: space-between; } .semi-row-flex-space-around { justify-content: space-around; } .semi-row-flex-top { align-items: flex-start; } .semi-row-flex-middle { align-items: center; } .semi-row-flex-bottom { align-items: flex-end; } .semi-col { position: relative; } .semi-col-1, .semi-col-xs-1, .semi-col-sm-1, .semi-col-md-1, .semi-col-lg-1 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-2, .semi-col-xs-2, .semi-col-sm-2, .semi-col-md-2, .semi-col-lg-2 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-3, .semi-col-xs-3, .semi-col-sm-3, .semi-col-md-3, .semi-col-lg-3 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-4, .semi-col-xs-4, .semi-col-sm-4, .semi-col-md-4, .semi-col-lg-4 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-5, .semi-col-xs-5, .semi-col-sm-5, .semi-col-md-5, .semi-col-lg-5 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-6, .semi-col-xs-6, .semi-col-sm-6, .semi-col-md-6, .semi-col-lg-6 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-7, .semi-col-xs-7, .semi-col-sm-7, .semi-col-md-7, .semi-col-lg-7 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-8, .semi-col-xs-8, .semi-col-sm-8, .semi-col-md-8, .semi-col-lg-8 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-9, .semi-col-xs-9, .semi-col-sm-9, .semi-col-md-9, .semi-col-lg-9 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-10, .semi-col-xs-10, .semi-col-sm-10, .semi-col-md-10, .semi-col-lg-10 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-11, .semi-col-xs-11, .semi-col-sm-11, .semi-col-md-11, .semi-col-lg-11 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-12, .semi-col-xs-12, .semi-col-sm-12, .semi-col-md-12, .semi-col-lg-12 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-13, .semi-col-xs-13, .semi-col-sm-13, .semi-col-md-13, .semi-col-lg-13 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-14, .semi-col-xs-14, .semi-col-sm-14, .semi-col-md-14, .semi-col-lg-14 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-15, .semi-col-xs-15, .semi-col-sm-15, .semi-col-md-15, .semi-col-lg-15 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-16, .semi-col-xs-16, .semi-col-sm-16, .semi-col-md-16, .semi-col-lg-16 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-17, .semi-col-xs-17, .semi-col-sm-17, .semi-col-md-17, .semi-col-lg-17 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-18, .semi-col-xs-18, .semi-col-sm-18, .semi-col-md-18, .semi-col-lg-18 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-19, .semi-col-xs-19, .semi-col-sm-19, .semi-col-md-19, .semi-col-lg-19 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-20, .semi-col-xs-20, .semi-col-sm-20, .semi-col-md-20, .semi-col-lg-20 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-21, .semi-col-xs-21, .semi-col-sm-21, .semi-col-md-21, .semi-col-lg-21 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-22, .semi-col-xs-22, .semi-col-sm-22, .semi-col-md-22, .semi-col-lg-22 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-23, .semi-col-xs-23, .semi-col-sm-23, .semi-col-md-23, .semi-col-lg-23 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-24, .semi-col-xs-24, .semi-col-sm-24, .semi-col-md-24, .semi-col-lg-24 { position: relative; min-height: 1px; padding-right: 0; padding-left: 0; } .semi-col-1 { flex: 0 0 auto; float: left; } .semi-col-2 { flex: 0 0 auto; float: left; } .semi-col-3 { flex: 0 0 auto; float: left; } .semi-col-4 { flex: 0 0 auto; float: left; } .semi-col-5 { flex: 0 0 auto; float: left; } .semi-col-6 { flex: 0 0 auto; float: left; } .semi-col-7 { flex: 0 0 auto; float: left; } .semi-col-8 { flex: 0 0 auto; float: left; } .semi-col-9 { flex: 0 0 auto; float: left; } .semi-col-10 { flex: 0 0 auto; float: left; } .semi-col-11 { flex: 0 0 auto; float: left; } .semi-col-12 { flex: 0 0 auto; float: left; } .semi-col-13 { flex: 0 0 auto; float: left; } .semi-col-14 { flex: 0 0 auto; float: left; } .semi-col-15 { flex: 0 0 auto; float: left; } .semi-col-16 { flex: 0 0 auto; float: left; } .semi-col-17 { flex: 0 0 auto; float: left; } .semi-col-18 { flex: 0 0 auto; float: left; } .semi-col-19 { flex: 0 0 auto; float: left; } .semi-col-20 { flex: 0 0 auto; float: left; } .semi-col-21 { flex: 0 0 auto; float: left; } .semi-col-22 { flex: 0 0 auto; float: left; } .semi-col-23 { flex: 0 0 auto; float: left; } .semi-col-24 { flex: 0 0 auto; float: left; } .semi-col-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-push-1 { left: 4.1666666667%; } .semi-col-pull-1 { right: 4.1666666667%; } .semi-col-offset-1 { margin-left: 4.1666666667%; } .semi-col-order-1 { order: 1; } .semi-col-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-push-2 { left: 8.3333333333%; } .semi-col-pull-2 { right: 8.3333333333%; } .semi-col-offset-2 { margin-left: 8.3333333333%; } .semi-col-order-2 { order: 2; } .semi-col-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-push-3 { left: 12.5%; } .semi-col-pull-3 { right: 12.5%; } .semi-col-offset-3 { margin-left: 12.5%; } .semi-col-order-3 { order: 3; } .semi-col-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-push-4 { left: 16.6666666667%; } .semi-col-pull-4 { right: 16.6666666667%; } .semi-col-offset-4 { margin-left: 16.6666666667%; } .semi-col-order-4 { order: 4; } .semi-col-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-push-5 { left: 20.8333333333%; } .semi-col-pull-5 { right: 20.8333333333%; } .semi-col-offset-5 { margin-left: 20.8333333333%; } .semi-col-order-5 { order: 5; } .semi-col-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-push-6 { left: 25%; } .semi-col-pull-6 { right: 25%; } .semi-col-offset-6 { margin-left: 25%; } .semi-col-order-6 { order: 6; } .semi-col-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-push-7 { left: 29.1666666667%; } .semi-col-pull-7 { right: 29.1666666667%; } .semi-col-offset-7 { margin-left: 29.1666666667%; } .semi-col-order-7 { order: 7; } .semi-col-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-push-8 { left: 33.3333333333%; } .semi-col-pull-8 { right: 33.3333333333%; } .semi-col-offset-8 { margin-left: 33.3333333333%; } .semi-col-order-8 { order: 8; } .semi-col-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-push-9 { left: 37.5%; } .semi-col-pull-9 { right: 37.5%; } .semi-col-offset-9 { margin-left: 37.5%; } .semi-col-order-9 { order: 9; } .semi-col-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-push-10 { left: 41.6666666667%; } .semi-col-pull-10 { right: 41.6666666667%; } .semi-col-offset-10 { margin-left: 41.6666666667%; } .semi-col-order-10 { order: 10; } .semi-col-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-push-11 { left: 45.8333333333%; } .semi-col-pull-11 { right: 45.8333333333%; } .semi-col-offset-11 { margin-left: 45.8333333333%; } .semi-col-order-11 { order: 11; } .semi-col-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-push-12 { left: 50%; } .semi-col-pull-12 { right: 50%; } .semi-col-offset-12 { margin-left: 50%; } .semi-col-order-12 { order: 12; } .semi-col-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-push-13 { left: 54.1666666667%; } .semi-col-pull-13 { right: 54.1666666667%; } .semi-col-offset-13 { margin-left: 54.1666666667%; } .semi-col-order-13 { order: 13; } .semi-col-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-push-14 { left: 58.3333333333%; } .semi-col-pull-14 { right: 58.3333333333%; } .semi-col-offset-14 { margin-left: 58.3333333333%; } .semi-col-order-14 { order: 14; } .semi-col-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-push-15 { left: 62.5%; } .semi-col-pull-15 { right: 62.5%; } .semi-col-offset-15 { margin-left: 62.5%; } .semi-col-order-15 { order: 15; } .semi-col-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-push-16 { left: 66.6666666667%; } .semi-col-pull-16 { right: 66.6666666667%; } .semi-col-offset-16 { margin-left: 66.6666666667%; } .semi-col-order-16 { order: 16; } .semi-col-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-push-17 { left: 70.8333333333%; } .semi-col-pull-17 { right: 70.8333333333%; } .semi-col-offset-17 { margin-left: 70.8333333333%; } .semi-col-order-17 { order: 17; } .semi-col-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-push-18 { left: 75%; } .semi-col-pull-18 { right: 75%; } .semi-col-offset-18 { margin-left: 75%; } .semi-col-order-18 { order: 18; } .semi-col-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-push-19 { left: 79.1666666667%; } .semi-col-pull-19 { right: 79.1666666667%; } .semi-col-offset-19 { margin-left: 79.1666666667%; } .semi-col-order-19 { order: 19; } .semi-col-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-push-20 { left: 83.3333333333%; } .semi-col-pull-20 { right: 83.3333333333%; } .semi-col-offset-20 { margin-left: 83.3333333333%; } .semi-col-order-20 { order: 20; } .semi-col-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-push-21 { left: 87.5%; } .semi-col-pull-21 { right: 87.5%; } .semi-col-offset-21 { margin-left: 87.5%; } .semi-col-order-21 { order: 21; } .semi-col-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-push-22 { left: 91.6666666667%; } .semi-col-pull-22 { right: 91.6666666667%; } .semi-col-offset-22 { margin-left: 91.6666666667%; } .semi-col-order-22 { order: 22; } .semi-col-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-push-23 { left: 95.8333333333%; } .semi-col-pull-23 { right: 95.8333333333%; } .semi-col-offset-23 { margin-left: 95.8333333333%; } .semi-col-order-23 { order: 23; } .semi-col-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-push-24 { left: 100%; } .semi-col-pull-24 { right: 100%; } .semi-col-offset-24 { margin-left: 100%; } .semi-col-order-24 { order: 24; } .semi-rtl .semi-col-1 { float: right; } .semi-rtl .semi-col-2 { float: right; } .semi-rtl .semi-col-3 { float: right; } .semi-rtl .semi-col-4 { float: right; } .semi-rtl .semi-col-5 { float: right; } .semi-rtl .semi-col-6 { float: right; } .semi-rtl .semi-col-7 { float: right; } .semi-rtl .semi-col-8 { float: right; } .semi-rtl .semi-col-9 { float: right; } .semi-rtl .semi-col-10 { float: right; } .semi-rtl .semi-col-11 { float: right; } .semi-rtl .semi-col-12 { float: right; } .semi-rtl .semi-col-13 { float: right; } .semi-rtl .semi-col-14 { float: right; } .semi-rtl .semi-col-15 { float: right; } .semi-rtl .semi-col-16 { float: right; } .semi-rtl .semi-col-17 { float: right; } .semi-rtl .semi-col-18 { float: right; } .semi-rtl .semi-col-19 { float: right; } .semi-rtl .semi-col-20 { float: right; } .semi-rtl .semi-col-21 { float: right; } .semi-rtl .semi-col-22 { float: right; } .semi-rtl .semi-col-23 { float: right; } .semi-rtl .semi-col-24 { float: right; } .semi-rtl .semi-col-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-offset-24 { margin-left: auto; margin-right: 100%; } .semi-col-xs-1 { flex: 0 0 auto; float: left; } .semi-col-xs-2 { flex: 0 0 auto; float: left; } .semi-col-xs-3 { flex: 0 0 auto; float: left; } .semi-col-xs-4 { flex: 0 0 auto; float: left; } .semi-col-xs-5 { flex: 0 0 auto; float: left; } .semi-col-xs-6 { flex: 0 0 auto; float: left; } .semi-col-xs-7 { flex: 0 0 auto; float: left; } .semi-col-xs-8 { flex: 0 0 auto; float: left; } .semi-col-xs-9 { flex: 0 0 auto; float: left; } .semi-col-xs-10 { flex: 0 0 auto; float: left; } .semi-col-xs-11 { flex: 0 0 auto; float: left; } .semi-col-xs-12 { flex: 0 0 auto; float: left; } .semi-col-xs-13 { flex: 0 0 auto; float: left; } .semi-col-xs-14 { flex: 0 0 auto; float: left; } .semi-col-xs-15 { flex: 0 0 auto; float: left; } .semi-col-xs-16 { flex: 0 0 auto; float: left; } .semi-col-xs-17 { flex: 0 0 auto; float: left; } .semi-col-xs-18 { flex: 0 0 auto; float: left; } .semi-col-xs-19 { flex: 0 0 auto; float: left; } .semi-col-xs-20 { flex: 0 0 auto; float: left; } .semi-col-xs-21 { flex: 0 0 auto; float: left; } .semi-col-xs-22 { flex: 0 0 auto; float: left; } .semi-col-xs-23 { flex: 0 0 auto; float: left; } .semi-col-xs-24 { flex: 0 0 auto; float: left; } .semi-col-xs-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-xs-push-1 { left: 4.1666666667%; } .semi-col-xs-pull-1 { right: 4.1666666667%; } .semi-col-xs-offset-1 { margin-left: 4.1666666667%; } .semi-col-xs-order-1 { order: 1; } .semi-col-xs-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-xs-push-2 { left: 8.3333333333%; } .semi-col-xs-pull-2 { right: 8.3333333333%; } .semi-col-xs-offset-2 { margin-left: 8.3333333333%; } .semi-col-xs-order-2 { order: 2; } .semi-col-xs-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-xs-push-3 { left: 12.5%; } .semi-col-xs-pull-3 { right: 12.5%; } .semi-col-xs-offset-3 { margin-left: 12.5%; } .semi-col-xs-order-3 { order: 3; } .semi-col-xs-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-xs-push-4 { left: 16.6666666667%; } .semi-col-xs-pull-4 { right: 16.6666666667%; } .semi-col-xs-offset-4 { margin-left: 16.6666666667%; } .semi-col-xs-order-4 { order: 4; } .semi-col-xs-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-xs-push-5 { left: 20.8333333333%; } .semi-col-xs-pull-5 { right: 20.8333333333%; } .semi-col-xs-offset-5 { margin-left: 20.8333333333%; } .semi-col-xs-order-5 { order: 5; } .semi-col-xs-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-xs-push-6 { left: 25%; } .semi-col-xs-pull-6 { right: 25%; } .semi-col-xs-offset-6 { margin-left: 25%; } .semi-col-xs-order-6 { order: 6; } .semi-col-xs-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-xs-push-7 { left: 29.1666666667%; } .semi-col-xs-pull-7 { right: 29.1666666667%; } .semi-col-xs-offset-7 { margin-left: 29.1666666667%; } .semi-col-xs-order-7 { order: 7; } .semi-col-xs-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-xs-push-8 { left: 33.3333333333%; } .semi-col-xs-pull-8 { right: 33.3333333333%; } .semi-col-xs-offset-8 { margin-left: 33.3333333333%; } .semi-col-xs-order-8 { order: 8; } .semi-col-xs-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-xs-push-9 { left: 37.5%; } .semi-col-xs-pull-9 { right: 37.5%; } .semi-col-xs-offset-9 { margin-left: 37.5%; } .semi-col-xs-order-9 { order: 9; } .semi-col-xs-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-xs-push-10 { left: 41.6666666667%; } .semi-col-xs-pull-10 { right: 41.6666666667%; } .semi-col-xs-offset-10 { margin-left: 41.6666666667%; } .semi-col-xs-order-10 { order: 10; } .semi-col-xs-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-xs-push-11 { left: 45.8333333333%; } .semi-col-xs-pull-11 { right: 45.8333333333%; } .semi-col-xs-offset-11 { margin-left: 45.8333333333%; } .semi-col-xs-order-11 { order: 11; } .semi-col-xs-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-xs-push-12 { left: 50%; } .semi-col-xs-pull-12 { right: 50%; } .semi-col-xs-offset-12 { margin-left: 50%; } .semi-col-xs-order-12 { order: 12; } .semi-col-xs-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-xs-push-13 { left: 54.1666666667%; } .semi-col-xs-pull-13 { right: 54.1666666667%; } .semi-col-xs-offset-13 { margin-left: 54.1666666667%; } .semi-col-xs-order-13 { order: 13; } .semi-col-xs-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-xs-push-14 { left: 58.3333333333%; } .semi-col-xs-pull-14 { right: 58.3333333333%; } .semi-col-xs-offset-14 { margin-left: 58.3333333333%; } .semi-col-xs-order-14 { order: 14; } .semi-col-xs-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-xs-push-15 { left: 62.5%; } .semi-col-xs-pull-15 { right: 62.5%; } .semi-col-xs-offset-15 { margin-left: 62.5%; } .semi-col-xs-order-15 { order: 15; } .semi-col-xs-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-xs-push-16 { left: 66.6666666667%; } .semi-col-xs-pull-16 { right: 66.6666666667%; } .semi-col-xs-offset-16 { margin-left: 66.6666666667%; } .semi-col-xs-order-16 { order: 16; } .semi-col-xs-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-xs-push-17 { left: 70.8333333333%; } .semi-col-xs-pull-17 { right: 70.8333333333%; } .semi-col-xs-offset-17 { margin-left: 70.8333333333%; } .semi-col-xs-order-17 { order: 17; } .semi-col-xs-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-xs-push-18 { left: 75%; } .semi-col-xs-pull-18 { right: 75%; } .semi-col-xs-offset-18 { margin-left: 75%; } .semi-col-xs-order-18 { order: 18; } .semi-col-xs-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-xs-push-19 { left: 79.1666666667%; } .semi-col-xs-pull-19 { right: 79.1666666667%; } .semi-col-xs-offset-19 { margin-left: 79.1666666667%; } .semi-col-xs-order-19 { order: 19; } .semi-col-xs-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-xs-push-20 { left: 83.3333333333%; } .semi-col-xs-pull-20 { right: 83.3333333333%; } .semi-col-xs-offset-20 { margin-left: 83.3333333333%; } .semi-col-xs-order-20 { order: 20; } .semi-col-xs-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-xs-push-21 { left: 87.5%; } .semi-col-xs-pull-21 { right: 87.5%; } .semi-col-xs-offset-21 { margin-left: 87.5%; } .semi-col-xs-order-21 { order: 21; } .semi-col-xs-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-xs-push-22 { left: 91.6666666667%; } .semi-col-xs-pull-22 { right: 91.6666666667%; } .semi-col-xs-offset-22 { margin-left: 91.6666666667%; } .semi-col-xs-order-22 { order: 22; } .semi-col-xs-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-xs-push-23 { left: 95.8333333333%; } .semi-col-xs-pull-23 { right: 95.8333333333%; } .semi-col-xs-offset-23 { margin-left: 95.8333333333%; } .semi-col-xs-order-23 { order: 23; } .semi-col-xs-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-xs-push-24 { left: 100%; } .semi-col-xs-pull-24 { right: 100%; } .semi-col-xs-offset-24 { margin-left: 100%; } .semi-col-xs-order-24 { order: 24; } .semi-rtl .semi-col-xs-1 { float: right; } .semi-rtl .semi-col-xs-2 { float: right; } .semi-rtl .semi-col-xs-3 { float: right; } .semi-rtl .semi-col-xs-4 { float: right; } .semi-rtl .semi-col-xs-5 { float: right; } .semi-rtl .semi-col-xs-6 { float: right; } .semi-rtl .semi-col-xs-7 { float: right; } .semi-rtl .semi-col-xs-8 { float: right; } .semi-rtl .semi-col-xs-9 { float: right; } .semi-rtl .semi-col-xs-10 { float: right; } .semi-rtl .semi-col-xs-11 { float: right; } .semi-rtl .semi-col-xs-12 { float: right; } .semi-rtl .semi-col-xs-13 { float: right; } .semi-rtl .semi-col-xs-14 { float: right; } .semi-rtl .semi-col-xs-15 { float: right; } .semi-rtl .semi-col-xs-16 { float: right; } .semi-rtl .semi-col-xs-17 { float: right; } .semi-rtl .semi-col-xs-18 { float: right; } .semi-rtl .semi-col-xs-19 { float: right; } .semi-rtl .semi-col-xs-20 { float: right; } .semi-rtl .semi-col-xs-21 { float: right; } .semi-rtl .semi-col-xs-22 { float: right; } .semi-rtl .semi-col-xs-23 { float: right; } .semi-rtl .semi-col-xs-24 { float: right; } .semi-rtl .semi-col-xs-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-xs-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-xs-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-xs-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-xs-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-xs-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-xs-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-xs-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-xs-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-xs-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-xs-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-xs-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-xs-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-xs-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-xs-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-xs-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-xs-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-xs-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-xs-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-xs-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-xs-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-xs-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-xs-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-xs-offset-24 { margin-left: auto; margin-right: 100%; } @media (min-width: 576px) { .semi-col-sm-1 { flex: 0 0 auto; float: left; } .semi-col-sm-2 { flex: 0 0 auto; float: left; } .semi-col-sm-3 { flex: 0 0 auto; float: left; } .semi-col-sm-4 { flex: 0 0 auto; float: left; } .semi-col-sm-5 { flex: 0 0 auto; float: left; } .semi-col-sm-6 { flex: 0 0 auto; float: left; } .semi-col-sm-7 { flex: 0 0 auto; float: left; } .semi-col-sm-8 { flex: 0 0 auto; float: left; } .semi-col-sm-9 { flex: 0 0 auto; float: left; } .semi-col-sm-10 { flex: 0 0 auto; float: left; } .semi-col-sm-11 { flex: 0 0 auto; float: left; } .semi-col-sm-12 { flex: 0 0 auto; float: left; } .semi-col-sm-13 { flex: 0 0 auto; float: left; } .semi-col-sm-14 { flex: 0 0 auto; float: left; } .semi-col-sm-15 { flex: 0 0 auto; float: left; } .semi-col-sm-16 { flex: 0 0 auto; float: left; } .semi-col-sm-17 { flex: 0 0 auto; float: left; } .semi-col-sm-18 { flex: 0 0 auto; float: left; } .semi-col-sm-19 { flex: 0 0 auto; float: left; } .semi-col-sm-20 { flex: 0 0 auto; float: left; } .semi-col-sm-21 { flex: 0 0 auto; float: left; } .semi-col-sm-22 { flex: 0 0 auto; float: left; } .semi-col-sm-23 { flex: 0 0 auto; float: left; } .semi-col-sm-24 { flex: 0 0 auto; float: left; } .semi-col-sm-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-sm-push-1 { left: 4.1666666667%; } .semi-col-sm-pull-1 { right: 4.1666666667%; } .semi-col-sm-offset-1 { margin-left: 4.1666666667%; } .semi-col-sm-order-1 { order: 1; } .semi-col-sm-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-sm-push-2 { left: 8.3333333333%; } .semi-col-sm-pull-2 { right: 8.3333333333%; } .semi-col-sm-offset-2 { margin-left: 8.3333333333%; } .semi-col-sm-order-2 { order: 2; } .semi-col-sm-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-sm-push-3 { left: 12.5%; } .semi-col-sm-pull-3 { right: 12.5%; } .semi-col-sm-offset-3 { margin-left: 12.5%; } .semi-col-sm-order-3 { order: 3; } .semi-col-sm-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-sm-push-4 { left: 16.6666666667%; } .semi-col-sm-pull-4 { right: 16.6666666667%; } .semi-col-sm-offset-4 { margin-left: 16.6666666667%; } .semi-col-sm-order-4 { order: 4; } .semi-col-sm-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-sm-push-5 { left: 20.8333333333%; } .semi-col-sm-pull-5 { right: 20.8333333333%; } .semi-col-sm-offset-5 { margin-left: 20.8333333333%; } .semi-col-sm-order-5 { order: 5; } .semi-col-sm-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-sm-push-6 { left: 25%; } .semi-col-sm-pull-6 { right: 25%; } .semi-col-sm-offset-6 { margin-left: 25%; } .semi-col-sm-order-6 { order: 6; } .semi-col-sm-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-sm-push-7 { left: 29.1666666667%; } .semi-col-sm-pull-7 { right: 29.1666666667%; } .semi-col-sm-offset-7 { margin-left: 29.1666666667%; } .semi-col-sm-order-7 { order: 7; } .semi-col-sm-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-sm-push-8 { left: 33.3333333333%; } .semi-col-sm-pull-8 { right: 33.3333333333%; } .semi-col-sm-offset-8 { margin-left: 33.3333333333%; } .semi-col-sm-order-8 { order: 8; } .semi-col-sm-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-sm-push-9 { left: 37.5%; } .semi-col-sm-pull-9 { right: 37.5%; } .semi-col-sm-offset-9 { margin-left: 37.5%; } .semi-col-sm-order-9 { order: 9; } .semi-col-sm-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-sm-push-10 { left: 41.6666666667%; } .semi-col-sm-pull-10 { right: 41.6666666667%; } .semi-col-sm-offset-10 { margin-left: 41.6666666667%; } .semi-col-sm-order-10 { order: 10; } .semi-col-sm-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-sm-push-11 { left: 45.8333333333%; } .semi-col-sm-pull-11 { right: 45.8333333333%; } .semi-col-sm-offset-11 { margin-left: 45.8333333333%; } .semi-col-sm-order-11 { order: 11; } .semi-col-sm-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-sm-push-12 { left: 50%; } .semi-col-sm-pull-12 { right: 50%; } .semi-col-sm-offset-12 { margin-left: 50%; } .semi-col-sm-order-12 { order: 12; } .semi-col-sm-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-sm-push-13 { left: 54.1666666667%; } .semi-col-sm-pull-13 { right: 54.1666666667%; } .semi-col-sm-offset-13 { margin-left: 54.1666666667%; } .semi-col-sm-order-13 { order: 13; } .semi-col-sm-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-sm-push-14 { left: 58.3333333333%; } .semi-col-sm-pull-14 { right: 58.3333333333%; } .semi-col-sm-offset-14 { margin-left: 58.3333333333%; } .semi-col-sm-order-14 { order: 14; } .semi-col-sm-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-sm-push-15 { left: 62.5%; } .semi-col-sm-pull-15 { right: 62.5%; } .semi-col-sm-offset-15 { margin-left: 62.5%; } .semi-col-sm-order-15 { order: 15; } .semi-col-sm-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-sm-push-16 { left: 66.6666666667%; } .semi-col-sm-pull-16 { right: 66.6666666667%; } .semi-col-sm-offset-16 { margin-left: 66.6666666667%; } .semi-col-sm-order-16 { order: 16; } .semi-col-sm-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-sm-push-17 { left: 70.8333333333%; } .semi-col-sm-pull-17 { right: 70.8333333333%; } .semi-col-sm-offset-17 { margin-left: 70.8333333333%; } .semi-col-sm-order-17 { order: 17; } .semi-col-sm-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-sm-push-18 { left: 75%; } .semi-col-sm-pull-18 { right: 75%; } .semi-col-sm-offset-18 { margin-left: 75%; } .semi-col-sm-order-18 { order: 18; } .semi-col-sm-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-sm-push-19 { left: 79.1666666667%; } .semi-col-sm-pull-19 { right: 79.1666666667%; } .semi-col-sm-offset-19 { margin-left: 79.1666666667%; } .semi-col-sm-order-19 { order: 19; } .semi-col-sm-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-sm-push-20 { left: 83.3333333333%; } .semi-col-sm-pull-20 { right: 83.3333333333%; } .semi-col-sm-offset-20 { margin-left: 83.3333333333%; } .semi-col-sm-order-20 { order: 20; } .semi-col-sm-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-sm-push-21 { left: 87.5%; } .semi-col-sm-pull-21 { right: 87.5%; } .semi-col-sm-offset-21 { margin-left: 87.5%; } .semi-col-sm-order-21 { order: 21; } .semi-col-sm-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-sm-push-22 { left: 91.6666666667%; } .semi-col-sm-pull-22 { right: 91.6666666667%; } .semi-col-sm-offset-22 { margin-left: 91.6666666667%; } .semi-col-sm-order-22 { order: 22; } .semi-col-sm-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-sm-push-23 { left: 95.8333333333%; } .semi-col-sm-pull-23 { right: 95.8333333333%; } .semi-col-sm-offset-23 { margin-left: 95.8333333333%; } .semi-col-sm-order-23 { order: 23; } .semi-col-sm-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-sm-push-24 { left: 100%; } .semi-col-sm-pull-24 { right: 100%; } .semi-col-sm-offset-24 { margin-left: 100%; } .semi-col-sm-order-24 { order: 24; } .semi-rtl .semi-col-sm-1 { float: right; } .semi-rtl .semi-col-sm-2 { float: right; } .semi-rtl .semi-col-sm-3 { float: right; } .semi-rtl .semi-col-sm-4 { float: right; } .semi-rtl .semi-col-sm-5 { float: right; } .semi-rtl .semi-col-sm-6 { float: right; } .semi-rtl .semi-col-sm-7 { float: right; } .semi-rtl .semi-col-sm-8 { float: right; } .semi-rtl .semi-col-sm-9 { float: right; } .semi-rtl .semi-col-sm-10 { float: right; } .semi-rtl .semi-col-sm-11 { float: right; } .semi-rtl .semi-col-sm-12 { float: right; } .semi-rtl .semi-col-sm-13 { float: right; } .semi-rtl .semi-col-sm-14 { float: right; } .semi-rtl .semi-col-sm-15 { float: right; } .semi-rtl .semi-col-sm-16 { float: right; } .semi-rtl .semi-col-sm-17 { float: right; } .semi-rtl .semi-col-sm-18 { float: right; } .semi-rtl .semi-col-sm-19 { float: right; } .semi-rtl .semi-col-sm-20 { float: right; } .semi-rtl .semi-col-sm-21 { float: right; } .semi-rtl .semi-col-sm-22 { float: right; } .semi-rtl .semi-col-sm-23 { float: right; } .semi-rtl .semi-col-sm-24 { float: right; } .semi-rtl .semi-col-sm-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-sm-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-sm-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-sm-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-sm-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-sm-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-sm-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-sm-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-sm-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-sm-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-sm-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-sm-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-sm-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-sm-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-sm-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-sm-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-sm-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-sm-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-sm-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-sm-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-sm-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-sm-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-sm-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-sm-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 768px) { .semi-col-md-1 { flex: 0 0 auto; float: left; } .semi-col-md-2 { flex: 0 0 auto; float: left; } .semi-col-md-3 { flex: 0 0 auto; float: left; } .semi-col-md-4 { flex: 0 0 auto; float: left; } .semi-col-md-5 { flex: 0 0 auto; float: left; } .semi-col-md-6 { flex: 0 0 auto; float: left; } .semi-col-md-7 { flex: 0 0 auto; float: left; } .semi-col-md-8 { flex: 0 0 auto; float: left; } .semi-col-md-9 { flex: 0 0 auto; float: left; } .semi-col-md-10 { flex: 0 0 auto; float: left; } .semi-col-md-11 { flex: 0 0 auto; float: left; } .semi-col-md-12 { flex: 0 0 auto; float: left; } .semi-col-md-13 { flex: 0 0 auto; float: left; } .semi-col-md-14 { flex: 0 0 auto; float: left; } .semi-col-md-15 { flex: 0 0 auto; float: left; } .semi-col-md-16 { flex: 0 0 auto; float: left; } .semi-col-md-17 { flex: 0 0 auto; float: left; } .semi-col-md-18 { flex: 0 0 auto; float: left; } .semi-col-md-19 { flex: 0 0 auto; float: left; } .semi-col-md-20 { flex: 0 0 auto; float: left; } .semi-col-md-21 { flex: 0 0 auto; float: left; } .semi-col-md-22 { flex: 0 0 auto; float: left; } .semi-col-md-23 { flex: 0 0 auto; float: left; } .semi-col-md-24 { flex: 0 0 auto; float: left; } .semi-col-md-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-md-push-1 { left: 4.1666666667%; } .semi-col-md-pull-1 { right: 4.1666666667%; } .semi-col-md-offset-1 { margin-left: 4.1666666667%; } .semi-col-md-order-1 { order: 1; } .semi-col-md-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-md-push-2 { left: 8.3333333333%; } .semi-col-md-pull-2 { right: 8.3333333333%; } .semi-col-md-offset-2 { margin-left: 8.3333333333%; } .semi-col-md-order-2 { order: 2; } .semi-col-md-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-md-push-3 { left: 12.5%; } .semi-col-md-pull-3 { right: 12.5%; } .semi-col-md-offset-3 { margin-left: 12.5%; } .semi-col-md-order-3 { order: 3; } .semi-col-md-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-md-push-4 { left: 16.6666666667%; } .semi-col-md-pull-4 { right: 16.6666666667%; } .semi-col-md-offset-4 { margin-left: 16.6666666667%; } .semi-col-md-order-4 { order: 4; } .semi-col-md-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-md-push-5 { left: 20.8333333333%; } .semi-col-md-pull-5 { right: 20.8333333333%; } .semi-col-md-offset-5 { margin-left: 20.8333333333%; } .semi-col-md-order-5 { order: 5; } .semi-col-md-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-md-push-6 { left: 25%; } .semi-col-md-pull-6 { right: 25%; } .semi-col-md-offset-6 { margin-left: 25%; } .semi-col-md-order-6 { order: 6; } .semi-col-md-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-md-push-7 { left: 29.1666666667%; } .semi-col-md-pull-7 { right: 29.1666666667%; } .semi-col-md-offset-7 { margin-left: 29.1666666667%; } .semi-col-md-order-7 { order: 7; } .semi-col-md-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-md-push-8 { left: 33.3333333333%; } .semi-col-md-pull-8 { right: 33.3333333333%; } .semi-col-md-offset-8 { margin-left: 33.3333333333%; } .semi-col-md-order-8 { order: 8; } .semi-col-md-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-md-push-9 { left: 37.5%; } .semi-col-md-pull-9 { right: 37.5%; } .semi-col-md-offset-9 { margin-left: 37.5%; } .semi-col-md-order-9 { order: 9; } .semi-col-md-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-md-push-10 { left: 41.6666666667%; } .semi-col-md-pull-10 { right: 41.6666666667%; } .semi-col-md-offset-10 { margin-left: 41.6666666667%; } .semi-col-md-order-10 { order: 10; } .semi-col-md-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-md-push-11 { left: 45.8333333333%; } .semi-col-md-pull-11 { right: 45.8333333333%; } .semi-col-md-offset-11 { margin-left: 45.8333333333%; } .semi-col-md-order-11 { order: 11; } .semi-col-md-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-md-push-12 { left: 50%; } .semi-col-md-pull-12 { right: 50%; } .semi-col-md-offset-12 { margin-left: 50%; } .semi-col-md-order-12 { order: 12; } .semi-col-md-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-md-push-13 { left: 54.1666666667%; } .semi-col-md-pull-13 { right: 54.1666666667%; } .semi-col-md-offset-13 { margin-left: 54.1666666667%; } .semi-col-md-order-13 { order: 13; } .semi-col-md-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-md-push-14 { left: 58.3333333333%; } .semi-col-md-pull-14 { right: 58.3333333333%; } .semi-col-md-offset-14 { margin-left: 58.3333333333%; } .semi-col-md-order-14 { order: 14; } .semi-col-md-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-md-push-15 { left: 62.5%; } .semi-col-md-pull-15 { right: 62.5%; } .semi-col-md-offset-15 { margin-left: 62.5%; } .semi-col-md-order-15 { order: 15; } .semi-col-md-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-md-push-16 { left: 66.6666666667%; } .semi-col-md-pull-16 { right: 66.6666666667%; } .semi-col-md-offset-16 { margin-left: 66.6666666667%; } .semi-col-md-order-16 { order: 16; } .semi-col-md-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-md-push-17 { left: 70.8333333333%; } .semi-col-md-pull-17 { right: 70.8333333333%; } .semi-col-md-offset-17 { margin-left: 70.8333333333%; } .semi-col-md-order-17 { order: 17; } .semi-col-md-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-md-push-18 { left: 75%; } .semi-col-md-pull-18 { right: 75%; } .semi-col-md-offset-18 { margin-left: 75%; } .semi-col-md-order-18 { order: 18; } .semi-col-md-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-md-push-19 { left: 79.1666666667%; } .semi-col-md-pull-19 { right: 79.1666666667%; } .semi-col-md-offset-19 { margin-left: 79.1666666667%; } .semi-col-md-order-19 { order: 19; } .semi-col-md-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-md-push-20 { left: 83.3333333333%; } .semi-col-md-pull-20 { right: 83.3333333333%; } .semi-col-md-offset-20 { margin-left: 83.3333333333%; } .semi-col-md-order-20 { order: 20; } .semi-col-md-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-md-push-21 { left: 87.5%; } .semi-col-md-pull-21 { right: 87.5%; } .semi-col-md-offset-21 { margin-left: 87.5%; } .semi-col-md-order-21 { order: 21; } .semi-col-md-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-md-push-22 { left: 91.6666666667%; } .semi-col-md-pull-22 { right: 91.6666666667%; } .semi-col-md-offset-22 { margin-left: 91.6666666667%; } .semi-col-md-order-22 { order: 22; } .semi-col-md-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-md-push-23 { left: 95.8333333333%; } .semi-col-md-pull-23 { right: 95.8333333333%; } .semi-col-md-offset-23 { margin-left: 95.8333333333%; } .semi-col-md-order-23 { order: 23; } .semi-col-md-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-md-push-24 { left: 100%; } .semi-col-md-pull-24 { right: 100%; } .semi-col-md-offset-24 { margin-left: 100%; } .semi-col-md-order-24 { order: 24; } .semi-rtl .semi-col-md-1 { float: right; } .semi-rtl .semi-col-md-2 { float: right; } .semi-rtl .semi-col-md-3 { float: right; } .semi-rtl .semi-col-md-4 { float: right; } .semi-rtl .semi-col-md-5 { float: right; } .semi-rtl .semi-col-md-6 { float: right; } .semi-rtl .semi-col-md-7 { float: right; } .semi-rtl .semi-col-md-8 { float: right; } .semi-rtl .semi-col-md-9 { float: right; } .semi-rtl .semi-col-md-10 { float: right; } .semi-rtl .semi-col-md-11 { float: right; } .semi-rtl .semi-col-md-12 { float: right; } .semi-rtl .semi-col-md-13 { float: right; } .semi-rtl .semi-col-md-14 { float: right; } .semi-rtl .semi-col-md-15 { float: right; } .semi-rtl .semi-col-md-16 { float: right; } .semi-rtl .semi-col-md-17 { float: right; } .semi-rtl .semi-col-md-18 { float: right; } .semi-rtl .semi-col-md-19 { float: right; } .semi-rtl .semi-col-md-20 { float: right; } .semi-rtl .semi-col-md-21 { float: right; } .semi-rtl .semi-col-md-22 { float: right; } .semi-rtl .semi-col-md-23 { float: right; } .semi-rtl .semi-col-md-24 { float: right; } .semi-rtl .semi-col-md-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-md-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-md-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-md-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-md-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-md-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-md-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-md-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-md-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-md-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-md-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-md-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-md-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-md-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-md-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-md-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-md-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-md-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-md-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-md-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-md-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-md-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-md-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-md-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 992px) { .semi-col-lg-1 { flex: 0 0 auto; float: left; } .semi-col-lg-2 { flex: 0 0 auto; float: left; } .semi-col-lg-3 { flex: 0 0 auto; float: left; } .semi-col-lg-4 { flex: 0 0 auto; float: left; } .semi-col-lg-5 { flex: 0 0 auto; float: left; } .semi-col-lg-6 { flex: 0 0 auto; float: left; } .semi-col-lg-7 { flex: 0 0 auto; float: left; } .semi-col-lg-8 { flex: 0 0 auto; float: left; } .semi-col-lg-9 { flex: 0 0 auto; float: left; } .semi-col-lg-10 { flex: 0 0 auto; float: left; } .semi-col-lg-11 { flex: 0 0 auto; float: left; } .semi-col-lg-12 { flex: 0 0 auto; float: left; } .semi-col-lg-13 { flex: 0 0 auto; float: left; } .semi-col-lg-14 { flex: 0 0 auto; float: left; } .semi-col-lg-15 { flex: 0 0 auto; float: left; } .semi-col-lg-16 { flex: 0 0 auto; float: left; } .semi-col-lg-17 { flex: 0 0 auto; float: left; } .semi-col-lg-18 { flex: 0 0 auto; float: left; } .semi-col-lg-19 { flex: 0 0 auto; float: left; } .semi-col-lg-20 { flex: 0 0 auto; float: left; } .semi-col-lg-21 { flex: 0 0 auto; float: left; } .semi-col-lg-22 { flex: 0 0 auto; float: left; } .semi-col-lg-23 { flex: 0 0 auto; float: left; } .semi-col-lg-24 { flex: 0 0 auto; float: left; } .semi-col-lg-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-lg-push-1 { left: 4.1666666667%; } .semi-col-lg-pull-1 { right: 4.1666666667%; } .semi-col-lg-offset-1 { margin-left: 4.1666666667%; } .semi-col-lg-order-1 { order: 1; } .semi-col-lg-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-lg-push-2 { left: 8.3333333333%; } .semi-col-lg-pull-2 { right: 8.3333333333%; } .semi-col-lg-offset-2 { margin-left: 8.3333333333%; } .semi-col-lg-order-2 { order: 2; } .semi-col-lg-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-lg-push-3 { left: 12.5%; } .semi-col-lg-pull-3 { right: 12.5%; } .semi-col-lg-offset-3 { margin-left: 12.5%; } .semi-col-lg-order-3 { order: 3; } .semi-col-lg-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-lg-push-4 { left: 16.6666666667%; } .semi-col-lg-pull-4 { right: 16.6666666667%; } .semi-col-lg-offset-4 { margin-left: 16.6666666667%; } .semi-col-lg-order-4 { order: 4; } .semi-col-lg-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-lg-push-5 { left: 20.8333333333%; } .semi-col-lg-pull-5 { right: 20.8333333333%; } .semi-col-lg-offset-5 { margin-left: 20.8333333333%; } .semi-col-lg-order-5 { order: 5; } .semi-col-lg-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-lg-push-6 { left: 25%; } .semi-col-lg-pull-6 { right: 25%; } .semi-col-lg-offset-6 { margin-left: 25%; } .semi-col-lg-order-6 { order: 6; } .semi-col-lg-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-lg-push-7 { left: 29.1666666667%; } .semi-col-lg-pull-7 { right: 29.1666666667%; } .semi-col-lg-offset-7 { margin-left: 29.1666666667%; } .semi-col-lg-order-7 { order: 7; } .semi-col-lg-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-lg-push-8 { left: 33.3333333333%; } .semi-col-lg-pull-8 { right: 33.3333333333%; } .semi-col-lg-offset-8 { margin-left: 33.3333333333%; } .semi-col-lg-order-8 { order: 8; } .semi-col-lg-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-lg-push-9 { left: 37.5%; } .semi-col-lg-pull-9 { right: 37.5%; } .semi-col-lg-offset-9 { margin-left: 37.5%; } .semi-col-lg-order-9 { order: 9; } .semi-col-lg-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-lg-push-10 { left: 41.6666666667%; } .semi-col-lg-pull-10 { right: 41.6666666667%; } .semi-col-lg-offset-10 { margin-left: 41.6666666667%; } .semi-col-lg-order-10 { order: 10; } .semi-col-lg-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-lg-push-11 { left: 45.8333333333%; } .semi-col-lg-pull-11 { right: 45.8333333333%; } .semi-col-lg-offset-11 { margin-left: 45.8333333333%; } .semi-col-lg-order-11 { order: 11; } .semi-col-lg-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-lg-push-12 { left: 50%; } .semi-col-lg-pull-12 { right: 50%; } .semi-col-lg-offset-12 { margin-left: 50%; } .semi-col-lg-order-12 { order: 12; } .semi-col-lg-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-lg-push-13 { left: 54.1666666667%; } .semi-col-lg-pull-13 { right: 54.1666666667%; } .semi-col-lg-offset-13 { margin-left: 54.1666666667%; } .semi-col-lg-order-13 { order: 13; } .semi-col-lg-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-lg-push-14 { left: 58.3333333333%; } .semi-col-lg-pull-14 { right: 58.3333333333%; } .semi-col-lg-offset-14 { margin-left: 58.3333333333%; } .semi-col-lg-order-14 { order: 14; } .semi-col-lg-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-lg-push-15 { left: 62.5%; } .semi-col-lg-pull-15 { right: 62.5%; } .semi-col-lg-offset-15 { margin-left: 62.5%; } .semi-col-lg-order-15 { order: 15; } .semi-col-lg-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-lg-push-16 { left: 66.6666666667%; } .semi-col-lg-pull-16 { right: 66.6666666667%; } .semi-col-lg-offset-16 { margin-left: 66.6666666667%; } .semi-col-lg-order-16 { order: 16; } .semi-col-lg-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-lg-push-17 { left: 70.8333333333%; } .semi-col-lg-pull-17 { right: 70.8333333333%; } .semi-col-lg-offset-17 { margin-left: 70.8333333333%; } .semi-col-lg-order-17 { order: 17; } .semi-col-lg-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-lg-push-18 { left: 75%; } .semi-col-lg-pull-18 { right: 75%; } .semi-col-lg-offset-18 { margin-left: 75%; } .semi-col-lg-order-18 { order: 18; } .semi-col-lg-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-lg-push-19 { left: 79.1666666667%; } .semi-col-lg-pull-19 { right: 79.1666666667%; } .semi-col-lg-offset-19 { margin-left: 79.1666666667%; } .semi-col-lg-order-19 { order: 19; } .semi-col-lg-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-lg-push-20 { left: 83.3333333333%; } .semi-col-lg-pull-20 { right: 83.3333333333%; } .semi-col-lg-offset-20 { margin-left: 83.3333333333%; } .semi-col-lg-order-20 { order: 20; } .semi-col-lg-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-lg-push-21 { left: 87.5%; } .semi-col-lg-pull-21 { right: 87.5%; } .semi-col-lg-offset-21 { margin-left: 87.5%; } .semi-col-lg-order-21 { order: 21; } .semi-col-lg-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-lg-push-22 { left: 91.6666666667%; } .semi-col-lg-pull-22 { right: 91.6666666667%; } .semi-col-lg-offset-22 { margin-left: 91.6666666667%; } .semi-col-lg-order-22 { order: 22; } .semi-col-lg-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-lg-push-23 { left: 95.8333333333%; } .semi-col-lg-pull-23 { right: 95.8333333333%; } .semi-col-lg-offset-23 { margin-left: 95.8333333333%; } .semi-col-lg-order-23 { order: 23; } .semi-col-lg-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-lg-push-24 { left: 100%; } .semi-col-lg-pull-24 { right: 100%; } .semi-col-lg-offset-24 { margin-left: 100%; } .semi-col-lg-order-24 { order: 24; } .semi-rtl .semi-col-lg-1 { float: right; } .semi-rtl .semi-col-lg-2 { float: right; } .semi-rtl .semi-col-lg-3 { float: right; } .semi-rtl .semi-col-lg-4 { float: right; } .semi-rtl .semi-col-lg-5 { float: right; } .semi-rtl .semi-col-lg-6 { float: right; } .semi-rtl .semi-col-lg-7 { float: right; } .semi-rtl .semi-col-lg-8 { float: right; } .semi-rtl .semi-col-lg-9 { float: right; } .semi-rtl .semi-col-lg-10 { float: right; } .semi-rtl .semi-col-lg-11 { float: right; } .semi-rtl .semi-col-lg-12 { float: right; } .semi-rtl .semi-col-lg-13 { float: right; } .semi-rtl .semi-col-lg-14 { float: right; } .semi-rtl .semi-col-lg-15 { float: right; } .semi-rtl .semi-col-lg-16 { float: right; } .semi-rtl .semi-col-lg-17 { float: right; } .semi-rtl .semi-col-lg-18 { float: right; } .semi-rtl .semi-col-lg-19 { float: right; } .semi-rtl .semi-col-lg-20 { float: right; } .semi-rtl .semi-col-lg-21 { float: right; } .semi-rtl .semi-col-lg-22 { float: right; } .semi-rtl .semi-col-lg-23 { float: right; } .semi-rtl .semi-col-lg-24 { float: right; } .semi-rtl .semi-col-lg-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-lg-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-lg-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-lg-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-lg-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-lg-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-lg-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-lg-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-lg-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-lg-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-lg-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-lg-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-lg-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-lg-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-lg-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-lg-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-lg-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-lg-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-lg-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-lg-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-lg-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-lg-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-lg-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-lg-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 1200px) { .semi-col-xl-1 { flex: 0 0 auto; float: left; } .semi-col-xl-2 { flex: 0 0 auto; float: left; } .semi-col-xl-3 { flex: 0 0 auto; float: left; } .semi-col-xl-4 { flex: 0 0 auto; float: left; } .semi-col-xl-5 { flex: 0 0 auto; float: left; } .semi-col-xl-6 { flex: 0 0 auto; float: left; } .semi-col-xl-7 { flex: 0 0 auto; float: left; } .semi-col-xl-8 { flex: 0 0 auto; float: left; } .semi-col-xl-9 { flex: 0 0 auto; float: left; } .semi-col-xl-10 { flex: 0 0 auto; float: left; } .semi-col-xl-11 { flex: 0 0 auto; float: left; } .semi-col-xl-12 { flex: 0 0 auto; float: left; } .semi-col-xl-13 { flex: 0 0 auto; float: left; } .semi-col-xl-14 { flex: 0 0 auto; float: left; } .semi-col-xl-15 { flex: 0 0 auto; float: left; } .semi-col-xl-16 { flex: 0 0 auto; float: left; } .semi-col-xl-17 { flex: 0 0 auto; float: left; } .semi-col-xl-18 { flex: 0 0 auto; float: left; } .semi-col-xl-19 { flex: 0 0 auto; float: left; } .semi-col-xl-20 { flex: 0 0 auto; float: left; } .semi-col-xl-21 { flex: 0 0 auto; float: left; } .semi-col-xl-22 { flex: 0 0 auto; float: left; } .semi-col-xl-23 { flex: 0 0 auto; float: left; } .semi-col-xl-24 { flex: 0 0 auto; float: left; } .semi-col-xl-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-xl-push-1 { left: 4.1666666667%; } .semi-col-xl-pull-1 { right: 4.1666666667%; } .semi-col-xl-offset-1 { margin-left: 4.1666666667%; } .semi-col-xl-order-1 { order: 1; } .semi-col-xl-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-xl-push-2 { left: 8.3333333333%; } .semi-col-xl-pull-2 { right: 8.3333333333%; } .semi-col-xl-offset-2 { margin-left: 8.3333333333%; } .semi-col-xl-order-2 { order: 2; } .semi-col-xl-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-xl-push-3 { left: 12.5%; } .semi-col-xl-pull-3 { right: 12.5%; } .semi-col-xl-offset-3 { margin-left: 12.5%; } .semi-col-xl-order-3 { order: 3; } .semi-col-xl-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-xl-push-4 { left: 16.6666666667%; } .semi-col-xl-pull-4 { right: 16.6666666667%; } .semi-col-xl-offset-4 { margin-left: 16.6666666667%; } .semi-col-xl-order-4 { order: 4; } .semi-col-xl-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-xl-push-5 { left: 20.8333333333%; } .semi-col-xl-pull-5 { right: 20.8333333333%; } .semi-col-xl-offset-5 { margin-left: 20.8333333333%; } .semi-col-xl-order-5 { order: 5; } .semi-col-xl-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-xl-push-6 { left: 25%; } .semi-col-xl-pull-6 { right: 25%; } .semi-col-xl-offset-6 { margin-left: 25%; } .semi-col-xl-order-6 { order: 6; } .semi-col-xl-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-xl-push-7 { left: 29.1666666667%; } .semi-col-xl-pull-7 { right: 29.1666666667%; } .semi-col-xl-offset-7 { margin-left: 29.1666666667%; } .semi-col-xl-order-7 { order: 7; } .semi-col-xl-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-xl-push-8 { left: 33.3333333333%; } .semi-col-xl-pull-8 { right: 33.3333333333%; } .semi-col-xl-offset-8 { margin-left: 33.3333333333%; } .semi-col-xl-order-8 { order: 8; } .semi-col-xl-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-xl-push-9 { left: 37.5%; } .semi-col-xl-pull-9 { right: 37.5%; } .semi-col-xl-offset-9 { margin-left: 37.5%; } .semi-col-xl-order-9 { order: 9; } .semi-col-xl-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-xl-push-10 { left: 41.6666666667%; } .semi-col-xl-pull-10 { right: 41.6666666667%; } .semi-col-xl-offset-10 { margin-left: 41.6666666667%; } .semi-col-xl-order-10 { order: 10; } .semi-col-xl-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-xl-push-11 { left: 45.8333333333%; } .semi-col-xl-pull-11 { right: 45.8333333333%; } .semi-col-xl-offset-11 { margin-left: 45.8333333333%; } .semi-col-xl-order-11 { order: 11; } .semi-col-xl-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-xl-push-12 { left: 50%; } .semi-col-xl-pull-12 { right: 50%; } .semi-col-xl-offset-12 { margin-left: 50%; } .semi-col-xl-order-12 { order: 12; } .semi-col-xl-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-xl-push-13 { left: 54.1666666667%; } .semi-col-xl-pull-13 { right: 54.1666666667%; } .semi-col-xl-offset-13 { margin-left: 54.1666666667%; } .semi-col-xl-order-13 { order: 13; } .semi-col-xl-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-xl-push-14 { left: 58.3333333333%; } .semi-col-xl-pull-14 { right: 58.3333333333%; } .semi-col-xl-offset-14 { margin-left: 58.3333333333%; } .semi-col-xl-order-14 { order: 14; } .semi-col-xl-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-xl-push-15 { left: 62.5%; } .semi-col-xl-pull-15 { right: 62.5%; } .semi-col-xl-offset-15 { margin-left: 62.5%; } .semi-col-xl-order-15 { order: 15; } .semi-col-xl-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-xl-push-16 { left: 66.6666666667%; } .semi-col-xl-pull-16 { right: 66.6666666667%; } .semi-col-xl-offset-16 { margin-left: 66.6666666667%; } .semi-col-xl-order-16 { order: 16; } .semi-col-xl-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-xl-push-17 { left: 70.8333333333%; } .semi-col-xl-pull-17 { right: 70.8333333333%; } .semi-col-xl-offset-17 { margin-left: 70.8333333333%; } .semi-col-xl-order-17 { order: 17; } .semi-col-xl-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-xl-push-18 { left: 75%; } .semi-col-xl-pull-18 { right: 75%; } .semi-col-xl-offset-18 { margin-left: 75%; } .semi-col-xl-order-18 { order: 18; } .semi-col-xl-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-xl-push-19 { left: 79.1666666667%; } .semi-col-xl-pull-19 { right: 79.1666666667%; } .semi-col-xl-offset-19 { margin-left: 79.1666666667%; } .semi-col-xl-order-19 { order: 19; } .semi-col-xl-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-xl-push-20 { left: 83.3333333333%; } .semi-col-xl-pull-20 { right: 83.3333333333%; } .semi-col-xl-offset-20 { margin-left: 83.3333333333%; } .semi-col-xl-order-20 { order: 20; } .semi-col-xl-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-xl-push-21 { left: 87.5%; } .semi-col-xl-pull-21 { right: 87.5%; } .semi-col-xl-offset-21 { margin-left: 87.5%; } .semi-col-xl-order-21 { order: 21; } .semi-col-xl-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-xl-push-22 { left: 91.6666666667%; } .semi-col-xl-pull-22 { right: 91.6666666667%; } .semi-col-xl-offset-22 { margin-left: 91.6666666667%; } .semi-col-xl-order-22 { order: 22; } .semi-col-xl-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-xl-push-23 { left: 95.8333333333%; } .semi-col-xl-pull-23 { right: 95.8333333333%; } .semi-col-xl-offset-23 { margin-left: 95.8333333333%; } .semi-col-xl-order-23 { order: 23; } .semi-col-xl-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-xl-push-24 { left: 100%; } .semi-col-xl-pull-24 { right: 100%; } .semi-col-xl-offset-24 { margin-left: 100%; } .semi-col-xl-order-24 { order: 24; } .semi-rtl .semi-col-xl-1 { float: right; } .semi-rtl .semi-col-xl-2 { float: right; } .semi-rtl .semi-col-xl-3 { float: right; } .semi-rtl .semi-col-xl-4 { float: right; } .semi-rtl .semi-col-xl-5 { float: right; } .semi-rtl .semi-col-xl-6 { float: right; } .semi-rtl .semi-col-xl-7 { float: right; } .semi-rtl .semi-col-xl-8 { float: right; } .semi-rtl .semi-col-xl-9 { float: right; } .semi-rtl .semi-col-xl-10 { float: right; } .semi-rtl .semi-col-xl-11 { float: right; } .semi-rtl .semi-col-xl-12 { float: right; } .semi-rtl .semi-col-xl-13 { float: right; } .semi-rtl .semi-col-xl-14 { float: right; } .semi-rtl .semi-col-xl-15 { float: right; } .semi-rtl .semi-col-xl-16 { float: right; } .semi-rtl .semi-col-xl-17 { float: right; } .semi-rtl .semi-col-xl-18 { float: right; } .semi-rtl .semi-col-xl-19 { float: right; } .semi-rtl .semi-col-xl-20 { float: right; } .semi-rtl .semi-col-xl-21 { float: right; } .semi-rtl .semi-col-xl-22 { float: right; } .semi-rtl .semi-col-xl-23 { float: right; } .semi-rtl .semi-col-xl-24 { float: right; } .semi-rtl .semi-col-xl-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-xl-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-xl-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-xl-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-xl-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-xl-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-xl-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-xl-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-xl-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-xl-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-xl-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-xl-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-xl-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-xl-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-xl-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-xl-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-xl-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-xl-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-xl-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-xl-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-xl-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-xl-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-xl-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-xl-offset-24 { margin-left: auto; margin-right: 100%; } } @media (min-width: 1600px) { .semi-col-xxl-1 { flex: 0 0 auto; float: left; } .semi-col-xxl-2 { flex: 0 0 auto; float: left; } .semi-col-xxl-3 { flex: 0 0 auto; float: left; } .semi-col-xxl-4 { flex: 0 0 auto; float: left; } .semi-col-xxl-5 { flex: 0 0 auto; float: left; } .semi-col-xxl-6 { flex: 0 0 auto; float: left; } .semi-col-xxl-7 { flex: 0 0 auto; float: left; } .semi-col-xxl-8 { flex: 0 0 auto; float: left; } .semi-col-xxl-9 { flex: 0 0 auto; float: left; } .semi-col-xxl-10 { flex: 0 0 auto; float: left; } .semi-col-xxl-11 { flex: 0 0 auto; float: left; } .semi-col-xxl-12 { flex: 0 0 auto; float: left; } .semi-col-xxl-13 { flex: 0 0 auto; float: left; } .semi-col-xxl-14 { flex: 0 0 auto; float: left; } .semi-col-xxl-15 { flex: 0 0 auto; float: left; } .semi-col-xxl-16 { flex: 0 0 auto; float: left; } .semi-col-xxl-17 { flex: 0 0 auto; float: left; } .semi-col-xxl-18 { flex: 0 0 auto; float: left; } .semi-col-xxl-19 { flex: 0 0 auto; float: left; } .semi-col-xxl-20 { flex: 0 0 auto; float: left; } .semi-col-xxl-21 { flex: 0 0 auto; float: left; } .semi-col-xxl-22 { flex: 0 0 auto; float: left; } .semi-col-xxl-23 { flex: 0 0 auto; float: left; } .semi-col-xxl-24 { flex: 0 0 auto; float: left; } .semi-col-xxl-1 { display: block; box-sizing: border-box; width: 4.1666666667%; } .semi-col-xxl-push-1 { left: 4.1666666667%; } .semi-col-xxl-pull-1 { right: 4.1666666667%; } .semi-col-xxl-offset-1 { margin-left: 4.1666666667%; } .semi-col-xxl-order-1 { order: 1; } .semi-col-xxl-2 { display: block; box-sizing: border-box; width: 8.3333333333%; } .semi-col-xxl-push-2 { left: 8.3333333333%; } .semi-col-xxl-pull-2 { right: 8.3333333333%; } .semi-col-xxl-offset-2 { margin-left: 8.3333333333%; } .semi-col-xxl-order-2 { order: 2; } .semi-col-xxl-3 { display: block; box-sizing: border-box; width: 12.5%; } .semi-col-xxl-push-3 { left: 12.5%; } .semi-col-xxl-pull-3 { right: 12.5%; } .semi-col-xxl-offset-3 { margin-left: 12.5%; } .semi-col-xxl-order-3 { order: 3; } .semi-col-xxl-4 { display: block; box-sizing: border-box; width: 16.6666666667%; } .semi-col-xxl-push-4 { left: 16.6666666667%; } .semi-col-xxl-pull-4 { right: 16.6666666667%; } .semi-col-xxl-offset-4 { margin-left: 16.6666666667%; } .semi-col-xxl-order-4 { order: 4; } .semi-col-xxl-5 { display: block; box-sizing: border-box; width: 20.8333333333%; } .semi-col-xxl-push-5 { left: 20.8333333333%; } .semi-col-xxl-pull-5 { right: 20.8333333333%; } .semi-col-xxl-offset-5 { margin-left: 20.8333333333%; } .semi-col-xxl-order-5 { order: 5; } .semi-col-xxl-6 { display: block; box-sizing: border-box; width: 25%; } .semi-col-xxl-push-6 { left: 25%; } .semi-col-xxl-pull-6 { right: 25%; } .semi-col-xxl-offset-6 { margin-left: 25%; } .semi-col-xxl-order-6 { order: 6; } .semi-col-xxl-7 { display: block; box-sizing: border-box; width: 29.1666666667%; } .semi-col-xxl-push-7 { left: 29.1666666667%; } .semi-col-xxl-pull-7 { right: 29.1666666667%; } .semi-col-xxl-offset-7 { margin-left: 29.1666666667%; } .semi-col-xxl-order-7 { order: 7; } .semi-col-xxl-8 { display: block; box-sizing: border-box; width: 33.3333333333%; } .semi-col-xxl-push-8 { left: 33.3333333333%; } .semi-col-xxl-pull-8 { right: 33.3333333333%; } .semi-col-xxl-offset-8 { margin-left: 33.3333333333%; } .semi-col-xxl-order-8 { order: 8; } .semi-col-xxl-9 { display: block; box-sizing: border-box; width: 37.5%; } .semi-col-xxl-push-9 { left: 37.5%; } .semi-col-xxl-pull-9 { right: 37.5%; } .semi-col-xxl-offset-9 { margin-left: 37.5%; } .semi-col-xxl-order-9 { order: 9; } .semi-col-xxl-10 { display: block; box-sizing: border-box; width: 41.6666666667%; } .semi-col-xxl-push-10 { left: 41.6666666667%; } .semi-col-xxl-pull-10 { right: 41.6666666667%; } .semi-col-xxl-offset-10 { margin-left: 41.6666666667%; } .semi-col-xxl-order-10 { order: 10; } .semi-col-xxl-11 { display: block; box-sizing: border-box; width: 45.8333333333%; } .semi-col-xxl-push-11 { left: 45.8333333333%; } .semi-col-xxl-pull-11 { right: 45.8333333333%; } .semi-col-xxl-offset-11 { margin-left: 45.8333333333%; } .semi-col-xxl-order-11 { order: 11; } .semi-col-xxl-12 { display: block; box-sizing: border-box; width: 50%; } .semi-col-xxl-push-12 { left: 50%; } .semi-col-xxl-pull-12 { right: 50%; } .semi-col-xxl-offset-12 { margin-left: 50%; } .semi-col-xxl-order-12 { order: 12; } .semi-col-xxl-13 { display: block; box-sizing: border-box; width: 54.1666666667%; } .semi-col-xxl-push-13 { left: 54.1666666667%; } .semi-col-xxl-pull-13 { right: 54.1666666667%; } .semi-col-xxl-offset-13 { margin-left: 54.1666666667%; } .semi-col-xxl-order-13 { order: 13; } .semi-col-xxl-14 { display: block; box-sizing: border-box; width: 58.3333333333%; } .semi-col-xxl-push-14 { left: 58.3333333333%; } .semi-col-xxl-pull-14 { right: 58.3333333333%; } .semi-col-xxl-offset-14 { margin-left: 58.3333333333%; } .semi-col-xxl-order-14 { order: 14; } .semi-col-xxl-15 { display: block; box-sizing: border-box; width: 62.5%; } .semi-col-xxl-push-15 { left: 62.5%; } .semi-col-xxl-pull-15 { right: 62.5%; } .semi-col-xxl-offset-15 { margin-left: 62.5%; } .semi-col-xxl-order-15 { order: 15; } .semi-col-xxl-16 { display: block; box-sizing: border-box; width: 66.6666666667%; } .semi-col-xxl-push-16 { left: 66.6666666667%; } .semi-col-xxl-pull-16 { right: 66.6666666667%; } .semi-col-xxl-offset-16 { margin-left: 66.6666666667%; } .semi-col-xxl-order-16 { order: 16; } .semi-col-xxl-17 { display: block; box-sizing: border-box; width: 70.8333333333%; } .semi-col-xxl-push-17 { left: 70.8333333333%; } .semi-col-xxl-pull-17 { right: 70.8333333333%; } .semi-col-xxl-offset-17 { margin-left: 70.8333333333%; } .semi-col-xxl-order-17 { order: 17; } .semi-col-xxl-18 { display: block; box-sizing: border-box; width: 75%; } .semi-col-xxl-push-18 { left: 75%; } .semi-col-xxl-pull-18 { right: 75%; } .semi-col-xxl-offset-18 { margin-left: 75%; } .semi-col-xxl-order-18 { order: 18; } .semi-col-xxl-19 { display: block; box-sizing: border-box; width: 79.1666666667%; } .semi-col-xxl-push-19 { left: 79.1666666667%; } .semi-col-xxl-pull-19 { right: 79.1666666667%; } .semi-col-xxl-offset-19 { margin-left: 79.1666666667%; } .semi-col-xxl-order-19 { order: 19; } .semi-col-xxl-20 { display: block; box-sizing: border-box; width: 83.3333333333%; } .semi-col-xxl-push-20 { left: 83.3333333333%; } .semi-col-xxl-pull-20 { right: 83.3333333333%; } .semi-col-xxl-offset-20 { margin-left: 83.3333333333%; } .semi-col-xxl-order-20 { order: 20; } .semi-col-xxl-21 { display: block; box-sizing: border-box; width: 87.5%; } .semi-col-xxl-push-21 { left: 87.5%; } .semi-col-xxl-pull-21 { right: 87.5%; } .semi-col-xxl-offset-21 { margin-left: 87.5%; } .semi-col-xxl-order-21 { order: 21; } .semi-col-xxl-22 { display: block; box-sizing: border-box; width: 91.6666666667%; } .semi-col-xxl-push-22 { left: 91.6666666667%; } .semi-col-xxl-pull-22 { right: 91.6666666667%; } .semi-col-xxl-offset-22 { margin-left: 91.6666666667%; } .semi-col-xxl-order-22 { order: 22; } .semi-col-xxl-23 { display: block; box-sizing: border-box; width: 95.8333333333%; } .semi-col-xxl-push-23 { left: 95.8333333333%; } .semi-col-xxl-pull-23 { right: 95.8333333333%; } .semi-col-xxl-offset-23 { margin-left: 95.8333333333%; } .semi-col-xxl-order-23 { order: 23; } .semi-col-xxl-24 { display: block; box-sizing: border-box; width: 100%; } .semi-col-xxl-push-24 { left: 100%; } .semi-col-xxl-pull-24 { right: 100%; } .semi-col-xxl-offset-24 { margin-left: 100%; } .semi-col-xxl-order-24 { order: 24; } .semi-rtl .semi-col-xxl-1 { float: right; } .semi-rtl .semi-col-xxl-2 { float: right; } .semi-rtl .semi-col-xxl-3 { float: right; } .semi-rtl .semi-col-xxl-4 { float: right; } .semi-rtl .semi-col-xxl-5 { float: right; } .semi-rtl .semi-col-xxl-6 { float: right; } .semi-rtl .semi-col-xxl-7 { float: right; } .semi-rtl .semi-col-xxl-8 { float: right; } .semi-rtl .semi-col-xxl-9 { float: right; } .semi-rtl .semi-col-xxl-10 { float: right; } .semi-rtl .semi-col-xxl-11 { float: right; } .semi-rtl .semi-col-xxl-12 { float: right; } .semi-rtl .semi-col-xxl-13 { float: right; } .semi-rtl .semi-col-xxl-14 { float: right; } .semi-rtl .semi-col-xxl-15 { float: right; } .semi-rtl .semi-col-xxl-16 { float: right; } .semi-rtl .semi-col-xxl-17 { float: right; } .semi-rtl .semi-col-xxl-18 { float: right; } .semi-rtl .semi-col-xxl-19 { float: right; } .semi-rtl .semi-col-xxl-20 { float: right; } .semi-rtl .semi-col-xxl-21 { float: right; } .semi-rtl .semi-col-xxl-22 { float: right; } .semi-rtl .semi-col-xxl-23 { float: right; } .semi-rtl .semi-col-xxl-24 { float: right; } .semi-rtl .semi-col-xxl-offset-1 { margin-left: auto; margin-right: 4.1666666667%; } .semi-rtl .semi-col-xxl-offset-2 { margin-left: auto; margin-right: 8.3333333333%; } .semi-rtl .semi-col-xxl-offset-3 { margin-left: auto; margin-right: 12.5%; } .semi-rtl .semi-col-xxl-offset-4 { margin-left: auto; margin-right: 16.6666666667%; } .semi-rtl .semi-col-xxl-offset-5 { margin-left: auto; margin-right: 20.8333333333%; } .semi-rtl .semi-col-xxl-offset-6 { margin-left: auto; margin-right: 25%; } .semi-rtl .semi-col-xxl-offset-7 { margin-left: auto; margin-right: 29.1666666667%; } .semi-rtl .semi-col-xxl-offset-8 { margin-left: auto; margin-right: 33.3333333333%; } .semi-rtl .semi-col-xxl-offset-9 { margin-left: auto; margin-right: 37.5%; } .semi-rtl .semi-col-xxl-offset-10 { margin-left: auto; margin-right: 41.6666666667%; } .semi-rtl .semi-col-xxl-offset-11 { margin-left: auto; margin-right: 45.8333333333%; } .semi-rtl .semi-col-xxl-offset-12 { margin-left: auto; margin-right: 50%; } .semi-rtl .semi-col-xxl-offset-13 { margin-left: auto; margin-right: 54.1666666667%; } .semi-rtl .semi-col-xxl-offset-14 { margin-left: auto; margin-right: 58.3333333333%; } .semi-rtl .semi-col-xxl-offset-15 { margin-left: auto; margin-right: 62.5%; } .semi-rtl .semi-col-xxl-offset-16 { margin-left: auto; margin-right: 66.6666666667%; } .semi-rtl .semi-col-xxl-offset-17 { margin-left: auto; margin-right: 70.8333333333%; } .semi-rtl .semi-col-xxl-offset-18 { margin-left: auto; margin-right: 75%; } .semi-rtl .semi-col-xxl-offset-19 { margin-left: auto; margin-right: 79.1666666667%; } .semi-rtl .semi-col-xxl-offset-20 { margin-left: auto; margin-right: 83.3333333333%; } .semi-rtl .semi-col-xxl-offset-21 { margin-left: auto; margin-right: 87.5%; } .semi-rtl .semi-col-xxl-offset-22 { margin-left: auto; margin-right: 91.6666666667%; } .semi-rtl .semi-col-xxl-offset-23 { margin-left: auto; margin-right: 95.8333333333%; } .semi-rtl .semi-col-xxl-offset-24 { margin-left: auto; margin-right: 100%; } } .semi-rtl .semi-row, .semi-rtl .semi-row-flex, .semi-portal-rtl .semi-row, .semi-portal-rtl .semi-row-flex { direction: rtl; } @keyframes semi-input-active { from { transform: scale(1); } to { transform: scale(0.97); } } @keyframes semi-input-inactive { from { transform: scale(0.97); } to { transform: scale(1); } } .semi-input-wrapper { display: inline-block; position: relative; vertical-align: middle; box-shadow: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: var(--semi-color-fill-0); border: 1px transparent solid; border-radius: var(--semi-border-radius-small); width: 100%; outline: none; cursor: text; box-sizing: border-box; color: var(--semi-color-text-0); } .semi-input-wrapper-default { height: 32px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 30px; } .semi-input-wrapper-small { height: 24px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 22px; } .semi-input-wrapper-large { height: 40px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 38px; } .semi-input-wrapper:hover { background-color: var(--semi-color-fill-1); border-color: transparent; } .semi-input-wrapper-focus { background-color: var(--semi-color-fill-0); border: var(--semi-color-focus-border) solid 1px; } .semi-input-wrapper-focus:hover { background-color: var(--semi-color-fill-0); border-color: var(--semi-color-focus-border); } .semi-input-wrapper-focus:active { background-color: var(--semi-color-fill-0); border-color: var(--semi-color-focus-border); } .semi-input-wrapper.semi-input-readonly { cursor: default; } .semi-input-wrapper-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-input-wrapper-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-input-wrapper-error.semi-input-wrapper-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-wrapper-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-input-wrapper-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-input-wrapper-warning.semi-input-wrapper-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-wrapper__with-prefix { display: inline-flex; align-items: center; } .semi-input-wrapper__with-prefix .semi-input { padding-left: 0; } .semi-input-wrapper__with-suffix { display: inline-flex; align-items: center; } .semi-input-wrapper__with-suffix .semi-input { padding-right: 0; } .semi-input-wrapper-clearable, .semi-input-wrapper-modebtn { display: inline-flex; align-items: center; } .semi-input-wrapper-hidden { border: none; } .semi-input-wrapper .semi-icon { color: var(--semi-color-text-2); } .semi-input-wrapper .semi-input-clearbtn, .semi-input-wrapper .semi-input-modebtn { color: var(--semi-color-primary-hover); } .semi-input-wrapper .semi-input-clearbtn > svg, .semi-input-wrapper .semi-input-modebtn > svg { pointer-events: none; } .semi-input-wrapper .semi-input-clearbtn:hover, .semi-input-wrapper .semi-input-modebtn:hover { cursor: pointer; } .semi-input-wrapper .semi-input-clearbtn:hover .semi-icon, .semi-input-wrapper .semi-input-modebtn:hover .semi-icon { color: var(--semi-color-primary-hover); } .semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn { min-width: 24px; justify-content: flex-end; } .semi-input-wrapper-modebtn.semi-input-wrapper-clearable .semi-input-clearbtn { min-width: 16px; justify-content: center; } .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) { border-right-style: none; border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) { border-right-style: none; border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append { display: inline-flex; align-items: center; background-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend:hover, .semi-input-wrapper.semi-input-wrapper__with-append:hover { background-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus { border: 1px transparent solid; background-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input { background-color: var(--semi-color-fill-0); border: 1px transparent solid; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover { background-color: var(--semi-color-fill-1); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn { background-color: var(--semi-color-fill-1); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus { border: 1px var(--semi-color-focus-border) solid; background-color: var(--semi-color-fill-0); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn { border-right-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn { border-right-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn { box-sizing: border-box; background-color: var(--semi-color-fill-0); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn { border: 1px var(--semi-color-focus-border) solid; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; border-left-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) { border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn { border: 1px var(--semi-color-focus-border) solid; border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; border-left-style: none; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) { border-radius: 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover { background-color: var(--semi-color-fill-0); } .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error { border-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn { background-color: var(--semi-color-danger-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover { background-color: var(--semi-color-danger-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning { border-color: transparent; } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn { background-color: var(--semi-color-warning-light-hover); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover { background-color: var(--semi-color-warning-light-default); } .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-wrapper-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-fill); -webkit-text-fill-color: var(--semi-color-disabled-text); } .semi-input-wrapper-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-input-wrapper-disabled .semi-input-append, .semi-input-wrapper-disabled .semi-input-prepend, .semi-input-wrapper-disabled .semi-input-suffix, .semi-input-wrapper-disabled .semi-input-prefix, .semi-input-wrapper-disabled .semi-icon { color: var(--semi-color-disabled-text); } .semi-input { border: none; outline: none; width: 100%; color: inherit; padding-left: 12px; padding-right: 12px; background-color: transparent; box-sizing: border-box; } .semi-input::placeholder { color: var(--semi-color-text-2); } .semi-input-large { height: 38px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 38px; } .semi-input-small { height: 22px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 22px; } .semi-input-default { height: 30px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 30px; } .semi-input-disabled { cursor: not-allowed; color: inherit; } .semi-input-inset-label { margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-input-prefix, .semi-input-suffix { display: flex; justify-content: center; align-items: center; } .semi-input-prefix-text, .semi-input-suffix-text { margin: 0 12px; color: var(--semi-color-text-2); font-weight: 600; white-space: nowrap; } .semi-input-prefix-icon, .semi-input-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-input-suffix { display: flex; justify-content: center; align-items: center; } .semi-input-clearbtn, .semi-input-modebtn { display: flex; align-items: center; height: 100%; justify-content: center; min-width: 32px; } .semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-text { margin-left: 0; } .semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-icon { margin-left: 0; } .semi-input-suffix-hidden { display: none; } .semi-input-prepend, .semi-input-append { height: 100%; display: flex; align-items: center; background-color: var(--semi-color-fill-0); color: var(--semi-color-text-2); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; flex-shrink: 0; } .semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text { padding: 0 12px; } .semi-input-append { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; border-left: 1px transparent solid; } .semi-input-prepend { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); border-right: 1px transparent solid; } .semi-input-disabled::placeholder { color: var(--semi-color-disabled-text); } .semi-input-group { display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; } .semi-input-group .semi-select, .semi-input-group .semi-cascader, .semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper { border-radius: 0; } .semi-input-group .semi-select:first-child, .semi-input-group .semi-cascader:first-child, .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-input-group .semi-select:last-child, .semi-input-group .semi-cascader:last-child, .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-group .semi-select:not(:last-child), .semi-input-group .semi-cascader:not(:last-child), .semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) { position: relative; } .semi-input-group .semi-select:not(:last-child)::after, .semi-input-group .semi-cascader:not(:last-child)::after, .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after { content: ""; background-color: var(--semi-color-border); width: 1px; position: absolute; right: -1px; top: 1px; bottom: 1px; } .semi-input-group .semi-input-number, .semi-input-group .semi-datepicker, .semi-input-group .semi-autocomplete { border-radius: 0; } .semi-input-group .semi-input-number .semi-datepicker-range-input, .semi-input-group .semi-datepicker .semi-datepicker-range-input, .semi-input-group .semi-autocomplete .semi-datepicker-range-input { border-radius: 0; } .semi-input-group .semi-input-number:first-child .semi-input-wrapper, .semi-input-group .semi-input-number:first-child .semi-datepicker-range-input, .semi-input-group .semi-datepicker:first-child .semi-input-wrapper, .semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input, .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper, .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input { border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-input-group .semi-input-number:last-child .semi-input-wrapper, .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input, .semi-input-group .semi-datepicker:last-child .semi-input-wrapper, .semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input, .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper, .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input { border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; } .semi-input-group .semi-input-number:not(:last-child), .semi-input-group .semi-datepicker:not(:last-child), .semi-input-group .semi-autocomplete:not(:last-child) { position: relative; } .semi-input-group .semi-input-number:not(:last-child)::after, .semi-input-group .semi-datepicker:not(:last-child)::after, .semi-input-group .semi-autocomplete:not(:last-child)::after { content: ""; background-color: var(--semi-color-border); width: 1px; position: absolute; right: -1px; top: 1px; bottom: 1px; } .semi-input-group-wrapper-with-top-label { margin-top: 16px; margin-bottom: 16px; } .semi-input-group-wrapper-with-top-label .semi-input-group { display: flex; } .semi-input-group-wrapper-with-top-label .semi-input-group .semi-form-field { margin-top: 0; margin-bottom: 0; } .semi-rtl .semi-input-wrapper, .semi-portal-rtl .semi-input-wrapper { direction: rtl; } .semi-rtl .semi-input-wrapper__with-prefix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input { padding-left: auto; padding-right: 0; } .semi-rtl .semi-input-wrapper__with-suffix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input { padding-right: auto; padding-left: 0; } .semi-rtl .semi-input, .semi-portal-rtl .semi-input { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-input-inset-label, .semi-portal-rtl .semi-input-inset-label { margin-right: auto; margin-left: 12px; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-append, .semi-portal-rtl .semi-input-append { border-left: 0; border-right: 1px transparent solid; } .semi-rtl .semi-input-prepend, .semi-portal-rtl .semi-input-prepend { border-right: 0; border-left: 1px transparent solid; } .semi-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-textarea-wrapper, .semi-portal-rtl .semi-input-textarea-wrapper { direction: rtl; } .semi-rtl .semi-input-textarea-counter, .semi-portal-rtl .semi-input-textarea-counter { text-align: left; } .semi-rtl .semi-input-textarea-showClear, .semi-portal-rtl .semi-input-textarea-showClear { padding-right: 0; padding-left: 36px; } .semi-input-number { display: inline-flex; align-items: center; box-sizing: border-box; } .semi-input-number-suffix-btns { display: inline-flex; flex-direction: column; margin-left: 4px; border: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-small); background-color: var(--semi-color-bg-2); box-sizing: border-box; } .semi-input-number-suffix-btns > .semi-input-number-button { height: 50%; width: 14px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; user-select: none; border-radius: 0; color: var(--semi-color-text-2); } .semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):hover, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):hover { cursor: pointer; background-color: var(--semi-color-fill-0); } .semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):active, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):active { cursor: pointer; background-color: var(--semi-color-fill-1); } .semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-disabled, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-disabled { background-color: var(--semi-color-disabled-fill); color: var(--semi-color-disabled-text); } .semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-not-allowed, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-not-allowed { cursor: not-allowed; } .semi-input-number-suffix-btns-inner-hover { border-color: var(--semi-color-fill-2); } .semi-input-number-suffix-btns-inner { margin-left: 8px; } .semi-input-number .semi-input-clearbtn + .semi-input-suffix { margin-left: -4px; } .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner { margin-left: 0; } .semi-input-number-size-default .semi-input-number-suffix-btns { height: 32px; } .semi-input-number-size-default .semi-input-number-suffix-btns-inner { height: 30px; } .semi-input-number-size-large .semi-input-number-suffix-btns { height: 40px; } .semi-input-number-size-large .semi-input-number-suffix-btns-inner { height: 38px; } .semi-input-number-size-small .semi-input-number-suffix-btns { height: 24px; } .semi-input-number-size-small .semi-input-number-suffix-btns-inner { height: 22px; } .semi-rtl .semi-input-number, .semi-portal-rtl .semi-input-number { direction: rtl; } .semi-rtl .semi-input-number-suffix-btns, .semi-portal-rtl .semi-input-number-suffix-btns { margin-left: auto; margin-right: 4px; } .semi-rtl .semi-input-number-suffix-btns-inner, .semi-portal-rtl .semi-input-number-suffix-btns-inner { margin-left: auto; margin-right: 8px; } .semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix, .semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix { margin-left: auto; margin-right: -4px; } .semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner, .semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner { margin-left: auto; margin-right: 0; } @keyframes semi-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .semi-layout { display: flex; flex: auto; flex-direction: column; min-height: auto; } .semi-layout, .semi-layout-header, .semi-layout-footer, .semi-layout-content, .semi-layout-sider, .semi-layout-sider-children { box-sizing: border-box; } .semi-layout-header, .semi-layout-footer { flex: 0 0 auto; } .semi-layout-content { flex: auto; min-height: auto; } .semi-layout-sider { position: relative; min-width: auto; } .semi-layout-sider-children { height: 100%; margin-top: -0.1px; padding-top: 0.1px; } .semi-layout-has-sider { flex-direction: row; } .semi-layout-has-sider > .semi-layout, .semi-layout-has-sider > .semi-layout-content { overflow-x: hidden; } .semi-rtl .semi-layout, .semi-portal-rtl .semi-layout { direction: rtl; } .semi-list { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-list-items { margin: 0; padding: 0; list-style: none; } .semi-list-header, .semi-list-footer { padding: 12px 24px; } .semi-list-empty { padding: 12px; color: var(--semi-color-text-2); width: 100%; text-align: center; } .semi-list-item { display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; padding: 12px 24px; margin: 0; list-style: none; } .semi-list-item-body { flex: 1; display: flex; } .semi-list-item-body-header { margin-right: 20px; } .semi-list-item-body-flex-start { align-items: flex-start; } .semi-list-item-body-flex-end { align-items: flex-end; } .semi-list-item-body-center { align-items: center; } .semi-list-item-body-stretch { align-items: stretch; } .semi-list-item-body-baseline { align-items: baseline; } .semi-list-item-extra { flex: 0 0 auto; margin-left: 40px; } .semi-list-split .semi-list-item { border-bottom: 1px solid var(--semi-color-border); } .semi-list-split .semi-list-item:last-child { border-bottom: none; } .semi-list-split .semi-list-header { border-bottom: 1px solid var(--semi-color-border); } .semi-list-split .semi-list-footer { border-top: 1px solid var(--semi-color-border); } .semi-list-small .semi-list-item, .semi-list-small .semi-list-header, .semi-list-small .semi-list-footer { padding: 8px 16px; } .semi-list-large .semi-list-item, .semi-list-large .semi-list-header, .semi-list-large .semi-list-footer { padding: 16px 24px; } .semi-list.semi-list-grid .semi-list-item { padding: 0; } .semi-list.semi-list-bordered { border: 1px solid var(--semi-color-border); } .semi-list.semi-list-flex .semi-list-items { display: flex; } .semi-list.semi-list-flex.semi-list-split .semi-list-item { border-bottom: none; border-right: 1px solid var(--semi-color-border); } .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child { border-right: none; } .semi-rtl .semi-list, .semi-portal-rtl .semi-list { direction: rtl; } .semi-rtl .semi-list-item, .semi-portal-rtl .semi-list-item { direction: rtl; } .semi-rtl .semi-list-item-body-header, .semi-portal-rtl .semi-list-item-body-header { margin-right: auto; margin-left: 20px; } .semi-rtl .semi-list-item-extra, .semi-portal-rtl .semi-list-item-extra { flex: 0 0 auto; margin-left: 0; margin-right: 40px; } .semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item, .semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item { border-bottom: none; border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child, .semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child { border-left: none; } .semi-modal { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; margin: 80px auto; } .semi-modal-mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--semi-color-overlay-bg); height: 100%; z-index: 1000; } .semi-modal-mask-hidden { display: none; } .semi-modal-icon-wrapper { display: inline-flex; margin-right: 12px; width: 24px; } .semi-modal-wrap { position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; -webkit-overflow-scrolling: touch; outline: 0; } .semi-modal-title { display: inline-flex; align-items: flex-start; justify-content: flex-start; width: 100%; margin: 0; } .semi-modal-content { position: relative; display: flex; height: 100%; width: 100%; box-sizing: border-box; flex-direction: column; background-color: var(--semi-color-bg-2); border: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-large); padding: 0 24px; background-clip: padding-box; overflow: hidden; box-shadow: var(--semi-shadow-elevated); } .semi-modal-content-fullScreen { border-radius: 0; border: none; } .semi-modal-header { display: flex; align-items: flex-start; margin: 24px 0; padding: 0 0; font-size: 14px; font-weight: 600; background-color: transparent; color: var(--semi-color-text-0); border-bottom: 0 solid transparent; } .semi-modal-body-wrapper { display: flex; align-items: flex-start; margin: 24px 0; } .semi-modal-body { flex: 1 1 auto; margin: 0; padding: 0; } .semi-modal-withIcon { margin-left: 36px; } .semi-modal-footer { margin: 24px 0; padding: 0 0; text-align: right; border-radius: 0 0 5px 5px; border-top: 0 solid transparent; background-color: transparent; } .semi-modal-footer .semi-button { margin-left: 12px; margin-right: 0; } .semi-modal-confirm .semi-modal-header { margin-bottom: 8px; } .semi-modal-confirm-icon-wrapper { display: inline-flex; margin-right: 12px; width: 24px; } .semi-modal-confirm-icon { display: inline-flex; color: var(--semi-color-primary); } .semi-modal-info-icon { color: var(--semi-color-info); } .semi-modal-success-icon { color: var(--semi-color-success); } .semi-modal-error-icon { color: var(--semi-color-danger); } .semi-modal-warning-icon { color: var(--semi-color-warning); } .semi-modal-small { width: 448px; } .semi-modal-medium { width: 684px; } .semi-modal-large { width: 920px; } .semi-modal-full-width { width: calc(100vw - 64px); } .semi-modal-centered { margin: 0 auto; } .semi-modal-popup .semi-modal-mask, .semi-modal-popup .semi-modal-wrap { position: absolute; overflow: hidden; } .semi-modal-fixed .semi-modal-mask, .semi-modal-fixed .semi-modal-wrap { position: fixed; overflow: hidden; } .semi-modal-displayNone { display: none; } .semi-modal-content-animate-hide { animation: 90ms semi-modal-content-keyframe-hide ease forwards; } .semi-modal-content-animate-show { animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0, 0, 0.26, 1.38) forwards; } .semi-modal-mask-animate-hide { animation: 90ms semi-modal-mask-keyframe-hide ease forwards; } .semi-modal-mask-animate-show { animation: 90ms semi-modal-mask-keyframe-show ease forwards; } @keyframes semi-modal-content-keyframe-show { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } } @keyframes semi-modal-content-keyframe-hide { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.7); } } @keyframes semi-modal-mask-keyframe-show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes semi-modal-mask-keyframe-hide { 0% { opacity: 1; } 100% { opacity: 0; } } .semi-modal-rtl { direction: rtl; } .semi-modal-rtl .semi-modal-icon-wrapper, .semi-modal-confirm-rtl .semi-modal-icon-wrapper { margin-right: 0; margin-left: 12px; } .semi-modal-rtl .semi-modal-withIcon, .semi-modal-confirm-rtl .semi-modal-withIcon { margin-left: 0; margin-right: 36px; } .semi-modal-rtl .semi-modal-footer, .semi-modal-confirm-rtl .semi-modal-footer { text-align: left; } .semi-modal-rtl .semi-modal-footer .semi-button, .semi-modal-confirm-rtl .semi-modal-footer .semi-button { margin-left: 0; margin-right: 12px; } .semi-modal-confirm-rtl { direction: rtl; } .semi-modal-confirm .semi-modal-confirm-rtl .semi-button { margin-left: 0; margin-right: 12px; } .semi-navigation { box-sizing: border-box; display: inline-flex; width: 240px; outline: none; overflow: hidden; margin: 0; padding-left: 8px; padding-right: 8px; user-select: none; transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); border-right: 1px solid var(--semi-color-border); background-color: var(--semi-color-nav-bg); } .semi-navigation-inner { width: 100%; height: 100%; display: flex; justify-content: space-between; } .semi-navigation-list { margin: 0; padding: 0; list-style: none; } .semi-navigation-list > .semi-navigation-item-normal { height: 36px; } .semi-navigation-list > .semi-navigation-item { font-weight: 600; } .semi-navigation-list > .semi-navigation-item > .semi-navigation-sub-title { font-weight: 600; } .semi-navigation-collapsed { width: 60px; padding-left: 8px; padding-right: 8px; transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-navigation-collapsed .semi-navigation-item-text { transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 0; } .semi-navigation-collapsed .semi-navigation-item-icon:last-child { transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 0; } .semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item { cursor: pointer; display: flex; border-radius: var(--semi-border-radius-small); padding: 8px 12px; box-sizing: border-box; margin-top: 0; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--semi-color-text-0); width: 100%; } .semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 1; } .semi-navigation-sub-wrap .semi-navigation-sub-title-indent, .semi-navigation-item-indent { width: 32px; } .semi-navigation-header-link, .semi-navigation-item-link { display: flex; width: 100%; color: inherit; text-decoration: none; align-items: center; justify-content: flex-start; } .semi-navigation-item-sub { padding: 0; } .semi-navigation-sub-wrap > .semi-navigation-item-inner { width: 100%; } .semi-navigation-sub-wrap .semi-navigation-sub-title > .semi-navigation-item-inner { display: flex; } .semi-navigation-item-inner { display: flex; align-items: center; width: 100%; flex: 0 0 auto; } .semi-navigation-item-title { opacity: 1; transition: opacity 100ms 100s ease-out; } .semi-navigation .semi-navigation-sub-title { margin-bottom: 0; } .semi-navigation-item-icon-info { display: inline-flex; color: var(--semi-color-text-2); margin-right: 12px; min-width: 20px; margin-left: 0; } .semi-navigation-item-icon-toggle-left { display: inline-flex; color: var(--semi-color-text-2); margin-right: 12px; min-width: 20px; } .semi-navigation-item-icon-toggle-right { display: inline-flex; color: var(--semi-color-text-2); margin-left: auto; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 1; } .semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-item-selected.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-item-selected.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-inner > .semi-navigation-item { color: var(--semi-color-text-0); } .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-item-normal:hover.semi-navigation-item-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-0); } .semi-navigation-item-normal:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-item-normal:hover.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-item-normal:hover.semi-navigation-item-selected.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-item-normal:hover.semi-navigation-item-selected.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-item-normal:active:not(.semi-navigation-item-selected), .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) { background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-item-normal:active.semi-navigation-item-selected, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-1); } .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-item-normal:active.semi-navigation-item-disabled, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub-wrap .semi-navigation-item-inner { display: block; } .semi-navigation-sub-wrap { display: block; padding: 0; margin-top: 0; height: inherit; } .semi-navigation-sub-wrap .semi-navigation-sub-title { display: flex; justify-content: flex-start; height: 36px; align-items: center; } .semi-navigation-sub { font-weight: 400; font-size: 14px; list-style: none; outline: none; padding: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .semi-navigation-sub .semi-navigation-item { color: var(--semi-color-text-0); background-color: transparent; height: 36px; font-weight: 400; width: 100%; } .semi-navigation-sub .semi-navigation-item:first-child { margin-top: 8px; } .semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child { margin-left: 44px; } .semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) { background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-sub .semi-navigation-item-selected { background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-navigation-sub .semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-sub .semi-navigation-item-selected.semi-navigation-item-disabled { cursor: not-allowed; background-color: var(--semi-color-primary-light-default); color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-item-disabled { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-sub .semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-sub .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-sub .semi-navigation-sub-wrap { height: inherit; } /* Header、Footer-Common */ .semi-navigation-header { display: inline-flex; align-items: center; box-sizing: border-box; } .semi-navigation-header-logo { margin-left: 0; margin-right: 8px; display: inline-flex; } .semi-navigation-header-logo > .semi-icon, .semi-navigation-header-logo > img { width: 36px; height: 36px; object-fit: scale-down; } .semi-navigation-header-text { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; display: inline-flex; color: var(--semi-color-text-0); white-space: nowrap; text-overflow: ellipsis; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 1; } .semi-navigation-footer { box-sizing: border-box; padding: 16px 24px; display: inline-flex; align-items: center; } .semi-navigation-footer .semi-navigation-collapse-btn { text-overflow: ellipsis; white-space: nowrap; } .semi-navigation-collapsed .semi-navigation-header { justify-content: center; } .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo { margin-right: 0; width: 100%; } .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo > .semi-icon, .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo > img { width: 36px; max-width: 100%; max-height: 100%; } .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-text { transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); opacity: 0; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-item-selected:not(.semi-navigation-item-disabled).semi-navigation-item-normal:hover .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected { font-weight: 600; background-color: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled { font-weight: 600; background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-0); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) { background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected { color: var(--semi-color-text-0); background-color: var(--semi-color-fill-1); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected), .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) { background-color: transparent; color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected { background-color: transparent; color: var(--semi-color-primary-disabled); cursor: not-allowed; } .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-primary-disabled); } .semi-navigation-vertical .semi-navigation-item:last-of-type { margin-bottom: 0; } .semi-navigation-vertical .semi-navigation-inner { flex-direction: column; } .semi-navigation-vertical .semi-navigation-header-list-outer { height: 100%; } .semi-navigation-vertical .semi-navigation-list-wrapper { padding-top: 12px; overflow-y: auto; overflow-x: hidden; } .semi-navigation-vertical .semi-navigation-header { padding-top: 32px; padding-bottom: 36px; padding-left: 5.5px; padding-right: 8px; width: 100%; } .semi-navigation-vertical .semi-navigation-header-collapsed { padding-left: 5.5px; padding-right: 0; transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-navigation-vertical .semi-navigation-footer { color: var(--semi-color-text-2); padding-left: 8px; padding-right: 8px; } .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right { margin-left: 12px; opacity: 1; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); } .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn > .semi-button { padding-left: 8px; padding-right: 8px; } .semi-navigation-vertical .semi-navigation-footer-collapsed { justify-content: center; } .semi-navigation-vertical .semi-navigation-footer-collapsed .semi-navigation-collapse-btn { width: 100%; } .semi-navigation-vertical .semi-navigation-footer-collapsed .semi-navigation-collapse-btn .semi-button-content-right { opacity: 0; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); } .semi-navigation-horizontal { width: 100%; height: 60px; border-right: none; border-bottom: 1px solid var(--semi-color-border); padding-left: 24px; padding-right: 24px; } .semi-navigation-horizontal .semi-navigation-inner { flex-direction: row; } .semi-navigation-horizontal .semi-navigation-header-list-outer { display: inline-flex; align-items: center; } .semi-navigation-horizontal .semi-navigation-header-list-outer-collapsed { align-items: baseline; } .semi-navigation-horizontal .semi-navigation-header { width: inherit; margin-right: 24px; } .semi-navigation-horizontal .semi-navigation-list { display: inline-flex; align-items: center; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item { margin-bottom: 0; color: var(--semi-color-text-2); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item .semi-navigation-item-icon:first-child { color: var(--semi-color-text-2); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected .semi-navigation-item-icon:first-child { color: var(--semi-color-text-0); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled { color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) { color: var(--semi-color-text-1); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-1); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-text { color: var(--semi-color-text-1); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { color: var(--semi-color-text-0); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled { color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { color: var(--semi-color-disabled-text); } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-text, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-text { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type) { margin-right: 8px; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title .semi-navigation-item-text { color: var(--semi-color-text-2); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-selected .semi-navigation-item-text { color: var(--semi-color-text-0); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled { cursor: not-allowed; } .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled .semi-navigation-item-text { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-navigation-horizontal .semi-navigation-item-inner { width: auto; } .semi-navigation-horizontal .semi-navigation-item-icon:last-child { margin-left: 8px; } .semi-navigation-horizontal .semi-navigation-item-icon:first-child { margin-right: 8px; } .semi-navigation-horizontal .semi-navigation-item { width: auto; } .semi-navigation-horizontal .semi-navigation-item-collapsed { word-wrap: none; text-overflow: ellipsis; } .semi-navigation-horizontal .semi-navigation-footer { border-top: none; padding-right: 0; } .semi-navigation-horizontal .semi-navigation-footer-collapsed { justify-content: center; flex-direction: row; align-items: center; } .semi-navigation-popover .semi-navigation-sub-title { width: 100%; } .semi-navigation-popover .semi-navigation-item-selected { font-weight: normal; } .semi-dropdown-item .semi-navigation-sub-title { box-sizing: border-box; padding: 8px 12px; width: 100%; } .semi-dropdown-item.semi-navigation-item { margin-top: 0; margin-bottom: 0; min-width: 150px; } .semi-rtl .semi-navigation, .semi-portal-rtl .semi-navigation { direction: rtl; border-right: 0; border-left: 1px solid var(--semi-color-border); transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-rtl .semi-navigation-collapsed, .semi-portal-rtl .semi-navigation-collapsed { transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-rtl .semi-navigation-item-icon:first-child, .semi-portal-rtl .semi-navigation-item-icon:first-child { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-navigation-item-icon:last-child, .semi-portal-rtl .semi-navigation-item-icon:last-child { margin-left: 0; margin-right: auto; } .semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, .semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-portal-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, .semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, .semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-portal-rtl .semi-navigation-sub .semi-navigation-item-text:first-child { margin-left: auto; margin-right: 44px; } .semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-navigation-item-icon:first-child, .semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-navigation-item-icon:first-child { margin-right: 12px; } .semi-rtl .semi-navigation-header, .semi-portal-rtl .semi-navigation-header { display: inline-flex; align-items: center; box-sizing: border-box; } .semi-rtl .semi-navigation-header-logo, .semi-portal-rtl .semi-navigation-header-logo { margin-left: 8px; margin-right: 0; display: inline-flex; } .semi-rtl .semi-navigation-collapsed, .semi-portal-rtl .semi-navigation-collapsed { direction: rtl; } .semi-rtl .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo, .semi-portal-rtl .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo { margin-right: auto; margin-left: 0; } .semi-rtl .semi-navigation-vertical, .semi-portal-rtl .semi-navigation-vertical { direction: rtl; } .semi-rtl .semi-navigation-vertical .semi-navigation-header, .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header { padding-right: 5.5px; padding-left: 8px; } .semi-rtl .semi-navigation-vertical .semi-navigation-header-collapsed, .semi-portal-rtl .semi-navigation-vertical .semi-navigation-header-collapsed { padding-right: 5.5px; padding-left: 0; transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-rtl .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right, .semi-portal-rtl .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right { margin-left: auto; margin-right: 12px; transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); } .semi-rtl .semi-navigation-horizontal, .semi-portal-rtl .semi-navigation-horizontal { direction: rtl; border-right: auto; border-left: none; padding-left: 24px; padding-right: 24px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-header, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-header { margin-right: auto; margin-left: 24px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type), .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type) { margin-right: auto; margin-left: 8px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-item-icon:last-child, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-item-icon:last-child { margin-left: auto; margin-right: 8px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-item-icon:first-child, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-item-icon:first-child { margin-right: auto; margin-left: 8px; } .semi-rtl .semi-navigation-horizontal .semi-navigation-footer, .semi-portal-rtl .semi-navigation-horizontal .semi-navigation-footer { padding-right: auto; padding-left: 0; } .semi-notification-wrapper { position: fixed; } .semi-notification-list { position: fixed; box-sizing: border-box; margin: 0; padding: 0; z-index: 1010; pointer-events: none; } .semi-notification-list[placement=topRight] { right: 0; top: 0; } .semi-notification-list[placement=top] { top: 0; left: 50%; transform: translateX(-50%); } .semi-notification-list[placement=topLeft] { left: 0; top: 0; } .semi-notification-list[placement=bottom] { bottom: 0; left: 50%; transform: translateX(-50%); } .semi-notification-list[placement=bottomRight] { bottom: 0; right: 0; } .semi-notification-list[placement=bottomLeft] { bottom: 0; left: 0; } .semi-notification-notice { box-shadow: var(--semi-shadow-elevated); border-radius: var(--semi-border-radius-medium); padding-top: 16px; padding-right: 12px; padding-bottom: 16px; padding-left: 20px; margin: 20px; width: auto; min-width: 320px; background-color: var(--semi-color-bg-3); position: relative; display: flex; pointer-events: auto; } .semi-notification-notice-icon { width: 24px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: flex-start; justify-content: flex-start; height: 100%; margin-right: 12px; } .semi-notification-notice-info { color: var(--semi-color-info); } .semi-notification-notice-warning { color: var(--semi-color-warning); } .semi-notification-notice-error { color: var(--semi-color-danger); } .semi-notification-notice-success { color: var(--semi-color-success); } .semi-notification-notice-light.semi-notification-notice-warning { background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-warning); } .semi-notification-notice-light.semi-notification-notice-success { background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-success); } .semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default { background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-info); } .semi-notification-notice-light.semi-notification-notice-error { background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default)); background-color: var(--semi-color-bg-0); border: 1px solid var(--semi-color-danger); } .semi-notification-notice-title { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-0); margin-bottom: 4px; } .semi-notification-notice-inner { display: flex; width: 100%; } .semi-notification-notice-content-wrapper { flex: 1 1 auto; margin-right: 8px; } .semi-notification-notice-content { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--semi-color-text-1); } .semi-notification-notice-icon-close { height: 24px; } .semi-notification-notice-icon-close .semi-icon-close { color: var(--semi-color-text-2); } .semi-notification-notice-controls { display: flex; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .semi-notification-notice-detail { text-align: center; flex-grow: 1; } .semi-notification-notice-later { text-align: center; flex-grow: 1; } .semi-notification-notice.semi-notification-notice-rtl { padding-right: 20px; padding-left: 12px; } .semi-notification-notice-rtl { direction: rtl; } .semi-notification-notice-rtl .semi-notification-notice-icon { margin-right: 12px; } .semi-notification-notice-rtl .semi-notification-notice-content-wrapper { margin-right: 8px; } .semi-overflow-list { display: flex; flex-wrap: nowrap; min-width: 0; } .semi-overflow-list-spacer { flex-shrink: 1; width: 1px; } .semi-overflow-list-scroll-wrapper { display: flex; flex: 1; flex-wrap: nowrap; overflow-x: scroll; } .semi-rtl .semi-overflow-list, .semi-portal-rtl .semi-overflow-list { direction: rtl; } .semi-page { display: flex; list-style: none; padding: 0; align-items: center; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-block-start: 0; margin-block-end: 0; } .semi-page-small { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; color: var(--semi-color-text-2); padding: 0 0; } .semi-page-item { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; min-width: 32px; border: 0px solid transparent; cursor: pointer; user-select: none; height: 32px; margin-left: 4px; margin-right: 4px; font-weight: 400; color: var(--semi-color-text-0); border-radius: var(--semi-border-radius-small); text-align: center; line-height: 32px; display: flex; align-items: center; justify-content: center; } .semi-page-item:hover { border-color: transparent; background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-page-item-rest-opening { background-color: var(--semi-color-fill-0); color: var(--semi-color-text-0); } .semi-page-item:active { border-color: transparent; background-color: var(--semi-color-fill-1); color: var(--semi-color-text-0); } .semi-page-item-active { border-color: transparent; color: var(--semi-color-primary); font-weight: 600; background-color: var(--semi-color-primary-light-default); } .semi-page-item-active:hover { border-color: transparent; color: var(--semi-color-primary); background-color: var(--semi-color-primary-light-default); } .semi-page-item-disabled { border-color: transparent; color: var(--semi-color-disabled-text); background-color: transparent; cursor: not-allowed; } .semi-page-item-disabled:hover { background-color: transparent; } .semi-page-item-small { min-width: 44px; margin: 0; } .semi-page-total { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); } .semi-page-prev, .semi-page-next { color: var(--semi-color-tertiary); cursor: pointer; } .semi-page-prev.semi-page-item-disabled, .semi-page-next.semi-page-item-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-page-quickjump { margin-left: 24px; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; justify-content: center; align-items: center; flex-shrink: 0; color: var(--semi-color-text-0); } .semi-page-quickjump-input-number { max-width: 50px; margin-left: 4px; margin-right: 4px; } .semi-page-quickjump-disabled { color: var(--semi-color-disabled-text); } .semi-page .semi-select { user-select: none; } .semi-select-dropdown { user-select: none; } .semi-page-rest-list { padding-top: 4px; padding-bottom: 4px; } .semi-page-rest-list > div { position: relative; } .semi-page-rest-item { height: 32px; line-height: 32px; display: flex; justify-content: center; box-sizing: border-box; cursor: pointer; } .semi-page-rest-item:hover { background-color: var(--semi-color-fill-0); } .semi-page-rest-item:active { background-color: var(--semi-color-fill-1); } .semi-rtl .semi-page, .semi-portal-rtl .semi-page { direction: rtl; } .semi-rtl .semi-page-item, .semi-portal-rtl .semi-page-item { margin-right: 4px; margin-left: 4px; } .semi-rtl .semi-page-prev, .semi-rtl .semi-page-next, .semi-portal-rtl .semi-page-prev, .semi-portal-rtl .semi-page-next { transform: scaleX(-1); } .semi-popconfirm { box-sizing: border-box; max-width: 400px; } .semi-popconfirm-inner { display: flex; flex-direction: column; padding: 24px 24px 24px 20px; position: relative; } .semi-popconfirm-inner .semi-popconfirm-btn-close { position: absolute; right: 0; top: 0; margin-top: 24px; margin-right: 24px; } .semi-popconfirm-header { display: flex; justify-content: flex-start; margin-right: 68px; } .semi-popconfirm-header-title { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin-bottom: 8px; color: var(--semi-color-text-0); } .semi-popconfirm-header-icon { width: 24px; height: 24px; margin-right: 12px; } .semi-popconfirm-header .semi-icon-alert_triangle { color: var(--semi-color-warning); } .semi-popconfirm-header-body { display: inline-flex; flex-direction: column; } .semi-popconfirm-header-content { color: var(--semi-color-text-2); } .semi-popconfirm-header-content > p { margin: 0; padding: 0; } .semi-popconfirm-body { color: var(--semi-color-text-2); } .semi-popconfirm-body > p { margin: 0; padding: 0; } .semi-popconfirm-footer { margin-top: 25px; display: flex; justify-content: flex-end; } .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) { margin-right: 8px; } .semi-popconfirm-popover { border-radius: var(--semi-border-radius-medium); } .semi-popover-with-arrow .semi-popconfirm-inner { padding: 12px 12px 12px 8px; } .semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close { margin-top: 12px; margin-right: 12px; } .semi-popconfirm-rtl { direction: rtl; } .semi-popconfirm-rtl .semi-popconfirm-inner { padding: 24px 20px 24px 24px; } .semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close { right: auto; left: 0; margin-right: 0; margin-left: 24px; } .semi-popconfirm-rtl .semi-popconfirm-header { margin-right: 0; margin-left: 68px; } .semi-popconfirm-rtl .semi-popconfirm-header-icon { margin-right: 0; margin-left: 12px; } .semi-popconfirm-rtl .semi-popconfirm-footer { justify-content: flex-end; } .semi-popconfirm-rtl .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) { margin-right: 0; margin-left: 8px; } .semi-popover-with-arrow.semi-popconfirm-rtl { direction: rtl; } .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner { padding: 12px 8px 12px 12px; } .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close { margin-right: 0; margin-left: 12px; } .semi-popover-wrapper { position: relative; background-color: var(--semi-color-bg-3); box-shadow: var(--semi-shadow-elevated); z-index: 1030; border-radius: var(--semi-border-radius-medium); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; visibility: hidden; } .semi-popover-wrapper-show { visibility: visible; } .semi-popover-trigger { display: inline-block; width: auto; height: auto; } .semi-popover-title { padding: 8px; border-bottom: 1px solid var(--semi-color-border); } .semi-popover-confirm { position: absolute; } .semi-popover-with-arrow { padding: 12px; box-sizing: border-box; } .semi-popover-wrapper .semi-popover-icon-arrow { height: 8px; width: 24px; position: absolute; color: unset; } .semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow { left: 50%; transform: translateX(-50%); bottom: -7px; } .semi-popover-wrapper[x-placement=top].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=top] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=topLeft] .semi-popover-icon-arrow { bottom: -7px; left: 6px; } .semi-popover-wrapper[x-placement=topLeft].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=topLeft] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=topRight] .semi-popover-icon-arrow { bottom: -7px; right: 6px; } .semi-popover-wrapper[x-placement=topRight].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=topRight] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=leftTop] .semi-popover-icon-arrow { width: 8px; height: 24px; right: -7px; top: 6px; } .semi-popover-wrapper[x-placement=leftTop].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=leftTop] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=left] .semi-popover-icon-arrow { width: 8px; height: 24px; right: -7px; top: 50%; transform: translateY(-50%); } .semi-popover-wrapper[x-placement=left].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=left] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=leftBottom] .semi-popover-icon-arrow { width: 8px; height: 24px; right: -7px; bottom: 6px; } .semi-popover-wrapper[x-placement=leftBottom].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=leftBottom] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=rightTop] .semi-popover-icon-arrow { width: 8px; height: 24px; left: -7px; top: 6px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=rightTop].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=rightTop] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=right] .semi-popover-icon-arrow { width: 8px; height: 24px; left: -7px; top: 50%; transform: translateY(-50%) rotate(180deg); } .semi-popover-wrapper[x-placement=right].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=right] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=rightBottom] .semi-popover-icon-arrow { width: 8px; height: 24px; left: -7px; bottom: 6px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=rightBottom].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=rightBottom] .semi-popover-with-arrow { min-height: 36px; } .semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-icon-arrow { top: -7px; left: 6px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=bottomLeft].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow { top: -7px; left: 50%; transform: translateX(-50%) rotate(180deg); } .semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=bottom] .semi-popover-with-arrow { min-width: 36px; } .semi-popover-wrapper[x-placement=bottomRight] .semi-popover-icon-arrow { right: 6px; top: -7px; transform: rotate(180deg); } .semi-popover-wrapper[x-placement=bottomRight].semi-popover-with-arrow, .semi-popover-wrapper[x-placement=bottomRight] .semi-popover-with-arrow { min-width: 36px; } .semi-popover.semi-popover-rtl { direction: rtl; } .semi-progress { display: flex; align-items: center; } .semi-progress-track { background-color: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); } .semi-progress-horizontal { height: 4px; margin-top: 4px; margin-bottom: 4px; } .semi-progress-horizontal.semi-progress-large { height: 6px; } .semi-progress-horizontal .semi-progress-track { height: 100%; width: 100%; } .semi-progress-horizontal .semi-progress-track-inner { height: 100%; background-color: var(--semi-color-success); border-radius: var(--semi-border-radius-small); transition: width 0.3s; transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-progress-horizontal .semi-progress-line-text { min-width: 45px; font-weight: 600; margin-left: 16px; color: var(--semi-color-text-0); } .semi-progress-vertical { width: 4px; display: inline-flex; height: 100%; margin-left: 4px; margin-right: 4px; flex-direction: column; } .semi-progress-vertical.semi-progress-large { width: 6px; } .semi-progress-vertical .semi-progress-track { height: 100%; width: 100%; } .semi-progress-vertical .semi-progress-track-inner { background-color: var(--semi-color-success); border-radius: var(--semi-border-radius-small); width: 100%; transition: height 0.3s; transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); } .semi-progress-vertical .semi-progress-line-text { font-weight: 600; margin-top: 8px; } .semi-progress-circle { position: relative; display: inline-block; } .semi-progress-circle-ring { display: block; } .semi-progress-circle-ring-inner { transition: stroke-dashoffset 0.3s; transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); transform: rotate(-90deg); transform-origin: 50% 50%; } .semi-progress-circle-text { position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%, -50%); user-select: none; color: var(--semi-color-mode-minor-text); } .semi-rtl .semi-progress, .semi-portal-rtl .semi-progress { direction: rtl; } .semi-rtl .semi-progress-horizontal .semi-progress-line-text, .semi-portal-rtl .semi-progress-horizontal .semi-progress-line-text { margin-left: 0; margin-right: 16px; } .semi-rtl .semi-progress-circle-ring-inner, .semi-portal-rtl .semi-progress-circle-ring-inner { transform: rotate(-90deg); transform-origin: 50% 50%; } .semi-rtl .semi-progress-circle-text, .semi-portal-rtl .semi-progress-circle-text { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-radio { box-sizing: border-box; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; display: inline-flex; flex-wrap: wrap; min-height: 20px; min-width: 16px; cursor: pointer; vertical-align: bottom; text-align: left; } .semi-radio.semi-radio-vertical { display: block; } .semi-radio input[type=checkbox], .semi-radio input[type=radio] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .semi-radio:hover .semi-radio-inner-display { background: var(--semi-color-fill-0); border: solid 1px var(--semi-color-focus-border); } .semi-radio:hover.semi-radio-cardRadioGroup .semi-radio-inner-display { background: var(--semi-color-white); } .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-hover); border-color: var(--semi-color-primary-hover); } .semi-radio:active .semi-radio-inner-display { background: var(--semi-color-fill-1); } .semi-radio:active.semi-radio-cardRadioGroup .semi-radio-inner-display { background: var(--semi-color-white); } .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-active); border-color: var(--semi-color-primary-active); } .semi-radio-buttonRadioComponent { padding: 4px; background: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); } .semi-radio-buttonRadioGroup { padding: 4px; border-radius: var(--semi-border-radius-small); line-height: 16px; } .semi-radio-buttonRadioGroup:not(:last-child) { padding-right: 0; } .semi-radio-buttonRadioGroup-small { padding: 2px 4px; line-height: 16px; } .semi-radio-buttonRadioGroup-large { padding: 4px; line-height: 20px; } .semi-radio-cardRadioGroup { flex-wrap: nowrap; border-radius: var(--semi-border-radius-small); padding: 12px 16px; background: transparent; border: 1px solid transparent; } .semi-radio-cardRadioGroup .semi-radio-inner { position: relative; margin-right: 8px; flex-shrink: 0; } .semi-radio-cardRadioGroup .semi-radio-inner-display { background: var(--semi-color-white); } .semi-radio-cardRadioGroup .semi-radio-addon { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--semi-color-text-0); margin-left: 0; padding-left: 0; } .semi-radio-cardRadioGroup .semi-radio-extra { font-weight: normal; font-size: 14px; line-height: 20px; color: var(--semi-color-text-2); padding-left: 0; } .semi-radio-cardRadioGroup:active { background: var(--semi-color-fill-1); } .semi-radio-cardRadioGroup_checked { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary); } .semi-radio-cardRadioGroup_checked:hover { border: 1px solid var(--semi-color-primary-hover); } .semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-hover); } .semi-radio-cardRadioGroup_checked:active { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary-active); } .semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-active); } .semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display { background: var(--semi-color-primary-active); } .semi-radio-cardRadioGroup_hover { background: var(--semi-color-fill-0); } .semi-radio-cardRadioGroup_disabled:active { background: transparent; } .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup { background: var(--semi-color-primary-light-default); border: 1px solid var(--semi-color-primary-disabled); } .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-disabled); } .semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display { border-color: var(--semi-color-primary-disabled); } .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display { background: var(--semi-color-disabled-fill); border: solid 1px var(--semi-color-border); } .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-disabled); border-color: var(--semi-color-primary-disabled); } .semi-radio-inner { position: absolute; display: inline-block; top: 2px; left: 0; width: 16px; height: 16px; vertical-align: sub; user-select: none; } .semi-radio-inner-display { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 16px; height: 16px; border: solid 1px var(--semi-color-text-3); border-radius: 16px; background: transparent; } .semi-radio-inner-display .semi-icon { position: absolute; width: 100%; height: 100%; font-size: 14px; } .semi-radio:hover .semi-radio-inner-display { background: var(--semi-color-fill-0); } .semi-radio:active .semi-radio-inner-display { background: var(--semi-color-fill-1); } .semi-radio-addon { user-select: none; padding-left: 8px; margin-left: 16px; color: var(--semi-color-text-0); display: inline-flex; align-items: center; } .semi-radio-addon-buttonRadio { margin-left: 0; text-align: center; border-radius: var(--semi-border-radius-small); font-weight: 600; color: var(--semi-color-text-1); font-size: 12px; padding: 4px 16px; } .semi-radio-addon-buttonRadio-hover { font-weight: 600; background: var(--semi-color-fill-1); } .semi-radio-addon-buttonRadio-checked { font-weight: 600; background: var(--semi-color-bg-3); color: var(--semi-color-primary); } .semi-radio-addon-buttonRadio-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-radio-addon-buttonRadio-small { font-size: 12px; padding: 2px 16px; } .semi-radio-addon-buttonRadio-large { font-size: 14px; padding: 6px 24px; } .semi-radio .semi-radio-inner-checked:hover .semi-radio-inner-display { background: var(--semi-color-primary-hover); } .semi-radio .semi-radio-inner-checked:active .semi-radio-inner-display { background: var(--semi-color-primary-active); } .semi-radio .semi-radio-inner-checked .semi-radio-inner-display { border: solid 1px var(--semi-color-primary); background: var(--semi-color-primary); color: white; border-radius: 16px; } .semi-radio .semi-radio-inner-checked > .semi-radio-addon { color: var(--semi-color-text-0); } .semi-radio .semi-radio-inner-buttonRadio, .semi-radio .semi-radio-inner-pureCardRadio { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; } .semi-radio-disabled, .semi-radio-disabled:hover { cursor: not-allowed; } .semi-radio-disabled .semi-radio-inner { cursor: not-allowed; } .semi-radio-disabled .semi-radio-inner-display { opacity: 0.75; background: var(--semi-color-disabled-fill); border-color: var(--semi-color-border); } .semi-radio-disabled .semi-radio-inner-display:hover { background: transparent; } .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display { background: var(--semi-color-primary-disabled); border-color: var(--semi-color-primary-disabled); } .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover { background: var(--semi-color-primary-disabled); border-color: var(--semi-color-primary-disabled); } .semi-radio-disabled .semi-radio-addon { color: var(--semi-color-disabled-text); } .semi-radio-disabled .semi-radio-extra { color: var(--semi-color-disabled-text); } .semi-radio-extra { flex-grow: 1; flex-basis: 100%; flex-shrink: 0; color: var(--semi-color-text-2); padding-left: 24px; box-sizing: border-box; } .semi-radioGroup { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-radioGroup-vertical .semi-radio:last-of-type { margin-bottom: 0; } .semi-radioGroup-vertical-default .semi-radio { display: block; margin-bottom: 12px; } .semi-radioGroup-vertical-card .semi-radio { display: flex; margin-bottom: 16px; } .semi-radioGroup-horizontal .semi-radio { margin-right: 16px; } .semi-radioGroup-horizontal .semi-radio:last-of-type { margin-right: 0; } .semi-radioGroup-horizontal-default { display: inline-block; } .semi-radioGroup-buttonRadio { display: inline-block; background: var(--semi-color-fill-0); border-radius: var(--semi-border-radius-small); vertical-align: middle; } .semi-rtl .semi-radio, .semi-portal-rtl .semi-radio { direction: rtl; } .semi-rtl .semi-radio input[type=checkbox], .semi-rtl .semi-radio input[type=radio], .semi-portal-rtl .semi-radio input[type=checkbox], .semi-portal-rtl .semi-radio input[type=radio] { left: auto; right: 0; } .semi-rtl .semi-radio-buttonRadioGroup:not(:last-child), .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) { padding-left: 0; } .semi-rtl .semi-radio-inner, .semi-portal-rtl .semi-radio-inner { left: auto; right: 0; } .semi-rtl .semi-radio-inner-display, .semi-portal-rtl .semi-radio-inner-display { left: auto; right: 0; } .semi-rtl .semi-radio-addon, .semi-portal-rtl .semi-radio-addon { padding-left: 0; margin-left: 0; padding-right: 8px; margin-right: 16px; } .semi-rtl .semi-radio-addon-buttonRadio, .semi-portal-rtl .semi-radio-addon-buttonRadio { margin-right: 0; } .semi-rtl .semi-radio-extra, .semi-portal-rtl .semi-radio-extra { padding-left: 0; padding-right: 24px; } .semi-rtl-isCardRadioGroup .semi-radio-inner, .semi-portal-rtl-isCardRadioGroup .semi-radio-inner { margin-right: 0; margin-left: 8px; } .semi-rtl-isCardRadioGroup .semi-radio-addon, .semi-portal-rtl-isCardRadioGroup .semi-radio-addon { margin-right: 0; padding-right: 0; } .semi-rtl-isCardRadioGroup .semi-radio-extra, .semi-portal-rtl-isCardRadioGroup .semi-radio-extra { padding-right: 0; } .semi-rtl .semi-radioGroup, .semi-portal-rtl .semi-radioGroup { direction: rtl; } .semi-rtl .semi-radioGroup-horizontal .semi-radio, .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio { margin-right: 0; margin-left: 16px; } .semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type, .semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type { margin-left: 0; } .semi-rating { display: inline-block; margin: 0px; padding: 0px; color: rgba(var(--semi-yellow-5), 1); font-size: 20px; line-height: unset; list-style: none; outline: none; } .semi-rating-disabled .semi-rating-star { cursor: default; } .semi-rating-disabled .semi-rating-star:hover { transform: scale(1); } .semi-rating-star { position: relative; display: inline-block; margin: 0; padding: 0; color: inherit; cursor: pointer; transition: all 0.5s; } .semi-rating-star:not(:last-child) { margin-right: 6px; } .semi-rating-star > div:focus { outline: 0; } .semi-rating-star > div:hover, .semi-rating-star > div:focus { transform: scale(1.1); } .semi-rating-star-small { width: 16px; height: 16px; font-size: 16px; } .semi-rating-star-default { width: 24px; height: 24px; font-size: 24px; } .semi-rating-star-wrapper { position: relative; } .semi-rating-star-first, .semi-rating-star-second { color: var(--semi-color-fill-0); user-select: none; } .semi-rating-star-first { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; opacity: 0; } .semi-rating-star-half .semi-rating-star-first, .semi-rating-star-half .semi-rating-star-second { opacity: 1; } .semi-rating-star-half .semi-rating-star-first, .semi-rating-star-full .semi-rating-star-second { color: inherit; } .semi-rtl .semi-rating, .semi-portal-rtl .semi-rating { direction: rtl; } .semi-rtl .semi-rating-star:not(:last-child), .semi-portal-rtl .semi-rating-star:not(:last-child) { margin-right: 0; margin-left: 6px; } .semi-rtl .semi-rating-star-first, .semi-portal-rtl .semi-rating-star-first { left: auto; right: 0; } .semi-scrolllist { width: 100%; height: 100%; background: var(--semi-color-bg-3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1); border-radius: var(--semi-border-radius-medium); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; user-select: none; display: flex; flex-direction: column; } .semi-scrolllist-header { text-align: center; padding: 0 16px; } .semi-scrolllist-header-title { padding: 16px 0; font-weight: 600; color: var(--semi-color-text-0); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-scrolllist-body { display: flex; height: 300px; padding: 0 16px; overflow: hidden; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before, .semi-scrolllist-body .semi-scrolllist-item > ul:before { content: ""; display: block; width: 100%; height: 132px; } .semi-scrolllist-body .semi-scrolllist-item { position: relative; flex: 1; overflow-x: hidden; overflow-y: auto; } .semi-scrolllist-body .semi-scrolllist-item:not(:last-child) { border-right: 1px solid var(--semi-color-border); } .semi-scrolllist-body .semi-scrolllist-item > ul, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul { box-sizing: border-box; width: 100%; margin: 0; padding: 0; padding-bottom: 132px; list-style: none; } .semi-scrolllist-body .semi-scrolllist-item > ul > li, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li { list-style: none; height: 36px; box-sizing: border-box; color: var(--semi-color-text-0); text-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: transparent; } .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel { background: var(--semi-color-primary-light-default); color: var(--semi-color-text-0); } .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg { color: var(--semi-color-text-2); width: 16px; height: 16px; margin-right: 12px; } .semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected), .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected) { cursor: pointer; } .semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover { background-color: var(--semi-color-fill-1); } .semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active { background-color: var(--semi-color-fill-2); } .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-disabled, .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-scrolllist-body .semi-scrolllist-item-wheel { position: relative; flex: 1; overflow: hidden; } .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) { border-right: 1px solid var(--semi-color-border); } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-item-selected { font-weight: 600; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { overflow-x: hidden; overflow-y: auto; height: 100%; width: 100%; padding-right: 18px; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade { width: 100%; height: 50%; pointer-events: none; position: absolute; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre { top: 0; margin-top: -19px; background: var(--semi-color-bg-3); opacity: 0.5; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-post { top: 50%; margin-top: 19px; background: var(--semi-color-bg-3); opacity: 0.5; } .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-selector { pointer-events: none; position: absolute; top: 50%; border-top: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-border); height: 36px; width: 100%; transform: translateY(-50%); } .semi-scrolllist .semi-scrolllist-footer { border-top: 1px solid var(--semi-color-border); padding: 10px; } .semi-scrolllist .semi-scrolllist-line { background: var(--semi-color-border); height: 1px; } .semi-rtl .semi-scrolllist, .semi-portal-rtl .semi-scrolllist { direction: rtl; } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child), .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child) { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, .semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg, .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child), .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer, .semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { padding-right: 0; padding-left: 18px; } .semi-select-option { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-all; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; color: var(--semi-color-text-0); border-radius: 0; position: relative; display: flex; flex-wrap: nowrap; align-items: center; cursor: pointer; box-sizing: border-box; } .semi-select-option-icon { width: 12px; color: transparent; visibility: hidden; margin-right: 8px; display: flex; justify-content: center; align-content: center; } .semi-select-option-text { display: flex; flex-wrap: wrap; white-space: pre; } .semi-select-option-keyword { color: var(--semi-color-primary); background-color: inherit; font-weight: 600; } .semi-select-option:active { background-color: var(--semi-color-fill-1); } .semi-select-option-empty { cursor: not-allowed; color: var(--semi-color-disabled-text); justify-content: center; } .semi-select-option-empty:hover { background-color: inherit; } .semi-select-option-empty:active { background-color: inherit; } .semi-select-option-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-select-option-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-select-option-selected { font-weight: 600; } .semi-select-option-selected .semi-select-option-icon { visibility: visible; color: var(--semi-color-text-2); } .semi-select-option-focused { background-color: var(--semi-color-fill-0); } .semi-select-option:first-of-type { margin-top: 4px; } .semi-select-option:last-of-type { margin-bottom: 4px; } .semi-select { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-flex; vertical-align: middle; position: relative; outline: none; cursor: pointer; } .semi-select:hover { background-color: var(--semi-color-fill-1); border: 1px solid transparent; } .semi-select:active { background-color: var(--semi-color-fill-2); border: 1px solid var(--semi-color-focus-border); } .semi-select:focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-select-small { height: 24px; line-height: 24px; } .semi-select-large { min-height: 40px; line-height: 40px; } .semi-select-open, .semi-select-focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-select-open:hover, .semi-select-focus:hover { background-color: var(--semi-color-fill-0); } .semi-select-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-select-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-select-warning:focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-select-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-select-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-select-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-select-error:focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-select-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-select-disabled { cursor: not-allowed; background-color: var(--semi-color-disabled-fill); } .semi-select-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-select-disabled:focus { border: 1px solid var(--semi-color-focus-border); } .semi-select-disabled .semi-select-selection, .semi-select-disabled .semi-select-selection-placeholder { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-select-disabled .semi-select-arrow, .semi-select-disabled .semi-select-prefix, .semi-select-disabled .semi-select-suffix { color: var(--semi-color-disabled-text); } .semi-select-disabled .semi-tag { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-select-selection { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; display: flex; align-items: center; flex-grow: 1; overflow: hidden; margin-left: 12px; cursor: pointer; color: var(--semi-color-text-0); } .semi-select-selection-text { width: 100%; overflow: hidden; text-overflow: ellipsis; } .semi-select-selection-text-inactive { display: flex; opacity: 0.4; } .semi-select-selection-text-hide { display: none; } .semi-select-selection-placeholder { color: var(--semi-color-text-2); } .semi-select-selection .semi-tag { margin-top: 1px; margin-right: 4px; margin-bottom: 1px; } .semi-select-selection .semi-tag:nth-of-type(1) { margin-left: 0; } .semi-select-selection .semi-tag-group { height: inherit; } .semi-select-selection .semi-tag-group .semi-tag { margin-top: 1px; margin-right: 4px; margin-bottom: 1px; } .semi-select-content-wrapper { white-space: nowrap; overflow: hidden; display: flex; align-items: center; height: 100%; } .semi-select-multiple { height: auto; } .semi-select-multiple .semi-select-selection { margin-left: 4px; } .semi-select-multiple .semi-select-content-wrapper { width: 100%; min-height: 30px; flex-wrap: wrap; } .semi-select-multiple .semi-select-content-wrapper-empty { margin-left: 8px; } .semi-select-multiple .semi-select-content-wrapper .semi-tag-group { display: flex; align-items: center; } .semi-select-multiple .semi-select-content-wrapper-one-line { flex-wrap: nowrap; } .semi-select-multiple .semi-select-content-wrapper-one-line .semi-tag-group { flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; flex-shrink: 0; } .semi-select-multiple .semi-select-inline-label-wrapper { flex-shrink: 0; } .semi-select-multiple.semi-select-large .semi-select-content-wrapper { min-height: 38px; } .semi-select-multiple.semi-select-small .semi-select-content-wrapper { min-height: 22px; } .semi-select-arrow { display: flex; align-items: center; justify-content: center; width: 32px; color: var(--semi-color-text-2); flex-shrink: 0; } .semi-select-arrow-empty { display: flex; width: 12px; } .semi-select-prefix, .semi-select-suffix { display: flex; justify-content: center; align-items: center; } .semi-select-prefix-text, .semi-select-suffix-text { margin: 0 12px; } .semi-select-prefix-icon, .semi-select-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-select-suffix { display: flex; justify-content: center; align-items: center; } .semi-select-clear { display: flex; justify-content: center; align-items: center; width: 32px; color: var(--semi-color-text-2); flex-shrink: 0; } .semi-select-clear:hover { color: var(--semi-color-primary); } .semi-select-inset-label-wrapper { display: inline; } .semi-select-inset-label { margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-select-create-tips { color: var(--semi-color-text-2); margin-right: 4px; } .semi-select-with-prefix .semi-select-selection { margin-left: 0; } .semi-select-single.semi-select-filterable .semi-select-content-wrapper { flex-grow: 1; height: 100%; overflow: hidden; position: relative; } .semi-select-single.semi-select-filterable .semi-input-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border: none; background-color: transparent; } .semi-select-single.semi-select-filterable .semi-input-wrapper-focus { border: none; } .semi-select-single.semi-select-filterable .semi-input { padding-left: 0; padding-right: 0; height: 100%; } .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper { flex-grow: 1; height: 100%; overflow: hidden; position: relative; } .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .semi-select-multiple.semi-select-filterable .semi-input-wrapper { height: 100%; width: 100%; border: none; background-color: transparent; } .semi-select-multiple.semi-select-filterable .semi-input-wrapper-focus { border: none; } .semi-select-multiple.semi-select-filterable .semi-input { padding-left: 0; padding-right: 0; } .semi-select-option-list { overflow-x: hidden; overflow-y: auto; padding: 0 0 0 0; } .semi-select-option-list-chosen .semi-select-option-icon { display: flex; } .semi-select-group { color: var(--semi-color-text-2); padding-top: 12px; margin-top: 4px; padding-bottom: 4px; padding-left: 32px; padding-right: 16px; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: default; } .semi-select-group:not(:nth-of-type(1)) { border-top: 1px solid var(--semi-color-border); } .semi-select-loading-wrapper { padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; cursor: not-allowed; } .semi-rtl .semi-select, .semi-portal-rtl .semi-select { direction: rtl; } .semi-rtl .semi-select-selection, .semi-portal-rtl .semi-select-selection { margin-left: 0; margin-right: 12px; } .semi-rtl .semi-select-selection .semi-tag:nth-of-type(1), .semi-portal-rtl .semi-select-selection .semi-tag:nth-of-type(1) { margin-right: 0; } .semi-rtl .semi-select-selection .semi-tag-group .semi-tag, .semi-portal-rtl .semi-select-selection .semi-tag-group .semi-tag { margin-left: 4px; margin-right: 0; } .semi-rtl .semi-select-multiple .semi-select-selection, .semi-portal-rtl .semi-select-multiple .semi-select-selection { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-select-multiple .semi-select-content-wrapper-empty, .semi-portal-rtl .semi-select-multiple .semi-select-content-wrapper-empty { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-select-inset-label, .semi-portal-rtl .semi-select-inset-label { margin-left: 12px; } .semi-rtl .semi-select-create-tips, .semi-portal-rtl .semi-select-create-tips { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-select-with-prefix .semi-select-selection, .semi-portal-rtl .semi-select-with-prefix .semi-select-selection { margin-left: auto; margin-right: 0; } .semi-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper, .semi-portal-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper { left: auto; right: 0; } .semi-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper, .semi-portal-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper { left: auto; right: 0; } .semi-rtl .semi-select-group, .semi-portal-rtl .semi-select-group { padding-left: 32px; padding-right: 16px; } .semi-rtl .semi-select-option-icon, .semi-portal-rtl .semi-select-option-icon { margin-right: 0; margin-left: 8px; } .semi-sidesheet { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: fixed; margin: 0; top: 0; left: 0; height: 100%; } .semi-sidesheet-inner:focus, .semi-sidesheet-content:focus { outline: none; } .semi-sidesheet-inner-wrap { position: absolute; } .semi-sidesheet-left, .semi-sidesheet-right { top: 0; width: 0%; height: 100%; } .semi-sidesheet-left .semi-sidesheet-inner-wrap, .semi-sidesheet-right .semi-sidesheet-inner-wrap { height: 100%; } .semi-sidesheet-left.semi-sidesheet, .semi-sidesheet-right.semi-sidesheet { width: 100%; } .semi-sidesheet-right { right: 0; } .semi-sidesheet-right .semi-sidesheet-inner-wrap { right: 0; } .semi-sidesheet-top, .semi-sidesheet-bottom { left: 0; width: 100%; height: 0%; } .semi-sidesheet-top .semi-sidesheet-inner-wrap, .semi-sidesheet-bottom .semi-sidesheet-inner-wrap { width: 100%; } .semi-sidesheet-top.semi-sidesheet, .semi-sidesheet-bottom.semi-sidesheet { height: 100%; } .semi-sidesheet-top { top: 0; } .semi-sidesheet-bottom { bottom: 0; } .semi-sidesheet-bottom .semi-sidesheet-inner-wrap { bottom: 0; } .semi-sidesheet-title { flex: 1 0 auto; margin: 0; font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-0); text-align: left; } .semi-sidesheet-inner { z-index: 1; overflow: auto; background-color: var(--semi-color-bg-2); border: 0; } .semi-sidesheet-header { display: flex; align-items: flex-start; padding: 24px; padding-bottom: 20px; } .semi-sidesheet-body { padding: 0 24px; flex: 1; } .semi-sidesheet-content { height: 100%; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; } .semi-sidesheet-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--semi-color-overlay-bg); } .semi-sidesheet-mask-hidden { display: none; } .semi-sidesheet-footer { padding: 24px; } .semi-sidesheet-fixed .semi-sidesheet-inner { box-shadow: var(--semi-shadow-elevated); } .semi-sidesheet-fixed.semi-sidesheet-left { left: 0; } .semi-sidesheet-fixed.semi-sidesheet-left .semi-sidesheet-inner { left: 0; } .semi-sidesheet-fixed.semi-sidesheet-right { left: auto; } .semi-sidesheet-fixed.semi-sidesheet-right .semi-sidesheet-inner { right: 0; } .semi-sidesheet-fixed.semi-sidesheet-top, .semi-sidesheet-fixed.semi-sidesheet-bottom { height: auto; } .semi-sidesheet-fixed.semi-sidesheet-bottom { top: auto; } .semi-sidesheet-fixed.semi-sidesheet-bottom .semi-sidesheet-inner { bottom: 0; } .semi-sidesheet.semi-sidesheet-popup { position: absolute; } .semi-sidesheet-hidden { display: none; } .semi-sidesheet-rtl .semi-sidesheet-inner { direction: rtl; } .semi-sidesheet-rtl .semi-sidesheet-title { text-align: right; } .semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button { background: var(--semi-color-fill-0); border-radius: 4px; } .semi-skeleton-avatar { border-radius: 50%; } .semi-skeleton-avatar-extra-extra-small { width: 20px; height: 20px; } .semi-skeleton-avatar-extra-small { width: 24px; height: 24px; } .semi-skeleton-avatar-medium { width: 48px; height: 48px; } .semi-skeleton-avatar-small { width: 32px; height: 32px; } .semi-skeleton-avatar-large { width: 72px; height: 72px; } .semi-skeleton-avatar-extra-large { width: 128px; height: 128px; } .semi-skeleton-paragraph { margin: 0; padding: 0; list-style-type: none; } .semi-skeleton-paragraph li { background: var(--semi-color-fill-0); border-radius: 4px; width: 100%; height: 16px; margin-bottom: 10px; } .semi-skeleton-paragraph li:last-child { width: 60%; margin-bottom: 0; } .semi-skeleton-paragraph li:first-child { width: 100%; } .semi-skeleton-title { width: 100%; height: 24px; } .semi-skeleton-button { width: 115px; height: 32px; } .semi-skeleton-image { width: 100%; height: 100%; } .semi-skeleton-active .semi-skeleton-avatar, .semi-skeleton-active .semi-skeleton-image, .semi-skeleton-active .semi-skeleton-title, .semi-skeleton-active .semi-skeleton-button, .semi-skeleton-active .semi-skeleton-paragraph li { background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .semi-rtl .semi-skeleton, .semi-portal-rtl .semi-skeleton { direction: rtl; } .semi-slider { padding: 0 13px; margin: 0; } .semi-slider-wrapper { box-sizing: border-box; position: relative; height: 32px; width: 100%; display: inline-block; vertical-align: bottom; } .semi-slider-rail { box-sizing: border-box; margin: 0; padding: 0; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; font-feature-settings: "tnum"; position: absolute; height: 4px; cursor: pointer; touch-action: none; background-color: var(--semi-color-fill-0); width: 100%; border-radius: var(--semi-border-radius-small); top: 14px; } .semi-slider-handle { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3); box-sizing: border-box; touch-action: none; position: absolute; width: 24px; height: 24px; margin-top: 4px; background-color: var(--semi-color-white); border: none; border-radius: 50%; cursor: pointer; transition: #fff 0.3s; } .semi-slider-handle:hover { background-color: var(--semi-color-white); } .semi-slider-handle-clicked { border: solid 1px var(--semi-color-focus-border); cursor: grabbing; } .semi-slider-track { height: 4px; background: var(--semi-color-primary); border-radius: var(--semi-border-radius-small); position: absolute; cursor: pointer; top: 14px; } .semi-slider-tooltip { position: absolute; top: -40px; } .semi-slider-dots { width: 100%; background: transparent; } .semi-slider-dot { position: absolute; top: 14px; width: 4px; height: 4px; background-color: var(--semi-color-white); border-radius: 50%; cursor: pointer; } .semi-slider-dot-active { background-color: var(--semi-color-white); } .semi-slider-marks { position: absolute; top: 23px; left: 0; width: 100%; font-size: 14px; } .semi-slider-mark { position: absolute; display: inline-block; color: var(--semi-color-text-2); text-align: center; cursor: pointer; transform: translate(-50%, 0); } .semi-slider-marks-reverse { position: absolute; top: 23px; left: 0; width: 100%; font-size: 14px; } .semi-slider-mark-reverse { position: absolute; display: inline-block; color: var(--semi-color-text-2); text-align: center; cursor: pointer; transform: translate(-50%, 0) rotate(-180deg); } .semi-slider-boundary { position: relative; font-size: 12px; color: var(--semi-color-text-0); visibility: hidden; top: 30px; } .semi-slider-boundary span { position: absolute; display: inline-block; } .semi-slider-boundary-min { left: 0; } .semi-slider-boundary-max { right: 0; } .semi-slider-boundary-show { visibility: visible; } .semi-slider-vertical-wrapper { width: 4px; height: 100%; } .semi-slider-vertical-wrapper .semi-slider-track { width: 4px; } .semi-slider-vertical-wrapper .semi-slider-marks { height: 100%; margin-top: -30px; margin-left: 29px; } .semi-slider-vertical-wrapper .semi-slider-marks-reverse { height: 100%; margin-top: -30px; margin-left: -26px; } .semi-slider-vertical-wrapper .semi-slider-rail { width: 4px; height: 100%; top: 0; } .semi-slider-vertical-wrapper .semi-slider-handle { margin-top: 0; margin-left: -10px; } .semi-slider-disabled { cursor: not-allowed; } .semi-slider-disabled .semi-slider-handle { cursor: not-allowed; box-shadow: none; border: 1px var(--semi-color-border) solid; } .semi-slider-disabled .semi-slider-handle:hover { background-color: var(--semi-color-white); } .semi-slider-disabled .semi-slider-rail { cursor: not-allowed; } .semi-slider-disabled .semi-slider-track { cursor: not-allowed; background-color: var(--semi-color-primary-disabled); } .semi-slider-disabled .semi-slider-dot { cursor: not-allowed; background-color: var(--semi-color-white); border-color: var(--semi-color-white); box-shadow: none; } .semi-slider-handle-tooltip { text-align: center; } .semi-slider-reverse { transform: rotate(180deg); } .semi-space { display: inline-flex; } .semi-space-vertical { flex-direction: column; } .semi-space-horizontal { flex-direction: row; } .semi-space-align-center { align-items: center; } .semi-space-align-end { align-items: flex-end; } .semi-space-align-start { align-items: flex-start; } .semi-space-align-baseline { align-items: baseline; } .semi-space-wrap { flex-wrap: wrap; } .semi-space-tight-horizontal { column-gap: 8px; } .semi-space-tight-vertical { row-gap: 8px; } .semi-space-medium-horizontal { column-gap: 16px; } .semi-space-medium-vertical { row-gap: 16px; } .semi-space-loose-horizontal { column-gap: 24px; } .semi-space-loose-vertical { row-gap: 24px; } .semi-rtl .semi-space, .semi-portal-rtl .semi-space { direction: rtl; } @keyframes semi-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .semi-spin { position: relative; display: inline-block; width: 20px; height: 20px; } .semi-spin-wrapper { text-align: center; position: absolute; width: 100%; transform: translate(0, -50%); top: 50%; color: var(--semi-color-primary); } .semi-spin-wrapper > svg { animation: 0.6s linear infinite semi-animation-rotate; width: 20px; height: 20px; } .semi-spin-animate { display: inline-flex; animation: 1.6s linear infinite semi-animation-rotate; } .semi-spin-children { opacity: 0.5; user-select: none; } .semi-spin-block { display: block; } .semi-spin-block::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .semi-spin-block .semi-spin-wrapper { display: block; } .semi-spin-block.semi-spin { height: auto; width: auto; } .semi-spin-hidden::after { content: none; } .semi-spin-hidden > .semi-spin-children { opacity: 1; user-select: auto; } .semi-spin-small { width: 14px; height: 14px; } .semi-spin-small > .semi-spin-wrapper svg { width: 14px; height: 14px; } .semi-spin-middle { width: 20px; height: 20px; } .semi-spin-middle > .semi-spin-wrapper svg { width: 20px; height: 20px; } .semi-spin-large { width: 32px; height: 32px; } .semi-spin-large > .semi-spin-wrapper svg { width: 32px; height: 32px; } .semi-spin-container { overflow: hidden; } .semi-rtl .semi-spin, .semi-portal-rtl .semi-spin { direction: rtl; } .semi-rtl .semi-spin-container, .semi-portal-rtl .semi-spin-container { direction: rtl; } .semi-steps .semi-col { flex: 1; } .semi-steps-vertical .semi-row-flex { flex-direction: column; } .semi-steps .semi-steps-item { box-sizing: border-box; display: flex; height: 72px; position: relative; overflow: hidden; margin-right: 16px; border: 1px solid transparent; border-radius: var(--semi-border-radius-medium); padding: 12px 16px; } .semi-steps .semi-steps-item .semi-steps-item-title { position: relative; font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--semi-color-text-0); } .semi-steps .semi-steps-item .semi-steps-item-description { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps .semi-steps-item-process { background-color: var(--semi-color-primary-light-default); } .semi-steps .semi-steps-item-process .semi-steps-item-left:not(.semi-steps-item-icon) { background: var(--semi-color-primary); } .semi-steps .semi-steps-item-process .semi-steps-item-title, .semi-steps .semi-steps-item-process .semi-steps-item-icon { color: var(--semi-color-primary); } .semi-steps .semi-steps-item-wait .semi-steps-item-left:not(.semi-steps-item-icon) { background: var(--semi-color-text-2); } .semi-steps .semi-steps-item-wait .semi-steps-item-icon { color: var(--semi-color-text-2); } .semi-steps .semi-steps-item-finish .semi-icon, .semi-steps .semi-steps-item-finish .semi-steps-item-title { color: var(--semi-color-success); } .semi-steps .semi-steps-item-finish:hover { background-color: var(--semi-color-fill-0); } .semi-steps .semi-steps-item-finish:hover .semi-icon, .semi-steps .semi-steps-item-finish:hover .semi-steps-item-title { color: var(--semi-color-success-hover); } .semi-steps .semi-steps-item-finish:active { background-color: var(--semi-color-fill-1); } .semi-steps .semi-steps-item-finish:active .semi-icon, .semi-steps .semi-steps-item-finish:active .semi-steps-item-title { color: var(--semi-color-success-active); } .semi-steps .semi-steps-item-error .semi-icon, .semi-steps .semi-steps-item-error .semi-steps-item-title { color: var(--semi-color-danger); } .semi-steps .semi-steps-item-error:hover { background: var(--semi-color-fill-0); } .semi-steps .semi-steps-item-error:hover .semi-icon, .semi-steps .semi-steps-item-error:hover .semi-steps-item-title { color: var(--semi-color-danger-hover); } .semi-steps .semi-steps-item-error:active { background-color: var(--semi-color-fill-1); } .semi-steps .semi-steps-item-error:active .semi-icon, .semi-steps .semi-steps-item-error:active .semi-steps-item-title { color: var(--semi-color-danger-active); } .semi-steps .semi-steps-item-warning .semi-steps-item-title, .semi-steps .semi-steps-item-warning .semi-icon { color: var(--semi-color-warning); } .semi-steps .semi-steps-item-warning:hover { background: var(--semi-color-fill-0); } .semi-steps .semi-steps-item-warning:hover .semi-steps-item-title, .semi-steps .semi-steps-item-warning:hover .semi-icon { color: var(--semi-color-warning-hover); } .semi-steps .semi-steps-item-warning:active { background-color: var(--semi-color-fill-1); } .semi-steps .semi-steps-item-warning:active .semi-steps-item-title, .semi-steps .semi-steps-item-warning:active .semi-icon { color: var(--semi-color-warning-active); } .semi-steps .semi-steps-item-clickable { cursor: pointer; } .semi-steps .semi-steps-item-left { width: 24px; height: 24px; line-height: 32px; text-align: center; border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; flex-grow: 0; } .semi-steps .semi-steps-item-left.semi-steps-item-plain { color: white; } .semi-steps .semi-steps-item-left-process { background: var(--semi-color-primary-light-default); } .semi-steps .semi-steps-item-content { margin-left: 16px; flex: 1; overflow: hidden; } .semi-steps-basic.semi-steps-horizontal { display: flex; flex-flow: row nowrap; } .semi-steps-basic.semi-steps-horizontal.semi-steps-hasline .semi-steps-item-title::after { content: ""; position: absolute; top: 50%; left: 100%; display: block; width: 9999px; height: 1px; background: var(--semi-color-fill-2); } .semi-steps-basic.semi-steps-horizontal .semi-steps-item { padding-left: 16px; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:first-child { padding-left: 0; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child { flex: none; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title { max-width: 100%; padding-right: 0; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title::after { display: none; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item-done .semi-steps-item-container .semi-steps-item-title::after { background: var(--semi-color-primary); } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-content { flex: 1; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-description { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); width: 100%; max-width: 268px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title { max-width: 80%; } .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps-basic.semi-steps-vertical { display: flex; flex-flow: column nowrap; } .semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content { min-height: 40px; } .semi-steps-basic.semi-steps-vertical.semi-steps-hasline .semi-steps-item-icon::after { content: ""; position: absolute; top: 100%; left: 50%; display: block; width: 1px; height: 9999px; background: var(--semi-color-fill-2); } .semi-steps-basic.semi-steps-vertical .semi-steps-item { padding-top: 9px; } .semi-steps-basic.semi-steps-vertical .semi-steps-item:first-child { padding-top: 0; } .semi-steps-basic.semi-steps-vertical .semi-steps-item:last-child .semi-steps-item-icon::after { display: none; } .semi-steps-basic.semi-steps-vertical .semi-steps-item-done .semi-steps-item-icon::after { background: var(--semi-color-primary); } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-content { min-height: 42px; padding-bottom: 22px; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-icon { display: inline-flex; position: relative; padding-bottom: 9px; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-description { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); width: 100%; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title { max-width: 100%; } .semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semi-steps-basic .semi-steps-item { box-sizing: border-box; position: relative; display: inline-block; vertical-align: top; overflow: hidden; flex: 1; cursor: pointer; } .semi-steps-basic .semi-steps-item:hover .semi-steps-item-title { color: var(--semi-color-focus-border); } .semi-steps-basic .semi-steps-item:hover .semi-steps-item-description { color: var(--semi-color-focus-border); } .semi-steps-basic .semi-steps-item .semi-steps-item-container { display: flex; align-items: flex-start; } .semi-steps-basic .semi-steps-item .semi-steps-item-left { display: flex; justify-content: center; align-items: center; margin-right: 8px; } .semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-icon { display: flex; height: 24px; align-items: center; } .semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-number-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; background: var(--semi-color-primary); border-radius: var(--semi-border-radius-circle); color: var(--semi-color-white); } .semi-steps-basic .semi-steps-item .semi-steps-item-title { position: relative; display: inline-block; font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 24px; font-weight: 600; color: var(--semi-color-text-0); vertical-align: top; padding-right: 16px; padding-bottom: 4px; } .semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-primary); } .semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-white); } .semi-steps-basic .semi-steps-item-wait .semi-steps-item-title { color: var(--semi-color-text-2); } .semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-text-2); } .semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { background: var(--semi-color-fill-0); color: var(--semi-color-text-2); } .semi-steps-basic .semi-steps-item-wait:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { background: var(--semi-color-secondary-light-default); color: var(--semi-color-focus-border); } .semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-primary); } .semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-white); } .semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-danger); } .semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-primary); } .semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon { color: var(--semi-color-warning); } .semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { color: var(--semi-color-white); } .semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-title { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon { height: 20px; } .semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; width: 20px; height: 20px; } .semi-steps-nav { display: inline-flex; flex-flow: row nowrap; } .semi-steps-nav .semi-steps-item { box-sizing: border-box; } .semi-steps-nav .semi-steps-item:last-child { flex: none; } .semi-steps-nav .semi-steps-item:last-child .semi-steps-item-content { width: auto; } .semi-steps-nav .semi-steps-item .semi-steps-item-container { display: flex; align-items: center; color: var(--semi-color-text-2); } .semi-steps-nav .semi-steps-item .semi-steps-item-container .semi-steps-item-icon { display: inline-flex; flex: 1; justify-content: center; color: var(--semi-grey-3); min-width: 60px; } .semi-steps-nav .semi-steps-item .semi-steps-item-content { flex: 1; display: inline-block; } .semi-steps-nav .semi-steps-item .semi-steps-item-title { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; max-width: 17em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } .semi-steps-nav .semi-steps-item-active .semi-steps-item-title { color: var(--semi-color-text-0); font-weight: 600; } .semi-steps-nav.semi-steps-small .semi-steps-item .semi-steps-item-title { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-rtl .semi-steps, .semi-portal-rtl .semi-steps { direction: rtl; } .semi-rtl .semi-steps-item, .semi-portal-rtl .semi-steps-item { margin-right: auto; margin-left: 16px; } .semi-rtl .semi-steps-item-content, .semi-portal-rtl .semi-steps-item-content { margin-left: auto; margin-right: 16px; } .semi-rtl .semi-steps-basic, .semi-portal-rtl .semi-steps-basic { direction: rtl; } .semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title, .semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title { padding-left: 16px; } .semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after, .semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after { right: 100%; } .semi-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item, .semi-portal-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item { margin: 0; } .semi-rtl .semi-steps-nav, .semi-portal-rtl .semi-steps-nav { direction: rtl; } .semi-switch { box-sizing: border-box; display: inline-block; border-radius: 12px; border: 1px transparent solid; position: relative; cursor: pointer; background-color: var(--semi-color-fill-0); transition: background-color 200ms ease-in-out; width: 40px; height: 24px; } .semi-switch:hover { background-color: var(--semi-color-fill-1); } .semi-switch:active { border: 1px var(--semi-color-fill-2) solid; } .semi-switch:active .semi-switch-knob { width: 24px; } .semi-switch-checked { background-color: var(--semi-color-success); } .semi-switch-checked:hover { background-color: var(--semi-color-success-hover); } .semi-switch-checked .semi-switch-knob { transform: translateX(18px); } .semi-switch-checked:active .semi-switch-knob { transform: translateX(12px); } .semi-switch-active { background-color: var(--semi-color-success-active); } .semi-switch-disabled { cursor: not-allowed; background-color: transparent; border: 1px var(--semi-color-border) solid; } .semi-switch-disabled:hover { background-color: transparent; } .semi-switch-disabled:active { background-color: transparent; } .semi-switch-disabled .semi-switch-knob { cursor: not-allowed; box-shadow: none; border: 1px var(--semi-color-border) solid; } .semi-switch-disabled.semi-switch-checked { border-color: transparent; background-color: var(--semi-color-success-disabled); } .semi-switch-disabled.semi-switch-checked .semi-switch-knob { box-shadow: none; border: none; } .semi-switch-knob { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3); cursor: pointer; border-radius: 9px; background-color: white; box-sizing: border-box; position: absolute; left: 0; right: auto; transition: transform 200ms ease-in-out, width 200ms ease-in-out; width: 18px; height: 18px; top: 2px; transform: translateX(2px); } .semi-switch-native-control { width: 100%; height: 100%; opacity: 0; cursor: inherit; pointer-events: auto; margin: 0; position: absolute; top: 0; left: 0; } .semi-switch-native-control[type=checkbox] { width: 100%; height: 100%; } .semi-switch-checked-text, .semi-switch-unchecked-text { position: absolute; font-size: 12px; height: 100%; width: 20px; display: flex; justify-content: center; align-items: center; } .semi-switch-checked-text { color: var(--semi-color-white); } .semi-switch-unchecked-text { color: var(--semi-color-text-2); right: 0; } .semi-switch-loading { display: inline-flex; align-items: center; background-color: var(--semi-color-fill-1); } .semi-switch-loading-spin .semi-spin-wrapper { display: inline-flex; align-items: center; color: var(--semi-color-white); } .semi-switch-loading .semi-switch-loading-spin { transform: translateX(2px); } .semi-switch-loading .semi-switch-loading-spin > .semi-spin-wrapper > svg { width: 18px; height: 18px; } .semi-switch-loading.semi-switch-checked { background-color: var(--semi-color-success-hover); } .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin { transform: translateX(16px); } .semi-switch-loading.semi-switch-small .semi-switch-loading-spin { transform: translateX(2px); } .semi-switch-loading.semi-switch-small .semi-switch-loading-spin > .semi-spin-wrapper > svg { width: 10px; height: 10px; } .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin { transform: translateX(10px); } .semi-switch-loading.semi-switch-large .semi-switch-loading-spin { transform: translateX(2px); } .semi-switch-loading.semi-switch-large .semi-switch-loading-spin > .semi-spin-wrapper > svg { width: 28px; height: 28px; } .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin { transform: translateX(22px); } .semi-switch-disabled.semi-switch-checked { background-color: var(--semi-color-success-disabled); } .semi-switch-large { width: 54px; height: 32px; border-radius: 16px; } .semi-switch-large .semi-switch-knob { width: 24px; height: 24px; top: 3px; border-radius: 12px; transform: translateX(3px); } .semi-switch-large.semi-switch-checked .semi-switch-knob { transform: translateX(26px); } .semi-switch-large.semi-switch-checked:active .semi-switch-knob { transform: translateX(16px); } .semi-switch-large:active .semi-switch-knob { width: 34px; } .semi-switch-large .semi-switch-checked-text, .semi-switch-large .semi-switch-unchecked-text { width: 26px; font-size: 14px; } .semi-switch-small { width: 26px; height: 16px; border-radius: 8px; } .semi-switch-small .semi-switch-knob { width: 12px; height: 12px; top: 1px; border-radius: 6px; transform: translateX(1px); } .semi-switch-small.semi-switch-checked .semi-switch-knob { transform: translateX(11px); } .semi-switch-small.semi-switch-checked:active .semi-switch-knob { transform: translateX(9px); } .semi-switch-small:active .semi-switch-knob { width: 14px; } .semi-form .semi-switch-native-control { width: 100%; height: 100%; } .semi-rtl .semi-switch, .semi-portal-rtl .semi-switch { direction: rtl; } .semi-rtl .semi-switch-checked .semi-switch-knob, .semi-portal-rtl .semi-switch-checked .semi-switch-knob { transform: translateX(-18px); } .semi-rtl .semi-switch-checked:active .semi-switch-knob, .semi-portal-rtl .semi-switch-checked:active .semi-switch-knob { transform: translateX(-12px); } .semi-rtl .semi-switch-knob, .semi-portal-rtl .semi-switch-knob { right: 0; left: auto; transform: translateX(-2px); } .semi-rtl .semi-switch-native-control, .semi-portal-rtl .semi-switch-native-control { right: 0; } .semi-rtl .semi-switch-unchecked-text, .semi-portal-rtl .semi-switch-unchecked-text { left: 0; } .semi-rtl .semi-switch-loading .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading .semi-switch-loading-spin { transform: translateX(-2px); } .semi-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin { transform: translateX(-16px); } .semi-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin { transform: translateX(-2px); } .semi-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin { transform: translateX(-10px); } .semi-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin { transform: translateX(-2px); } .semi-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin, .semi-portal-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin { transform: translateX(-22px); } .semi-rtl .semi-switch-large .semi-switch-knob, .semi-portal-rtl .semi-switch-large .semi-switch-knob { transform: translateX(-3px); } .semi-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob, .semi-portal-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob { transform: translateX(-26px); } .semi-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob, .semi-portal-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob { transform: translateX(-16px); } .semi-rtl .semi-switch-small .semi-switch-knob, .semi-portal-rtl .semi-switch-small .semi-switch-knob { transform: translateX(-1px); } .semi-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob, .semi-portal-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob { transform: translateX(-11px); } .semi-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob, .semi-portal-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob { transform: translateX(-9px); } .semi-table-panel-operation { background-color: var(--semi-color-primary); padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; display: flex; justify-content: space-between; color: var(--semi-color-text-2); } .semi-table-panel-operation-right, .semi-table-panel-operation-left { display: flex; justify-content: space-between; } .semi-table-panel-operation-selected { color: var(--semi-color-primary-light-active); } .semi-table-pagination-info { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; } .semi-table-pagination-outer { display: flex; justify-content: space-between; align-items: center; } .semi-table { width: 100%; text-align: left; border-collapse: separate; border-spacing: 0; font-size: inherit; display: table; } .semi-table-wrapper { zoom: 1; position: relative; clear: both; box-sizing: border-box; margin: 0; padding: 0; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-0); width: 100%; } .semi-table-wrapper[data-column-fixed=true] { z-index: 1; } .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell { padding-top: 12px; padding-bottom: 12px; } .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell { padding-top: 8px; padding-bottom: 8px; } .semi-table-title { position: relative; padding-top: 16px; padding-bottom: 16px; padding-left: 0; padding-right: 0; } .semi-table-container { position: relative; } .semi-table-header { overflow: hidden; scrollbar-base-color: transparent; } .semi-table-header::-webkit-scrollbar { background-color: transparent; border-bottom: 2px solid var(--semi-color-border); } .semi-table-body { overflow: auto; width: 100%; box-sizing: border-box; } .semi-table-colgroup { display: table-column-group; } .semi-table-colgroup .semi-table-col { display: table-column; } .semi-table-colgroup .semi-table-column-expand, .semi-table-colgroup .semi-table-column-selection { width: 48px; } .semi-table-thead > .semi-table-row > .semi-table-row-head { background-color: transparent; color: var(--semi-color-text-2); font-weight: 600; text-align: left; border-bottom: 2px solid var(--semi-color-border); padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; vertical-align: middle; word-break: break-all; word-wrap: break-word; position: relative; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right { z-index: 101; position: sticky; background-color: var(--semi-color-bg-2); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before { background-color: transparent; content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; z-index: -1; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last { border-right: 1px solid var(--semi-color-border); box-shadow: 3px 0 0 0 var(--semi-color-shadow); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing .react-resizable-handle:hover { background-color: unset; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first { border-left: 1px solid var(--semi-color-border); box-shadow: -3px 0 0 0 var(--semi-color-shadow); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing .react-resizable-handle:hover { background-color: unset; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] { box-shadow: none; border-left: transparent; } .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-column-selection { text-align: center; } .semi-table-thead > .semi-table-row > .semi-table-row-head[colspan]:not([colspan="1"]) { text-align: center; } .semi-table-thead > .semi-table-row > .semi-table-row-head .semi-table-header-column { display: inline-flex; align-items: center; } .semi-table-thead > .semi-table-row .react-resizable { position: relative; background-clip: padding-box; } .semi-table-thead > .semi-table-row .resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-thead > .semi-table-row .resizing .react-resizable-handle:hover { background-color: unset; } .semi-table-thead > .semi-table-row .react-resizable-handle { position: absolute; width: 9px; height: calc(100% - 4px * 2); background-color: var(--semi-color-border); bottom: 4px; right: -1px; cursor: col-resize; z-index: 0; } .semi-table-thead > .semi-table-row .react-resizable-handle:hover { background-color: var(--semi-color-primary); } .semi-table-tbody { display: table-row-group; } .semi-table-tbody > .semi-table-row { display: table-row; } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { background-color: var(--semi-color-fill-0); } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right { background-color: var(--semi-color-bg-2); } .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before { background-color: var(--semi-color-fill-0); content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; z-index: -1; } .semi-table-tbody > .semi-table-row > .semi-table-row-cell { display: table-cell; word-wrap: break-word; word-break: break-all; border-left: none; border-right: none; border-bottom: 1px solid var(--semi-color-border); padding: 16px; box-sizing: border-box; position: relative; vertical-align: middle; } .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing { border-right: 2px solid var(--semi-color-primary); } .semi-table-tbody > .semi-table-row.semi-table-row-expand > .semi-table-row-cell { background-color: var(--semi-color-fill-0); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right { z-index: 101; position: sticky; background-color: var(--semi-color-bg-2); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last { border-right: 1px solid var(--semi-color-border); box-shadow: 3px 0 0 0 var(--semi-color-shadow); } .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first { border-left: 1px solid var(--semi-color-border); box-shadow: -3px 0 0 0 var(--semi-color-shadow); } .semi-table-tbody > .semi-table-row-section { display: table-row; } .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell { background-color: rgba(var(--semi-grey-0), 1); border-bottom: 1px solid var(--semi-color-border); } .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell:not(.semi-table-column-selection) { padding: 10px 16px; } .semi-table-tbody > .semi-table-row-section .semi-table-section-inner { display: inline-flex; align-items: center; } .semi-table-virtualized .semi-table-tbody { display: block; } .semi-table-virtualized .semi-table-tbody > .semi-table-row { display: flex; } .semi-table-virtualized .semi-table-tbody > .semi-table-row > .semi-table-row-cell { word-wrap: unset; word-break: unset; white-space: nowrap; display: inline-flex; align-items: center; overflow: hidden; } .semi-table-virtualized .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell { padding-top: 16px; padding-bottom: 16px; display: flex; } .semi-table-virtualized .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell { padding: 0; overflow: unset; } .semi-table-footer { background-color: var(--semi-color-fill-0); padding: 16px; margin: 0; position: relative; } .semi-table .semi-table-selection-wrap { display: inline-flex; vertical-align: bottom; } .semi-table .semi-table-selection-disabled { cursor: not-allowed; } .semi-table .semi-table-selection-disabled > .semi-checkbox { pointer-events: none; } .semi-table .semi-table-column-hidden { display: none; } .semi-table .semi-table-column-selection { text-align: center; } .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon { left: 0; top: 0; } .semi-table .semi-table-column-expand .semi-table-expand-icon { transform: translateY(2px); } .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child { margin-right: 0; } .semi-table .semi-table-column-sorter { margin-left: 4px; display: inline-block; width: 16px; height: 16px; cursor: pointer; vertical-align: middle; text-align: center; } .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down { height: 0; display: block; color: var(--semi-color-text-2); } .semi-table .semi-table-column-sorter-up:hover .anticon, .semi-table .semi-table-column-sorter-down:hover .anticon { color: var(--semi-color-text-2); } .semi-table .semi-table-column-sorter-up svg, .semi-table .semi-table-column-sorter-down svg { width: 16px; height: 16px; } .semi-table .semi-table-column-sorter-up.on .semi-icon-caretup, .semi-table .semi-table-column-sorter-up.on .semi-icon-caretdown, .semi-table .semi-table-column-sorter-down.on .semi-icon-caretup, .semi-table .semi-table-column-sorter-down.on .semi-icon-caretdown { color: var(--semi-color-primary); } .semi-table .semi-table-column-filter { margin-left: 4px; display: inline-flex; cursor: pointer; color: var(--semi-color-text-2); vertical-align: middle; } .semi-table .semi-table-column-filter svg { width: 12px; height: 12px; } .semi-table .semi-table-column-filter.on { color: var(--semi-color-primary); } .semi-table-bordered .semi-table-title { padding-left: 16px; padding-right: 16px; border-top: 1px solid var(--semi-color-border); border-right: 1px solid var(--semi-color-border); border-left: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-container { border: 1px solid var(--semi-color-border); border-right: 0; border-bottom: 0; } .semi-table-bordered .semi-table-header::-webkit-scrollbar { border-right: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-footer { border-left: 1px solid var(--semi-color-border); border-right: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle { background-color: transparent; } .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell { border-right: 1px solid var(--semi-color-border); } .semi-table-bordered .semi-table-placeholder { border-right: 1px solid var(--semi-color-border); } .semi-table-placeholder { position: relative; z-index: 1; padding: 16px 12px; color: var(--semi-color-text-2); font-size: 14px; text-align: center; background: transparent; border-bottom: 1px solid var(--semi-color-border); border-radius: 0 0 4px 4px; } .semi-table-fixed { table-layout: fixed; min-width: 100%; } .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner { position: sticky; overflow: auto; left: 0; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; height: 100%; display: flex; align-items: center; } .semi-table-fixed-header table { table-layout: fixed; } .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { box-shadow: none; } .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { box-shadow: none; } .semi-table-pagination-outer { color: var(--semi-color-text-2); min-height: 60px; } .semi-table-expand-icon { color: var(--semi-color-text-2); cursor: pointer; display: inline-flex; align-items: center; user-select: none; background: transparent; position: relative; margin-right: 8px; } .semi-table-expand-icon-cell { display: inline-flex; align-items: center; justify-content: center; } .semi-rtl .semi-table, .semi-portal-rtl .semi-table { direction: rtl; text-align: right; } .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head { text-align: right; } .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last, .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing, .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing { border-left: 2px solid var(--semi-color-primary); } .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first, .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first { border-left: 0; border-right: 1px solid var(--semi-color-border); } .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing, .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing { border-left: 2px solid var(--semi-color-primary); } .semi-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar], .semi-portal-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] { box-shadow: none; border-right: transparent; } .semi-rtl .semi-table-thead > .semi-table-row .resizing, .semi-portal-rtl .semi-table-thead > .semi-table-row .resizing { border-left: 2px solid var(--semi-color-primary); } .semi-rtl .semi-table-thead > .semi-table-row .react-resizable-handle, .semi-portal-rtl .semi-table-thead > .semi-table-row .react-resizable-handle { right: auto; left: -1px; } .semi-rtl .semi-table-tbody, .semi-portal-rtl .semi-table-tbody { display: table-row-group; } .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing, .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing { border-right: 0; border-left: 2px solid var(--semi-color-primary); } .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, .semi-portal-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first { border-left: 0; border-right: 1px solid var(--semi-color-border); } .semi-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon, .semi-portal-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon { left: auto; right: 0; } .semi-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon, .semi-portal-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon { transform: scaleX(-1) translateY(2px); } .semi-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child, .semi-portal-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child { margin-right: auto; margin-left: 0; } .semi-rtl .semi-table .semi-table-column-sorter, .semi-portal-rtl .semi-table .semi-table-column-sorter { margin-left: auto; margin-right: 4px; } .semi-rtl .semi-table .semi-table-column-filter, .semi-portal-rtl .semi-table .semi-table-column-filter { margin-left: auto; margin-right: 4px; } .semi-rtl .semi-table-bordered .semi-table-container, .semi-portal-rtl .semi-table-bordered .semi-table-container { border-left: 0; border-right: 1px solid var(--semi-color-border); } .semi-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell, .semi-portal-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head, .semi-portal-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-table-bordered .semi-table-placeholder, .semi-portal-rtl .semi-table-bordered .semi-table-placeholder { border-left: 1px solid var(--semi-color-border); border-right: 0; } .semi-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar, .semi-portal-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner, .semi-portal-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-portal-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner { left: auto; right: 0; margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; } .semi-rtl .semi-table-expand-icon, .semi-portal-rtl .semi-table-expand-icon { margin-right: auto; margin-left: 8px; transform: scaleX(-1) translateY(2px); } .semi-tabs { box-sizing: border-box; position: relative; } .semi-tabs-left { display: flex; flex-direction: row; } .semi-tabs-bar { position: relative; white-space: nowrap; outline: none; } .semi-tabs-bar-left { display: flex; flex-direction: column; } .semi-tabs-bar-extra { padding: 0 5px; } .semi-tabs-bar .semi-tabs-tab { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; box-sizing: border-box; position: relative; display: block; float: left; font-weight: 400; color: var(--semi-color-text-2); user-select: none; } .semi-tabs-bar .semi-tabs-tab .semi-icon { position: relative; margin-right: 8px; top: 3px; color: var(--semi-color-text-2); } .semi-tabs-bar .semi-tabs-tab .semi-icon-close { margin-right: 0; font-size: 14px; color: var(--semi-color-text-2); margin-left: 10px; cursor: pointer; } .semi-tabs-bar .semi-tabs-tab:hover { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab:hover .semi-icon { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab:active { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab:active .semi-icon { color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover { cursor: default; font-weight: 600; color: var(--semi-color-text-0); } .semi-tabs-bar .semi-tabs-tab-active .semi-icon, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon { color: var(--semi-color-primary); } .semi-tabs-bar .semi-tabs-tab-active .semi-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon-close { color: var(--semi-color-text-2); } .semi-tabs-bar .semi-tabs-tab-active .semi-icon-close:hover { color: var(--semi-color-text-1); } .semi-tabs-bar .semi-tabs-tab-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tabs-bar .semi-tabs-tab-disabled:hover { color: var(--semi-color-disabled-text); border-bottom: none; } .semi-tabs-bar-collapse, .semi-tabs-bar-collapse .semi-tabs-bar-overflow-list { display: flex; align-items: center; } .semi-tabs-bar-collapse .semi-overflow-list { flex: 1; } .semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper::-webkit-scrollbar { display: none; /* Safari and Chrome */ width: 0; height: 0; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start { margin-right: 4px; } .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end { margin-left: 4px; } .semi-tabs-bar-dropdown { max-height: 300px; overflow-y: auto; } .semi-tabs-bar:after { content: ""; height: 0; display: block; clear: both; } .semi-tabs-bar-line.semi-tabs-bar-top { border-bottom: 1px solid var(--semi-color-border); } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab { padding: 16px 4px 14px 4px; border-bottom: 2px solid transparent; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) { padding-left: 0; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover { border-bottom: 2px solid var(--semi-color-fill-0); } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active { border-bottom: 2px solid var(--semi-color-fill-1); } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 24px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small { padding: 8px 4px 6px 4px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium { padding: 12px 4px 10px 4px; } .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover { border-bottom: 2px solid var(--semi-color-primary); } .semi-tabs-bar-line.semi-tabs-bar-left { border-right: 1px solid var(--semi-color-border); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab { padding: 12px; border-left: 2px solid transparent; } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover { border-left: 2px solid var(--semi-color-fill-0); background-color: var(--semi-color-fill-0); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active { border-left: 2px solid var(--semi-color-fill-1); background-color: var(--semi-color-fill-1); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-small { padding: 6px; } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-medium { padding: 10px; } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active { background-color: var(--semi-color-primary-light-default); } .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover { border-left: 2px solid var(--semi-color-primary); background-color: var(--semi-color-primary-light-default); } .semi-tabs-bar-line .semi-tabs-bar-extra { height: 50px; line-height: 50px; } .semi-tabs-bar-line .semi-tabs-bar-line-extra-small { height: 36px; line-height: 36px; } .semi-tabs-bar-card.semi-tabs-bar-top::before { position: absolute; right: 0; left: 0; bottom: 0; border-bottom: 1px solid var(--semi-color-border); content: ""; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab { border: 1px solid transparent; border-bottom: none; border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:hover { border-bottom: none; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 8px; } .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active:hover { padding: 8px 12px 7px 12px; border: 1px solid var(--semi-color-border); border-bottom: 1px solid var(--semi-color-bg-1); background: transparent; } .semi-tabs-bar-card.semi-tabs-bar-left { border-right: 1px solid var(--semi-color-border); } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab { border: 1px solid transparent; border-right: none; border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover { border-right: none; } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) { margin-bottom: 8px; } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after { content: " "; width: 1px; position: absolute; right: -1px; top: 0; bottom: 0; background: var(--semi-color-bg-1); } .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:hover { padding: 8px 12px; border: 1px solid var(--semi-color-border); border-right: none; background: transparent; } .semi-tabs-bar-card .semi-tabs-tab { padding: 8px 12px; } .semi-tabs-bar-card .semi-tabs-tab:hover { background: var(--semi-color-fill-0); } .semi-tabs-bar-card .semi-tabs-tab:active { background: var(--semi-color-fill-1); } .semi-tabs-bar-button { border: none; } .semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) { margin-bottom: 8px; } .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 8px; } .semi-tabs-bar-button .semi-tabs-tab { padding: 8px 12px; border-radius: var(--semi-border-radius-small); color: var(--semi-color-text-2); border: none; } .semi-tabs-bar-button .semi-tabs-tab:hover { border: none; background-color: var(--semi-color-fill-0); } .semi-tabs-bar-button .semi-tabs-tab:active { background-color: var(--semi-color-fill-1); } .semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover { color: var(--semi-color-primary); border: none; background-color: var(--semi-color-primary-light-default); } .semi-tabs-content { width: 100%; padding: 5px 0; } .semi-tabs-content-left { height: 100%; padding: 0 5px; } .semi-tabs-pane { width: 100%; overflow: hidden; } .semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive { display: none; } .semi-rtl .semi-tabs, .semi-portal-rtl .semi-tabs { direction: rtl; } .semi-rtl .semi-tabs-bar .semi-tabs-tab, .semi-portal-rtl .semi-tabs-bar .semi-tabs-tab { float: right; } .semi-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon, .semi-portal-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start, .semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start { margin-right: 0; margin-left: 4px; } .semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end, .semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right, .semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left, .semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right, .semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left { transform: scaleX(-1); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: 0; margin-left: 24px; } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab { border-left: 0; border-right: 2px solid transparent; } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover { border-left: 0; border-right: 2px solid var(--semi-color-fill-0); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active { border-left: 0; border-right: 2px solid var(--semi-color-fill-1); } .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover { border-left: 0; border-right: 2px solid var(--semi-color-primary); } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab { border: 1px solid transparent; border-left: none; } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover { border-left: none; } .semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after, .semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after { right: auto; left: -1px; } .semi-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), .semi-portal-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { margin-right: auto; margin-left: 8px; } .semi-tag { box-sizing: border-box; display: inline-block; border-radius: var(--semi-border-radius-small); background-color: transparent; position: relative; user-select: none; overflow: hidden; white-space: nowrap; vertical-align: bottom; } .semi-tag-default, .semi-tag-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 20px; padding: 2px 8px; } .semi-tag-large { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 4px 8px; height: 24px; } .semi-tag-invisible { display: none; } .semi-tag-content { display: flex; display: flex; justify-content: center; align-items: center; height: 100%; } .semi-tag-close { display: flex; justify-content: center; align-items: center; color: var(--semi-color-text-2); padding-left: 4px; cursor: pointer; } .semi-tag-closable { padding: 4px 4px 4px 8px; } .semi-tag-avatar-square .semi-avatar, .semi-tag-avatar-circle .semi-avatar { margin-right: 4px; } .semi-tag-avatar-square { padding: 0 4px 0 0; } .semi-tag-avatar-square .semi-avatar > img { background-color: var(--semi-color-default); } .semi-tag-avatar-circle { padding: 2px 4px 2px 2px; } .semi-tag-avatar-square.semi-tag-default .semi-avatar, .semi-tag-avatar-square.semi-tag-small .semi-avatar { width: 20px; height: 20px; } .semi-tag-avatar-square.semi-tag-large .semi-avatar { width: 24px; height: 24px; } .semi-tag-avatar-circle.semi-tag-small, .semi-tag-avatar-circle.semi-tag-default { border-radius: 11px; } .semi-tag-avatar-circle.semi-tag-small .semi-avatar, .semi-tag-avatar-circle.semi-tag-default .semi-avatar { width: 16px; height: 16px; } .semi-tag-avatar-circle.semi-tag-large { border-radius: 13px; } .semi-tag-avatar-circle.semi-tag-large .semi-avatar { width: 20px; height: 20px; } .semi-tag-group { display: block; height: auto; } .semi-tag-group .semi-tag { margin-bottom: 0; margin-right: 8px; } .semi-tag-group-max.semi-tag-group-small { height: 22px; } .semi-tag-group-max.semi-tag-group-large { height: 26px; } .semi-tag-rest-group-popover .semi-tag { margin-right: 8px; margin-bottom: 0; } .semi-tag-rest-group-popover .semi-tag:last-of-type { margin-right: 0; } .semi-tag-amber-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-amber-4), 1); color: rgba(var(--semi-amber-5), 1); } .semi-tag-amber-solid { background-color: rgba(var(--semi-amber-5), 1); color: white; } .semi-tag-amber-light { background-color: rgba(var(--semi-amber-5), 0.15); color: rgba(var(--semi-amber-8), 1); } .semi-tag-blue-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-blue-4), 1); color: rgba(var(--semi-blue-5), 1); } .semi-tag-blue-solid { background-color: rgba(var(--semi-blue-5), 1); color: white; } .semi-tag-blue-light { background-color: rgba(var(--semi-blue-5), 0.15); color: rgba(var(--semi-blue-8), 1); } .semi-tag-cyan-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-cyan-4), 1); color: rgba(var(--semi-cyan-5), 1); } .semi-tag-cyan-solid { background-color: rgba(var(--semi-cyan-5), 1); color: white; } .semi-tag-cyan-light { background-color: rgba(var(--semi-cyan-5), 0.15); color: rgba(var(--semi-cyan-8), 1); } .semi-tag-green-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-green-4), 1); color: rgba(var(--semi-green-5), 1); } .semi-tag-green-solid { background-color: rgba(var(--semi-green-5), 1); color: white; } .semi-tag-green-light { background-color: rgba(var(--semi-green-5), 0.15); color: rgba(var(--semi-green-8), 1); } .semi-tag-grey-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-grey-4), 1); color: rgba(var(--semi-grey-5), 1); } .semi-tag-grey-solid { background-color: rgba(var(--semi-grey-5), 1); color: white; } .semi-tag-grey-light { background-color: rgba(var(--semi-grey-5), 0.15); color: rgba(var(--semi-grey-8), 1); } .semi-tag-indigo-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-indigo-4), 1); color: rgba(var(--semi-indigo-5), 1); } .semi-tag-indigo-solid { background-color: rgba(var(--semi-indigo-5), 1); color: white; } .semi-tag-indigo-light { background-color: rgba(var(--semi-indigo-5), 0.15); color: rgba(var(--semi-indigo-8), 1); } .semi-tag-light-blue-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-light-blue-4), 1); color: rgba(var(--semi-light-blue-5), 1); } .semi-tag-light-blue-solid { background-color: rgba(var(--semi-light-blue-5), 1); color: white; } .semi-tag-light-blue-light { background-color: rgba(var(--semi-light-blue-5), 0.15); color: rgba(var(--semi-light-blue-8), 1); } .semi-tag-light-green-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-light-green-4), 1); color: rgba(var(--semi-light-green-5), 1); } .semi-tag-light-green-solid { background-color: rgba(var(--semi-light-green-5), 1); color: white; } .semi-tag-light-green-light { background-color: rgba(var(--semi-light-green-5), 0.15); color: rgba(var(--semi-light-green-8), 1); } .semi-tag-lime-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-lime-4), 1); color: rgba(var(--semi-lime-5), 1); } .semi-tag-lime-solid { background-color: rgba(var(--semi-lime-5), 1); color: white; } .semi-tag-lime-light { background-color: rgba(var(--semi-lime-5), 0.15); color: rgba(var(--semi-lime-8), 1); } .semi-tag-orange-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-orange-4), 1); color: rgba(var(--semi-orange-5), 1); } .semi-tag-orange-solid { background-color: rgba(var(--semi-orange-5), 1); color: white; } .semi-tag-orange-light { background-color: rgba(var(--semi-orange-5), 0.15); color: rgba(var(--semi-orange-8), 1); } .semi-tag-pink-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-pink-4), 1); color: rgba(var(--semi-pink-5), 1); } .semi-tag-pink-solid { background-color: rgba(var(--semi-pink-5), 1); color: white; } .semi-tag-pink-light { background-color: rgba(var(--semi-pink-5), 0.15); color: rgba(var(--semi-pink-8), 1); } .semi-tag-purple-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-purple-4), 1); color: rgba(var(--semi-purple-5), 1); } .semi-tag-purple-solid { background-color: rgba(var(--semi-purple-5), 1); color: white; } .semi-tag-purple-light { background-color: rgba(var(--semi-purple-5), 0.15); color: rgba(var(--semi-purple-8), 1); } .semi-tag-red-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-red-4), 1); color: rgba(var(--semi-red-5), 1); } .semi-tag-red-solid { background-color: rgba(var(--semi-red-5), 1); color: white; } .semi-tag-red-light { background-color: rgba(var(--semi-red-5), 0.15); color: rgba(var(--semi-red-8), 1); } .semi-tag-teal-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-teal-4), 1); color: rgba(var(--semi-teal-5), 1); } .semi-tag-teal-solid { background-color: rgba(var(--semi-teal-5), 1); color: white; } .semi-tag-teal-light { background-color: rgba(var(--semi-teal-5), 0.15); color: rgba(var(--semi-teal-8), 1); } .semi-tag-violet-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-violet-4), 1); color: rgba(var(--semi-violet-5), 1); } .semi-tag-violet-solid { background-color: rgba(var(--semi-violet-5), 1); color: white; } .semi-tag-violet-light { background-color: rgba(var(--semi-violet-5), 0.15); color: rgba(var(--semi-violet-8), 1); } .semi-tag-yellow-ghost { background-color: transparent; border: 1px solid rgba(var(--semi-yellow-4), 1); color: rgba(var(--semi-yellow-5), 1); } .semi-tag-yellow-solid { background-color: rgba(var(--semi-yellow-5), 1); color: white; } .semi-tag-yellow-light { background-color: rgba(var(--semi-yellow-5), 0.15); color: rgba(var(--semi-yellow-8), 1); } .semi-tag-white-ghost { background-color: var(--semi-color-bg-4); border: 1px solid rgba(var(--semi-grey-2), 0.7); color: var(--semi-color-text-0); } .semi-tag-white-solid { background-color: var(--semi-color-bg-4); border: 1px solid rgba(var(--semi-grey-2), 0.7); color: var(--semi-color-text-0); } .semi-tag-white-light { background-color: var(--semi-color-bg-4); border: 1px solid rgba(var(--semi-grey-2), 0.7); color: var(--semi-color-text-0); } .semi-tag-white-ghost .semi-tag-close, .semi-tag-white-light .semi-tag-close, .semi-tag-white-solid .semi-tag-close { color: var(--semi-color-text-2); } .semi-tag-avatar-square, .semi-tag-avatar-circle { background-color: var(--semi-color-bg-4); border: 1px solid var(--semi-color-border); color: var(--semi-color-text-0); } .semi-rtl .semi-tag, .semi-portal-rtl .semi-tag { direction: rtl; } .semi-rtl .semi-tag-close, .semi-portal-rtl .semi-tag-close { padding-left: auto; padding-right: 4px; } .semi-rtl .semi-tag-closable, .semi-portal-rtl .semi-tag-closable { padding: 4px 8px 4px 4px; } .semi-rtl .semi-tag-avatar-square .semi-avatar, .semi-rtl .semi-tag-avatar-circle .semi-avatar, .semi-portal-rtl .semi-tag-avatar-square .semi-avatar, .semi-portal-rtl .semi-tag-avatar-circle .semi-avatar { margin-right: auto; margin-left: 4px; } .semi-rtl .semi-tag-avatar-square, .semi-portal-rtl .semi-tag-avatar-square { padding-right: auto; padding-left: 4px; } .semi-rtl .semi-tag-avatar-circle, .semi-portal-rtl .semi-tag-avatar-circle { padding: 2px 2px 2px 4px; } .semi-rtl .semi-tag-group, .semi-portal-rtl .semi-tag-group { direction: rtl; } .semi-rtl .semi-tag-group .semi-tag, .semi-portal-rtl .semi-tag-group .semi-tag { margin-right: auto; margin-left: 8px; } .semi-rtl .semi-tag-rest-group-popover, .semi-portal-rtl .semi-tag-rest-group-popover { direction: rtl; } .semi-rtl .semi-tag-rest-group-popover .semi-tag, .semi-portal-rtl .semi-tag-rest-group-popover .semi-tag { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type, .semi-portal-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type { margin-right: auto; margin-left: 0; } .semi-tagInput { background-color: var(--semi-color-fill-0); border: 1px transparent solid; border-radius: var(--semi-border-radius-small); display: inline-flex; font-weight: 400; width: 100%; box-sizing: border-box; } .semi-tagInput-hover { background-color: var(--semi-color-fill-1); border: 1px transparent solid; } .semi-tagInput-focus { background-color: var(--semi-color-fill-0); border: 1px var(--semi-color-focus-border) solid; } .semi-tagInput-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-tagInput-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-tagInput-warning.semi-tagInput-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-tagInput-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-tagInput-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-tagInput-error.semi-tagInput-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-tagInput-disabled { cursor: not-allowed; } .semi-tagInput-disabled .semi-tagInput-clearBtn, .semi-tagInput-disabled .semi-tagInput-prefix, .semi-tagInput-disabled .semi-tagInput-suffix { color: var(--semi-color-disabled-text); } .semi-tagInput-disabled .semi-tagInput-wrapper { cursor: not-allowed; } .semi-tagInput-disabled .semi-tagInput-wrapper-tag { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-tagInput-disabled .semi-tagInput-wrapper-input { cursor: not-allowed; } .semi-tagInput-disabled .semi-tagInput-wrapper-input::placeholder { color: var(--semi-color-disabled-text); } .semi-tagInput-wrapper { display: flex; flex-wrap: wrap; flex-grow: 1; align-items: center; padding-left: 4px; padding-right: 4px; overflow: hidden; } .semi-tagInput-wrapper-tag { margin-right: 4px; white-space: pre; } .semi-tagInput-wrapper-tag-size-small { margin-top: 1px; margin-bottom: 1px; } .semi-tagInput-wrapper-tag-size-default { margin-top: 2px; margin-bottom: 2px; } .semi-tagInput-wrapper-tag-size-large { margin-top: 3px; margin-bottom: 3px; } .semi-tagInput-wrapper-typo { font-size: 12px; } .semi-tagInput-wrapper-typo-disabled { color: var(--semi-color-disabled-text); } .semi-tagInput-wrapper-n { cursor: pointer; font-size: 12px; margin-right: 4px; color: var(--semi-color-text-0); padding-left: 8px; padding-right: 8px; } .semi-tagInput-wrapper-n-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tagInput-wrapper .semi-tagInput-wrapper-input { flex-grow: 1; width: min-content; min-width: 38px; border: none; outline: none; background-color: transparent; font-size: 14px; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input:hover { background-color: transparent; } .semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input { padding-left: 0; } .semi-tagInput-clearBtn { display: flex; justify-content: center; align-items: center; width: 32px; flex-shrink: 0; color: var(--semi-color-text-2); } .semi-tagInput-clearBtn:hover { cursor: pointer; color: var(--semi-color-primary-hover); } .semi-tagInput-clearBtn-invisible { visibility: hidden; } .semi-tagInput-prefix, .semi-tagInput-suffix { display: flex; justify-content: center; align-items: center; } .semi-tagInput-prefix-text, .semi-tagInput-suffix-text { margin: 0 12px; font-weight: 600; white-space: nowrap; } .semi-tagInput-prefix-icon, .semi-tagInput-suffix-icon { color: var(--semi-color-text-2); margin: 0 8px; } .semi-tagInput-prefix-text { color: var(--semi-color-text-2); } .semi-tagInput-suffix-text { color: var(--semi-color-text-1); } .semi-rtl .semi-tagInput, .semi-portal-rtl .semi-tagInput { direction: rtl; } .semi-rtl .semi-tagInput-wrapper-tag, .semi-portal-rtl .semi-tagInput-wrapper-tag { margin-left: 4px; margin-right: 0; } .semi-rtl .semi-tagInput-wrapper-input:not(:first-child) > input, .semi-portal-rtl .semi-tagInput-wrapper-input:not(:first-child) > input { padding-right: 0; } .semi-timepicker { display: inline-block; } .semi-timepicker-panel .semi-scrolllist-body { height: 252px; } .semi-timepicker-panel .semi-scrolllist-item, .semi-timepicker-panel .semi-scrolllist-item-wheel { flex: none; } .semi-timepicker-panel .semi-scrolllist-item-wheel, .semi-timepicker-panel .semi-scrolllist-item-wheel:not(:last-child) { border: none; } .semi-timepicker-panel-list-ampm { width: 72px; } .semi-timepicker-panel-list-hour { width: 64px; } .semi-timepicker-panel-list-minute { width: 64px; } .semi-timepicker-panel-list-second { width: 64px; } .semi-timepicker-range-panel .semi-timepicker-lists { display: flex; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--semi-border-radius-medium); } .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body { border-right: 2px solid var(--semi-color-border); } .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist { box-shadow: none; } .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist .semi-scrolllist-body, .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist .semi-scrolllist-header { padding: 0; } .semi-timepicker .semi-timepicker-input { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: var(--semi-border-radius-small); align-items: center; } .semi-timepicker .semi-input-readonly { cursor: pointer; } .semi-rtl .semi-timepicker, .semi-portal-rtl .semi-timepicker { direction: rtl; } .semi-rtl .semi-timepicker-panel, .semi-portal-rtl .semi-timepicker-panel { direction: rtl; } .semi-rtl .semi-timepicker-range, .semi-portal-rtl .semi-timepicker-range { direction: rtl; } .semi-rtl .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body, .semi-portal-rtl .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body { border-right: 0; border-left: 2px solid var(--semi-color-border); } .semi-timeline { margin: 0; padding: 8px; width: 100%; list-style: none; } .semi-timeline-item { position: relative; margin: 0; padding: 0 0 24px 0; list-style: none; } .semi-timeline-item-tail { position: absolute; top: 20px; left: 4px; height: calc(100% - 20px); border-left: 1px solid var(--semi-color-text-3); } .semi-timeline-item-head { position: absolute; top: 5px; width: 9px; height: 9px; border-radius: var(--semi-border-radius-circle); } .semi-timeline-item-head-ongoing { background-color: var(--semi-color-primary); } .semi-timeline-item-head-default { background-color: var(--semi-color-tertiary-light-active); } .semi-timeline-item-head-success { background-color: var(--semi-color-success); } .semi-timeline-item-head-warning { background-color: var(--semi-color-warning); } .semi-timeline-item-head-error { background-color: var(--semi-color-danger); } .semi-timeline-item-head-custom { position: absolute; display: flex; align-self: center; top: 10px; left: 5px; width: auto; height: auto; border: 0; border-radius: 0; transform: translate(-50%, -50%); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-ongoing { background-color: transparent; color: var(--semi-color-primary); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-success { background-color: transparent; color: var(--semi-color-success); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-warning { background-color: transparent; color: var(--semi-color-warning); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-error { background-color: transparent; color: var(--semi-color-danger); } .semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-default { background-color: transparent; color: var(--semi-color-tertiary-light-active); } .semi-timeline-item-content { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; margin: 0 0 0 25px; word-break: break-word; color: var(--semi-color-text-0); } .semi-timeline-item-content-extra, .semi-timeline-item-content-time { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); margin-top: 4px; } .semi-timeline-item:last-child .semi-timeline-item-tail { border-left: none; } .semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom { left: 50%; } .semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom { margin-left: 0; } .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head { margin-left: -4px; } .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content { left: calc(50% - 4px); width: calc(50% - 14px); text-align: left; } .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content { width: calc(50% - 20px); margin: 0; text-align: right; } .semi-timeline-center .semi-timeline-item-content-time { position: absolute; top: -2px; margin-left: calc(-40px - 100%); width: 100%; text-align: right; } .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom { left: calc(100% - 9px); } .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content { width: calc(100% - 28px); } .semi-rtl .semi-timeline, .semi-portal-rtl .semi-timeline { direction: rtl; } .semi-rtl .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-item-tail { left: auto; right: 4px; border-left: 0; border-right: 1px solid var(--semi-color-text-3); } .semi-rtl .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-item-head-custom { left: auto; right: 5px; transform: translate(50%, -50%); } .semi-rtl .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-item-content { margin: 0 25px 0 0; } .semi-rtl .semi-timeline-item:last-child .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-item:last-child .semi-timeline-item-tail { border-right: none; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-tail, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-center .semi-timeline-item-tail, .semi-rtl .semi-timeline-center .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-head-custom { left: auto; right: 50%; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-head { margin-left: 0; margin-right: -4px; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content { left: auto; right: calc(50% - 4px); text-align: right; } .semi-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content { text-align: left; } .semi-rtl .semi-timeline-center .semi-timeline-item-content-time, .semi-portal-rtl .semi-timeline-center .semi-timeline-item-content-time { margin-left: 0; margin-right: calc(-40px - 100%); text-align: left; } .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom { left: 0; right: calc(100% - 9px); } .semi-toast { pointer-events: none; } .semi-toast-wrapper { pointer-events: none; position: fixed; top: 0; width: 100%; text-align: center; z-index: 1010; } .semi-toast-content { pointer-events: all; box-shadow: var(--semi-shadow-elevated); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: var(--semi-color-bg-3); border-radius: var(--semi-border-radius-medium); padding: 12px 8px; display: inline-flex; align-items: flex-start; justify-content: center; margin: 12px; font-weight: 600; color: var(--semi-color-text-0); } .semi-toast-content .semi-toast-close-button { margin-top: -2px; height: 20px; } .semi-toast-content .semi-toast-content-text { margin-left: 12px; margin-right: 12px; text-align: left; } .semi-toast-light.semi-toast-warning .semi-toast-content { background-color: var(--semi-color-warning-light-default); border: 1px solid var(--semi-color-warning); } .semi-toast-light.semi-toast-success .semi-toast-content { background-color: var(--semi-color-success-light-default); border: 1px solid var(--semi-color-success); } .semi-toast-light.semi-toast-info .semi-toast-content { background-color: var(--semi-color-info-light-default); border: 1px solid var(--semi-color-info); } .semi-toast-light.semi-toast-error .semi-toast-content { background-color: var(--semi-color-danger-light-default); border: 1px solid var(--semi-color-danger); } .semi-toast .semi-toast-icon-warning { color: var(--semi-color-warning); } .semi-toast .semi-toast-icon-success { color: var(--semi-color-success); } .semi-toast .semi-toast-icon-info { color: var(--semi-color-info); } .semi-toast .semi-toast-icon-error { color: var(--semi-color-danger); } .semi-toast-rtl { direction: rtl; } .semi-toast-rtl .semi-toast-content .semi-toast-content-text { text-align: right; margin-left: 12px; margin-right: 12px; } @keyframes semi-tooltip-zoomIn { from { opacity: 0; transform: scale(0.8, 0.8); } 50% { opacity: 1; } } @keyframes semi-tooltip-bounceIn { from { opacity: 0; transform: scale(0.6, 0.6); } 70% { opacity: 1; transform: scale(1.01, 1.01); } to { opacity: 1; transform: scale(1, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } } @keyframes semi-tooltip-zoomOut { from { opacity: 1; } 60% { opacity: 0; transform: scale(0.8, 0.8); } to { opacity: 0; } } .semi-tooltip-wrapper { position: relative; background-color: rgba(var(--semi-grey-7), 1); color: var(--semi-color-bg-0); border-radius: var(--semi-border-radius-medium); padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; font-size: 14px; left: 0; top: 0; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; visibility: hidden; max-width: 240px; } .semi-tooltip-wrapper-show { visibility: visible; } .semi-tooltip-trigger { display: inline-block; width: auto; height: auto; } .semi-tooltip-with-arrow { display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .semi-tooltip-wrapper .semi-tooltip-icon-arrow { height: 7px; width: 24px; position: absolute; color: rgba(var(--semi-grey-7), 1); } .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow { left: 50%; transform: translateX(-50%); bottom: -6px; } .semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow { bottom: -6px; left: 6px; } .semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow { bottom: -6px; right: 6px; } .semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow { width: 7px; height: 24px; right: -6px; top: 5px; } .semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow { width: 7px; height: 24px; right: -6px; top: 50%; transform: translateY(-50%); } .semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow { width: 7px; height: 24px; right: -6px; bottom: 5px; } .semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow { width: 7px; height: 24px; left: -6px; top: 5px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow { width: 7px; height: 24px; left: -6px; top: 50%; transform: translateY(-50%) rotate(180deg); } .semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow { width: 7px; height: 24px; left: -6px; bottom: 5px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow { min-height: 34px; } .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow { top: -6px; left: 6px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow { top: -6px; left: 50%; transform: translateX(-50%) rotate(180deg); } .semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow { min-width: 36px; } .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow { right: 6px; top: -6px; transform: rotate(180deg); } .semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow, .semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow { min-width: 36px; } .semi-rtl .semi-tooltip-wrapper, .semi-portal-rtl .semi-tooltip-wrapper { direction: rtl; padding-right: 12px; padding-left: 12px; left: auto; right: 0; } .semi-transfer { background-color: var(--semi-color-bg-1); border: 1px solid var(--semi-color-border); border-radius: var(--semi-border-radius-medium); min-width: 402px; height: 400px; box-sizing: border-box; display: flex; } .semi-transfer-disabled .semi-transfer-header { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-transfer-disabled .semi-transfer-item { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-transfer-disabled .semi-transfer-item:hover { background-color: inherit; } .semi-transfer-disabled .semi-transfer-item:hover .semi-transfer-item-close-icon { visibility: hidden; } .semi-transfer-disabled .semi-transfer-item:active { background-color: inherit; } .semi-transfer-custom-panel { border: none; min-width: inherit; height: inherit; } .semi-transfer-header { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; height: 24px; margin-top: 12px; margin-right: 12px; margin-bottom: 8px; margin-left: 12px; color: var(--semi-color-text-2); } .semi-transfer-header-all { font-weight: 600; margin-left: 16px; } .semi-transfer-header .semi-button { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-transfer-item { min-height: 36px; box-sizing: border-box; padding-top: 8px; padding-right: 9px; padding-bottom: 8px; padding-left: 12px; user-select: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; color: var(--semi-color-text-1); cursor: pointer; } .semi-transfer-item:hover { background-color: var(--semi-color-fill-0); } .semi-transfer-item:active { background-color: var(--semi-color-fill-1); } .semi-transfer-item-disabled { cursor: not-allowed; } .semi-transfer-item-disabled:hover { background-color: inherit; } .semi-transfer-item .semi-transfer-item-close-icon { font-size: 12px; cursor: pointer; visibility: hidden; color: var(--semi-color-text-2); } .semi-transfer-left { width: 50%; border-right: 1px solid var(--semi-color-border); display: flex; flex-direction: column; } .semi-transfer-left-list { overflow: auto; flex-grow: 1; } .semi-transfer-left-empty { height: 36px; } .semi-transfer-left .semi-spin { width: 100%; flex-grow: 1; } .semi-transfer-right { width: 50%; display: flex; flex-direction: column; position: relative; } .semi-transfer-right-header { margin-top: 12px; margin-bottom: 0; height: 32px; flex-shrink: 0; } .semi-transfer-right-list { overflow: auto; flex-grow: 1; } .semi-transfer-right-item { color: var(--semi-color-text-0); cursor: auto; } .semi-transfer-right-item:hover .semi-transfer-item-close-icon { flex-shrink: 0; visibility: visible; cursor: pointer; } .semi-transfer-right-item:hover .semi-transfer-item-close-icon.semi-transfer-item-close-icon-disabled { visibility: hidden; } .semi-transfer-right-item-text { flex: 1; word-break: break-all; } .semi-transfer-right-item-drag-handler { margin-right: 4px; flex-shrink: 0; } .semi-transfer-right-empty { position: absolute; height: 100%; } .semi-transfer-empty { width: 100%; display: flex; justify-content: center; align-items: center; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); } .semi-transfer-filter { margin-top: 12px; margin-right: 12px; margin-bottom: 0; margin-left: 12px; } .semi-transfer-group-title { color: var(--semi-color-text-2); padding-left: 12px; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 28px; display: flex; align-items: center; } .semi-rtl .semi-transfer, .semi-portal-rtl .semi-transfer { direction: rtl; } .semi-rtl .semi-transfer-header-all, .semi-portal-rtl .semi-transfer-header-all { margin-left: 0; margin-right: 16px; } .semi-rtl .semi-transfer-item, .semi-portal-rtl .semi-transfer-item { padding-left: 9px; padding-right: 12px; } .semi-rtl .semi-transfer-left, .semi-portal-rtl .semi-transfer-left { border-right: 0; border-left: 1px solid var(--semi-color-border); } .semi-rtl .semi-transfer-group-title, .semi-portal-rtl .semi-transfer-group-title { padding-left: 0; padding-right: 12px; } .semi-tree { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; height: 32px; line-height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-block; vertical-align: middle; position: relative; cursor: pointer; } .semi-tree:hover { background-color: var(--semi-color-fill-1); } .semi-tree-focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-tree-search-wrapper { padding: 8px 12px; } .semi-tree-wrapper { display: flex; flex-direction: column; } .semi-tree-option-list { overflow-x: hidden; overflow-y: auto; box-sizing: border-box; flex: 1; padding: 8px 0; } .semi-tree-option-list ul, .semi-tree-option-list li { list-style-type: none; padding: 0; margin: 0; } .semi-tree-option-list li.semi-tree-option { box-sizing: border-box; padding-top: 4px; padding-bottom: 4px; } .semi-tree-option-list li > .semi-tree-option-label { list-style-type: none; padding: 0; } .semi-tree-option-list .semi-tree-option-expand-icon, .semi-tree-option-list .semi-tree-option-empty-icon { box-sizing: border-box; width: 12px; color: var(--semi-color-text-2); margin-right: 8px; display: flex; flex-shrink: 0; } .semi-tree-option-list .semi-tree-option { display: flex; align-items: center; cursor: pointer; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-break: break-word; color: var(--semi-color-text-0); position: relative; } .semi-tree-option-list .semi-tree-option-label { display: flex; align-items: center; } .semi-tree-option-list .semi-tree-option-label > .semi-icon { margin-right: 8px; } .semi-tree-option-list .semi-tree-option-label .semi-checkbox { margin-right: 8px; } .semi-tree-option-list .semi-tree-option-label-text { display: block; flex: 1; } .semi-tree-option-list .semi-tree-option-ellipsis .semi-tree-option-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .semi-tree-option-list .semi-tree-option-label-text, .semi-tree-option-list .semi-tree-option .semi-checkbox-addon { border-radius: var(--semi-border-radius-small); } .semi-tree-option-list .semi-tree-option-label-text:hover, .semi-tree-option-list .semi-tree-option .semi-checkbox-addon:hover { background-color: var(--semi-color-fill-0); } .semi-tree-option-list .semi-tree-option-label-text:active, .semi-tree-option-list .semi-tree-option .semi-checkbox-addon:active { background-color: var(--semi-color-fill-1); } .semi-tree-option-list .semi-tree-option-item-icon { color: var(--semi-color-text-2); } .semi-tree-option-list .semi-tree-option-active .semi-tree-option-label-text { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list .semi-tree-option-active:hover, .semi-tree-option-list .semi-tree-option-active:active { background-color: transparent; } .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon { transform: rotate(270deg); } .semi-tree-option-list .semi-tree-option-highlight, .semi-tree-option-list .semi-tree-option-highlight .semi-checkbox-addon, .semi-tree-option-list .semi-tree-option-filtered, .semi-tree-option-list .semi-tree-option-filtered .semi-checkbox-addon { font-weight: 600; color: var(--semi-color-primary); } .semi-tree-option-list .semi-tree-option-hidden { display: none; } .semi-tree-option-list .semi-tree-option-disabled .semi-tree-option-label { color: var(--semi-color-disabled-text); } .semi-tree-option-list .semi-tree-option-fullLabel-draggable, .semi-tree-option-list .semi-tree-option-draggable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; } .semi-tree-option-list .semi-tree-option-draggable { box-sizing: border-box; border-left: 2px solid transparent; margin-top: -2px; } .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-label { border-top: 2px transparent solid; border-bottom: 2px transparent solid; } .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-top { border-top: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-bottom { border-bottom: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-top { border-top: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-bottom { border-bottom: 2px var(--semi-color-primary) solid; } .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable { border: 2px solid var(--semi-color-primary); } .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable .semi-tree-option-label, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable .semi-tree-option-label { border-top: 0; border-bottom: 0; } .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable + .semi-tree-option-selected::after, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable + .semi-tree-option-selected::after { content: ""; position: absolute; top: 0; left: -2px; bottom: 0; right: -1px; border-top: 2px solid var(--semi-color-primary); } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option { padding-top: 0px; padding-bottom: 0px; } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-label { padding: 3px 0; } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected { background-color: transparent; } .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active { background-color: transparent; } .semi-tree-option-list .semi-tree-option-level-1 { padding-left: 8px; } .semi-tree-option-list .semi-tree-option-level-2 { padding-left: 28px; } .semi-tree-option-list .semi-tree-option-level-3 { padding-left: 48px; } .semi-tree-option-list .semi-tree-option-level-4 { padding-left: 68px; } .semi-tree-option-list .semi-tree-option-level-5 { padding-left: 88px; } .semi-tree-option-list .semi-tree-option-level-6 { padding-left: 108px; } .semi-tree-option-list .semi-tree-option-level-7 { padding-left: 128px; } .semi-tree-option-list .semi-tree-option-level-8 { padding-left: 148px; } .semi-tree-option-list .semi-tree-option-level-9 { padding-left: 168px; } .semi-tree-option-list .semi-tree-option-level-10 { padding-left: 188px; } .semi-tree-option-list .semi-tree-option-level-11 { padding-left: 208px; } .semi-tree-option-list .semi-tree-option-level-12 { padding-left: 228px; } .semi-tree-option-list .semi-tree-option-level-13 { padding-left: 248px; } .semi-tree-option-list .semi-tree-option-level-14 { padding-left: 268px; } .semi-tree-option-list .semi-tree-option-level-15 { padding-left: 288px; } .semi-tree-option-list .semi-tree-option-level-16 { padding-left: 308px; } .semi-tree-option-list .semi-tree-option-level-17 { padding-left: 328px; } .semi-tree-option-list .semi-tree-option-level-18 { padding-left: 348px; } .semi-tree-option-list .semi-tree-option-level-19 { padding-left: 368px; } .semi-tree-option-list .semi-tree-option-level-20 { padding-left: 388px; } .semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active { background-color: transparent; } .semi-tree-option-list .semi-tree-option-label-empty { padding-left: 0; justify-content: center; color: var(--semi-color-disabled-text); user-select: none; cursor: not-allowed; } .semi-tree-option-list-block .semi-tree-option:hover { background-color: var(--semi-color-fill-0); } .semi-tree-option-list-block .semi-tree-option:active { background-color: var(--semi-color-fill-1); } .semi-tree-option-list-block .semi-tree-option-label { flex: 1; } .semi-tree-option-list-block .semi-tree-option-active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-active:hover, .semi-tree-option-list-block .semi-tree-option-active:active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-active .semi-tree-option-label-text { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-expand-icon { flex-shrink: 0; box-sizing: content-box; } .semi-tree-option-list-block .semi-tree-option-expand-icon:hover { color: var(--semi-color-text-0); } .semi-tree-option-list-block .semi-tree-option-expand-icon:active { color: var(--semi-color-black); } .semi-tree-option-list-block .semi-tree-option-spin-icon { display: flex; color: var(--semi-color-primary); } .semi-tree-option-list-block .semi-tree-option-spin-icon svg { width: 12px; height: 12px; } .semi-tree-option-list-block .semi-tree-option-selected { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:active { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-selected .semi-checkbox-addon { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-selected:hover, .semi-tree-option-list-block .semi-tree-option-selected:active { background-color: var(--semi-color-primary-light-default); } .semi-tree-option-list-block .semi-tree-option-label-text, .semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon { padding: 0; border-radius: var(--semi-border-radius-small); } .semi-tree-option-list-block .semi-tree-option-label-text:hover, .semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:hover { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-label-text:active, .semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:active { background-color: transparent; } .semi-tree-option-list-block .semi-tree-option-label-text { width: 0; } .semi-tree-option-list-block .semi-tree-option-empty:hover, .semi-tree-option-list-block .semi-tree-option-empty:active { background-color: transparent; } .semi-rtl .semi-tree, .semi-popover-rtl .semi-tree { direction: rtl; } .semi-rtl .semi-tree-wrapper, .semi-popover-rtl .semi-tree-wrapper { direction: rtl; } .semi-rtl .semi-tree-option-list, .semi-popover-rtl .semi-tree-option-list { direction: rtl; } .semi-rtl .semi-tree-option-list .semi-tree-option-expand-icon, .semi-rtl .semi-tree-option-list .semi-tree-option-empty-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-expand-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-empty-icon { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon { transform: rotate(90deg); } .semi-rtl .semi-tree-option-list .semi-tree-option-level-1, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-1 { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-2, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-2 { padding-left: 0; padding-right: 28px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-3, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-3 { padding-left: 0; padding-right: 48px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-4, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-4 { padding-left: 0; padding-right: 68px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-5, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-5 { padding-left: 0; padding-right: 88px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-6, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-6 { padding-left: 0; padding-right: 108px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-7, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-7 { padding-left: 0; padding-right: 128px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-8, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-8 { padding-left: 0; padding-right: 148px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-9, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-9 { padding-left: 0; padding-right: 168px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-10, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-10 { padding-left: 0; padding-right: 188px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-11, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-11 { padding-left: 0; padding-right: 208px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-12, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-12 { padding-left: 0; padding-right: 228px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-13, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-13 { padding-left: 0; padding-right: 248px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-14, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-14 { padding-left: 0; padding-right: 268px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-15, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-15 { padding-left: 0; padding-right: 288px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-16, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-16 { padding-left: 0; padding-right: 308px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-17, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-17 { padding-left: 0; padding-right: 328px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-18, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-18 { padding-left: 0; padding-right: 348px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-19, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-19 { padding-left: 0; padding-right: 368px; } .semi-rtl .semi-tree-option-list .semi-tree-option-level-20, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-level-20 { padding-left: 0; padding-right: 388px; } .semi-rtl .semi-tree-option-list .semi-tree-option-label-empty, .semi-popover-rtl .semi-tree-option-list .semi-tree-option-label-empty { padding-left: auto; padding-right: 0; } .semi-rtl .semi-tree-option-list-block, .semi-popover-rtl .semi-tree-option-list-block { direction: rtl; } .semi-tree-select { box-sizing: border-box; border-radius: var(--semi-border-radius-small); border: 1px solid transparent; min-width: 80px; min-height: 32px; line-height: 32px; font-weight: 400; background-color: var(--semi-color-fill-0); display: inline-flex; align-items: center; position: relative; cursor: pointer; } .semi-tree-select:hover { background-color: var(--semi-color-fill-1); border: 1px solid inherit; } .semi-tree-select-focus { border: 1px solid var(--semi-color-focus-border); outline: 0; } .semi-tree-select-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-tree-select-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-tree-select-warning.semi-tree-select-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-tree-select-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-tree-select-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-tree-select-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-tree-select-error.semi-tree-select-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-tree-select-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-tree-select-disabled { cursor: not-allowed; user-select: none; background-color: var(--semi-color-disabled-fill); } .semi-tree-select-disabled:hover { background-color: var(--semi-color-disabled-fill); } .semi-tree-select-disabled .semi-tree-select-selection, .semi-tree-select-disabled .semi-tree-select-selection-placeholder { color: var(--semi-color-disabled-text); cursor: not-allowed; } .semi-tree-select-disabled .semi-tree-select-arrow, .semi-tree-select-disabled .semi-tree-select-prefix, .semi-tree-select-disabled .semi-tree-select-suffix { color: var(--semi-color-disabled-text); } .semi-tree-select-disabled .semi-tag { color: var(--semi-color-disabled-text); background-color: transparent; } .semi-tree-select-selection { font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; height: 100%; display: inline-flex; align-items: center; flex-wrap: wrap; flex-grow: 1; overflow: hidden; padding-left: 12px; padding-right: 0; cursor: pointer; color: var(--semi-color-text-0); } .semi-tree-select-selection-placeholder { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--semi-color-text-2); } .semi-tree-select-selection .semi-tag-group { height: inherit; display: inline-flex; align-items: center; flex-wrap: wrap; } .semi-tree-select-selection .semi-tag { margin: 1px 2px; } .semi-tree-select-selection-TriggerSearchItem { position: absolute; } .semi-tree-select-selection-TriggerSearchItem-placeholder { opacity: 0.6; } .semi-tree-select-selection-TriggerSearchItem-disabled { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper { width: 100%; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-tree-select-inputTrigger .semi-input-wrapper { background: transparent; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper { height: 100%; width: 100%; border: none; background-color: transparent; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper-focus { border: none; } .semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input { padding-left: 0; padding-right: 0; } .semi-tree-select-selection .semi-tagInput { border: hidden; background: transparent; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper { padding-left: 4px; padding-right: 4px; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper { height: 30px; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input { padding-left: 0; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-small { height: 22px; } .semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-large { height: 38px; } .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput { margin-left: -4px; } .semi-tree-select-multiple-tagInput-empty .semi-tagInput { margin-left: 4px; } .semi-tree-select-multiple { display: inline-flex; } .semi-tree-select-multiple .semi-tree-select-selection { padding-left: 4px; padding-right: 0; } .semi-tree-select-multiple .semi-tree-select-selection-placeholder { padding-left: 8px; } .semi-tree-select-small { min-height: 24px; line-height: 24px; } .semi-tree-select-large { min-height: 40px; line-height: 40px; } .semi-tree-select-arrow { display: inline-flex; align-items: center; height: 100%; justify-content: center; width: 32px; color: var(--semi-color-text-2); } .semi-tree-select-inset-label { display: inline; margin-right: 12px; font-weight: 600; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); flex-shrink: 0; white-space: nowrap; } .semi-tree-select.semi-tree-select-with-prefix { display: inline-flex; align-items: center; } .semi-tree-select-arrow, .semi-tree-select-clearbtn { display: inline-flex; align-items: center; height: 100%; justify-content: center; width: 32px; color: var(--semi-color-text-2); } .semi-tree-select-clearbtn:hover { color: var(--semi-color-primary-hover); } .semi-tree-select-clearbtn:active { color: var(--semi-color-primary-active); } .semi-tree-select-prefix, .semi-tree-select-suffix { display: inline; display: flex; justify-content: center; align-items: center; } .semi-tree-select-prefix-text, .semi-tree-select-suffix-text { margin: 0px 12px; } .semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon { color: var(--semi-color-text-2); margin: 0px 8px; } .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection { padding-right: 0px; } .semi-tree-select-prefix-search-wrapper, .semi-tree-select-suffix-search-wrapper { padding: 8px 12px; border-bottom: 1px solid var(--semi-color-fill-0); } .semi-tree-select-prefix-maxTagCount, .semi-tree-select-suffix-maxTagCount { color: var(--semi-color-text-2); font-size: 14px; } .semi-tree-select-prefix-popover, .semi-tree-select-suffix-popover { max-height: 300px; overflow: auto; } .semi-tree-select-popover .semi-tree-wrapper { height: 100%; display: flex; flex-direction: column; } .semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list { flex: 1; min-width: 230px; } .semi-tree-select-popover .semi-tree-wrapper .semi-tree-search-wrapper { border-bottom: 1px var(--semi-color-fill-0) solid; } .semi-rtl .semi-tree-select, .semi-portal-rtl .semi-tree-select { direction: rtl; } .semi-rtl .semi-tree-select .semi-tagInput .semi-input, .semi-portal-rtl .semi-tree-select .semi-tagInput .semi-input { padding-right: 0; } .semi-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput, .semi-portal-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput { margin-left: 0; margin-right: -4px; } .semi-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput, .semi-portal-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput { margin-left: 0; margin-right: 4px; } .semi-rtl .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-selection { padding-right: 12px; padding-left: 0; } .semi-rtl .semi-tree-select-multiple .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection { padding-left: 0; padding-right: 4px; } .semi-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder, .semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder { padding-left: 0; padding-right: 8px; } .semi-rtl .semi-tree-select-inset-label, .semi-portal-rtl .semi-tree-select-inset-label { margin-right: 0; margin-left: 12px; } .semi-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-portal-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection { padding-right: auto; padding-left: 0; } .semi-rtl .semi-tree-select-popover, .semi-portal-rtl .semi-tree-select-popover { direction: rtl; } .semi-typography { color: var(--semi-color-text-0); font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-typography.semi-typography-secondary { color: var(--semi-color-text-1); } .semi-typography.semi-typography-tertiary { color: var(--semi-color-text-2); } .semi-typography.semi-typography-quaternary { color: var(--semi-color-text-3); } .semi-typography.semi-typography-warning { color: var(--semi-color-warning); } .semi-typography.semi-typography-success { color: var(--semi-color-success); } .semi-typography.semi-typography-danger { color: var(--semi-color-danger); } .semi-typography.semi-typography-link { color: var(--semi-color-link); font-weight: 600; } .semi-typography.semi-typography-disabled { color: var(--semi-color-disabled-text); cursor: not-allowed; user-select: none; } .semi-typography.semi-typography-disabled.semi-typography-link { color: var(--semi-color-link); } .semi-typography-icon { margin-right: 4px; vertical-align: middle; color: inherit; } .semi-typography-small { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-typography code { border: 1px solid var(--semi-color-border); border-radius: 2px; color: var(--semi-color-text-2); background-color: var(--semi-color-fill-1); padding: 2px 4px; } .semi-typography mark { background-color: var(--semi-color-primary-light-default); } .semi-typography u { text-decoration: underline; text-decoration-skip-ink: auto; } .semi-typography del { text-decoration: line-through; } .semi-typography strong { font-weight: 600; } .semi-typography a { display: inline; color: var(--semi-color-link); cursor: pointer; text-decoration: none; } .semi-typography a:visited { color: var(--semi-color-link-visited); } .semi-typography a:hover { color: var(--semi-color-link-hover); } .semi-typography a:active { color: var(--semi-color-link-active); } .semi-typography a .semi-typography-link-underline:hover { border-bottom: 1px solid var(--semi-color-link-hover); margin-bottom: -1px; } .semi-typography a .semi-typography-link-underline:active { border-bottom: 1px solid var(--semi-color-link-active); margin-bottom: -1px; } .semi-typography-ellipsis-single-line { overflow: hidden; } .semi-typography-ellipsis-multiple-line { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .semi-typography-ellipsis-overflow-ellipsis { display: block; white-space: nowrap; text-overflow: ellipsis; } .semi-typography-ellipsis-expand { display: inline; margin-left: 8px; } .semi-typography-action-copy { display: inline-flex; vertical-align: text-bottom; padding: 0; margin-left: 4px; } .semi-typography a.semi-typography-action-copy-icon { display: inline-flex; } .semi-typography-action-copied { display: inline-flex; padding: 0; margin-left: 4px; color: var(--semi-color-text-2); } .semi-typography-action-copied .semi-icon { vertical-align: text-bottom; color: var(--semi-color-success); } .semi-typography-paragraph { margin: 0; } h1.semi-typography, .semi-typography-h1.semi-typography { font-size: 32px; line-height: 44px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h2.semi-typography, .semi-typography-h2.semi-typography { font-size: 28px; line-height: 40px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h3.semi-typography, .semi-typography-h3.semi-typography { font-size: 24px; line-height: 32px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h4.semi-typography, .semi-typography-h4.semi-typography { font-size: 20px; line-height: 28px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h5.semi-typography, .semi-typography-h5.semi-typography { font-size: 18px; line-height: 24px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } h6.semi-typography, .semi-typography-h6.semi-typography { font-size: 16px; line-height: 22px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin: 0; } p.semi-typography-extended, .semi-typography-paragraph.semi-typography-extended { line-height: 24px; } .semi-rtl .semi-typography, .semi-portal-rtl .semi-typography { direction: rtl; } .semi-rtl .semi-typography-link a, .semi-rtl .semi-typography a, .semi-portal-rtl .semi-typography-link a, .semi-portal-rtl .semi-typography a { display: inline-block; } .semi-rtl .semi-typography-icon, .semi-portal-rtl .semi-typography-icon { margin-right: auto; margin-left: 4px; } .semi-rtl .semi-typography-ellipsis-expand, .semi-portal-rtl .semi-typography-ellipsis-expand { margin-left: auto; } .semi-rtl .semi-typography-action-copy, .semi-portal-rtl .semi-typography-action-copy { margin-left: auto; margin-right: 4px; } .semi-rtl .semi-typography-action-copied, .semi-portal-rtl .semi-typography-action-copied { margin-left: auto; margin-right: 4px; } .semi-upload { display: flex; flex-wrap: wrap; } .semi-upload-disabled { cursor: not-allowed; } .semi-upload-disabled .semi-upload-file-card { cursor: not-allowed; } .semi-upload-disabled .semi-upload-file-card-close { cursor: not-allowed; } .semi-upload-disabled .semi-upload-drag-area { border: none; cursor: not-allowed; } .semi-upload-disabled .semi-upload-drag-area:hover { background-color: var(--semi-color-tertiary-light-default); } .semi-upload-disabled .semi-upload-drag-area-main-text, .semi-upload-disabled .semi-upload-drag-area-sub-text, .semi-upload-disabled .semi-upload-drag-area-icon { cursor: not-allowed; color: var(--semi-color-disabled-text); } .semi-upload-hidden-input { display: none; } .semi-upload-hidden-input-replace { display: none; } .semi-upload-add { display: flex; align-items: center; } .semi-upload[x-prompt-pos=right] .semi-upload-add { display: inline-flex; } .semi-upload[x-prompt-pos=right] .semi-upload-prompt { display: inline-flex; } .semi-upload[x-prompt-pos=bottom] .semi-upload-add { display: flex; } .semi-upload[x-prompt-pos=bottom] .semi-upload-prompt { display: flex; flex-basis: 100%; } .semi-upload[x-prompt-pos=bottom] .semi-upload-file-list { flex-basis: 100%; } .semi-upload[x-prompt-pos=left] .semi-upload-add { display: inline-flex; } .semi-upload[x-prompt-pos=left] .semi-upload-prompt { display: inline-flex; order: -1; } .semi-upload[x-prompt-pos=left] .semi-upload-file-list { order: 2; } .semi-upload-file-list { flex-basis: 100%; flex-shrink: 0; display: block; margin-top: 8px; margin-bottom: 8px; } .semi-upload-file-list-main { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; margin-bottom: 8px; } .semi-upload-file-list-main p { display: flex; align-items: center; } .semi-upload-file-list-title { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-text-2); margin-bottom: 4px; } .semi-upload-file-list-title-choosen { margin-right: 8px; } .semi-upload-file-list-title-clear { cursor: pointer; color: var(--semi-color-primary); } .semi-upload-file-card { border-radius: var(--semi-border-radius-medium); display: inline-flex; align-items: center; justify-content: space-between; height: 52px; width: 250px; background-color: var(--semi-color-fill-0); cursor: pointer; } .semi-upload-file-card:hover { background-color: var(--semi-color-fill-1); } .semi-upload-file-card a { text-decoration: none; } .semi-upload-file-card-preview { height: 36px; width: 36px; color: var(--semi-color-text-2); margin: 8px; display: flex; justify-content: center; align-items: center; border-radius: var(--semi-border-radius-small); flex-shrink: 0; } .semi-upload-file-card-preview img { width: 36px; height: 36px; object-fit: cover; } .semi-upload-file-card-preview-placeholder { background-color: rgba(var(--semi-grey-3), 1); color: rgba(var(--semi-white), 1); } .semi-upload-file-card-show-pointer { cursor: pointer; } .semi-upload-file-card-info { display: flex; align-items: center; } .semi-upload-file-card-info-main { display: flex; flex-wrap: wrap; flex: 1; } .semi-upload-file-card-info-main-text { display: flex; align-items: center; flex-basis: 100%; } .semi-upload-file-card-info-main-control { display: flex; } .semi-upload-file-card-info-name { width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; color: var(--semi-color-text-0); } .semi-upload-file-card-info-size { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; margin-left: 8px; color: var(--semi-color-text-2); margin-top: 1px; } .semi-upload-file-card-info-replace { display: inline-flex; margin-left: 8px; color: var(--semi-color-text-2); } .semi-upload-file-card-info-validate-message { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; color: var(--semi-color-text-0); } .semi-upload-file-card-info-retry { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--semi-color-primary); cursor: pointer; margin-left: 8px; } .semi-upload-file-card-info .semi-progress { flex-basis: 100%; margin-top: 4px; } .semi-upload-file-card-close { margin-left: 8px; margin-right: 8px; flex-shrink: 0; } .semi-upload-file-card-replace { margin-left: 8px; width: 24px; flex-shrink: 0; } .semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error { font-size: 11px; margin-right: 2px; } .semi-upload-file-card-icon-error { position: relative; top: -1px; } .semi-upload-file-card-icon-loading .semi-spin-wrapper svg { height: 11px; width: 11px; } .semi-upload-file-card-fail { background-color: var(--semi-color-danger-light-default); } .semi-upload-file-card-fail:hover { background-color: var(--semi-color-danger-light-hover); } .semi-upload-file-card-fail .semi-upload-file-card-info-validate-message { color: var(--semi-color-danger); } .semi-upload-picture { display: flex; } .semi-upload-picture[x-prompt-pos=bottom] { flex-direction: column; } .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt { order: 1; } .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt { order: 1; } .semi-upload-picture-add { background-color: var(--semi-color-fill-0); height: 96px; width: 96px; box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; border: 2px dashed var(--semi-color-border); color: var(--semi-color-tertiary); border-radius: var(--semi-border-radius-small); cursor: pointer; } .semi-upload-picture-add:hover { background-color: var(--semi-color-fill-1); } .semi-upload-picture-add:active { background-color: var(--semi-color-fill-2); } .semi-upload-picture-add-disabled { cursor: not-allowed; } .semi-upload-picture-add-disabled:hover { background-color: var(--semi-color-fill-0); } .semi-upload-picture-add-disabled:active { background-color: var(--semi-color-fill-0); } .semi-upload-picture-file-list { flex-basis: inherit; margin-top: 0; margin-bottom: 0; } .semi-upload-picture-file-card { display: flex; align-items: center; justify-content: center; height: 96px; width: 96px; border-radius: var(--semi-border-radius-small); position: relative; overflow: hidden; } .semi-upload-picture-file-card img { height: 96px; width: 96px; object-fit: cover; border-radius: var(--semi-border-radius-small); } .semi-upload-picture-file-card-close { visibility: hidden; display: inline-flex; position: absolute; top: 8px; right: 8px; border-radius: var(--semi-border-radius-circle); cursor: pointer; transition: all 0s; } .semi-upload-picture-file-card-icon-close { font-size: 16px; color: var(--semi-color-white); } .semi-upload-picture-file-card::before { visibility: hidden; background-color: var(--semi-color-overlay-bg); content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .semi-upload-picture-file-card-retry { visibility: hidden; background-color: var(--semi-color-white); width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--semi-color-primary); border-radius: var(--semi-border-radius-circle); display: flex; align-items: center; justify-content: center; cursor: pointer; } .semi-upload-picture-file-card-icon-retry { transform: scale(-1, 1); font-size: 13px; } .semi-upload-picture-file-card-replace { visibility: hidden; display: inline-flex; position: absolute; cursor: pointer; top: 50%; left: 50%; color: var(--semi-color-white); transform: translate3D(-50%, -50%, 0); } .semi-upload-picture-file-card-preview { visibility: hidden; display: inline-flex; position: absolute; cursor: pointer; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); } .semi-upload-picture-file-card-pic-info { display: inline-flex; box-sizing: border-box; justify-content: space-between; align-items: center; position: absolute; width: 100%; height: 24px; padding: 0 10px; bottom: 0; left: 0; color: var(--semi-color-white); font-size: 12px; font-weight: 600; background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%); } .semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error { position: absolute; bottom: 6px; right: 6px; color: var(--semi-color-danger); } .semi-upload-picture-file-card-icon-loading { font-size: 14px; } .semi-upload-picture-file-card-show-pointer { cursor: pointer; } .semi-upload-picture-file-card-error { outline: 1px solid var(--semi-color-danger); } .semi-upload-picture-file-card:hover::before { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry { visibility: visible; } .semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview { visibility: visible; } .semi-upload-picture-file-card-uploading::before { visibility: visible; } .semi-upload-picture-file-card .semi-progress-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .semi-upload-drag-area { border-radius: var(--semi-border-radius-small); border: 2px dashed var(--semi-color-border); width: 100%; padding: 12px; background-color: var(--semi-color-tertiary-light-default); display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; } .semi-upload-drag-area:hover { background-color: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary); } .semi-upload-drag-area-custom { border: none; padding: 0; background-color: inherit; } .semi-upload-drag-area-custom:hover { background-color: inherit; } .semi-upload-drag-area-legal { background-color: var(--semi-color-primary-light-default); border-color: var(--semi-color-primary); } .semi-upload-drag-area-legal .semi-upload-drag-area-sub-text { display: none; } .semi-upload-drag-area-icon { color: var(--semi-color-primary); } .semi-upload-drag-area-text { text-align: center; } .semi-upload-drag-area-main-text { cursor: pointer; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; margin-bottom: 4px; } .semi-upload-drag-area-sub-text { cursor: pointer; font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; } .semi-upload-drag-area-tips { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .semi-upload-drag-area-tips-legal { color: var(--semi-color-primary); } .semi-upload-validate-message { flex-basis: 100%; flex-shrink: 0; display: block; color: var(--semi-color-danger); } .semi-rtl .semi-upload, .semi-portal-rtl .semi-upload { direction: rtl; } .semi-rtl .semi-upload-file-list-title-choosen, .semi-portal-rtl .semi-upload-file-list-title-choosen { margin-right: 0; margin-left: 8px; } .semi-rtl .semi-upload-file-list-title-choosen, .semi-rtl .semi-upload-file-list-title-clear, .semi-portal-rtl .semi-upload-file-list-title-choosen, .semi-portal-rtl .semi-upload-file-list-title-clear { display: inline-block; } .semi-rtl .semi-upload-file-card-info-size, .semi-portal-rtl .semi-upload-file-card-info-size { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-upload-file-card-info-retry, .semi-portal-rtl .semi-upload-file-card-info-retry { margin-left: 0; margin-right: 8px; } .semi-rtl .semi-upload-file-card-icon-loading, .semi-rtl .semi-upload-file-card-icon-error, .semi-portal-rtl .semi-upload-file-card-icon-loading, .semi-portal-rtl .semi-upload-file-card-icon-error { margin-right: 0; margin-left: 2px; } .semi-rtl .semi-upload-picture-file-card-close, .semi-portal-rtl .semi-upload-picture-file-card-close { right: auto; left: 8px; } .semi-rtl .semi-upload-picture-file-card .semi-progress-circle, .semi-portal-rtl .semi-upload-picture-file-card .semi-progress-circle { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-rtl .semi-upload-picture-file-card-retry, .semi-portal-rtl .semi-upload-picture-file-card-retry { left: auto; right: 50%; transform: translate(50%, -50%); } .semi-rtl .semi-upload-picture-file-card-icon-loading, .semi-rtl .semi-upload-picture-file-card-icon-error, .semi-portal-rtl .semi-upload-picture-file-card-icon-loading, .semi-portal-rtl .semi-upload-picture-file-card-icon-error { right: 0; left: 6px; } .semi-icon { display: inline-block; font-style: normal; line-height: 0; text-align: center; text-transform: none; text-rendering: optimizeLegibility; fill: currentColor; } .semi-icon-extra-small { font-size: 8px; } .semi-icon-small { font-size: 12px; } .semi-icon-default { font-size: 16px; } .semi-icon-large { font-size: 20px; } .semi-icon-extra-large { font-size: 24px; } .semi-icon-spinning { animation: 0.6s linear infinite semi-icon-animation-rotate; } @keyframes semi-icon-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes semi-animation-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } .semi-button.semi-button-with-icon { display: inline-flex; align-items: center; } .semi-button.semi-button-with-icon .semi-button-content { display: flex; align-items: center; justify-content: center; } .semi-button.semi-button-loading { pointer-events: none; cursor: not-allowed; } .semi-button.semi-button-loading .semi-button-content > svg { width: 16px; height: 16px; animation: 0.6s linear infinite semi-animation-rotate; } .semi-button.semi-button-with-icon-only { padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px; justify-content: center; align-items: center; } .semi-button.semi-button-with-icon-only.semi-button-size-small { padding-left: 4px; padding-right: 4px; padding-top: 4px; padding-bottom: 4px; } .semi-button.semi-button-with-icon-only.semi-button-size-large { padding-left: 12px; padding-right: 12px; padding-top: 12px; padding-bottom: 12px; } .semi-button-content-left { margin-right: 8px; } .semi-button-content-right { margin-left: 8px; } .semi-rtl .semi-button, .semi-portal-rtl .semi-button { direction: rtl; padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-small, .semi-portal-rtl .semi-button-size-small { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-size-large, .semi-portal-rtl .semi-button-size-large { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group, .semi-portal-rtl .semi-button-group { direction: rtl; } .semi-rtl .semi-button-group > .semi-button, .semi-portal-rtl .semi-button-group > .semi-button { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content { padding-left: 16px; padding-right: 16px; } .semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only { padding-left: 0; padding-right: 0; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-group > .semi-button:first-child, .semi-portal-rtl .semi-button-group > .semi-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--semi-border-radius-small); border-bottom-right-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content, .semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content { border-left: 1px var(--semi-color-border) solid; border-right: 0; } .semi-rtl .semi-button-group > .semi-button:last-child, .semi-portal-rtl .semi-button-group > .semi-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--semi-border-radius-small); border-bottom-left-radius: var(--semi-border-radius-small); } .semi-rtl .semi-button.semi-button-with-icon-only, .semi-portal-rtl .semi-button.semi-button-with-icon-only { padding-left: 8px; padding-right: 8px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small { padding-left: 4px; padding-right: 4px; } .semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large, .semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-button-content-left, .semi-portal-rtl .semi-button-content-left { margin-left: 8px; margin-right: 0; } .semi-rtl .semi-button-content-right, .semi-portal-rtl .semi-button-content-right { margin-right: 8px; margin-left: 0; } .semi-input-textarea-wrapper { box-sizing: border-box; display: inline-block; position: relative; width: 100%; border: 1px transparent solid; border-radius: var(--semi-border-radius-small); vertical-align: bottom; background-color: var(--semi-color-fill-0); } .semi-input-textarea-wrapper:hover { background-color: var(--semi-color-fill-1); } .semi-input-textarea-wrapper-focus { background-color: var(--semi-color-fill-0); border: 1px var(--semi-color-focus-border) solid; } .semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active { background-color: var(--semi-color-fill-0); } .semi-input-textarea-wrapper:active { background-color: var(--semi-color-fill-2); } .semi-input-textarea-wrapper .semi-input-clearbtn { position: absolute; top: 0; min-width: 24px; color: var(--semi-color-text-2); right: 4px; height: 32px; } .semi-input-textarea-wrapper .semi-input-clearbtn > svg { pointer-events: none; } .semi-input-textarea-wrapper .semi-input-clearbtn:hover { cursor: pointer; } .semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon { color: var(--semi-color-primary-hover); } .semi-input-textarea-wrapper .semi-input-clearbtn-hidden { visibility: hidden; } .semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: var(--semi-color-disabled-fill); } .semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover { background-color: var(--semi-color-disabled-fill); } .semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder { color: var(--semi-color-disabled-text); } .semi-input-textarea-wrapper-readonly { cursor: text; } .semi-input-textarea-wrapper-error { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger-light-default); } .semi-input-textarea-wrapper-error:hover { background-color: var(--semi-color-danger-light-hover); border-color: var(--semi-color-danger-light-hover); } .semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus { background-color: var(--semi-color-danger-light-default); border-color: var(--semi-color-danger); } .semi-input-textarea-wrapper-error:active { background-color: var(--semi-color-danger-light-active); border-color: var(--semi-color-danger-light-active); } .semi-input-textarea-wrapper-warning { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning-light-default); } .semi-input-textarea-wrapper-warning:hover { background-color: var(--semi-color-warning-light-hover); border-color: var(--semi-color-warning-light-hover); } .semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus { background-color: var(--semi-color-warning-light-default); border-color: var(--semi-color-warning); } .semi-input-textarea-wrapper-warning:active { background-color: var(--semi-color-warning-light-active); border-color: var(--semi-color-warning-light-active); } .semi-input-textarea { position: relative; resize: none; padding: 5px 12px; box-shadow: none; font-size: 14px; line-height: 20px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: transparent; border: 0 solid transparent; vertical-align: bottom; width: 100%; outline: none; cursor: text; box-sizing: border-box; color: var(--semi-color-text-0); } .semi-input-textarea:hover { border-color: transparent; } .semi-input-textarea::placeholder { color: var(--semi-color-text-2); } .semi-input-textarea-showClear { padding-right: 36px; } .semi-input-textarea-disabled, .semi-input-textarea-readonly { cursor: not-allowed; color: var(--semi-color-disabled-text); background-color: transparent; } .semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover { background-color: transparent; } .semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder { color: var(--semi-color-disabled-text); } .semi-input-textarea-readonly { cursor: text; } .semi-input-textarea-autosize { overflow: hidden; } .semi-input-textarea-counter { font-size: 12px; line-height: 16px; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; flex-direction: column; justify-content: center; padding: 3px 12px 5px 12px; min-height: 24px; text-align: right; color: var(--semi-color-text-2); } .semi-input-textarea-counter-exceed { color: var(--semi-color-danger); } .semi-rtl .semi-input-wrapper, .semi-portal-rtl .semi-input-wrapper { direction: rtl; } .semi-rtl .semi-input-wrapper__with-prefix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input { padding-left: auto; padding-right: 0; } .semi-rtl .semi-input-wrapper__with-suffix .semi-input, .semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input { padding-right: auto; padding-left: 0; } .semi-rtl .semi-input, .semi-portal-rtl .semi-input { padding-left: 12px; padding-right: 12px; } .semi-rtl .semi-input-inset-label, .semi-portal-rtl .semi-input-inset-label { margin-right: auto; margin-left: 12px; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, .semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon { margin-left: auto; margin-right: 0; } .semi-rtl .semi-input-append, .semi-portal-rtl .semi-input-append { border-left: 0; border-right: 1px transparent solid; } .semi-rtl .semi-input-prepend, .semi-portal-rtl .semi-input-prepend { border-right: 0; border-left: 1px transparent solid; } .semi-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after, .semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after { right: auto; left: -1px; } .semi-rtl .semi-input-textarea-wrapper, .semi-portal-rtl .semi-input-textarea-wrapper { direction: rtl; } .semi-rtl .semi-input-textarea-counter, .semi-portal-rtl .semi-input-textarea-counter { text-align: left; } .semi-rtl .semi-input-textarea-showClear, .semi-portal-rtl .semi-input-textarea-showClear { padding-right: 0; padding-left: 36px; }