/*模态框的标题背景色 主题色*/
$funColor: #31b546;
/*模态框的标题字体色*/
$funfont: #ffffff;
/*第二级标题背景色--浅绿*/
$mainBackColor : #C6E3CA;
/*页面主表导航栏背景色*/
$mainHeadColor:#f3f3f3;
/*bootstrap contain的覆盖*/
/*模态框标题字体色*/
$modalTitleFontColor:#ffffff;
/*模态框二级标题背景色*/
$modalSecondTitleColor:#ffffff;
/*模态框内容标题背景色*/
$modalTitleBackColor:#f2f2f2;
/*模态框上左,上右圆角*/
$modalTitleBR: 0;
/*模态框标题内边距*/
$modalTitlePd: 8px 5px; 
/*公共按钮背景*/
$commonButtonBack:url(/dx-disinfectsystem/img/newButton.png) repeat;
/*sprite图地址,输入框背景*/
$inputGroupBack:url(/dx-disinfectsystem/img/inputGroupBack.png) no-repeat;
//模态框label的字体
$labelFontSize: 15px;
$labelFontBold: normal;
//页面主表字号
$fontSize: 15px;
/*模态框中输入框和下拉框的样式*/
@mixin modalSI{
	width: 150px;
	height: 25px;
	border: 1px solid #ccc;
	border-radius: $commonIBR;
	display: inline-block;
}


/*公共按钮样式*/
.dx-btn-primary {
	background: url(/dx-disinfectsystem/img/inputGroupBack.png) repeat;
	background-position: 0 -70px;
	&:hover{
		border-color: #ffffff;
	}
}
/*输入框的边框圆角*/
$commonIBR: 0;
/*输入框的输入文字左内边距,有需要也设右内边距*/
$commonTP: 10px;

/*模态框标题*/
@mixin modalTh{
	height: 37px;
	background-color: $funColor;
	font-weight: bold;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	color: $funfont;
	font-family: arial;
	font-size: 10px;
}
/*输入框组*/
.handlegroup{		
	&-Inputselect{
		width: 140px;
		display: inline-block;
	}
	&-name{ 
		height: 30px;
		font-size: 15px;
		text-align: right;
		padding: 0 5px;
		float:left;
	}
	&-select{
		width: 125px;
		height: 30px;
		float:left;
		padding: 0; 
		a{
			color: $funColor;
		}
	}
	.form-group{
		height: 30px;
	}
	.form-control{
		height: 30px;
		padding: 0px 0 0 12px;
	}
}
/*导航栏,即主页按钮部分*/
.mainNav-shop{
	height: 37px;
	width: 760px;
	background: #C6E3CA;
	
	.btn{
		background: #C6E3CA;
		border: rgba(0,0,0,0);
	}
	&-bootSelect{
		display: inline-block;
		.select2-container{
			width: 170px;
		}
	}
}
/*主表需要特别处理的文字*/
.ui-widget-content .mainFont{
	color: #73B043;
	font-weight: bold;
	cursor:pointer;
	&:hover{
		text-decoration: none;
	}
}
 
html{
	height: 100% !important;
	background-color: #f3f3f3;
}
body{
	margin: 0 0;
	padding: 0 0;
	background-color: #f3f3f3;
}

/*bootstrap模态框的公共样式*/
.modal{
		&-body{
			margin: 0 auto;
		}
		&-content{
			width: 960px;
			margin:0 auto;
			border-radius: 0;
		}
		&-title{
			padding: 9px;
			@include modalTh;
		}
		&-header{
			@include modalTh;
			padding: 0 0 ;
			border-radius: 0;
			.close{
				margin: 10px 11px 0 0;
				font-size: 14px;
				font-weight: 700;
			}
		}
		&-tab{
			width: 2px;
			height: 12px;
			display: inline-block;
			background: $funColor;
		}
		&-empty-button{
			border: 1px solid $funColor;
			background-color: #ffffff;
			color: $funColor;
		}
		&-full-button{
			@extend .dx-btn-primary;
		}
		&-dialog{
			width: 960px;
		}
}

