/* CONTENT */
.user:before{content: "\f007";margin-right: 3px;}
.time:before{content: "\f133";margin-right: 3px;}

#tab_container{
	display:table;
	width:100vw;
	position:fixed;
	top:40px;
	z-index:100;
}
#tab_holder{
	height:36px;
	border-top:4px solid #ccc;
	text-align: justify;
	width:100%;
	display:table;
	background:#fff;
	border-bottom:1px solid #f3f3f3;
	position:fixed;
	top:40px;
}
#tab_holder:after{content: '';}
#tab_holder li{
	height:100%;
	display:table-cell;
	line-height: 30px;
	text-align:center;
	letter-spacing:2px;	
}
#tab_holder li .tab{
	width:100%;
	height:36px;
	line-height:36px;
	display:block;
	font-size:1.5em;
	margin-top:-4px;
	color:#666;
	text-shadow:-1px -1px 2px #fff;
	letter-spacing:4px;
	border-top:4px solid #ccc;
}
#tab_holder li .tab.curr{
	color:#38398f;
	border-top:4px solid #38398f;
}
.tab_panel_holder{margin-top:37px;}
.tab_panel{display:none;}

/* REQUEST LIST */
.request_item{
	padding:5px;
	border-bottom:1px solid #eee;
}
.request_item table{width:100%;}
.request_item table td{line-height:22px;padding:2px;}
.request_item h3{color: #38398f;}
.request_item .title{width:60px;}
.request_item .btn_ctrl{
	display:block;
	height:20px;
	line-height:20px;
	padding:0 5px;
	border-radius:5px;
	border:1px solid #00aeff;
	color:#00aeff;
	float:right;
	margin-left:5px;
}
.request_item .btn_ctrl.reply{border:1px solid #ff9900;color:#ff9900;}
.request_item span{margin-right:10px;}
span.user:before{content: "\f2c0";margin-right:3px;}
span.date:before{content: "\f133";margin-right:3px;}

/* CUSTOMER LIST */
#search_header{width: 100%;position:fixed;top:44px;}
#search_panel{padding:10px 10% 5px 10%;background:#fff;}
#search_panel .search_holder{
	width:80%;
	height:30px;
	border-radius:20px;
	background:#eee;
	padding:0 15px;
	margin:0 auto;
	position:relative;
}
#search_panel .search_box{width:80%;padding:0;}
#search_panel .search_btn{
	width:12%;
	padding:0 5% 0 3%; 
	background:#38398f;
	right:0;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
}
#search_panel .search_btn:before{color:#fff;}
#search_panel .clear_btn{
	position:absolute;
	top:0;
	right:21%;
	display:none;
}
#search_panel .clear_btn:before{
	content: "×";
	display:block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:2em;
	font-weight:bold;
	color:#999;
}
#search_filter{display:table;width:100vw;background:#fff;border-bottom:1px solid #eee;}
#search_filter li{display:table-cell;height:30px;position:relative;}
#search_filter li select{
	width:100%;
	position:absolute;
	z-index:2;
	border:0;
	font-family:Microsoft YaHei;
	padding:0 20%;
	background-color:transparent;
	background-image:url('../images/select_arrow.png');
	background-repeat:no-repeat;
	background-position:80% center;
	background-size:auto 30%;
	color:#888;
	
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
}
#search_filter li select option{text-align:center;}
#customer_list{
	margin-top:75px;
	background:#fff;
	padding-top:1px;
}
#customer_list li{padding:10px;margin:10px;background:#f6f6f6;border-radius:10px;}
#customer_list li h3{color:#333;font-weight:normal;font-size:14px;line-height:20px;margin-bottom:5px;}
#customer_list li h3 i{margin-right:5px;font-size:13px;line-height:20px;}
#customer_list li span{display:inline-block;line-height:20px;width:33%;color:#666;}
#customer_list li span i{padding:2px 5px;border:1px solid #999;border-radius:3px;color:#666;font-style:normal;margin-right:3px;}

