oa/public/static/assets/mbui/css/mbui.css

@import url("../../icon/iconfont.css");
:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f0f1f0;
  --color-gray-200: #eeeeee;
  --color-gray-300: #cccccc;
  --color-gray-400: #9B9B9B;
  --color-gray-500: #666666;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;
  
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
  
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
  
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  
  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef3c7;
  --color-yellow-200: #fde68a;
  --color-yellow-300: #fcd34d;
  --color-yellow-400: #fbbf24;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #d97706;
  --color-yellow-700: #b45309;
  --color-yellow-800: #92400e;
  --color-yellow-900: #78350f;
  --color-yellow-950: #451a03;
  
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
  
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  
  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;
  --color-pink-950: #500724;
  
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
  
  --color-black: #000;
  --color-white: #fff;
  --color-body: #F2F3F5;
  --black-shadow: rgba(0,0,0,.72);
  --white-shadow: rgba(255,255,255,.72);
  
  --xs: 2px;
  --sm: 4px;
  --md: 6px;
  --lg: 8px;
  --xl: 10px;
  --2xl: 12px;
  --3xl: 16px;
  --4xl: 20px;
  --5xl: 24px;
  --6xl: 30px;
  
  --shadow: 0 1px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --shadow-md: 0 2px 6px -1px rgba(0, 0, 0, .2), 0 1px 4px -2px rgba(0, 0, 0, .15);
  --shadow-lg: 0 4px 12px -4px rgba(0, 0, 0, .2), 0 4px 12px -4px rgba(0, 0, 0, .15);
  --shadow-xl: 0 6px 20px -6px rgba(0, 0, 0, .2), 0 8px 20px -6px rgba(0, 0, 0, .15);
  --shadow-2xl: 0 10px 30px -10px rgba(0, 0, 0, .4), 0 8px 20px -10px rgba(0, 0, 0, .3);
}
/*light dark*/
@media (prefers-color-scheme:dark) {
:root {
  --color-gray-50: #020617;
  --color-gray-100: #0f172a;
  --color-gray-200: #1e293b;
  --color-gray-300: #334155;
  --color-gray-400: #475569;
  --color-gray-500: #888888;
  --color-gray-600: #9B9B9B;
  --color-gray-700: #aaaaaa;
  --color-gray-800: #dddddd;
  --color-gray-900: #cccccc;
  --color-gray-950: #f0f0f0;
  
  --color-blue-50: #172554;
  --color-blue-100: #1e3a8a;
  --color-blue-200: #1e40af;
  --color-blue-300: #1d4ed8;
  --color-blue-400: #2563eb;
  --color-blue-500: #3b82f6;
  --color-blue-600: #60a5fa;
  --color-blue-700: #93c5fd;
  --color-blue-800: #bfdbfe;
  --color-blue-900: #dbeafe;
  --color-blue-950: #eff6ff;
  
  --color-cyan-950: #ecfeff;
  --color-cyan-900: #cffafe;
  --color-cyan-800: #a5f3fc;
  --color-cyan-700: #67e8f9;
  --color-cyan-600: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-400: #0891b2;
  --color-cyan-300: #0e7490;
  --color-cyan-200: #155e75;
  --color-cyan-100: #164e63;
  --color-cyan-50: #083344;
  
  --color-green-50: #052e16;
  --color-green-100: #14532d;
  --color-green-200: #166534;
  --color-green-300: #15803d;
  --color-green-400: #16a34a;
  --color-green-500: #22c55e;
  --color-green-600: #4ade80;
  --color-green-700: #86efac;
  --color-green-800: #bbf7d0;
  --color-green-900: #dcfce7;
  --color-green-950: #f0fdf4; 

  --color-lime-950: #f7fee7;
  --color-lime-900: #ecfccb;
  --color-lime-800: #d9f99d;
  --color-lime-700: #bef264;
  --color-lime-600: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-400: #65a30d;
  --color-lime-300: #4d7c0f;
  --color-lime-200: #3f6212;
  --color-lime-100: #365314;
  --color-lime-50: #1a2e05;
  
  --color-yellow-50: #451a03;
  --color-yellow-100: #78350f;
  --color-yellow-200: #92400e;
  --color-yellow-300: #b45309;
  --color-yellow-400: #d97706;
  --color-yellow-500: #f59e0b;
  --color-yellow-600: #fbbf24;
  --color-yellow-700: #fcd34d;
  --color-yellow-800: #fde68a;
  --color-yellow-900: #fef3c7;
  --color-yellow-950: #fffbeb;
  
  --color-orange-950: #fff7ed;
  --color-orange-900: #ffedd5;
  --color-orange-800: #fed7aa;
  --color-orange-700: #fdba74;
  --color-orange-600: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-400: #ea580c;
  --color-orange-300: #c2410c;
  --color-orange-200: #9a3412;
  --color-orange-100: #7c2d12;
  --color-orange-50: #431407;
  
  --color-red-50: #450a0a;
  --color-red-100: #7f1d1d;
  --color-red-200: #991b1b;
  --color-red-300: #b91c1c;
  --color-red-400: #dc2626;
  --color-red-500: #ef4444;
  --color-red-600: #f87171;
  --color-red-700: #fca5a5;
  --color-red-800: #fecaca;
  --color-red-900: #fee2e2;
  --color-red-950: #fef2f2;
  
  --color-pink-50: #500724;
  --color-pink-100: #831843;
  --color-pink-200: #9d174d;
  --color-pink-300: #be185d;
  --color-pink-400: #db2777;
  --color-pink-500: #ec4899;
  --color-pink-600: #f472b6;
  --color-pink-700: #f9a8d4;
  --color-pink-800: #fbcfe8;
  --color-pink-900: #fce7f3;
  --color-pink-950: #fdf2f8;
  
  --color-purple-50: #3b0764;
  --color-purple-100: #581c87;
  --color-purple-200: #6b21a8;
  --color-purple-300: #7e22ce;
  --color-purple-400: #9333ea;
  --color-purple-500: #a855f7;
  --color-purple-600: #c084fc;
  --color-purple-700: #d8b4fe;
  --color-purple-800: #e9d5ff;
  --color-purple-900: #f3e8ff;
  --color-purple-950: #faf5ff;
  
  --color-black: #ffffff;
  --color-white: #181818;
  --color-body: #111111;
  --black-shadow: rgba(255,255,255,.72);
  --white-shadow: rgba(0,0,0,.72);
 }
}

html,body {background: var(--color-body);margin:0; padding:0;height: 100%; width: 100%; background-origin: border-box;box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none; 
}
html {-webkit-text-size-adjust: 100%;}
body {font-size:16px; line-height: 1.5; color:var(--color-gray-900); font-family: -apple-system-font, Helvetica Neue, sans-serif; min-height: 100vh; overflow: auto;}
#root {-webkit-tap-highlight-color: transparent; width:100%;}
#app {max-width: 640px; min-width: 320px; margin-left: auto; margin-right: auto; min-height: 100vh; position: relative;}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,blockquote,p{padding:0; margin:0; user-select: none; box-sizing: border-box;}
table,td,tr,th{font-size:14px;}
img{vertical-align:top;border:0;}
ol,ul{list-style:none;}
li{list-style-type:none;}
h1,h2,h3,h4,h5,h6 {font-size:20px;}
address,code,em,th,s,i{font-weight:normal; font-style:normal;}
:before,:after{box-sizing: border-box;}

/*float*/
.l,.left{float:left;}
.r,.right{float:right;}
.clearfix {display: block;}
.clearfix:after {clear: both;content: "";display: block}

.flex{display:flex;}
.justify-between{-ms-flex-align: center;-ms-flex-pack: justify; -webkit-align-items: center; -webkit-justify-content: space-between; align-items: center; display: -ms-flexbox; display: -webkit-flex;  justify-content: space-between;}
.text-content{word-wrap: break-word;}
.center{text-align:center;}
/*display*/
.hide{display:none;}
.block{display:block;}

/*margin*/
.margin-2{margin: var(--xs);}
.margin-4{margin: var(--sm);}
.margin-6{margin: var(--md);}
.margin-8{margin: var(--lg);}
.margin-10{margin: var(--xl);}
.margin-12{margin: var(--2xl);}
.margin-16{margin: var(--3xl);}
.margin-20{margin: var(--4xl);}
.margin-24{margin: var(--5xl);}
.margin-30{margin: var(--6xl);}

.margin-2-t{margin-top: var(--xs);}
.margin-4-t{margin-top: var(--sm);}
.margin-6-t{margin-top: var(--md);}
.margin-8-t{margin-top: var(--lg);}
.margin-10-t{margin-top: var(--xl);}
.margin-12-t{margin-top: var(--2xl);}
.margin-16-t{margin-top: var(--3xl);}
.margin-20-t{margin-top: var(--4xl);}
.margin-24-t{margin-top: var(--5xl);}
.margin-30-t{margin-top: var(--6xl);}

.margin-2-r{margin-right: var(--xs);}
.margin-4-r{margin-right: var(--sm);}
.margin-6-r{margin-right: var(--md);}
.margin-8-r{margin-right: var(--lg);}
.margin-10-r{margin-right: var(--xl);}
.margin-12-r{margin-right: var(--2xl);}
.margin-16-r{margin-right: var(--3xl);}
.margin-20-r{margin-right: var(--4xl);}
.margin-24-r{margin-right: var(--5xl);}
.margin-30-r{margin-right: var(--6xl);}

.margin-2-b{margin-bottom: var(--xs);}
.margin-4-b{margin-bottom: var(--sm);}
.margin-6-b{margin-bottom: var(--md);}
.margin-8-b{margin-bottom: var(--lg);}
.margin-10-b{margin-bottom: var(--xl);}
.margin-12-b{margin-bottom: var(--2xl);}
.margin-16-b{margin-bottom: var(--3xl);}
.margin-20-b{margin-bottom: var(--4xl)}
.margin-24-b{margin-bottom: var(--5xl)}
.margin-30-b{margin-bottom: var(--6xl)}

.margin-2-l{margin-left: var(--xs);}
.margin-4-l{margin-left: var(--sm);}
.margin-6-l{margin-left: var(--md);}
.margin-8-l{margin-left: var(--lg);}
.margin-10-l{margin-left: var(--xl);}
.margin-12-l{margin-left: var(--2xl);}
.margin-16-l{margin-left: var(--3xl);}
.margin-20-l{margin-left: var(--4xl);}
.margin-24-l{margin-left: var(--5xl);}
.margin-30-l{margin-left: var(--6xl);}

.margin-2-lr{margin: 0 var(--xs);}
.margin-4-lr{margin: 0 var(--sm);}
.margin-6-lr{margin: 0 var(--md);}
.margin-8-lr{margin: 0 var(--lg);}
.margin-10-lr{margin: 0 var(--xl);}
.margin-12-lr{margin: 0 var(--2xl);}
.margin-16-lr{margin: 0 var(--3xl);}
.margin-20-lr{margin: 0 var(--4xl);}
.margin-24-lr{margin: 0 var(--5xl);}
.margin-30-lr{margin: 0 var(--6xl);}

.margin-2-tb{margin: var(--xs) 0;}
.margin-4-tb{margin: var(--sm) 0;}
.margin-6-tb{margin: var(--md) 0;}
.margin-8-tb{margin: var(--lg) 0;}
.margin-10-tb{margin: var(--xl) 0;}
.margin-12-tb{margin: var(--2xl) 0;}
.margin-16-tb{margin: var(--3xl) 0;}
.margin-20-tb{margin: var(--4xl) 0;}
.margin-24-tb{margin: var(--5xl) 0;}
.margin-30-tb{margin: var(--6xl) 0;}

/*padding*/
.padding-2{padding: var(--xs);}
.padding-4{padding: var(--sm);}
.padding-6{padding: var(--md);}
.padding-8{padding: var(--lg);}
.padding-10{padding: var(--xl);}
.padding-12{padding: var(--2xl);}
.padding-16{padding: var(--3xl);}
.padding-20{padding: var(--4xl);}
.padding-24{padding: var(--5xl);}
.padding-30{padding: var(--6xl);}

.padding-2-t{padding-top: var(--xs);}
.padding-4-t{padding-top: var(--sm);}
.padding-6-t{padding-top: var(--md);}
.padding-8-t{padding-top: var(--lg);}
.padding-10-t{padding-top: var(--xl);}
.padding-12-t{padding-top: var(--2xl);}
.padding-16-t{padding-top: var(--3xl);}
.padding-20-t{padding-top: var(--4xl);}
.padding-24-t{padding-top: var(--5xl);}
.padding-30-t{padding-top: var(--6xl);}