.keep-open .dropdown-menu input {
  width: 20px;
}

div.sp_result_area div.pagination ul{
	padding:0 0 ;
}
/*模态框中的标题*/
@mixin invoiceMiddleTitle{
		width: 99%;
		height: 33px;
		font-size: 14px; 
		color: $funColor;
		background-color: $modalTitleBackColor;
		padding: $modalTitlePd;
		border-radius: $modalTitleBR;
		margin-bottom: 6px;
	}
/*模态框*/
.Invoice{
	height: 430px;
	overflow: scroll;
	&-top{
		&-body{
			&-ul{
				margin: 10px 0 0 0 ;
				ul{
					width: 49%;
					list-style: none;
					padding: 0 0;
					display: inline-block;
					vertical-align: top;
					li{
						height: 28px;
						margin-bottom: 3px; 
						.form-group{
							label{
								width: 150px;
								height: 25px;
								padding-left: 0;
								padding-right: 0;
								text-align: right;
								display: inline-block;
								font-size: $labelFontSize;
								font-weight: $labelFontBold;
								i{
									color: red;
									vertical-align: top;
									margin-right: 2px;
								}
							}
							input {
								@include modalSI;
							}
							.select2{
								&-selection{
									&--single{
										
									}
								}
								span{
									
									border-radius: $commonIBR;
								}
							}
						}
						.timeInput{
							background: $inputGroupBack;
							background-position: 241px -22px;
							padding-right: 25px;
							padding-left: 10px;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
			&-remarks{
				&-name{
					padding-left: 112px;
				}
				&-input{
					padding: 0 155px 0 154px;
					margin-top: -20px;
					textarea{
						width: 100%;
						height: 50px;
						border-radius: $commonIBR;
					}
				}
			}
		}
		&-title{
			@include invoiceMiddleTitle;
		}
		&-handleName{
			width: 45%;
			text-align: right;
			display: inline-block;
		}
	}
	&-bottom{
		height: 285px;
		position: relative;
		padding-left: 55%; 
		margin: 10px 0;
		&-left{
			width: 52%;
			height: 280px;
			position: absolute;
			left: 0;
			top: 0;
			&-table{
				height: 180px;
				a{
					height: 20px;
					padding: 0px 5px;
					margin: -13px 0 0 0;
					color: $funColor;
				}
			}
			&-code{
				height: 45px;
				.form-group{
					label{
						width: 150px;
						height: 25px;
						display: inline-block;
						text-align: right;
					}
					input{
						@include modalSI;
					}
				}
			}
		}
		&-right{
			width: 100%;
			&-tobbar{
				width: 100%;
				padding: 0 3px;
				.applyLabel{
					text-align: right;
					padding: 0 0;
					font-size: $labelFontSize;
					font-weight: $labelFontBold;
				} 
				&-applyList{
					height: 30px;
					label{
						width: 96px;
						height: 25px;
						display: inline-block;
						font-size: $labelFontSize;
						font-weight: $labelFontBold;
					}
					select{
						@include modalSI;
					}
				}
				&-applyCount{
					height: 30px;
				}
			}
			&-title{
				@include invoiceMiddleTitle;
				width: 97.6%;
			}
			&-table{
				height: 222px;
				 
			}
		}
	}
	&-middle{
		height: 305px; 
		&-body{
			width: 100%;
			height: 285px;
		}
		&-baseInfo{
			ul{
				list-style: none;
				padding: 0 0;
			}
			&-handleName{
				width: 175px;
				display: inline-block;
				text-align: right;
				margin-left: 78px; 
				padding-right: 6px;
			}
			&-handleInput{
				
			}
			&-title{
				@include invoiceMiddleTitle;
			}
			&-contain{
				ul{
					width: 49%;
					display: inline-block;
					vertical-align: top;
					li{
						.form-group{
							label{
								width: 150px;
								display: inline-block;
								vertical-align: top;
								text-align: right;
								padding-right: 0;
								font-size: $labelFontSize;
								font-weight: $labelFontBold;
							}
							input{
								@include modalSI;
							}
						}
					}
				}
			}
		}
		&-detailed{
			&-body{
				height: 178px; 
			}
			&-title{
				@include invoiceMiddleTitle;
			}
		}
		&-ZD{
			width: 99%;
			height: 25px;
			background: #eaf7ec;
			text-align: center;
			color: $funColor;
			margin: 0 0 10px 0;
			a{
				color: $funColor;
				text-decoration: none;
				vertical-align: middle;
			}
		}
	}
}
/*主表左边的表格*/
.mainView{
	width: 100%;
	height: 100%;
	background: 1px solid red;
	position: relative;	
	padding: 0 555px 0 5px;
	&-left{
		width: 100%;
		&-title{
			height: 33px;
			font-size: 14px;
			background-color: $modalTitleBackColor;
			color: $funColor;
			padding: $modalTitlePd;
		}
		input[type="radio"], input[type="checkbox"] {
			width: 10px;
		}
		 
	}
	&-right{
		width: 545px;
		position: absolute;
		right: 5px;
		top: 0px; 
		&-title{
			height: 33px;
			color: $funColor;
			font-size: 14px;
			background-color: $modalTitleBackColor;
			padding: $modalTitlePd;
		}
	}

}
/*页面的主体的导肮部分*/
.main{
	.mainNav{
		.mainNav-title{
			height: 28px;
			background-color: $mainHeadColor;
			-ms-background-color:#BEDEC2;
			font-family: "宋体";
			font-size: 18px;
			color: #337ab7;
			font-weight: bold;
			padding: 3px 5px;
			display: none;
		}
		&-title{
			height: 28px;
			background-color:  #C6E3CA;
			-ms-background-color:#BEDEC2;
			font-family: "宋体";
			font-size: 18px;
			color: #337ab7;
			font-weight: bold;
			padding: 3px 5px;
			border: 1px solid #BEDEC2 ;
		}
		&-shop{
			height: 100px;
			width: 100%;
			background:  $mainHeadColor;
			padding-left: 10px;
			&-top{
				.timeInput{
							background: #ffffff;
							background-position: 100px -25px;
							padding-right: 25px;
							padding-left: 10px;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
				}
				.handlegroup{
					display: inline-block;
					vertical-align: top;
				}
				.form-control{
					width: 125px;
					border-radius: $commonIBR;
				}
				&-topHandlegroup{
					width: 1037px;
					height: 30px;
					padding: 8px 0 0 0;
					input{
						width: 125px;
						height: 30px;
					}
					.sp_input{
						width: 125px;
						height: 20px;
					}
				}
				&-bottomHandlegroup{
					padding: 20px 0 0 0;
				}
				input{
					width: 125px;
					border-radius: $commonIBR;
					border: 1px solid #ccc;
				}
			} 
		}

	} 
	.mainView{
		&-left{
			#myGrid{
				border: 1px solid #ffffff; 
			}
		}
	}
}
//涉及slick表格的样式
.slick{
	&-cell{
		font-size: $labelFontSize;
		font-weight: $labelFontBold;
		a{
			font-size: $labelFontSize;
			font-weight: $labelFontBold;
		}
	}
}
.btn btn-default modal,
.btn btn-primary modal,.modal{
	&-tab{
		width: 2px;
		height: 14px;
		display: inline-block;
		background-color: $funColor;
	}
	&-empty-button{
		border: 1px solid $funColor;
		background-color: #ffffff;
		color: $funColor;
		
		padding: 4px 12px;
		display: inline-block;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		border-radius: 4px;
    cursor: pointer;
	} 
	&-full-button{
		background: $commonButtonBack;
		border: 1px solid #ffffff;
		background-size: 20px 34px;
		color: #ffffff;
		
		padding: 4px 12px;
		display: inline-block;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		border-radius: 4px;
		cursor: pointer;
	}
}