//模态框的标题modal-header背景色 主题色
$funColor: #31b546;
//模态框的标题字体色
$funfont: #ffffff;
//第二级标题背景色--浅绿
$mainBackColor : #C6E3CA;
//页面主表导航栏背景色
$mainHeadColor:#f3f3f3;
//bootstrap contain的覆盖
//模态框标题字体色
$modalTitleFontColor:#ffffff;
//模态框模块标题背景色
$modalTitleBackColor:#f2f2f2;
//模态框上左,上右圆角
$modalTitleBR: 0;
//模态框模块标题内边距
$modalTitlePd: 8px 5px;
//模态框模块标题字体色
$modalPartTitleColor:$funColor;
//模态框二级标题背景色
$modalSecondTitleColor:#ffffff;
//模态框二级标题字体色
//
//sprite图地址,输入框背景
$inputGroupBack:url(/dx-disinfectsystem/img/inputGroupBack.png) no-repeat;
//公共按钮背景
$commonButtonBack:url(/dx-disinfectsystem/img/newButton.png) repeat;
//输入框的边框圆角
$commonIBR: 0;
//输入框的输入文字左内边距,有需要也设右内边距
$commonTP: 10px;
//模态框label的字体
$labelFontSize: 15px;
$labelFontBold: normal;
//页面主表字号
$fontSize: 15px;
@mixin RPftc{
	height: 160px;
	border: 1px solid #ddd;
	overflow: hidden;
	background: #fff;
	padding-bottom: 20px;
}
//待清洗篮筐和清洗篮筐的表格被包含的div部分——例如#gridContain
@mixin RP{
	width: 99%;
	height: 165px;
	border: 1px solid #f2f2f2;
	overflow: hidden;
}
//bootstrap contain的覆盖 end
//待清洗篮筐和清洗篮筐的标题
@mixin RPTitle{
	width: 99%;
	font-size: 14px;
	background-color: $modalTitleBackColor; 
	padding: 8px 5px;
	border-top-left-radius: $modalTitleBR;
	border-top-right-radius: $modalTitleBR;
	color:$modalPartTitleColor;
	margin:10px 0 5px 0;
}
//添加报损标题
@mixin addBadTitle{
	width: 99%;
	height: 33px;
	font-size: 14px;
	background-color: $modalTitleBackColor;
	
	padding: $modalTitlePd;
	border-top-left-radius: $modalTitleBR;
	border-top-right-radius: $modalTitleBR;
	margin:10px 0 10px 0;
	color: $funColor;
}
//输入框消除左右间距
@mixin paddingLeftRightZero{
	padding-left: 0;
	padding-right: 0;
	font-weight: normal;
}
//输入框的名称,左提示
@mixin handleNameAlign{
	font-weight: normal;
	text-align: right;
}
//模态框标题
@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;
}
html{
	height: 100% !important;
	background-color: #f3f3f3;
}
body{
	margin: 0 0;
	padding: 0 0;
	background-color: #f3f3f3;
}
//select2框的样式
.select2{
	height: 25px;
	border-radius: 0;
	&-container{
		vertical-align: top;
		&--default{
			.select2-selection{
				border-radius: 0;
				height: 25px;
				border: 1px solid #ccc;
				&__rendered{
					height: 25px;
				}
				&__arrow{
					height: 25px;
				}
			}
		}
	}
}
.alert{
	position: fixed;
	top: 20%;
	left: 45%;
}
//公共按钮样式
.dx-btn-primary {
	background: url(/dx-disinfectsystem/img/inputGroupBack.png) repeat;
	background-position: 0 -70px;
	&:hover{
		border-color: #ffffff;
	}
}
//时间框
.timeInput{
	background: $inputGroupBack;
	background-position: 126px -26px;
	padding-right: 25px;
}
.main{
	.mainNav{
		height: 28px;
		display:none;
		&-title{
			height: 28px;
			background-color: $mainHeadColor;
			-ms-background-color: $mainHeadColor;
			font-family: "宋体";
			font-size: 18px;
			color: #337ab7;
			font-weight: bold;
			padding: 3px 5px;
		}
		&-shop{
			height: 37px;
			background: $mainHeadColor;
			border-bottom: 2px solid #efefef ; 
			padding: 10px 20px 45px 10px;
			margin: 0 0 10px 0;
			.btn{
				background: $mainHeadColor;
				border: rgba(0,0,0,0);
			}
			&-search{
				background: $inputGroupBack #ffffff;
				background-position: 176px 7px;
				padding-right: 30px;
				border-radius: 0;
			}
			.cleanDateLabel{
				font-size: $fontSize;
				font-weight: $labelFontBold;
				padding-left: 10px;
			}
			select{
				width: 150px;
				height: 25px;
				border: 1px solid #ccc;
			}
		}
	}
}
 