.padding-2-r{padding-right: var(--xs);}
.padding-4-r{padding-right: var(--sm);}
.padding-6-r{padding-right: var(--md);}
.padding-8-r{padding-right: var(--lg);}
.padding-10-r{padding-right: var(--xl);}
.padding-12-r{padding-right: var(--2xl);}
.padding-16-r{padding-right: var(--3xl);}
.padding-20-r{padding-right: var(--4xl);}
.padding-24-r{padding-right: var(--5xl);}
.padding-30-r{padding-right: var(--6xl);}

.padding-2-b{padding-bottom: var(--xs);}
.padding-4-b{padding-bottom: var(--sm);}
.padding-6-b{padding-bottom: var(--md);}
.padding-8-b{padding-bottom: var(--lg);}
.padding-10-b{padding-bottom: var(--xl);}
.padding-12-b{padding-bottom: var(--2xl);}
.padding-16-b{padding-bottom: var(--3xl);}
.padding-20-b{padding-bottom: var(--4xl)}
.padding-24-b{padding-bottom: var(--5xl)}
.padding-30-b{padding-bottom: var(--6xl)}

.padding-2-l{padding-left: var(--xs);}
.padding-4-l{padding-left: var(--sm);}
.padding-6-l{padding-left: var(--md);}
.padding-8-l{padding-left: var(--lg);}
.padding-10-l{padding-left: var(--xl);}
.padding-12-l{padding-left: var(--2xl);}
.padding-16-l{padding-left: var(--3xl);}
.padding-20-l{padding-left: var(--4xl);}
.padding-24-l{padding-left: var(--5xl);}
.padding-30-l{padding-left: var(--6xl);}

.padding-2-lr{padding: 0 var(--xs);}
.padding-4-lr{padding: 0 var(--sm);}
.padding-6-lr{padding: 0 var(--md);}
.padding-8-lr{padding: 0 var(--lg);}
.padding-10-lr{padding: 0 var(--xl);}
.padding-12-lr{padding: 0 var(--2xl);}
.padding-16-lr{padding: 0 var(--3xl);}
.padding-20-lr{padding: 0 var(--4xl);}
.padding-24-lr{padding: 0 var(--5xl);}
.padding-30-lr{padding: 0 var(--6xl);}

.padding-2-tb{padding: var(--xs) 0;}
.padding-4-tb{padding: var(--sm) 0;}
.padding-6-tb{padding: var(--md) 0;}
.padding-8-tb{padding: var(--lg) 0;}
.padding-10-tb{padding: var(--xl) 0;}
.padding-12-tb{padding: var(--2xl) 0;}
.padding-16-tb{padding: var(--3xl) 0;}
.padding-20-tb{padding: var(--4xl) 0;}
.padding-24-tb{padding: var(--5xl) 0;}
.padding-30-tb{padding: var(--6xl) 0;}

/*radius*/
.radius{border-radius: 50%}
.radius-2{border-radius: var(--xs)}
.radius-4{border-radius: var(--sm)}
.radius-6{border-radius: var(--md)}
.radius-8{border-radius: var(--lg)}
.radius-10{border-radius: var(--xl)}
.radius-12{border-radius: var(--2xl)}
.radius-16{border-radius: var(--3xl)}
.radius-20{border-radius: var(--4xl)}
.radius-24{border-radius: var(--5xl)}
.radius-30{border-radius: var(--6xl)}

/* 边框 */
.border{border-width: 1px; border-style: solid; border-color: var(--color-gray-300); color: var(--color-gray-500);}
.border-red{border-width: 1px; border-style: solid; border-color: var(--color-red-500)!important; color: var(--color-red-500)!important;}
.border-orange{border-width: 1px; border-style: solid; border-color: var(--color-orange-500)!important; color: var(--color-orange-500)!important;}
.border-yellow{border-width: 1px; border-style: solid; border-color: var(--color-yellow-500)!important; color: var(--color-yellow-500)!important;}
.border-green{border-width: 1px; border-style: solid; border-color: var(--color-green-500)!important; color:var(--color-green-500)!important;}
.border-lime{border-width: 1px; border-style: solid; border-color: var(--color-lime-500)!important; color:var(--color-lime-500)!important;}
.border-cyan{border-width: 1px; border-style: solid; border-color: var(--color-cyan-500)!important; color: var(--color-cyan-500)!important;}
.border-blue{border-width: 1px; border-style: solid; border-color: var(--color-blue-500)!important; color: var(--color-blue-500)!important;}
.border-purple{border-width: 1px; border-style: solid; border-color: var(--color-purple-500)!important; color: var(--color-purple-500)!important;}
.border-black{border-width: 1px; border-style: solid; border-color: var(--color-black-900)!important; color: var(--color-black-900)!important;}
.border-gray{border-width: 1px; border-style: solid; border-color:var(--color-gray-300)!important; color: var(--color-gray-400)!important;}

/* 背景颜色 */
.bg-red{background-color: var(--color-red-500)!important; color: var(--color-white)!important;}
.bg-orange{background-color: var(--color-orange-500)!important; color: var(--color-white)!important;}
.bg-yellow{background-color: var(--color-yellow-500)!important; color: var(--color-white)!important;}
.bg-green{background-color: var(--color-green-500)!important; color: var(--color-white)!important;}
.bg-lime{background-color: var(--color-lime-500)!important; color:var(--color-white)!important}
.bg-cyan{background-color: var(--color-cyan-500)!important; color: var(--color-white)!important;}
.bg-blue{background-color: var(--color-blue-500)!important; color: var(--color-white)!important;}
.bg-pink{background-color: var(--color-pink-500)!important; color: var(--color-white)!important;}
.bg-purple{background-color: var(--color-purple-500)!important; color: var(--color-white)!important;}
.bg-black{background-color: var(--color-black-500)!important; color: var(--color-white)!important;}
.bg-white{background-color: var(--color-white)!important; color: var(--color-gray-900)!important;}
.bg-gray{background-color: var(--color-gray-100)!important; color: var(--color-gray-500)!important;}

/* 文本颜色 */
.text-red{color: var(--color-red-500)!important;}
.text-orange{color: var(--color-orange-500)!important;}
.text-yellow{color: var(--color-yellow-500)!important;}
.text-green{color: var(--color-green-500)!important;}
.text-lime{color: var(--color-lime-500)!important;}
.text-cyan{color: var(--color-cyan-500)!important;}
.text-blue{color: var(--color-blue-500)!important;}
.text-pink{color: var(--color-pink-500)!important;}
.text-purple{color: var(--color-purple-500)!important;}
.text-black{color: var(--color-gray-900)!important;}
.text-white{color: var(--color-white)!important;}
.text-gray{color: var(--color-gray-400)!important;}
.text-grey{color: var(--color-gray-200)!important;}

/* 审核状态颜色 */
.check-status-color-0{color: var(--color-gray-600)!important;}
.check-status-color-1{color: var(--color-blue-500)!important;}
.check-status-color-2{color: var(--color-green-500)!important;}
.check-status-color-3{color: var(--color-red-500)!important;}
.check-status-color-4{color: var(--color-gray-400)!important;}
.check-status-color-5{color: var(--color-lime-500)!important;}
.check-status-color-6{color: var(--color-orange-500)!important;}
.check-status-color-7{color: var(--color-yellow-500)!important;}
.check-status-color-8{color: var(--color-purple-500)!important;}

/*font-size*/
.fn{font-weight:normal!important;}
.fb{font-weight:bold!important;}
.fs{font-style:normal!important;}
.f10{font-size:10px!important;}
.f12{font-size:12px!important;}
.f13{font-size:13px!important;}
.f14{font-size:14px!important;}
.f15{font-size:15px!important;}
.f16{font-size:16px!important;}
.f18{font-size:18px!important;}
.f20{font-size:20px!important;}
.f24{font-size:24px!important;}
.f28{font-size:28px!important;}

/*a*/
a{text-decoration:none;color: var(--color-gray-900)}
/*ellipsis*/
.line-limit-1,.line-limit-2,.line-limit-3,.line-limit-4,.line-limit-5{letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.line-limit-2{-webkit-line-clamp: 2;}
.line-limit-3{-webkit-line-clamp: 3;}
.line-limit-4{-webkit-line-clamp: 4;}
.line-limit-5{-webkit-line-clamp: 5;}

/*border-1-px*/
.border-top,.border-bottom,.border-left,.border-right{position:relative;}
.border-top:before,.border-left:before,.border-bottom:after,.border-right:after{content: " ";position: absolute; width: 200%; height: 0;pointer-events: none; transform: scale(0.5); transform-origin: 0 0;}
.border-top:before{border-top:1px solid var(--color-gray-300);top: 0; left: 0;}
.border-right:after{border-right:1px solid var(--color-gray-300);top: 0; right: 0;}
.border-bottom:after{border-bottom:1px solid var(--color-gray-300); bottom: 0; left: 0;}
.border-left:before{border-left:1px solid var(--color-gray-300);top: 0; left: 0;}

/*avatar*/
.avatar{align-items: center; aspect-ratio: 1/1; border-radius:4px; display: inline-flex; justify-content: center; overflow: hidden; width: 48px;height:48px;}
.avatar>img {margin: 0; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%;}
.avatar.sm{width: 36px;height:36px;}
.avatar.xs{width: 24px;height:24px;}
.avatar.lg{width: 60px;height:60px;}
.avatar.radius{border-radius:50%;}

/*mbui-btn*/
.mbui-btn{display: inline-block; vertical-align: middle; height: 42px; line-height: 42px; border: 1px solid transparent; padding: 0 16px;background-color: var(--color-blue-500); color: #f1f1f1; white-space: nowrap; text-align: center; font-size: 16px; border-radius: 4px; cursor: pointer; user-select: none;}
.mbui-btn:hover{opacity: 0.8; filter:alpha(opacity=80);}
.mbui-btn:active{opacity: 1; filter:alpha(opacity=100);}
.mbui-btn+.mbui-btn{margin-left: 10px;}
.mbui-btn-100{width:100%;}

/* 原始 */
.mbui-btn-primary{border-color: var(--color-gray-300); background: var(--color-gray-50); color: var(--color-gray-500);}
.mbui-btn-primary:hover{border-color: var(--color-gray-400); color: var(--color-gray-900);}
/* 百搭 */.mbui-btn-normal{background-color: var(--color-blue-500);}
/* 暖色 */.mbui-btn-warm{background-color: var(--color-yellow-500);}
/* 警告 */.mbui-btn-danger{background-color: var(--color-red-500);}
/* 常规 */.mbui-btn-green{background-color: var(--color-green-500);}
/* 选中 */.mbui-btn-checked{background-color: var(--color-lime-500);}
/* 禁用 */.mbui-btn-disabled, .mbui-btn-disabled:hover, .mbui-btn-disabled:active{border-color: var(--color-gray-300)!important; background-color:var(--color-gray-100)!important; color:var(--color-gray-300)!important; cursor: not-allowed !important; opacity: 1;}

/* 大型 */.mbui-btn.lg{height: 48px; line-height: 48px; padding: 0 20px; font-size: 18px;}
/* 中型 */.mbui-btn.md{height: 42px; line-height: 42px; padding: 0 16px; font-size: 16px;}
/* 小型 */.mbui-btn.sm{height: 32px; line-height: 32px; padding: 0 12px; font-size: 14px;}
/* 超小 */.mbui-btn.xs{height: 24px; line-height: 24px; padding: 0 6px; font-size: 12px;}


/* 圆角 */
.mbui-btn-radius{border-radius: 100px;}
.mbui-btn .mbui-icon{padding: 0 2px; vertical-align: middle\0; vertical-align: bottom;}

/* 按钮组 */
.mbui-btn-group{display: inline-block; vertical-align: middle; font-size: 0;}
.mbui-btn-group .mbui-btn{margin-left: 0!important; margin-right: 0!important; border-left: 1px solid rgba(255,255,255,.5); border-radius: 0;}
.mbui-btn-group .mbui-btn-primary{border-left: none;}
.mbui-btn-group .mbui-btn-primary:hover{border-color:var(--color-gray-300); color: var(--color-gray-500);}
.mbui-btn-group .mbui-btn:first-child{border-left: none; border-radius: 2px 0 0 2px;}
.mbui-btn-group .mbui-btn-primary:first-child{border-left: 1px solid var(--color-gray-300);}
.mbui-btn-group .mbui-btn:last-child{border-radius: 0 2px 2px 0;}
.mbui-btn-group .mbui-btn+.mbui-btn{margin-left: 0;}
.mbui-btn-group+.mbui-btn-group{margin-left: 10px;}

/*mbui-list*/
.mbui-list{padding: 10px 12px; vertical-align: middle; position: relative; align-items: center; background: var(--color-white); font-size: 16px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.mbui-list:before{content: " "; position: absolute; top: 0;left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-300);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.mbui-group .mbui-list:first-child:before {display:none}
.mbui-list-bd{display: block; color:var(--color-gray-400); width:120px; height: 24px; text-overflow: ellipsis; white-space: nowrap; flex: 1;}
.mbui-list-hd{width: 20px; height: 20px; margin-right: 14px; display: block;}
.mbui-list-ft{text-align: right; padding-left: 10px;}
.mbui-list-ft .mbui-badge{position: relative;top: -1px;}
.mbui-list-ft small{font-size: 16px; color: var(--color-gray-400);}
.mbui-list-ft-arrow{display: inline-block; width: 8px;height: 8px;margin-right: 2px; vertical-align:middle;
  border-bottom: solid 2px var(--color-gray-300);
  border-right: solid 2px var(--color-gray-300);
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);  
}
.mbui-list-ft-arrow-up{display: inline-block; width: 8px;height: 8px; margin-right: 2px; vertical-align:middle;
  border-top: solid 2px var(--color-gray-400);
  border-right: solid 2px var(--color-gray-400);
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);  
}
.mbui-list-ft-arrow-down{display: inline-block; width: 8px;height: 8px; margin-right: 2px; vertical-align:middle;
  border-bottom: solid 2px var(--color-gray-400);
  border-right: solid 2px var(--color-gray-400);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);  
}
a.mbui-list:active{background:var(--color-gray-100);}
a.mbui-list:active{background:var(--color-gray-100);}

