/*公共颜色*/
:root {
    --N1-1: #f6f7f8; /*  页面背景色 [通用页面背景色使用] */
    --N1-2: #FFFFFF; /*  白色 */

    --B1-1: #5c81ae; /* 品牌色浅色 */
    --B1-5: #214b80; /* 品牌色*/
    --B1-6: #214b80; /* 品牌色*/
    --B1-7: #bcd1e6; /* 品牌色轻色 */

    --S1-6: #fdae38; /* 金色 S1-6 [页面辅助色]*/
    --S2-6: #ed2f53; /* 红色 S2-6  [文本颜色、错误提示] */
    --S3-6: #4cd964; /* 绿色 S3-6  [正确提示] */
    --S4-6: #3979e5; /* 蓝色 S4-6  [正确提示] */
    --S5-6: #717485; /* 灰色 S5-6  [正确提示] */
    --S6-6: #999; /* 灰色 S5-6  [正确提示] */
    /* 文字颜色*/
    --N2-1: #363A44; /* 深色 [文本颜色、行动点图标与文字]*/
    --N2-2: #686b73; /* 灰色 [弱化文本]*/
    --N2-6: #999999; /* 灰色 [弱化文本]*/
    --N2-3: #B3B5B9; /* 灰色 [水印文本]*/
    --N2-4: #B9BCBF; /* 灰色 [不可用颜色]*/
    --N2-5: #FFFFFF; /* 白色 [白色文字]*/
    /* 遮罩层颜色*/
    --N3-1: #000000; /* 遮罩层颜色 [通用页面弹出层下使用的遮罩层]*/
    --N4-1: #E8E9EC; /* 分割线\描边线颜色 */
    /* 圆角大小*/
    --BorderRadius-min: 5px; /* 圆角小*/
    --BorderRadius-max: 10px; /* 圆角大*/
    /* 间距s*/
    --S1: 6px; /* 间距s1*/
    --S2: 10px; /* 间距s2*/
    /* 常规版*/
    /* 文字大小*/
    --headilneSize: 16px; /* 页面标题*/
    --titleSize: 18px; /* 标题中*/
    --SubheadSize: 16px; /* 标题小*/
    --ContentSize: 14px; /* 正文*/
    --CaptionSize: 13px; /* 水印文字 / 辅助文字*/
    --FootnoteSize: 12px; /* 备注*/

    --max_width: 1300px;
    --homemax_width: 1300px;
    --min_width: 1200px;
    --homemin_width: 650px;
    /* Element Plus*/
    --el-color-primary: #3979e5;
}


