@charset "utf-8";
/* CSS Document */

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tfoot, thead, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;

border: 0;
font-size: 100%;
font-family: Arial,微軟正黑體,Microsoft JhengHei,新細明體,sans-serif;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html{height:100%;}
body{line-height:1; height:100%;}
ol, ul{list-style:inherit;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after{content:''; content: none;}
table{border-collapse:collapse; border-spacing:0;}
sup{vertical-align:super;}

p, ul li{font-size:16px; line-height:1.7em;}

img{max-width:100%; max-height:100%;}

.item-link{
    width:100%;
    height:100%;
    font-size:0px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:30;
	}

.list-setting{padding-left:0; list-style:none;}
.list-setting>li{position:relative;}

.btn a{color:#fff!important;}
.btn:hover a{color:#fff!important;}

input{outline:none!important;}
button:focus{outline:none!important;}

table{
    border:0;
    width:100%;
    margin:15px 0 25px;
    padding:0;
    border-collapse:collapse;
    border-spacing:0;
	}

table tr{padding:5px;}

table th, table td{
	color:#606266;
	text-align:center;
	vertical-align:middle;
	line-height:1.3em;
	padding:10px;
	border:1px solid #e5e7eb;
	}

table th{font-size:16px; letter-spacing:1px;}

table tbody tr:nth-child(odd){background-color:rgba(203,220,235,0.35);}

.tableProgressbar{min-width:200px;}

.dashTable .progress{height:2rem;}

.divide-row{
	padding-top:5px;
	margin-top:5px;
	border-top:1px dashed rgba(204,204,204,0.75);
	}

.formBox{margin-bottom:10px;}

.formBox>label{
	font-size:16px;
	font-weight:bold;
	color:#476eae;
	line-height:1em;
	letter-spacing:3px;
	padding:5px 10px 7px;
	position:relative;
	}

.formBox .formBoxContent{position:relative;}

.formBoxContent>input, .formBoxContent>select, .formBoxContent>textarea{padding:6px 10px;}

.formBoxContent>textarea{min-height:120px;}

.input-group>.shortInput{
	flex-grow:inherit;
	flex-shrink:inherit;
	flex-basis:180px;
	}

.main-header{
	width:100%;
	max-height:100px;
	display:flex;
	position:fixed;
	top:0;
	left:0;
	z-index:1030;
	}

.mainLogo{
	flex-basis:230px;
	height:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	}

.mainLogo span{font-size:20px; color:#fff;}

.main-header .navbar{
	flex:1;
	padding:0;
	border-bottom:1px solid transparent;
    box-shadow:0 1px 4px rgba(0, 21, 41, 0.35);
    background-color:#fff;
	}

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

.sidebarToggleBtn{
	width:45px;
	height:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	}

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

.navTopList li a{color:#000; padding:0 15px;}

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

.navbarMenuList li{margin-right:20px;}
.navbarMenuList li:last-child{margin-right:0;}

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

.navbarMenuList li i{font-size:14px; color:#666;}

.navbarMenuList li span{margin-left:5px; color:#666;}

.navbarMenuList li .userPic{width:25px; height:25px;}

.main-sidebar{
	width:230px;
	height:100%;
	padding-top:50px;
	background-color:#222d32;
	position:fixed;
	top:0;
	left:0;
	z-index:810;
	}

.user-panel{padding:10px; display:flex; align-items:center;}

.userPic{
	width:45px;
	height:45px;
	border-radius:999em;
	overflow:hidden;
	}

.userInfo{padding:5px 5px 5px 15px;}

.userInfo p{
	font-size:16px;
	color:#fff;
	line-height:1em;
	}

.userInfoName{font-weight:bold; margin-bottom:8px;}

.userInfo p i{
	font-size:14px;
	color:#18bc9c;
	margin-right:5px;
	}

.searchBox{
	margin:10px;
    border:1px solid #374850;
	border-radius:3px;
    background-color:#374850;
	display:flex;
	align-items:center;
	}

.searchBox input{
	font-size:14px;
	color:#666;
	box-shadow:none;
    background-color:#374850;
    border:1px solid transparent;
	}

.searchBox i{font-size:14px; color:#666;}

.searchIcon{
	width:38px;
	height:35px;
	display:flex;
	justify-content:center;
	align-items:center;
	}

.sidebarList li{margin:5px 0;}

.sidebarList li a{padding:5px 5px 5px 15px; display:block;}

.sidebarList li i{font-size:16px; color:#b8c7ce; margin-right:5px;}

.sidebarList li span{font-size:16px; color:#b8c7ce;}

.has-drop::after{
	content:"\f104";
	font-size:18px;
	font-family:'Font Awesome 6 Free';
	font-weight:900;
	color:#b8c7ce;
	transition:all 0.5s ease;
	position:absolute;
	top:5px;
	right:15px;
	}

.active::after{transform:rotate(-90deg);}

.sidebarSubList{
	padding-left:10px;
	transition:all 0.5s ease;
	display:none;
	}

.has-drop.active{background-color:#000;}

.has-drop.active .sidebarSubList{display:block;}

.sidebarList li a:hover{background-color:#191e23;}

.content-wrapper{padding-top:50px; margin-left:230px;}

.content-wrapper>.container{
	width:95%;
	max-width:unset;
	padding-top:20px;
	}

.dashboardBlock .box__inner{
	padding:15px;
	border:1px solid #ccc;
	border-radius:15px;
	background-color:#fff;
    box-shadow:0px 0px 10px rgb(0 0 0 / 30%);
	}

.dashboardBlock .dashboardTitle{
	background:linear-gradient(to right,#1581bf,#3db6b1,#3db6b1);
    background:-moz-linear-gradient(to right,#1581bf,#3db6b1,#3db6b1);
    background:-o-linear-gradient(to right,#1581bf,#3db6b1,#3db6b1);
    background:-webkit-linear-gradient(to right,#1581bf,#3db6b1,#3db6b1);
	}

.dashboardTitle h4{
	font-size:20px;
	color:#fff;
	letter-spacing:2px;
	padding-left:10px;
	}

.dashboardSubTitle{
	padding:7px 12px;
	margin:5px 0;
	border-radius:5px;
	background:linear-gradient(to right,#1b3c53,#456882,#456882);
    background:-moz-linear-gradient(to right,#1b3c53,#456882,#456882);
    background:-o-linear-gradient(to right,#1b3c53,#456882,#456882);
    background:-webkit-linear-gradient(to right,#1b3c53,#456882,#456882);
	}

.dashboardSubTitle h5{
	font-size:16px;
	color:#fff;
	letter-spacing:1px;
	}

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

.plusInfoTitle .icon_info{
	font-size:14px;
	font-weight:bold;
	padding:2px 7px;
	margin-left:5px;
	border-radius:999em;
	background-color:#fff;
	}

.dashboardBlock ul{padding-left:27px;}

ul.kpiList{padding-left:10px;}

.kpiList li{
	margin-bottom:15px;
	display:flex;
	align-items:flex-end;
	}

.kpiItemTxt{
	font-size:20px;
	font-weight:bold;
	color:#333;
	}

.kpiItemTxt span{
	font-family:"Oswald", sans-serif;
	font-size:32px;
	font-weight:500;
	padding:0 5px;
	}

.kpiRemarkTxt{font-size:16px; margin-left:13px; color:#666;}

.kpiRemarkTxt span{padding-left:20px; position:relative;}

.rise span::before{
	content:"";
	width:0;
    height:0;
    border-right:6px solid transparent;
	border-left:6px solid transparent;
	border-bottom:12px solid #ea0000;
    position:absolute;
    top:3px;
    left:4px;
	}

.decline span::before{
	content:"";
	width:0;
    height:0;
	border-top:12px solid #009944;
    border-right:6px solid transparent;
	border-left:6px solid transparent;
    position:absolute;
    top:4px;
    left:4px;
	}

.switchBtnBar .btn{font-size:12px; padding:3px 10px;}

.dashboardBlock ul.quickBtnList{
	padding-left:0;
	display:flex;
	justify-content:space-between;
	}

.quickBtnList li{width:19%;}

.quickBtn__inner{
	padding:15px 10px;
	border:3px solid #476eae;
    border-radius:10px;
    background:linear-gradient(to bottom, #fff, #fff, #ddd);
    background:-moz-linear-gradient(to bottom,#fff,#fff,#ddd);
    background:-o-linear-gradient(to bottom,#fff,#fff,#ddd);
    background:-webkit-linear-gradient(to bottom,#fff,#fff,#ddd);
    transition:all 0.5s ease;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
	}

.quickBtnList li i{margin-bottom:15px;}

.quickBtnList li span{
	font-size:16px;
	font-weight:bold;
	color:#154d71;
	line-height:1em;
	margin-bottom:5px;
	}

.quickBtnList li small{
	font-family:"Oswald", sans-serif;
    font-size:18px;
    font-weight:500;
    color:#ccc;
	line-height:1em;
	}

.quickBtnList li:hover .quickBtn__inner{
	background:linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
    background:-moz-linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
    background:-o-linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
    background:-webkit-linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
	}

.quickBtnList li:hover .quickBtn__inner{box-shadow:0px 5px 10px rgb(0 0 0 / 30%);}

.quickBtnList li:hover i{color:#fff;}
.quickBtnList li:hover span{color:#fff;}

.workProcessList{display:flex; flex-wrap:wrap;}

.workProcessList li{
	width:200px;
	padding:10px 10px 10px 35px;
	margin-bottom:10px;
	}

.workProcessList li::after{
	content:"";
	width:169px;
	height:95%;
	border-radius:13px;
    overflow:hidden;
    position:absolute;
    top:3px;
    right:3px;
    z-index:1;
	}

.workProcessList li:nth-child(4n+1)::after{
	background:linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
    background:-moz-linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
    background:-o-linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
    background:-webkit-linear-gradient(to bottom,#113f67,#58a0c8,#58a0c8);
	}

.workProcessList li:nth-child(4n+2)::after{
	background:linear-gradient(to bottom,#3e5f44,#b0ce88,#b0ce88);
    background:-moz-linear-gradient(to bottom,#3e5f44,#b0ce88,#b0ce88);
    background:-o-linear-gradient(to bottom,#3e5f44,#b0ce88,#b0ce88);
    background:-webkit-linear-gradient(to bottom,#3e5f44,#b0ce88,#b0ce88);
	}

.workProcessList li:nth-child(4n+3)::after{
	background:linear-gradient(to bottom,#92487a,#ffd3d5,#ffd3d5);
    background:-moz-linear-gradient(to bottom,#92487a,#ffd3d5,#ffd3d5);
    background:-o-linear-gradient(to bottom,#92487a,#ffd3d5,#ffd3d5);
    background:-webkit-linear-gradient(to bottom,#92487a,#ffd3d5,#ffd3d5);
	}

.workProcessList li:nth-child(4n)::after{
	background:linear-gradient(to bottom,#e2852e,#f5c857,#f5c857);
    background:-moz-linear-gradient(to bottom,#e2852e,#f5c857,#f5c857);
    background:-o-linear-gradient(to bottom,#e2852e,#f5c857,#f5c857);
    background:-webkit-linear-gradient(to bottom,#e2852e,#f5c857,#f5c857);
	}

.workProcessList li .box__inner{
	padding:10px 0;
	text-align:center;
	border-radius:10px;
	background-color:rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter:blur(3.5px);
    backdrop-filter:blur(3.5px);
	position:relative;
	z-index:3;
	}

.processArrow{
	width:50px;
	height:50px;
	border-radius:999em;
	background-color:#fff;
	box-shadow:0px 0px 10px rgb(0 0 0 / 30%);
	position:absolute;
	left:10px;
	bottom:20px;
	z-index:5;
	}

.processArrow::before, .processArrow::after{
	content:"";
	width:15px;
	height:2px;
	background-color:#888;
	position:absolute;
	z-index:10;
	}

.processArrow::before{transform:rotate(40deg); top:20px; left:19px;}
.processArrow::after{transform:rotate(-40deg); top:29px; left:19px;}

.workProcessList li:first-child .processArrow{width:0; height:0;}
.workProcessList li:first-child .processArrow::before{width:0; height:0;}
.workProcessList li:first-child .processArrow::after{width:0; height:0;}

.workProcessTitle{
	font-size:20px;
	font-weight:bold;
	color:#000;
	padding-bottom:10px;
	margin-bottom:10px;
	position:relative;
	}

.workProcessTitle::after{
	content:"";
	width:40px;
	height:1px;
	margin-left:-20px;
	background-color:#333;
	box-shadow:0px 5px 10px rgb(0 0 0 / 10%);
	transition:all 0.5s ease;
	position:absolute;
	left:50%;
	bottom:0;
	}

.workProcessNum span{
	font-family:"Oswald", sans-serif;
    font-size:28px;
    font-weight:500;
    color:#154d71;
    margin-right:5px;
    }

.workProcessList li:hover::after{box-shadow:0px 5px 10px rgb(0 0 0 / 30%);}

.listModal .modal-dialog{width:90%; max-width:1280px;}

.dataDetialModal .modal-dialog{width:90%; max-width:1080px;}

.listModal .tab-content{min-height:350px;}

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

.pull-left, pull-right{display:flex;}

.remindList{margin-left:25px; display:flex;}

.remindList li{margin-right:15px;}

.remindItem i{margin-right:3px;}
.remindItem span{font-size:14px; color:#888;}

.remindLvI i{color:#f5c857;}
.remindLvII i{color:#ef7722;}
.remindLvIII i{color:#ea0000;}

.modalBtn{padding:1px 5px 3px; line-height:1em;}

.modalBtn i{font-size:10px;}

.modalBtn span{font-size:12px; margin-left:3px;}

.calendar-top-block{justify-content:space-between;}

.calendar-top-title{width:350px; display:flex; align-items:flex-end;}
.checkInBox{width:300px;}

.calendar-top-title h2{font-size:32px;}
.calendar-top-title h2 span{color:#828b95; margin-left:10px;}

.calendar-navigation{
	margin-left:20px;
	display:flex;
	align-items:center;
	}

.calendarMonthBtn{line-height:1em;}

.calendarMonthBtn i{font-size:22px; color:#525c69;}
.calendarMonthBtn span{font-weight:bold; color:#525c69;}

.calendarMonthBtn-current{padding:10px 13px 10px 10px;}

.checkInfoBox{text-align:center;}

.checkIn-time{
	font-size:30px;
    font-weight:700;
    color:#fff;
    line-height:1;
    text-shadow:0 0 10px #000;
    margin-bottom:5px;
    }

.checkIn-date{font-size:12px; color:#fff; text-shadow:0 0 10px #000;}

.checkInBox{
	padding:10px;
	margin-right:20px;
	border-radius:5px;
	background-color:#476eae;
	}

.checkInBox .row{align-items:center;}

.checkInBtnBox button{
	width:100%;
	color:#fff;
	border:1px solid #fff;
	transition:all 0.5s ease;
	}

.checkInBtnBox button:hover{
	color:#fff;
	border:1px solid #3db6b1;
	background-color:#3db6b1;
	}

.calendar-week-block{border-bottom:2px solid #e8e9eb; display:flex;}

.calendarWeekBox{
	width:14.2857%;
	text-align:right;
	padding:10px;
	}

.calendarWeekBox span{color:#525c69; letter-spacing:1px;}

.calendar-month-row{
	height:150px;
	border-bottom:1px solid #e8e9eb;
	display:flex;
	flex-wrap:nowrap;
	align-items:stretch;
	}

.calendar-month-cell{
	border-left:1px solid #e8e9eb;
	flex:1 1;
	position:relative;
	}

.calendar-month-cell:first-child{border-left:none;}

.calendar-month-cell-inner{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	box-sizing:border-box;
	background:#fefeff;
	}

.calendar-grid-today .calendar-month-cell-inner{
	background-color:#eaf9fe;
	}

.calendar-num-day{
	text-align:right;
	padding:4px;
	border-radius:8px;
	box-sizing:border-box;
	position:absolute;
	top:6px;
	right:4px;
	}

.calendar-grid-today .calendar-num-day{
	padding:4px 7px 2px 5px;
	border-radius:15px;
	background:#2fc6f6;
	color:#fff;
	}

.calendar-grid-previous-month-day .calendar-num-day,
.calendar-grid-next-month-day .calendar-num-day{
	color:#828b95;
	font-weight:300;
	}

.calendar-num-day small{color:#828b95; margin-right:5px;}

.calendar-event-remark{
    width:95%;
    color:#fff;
    text-align:center;
    padding:5px;
	margin:32px auto 0;
    border-radius:3px;
	}

.has-check-in .calendar-event-remark{background-color:#ff9d00;}
.no-check-in .calendar-event-remark{background-color:#ea0000;}
.correct .calendar-event-remark{background-color:#06923e;}

.calendar-event-txt{
	width:90%;
	color:#34699a;
	margin:8px auto;
	}

.calendar-event-txt i, .calendar-event-txt span{margin-right:5px;}

.caseHistoryArea h4{
	font-size:18px;
    font-weight:bold;
    color:#476eae;
    line-height:1em;
    letter-spacing:3px;
    padding:6px 10px 8px;
	}

.caseHistoryBlock{
	min-height:630px;
	padding:15px 10px 15px 25px;
	border:1px solid #ced4da;
	border-radius:0.25rem;
	}

.caseHistoryList{
	padding-left:20px;
	border-left:2px dotted #ccc;
	position:relative;
	}

.caseHistoryList li{line-height:1.3em; margin-bottom:10px; position:relative;}

.caseHistoryList li::before{
    content:"";
    transform:translateY(-43%);
    background-color:#94b4c1;
    border:solid 3px #fff;
    width:16px;
    height:16px;
    box-shadow:0 0 0 2px #a4ccd9;
    border-radius:100vh;
    position:absolute;
    top:12px;
    left:-29px;
    z-index:2;
	}

.caseHistoryList li:nth-child(1)::after{
    content:"";
    width:26px;
    height:45%;
    background-color:#fff;
    position:absolute;
    top:-10px;
    left:-34px;
    z-index:1;
	}

.historyDate{
	font-size:12px;
	color:#888;
	font-style:italic;
	letter-spacing:1px;
	}

.historyBtn{
	padding:3px 20px;
	line-height:1em;
	border:1px solid rgba(204,204,204,0.5);
	border-radius:999em;
	}

.historyBtn i{font-size:12px; color:#476eae;}

.historyTxt{font-size:14px; display:block;}

.contractModal .modal-dialog{max-width:900px;}

.contractBlock{min-height:500px;}

@media screen and (max-width:768px){
	.kpiItemTxt span{font-size:24px;}
	.tableProgressbar{min-width:inherit;}
	}