/*tabbar*/
.tabbar-fixed{width: 100%; max-width: 480px; position: fixed; left: 50%; bottom: 0; z-index: 999;transform: translateX(-50%);}
.tabbar{display:flex;position:relative;z-index:500;background-color:var(--color-gray-100);}
.tabbar:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1px solid var(--color-gray-100);color:var(--color-gray-100);-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}
.tabbar-item{display:block;flex:1;padding:3px 0 6px;padding-bottom:calc(6px + constant(safe-area-inset-bottom));padding-bottom:calc(6px + env(safe-area-inset-bottom));font-size:0;color:var(--color-gray-500);text-align:center;-webkit-tap-highlight-color:var(--color-black)}
.tabbar-item:first-child{padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left)}
.tabbar-item:last-child{padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right)}
.tabbar-icon{display:inline-block;width:28px;height:28px;margin-bottom:8px}
.tabbar-icon img{width:100%;height:100%}
.tabbar-icon>i.iconfont{font-size:24px;color:var(--color-gray-900);}
.tabbar-label{color:var(--color-gray-900); font-size:10px; line-height:1.4}
.bar-item-on .tabbar-label,.bar-item-on .tabbar-icon>i{color:var(--color-gray-700);}

/*tab*/
.mbui-tab {position: relative;width: 100%; display: block; line-height:24px;}
.mbui-tab .mbui-tab-title { padding: 0; margin: 0;list-style: none; position: relative; background: var(--color-white);}
.mbui-tab .mbui-tab-title:after{content: " ";position: absolute; width: 200%; height: 0;pointer-events: none; transform: scale(0.5); transform-origin: 0 0; border-bottom:1px solid var(--color-gray-300); bottom: 0; left: 0;}
.mbui-tab .mbui-tab-title a { display: inline-block;padding: 9px 0 11px; color: var(--color-gray-500); font-size: 16px; text-align: center;}
.mbui-tab .mbui-tab-title .active { position: relative; bottom: 0;}
.mbui-tab .mbui-tab-title .active a {border-bottom: 2px solid var(--color-blue-600); padding: 9px 0; color: var(--color-blue-600); position: relative; font-weight: 600;}
.mbui-tab .mbui-tab-title li { display: table-cell; width: 1%; text-align: center; position: relative;}
.mbui-tab .mbui-tab-title li .badge { padding: 0 4px; position: relative; top: -1px; margin-left: 2px;}
.mbui-tab .mbui-tab-title li small { color: var(--color-gray-500);}
.mbui-tab.tab-fixed {position: fixed !important; right: 0; left: 0; z-index: 10;}
.mbui-tab-item{ display: none;}
.mbui-tab-item.mbui-tab-show{ display: block;}

.mbui-new-add{width:44px;height:44px; border-radius:50%; position:fixed;right:10px;bottom:48px; background-color:var(--color-blue-600);}
.mbui-new-add a{width:44px;height:44px;color:var(--color-white); font-size:24px;display: flex; justify-content: center;align-items: center;}
.mbui-new-add a i{font-size:24px;}

/*bar*/
.mbui-bar {backface-visibility: hidden; background-color: var(--white-shadow); backdrop-filter: blur(8px); width: 100%; display: block; position: relative; z-index: 10;}
.mbui-bar.bar-fixed { position: fixed !important; right: 0; left: 0; z-index: 10;}
header.mbui-bar.bar-fixed { top: 0;}
header.mbui-bar:before {content: " ";transform: scale(0.5); transform-origin: 0 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); top: auto; bottom: -1px;}
header.mbui-bar:before,
header.mbui-bar:after { content: "";display: table;}
header.mbui-bar:after {clear: both;}
header.mbui-bar .mbui-bar-title {display: block; font-size: 18px;font-weight: bold; width: 100%; position: absolute; text-align: center; line-height: 46px; margin: 0; padding: 0; white-space: nowrap;}
header.mbui-bar .mbui-bar-title a {color: inherit;}
header.mbui-bar .mbui-bar-item { padding: 0 12px; font-size: 16px; line-height: 46px; position: relative;z-index: 10;color: var(--color-gray-900);}
header.mbui-bar .mbui-bar-item .mbui-bar-arrow-left { display: inline-block; width: 10px; height: 10px; border-bottom: solid 2px var(--color-gray-900); border-right: solid 2px var(--color-gray-900); margin-left: 2px; transform: rotate(135deg);}
header.mbui-bar.bar-primary{ border: none; background: var(--color-gray-900); color: var(--color-white);}
header.mbui-bar.bar-green { border: none; background: var(--color-green-500); color: var(--color-white);}
header.mbui-bar.bar-primary:before,
header.mbui-bar.bar-green:before { display: none;}
header.mbui-bar.bar-primary .mbui-bar-item,
header.mbui-bar.bar-green .mbui-bar-item { color: var(--color-white);}
header.mbui-bar.bar-primary .mbui-bar-item .mbui-bar-arrow-left,
header.mbui-bar.bar-green .mbui-bar-item .mbui-bar-arrow-left { border-bottom: solid 2px var(--color-white); border-right: solid 2px var(--color-white);}
footer.mbui-bar {height: 60px; display: table; position: relative;}
footer.mbui-bar.bar-fixed {bottom: 0;}
footer.mbui-bar:before { content: " ";transform: scale(0.5); transform-origin: 0 0; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);}
footer.mbui-bar .mbui-bar-item {display: table-cell; text-align: center; vertical-align: middle; height: inherit; font-size: 12px;color:var(--color-gray-500)}
footer.mbui-bar .mbui-bar-item .mbui-bar-icon {width: 30px; height: 30px; line-height:24px; display: inline-block; position: relative;}
footer.mbui-bar .mbui-bar-item .mbui-bar-icon i{font-size:24px;}
footer.mbui-bar.tool-bar .mbui-bar-item .mbui-bar-icon i{font-weight:600;color: var(--color-gray-700);}
footer.mbui-bar .mbui-bar-item .mbui-bar-icon .mbui-badge {position: absolute; top: -2px; right: -10px;}
footer.mbui-bar .mbui-bar-item .mbui-bar-icon .mbui-badge.mbui-badge-dot { top: 0px; right: -4px;}
footer.mbui-bar .mbui-bar-item span { display: block;line-height: 1;}
footer.mbui-bar .mbui-bar-item.active {color: var(--color-blue-600);}

.mbui-badge{ display: inline-block; padding: 2px 5px; z-index: 2; background: var(--color-red-500); font-weight: 400; border-radius: 50%; -webkit-border-radius: 50px; color: var(--color-white) !important; font-size: 12px !important; line-height: 1 !important; text-align: center; white-space: nowrap; font-style: normal;}
.mbui-badge-dot{ width: 9px; height: 9px; padding: 0; min-width: 0;}

/*grid-9*/
.mbui-grid{ background: var(--color-white); border-radius:6px;}
.mbui-grid .mbui-grid-title{padding:12px 12px 0; color:var(--color-gray-400);font-size:14px;}
.mbui-grid-box{padding:8px 0}
.mbui-grid .mbui-grid-item {width: 33.3333%; box-sizing: border-box; display: block; text-align: center; float: left; padding: 8px 8px 12px; line-height:1.32; color: var(--color-gray-500);font-size: 14px; position: relative;}
.mbui-grid.grid-4 .mbui-grid-item {width: 25%;}
.mbui-grid.border .mbui-grid-item:after { content: " "; pointer-events: none; position: absolute; top: 0; left: -1px; width: 200%; height: 200%; border-right: 1px solid var(--color-gray-100);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.mbui-grid.border .mbui-grid-item:before { content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.mbui-grid .mbui-grid-item .mbui-grid-item-icon {width: 36px; height: 36px; display: block; margin: 8px auto; line-height:36px;}
.mbui-grid .mbui-grid-item .mbui-grid-item-icon i{font-size:32px; color:var(--color-blue-500)}
.mbui-grid .mbui-grid-item:nth-child(3n):after {border-right: none;}
.mbui-grid.border .mbui-grid-item:nth-last-child(-n+3):before {content: " "; position: absolute; top: 0; left: 0; width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid var(--color-gray-100); transform: scale(0.5); transform-origin: 0 0; pointer-events: none;}
.mbui-grid .mbui-grid-item .mbui-grid-item-mun {height: 32px; font-size:24px; color:var(--color-blue-600); display: block; margin: 8px auto; line-height:32px;}
.mbui-grid.mbui-grid-bg .mbui-grid-item-icon{background-color:var(--color-blue-600); width: 36px; height: 36px; padding:6px; border-radius:6px;}
.mbui-grid.mbui-grid-bg .mbui-grid-item-icon i{font-size:26px; color:#f1f1f1}

/* 用户面板 */
.mbui-user-panel{padding:12px; background-color:var(--color-white); display: flex;}
.mbui-user-panel .avatar{margin-right:12px;}

/* 面板 */
.mbui-panel{position: relative; border-width: 1px; border-style: solid; border-radius: 2px; background-color: var(--color-white); color: var(--color-gray-500); box-shadow: 0 4px 8px -4px rgba(0,0,0,.13),0 6px 16px 0 rgba(0,0,0,.08),0 12px 24px 16px rgba(0,0,0,.04);}
.mbui-table{padding:0; margin:1px; background-color:var(--color-white); border:1px solid var(--color-gray-200);border-collapse: collapse; border-spacing: 0;}
.mbui-table th,.mbui-table td{padding:8px 4px; border:1px solid var(--color-gray-200); text-align:center; font-size:14px;}
.mbui-table th{background-color:var(--color-gray-50); color:var(--color-gray-500)}

/*表单*/
input, textarea {user-select: auto;}
input,button, textarea ,select{border: none; outline: none;
  -webkit-appearance: none;
  -webkit-user-select : text;
  user-select: text;
}
input[disabled] {background: var(--color-gray-100);}
input::placeholder,textarea::placeholder {color: var(--color-gray-300);}
label input{vertical-align:middle; margin-right:3px;}
:focus {outline: 0;}
select{padding:4px 5px;border:1px solid var(--color-gray-300); border-radius:2px; margin-right:3px;}
input[type="file"] {display: block;}

.mbui-input,.mbui-textarea{box-sizing: border-box;}

.mbui-input, .mbui-textarea,
.mbui-form-pane .mbui-form-label,
.mbui-form-pane .mbui-form-item[pane]{border-color: var(--color-gray-300); font-size:16px;}
.mbui-form-label >i{color:var(--color-orange-600);}

.mbui-input, .mbui-textarea{height: 44px; line-height: 1.3; border-width: 1px; border-style: solid; background-color: var(--color-white); color: var(--color-black); border-radius: 2px;}
.mbui-input::-webkit-input-placeholder,
.mbui-textarea::-webkit-input-placeholder{line-height: 1.3; color:var(--color-gray-400);}
.mbui-input, .mbui-textarea{display: block; width: 100%; padding-left: 10px;}
.mbui-input:focus, .mbui-textarea:focus{border-color: var(--color-blue-600) !important; box-shadow: 0 0 0 3px rgba(22,183,119,0.08);}
.mbui-textarea{position: relative; min-height: 100px; height: auto; line-height: 20px; padding: 6px 10px; resize: vertical;}
.mbui-input[disabled], .mbui-textarea[disabled]{background-color: var(--color-gray-100);}

.mbui-form-item{position: relative; margin-bottom: 15px; clear: both; *zoom: 1;}
.mbui-form-item:after{content:'\20'; clear: both; *zoom: 1; display: block; height:0;}
.mbui-input-block, .mbui-input-inline{position: relative;}
.mbui-input-block{margin-left: 110px; min-height: 36px;}
.mbui-input-inline{display: inline-block; vertical-align: middle;}
.mbui-form-item .mbui-input-inline{float: left; width: 190px; margin-right: 10px;}
.mbui-form-text .mbui-input-inline{width: auto;}

/*mbui-form-inline*/
.mbui-group+.mbui-group{margin-top:var(--3xl);}
.mbui-group-title{padding:var(--3xl) var(--xl) var(--md) var(--2xl); font-size: 14px; color: var(--color-gray-400);font-weight: 400;display: flex;justify-content: space-between;}
.mbui-form-line{position: relative;background:var(--color-white);}
.mbui-form-line:before {content: " "; position: absolute; top: 0;left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-300);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.mbui-group .mbui-form-line:first-child:before{display:none}
/*input*/
.mbui-form-label {width: 122px; padding: 14px 6px 14px 12px; color: var(--color-gray-400); line-height: 1; font-size: 16px; font-weight: 400; margin: 0; position: absolute;letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; display: -webkit-box !important;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1;}
.mbui-form-input { width: 100%; border: 0; outline: 0; font-size: 16px; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance:button; border-radius: 0; color: var(--color-gray-900); line-height:28px; padding: 8px 14px 8px 122px;  background: var(--color-white);}
.mbui-form-suffix .mbui-form-input{width:calc(100% - 36px)}
.mbui-form-suffix .iconfont{font-size:20px; vertical-align:middle;}
/*radio*/
.mbui-form-radio{ width: 100%; border: 0; font-size: 16px; color: var(--color-gray-900); padding: 3px 12px 3px 122px; background: var(--color-white); line-height:44px}
.mbui-form-radio .mbui-input-radio{width: 19px; height: 19px; appearance: none; position: relative;}
.mbui-form-radio .mbui-input-radio:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 50%; vertical-align: bottom;}
.mbui-form-radio .mbui-input-radio:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 50%; vertical-align: bottom;}
.mbui-form-radio .mbui-input-radio:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: bottom; transform: rotate(-45deg);}
.mbui-form-radio .mbui-input-radio + label{line-height: 19px; display: inline-block;  margin-left: 3px; margin-right:16px;}