/*grid  24宫格*/
.grid{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}
.x0,.x1,.x2,.x3,.x4,.x5,.x6,.x7,.x8,.x9,.x10,.x11,.x12,.x13,.x14,.x15,.x16,.x17,.x18,.x19,.x20,.x21,.x22,.x23,.x24,.xx20,
.mini-x0,.mini-x1,.mini-x2,.mini-x3,.mini-x4,.mini-x5,.mini-x6,.mini-x7,.mini-x8,.mini-x9,.mini-x10,.mini-x11,.mini-x12,.mini-x13,.mini-x14,.mini-x15,.mini-x16,.mini-x17,.mini-x18,.mini-x19,.mini-x20,.mini-x21,.mini-x22,.mini-x23,.mini-x24,.mini-xx20,
.small-x0,.small-x1,.small-x2,.small-x3,.small-x4,.small-x5,.small-x6,.small-x7,.small-x8,.small-x9,.small-x10,.small-x11,.small-x12,.small-x13,.small-x14,.small-x15,.small-x16,.small-x17,.small-x18,.small-x19,.small-x20,.small-x21,.small-x22,.small-x23,.small-x24,.small-xx20,
.middle-x0,.middle-x1,.middle-x2,.middle-x3,.middle-x4,.middle-x5,.middle-x6,.middle-x7,.middle-x8,.middle-x9,.middle-x10,.middle-x11,.middle-x12,.middle-x13,.middle-x14,.middle-x15,.middle-x16,.middle-x17,.middle-x18,.middle-x19,.middle-x20,.middle-x21,.middle-x22,.middle-x23,.middle-x24,.middle-xx20,
.big-x0,.big-x1,.big-x2,.big-x3,.big-x4,.big-x5,.big-x6,.big-x7,.big-x8,.big-x9,.big-x10,.big-x11,.big-x12,.big-x13,.big-x14,.big-x15,.big-x16,.big-x17,.big-x18,.big-x19,.big-x20,.big-x21,.big-x22,.big-x23,.big-x24,.big-xx20,
.large-x0,.large-x1,.large-x2,.large-x3,.large-x4,.large-x5,.large-x6,.large-x7,.large-x8,.large-x9,.large-x10,.large-x11,.large-x12,.large-x13,.large-x14,.large-x15,.large-x16,.large-x17,.large-x18,.large-x19,.large-x20,.large-x21,.large-x22,.large-x23,.large-x24,.large-xx20{position:relative;width:100%;}
.x0,.mini-x0,.small-x0,.middle-x0,.big-x0,.large-x0{max-width:100%;}
.x0{width:auto;}.x1{width:4.166666666666667%;}.x2{width:8.333333332%;}.x3{width:12.49999999%;}.x4{width:16.66666666%;}.x5{width:20.83333333%;}.x6{width:24.999999996%;}.x7{width:29.1666662%;}.x8{width:33.33333286%;}.x9{width:37.49999994%;}.x10{width:41.6666666%;}.x11{width:45.83333326%;}.x12{width:50%;}
.x13{width:54.166666658%;}.x14{width:58.33333332%;}.x15{width:62.4999985%;}.x16{width:66.666665%;}.x17{width:70.83333%;}.x18{width:74.999998%;}.x19{width:79.166665154%;}.x20{width:83.333331814%;}.x21{width:87.499998474%;}.x22{width:91.66666514%;}.x23{width:95.8333318%;}.x24{width:100%;}
.xx20{width: 20%;}
.fc { clear: both; }
.haibao_sj { display: none;}


.xl_input{ line-height:40px; border:1px solid #f1f1f1; padding:0 10px; color:#333;}

/*常规样式*/
*{ padding: 0; margin: 0;	font-family: "微软雅黑", Microsoft yahei;font-size: 14px; }
html {	overflow-x: hidden;	font-size: 14px;	position: relative;	min-height: 100%;	background: var(--N1-1);}
body{background: var(--N1-1); margin: 0; padding: 0;}
.content_top{ max-width:var(--max_width); margin: auto;}
.content,.container{  max-width:var(--max_width); min-width:var(--min_width); margin: auto; padding:0 20px;}
.content_home{  max-width:var(--homemax_width); min-width:var(--homemin_width); margin: auto;}
img { border: 0; vertical-align: bottom;	max-width: 100%;}
a, a:focus, a:hover, a:active { color: var(--N2-1); text-decoration: none; cursor: pointer;}
a:visited, a:link, a.href{ color: var(--S4-6); text-decoration: none; cursor: pointer;}
table { width: 100%; max-width: 100%; border-collapse: collapse; border-spacing: 0; border: 1px solid var(--N4-1);}
tr{position: relative; flex-direction: row; align-items: center;}
td, th { padding:.5em; font-size: 14px; text-align: center; border-right: 1px solid var(--N4-1); border-bottom: 1px solid var(--N4-1);}
table thead{background:var(--N1-1);}
table thead td{ line-height:22px; padding:10px ; text-align:center; font-size:15px; color:var(--N2-1);}
table thead td.with90 { width:90px;}
table thead td.with120 { width:120px;}
table thead td.with150 { width:150px;}
table thead td.with180 { width:180px;}
table thead td.with200 { width:200px;}
table thead td.with240 { width:240px;}
table tbody td{ line-height:20px; padding: 8px; text-align:center; font-size:14px; color:var(--N2-2); }
table tbody td.texta_l {text-align:left;}


.red{color:var(--S2-6) !important;}
.blue{color:var(--S4-6) !important;}

/* 常规版——文字标题*/
.headilne{font-size: var(--headilneSize); font-weight: bold; color:var(--N2-5);} /* 页面标题*/
.title{font-size: var(--titleSize); font-weight: bold; color:var(--N2-1); line-height: 36px;} /* 标题中*/
.Subhead{font-size: var(--SubheadSize); font-weight: bold; color:var(--N2-1);line-height: 30px;} /* 标题小*/
.Subhead_min{font-size: var(--SubheadSize);  color:var(--N2-1);line-height: 30px;} /* 标题小*/
.Content{font-size: var(--ContentSize); color:var(--N2-2); line-height: 26px;} /* 正文*/
.Content_fw{font-size: var(--ContentSize); color:var(--N2-1);  font-weight: 600;} /* 正文加粗颜色加深*/
.Caption{font-size: var(--CaptionSize); color:var(--N2-3);} /* 水印文字 / 辅助文字*/
.Caption_1{font-size: var(--CaptionSize); color:var(--N2-6);} /* 水印文字 / 辅助文字*/
.Footnote{font-size: var(--FootnoteSize); color:var(--N2-3); line-height: 22px;} /* 备注*/



/*标题只显示行数*/
.Showline_1 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;}
.Showline_2 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;	-webkit-line-clamp: 2;	-webkit-box-orient: vertical; height:42px; }
.Showline_3 { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;	-webkit-line-clamp: 3;	-webkit-box-orient: vertical;}