//slickGrid表格,页面主表
#myGrid{
	border: 1px solid #f3f0f2;
	.ui-widget-content{
		line-height: 35px;
	}
	.slick{
		&-header{
					border: 1px solid #f3f0f2;
		}
		&-viewport{
			//overflow-x: scroll;
			a{
				font-weight: bold;
				font-size: $fontSize;
				color: $funColor;
				cursor: pointer;
				text-decoration: none;
			}
		}
		&-row{
			     
		}
		&-cell{
			font-size: $fontSize;
			.progress{
				margin: 5px auto;
			}
			button{
				width: 40px;
				height: 27px;
				padding: 3px;
			}
		}
	}
	input:checked{
	}
}
//slickGrid表格(添加，修改的模态框部分)
.addModal, .updateModal{
		@mixin addUpdateTitle2{
			font-size: 14px;
			height: 33px;
			background-color: $modalTitleBackColor;
			padding: $modalTitlePd;
			border-top-left-radius: $modalTitleBR;
			border-top-right-radius: $modalTitleBR;
			color:$funColor;
		}
		//添加清洗模态框的输入框和下拉框
		@mixin addUpdateliSI{
			width: 150px;
			height: 25px;
			border-radius: $commonIBR;
			border: 1px solid #ccc;
			padding-left: 10px;
			display: inline-block;
			color: #555;
		}
		.modal{
			&-dialog{
				width: 960px;
			}
			&-title{
			}
		}
		.addCleanUpdate{
			width: 100%;
			position: relative;
			height: 430px;
			overflow-y: scroll;
			&-baseinfo{
				&-title{
					width: 100%;
					@include addUpdateTitle2;
				}
			}
			&-top{
				padding-right: 222px;
				&-info{
					width: 100%;
					height: 296px;
					$handleName : 109px;
					&-left{
						width: 540px;
						ul{
							width: 265px;
							display: inline-block;
							list-style: none;
							padding: 0;
							vertical-align: top;
							li{
								//添加 修改  模态框上部分的输入框以及下拉框
								height: 40px;
								div{
									display: inline-block;
								}
								.form-group{
									width: 100%;
									margin-right: 0 ;
									margin-left: 0 ;
									label{
										width: 109px;
										text-align: right;
										font-size: $labelFontSize;
										font-weight: $labelFontBold;
										padding: 0;
										i{
											color: red;
											margin-right: 4px;
										}
									}
									select{ 
										@include addUpdateliSI; 
										padding: 0 0 0 10px;
										color: #555;
									}
									input{
										@include addUpdateliSI;
										&[type=text]{
											padding: 0 0 0 10px;
											vertical-align: top;
										}
									}
								}
							}
						}
						&-remarks{
							position: relative;
							&-handleName{
								width: $handleName;
								padding-right: 6px;
								@include handleNameAlign;
								position: absolute;
								font-size: $labelFontSize;
								font-weight: $labelFontBold;
							}
							textarea{
								width: 77.5%;
								height: 77px;
								margin: 0 0 0 114.5px;
								padding: $commonTP $commonTP $commonTP $commonTP;
								border-radius: $commonIBR;
								border: 1px solid #ccc;
							}
						}
						&-title{
							width: 99%;
							margin-bottom: 10px;
							@include addUpdateTitle2;
						}
					}
				}
				&-tools{
					height: 295px;
					position: absolute;
					top: 0px;
					left: 550px; 
					right: 5px;;
					overflow: hidden;
					&-title{
						width: 100%;
						@include addUpdateTitle2; 
					}
					&-toolbar{
						padding: 5px 0;
						text-align: center;
						font-size: $labelFontSize;
						font-weight: $labelFontBold;
						input{
							width: 50px;
							height: 25px;
							border: 1px solid #ccc;
						}
					}
					&-table{
						height: 211px;
						border: 1px solid #f2f2f2;
					}
				}
				
			}
			&-bottom{
				&-ready{
					@include RP;
				}
				&-packaged{
					border: 1px solid #f1eef0;
					overflow-y: scroll;
					@include RP;
					.toggle{
						height: 16px;
						width: 16px;
						background: url(/dx-disinfectsystem/plugins/SlickGrid/images/bullet_toggle_minus.png) no-repeat;
						background-size: 25px 25px;
						background-position: -5px -5px;
						display: inline-block;
						vertical-align: middle;
					}
					.collapse{
						height: 16px;
						width: 16px;
						background: url(/dx-disinfectsystem/plugins/SlickGrid/images/bullet_toggle_plus.png) no-repeat;
						background-size: 25px 25px;
						background-position: -5px -5px;
						display: inline-block;
						vertical-align: middle;
					} 
					.glyphicon{
						&-paste{
							color:grey;
						}
						&-cog{
							color:grey;
						}
					}
					a{
						width: 40px;
						height: 25px;
						cursor: pointer;
						color: $funColor;
						text-decoration: none;
						padding:4px 0 0 0;
					}
					
				}
				&-readyTitle{
					@include RPTitle;
				}
				&-packagedTitle{
					@include RPTitle;
				}
			}
		}
}		 
//器械包图片
.InstrumentPackageContain{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #ccc;
	display: none;
	z-index: 1060;
	.iPC{
		width: 970px;
		height: 600px;
		background: #FFFFFF;
		margin: 20px auto;
		&Header{
			display: block;
			width: 100%;
			padding: 5px 7px 20px 7px;
			border-bottom: 1px solid #f2f2f2;
			a{
				float: right;
			}
			span{
				float: left;
			}
		}
		&Title{
			font-size: 25px;
			font-weight: bold;
			text-align: center;
		}
		&Body{
			border: 1px solid red;
			width: 100%;
			height: 480px;
			padding: 0 0 0 8px;
			&Left{
				width: 40%;
				height: 100%;
				vertical-align: top;
				border: 1px solid green;
				display: inline-block;
				position: relative;
				&Img{
					width: 100%;
					height: 240px;
					background: #f2f2f2;
					&Text{
						font-size: 20px;
						font-weight: bold;
						padding: 0 0 0 0;
						text-align: center;
						position: absolute;
						top: 100px;
						left: 92px;
					}
				}
			}
			&Right{
				border: 1px solid grey;
				width: 59%;
				height: 100%;
				display: inline-block;
			}
		}
	}
}