#customer_list li.t_1{background:#fff9e6;}
#customer_list li.t_1 span.type{color:#ff9900;}
#customer_list li.t_1 span.type i{border:1px solid #ff9900;color:#ff9900;}

#customer_list li.t_2{background:#e6f6ff;}
#customer_list li.t_2 span.type{color:#00aeff;}
#customer_list li.t_2 span.type i{border:1px solid #00aeff;color:#00aeff;}

#customer_list li.t_3{background:#e8fff2;}
#customer_list li.t_3 span.type{color:#00ba58;}
#customer_list li.t_3 span.type i{border:1px solid #00ba58;color:#00ba58;}

#customer_list li.t_4{background:#ffe8e8;}
#customer_list li.t_4 span.type{color:#ff0000;}
#customer_list li.t_4 span.type i{border:1px solid #ff0000;color:#ff0000;}

#customer_form,
#contact_form{padding-bottom:50px;}
.footer_ctrl_holder{
	display:table;
	width:100vw;
	height:40px;
	line-height:40px;
	position:fixed;
	bottom:0;
}
.footer_btn{
	display:table-cell;	
	text-align:center;
	background:#38398f;
	color:#fff;	
	font-size:1.5em;
}
.footer_btn.delete{width:30vw;background:#ff0000;}
.footer_btn i{margin-right:5px;}

/* CUSTOMER */
.info_holder{background:#fefefe;margin-bottom:8px;}
.info_holder th{padding:5px;font-size:14px;font-weight:normal;background:#f6f6f6;}
.info_holder th i{margin-right:3px;}
.info_holder td{padding:0 8px 8px 0;vertical-align:top;}
.info_holder tr.first_row td{padding-top:8px;}
.info_holder td.title{width:60px;padding:0 0 8px 8px;color:#333;line-height:32px;}
.info_holder td.title.required:after{content:'*';color:#ff0000;float:right;margin-right:5px;font-size:20px;}
.info_holder .header_row{background:#eee;}
.info_holder .header_row td{padding:3px 0;text-align:center;color:#111;}
.info_holder input[type=text],
.info_holder textarea{width:95%;}
.info_holder .ctrl_link i{
	display:block;
	width:32px;
	height:32px;
	line-height:32px;
	text-align:center;
	font-size:16px;
	border-radius:5px;
	background:#f3f3f3;
}

/* FAV LIST */
.fav_list_holder{width:100%;}
.fav_list_holder .item_link{margin-right:30px;}
.fav_list_holder .btn_fav{
	width:35px;
	height:100%;
	position:absolute;
	top:0;
	right:0;
}
.fav_list_holder .btn_fav:before{	
	content: "\f004";
	display:block;
	width:30px;
	height:30px;
	position:absolute;
	top:50%;
	right:5px;
	margin-top:-15px;
	font-size:20px;
	color:#38398f;
	text-align:center;
}

/* CONTACT LIST */
#contact_list{margin-top:50px;border-top:2px solid #eee;}
#contact_list .contact{
	display:table;
	width:100vw;
	height:10vh;
	border-bottom:2px solid #eee;
}
#contact_list .contact .avatar{
	display:table-cell;
	width:10vh;
	height:10vh;
	background-size:cover;
	background-position:center;
}
#contact_list .contact .info{display:table-cell;padding:1vh 10px;vertical-align:top;line-height:2.5vh;}
#contact_list .contact .info .name{font-size:1.3em;color:#333;line-height:3vh}
#contact_list .contact .info .department{color:#888;}
#contact_list .contact .btn_call{display:table-cell;width:10vh;background:#0d8941;}
#contact_list .contact .btn_call:before{
	content: "\f095";
	display:block;
	width:10vh;
	height:10vh;
	line-height:10vh;
	text-align:center;
	font-size:4vh;
	color:#fff;
	text-shadow:-1px -1px 1px rgba(0,0,0,.3);
}
#contact_form .btn_toogle{display:block;width:20px;height:20px;float:left;margin-left:10px;}
#contact_form .btn_toogle i{margin:0;}
#contact_form .btn_delete{float:right;margin-right:10px;}

/* FOLLOW */
#follow_holder{height:calc(100vh - 40px - 41px);background:#f6f6f6;}
.mycalendar #follow_holder{height:calc(100vh - 41px);background:#f6f6f6;}
#follow_holder td{vertical-align:top;position:relative;}
#follow_holder tr:first-child td{height:1px;}
#follow_holder tr.legend_row td{height:1px;padding:5px 8px 0 8px;}
#follow_holder tr.legend_row .legend{float:left;margin:0 10px 5px 0;}
#follow_holder tr.legend_row .legend .marker{
	width:12px;
	height:12px;
	border-radius:0;
	padding:0;
	float:left;
	margin:2px 3px;
}
#follow_holder tr.legend_row .legend .marker.remind{background:#aaa;}
#follow_holder tr.legend_row .legend .marker.reserved{background:#ff9900;}
#follow_holder tr.legend_row .legend .marker.first{background:#44b549;}
#follow_holder tr.legend_row .legend .marker.done{background:#00aeff;}
#add_follow_btn_holder{height:32px;padding:0 8px 5px 8px;}
#btn_add_follow,
#btn_add_event{display:block;width:100%;height:32px;line-height:32px;text-align:center;background:#ff9900;color:#fff;font-size:16px;border-radius:5px;}
#btn_add_event{background:#38398f;}
#btn_add_follow i,
#btn_add_event i{margin-right:5px;}
#btn_add_event{margin-top: 5px;}
#calendar_holder{padding-bottom:10px;margin-bottom:5px;box-shadow:0 3px 3px rgba(0,0,0,.1);background:#fff;}
#calendar{width:98vw;margin:0 auto;font-size:14px;font-family:Microsoft Yahei;}
#calendar h2{font-size:16px;line-height:30px;}
#calendar table td{width:14vw;}
#calendar .week_row{background:#eee;}
#calendar .btn_prev,
#calendar .btn_next{display:block;width:100%;height:30px;line-height:30px;text-align:center;}
#calendar .btn_prev i,
#calendar .btn_next i{font-size:20px;line-height: 30px;}
#calendar .c_cell.today{background:#f6f6f6;}
#calendar .c_cell .c_link{display:block;width:100%;height:20px;line-height:20px;font-size:12px;text-align:center;color:#555;position:relative;}
#calendar .c_cell .c_link.curr{background:#e8e8ff;}
#calendar .c_cell .c_link:before{
	content:'';
	display: block;
    width: 0;
    height: 0;   
    position: absolute;
    top: 0;
    right: 0;
}
#calendar .c_cell.reserved .c_link:before{
	border-style: solid;
    border-width: 0px 7px 7px 0px;
    border-color: transparent #aaa transparent transparent;
}
#calendar .c_cell.pending .c_link:before{
	border-style: solid;
    border-width: 0px 7px 7px 0px;
    border-color: transparent #ff9900 transparent transparent;
}
#calendar .c_cell.done .c_link:before{
	border-style: solid;
    border-width: 0px 7px 7px 0px;
    border-color: transparent #00aeff transparent transparent;
}
#calendar .c_cell.first .c_link:before{
	border-style: solid;
    border-width: 0px 7px 7px 0px;
    border-color: transparent #44b549 transparent transparent;
}