/*checkbox*/
.mbui-form-checkbox{ width: 100%; border: 0; font-size: 16px; color: var(--color-gray-900); padding: 14px 12px 14px 122px; background: var(--color-white); line-height:1.5}
.mbui-form-checkbox .mbui-input-checkbox{width: 19px; height: 19px; appearance: none; position: relative;}
.mbui-form-checkbox .mbui-input-checkbox:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 3px; vertical-align: bottom;}
.mbui-form-checkbox .mbui-input-checkbox:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 3px; vertical-align: bottom;}
.mbui-form-checkbox .mbui-input-checkbox:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: middle; transform: rotate(-45deg);}
.mbui-form-checkbox .mbui-input-checkbox + label{line-height: 19px; display: inline-block;  margin-left: 3px; margin-right:16px;}

/*select*/
.mbui-form-select{position: static; width: 100%;}
.mbui-form-select > select {border-radius: 0;border: 0;  width: 100%; padding-left: 122px; min-height: 44px; font-size: 16px; margin: 2px 0; background: var(--color-white); color: var(--color-gray-900);}
.mbui-form-select > select > option {padding: 6px; background-color: var(--color-gray-100); color: var(--color-gray-500);}
.mbui-form-select:after {content: ""; top: 20px; right: 16px; position: absolute; display: inline-block;font-size: 0; width: 8px; height: 8px; background-color: transparent; border-top: 2px solid var(--color-gray-400); border-left: 2px solid var(--color-gray-400);-webkit-transform: rotate(225deg); text-align:center;}

.mbui-form-select.date-select:after{content: '📅'; font-size: 14px; width: 16px; height: 16px; top:12px; right: 12px; background-color: transparent; border:none;-webkit-transform: rotate(0);}
.mbui-form-select.admin-select:after{content: '👤'; font-size: 14px; width: 16px; height: 16px; top:12px; right: 12px; background-color: transparent; border:none;-webkit-transform: rotate(0);}

.mbui-form-text{position: static; width: 100%; min-height: 44px; padding: 10px 14px 10px 122px;}

.mbui-form-min .mbui-form-label{padding: 13px 6px 13px 12px; font-size:14px;}
.mbui-form-min .mbui-form-input{padding: 6px 14px 6px 122px;font-size:14px;}
.mbui-form-min .mbui-form-select > select {min-height: 40px; font-size: 14px;}
.mbui-form-min .mbui-form-text{position: static; width: 100%; padding: 6px 14px 6px 122px;font-size:14px;}

/*uploader*/
.mbui-form-uploader {width: 100%;border: 0;outline: 0;font-size: 16px; box-shadow: none; appearance: none;border-radius: 0; color: var(--color-gray-900); padding: 1px 12px 0 122px; background: var(--color-white);
  -webkit-appearance: none;
  -moz-appearance:button;
}
.mbui-form-uploader .mbui-uploader-btn-border { width: 100%; height: 44px; background: var(--color-white); border-radius: 0;display: block; text-align:right; position: relative;color:var(--color-gray-500);line-height:44px;}
.mbui-form-uploader .mbui-uploader-btn-border i{font-size:20px; font-weight:600}
.mbui-form-uploader input { opacity: 0; position: absolute;top: 0;left: 0;width: 100%; height: 100%;}

.mbui-form-phone .mbui-form-input{padding: 16px 120px;}
.mbui-input-cell {float: none; width: 100%; padding: 14px 20px; position: static;}
.mbui-input-cell small {color: var(--color-gray-400);}
.mbui-form-static {font-size: 16px;width: 100%; padding: 14px 20px 14px 122px; margin-bottom: 0;}

/*list-radio*/
.mbui-radio-checkbox{position: relative; background:var(--color-white); width: 100%; font-size: 16px; color: var(--color-gray-900); padding:15px 14px;}
.mbui-radio-checkbox:before {content: " ";pointer-events: none;position: absolute; top: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;   
}
.mbui-group .mbui-radio-checkbox:last-child:after {content: " ";pointer-events: none;position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-bottom: 1px solid var(--color-gray-100);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;   
}
.mbui-radio-checkbox label{width: 100%; position:relative; line-height:1.36; display:flex;justify-content:space-between;}

.mbui-radio-checkbox .mbui-radio{width: 21px; height: 21px; appearance: none; position: relative;}
.mbui-radio-checkbox .mbui-radio:before{content: ''; width: 21px; height: 21px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 50%; vertical-align: middle;}
.mbui-radio-checkbox .mbui-radio:checked:before{border: 1px solid var(--color-blue-600); background:var(--color-blue-600); }
.mbui-radio-checkbox .mbui-radio:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 7px; left:5px; vertical-align: bottom; transform: rotate(-45deg);}

.mbui-radio-checkbox .mbui-checkbox{width: 21px; height: 21px; appearance: none; position: relative;}
.mbui-radio-checkbox .mbui-checkbox:before{content: ''; width: 21px; height: 21px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 3px; vertical-align: middle;}
.mbui-radio-checkbox .mbui-checkbox:checked:before{border: 1px solid var(--color-blue-600); background:var(--color-blue-600);}
.mbui-radio-checkbox .mbui-checkbox:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 7px; left:5px; vertical-align: middle; transform: rotate(-45deg);}

/*switch*/
.mbui-switch {
  padding: 14px 20px;
}
.mbui-switch .mbui-switch-text {
  padding: 4px 0;
  margin: 0;
  font-size: 16px;
  text-indent: 0 !important;
}
.mbui-switch .mbui-switch-text small {
  color: var(--color-gray-400);
}
.mbui-switch > input[type="checkbox"] {
  display: none;
}
.mbui-switch > label {
  margin-bottom: 0;
}
.mbui-switch .mbui-switch_radius {
  position: relative;
  display: inline-block;
  color: var(--color-gray-200);
  width: 50px;
  height: 32px;
  background: var(--color-gray-200);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.17, 0.67, 0.43, 0.98);
  -webkit-transition: all 0.4s cubic-bezier(0.17, 0.67, 0.43, 0.98);
  float: right;
}
.mbui-switch .mbui-switch_radius:active {
  box-shadow: inset 0 0 0 1.2em var(--color-gray-300);
  -webkit-box-shadow: inset 0 0 0 1.2em var(--color-gray-300);
}
.mbui-switch .mbui-switch_radius:before {
  width: 30px;
  height: 30px;
  border-radius: 100px;
  transition: margin-left 0.2s ease 0s;
  -webkit-transition: margin-left 0.2s ease 0s;
  margin: 1px;
  background: var(--color-white);
  box-shadow: inset 0 0 0 0.03em rgba(0, 0, 0, 0.1), 0 0 0.05em rgba(0, 0, 0, 0.05), 0 0.1em 0.2em rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 0 0.03em rgba(0, 0, 0, 0.1), 0 0 0.05em rgba(0, 0, 0, 0.05), 0 0.1em 0.2em rgba(0, 0, 0, 0.2);
}
.mbui-switch .mbui-switch_radius:before,
.mbui-switch .mbui-switch_radius:after {
  position: absolute;
  content: "";
}
.mbui-switch > input:checked + label {
  background: var(--color-gray-900);
  transition: all 0.15s ease-out;
  -webkit-transition: all 0.15s ease-out;
  box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
  -webkit-box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
}
.mbui-switch > input:checked + label:active {
  box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
  -webkit-box-shadow: inset 0 0 0 1.2em var(--color-gray-900);
}
.mbui-switch > input:checked + label:before {
  margin-left: 19px;
}