//添加报损
.addBadGoodsModal{
	.addBad{
		height: 430px;
    overflow-y: scroll;
		$liHeight: 26px;
		//添加报损的label
		@mixin addBadLabel{
			width: 77px;
			text-align: right;
			text-align: right;
			font-size: $labelFontSize;
			font-weight: $labelFontBold;
		};
		
		//添加报损的input，select
		@mixin addBadSI{
			width: 150px;
			height: 25px;
			display: inline-block;
			padding: 0 $commonTP 0 $commonTP;
		};
		&TopTitle{
			@include addBadTitle;
		}
		&BottomTitle{
			@include addBadTitle;
		}
		&-top{ 
				&-handle{
					$leftRightWidth:340px;
					@mixin handleLRname{
						width: 100px;
						display: inline-block;
						text-align: right;
					}
					&-name{
						width: 70px;
						text-align: right;
						display: inline-block;
						padding-right: 5px;
						vertical-align: top;
					}
					&-ul{
						width: 270px;
						list-style: none;
						display: inline-block;
						padding: 0 0;
						li{
							margin:10px 0 0 0 ;
							//添加报损的上部
							.form-group{
								width: 100%;
								margin-bottom: 0;
								label{
									@include addBadLabel;
								}
								input{
									@include addBadSI;
								}
							}
						}
					}
					&-bottom{
						&-title{
							padding: 0 0 0 40px;
							font-size: $labelFontSize;
							font-weight: $labelFontBold;
						}
						&-info{
							margin: -16px 0 0 0;
							textarea{
								width: 77.2%;
								height: 71px;
								margin: 0 0 0 81px;
								padding: $commonTP $commonTP $commonTP$commonTP;
								border-radius: $commonIBR;
								border:1px solid #ccc; 
							}
						}
					}
					input{
							height: 30px;
							width: 125px;
					}
					&-left{
							width: $leftRightWidth; 
							display: inline-block; 
							&-name{
								@include handleLRname;
							}
					}
					&-right{
							width: $leftRightWidth; 
							display: inline-block; 
							&-name{
								@include handleLRname;
							}
					}
				}
		}
		&-bottom{
			&-handle{
				&-toorbar{
					ul{
						width: 280px;
						height: $liHeight;
						list-style: none;
						display: inline-block;
						padding: 0 0;
						li{
							height: $liHeight;
							.form-group{
								width: 100%;
								border-radius: $commonIBR;
								text-align: left;
								margin-bottom: 0;
								label{
									@include addBadLabel;
								}
								input{
									@include addBadSI;
								}
								select{
									width: 150px;
								}
								.handle{
									text-align: left;
								}
							}
						}
						.aDhandle{
							text-align: left;
							padding-left: 45px;
						}
					}
					&-addUpdate{
						margin: 10px 0 0 0;
					}
					ul{
						width: 100%;
						list-style: none;
						padding: 0;
						text-align: center;
						padding-bottom: 37px;
						li{
							 width: 270px;
							 display: inline-block;
							 vertical-align: top;
							 .select2{
							 	&-selection{
							 		&--single{
							 			height: $liHeight;
							 		}
							 	}
							 }
						}
					}
					select{
						height: $liHeight;
						padding: 0;
						width: 125px;
					}
				}
			}
		}
		.form-group{
			display: inline-block;
		}
		select{
			width: 125px;
			height: $liHeight;
			padding: 0;
		}
		input{
			border-radius: $commonIBR;
			border: 1px solid #ccc;
			padding-left: $commonTP;
			padding-right: $commonTP;
		}
	}
}