#follow_list{
	width:96%;
	height:100%;
	padding:0 2%;
}
#follow_list .follow_title {
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color:#aaa;
    font-size: 16px;
}
#follow_list p{width:100%;text-align:center;line-height:32px;font-size:16px;color:#bbb;position:absolute;top:50px;left:0;z-index:0;}
#follow_list li{width:96%;padding:2%;background:#fff;border-radius:5px;position:relative;z-index:1;margin:5px auto 10px auto;box-shadow:0 0 5px rgba(0,0,0,.2);}
#follow_list li.on{box-shadow:0 0 5px rgba(255,153,0,.8);}
#follow_list li .customer_name a{color: #351010;}
#follow_list li td{line-height:30px;}
#follow_list li td.title{width:36px;padding-left:10px;}
#follow_list li input,
#follow_list li select{float:none;border:0;height:22px;line-height:22px;}
#follow_list li input{width:100%;padding:0;}
#follow_list li .btn_complete,
#follow_list li .btn_add,
#follow_list li .btn_save,
#follow_list li .btn_edit,
#follow_list li .btn_delete{position:absolute;top:0;}
#follow_list li .btn_add,
#follow_list li .btn_delete{right:0;}
#follow_list li .btn_save,
#follow_list li .btn_edit{right:30px;}
#follow_list li .btn_complete{right:60px;}
#follow_list li .btn_complete i,
#follow_list li .btn_save i,
#follow_list li .btn_add i,
#follow_list li .btn_edit i,
#follow_list li .btn_delete i{display:block;width:20px;height:20px;line-height:20px;text-align:center;color:#aaa;font-size:16px;}
#follow_list li .btn_complete i{color:#00aeff;}
#follow_list li .flag{position:absolute;top:3px;left:3px;}
#follow_list li .flag i{display:block;width:14px;height:14px;line-height:14px;}
#follow_list li.reserved .flag i:before{
	content:'';
	display:block;
	width:0;
    height:0;
    border-width:10px 10px 0 0;
    border-style:solid;
    border-color:#ddd transparent transparent transparent;
} 
/*#follow_list li.done{box-shadow:0 0 5px rgba(0,174,255,1);}*/
#follow_list li.pending .flag i{color:#ff9900;}
#follow_list li.done .flag i{color:#00aeff;}