.mbui-checkbox_hd,
.mbui-radio_hd {
  display: block;
  margin-right: 14px;
  line-height: 0;
}
.mbui-checkbox_bd,
.mbui-radio_bd {
  width: 100%;
  font-size: 16px;
  display: block;
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.mbui-checkbox_bd small,
.mbui-radio_bd small {
  color: var(--color-gray-400);
}
.mbui-radio .btn .mbui-radio_ft,
.mbui-checkbox .btn .mbui-checkbox_ft {width: 22px; height: 22px;display: inline-block;}
.mbui-checkbox .btn .mbui-checkbox_ft:after,
.mbui-checkbox .btn .mbui-checkbox_ft:before {
  position: absolute;
  display: block;
  content: "";
  height: 1px;
}
.mbui-radio .btn .mbui-radio_ft:after,
.mbui-radio .btn .mbui-radio_ft:before {
  position: absolute;
  display: block;
  content: "";
  height: 2px;
}
.mbui-radio .btn.active .mbui-radio_ft:after {margin-top: 19px; margin-left: -2px; width: 18px; background: var(--color-blue-600);
  -webkit-transform: rotate(-45deg) translate3d(10px, 0, 0);
  -moz-transform: rotate(-45deg) translate3d(10px, 0, 0);
  transform: rotate(-45deg) translate3d(10px, 0, 0);

}
.mbui-radio .btn.active .mbui-radio_ft:before {  margin-top: 4px;margin-left: -2px; width: 8px; background: var(--color-blue-600);
  -webkit-transform: rotate(45deg) translate3d(10px, 5px, 0);
  -moz-transform: rotate(45deg) translate3d(10px, 5px, 0);
  transform: rotate(45deg) translate3d(10px, 5px, 0);
}
.mbui-checkbox .btn .mbui-checkbox_ft {
  border-radius: 100%;
  -webkit-border-radius: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
}
.mbui-checkbox .btn.active .mbui-checkbox_ft {background: var(--color-blue-600); border-color: var(--color-blue-600);}
.mbui-checkbox .btn.active .mbui-checkbox_ft:after {
  -webkit-transform: rotate(-45deg) translate3d(10px, 0, 0);
  -moz-transform: rotate(-45deg) translate3d(10px, 0, 0);
  transform: rotate(-45deg) translate3d(10px, 0, 0);
  margin-top: 17px;
  margin-left: -1px;
  width: 10px;
  background: var(--color-white);
}
.mbui-checkbox .btn.active .mbui-checkbox_ft:before {
  -webkit-transform: rotate(45deg) translate3d(11px, 4px, 0);
  -moz-transform: rotate(45deg) translate3d(11px, 4px, 0);
  transform: rotate(45deg) translate3d(11px, 4px, 0);
  margin-top: 1px;
  margin-left: -1px;
  width: 5px;
  background: var(--color-white);
}
[data-toggle="buttons"] > .btn input[type="radio"],
[data-toggle="buttons"] > .btn input[type="checkbox"] {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;
  width: auto;
  height: 100%;
}
.mbui-uploader {
  background: var(--color-white);
  position: relative;
  padding: 0 20px;
}
.mbui-uploader:before {
  content: " ";
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 0;
  border-top: 1px solid var(--color-gray-100);
}
.mbui-uploader:after {
  content: " ";
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  bottom: 0;
  height: 200%;
  border-bottom: 1px solid var(--color-gray-100);
}
.mbui-uploader_title {
  padding: 20px 0;
  line-height: 1.1333;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  color: var(--color-gray-900);
}
.mbui-uploader_files {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mbui-uploader_files .mbui-uploader_files_item {
  width: 90px;
  height: 90px;
  float: left;
  margin-right: 10px;
  margin-bottom: 20px;
}

.mbui-uploader_files .mbui-uploader_files_item a,
.mbui-uploader_files .mbui-uploader_files_item img {
  display: block;
}
.mbui-uploader_btn {
  float: left;
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
}
.mbui-uploader_btn .mbui-uploader_btn_border {
  float: left;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: 6px;
  display: block;
  position: relative;
  text-align: center;
}
.mbui-uploader_btn .mbui-uploader_btn_border:before,
.mbui-uploader_btn .mbui-uploader_btn_border:after {
  content: " ";
  position: absolute;
  background: var(--color-gray-300);
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.mbui-uploader_btn .mbui-uploader_btn_border:after {
  width: 2px;
  height: 26px;
}
.mbui-uploader_btn .mbui-uploader_btn_border:before {
  width: 26px;
  height: 2px;
}
.mbui-uploader_btn input {
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

/*steps*/
.mbui-steps .mbui-steps-item { position: relative; padding-left: 25px; padding-bottom: 12px; font-size: 14px; color: var(--color-gray-600); font-weight: 600;}
.mbui-steps .mbui-steps-item small {padding-top:2px; display: block; font-size: 14px;color: var(--color-gray-400); font-weight: 400;}
.mbui-steps .mbui-steps-item:last-child:after {display: none;}
.mbui-steps .mbui-steps-item:before {position: absolute; content: " ";top: 5px; left: 3px; display: block; width: 13px; height: 13px; background: var(--color-gray-300); border-radius: 50%; z-index: 2;}
.mbui-steps .mbui-steps-item:after {position: absolute; content: " "; top: 5px; left: 9px; display: block; width: 1px; height: 100%; background: var(--color-gray-300);}
.mbui-steps .mbui-steps-item.success {color: var(--color-gray-900);}
.mbui-steps .mbui-steps-item.success:after,
.mbui-steps .mbui-steps-item.success:before {background: var(--color-gray-900);}
.mbui-steps .mbui-steps-item.active {color: var(--color-gray-900);font-weight: 600;}
.mbui-steps .mbui-steps-item.active small {font-weight: 400;}
.mbui-steps .mbui-steps-item.success:before,
.mbui-steps .mbui-steps-item.active:before {top: 3px; left: 6px; width: 12px;height: 12px;background: var(--color-gray-900);border: 4px solid var(--color-white);}

/*layer - modal*/
.mbui-layer {position: relative; z-index: 88;}
.mbui-layer *{box-sizing: border-box;}
.mbui-layershade {background-color:var(--black-shadow);pointer-events: auto;}
.mbui-layermain,.mbui-layershade { position: fixed; left: 0;top: 0; width: 100%; height: 100%;}
.mbui-layermain{display: table;}

.mbui-layer .modal-dialog { width: 100%; margin: 0;padding: 0; display: table-cell; vertical-align: middle; text-align: center;}
.mbui-layer .modal-content {position: relative; background-clip: padding-box; background: var(--color-white); border-radius: 12px; max-width: 320px; margin-left: auto; margin-right: auto;animation: bounce-in 300ms 0ms ease both;}
@-webkit-keyframes bounce-in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

.mbui-layer .modal-header {padding:12px 16px; font-size: 18px; text-align: center;font-weight: 600;}
.mbui-layer .modal-body { position: relative; padding: 0 16px 16px; font-size: 16px; color: var(--color-gray-500);text-align: center;}
.mbui-layer .modal-footer {padding: 0; position: relative;}

.mbui-layer .modal-content .btn-default {background-color: var(--color-white);}
.mbui-layer .modal-content .btn-lg {font-size: 17px; padding: 12px 16px; border-radius: 0; border: none;}
.mbui-layer .modal-content .btn-lg:before {display: none;}

.mbui-layer .modal-footer:before {content: " "; pointer-events: none;  position: absolute;  top: 0;  left: 0;  width: 200%;  height: 0; border-top: 1px solid var(--color-gray-100);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.mbui-layer .modal-footer .btn { margin: 0; border: none; background: none; padding: 14px; width: 50%; text-align: center; float: left; color: var(--color-gray-900); font-size: 16px; border-bottom-left-radius: 4px; border-bottom-right-radius: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; position: relative; box-sizing: border-box;}
.mbui-layer .modal-footer .btn:before {display: none;}
.mbui-layer .modal-footer .btn.active { color: var(--color-gray-900); font-weight: 600;}
.mbui-layer .modal-footer .btn:active { background: rgba(0, 0, 0, 0.05);}
.mbui-layer .modal-footer .btn + .btn { margin-left: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 4px; border-top-left-radius: 0;border-top-right-radius: 0;}
.mbui-layer .modal-footer .btn + .btn:after { content: " ";pointer-events: none; position: absolute;top: 0; left: 0; width: 200%; height: 200%;border-left: 1px solid var(--color-gray-100);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.mbui-layer .modal-footer .btn-block { width: 100%; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
.mbui-layer .mbui-form-input { height: 40px; padding: 10px;}
.form-hairlines {position: relative;}
.form-hairlines:before {content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid var(--color-gray-300);  border-radius: 8px;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-border-radius: 8px;
}
.form-hairlines input,.form-hairlines textarea { border: none; border-radius: 3px;}

.mbui-layer .modal-content.modal-actionsheet{max-width: 100%;width: 100%;position: fixed; margin: 0;left: 0; bottom: 0;background:#EDEDED;}
.mbui-layer .modal-long .modal-body {padding: 0 16px;  max-height: 320px; overflow-y: auto; text-align: left;}

.mbui-layer .modal-content.modal-actionsheet.bottom{
	-webkit-animation: fade-in-up 300ms 0ms ease-in-out both;
    animation: fade-in-up 300ms 0ms ease-in-out both;
}
@-webkit-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.mbui-layer .modal-actionsheet .modal-body{padding:0;width:100%; text-align: left;}
.mbui-layer .modal-actionsheet .modal-body .actionsheet-btn {width: 100%; background: var(--color-white); position: relative; border-radius: 0;  padding: 14px 20px; max-width: 100%; display: inline-block;  font-size: 16px; font-weight: 600; margin-bottom: 0; line-height: 1.42857143;  border: 0; text-align: center; white-space: nowrap; vertical-align: middle;touch-action: manipulation; cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background-image: none;
    -webkit-appearance: none;
}
.mbui-layer .modal-actionsheet .modal-body .actionsheet-btn:after {content: " "; position: absolute; top: 0; left: 0;width: 200%; bottom: 0; height: 200%; border-bottom: 1px solid var(--color-gray-100);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.mbui-layer .modal-actionsheet .modal-body .actionsheet-btn:first-child { border-top-left-radius: 12px;  border-top-right-radius: 12px;}
.mbui-layer .modal-actionsheet .modal-footer { margin-top: 10px;}
.mbui-layer .modal-actionsheet .modal-footer .btn { background: var(--color-white); border-radius: 0; padding: 14px 16px; max-width: 100%;}

.mbui-layer .modal-content.modal-view{max-width: 100%;width: 100%;position: fixed; margin: 0;left: 0; top: 0;border-radius: 0 0 12px 12px;}
.mbui-layer .modal-content.modal-view.top{
	-webkit-animation: fade-in-down 300ms 0ms ease-in-out both;
    animation: fade-in-down 300ms 0ms ease-in-out both;	
}
.mbui-layer .modal-view .modal-body{padding:0;width:100%; text-align: left;}

/*layer - toast*/
.mbui-toptips {font-size: 14px; width: 100%;z-index: 18888; padding: 10px;
  -webkit-animation: fade-in-down 500ms 0ms ease both;
  animation: fade-in-down 500ms 0ms ease both;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@-webkit-keyframes fade-in-down {
  0% {
    -webkit-transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
.mbui-toptips:before {content: " "; pointer-events: none; position: absolute; top: 0; left: 0; width: 200%; bottom: 0;  height: 200%;  border-bottom: 1px solid var(--color-gray-100);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;

}
.mbui-toptips i {width: 16px; height: 16px; min-width: 16px; display: inline-block; margin-right: 7px;overflow: hidden;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABsCAMAAAAbkME5AAAA5FBMVEUAAAD/llrtUVXmoSbtUVbmoCbtUVXmoSbmoSXloSbtUFXmoSbuUVXmoSb/WVn/sjvmoSbooifvUlbyUljnpSbvU1bloSbtUVXtUFXmoCbmoCbtUVXtUVbmoSbtUVbnoiXlpCfwX1/wrS/tUVXsUVXsUFXtUFbmoSXsUFXloSXmoCXsUFbuUlXnoSbtUFbmoCXuUlbmoibsUFXloSbuUVbnoibsUVfnoCbuUVfooibwU1jmoiftUlvtpC71UlzroynsUFbsUlbtUFbuUVXloyntUFXloSbtUFXmoCbmoCXsUFXloCUgjMVLAAAASnRSTlMAA/r6xMS4rvblyMhkZAgIeUw7KChN7ezNzbeuoKBSUjsQEOT29fHx29u6r5OTj4+Ghmxsa2teXlhYNDQcHBkZ5Xp4RkWoqJmZPuxJ55cAAANkSURBVFjD7VbXcuowEJUhMZCAMb33hBZ6TSgJkG79///cXXsmLpKCPMzcp5w3r/bsaqtMGGiZkdrNBQK5rjrKaOQMGqvSveHAfWnVIGJop7bBoH0SuVGiB0slX57MqtXZpJy3vltRhaf/fIOHAXWxs2W7hRpA6c0zq79p4clDyitPPZhONl754x0aShIOkuj67tGjj2YGiiC4AZ66GBuwH4gSIaIB8LFxxHsA/VfyC16B0fqJXMFLuu1nVDXj9oEhKo6PgVvfALhdDmyj2sEkO1FCQsklwmscrJof4dCTzyskXHmyC6Kj2W9tqBc5TyBQwTZ24goylJIhpCBTK+u+KpEhENWMS4P+X8gRFjAfmpnBnRxhB8IMGUH/EzkCgfkY4cXKsoQyhts1jIksYWIYXZIzjJksYWYYOQLJrcoSqlAy3wTfV+IH/Y6Ed27Q/LQmkZDkppVXOGSUy0nCLZzdGiy4rWE3Hwtu87HtLQa2t2CASOp0Qhk7QIIRrcJZoMobUf4SUHIGIKcwqT4J1kzKMJHyrpmWJlhkDYvQYBaZcFV+ov4nuyqFy1g55vNHhVnG/te9/wfF/5Ml/yj6fnYvf9gR2pH363DULvo5Ofv784c//D/EE+NiLxsMZnvFcSJ+Tru5DoWpA+HQuvmbcb1DGXR0kRslFrFUCpXpvFabTysF6zsS447oyy0eBvvLvS3bL/tBlN6+sPpb03wo7ZWnQ6aTrVf+FEZDdcJBHV2Hnzz6FDAUrcohnroYW7AfjBEhYkHwsXXEGwH9N/IL3oAR+YlcwUu67SeKxYTbB4aoOD6Gbn0KcDOGttF4xCQ7ETJT7BLhNSJWzXU49OTzGgnXnuyCSDf7rYPGzhPQbQc7cQ0ZSssQ0pCptUXsExkC6ZtXiUPNlnKEJVQvbmZwL0fYm7keQ/8TOQKB+RiTIqUVWUKF0iLpUTqVJUwp7ZEspXNZwpzSLIHk1mQJNSiZb4LvK/GD/kDCBzdoflq/kfDNTSu/cKReqdQJt3B2a7DgtobdfCy4zce2txjY3oIBImldRxk7QIIRrcFZsMYbUf4SULIUkFXYJSBYM2lqIs2uGcEia1qEJrPIhKvyC/W/2FUpXMaKXijoCrOM/a97/w+K/ydL/lG89NmVf9jlfx3kf04u/P35BwHDLihDV8YIAAAAAElFTkSuQmCC") no-repeat;
  background-size: 16px; 
}
.mbui-toptips i.mbui-toptips-error-icon {background-position: 0 0;}
.mbui-toptips i.mbui-toptips-warning-icon {background-position: 0 -20px;}
.mbui-toptips.mbui-toptips-warning { background: var(--color-yellow-100); color: var(--color-yellow-600);}
.mbui-toptips.mbui-toptips-warning > a {color: var(--color-yellow-600);}
.mbui-toptips.mbui-toptips-error { background: var(--color-red-100); color: var(--color-red-600);}
.mbui-toptips.mbui-toptips-error > a { color: var(--color-red-600);}
.mbui-toptips.fixed{position: fixed !important;right: 0; left: 0; top: 0;z-index: 10;}
.mbui-toast{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 888; overflow: hidden; outline: 0; text-align: center; background-color:var(--black-shadow));
  -webkit-overflow-scrolling: touch; 
}
.mbui-toast-dialog { width: 100%; height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-animation: fade-in-up 100ms 0ms ease-in-out both;
   animation: fade-in-up 100ms 0ms ease-in-out both;
}
.mbui-toast-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1020;}
.mbui-toast-content { position: relative; min-width: 126px; display: inline-block; background: var(--black-shadow); text-align: center; border-radius: 6px; margin-top:-20%; color: var(--color-white); font-size: 16px;}
.mbui-toast-content > span {padding:12px 16px;display: block;}
.mbui-toast-success .mbui-toast-content {min-height: 120px;}
.mbui-toast-success .mbui-toast-content .mbui-toast-success-icon {width: 44px; height: 44px; display: block; margin: 6px auto 10px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAAnFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+TINBkAAAAM3RSTlMA/PL47DQCCINDKgTalRXjil5wTx7VeA7f0MS2s6Q6JBIM5smvwVdqP7uckWJLMBoZzHzNBA+9AAADrElEQVR42u3ciXLaMBSF4eMdsFlCIOw7JGRrSM/7v1vbDJ0GZNkhN+RqpnxPoIll/bIcg4uLi//H82gLhyzqpD+HM6YZf7uBI9KKxz8yuKE24F4EB8TtgH9VoK+z4T9rqLvy+c4YyhYTHniErijjgU0CVe2AB1YLaJqPeWgwh6Ztk4e6DSiKf3o8lO2g6GXDI/0OFFWXPLKcQdGNxyNhDXp6ax4Lf0BPLeMxP4KeW98czxRq0kcavGeo2Q1peoKaaEnTT6i5CmiqQ0vcYo51DCW9EXMMEyiZdZmjO4eSasgczQ6U3L3Fy5mAxXXmCbbQsRgz1y107F6Z6wY6an3mmkBH1SddWoCeAubqN6Ciwnx+DRrSB/7hzA4oGdOiDQ3zIS0eoOGlS4v7FApmfVpkcyiIQlr4Myio+rS5hoLrgDYVKLj1aDOK8f2e7OPpa0zoO1oFGmcKN7S7goA0p448E7ZoN1RYoYvGs9yhzLeOx5tCQDQeZ/b0heMZ4TN622lynvEsG/iEO59sPsvvd5NXxenSunGxBeuhPKm9e+5NEpyszSKbWHZ+s9pJ+mUKX3CybXgwBSOc5IqFnuXHkcEtTnDtsUgLJ2uJpmE1YJFVihMt1syxXuBjIp8G0ab+5ZW5Bh18RC1koTucKH6lRThFuU6ThcY4VUSr4All5hkLhQ3JgEyPMQolQxqkT2HxqjDScxSI1yz2AIN0FmQz2NVZrL+AQXyfhNXioJ66SZSvJF4b+W5ZogIL6Vr7kCLHNGCxQQoLcY02DRhmIYt5P2Aj73W/hiO9ruCCyXdY9I8WlHjEEt1E/Axc7MayPxDeYYJFZZIYV7hAC3ITFlu9YC8KWCJLIJeOacrb2Tb6LLPFV0g2NJk72/ieZer4Gr0BS7QSJBOWaS7wRRoZS4Qrn6WuIWCkX24NCTP9Un4HImb6hdoQMtMvMoghZaZfwIvw5a4oUMcZtPlpyx4szpl+hcP6Oj9niHOZODOj99IRS8kfDOXpFzzJnzf98qMXefrLdVNYKKW/Cgul9I9hoZR+r4azM9Ov/wLzw+n3Gzg3M/1uvKD7WPqbCc7OTL8rr+TrLNWN8Y3iCfdc+Sec0vSv8M2SoUI0BOm/h8A50h9BSp5+B74Ftaf/B8Tk6Xfi691q4NQf6C397swge/qn0NR2Yg16r6K/SBen/xXa4okTX4vY0t+Poe99+ttwwb/0+ws4oZE58osGx+kPZnBF7W1EP+GOxmN39YSLi4uLiwt9vwAkwFFwKPIJrgAAAABJRU5ErkJggg==") no-repeat;
  background-size: 44px;
}
.mbui-toast-loading .mbui-toast-content {min-height: 126px;}
.mbui-toast-loading_icon {position: relative; width: 44px; height: 44px; display: block; margin: 4px auto 16px;}
.loading-icon-leaf {position: absolute; opacity: 0.25; left: 21px; top: 21px;}
.loading-icon-leaf:before {content: " "; position: absolute; width: 8.14px; height: 3.08px; background: var(--color-gray-300); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; border-radius: 1px; transform-origin: left 50% 0px;}
.loading-icon-leaf_0 {
  -webkit-animation: opacity-60-25-0-12 1.25s linear infinite;
  animation: opacity-60-25-0-12 1.25s linear infinite;
}
.loading-icon-leaf_0:before {
  -webkit-transform: rotate(0deg) translate(7.92px, 0px);
  transform: rotate(0deg) translate(7.92px, 0px);
}
.loading-icon-leaf_1 {
  -webkit-animation: opacity-60-25-1-12 1.25s linear infinite;
  animation: opacity-60-25-1-12 1.25s linear infinite;
}
.loading-icon-leaf_1:before {
  -webkit-transform: rotate(30deg) translate(7.92px, 0px);
  transform: rotate(30deg) translate(7.92px, 0px);
}
.loading-icon-leaf_2 {
  -webkit-animation: opacity-60-25-2-12 1.25s linear infinite;
  animation: opacity-60-25-2-12 1.25s linear infinite;
}
.loading-icon-leaf_2:before {
  -webkit-transform: rotate(60deg) translate(7.92px, 0px);
  transform: rotate(60deg) translate(7.92px, 0px);
}
.loading-icon-leaf_3 {
  -webkit-animation: opacity-60-25-3-12 1.25s linear infinite;
  animation: opacity-60-25-3-12 1.25s linear infinite;
}
.loading-icon-leaf_3:before {
  -webkit-transform: rotate(90deg) translate(7.92px, 0px);
  transform: rotate(90deg) translate(7.92px, 0px);
}
.loading-icon-leaf_4 {
  -webkit-animation: opacity-60-25-4-12 1.25s linear infinite;
  animation: opacity-60-25-4-12 1.25s linear infinite;
}
.loading-icon-leaf_4:before {
  -webkit-transform: rotate(120deg) translate(7.92px, 0px);
  transform: rotate(120deg) translate(7.92px, 0px);
}
.loading-icon-leaf_5 {
  -webkit-animation: opacity-60-25-5-12 1.25s linear infinite;
  animation: opacity-60-25-5-12 1.25s linear infinite;
}
.loading-icon-leaf_5:before {
  -webkit-transform: rotate(150deg) translate(7.92px, 0px);
  transform: rotate(150deg) translate(7.92px, 0px);
}
.loading-icon-leaf_6 {
  -webkit-animation: opacity-60-25-6-12 1.25s linear infinite;
  animation: opacity-60-25-6-12 1.25s linear infinite;
}
.loading-icon-leaf_6:before {
  -webkit-transform: rotate(180deg) translate(7.92px, 0px);
  transform: rotate(180deg) translate(7.92px, 0px);
}
.loading-icon-leaf_7 {
  -webkit-animation: opacity-60-25-7-12 1.25s linear infinite;
  animation: opacity-60-25-7-12 1.25s linear infinite;
}
.loading-icon-leaf_7:before {
  -webkit-transform: rotate(210deg) translate(7.92px, 0px);
  transform: rotate(210deg) translate(7.92px, 0px);
}
.loading-icon-leaf_8 {
  -webkit-animation: opacity-60-25-8-12 1.25s linear infinite;
  animation: opacity-60-25-8-12 1.25s linear infinite;
}
.loading-icon-leaf_8:before {
  -webkit-transform: rotate(240deg) translate(7.92px, 0px);
  transform: rotate(240deg) translate(7.92px, 0px);
}
.loading-icon-leaf_9 {
  -webkit-animation: opacity-60-25-9-12 1.25s linear infinite;
  animation: opacity-60-25-9-12 1.25s linear infinite;
}
.loading-icon-leaf_9:before {
  -webkit-transform: rotate(270deg) translate(7.92px, 0px);
  transform: rotate(270deg) translate(7.92px, 0px);
}
.loading-icon-leaf_10 {
  -webkit-animation: opacity-60-25-10-12 1.25s linear infinite;
  animation: opacity-60-25-10-12 1.25s linear infinite;
}
.loading-icon-leaf_10:before {
  -webkit-transform: rotate(300deg) translate(7.92px, 0px);
  transform: rotate(300deg) translate(7.92px, 0px);
}
.loading-icon-leaf_11 {
  -webkit-animation: opacity-60-25-11-12 1.25s linear infinite;
  animation: opacity-60-25-11-12 1.25s linear infinite;
}
.loading-icon-leaf_11:before {
  -webkit-transform: rotate(330deg) translate(7.92px, 0px);
  transform: rotate(330deg) translate(7.92px, 0px);
}
@-webkit-keyframes opacity-60-25-0-12 {
  0% {
    opacity: 0.25;
  }
  0.01% {
    opacity: 0.25;
  }
  0.02% {
    opacity: 1;
  }
  60.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-1-12 {
  0% {
    opacity: 0.25;
  }
  8.34333% {
    opacity: 0.25;
  }
  8.35333% {
    opacity: 1;
  }
  68.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-2-12 {
  0% {
    opacity: 0.25;
  }
  16.6767% {
    opacity: 0.25;
  }
  16.6867% {
    opacity: 1;
  }
  76.6767% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-3-12 {
  0% {
    opacity: 0.25;
  }
  25.01% {
    opacity: 0.25;
  }
  25.02% {
    opacity: 1;
  }
  85.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-4-12 {
  0% {
    opacity: 0.25;
  }
  33.3433% {
    opacity: 0.25;
  }
  33.3533% {
    opacity: 1;
  }
  93.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.25;
  }
}
@-webkit-keyframes opacity-60-25-5-12 {
  0% {
    opacity: 0.270958333333333;
  }
  41.6767% {
    opacity: 0.25;
  }
  41.6867% {
    opacity: 1;
  }
  1.67667% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.270958333333333;
  }
}
@-webkit-keyframes opacity-60-25-6-12 {
  0% {
    opacity: 0.375125;
  }
  50.01% {
    opacity: 0.25;
  }
  50.02% {
    opacity: 1;
  }
  10.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.375125;
  }
}
@-webkit-keyframes opacity-60-25-7-12 {
  0% {
    opacity: 0.479291666666667;
  }
  58.3433% {
    opacity: 0.25;
  }
  58.3533% {
    opacity: 1;
  }
  18.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.479291666666667;
  }
}
@-webkit-keyframes opacity-60-25-8-12 {
  0% {
    opacity: 0.583458333333333;
  }
  66.6767% {
    opacity: 0.25;
  }
  66.6867% {
    opacity: 1;
  }
  26.6767% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.583458333333333;
  }
}
@-webkit-keyframes opacity-60-25-9-12 {
  0% {
    opacity: 0.687625;
  }
  75.01% {
    opacity: 0.25;
  }
  75.02% {
    opacity: 1;
  }
  35.01% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.687625;
  }
}
@-webkit-keyframes opacity-60-25-10-12 {
  0% {
    opacity: 0.791791666666667;
  }
  83.3433% {
    opacity: 0.25;
  }
  83.3533% {
    opacity: 1;
  }
  43.3433% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.791791666666667;
  }
}
@-webkit-keyframes opacity-60-25-11-12 {
  0% {
    opacity: 0.895958333333333;
  }
  91.6767% {
    opacity: 0.25;
  }
  91.6867% {
    opacity: 1;
  }
  51.6767% {
    opacity: 0.25;
  }
  100% {
    opacity: 0.895958333333333;
  }
}
/*layer-photo*/
.layer-image-photo {display: none; position: fixed;top: 0;left: 0; width: 100%; height: 100%; background-color: var(--black-shadow);z-index: 9999; display: flex;align-items: center; justify-content: center;}
.layer-image-photo img { max-width: 96%; max-height: 96%; margin-top:-2%;display: block;}

/*flex-panel*/
.mbui-flex-panel{display:flex;flex:1;align-items:flex-start;font-size:0}
.mbui-flex-avatar{margin-right:12px}
.mbui-flex-avatar-img{width: 72px; height:72px;}
.mbui-flex-avatar-img img{width: 100%; height:100%; border-radius: 4px;} 
.mbui-flex-content{color: var(--color-gray-900);}
.mbui-flex-title{font-weight:600;font-size:16px;}
.mbui-flex-description{font-size:14px; line-height:1.5}
.mbui-section-title{padding:12px; position: relative; line-height:1.36; font-size:14px; display: flex;align-items: center; justify-content:space-between}
/*文件上传*/
.mbui-file-list .mbui-file-div{display: flex; align-items: center; padding: 4px 32px 4px 4px; background-color:var(--color-gray-100); border-radius:4px; line-height:1.8; position:relative; margin-bottom:8px;}
.mbui-file-div .mbui-file-icon{width:45px;height:45px; line-height:45px; margin-right:8px; overflow:hidden}
.mbui-file-div .mbui-file-icon.file-img{width:80px;}
.mbui-file-div .mbui-file-icon img{width:100%;height:100%;border-radius:3px;object-fit: cover;}
.mbui-file-div .mbui-file-icon i{font-size:40px;}
.mbui-file-div .mbui-file-info {width:calc(100% - 50px)}
.mbui-file-div .mbui-file-name {font-size:15px;}
.mbui-file-div .mbui-file-size {font-size: 12px;color: var(--color-gray-400);}
.mbui-file-div .mbui-file-del{ width: 30px; height: 30px;position:absolute;top:14px; right:2px; font-size:20px;line-height:28px; text-align:center; color:var(--color-gray-500);}

/*人员选择*/
.mbui-picker-search{margin: 0;padding:6px 12px;position: relative;}
.mbui-picker-search:after{ content: " ";pointer-events: none; position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-bottom: 1px solid var(--color-gray-100);
 -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mbui-picker-search .search-input {width: 100%; padding: 10px; border: none; background: #f5f7fa; border-radius: 4px; font-size: 16px; color: #333;}
.mbui-picker-tags{padding:3px 12px; font-size:14px;}
.mbui-picker-tags .tags-search{display: inline-block; line-height: 1.40625; padding: 6px 12px; margin:3px 6px 3px 0;border-radius:1rem; background-color:#fff;}
.mbui-picker-tags .tags-search.active{background-color:#333333; color:#ffffff}

.mbui-picker-selector {background-color:var(--color-white);width:100%;height:100vh;position:fixed;top:0;left:0;z-index:99;}
.mbui-picker-selector .mbui-bar:before { content: " ";pointer-events: none; position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
 -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.mbui-picker-item{margin: 0;padding: 10px; color: var(--color-gray-900); text-align: left; background: var(--color-white); position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.mbui-picker-item:before{ content: " ";pointer-events: none; position: absolute; bottom: 0; left: 0; width: 200%; height: 0; border-top: 1px solid var(--color-gray-100);
 -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.mbui-picker-selector .letters {display: flex; flex-direction: column; align-items: center; position: fixed; top: 50%; right: 0; z-index:100; width:36px; text-align:center; transform: translateY(-50%);}
.mbui-picker-selector .letters a { margin: 2px; text-decoration: none; font-size:12px; color: var(--color-gray-900);}
.mbui-picker-selector .contacts{ padding: 0 0 48px; margin:0; height:100vh; overflow-y:auto;}
.mbui-picker-selector .contacts .mbui-contacts-title{padding:8px 16px; background-color:var(--color-gray-50); font-size:12px; color:var(--color-gray-400);}
.mbui-picker-selector .lists{padding: 0; margin:0; height:calc(100vh - 46px); overflow-y:auto;}
.mbui-picker-selector .data-lists{height:calc(100vh - 96px);}
/*picker-radio*/
.mbui-picker-item .mbui-input-radio{width: 19px; height: 19px; margin-left:4px; appearance: none; position: relative;}
.mbui-picker-item .mbui-input-radio:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 50%; vertical-align: bottom;}
.mbui-picker-item .mbui-input-radio:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 50%; vertical-align: bottom;}
.mbui-picker-item .mbui-input-radio:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: bottom; transform: rotate(-45deg);}

/*picker-checkbox*/
.mbui-picker-item .mbui-input-checkbox{width: 19px; height: 19px; margin-left:4px; appearance: none; position: relative;}
.mbui-picker-item .mbui-input-checkbox:before{content: ''; width: 19px; height: 19px; border: 1px solid var(--color-gray-400); display: inline-block; border-radius: 3px; vertical-align: bottom;}
.mbui-picker-item .mbui-input-checkbox:checked:before{ content: ''; width: 19px; height: 19px; border: 1px solid var(--color-blue-600); background:var(--color-blue-600); display: inline-block; border-radius: 3px; vertical-align: bottom;}
.mbui-picker-item .mbui-input-checkbox:checked:after{ content: ''; width: 10px; height:5px;border: 2px solid var(--color-white); border-top: transparent; border-right: transparent;text-align: center; display: block; position: absolute; top: 6px; left:5px; vertical-align: middle; transform: rotate(-45deg);}

.mbui-picker-item .mbui-picker-avatar{margin-left:12px; margin-right:8px;}

/*comment*/
.mbui-comment-box{display: flex; align-items:flex-start; background-color:var(--color-white); padding:12px;}
.mbui-comment-box .comment-avatar{width: 32px;}
.mbui-comment-box .comment-image{width:32px; height:32px; border-radius:50%}

.mbui-comment-box .comment-body{font-size:16px; margin-left:12px; line-height:1.5; width:100%;}
.mbui-comment-box .comment-meta span{margin-right:12px; font-size:12px; color:var(--color-gray-400);}
.mbui-comment-box .comment-content{padding:4px 0;}
.mbui-comment-box .comment-actions a{color:var(--color-blue-400); cursor:pointer; font-size:12px;}
.mbui-comment-box .comment-actions a:hover{color:var(--color-blue-600);}
.mbui-comment-box fieldset{border:1px solid var(--color-gray-300); border-radius:3px; background-color:var(--color-gray-100); color:var(--color-gray-500); font-size:14px; padding:8px;}
.mbui-comment-box .comment-btn{margin:4px 0;}

/*img*/
.mbui-img-cover{width:100%; position:relative; padding-top: 100%; border-radius: 3px; overflow: hidden; background-color: var(--color-gray-100);}
.mbui-img-cover.img3-2{padding-top: 66.666666%;}
.mbui-img-cover.img4-3{padding-top: 75%;}
.mbui-img-cover.img16-9{padding-top: 56.25%;}
.mbui-img-cover.img16-10{padding-top: 62.5%;}
.mbui-img-cover img{width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left:0; border-radius:3px;}

/*pagebox*/
.mbui-pagebox{width:100%; text-align:center; font-size:14px;}
.mbui-pagebox a,.mbui-pagebox span{min-width:16px; height:33px; line-height:33px;  margin:0 4px; padding:0 10px; color:var(--color-gray-700); border-radius:1px; text-align:center; border:1px solid var(--color-gray-300); background-color:var(--color-white); display:inline-block;}
.mbui-pagebox span{background-color:var(--color-blue-600); color:var(--color-white); border:1px solid var(--color-blue-600);}
.mbui-data-none{padding:30px 0; text-align: center; color:var(--color-gray-400);}
.mbui-data-none img{width:200px}

/*bar*/
.mobile-bar{padding: 12px; position: relative; align-items: center; line-height: 1.41176471; font-size: 16px; color: var(--color-gray-900);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
	justify-content: space-between;
}
.mobile-bar::after{content: " ";position: absolute; left: 0;bottom: 0; right: 0; height: 1px; border-top: 1px solid var(--color-gray-100);  color: var(--color-gray-100); z-index: 2;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.mobile-bar-title{font-size:16px; font-weight:800;}
.tabbar-space{width: 100%; height:60px;}


/*calendar*/
.calendar {background-color:var(--color-white); font-size: 14px; color: var(--color-black);}
.calendar-header{background-color: #3875C5;padding: 12px 16px;text-align: center; position:relative;}
.calendar-select {line-height: 1.5;color: var(--color-gray-500);margin: 0;padding: 0;list-style: none;display: inline-block;position: relative;outline: 0;box-sizing: border-box;}
.calendar-column-header,.calendar-cell {width: 14%}
.calendar-column-header{font-weight: 400;text-align: center; line-height:2;}
.calendar-header i {position: absolute;top: 50%; width: 30px; height: 30px; margin-top: -15px; font-size: 16px;line-height: 30px;text-align: center; cursor: pointer;}
.calendar-header i.calendar-next {right: 12px;}
.calendar-header i.calendar-pre{left:12px;}
.calendar-header i:after {position: absolute; top: 50%;left: 50%; content: ''; width: 14px; height: 14px; margin-top: -7px;  margin-left: -5px; border-top:2px solid var(--color-white); border-left: 2px solid var(--color-white);}
.calendar-pre:after {transform: rotateZ(-45deg);}
.calendar-next:after {transform: rotateZ(135deg);}

.calendar-table{width:100%;table-layout: fixed;}
.calendar-cell{font-size: 12px;color: var(--color-gray-500);}
.calendar-cell.calendar-last-month-cell,.calendar-cell.calendar-next-month-cell {color:var(--color-gray-300);}
.calendar-date {margin: 0 4px;}
.calendar-cell.calendar-thisMonth .calendar-date,.calendar-cell.calendar-today .calendar-date {background-color: var(--color-blue-50);border-radius:4px;color:var(--color-blue-600)}
.calendar-cell.calendar-today .calendar-date {background-color:var(--color-blue-600);border-radius:4px;color:var(--color-white)}
.calendar-date:hover{background: var(--color-blue-100);border-radius:4px;}
.calendar-value {text-align: center;height: 44px;line-height:44px;position: relative;font-size:16px;width: 100%;}
.calendar-event {position:absolute;width:6px;height:6px;border-radius:50%;background-color:var(--color-red-600);top:6px;right:6px;}
.calendar-select {font-size: 18px;vertical-align: middle;color: var(--color-white)}
.calendar-year-text,.calendar-month-text {line-height: 30px;padding:0 10px;}
/*calendar-dropdown*/
ul.dropdown-month,.dropdown-month li,ul.dropdown-year, .dropdown-year li {list-style: none;text-align: center;padding: 0;margin: 0;}
.dropdown-month.open,.dropdown-year.open {display: inline-block;margin-top: 1px;width: 100%;}
.dropdown-month, .dropdown-year {height: 240px;overflow-y: auto;overflow-x: hidden;display: none;position: absolute;left: 0;top: 100%;background: var(--color-white);width: 50px;border: 1px solid #eee;z-index:1;box-shadow: 0px 6px 12px rgba(0,0,0,0.175);-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)}
.dropdown-month .month-item,.dropdown-year .year-item {font-size: 14px;position: relative;display: block;padding: 6px 3px;line-height: 22px;font-weight: normal;color:var(--color-gray-500);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-webkit-transition: background 0.3s ease;transition: background 0.3s ease;}
.month-item:hover,.year-item:hover{background: var(--color-blue-50);}
.year-item.active {background-color: var(--color-gray-100);font-weight: 600;color: rgba(0, 0, 0, 0.65);}

/*loadData*/
.mbui-search{width:100%; box-shadow: 0 -1px 0 0 rgba(0,0,0,0.2); background-color:var(--color-white); position:fixed;left:0;top:0;z-index:9}
.mbui-search-div{padding:6px; display: flex; align-items: center;}
.mbui-search-icon{padding:0 6px; width:30px; height:32px; line-height:32px; border: none; background: var(--color-gray-100); border-radius: 5px 0 0 5px; font-size: 14px; color: var(--color-gray-300);}
.mbui-search-box{width:100%; height:32px; flex-grow: 1; vertical-align: middle; background: var(--color-gray-100); border-radius:0 5px 5px 0;}
.mbui-search-input{padding:8px 2px 5px; width:100%; border: none; background: var(--color-gray-100); border-radius: 5px; font-size: 14px; color: var(--color-gray-700);}
.mbui-search-reset{background-color:var(--color-white); border-color:var(--color-white); height:32px; margin-left:3px;}
.mbui-search-menu{width:44px; height:32px; display: flex; font-size: 24px; padding-left:10px; align-items: center; vertical-align: middle;overflow: hidden;color: var(--color-gray-500);}
.mbui-search-menu i{font-size: 24px;}

.mbui-search + .load-data-list{padding-top:54px;}
.mbui-search.mbui-search-tab + .load-data-list{padding-top:98px;}
.load-data-list{width:100%; box-sizing:border-box;}
.load-data-list a{width:100%; display:block; box-sizing: border-box;}
.load-data-list dl{background-color:var(--color-white); padding:12px;}
.load-data-list dt{margin-bottom:6px;}
.load-data-list dd{line-height:24px;}
.load-data-span i{color:var(--color-gray-400);}
.load-data-span + .load-data-span{margin-left: 16px;}
.load-data-none{padding-top:50px; padding-bottom:20px; color:var(--color-gray-400); text-align:center; display:none;}
.load-data-none.load-data-0{display:block;}
.load-data-none i{font-size:24px;}
.load-data-loading {padding:12px 0;text-align:center;}
.load-data-loading span{white-space: nowrap; display: inline-block; padding-right:20px; height: 24px; line-height:24px; position: relative; color:var(--color-gray-400)}
.load-data-loading span:after {content: '.'; color: var(--color-blue-600); animation: loading-dots 1.2s infinite; font-size: 26px; position: absolute; bottom: 8px; left: 88%;}
@keyframes loading-dots {
    0%,100% {
      content: '.';
	  color:var(--color-green-600);
    }
    25% {
      content: '..';
	  color:var(--color-blue-600);
    }
    50% {
      content: '...';
	  color:var(--color-orange-600);
    }
    75% {
      content: '';
	  color:var(--color-yellow-600);
    }
}
.load-data-end{text-align:center; color:var(--color-gray-300); padding:8px 0; font-size:12px;}

/*flow-check*/
.flow-flex-row {box-direction: row;box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flow-flexbox { width: 100%;text-align: left;display: flex;box-align: center;align-items: center;flex-wrap: wrap; line-height:1.2;}
.check-item{width: auto; -ms-flex-negative: 0; flex-shrink: 0; padding:4px 0}
.check-item i{margin-right:3px; color:var(--color-gray-500);}
.check-item span{color:var(--color-gray-400);margin:0 3px;}
.check-item .iconfont {font-size:18px;}
.check-item .iconfont.icon-arrow{font-size:12px;}
.iconfont[data-ok]{color:var(--color-green-600)}
.iconfont[data-no]{color:var(--color-red-600);}
.check-item-status{color:var(--color-gray-400); font-size:12px; margin-left:3px;}

/*fixed-bar*/
.mbui-fixed-bar {position: fixed; bottom:160px; height:44px; left:8px;z-index: 8;}
.fixed-bar-box {padding:4px;z-index: 8;border-radius:50%; position: relative; background-color:var(--color-blue-500);}

.fixed-bar-btn {position: relative; border: none; background: var(--color-white); width: 36px; height: 36px; border-radius: 50%; line-height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; z-index: 9;}
.fixed-bar-btn:focus {border: none;}

.fixed-bar-btn.active .menutoggle:before,
.fixed-bar-btn.active .menutoggle:after,
.fixed-bar-btn.active .menutoggle span {animation: none;}
.fixed-bar-btn.active .menutoggle span { opacity: 0;}

.fixed-bar-btn.active .menutoggle:before {
    transform: translateY(7px) rotate(135deg);
}

.fixed-bar-btn.active .menutoggle:after {
    transform: translateY(-7px) rotate(-135deg);
}

span.menutoggle {width: 24px; height: 24px; position: relative;cursor: pointer; display: block;}
span.menutoggle:before,
span.menutoggle:after,
span.menutoggle span { background: var(--color-blue-600); content: "";  display: block;  height: 3px;  border-radius: 8px; margin: 4px 0; transition: 0.5s;}

.fixed-bar-item {position: relative; width: 44px; height: 44px; border-radius: 50%; transform: translatey(-100%); opacity: 0; visibility: hidden;}
.fixed-bar-item.open {opacity: 1; visibility: visible;}
.fixed-bar-item a {width: 44px; height: 44px; border-radius: 50%; background-color: var(--color-gray-200); font-size: 12px; text-align: center; position: absolute; right: -24px; top: 0;  bottom: 0; color: #ffffff; transition-duration: 0.3s; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; line-height:1.32;}
.fixed-bar-item.open a:nth-of-type(1) {
    transform: rotate(-90deg) translateX(80px) rotate(90deg);
    transition-delay: 0s;
    background: var(--color-purple-600);
}

.fixed-bar-item.open a:nth-of-type(2) {
    transform: rotate(-45deg) translateX(80px) rotate(45deg);
    transition-delay: 0.1s;
    background: var(--color-orange-600);
}

.fixed-bar-item.open a:nth-of-type(3) {
    transform: rotate(0deg) translateX(80px) rotate(0deg);
    transition-delay: 0.2s;
    background: var(--color-blue-600);
}

.fixed-bar-item.open a:nth-of-type(4) {
    transform: rotate(45deg) translateX(80px) rotate(-45deg);
    transition-delay: 0.3s;
    background: var(--color-cyan-600);

}

.fixed-bar-item.open a:nth-of-type(5) {
    transform: rotate(90deg) translateX(80px) rotate(-90deg);
    transition-delay: 0.4s;
    background: var(--color-green-600);
}


/*picker*/
.lay-picker {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 99999;display: none;overflow: hidden;}
.lay-picker-shade {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: var(--black-shadow);z-index: 9;}
.lay-picker-container {position: absolute;left: 0;bottom: 0;z-index: 99;width: 100%;background: var(--color-white);color: var(--color-gray-900);font-size: 16px;
	-webkit-transition: transform .25s;
	-webkit-transform: translate3d(0, 100%, 0);
	transition: transform .25s;
	transform: translate3d(0, 100%, 0);
}

.lay-picker-header {height: 50px;line-height: 50px;border-bottom: 1px solid #f3f3f3;margin-bottom: 1px;margin: 0px 12px;}
.lay-picker-title {text-align: center;position: absolute;top: 0;left: 0;z-index: 9;width: 100%;color: var(--color-gray-900);}
.lay-picker-search{margin: 0 12px; text-align: center; padding: 5px 0;}
.lay-picker-search input{text-align: center; height: 40px; line-height: 40px; border: none; border-bottom: 1px solid var(--color-gray-300);font-size: 14px;
    transition: all .2s;
    -webkit-transition: all .2s;
    box-shadow: none!important;
}
.lay-picker-search input:hover,.lay-picker-search input:focus{ border: none!important; border-bottom: 1px solid var(--color-gray-300)!important;}
.lay-picker-btn {position: relative;z-index: 99;}
.lay-picker-cancel {color: var(--color-gray-500);}
.lay-picker-clear {margin-left:12px;color: var(--color-orange-600);}
.lay-picker-confirm {float: right;color: var(--color-blue-600);}

.lay-picker-shadowup,.lay-picker-shadowdown {height: 120px;width: 100%;position: absolute;left: 0;z-index: 50;}
.lay-picker-shadowup {height: 115px;top: -1px;
	background: -webkit-linear-gradient(to bottom, var(--color-white), rgba(255, 255, 255, .6));
	background: linear-gradient(to bottom, var(--color-white), rgba(255, 255, 255, .6));
	pointer-events: none;
	border-bottom: 1px solid var(--color-gray-300);
}

.lay-picker-shadowdown {height: 130px;bottom: 0;
	background: -webkit-linear-gradient(to top, var(--color-white), rgba(255, 255, 255, .6));
	background: linear-gradient(to top, var(--color-white), rgba(255, 255, 255, .6));
	pointer-events: none;
	border-top: 1px solid var(--color-gray-300);
}

.lay-picker-content {position: relative;height: 300px;margin: 15px;overflow: hidden;}
.lay-picker-box {overflow: hidden;}
.lay-picker-box:after {display: table;height: 0;clear: both;content: '';}
.lay-picker-list-wrap {float: left;height: 300px;overflow: hidden;
	-webkit-transition: width .2s;
	transition: width .2s;
}
.lay-picker-list-wrap ul {position: relative;padding: 100px 0;margin-top: 16px;
	-webkit-transition: transform .1s ease-out;
	transition: transform .1s ease-out;
}
.lay-picker-list-wrap ul:after {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 55;content: '';}
.lay-picker-list-wrap li {line-height: 50px;height: 50px;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

/** picker wechat skin*/
.lay-picker-bottom {text-align: center;margin-top: 10px;margin-bottom: 30px;font-size: 16px;}
.lay-picker-bottom-btn {border-radius: 6px;display: inline-block;width: 30%;height: 40px;line-height: 40px;}
.lay-picker-bottom-btn-cancel {color: var(--color-gray-500);background: var(--color-gray-200);margin-right: 3%;}
.lay-picker-bottom-btn-clear {color: var(--color-white);background: var(--color-orange-600);margin-right: 3%;}
.lay-picker-bottom-btn-confirm {color: var(--color-white);background:  var(--color-blue-600);}

/** skeleton*/
.skeleton-container {position: absolute;top: 0;left: 0; width: 100%; height: 100%; padding: 15px; background: #ffffff; z-index: 1000; display: flex; flex-direction: column;gap: 20px;}
.skeleton-item {background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; border-radius: 6px; animation: skeleton-loading 2s infinite;}
.skeleton-header {height: 30px; width: 60%;margin-bottom: 15px;}
.skeleton-avatar {width: 60px; height: 60px; border-radius: 50%;}
.skeleton-line {height: 15px; width: 100%;}
.skeleton-line.short {width: 80%;}
.skeleton-line.medium { width: 90%;}
.skeleton-card {height: 100px;border-radius: 8px;}
@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
.item-key{position: absolute;top: 0; left: 0; z-index:9; width: 22px;height: 22px; line-height:20px; background-color:#ffb800; border-radius:0 0 5px 0; text-align:center; font-size:12px; color:#fff;}
.item-up{position: absolute;top: 24px; left: 0; z-index:9; padding:2px 0; width: 22px;height: 40px; line-height:16px; background-color:#1e9fff; border-radius:0 5px 0 0; text-align:center; font-size:11px; color:#fff;}
.item-down{position: absolute;top: 64px; left: 0; z-index:9; padding:2px 0; width: 22px;height: 40px; line-height:16px; background-color:#16b777; border-radius:0 0 5px 0; text-align:center; font-size:12px; color:#fff;}
.item-close{position: absolute;top: -26px; right: -26px; z-index:9; width: 52px;height: 52px; cursor: pointer; background-color:#ff5722; border-radius: 50%; overflow: hidden;}
.item-close::before {font-size: 0px; line-height: 0; display: block; width: 20px; height: 20px; color: transparent;position: absolute; bottom: 4px;left: 6px;content: "Close"; background-position: -260px 0px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
}