//添加质量检测标题
@mixin kmTitle{
	width: 99%;
	height: 33px;
	font-size: 14px;
	background-color: $modalTitleBackColor;

	padding: $modalTitlePd;
	margin:10px 0 10px 0; 
	border-top-left-radius: $modalTitleBR;
	border-top-right-radius: $modalTitleBR;
	color: $funColor;
}
@mixin pwTitle{
	width: 95%;
  margin: 0 0 0 4%;
	height: 33px;
	font-size: 14px; 
	background: $modalTitleBackColor;
	color: $funColor;
	padding: $modalTitlePd;
	border-radius: $modalTitleBR;
	margin-bottom: 6px;
}
//添加质量检测
//添加质量检测的输入框样式
@mixin addCheckliSI{
	width: 150px;
	height: 25px;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: $commonIBR;
	vertical-align: top;
	padding: 0 0 0 10px;
}
//添加质量检测的label样式
@mixin addCheckliLabel{
	width: 150px;
	height: 25px;
	display: inline-block;
	text-align: right;
	vertical-align: top;
	border-radius: $commonIBR;
	font-size: $labelFontSize;
	font-weight: $labelFontBold;
}
.addCheckModal{
		.modal-dialog{
			width: 720px;
		}
		.addCheck{
				width: 100%;
				height: 430px;
				overflow: scroll;
				ul{
					list-style: none;
					padding: 0 0;
					li{
						padding: 0 0 3px 0;
					}
				}
				&-baseinfo{	
					height: 145px;
					ul{
						float: left;
						width: 50%;
						li{
								height:30px;
								margin-bottom: 3px;
								.form-group{
									width: 100%;
									margin-bottom: 0;
									label{
										@include addCheckliLabel;
									}
									input{
										@include addCheckliSI;
									}
									select{
										@include addCheckliSI;
									}
								}
						}
					}
					&-title{
						@include kmTitle;
						ul{
							list-style: none;
							padding: 0 0;
							li{
							}
						}
					}
					&-remarks{
						height: 150px;
						clear:both;
						$handleHeight: 26px;
						.uploadAndView{
							height: $handleHeight;
							margin: 7px 0 0 0;
							button{
								height: $handleHeight;
								background: $funColor;
								color: white;
								padding: 2px 5px 2px 5px;
							}
							input{
								height: $handleHeight;
								border-radius: 0;
							}
							.addCheck-handle{
								&-name{
									
								}
								&-upload{
									width: 487px;
									display: inline-block;
									position: relative;
									padding: 0 77px 0 0;
									input{
										width: 100%;
										display: inline-block; 
										border: 1px solid #ccc;
									}
									.input-group-btn{
										position: absolute;
										right: 73px;
										top: 0;
										button{
											border: 1px solid #f2f2f2;
										}
									}
								}
							}
							.input-group{
								width: 77%;
								height: 26px;
								float: right;
								padding: 0 31px 0 0;
							}
						}
						&-title{
							padding: 0 0 0 83px;
						}
						&-text{
							padding: 0 32px 0 153px;;
							margin: -25px 0 0 0;
						}
						li{
							padding: 0 31px 0 0;
						}
						textarea{
							width: 100%;
							height: 100px;
							padding: $commonTP $commonTP $commonTP $commonTP;
							border-radius: $commonIBR;
							border: 1px solid #ccc;
						}
					}
					input{
						width: 125px;
					}
				}
				&-kitinfo{
					$liHeight:38px;
					&-title{
						@include kmTitle;
					 
					}
					input{
						width: 125px;
						border-radius: $commonIBR;
					}
					&-handle{
						width: 100%;
						height: 80px;
						margin-top:10px;
						ul{
							list-style: none;
							padding: 0 0;
							display: inline-block;
							width: 49%;
							vertical-align: top;
							li{
								height: 25px;
								margin-bottom: 5px;
								.form-group{
									margin-bottom: 0;
									label{
										@include addCheckliLabel;
									}
									input{
										@include addCheckliSI;
										&[type=checkbox]{
											width: 12px;
											margin: 0 65px;
										}
									}
									select{
										@include addCheckliSI;
									}
								}
							}
						}
					}
					&-instrument {
						height:25px;
						clear:both;
						ul{
							width: 100%;
							margin-top: 10px;
							li{
								width: 49%;
								display: inline-block;
								vertical-align: top;
								height: $liHeight;
								.form-group{
									margin-bottom: 0;
									label{
										@include addCheckliLabel;
									}
									input{
										@include addCheckliSI;
									}
								}	
							}
						}
					}
					
				}
				$monitorInput:35px;
				&-monitor{
					ul{
						float: left;
						width: 50%;
					}
					&-title{
						@include kmTitle; 
						 
					}
					&-part{
						height: 155px;
						&-title{
							@include pwTitle;
						}
						input{
							width: $monitorInput;
						}
					}
					&-way{
						height: 95px;
						&-title{
							@include pwTitle;
						}
						input{
							width: $monitorInput;
						}
					}
					&-wayType{
						height: 100px;
						&-title{
							@include pwTitle;
						}
						input{
							width: $monitorInput;
						}
					}
				}
				&-handle-name{
					@include addCheckliLabel;
				}
		}
}
//提示框
.tips{ 
    font-size: 20px;
    font-weight: bold;
    color: #008000;
    text-align: center;
}
//bootstrap模态框的公共样式
.modal{
		&-body{
			margin: 0 auto;
		}
		&-content{
			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;
			}
		}
		&-footer{
			text-align: center;
		}
		&-tab{
			width: 2px;
			height: 12px;
			display: inline-block;
			background: $funColor;
		}
		&-empty-button{
			border: 1px solid $funColor;
			background-color: #ffffff;
			color: $funColor;
		}
		&-full-button{
			border-color: white;
			@extend .dx-btn-primary;
			color: #ffffff;
		}
}
//第二层模态框
#myModal2{
	.modal-body{
		height: 580px;
	}
	.modal-dialog{
		width: 860px;
	}
}
@mixin m2lr{
	height: 450px;
	position: absolute;
	top: 0;
}
.myModal2{
	&-body{
		&-left{
			width: 60%;
			padding: 20px 5px 0 5px;
			left: 0;
			@include m2lr;
			&-title{
				width: 100%;
				height: 50px;
				font-size: 19px;
				font-weight: bold;
				padding: 10px;
			}
			&-img{
				width: 80%;
				border:1px solid black;
			}
			&-handle{
				width: 80%;
				height: 35px;
				font-size: 15px;
				font-weight: bold;
				padding: 6px;
				background: $mainBackColor;
			}
		}
		&-right{
			width: 40%;
			right: 0;
			padding: 39px 5px 0 5px; 
			@include m2lr;
			&-title{
				width: 100%;
				height: 30px;
				font-size: 15px;
				font-weight: bold;
				padding: 3px;
				background: $funColor;
			}
			&-table{
				width: 99%;
				height: 505px;
				border: 1px solid black;
			}
		}
	}
}