#follow_list li .btn_add_join{display:inline-block;height:22px;line-height:22px;padding:0 5px;border-radius:3px;background:#00aeff;color:#fff;}
#follow_list li .btn_add_join i{margin-right:3px;}

/* ADD JOIN HOLDER */
.header_holder,
.alert_holder,
.ctrl_holder{height:30px;position:relative;}
.ctrl_holder .ctrl_btn{margin:5px auto 0 auto;}
.header_holder .btn_close{
	display:block;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	position:absolute;
	top:0;
	right:0;
}
.header_holder .btn_close i{font-size:14px;}

#add_join_holder{display:none;background:rgba(0,0,0,.7);}
#add_join_holder > table{
	width:94vw;
	height:96vh;
	position:absolute;
	top:2vh;
	left:3vw;
	padding:5px 10px;
	background:#fff;
	border-radius:5px;
	box-shadow:0 0 5px rgba(0,0,0,.2);
}
#content-holder .alert_holder .dep_li{width: 28vw;display: inline-block;text-align: center;line-height: 22px;border: 1px #ccc solid;border-radius: 5px;}
#content-holder .alert_holder .dep_li.on{background: #e3b07e;color: #fff;    border: 1px #e3b07e solid;}
#add_join_holder .user_list_holder{position:relative;vertical-align:top;border: 1px solid #eee;}
#add_join_holder .check_all_user{border-bottom: 1px solid #eee;display: none;}
#add_join_holder .check_all_user.on{border-bottom: 1px solid #eee;display: block;}
#add_join_holder .select_user_holder{
	width:100%;
	height:calc(100% - 30px);
	position:absolute;
	top:31px;
	left:0;
	overflow-y:scroll;
}
.user_list label{border-top: 1px solid #eee;}
.user_list label:first-child{border:0;}
.user_list label.selected{background: #fff9e0;}
.join_list .join_user{display:inline-block;padding:0 10px;line-height:20px;background:#eee;border-radius:10px;margin:0 5px 5px 0;}