/* div富文本框*/
.xl_werd_fwbkbj {background: #fff;border: none;line-height: 26px; min-height :120px; color : var(--N2-2 ); user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; padding-left: 5px;}
.xl_werd_fwbkbj:empty::before {content: attr(placeholder);color: #ccc;}
.xl_werd_fwbkbj:focus-visible {border: none;background: none;outline: none;}



/* 提示*/
.xl_dian1{ /* new 提示 （点）*/background:var(--N2-2); display:inline-block; width:5px; height:5px; border-radius:5px; }
.xl_dian11{ /* new 提示 （点）*/background:var(--N2-2); display:inline-block; width:5px; height:5px; border-radius:5px; margin-right:10px;}
.xl_dian{ /* new 提示 （点）*/background:var(--S2-6); display:inline-block; width:8px; height:8px; border-radius:5px; margin-right:10px;}
.xl_bitian {/* 必填提示*/ background: #feb32e;padding: 0px 6px;color: #fff;font-size: 13px;border-radius: 20px;line-height: 22px; font-size:13px;font-weight: normal;}
.xl_chuiban{ /* 催办*/ background:var(--S4-6); color:var(--N2-5); font-weight:normal; padding:0 8px; border-radius:20px; border-top-right-radius:0px; line-height:20px; font-size:13px; display:inline-block;}

.prompt{ /* 标签*/background:var(--S1-6); line-height:24px; padding:0 8px; border-radius:5px; display:inline-block; color:var(--N2-5);}

.xl_Signedin{ /* 已签到*/ border:1px solid var(--S4-6); color:var(--S4-6); font-weight:normal; padding:0 8px; border-radius:10px; line-height:24px; display:inline-block;}
.xl_NotSignedin{ /* 未签到*/ border:1px solid var(--S1-6); color:var(--S1-6); padding:0 8px; font-weight:normal; border-radius:10px; line-height:24px; display:inline-block;}
.xl_grey{ /* 灰色提示 已补卡*/ border:1px solid var(--S5-6); color:var(--S5-6); padding:0 8px;min-width:46px; text-align:center;  font-weight:normal; border-radius:10px; line-height:24px; display:inline-block;}
.xl_qingjia{ /* 绿色提示 已请假*/ border:1px solid var(--S3-6); color:var(--S3-6); padding:0 8px;min-width:46px; text-align:center;  font-weight:normal; border-radius:10px; line-height:24px; display:inline-block;}



/* 按钮*/
.anniu{background-image: linear-gradient(to bottom, var(--B1-6),var(--B1-7));  cursor: pointer; border-radius: 20px; display: inline-block; font-size:15px; line-height: 30px; padding: 0 15px; color: var(--N2-5);}
.abnormal_bottom{/*按钮  异常处理*/ line-height:32px; display:inline-block;  cursor: pointer; padding:0 20px; color:var(--N2-2); border:1px solid var(--N2-2); border-radius:5px; font-size:16px;}
.fanhui{/* 主色调按钮*/ display: inline-block; padding:0 15px;  cursor: pointer; height: 40px;line-height: 40px; background: var(--B1-1);border-radius: 8px;font-size: 16px; color: var(--N2-5); text-align:center;}
.botton {/* 主色调按钮*/ display: inline-block;  cursor: pointer;  padding:0 20px 0 15px; height: 42px;line-height: 42px; background: var(--B1-1);border-radius: 8px;font-size: 16px; color: var(--N2-5); text-align:center;}
.bottonon{/* 灰色调按钮*/ display: inline-block;   cursor: pointer; padding:0 20px; height: 42px;line-height: 42px; background: #999;border-radius: 8px;font-size: 16px; color: var(--N2-5); text-align:center;}
.bottonon .iconfont,.fanhui .iconfont, .botton .iconfont{/* 主色调按钮*/ color:var(--N1-2); margin-right:10px;  cursor: pointer;  }


.xl_refuse{/* 拒绝按钮*/ display: inline-block; padding:0 20px; height: 40px;line-height: 40px; background: #999;border-radius: 8px;font-size: 16px; color: var(--N2-5); text-align:center;}
.xl_refuse_wz{ /* 拒绝文字提示*/color:var(--S2-6); font-weight:600;}
.xl_pass{/* 通过按钮*/ display: inline-block; padding:0 20px; height: 40px;line-height: 40px; background: var(--B1-1);border-radius: 8px;font-size: 16px; color: var(--N2-5); text-align:center;}
.xl_pass_wz{ /* 通过文字提示*/color:var(--B1-1); font-weight:600;}
.xl_wshengpi_wz{ /* 未审批文字提示*/color:var(--N2-2); font-weight:600;}

.xl_yshengpi{ /* 已审批*/ background:var(--S4-6); color:var(--N2-5);font-size:13px; font-weight:normal; padding:0 8px; border-radius:20px; border-top-right-radius:0px; line-height:22px; display:inline-block;}
.xl_wshengpi{ /* 未审批*/ background:var(--S6-6); color:var(--N2-5);font-size:13px; font-weight:normal; padding:0 8px; border-radius:20px; border-top-right-radius:0px; line-height:22px; display:inline-block;}

.xl_shuoming{ /* 说明*/ background:var(--S1-6); color:var(--N2-5);font-size:13px; font-weight:normal; padding:0 8px; border-radius:20px; line-height:22px; display:inline-block;}


/* 页面按钮在底部*/
.xl_bottom_h{ height:70px;}
.xl_bottom{ position:absolute; display:inline-block; bottom:-20px;}


/* 页面顶部提示条*/
.xl_pointout { /* 提示标签*/padding: 10px;background: #f8efe6;border-radius: 10px;color: var(--N2-2);font-size: 14px;line-height: 20px;}
.xl_pointout .iconfont {color: var(--S1-6);font-size: 18px;font-weight: 600;margin-right: 5px}
.xl_pointout .xl_znr{color: var(--N2-1);font-weight: 600; margin:0 5px;}

/* 框*/
.werd{background:var(--N1-2) ;  padding:  var(--S2); border-radius: var(--BorderRadius-max); box-sizing: border-box;}
.werd_h{background:var(--N1-1) ;  padding: var(--S2); border-radius: var(--BorderRadius-max); box-sizing: border-box;}
.xl_box{ border:1px solid #f4f4f4; padding:10px; border-radius: var(--BorderRadius-max); box-sizing: border-box;}

.werd_img{height:220px; overflow:hidden;}

.xl_uesr_box{ padding:20px 0}
.xl_uesr_box .xl_uesr_img{ border-radius:50%; width:50px; height:50px; overflow:hidden;}
.xl_uesr_box .xl_uesr_nr { width: calc(100% - 80px); margin-left :20px;}

/*对齐方式*/
.xl_space_between { /*两端对其*/ display: flex;flex-wrap: wrap;justify-content: space-between;	}
.xl_flex_start { /*左对其*/ display: flex; flex-wrap: wrap; justify-content: flex-start;}
.xl_flex_center { /*左右居中对其*/ display: flex; flex-wrap: wrap; justify-content:center;}
.xl_flex_end { /*右对其*/ display: flex;flex-wrap: wrap;justify-content: flex-end;	}

.xl_flex_left_center { display: flex; position: relative; flex-direction: row; align-items: center; justify-content: left; }
.xl_flex_end_center { display: flex; position: relative; flex-direction: row; align-items: center; justify-content:flex-end; }
.xl_center_center{ /*上下居中左右居中*/ display: flex;position: relative;justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: row;}
.xl_space_between_center { /*两端对其*/ display: flex; position: relative; flex-direction: row; align-items: center; justify-content: space-between;	}

.xl_align_center{/*上下居中*/display: flex; position: relative; flex-direction: row; align-items: center;}
.xl_align_end{/*上下居底*/display: flex; position: relative; flex-direction: row; align-items: flex-end;}


/*线条*/
.xl_xx { border-bottom:1px solid var(--N4-1);}
.xl_top_xx { border-top:1px solid var(--N4-1);}
.xl_left_x{border-right:1px solid var(--N4-1);}

.xl_left_xx{/*标题左侧的蓝色线条*/  height:18px; width:4px; display:inline-block; background:var(--B1-1); border-radius:2px; margin-right:12px;}

.xl_xxx { border-bottom:1px dashed var(--N4-1);}
.xl_top_xxx { border-top:1px dashed var(--N4-1);}

/*进度条*/
.xl_progress_box{ width:calc(100% - 50px); height:6px; background-color: rgb(235, 238, 245); border-radius:3px; position:relative; }
.xl_progress_nr{ background:var(--B1-1); display:inline-block; height:6px; position:absolute; border-radius:3px; }
.xl_progress_wz{ width:50px; font-size:15px; color:#666; text-align:right;}
/*公共顶部*/


/**/
.padding20 {padding: 20px}
.padding10 {padding: 10px}
.padding5 {padding: 5px}
.padding_bottom10 {padding-bottom: 10px}
.padding_top {padding-top: 10px}
.padding_tb10 {padding: 10px 0;}
.margin10 { margin: 10px;}
.margin_left5 { margin-left: 5px;}
.margin_left10 { margin-left: 10px;}
.margin_left20 { margin-left: 20px;}
.margin_right5 { margin-right: 5px;}
.margin_right10 { margin-right: 10px;}
.margin_right20 { margin-right: 20px;}
.margin_top5 { margin-top: 5px;}
.margin_top_bot5 { margin: 5px 0;}
.margin_top10 { margin-top: 10px;}
.margin_top15 { margin-top: 15px;}
.margin_top20 { margin-top: 20px;}
.margin_bottom10 { margin-bottom: 10px;}
.margin_bottom15 { margin-bottom: 15px;}
.margin_bottom20 { margin-bottom: 20px;}
.margin_bottom5 { margin-bottom: 5px;}

.van-cell-group { margin: 0px;}

/*弹窗*/
.xl_tab{  }
.xl_tab .xl_tab_an{ line-height:50px; width:160px; font-size:17px;text-align:center; border:1px solid #666; border-bottom:0px; background:#f1f1f1; border-radius: 8px 8px 0 0;  color:#666;  margin-right:10px; }
.xl_tab .xl_tab_an.on{ background:var(--B1-5); color:#fff; font-weight:600; border:1px solid var(--B1-5);  border-bottom:0px;}
/*弹窗*/
.xl_guanbi_box{ position:relative;}
.xl_guanbi_icon{ width:28px; height:28px; text-align:center;line-height:28px; border-radius:15px;background:#eee; position:absolute; display:inline-block; top:-5px; right:-5px;}
.xl_guanbi_icon .iconfont{ font-size:18px;}

/*icon*/
.xl_qingjia{ /*icon 请假*/ font-size:30px; color:#0cbf03;}
.xl_buka{ /*icon 补卡 */font-size:34px; color:#fb626d;}



.xl_xz{/*icon ppt*/ font-size:16px; color:#999;}
.icon-ppt{/*icon ppt*/ font-size:30px; color:#0cbf03;}
.icon-excel{ /*icon excel*/ font-size:30px; color:#fb626d;}
.icon-word{ /*icon werd*/ font-size:30px; color:#3979e5;}
.icon-pdf{ /*icon PDF*/ font-size:30px; color:#fdae38;}
.icon-video{ /*icon video*/ font-size:30px; color:#fdae38;}
.icon-qt{ /*icon qt*/ font-size:30px; color:#3979e5;}


.el-dialog{ padding:0px;}
.el-dialog__header{ background: #eee; line-height: 50px; margin-bottom: 10px; padding-bottom:0; padding:0 20px;}
.el-dialog__body{ padding:20px ;}

.el-form-item__label{ width:100px;}