//悬浮层
.rowInfoSuspendedFrame{
	position: fixed;
	display: none;
	border: 1px solid #ccc;
	background: white;
	z-index: 1010;
	font-size: $fontSize;
	font-weight: bold;
	&Title{
		padding: 5px 5px 0 5px;
	}
	&Table{
		padding: 5px 5px 5px 5px;
		table{
			border: 1px solid #ccc;
			thead{
				th{
					padding: 5px 5px 5px 5px;
					border: 1px solid #ccc;
				}
			}
			tbody{
				td{
					padding: 5px 5px 5px 5px;
					border: 1px solid #ccc;
				}
			}
		}
	}
}

#bigView img{
 	height: none;  
  max-width: none;  
  vertical-align: none;  
}
.keep-open .dropdown-menu input{
	width: 20px;
}
div.sp_result_area div.pagination ul{
 	padding: 0 0 ;
}

.slick-cell.selected{
	background-color: #D6F0DA;
}

.cell{
	&-title{
		font-weight: bold;
	}
	&-effort-driven {
		text-align: center;
	}
}

.toggle {
	height: 9px;
	width: 9px;
	display: inline-block;
}
//分页条
.bottomContain{
	position: absolute;
	width: 100%;
	height: 40px;
	padding-right: 20px;
	.pageContain{
		height: 35px;
		float: right;
		&Total{
			height: 35px;
			display: inline-block;
			vertical-align: top;
			padding: 8px 0 0 0;
		}
		&Button{
			height: 35px;
			vertical-align: top;
			display: inline-block;
			.pagination{
				margin: 0 0; 
				li{
					a{
						margin-left: 6px;
						color: #555555;
						border-radius: 5px;
						background-color: #efefef;
						border-color:#ffffff;
					}
				}
				.active{
					a{
						color: #ffffff;
						background-color: #31b546;
						border-color:#ffffff;
					}
				}
			}
		}
		.dataAmount{
			display: inline-block;
			vertical-align: top;
			.dropdown-menu{
				min-width: 0;
				width: 60px;
				right: 0;
				.btn{
					background: red;
				}
				li{
					text-align: center;
				}
			}
		}
	}
}