<commit_before>/*
**	layout.css
**	20160813 __yiru
*/
@import "./mystyle.css";

.y-left{
	float:left;
}
.y-right{
	float:right;
}
.y-hide{
	display:none !important;
}
.y-show{
	display:block !important;
}
.y-inline{
	display:inline-block !important;
}
.y-block{
	display:block !important;
}

/*垂直居中*/
.vertical-parent{
	position:relative;
	overflow:hidden;
	height:100%;
}
.vertical-children{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

body{
	position:relative;
	overflow:auto;
	height:3000px;

	//header
	header{
		.y-header{
			width:100%;
			height:45px;
			background-color:#222;
			color:#fff;
			position:fixed;
			left:0;
			right:0;
			top:0;
			z-index:101;
			//a
			a{
				color:#fff;
			}
			//brand
			.y-brand{
				width:250px;
				height:45px;
				float:left;
				background-color:#24cbe5;
				.brand{
					display:block;
					height:45px;
					line-height:45px;
					position:relative;
					>.logo{
						position:absolute;
						left:5px;
						top:5px;
						padding:0;
						margin:0;
						border:0;
						display:block;
						width:35px;
						height:35px;
						line-height:35px;
						border-radius:100%;
						text-align:center;
						background-image:url('./images/usr.jpg');
						background-size:35px 35px;
						background-repeat:no-repeat;
						// background-color:#24cbe5;
						color:#fff;
						font-size:24px;
					}
					>span{
						display:block;
						margin:0 10px 0 50px;
					}
				}
			}
			//nav
			.y-nav{
				width:calc(~"100% - 250px");
				height:45px;
				float:left;
				background-color:#23b7e5;
				>.y-nav-left{
					float:left;
				}
				>.y-nav-right{
					float:right;
					>ul{
						position:relative;
					}
				}
				.y-nav-wrap{
					padding:0;
					height:45px;
					line-height:45px;
					>ul>li{
						float:left;
						width:48px;
						text-align:center;
						>a:hover{
							color:#ff7f50;
						}
					}
					//search
					.y-search{
						float:left;
						position:relative;
						margin:0 15px;
						>input{
							border:0;
							padding:0;
							width:100px;
							height:32px;
							border-bottom:1px solid #ddd;
							background-color:transparent;
							padding-right:30px;
							font-size:14px;
							color:#fff;
							transition:width .2s;
							&:focus{
								border-bottom:1px solid #fff;
								width:180px;
							}
							&::-webkit-input-placeholder{
								color:#fff;
							}
						}
						>i{
							position:absolute;
							top:8px;
							right:0;
							display:inline-block;
							width:32px;
							height:31px;
							line-height:31px;
							text-align:center;
							font-size:12px;
							cursor: pointer;
						}
					}
					.y-dropdown{
						position:relative;
						font-size:14px;
						>.y-dropdown-menu{
							position:absolute;
							right:0;
							top:43px;
							width:200px;
							display:none;
							background-color:#777;
							border:1px solid #999;
							&::before,&::after{
								content:'';
								position:absolute;
								width:0;
								height:0;
								bottom:100%;
								border:solid transparent;
							}
							&::before{
								border-width:9px;
								right:12px;
								border-bottom-color:#999;
							}
							&::after{
								border-width:8px;
								right:13px;
								border-bottom-color:#444;
							}
							&.left{
								&::before{
									left:12px;
								}
								&::after{
									left:13px;
								}
							}
						}
						//theme
						&.theme{
							>.y-dropdown-menu{
								left:0;
								width:180px;
								.y-list{
									cursor:default;
									>h4{
										margin:0;
										padding:5px 10px;
										font-size:13px;
										color:#ddd;
									}
									>.theme-select{
										overflow:hidden;
										padding:5px 10px;
										>li{
											float:left;
											display:inline-block;
											cursor:pointer;
											width:12px;
											height:12px;
											border-radius:12px;
											margin:0 8px;
											&:nth-of-type(1){
												background-color:#45b6af;
											}
											&:nth-of-type(2){
												background-color:#f3565d;
											}
											&:nth-of-type(3){
												background-color:#dfba49;
											}
											&:nth-of-type(4){
												background-color:#24cbe5;
											}
											&:nth-of-type(5){
												background-color:#ff7f50;
											}
											&:hover{
												transform:scale(1.3,1.3);
												transition:transform .2s;
											}
										}
									}
								}
							}
						}
						&.open{
							.y-dropdown-menu{
								display:block;
							}
						}
					}
					//toggle-right-sidebar
					.toggle-right-sidebar{
						opacity:.8;
						background-color:#555;
					}
				}

			}
		}
	}
	
	&.y-collapse{
		aside{
			.y-sidebar{
				width:42px;
				&.open{
					width:100% !important;
					background-color:transparent;
				}
				.y-sidebar-wrap{
					// padding:0;
					.y-sidebar-title{
						display:none;
					}
					.y-sidebar-l1{
						width:42px;
						background-color:#444;
						>li{
							>a{
								>i:last-child,>p{
									display:none;
								}
							}
							>ul{
								display:none;
								height:auto !important;
								&.hover{
									position:absolute;
									top:0;
									left:42px;
									width:200px;
									display:block !important;
									z-index:12;
								}
							}
						}
					}
				}
			}
		}
		main{
			.y-main{
				left:42px;
			}
		}
	}
	&.y-sidebar-sm{
		header{
			.y-brand{
				width:45px;
				.brand{
					display:block;
					span{
						display:none;
					}
				}
			}
			.y-nav{
				width:calc(~"100% - 45px");
			}
		}
		aside{

		}
		main{
			.y-main{
				left:42px;
			}
		}
	}
	//sidebar
	aside{
		.y-sidebar{
			position:fixed;
			top:45px;
			left:0;
			bottom:0;
			width:250px;
			background-color:#444;
			z-index:11;
			.y-sidebar-wrap{
				/*padding:10px 0;
				transition:padding .01s ease-in-out;*/
				height:100%;
				min-height:100%;
				overflow-y:auto;
				overflow-x:hidden;
				a{
					display:block;
				}
				.y-sidebar-title{
					height:42px;
					line-height:42px;
					margin-bottom:12px;
					padding:0 15px;
					color:#fff;
					font-size:14px;
					font-weight:500;
					border-bottom:1px solid #aaa;
					&:hover{
						background-color:#333;
					}
				}
				.y-sidebar-l1{
					height:calc(~"100% - 54px");
					>li{
						// border-bottom:1px solid #ddd;
						position:relative;
						overflow:visible;
						font-size:15px;
						font-weight:500;
						&:hover{
							background-color:#ff9655;
							color:#fff;
						}
						&:last-child{
							border:none;
						}
						>a{
							position:relative;
							color:#eee;
							height:42px;
							cursor:pointer;
							&.active{
								background-color:#45b6af;
								color:#fff;
							}
							>i{
								position:absolute;
								width:42px;
								height:42px;
								top:0;
								line-height:42px;
								text-align:center;
								&:first-child{
									left:0;
									width:42px;
								}
								/*&:last-child{
									right:0;
									width:24px;
									transform:rotate(0deg);
									transition:transform .1s;
								}*/
							}
							>p{
								line-height:42px;
								margin:0;
								width:100%;
								padding:0 24px 0 42px;
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
								&+i{
									right:0;
									width:24px;
									transform:rotate(0deg);
									transition:transform .1s;
								}
							}
						}
						>ul{
							height:0;
							display:block;
							background-color:#333;
							padding:0;
							overflow:hidden;
							transition:height .3s ease-in-out;
							>li{
								position:relative;
								font-size:13px;
								font-weight:400;
								&:first-child{
									margin-top:8px;
								}
								&:last-child{
									margin-bottom:8px;
								}
								>a{
									width:100%;
									height:32px;
									line-height:32px;
									color:#fff;
									cursor:pointer;
									padding:0 5px 0 30px;
									&:hover{
										background-color:#222;
										color:#f3565d;
										&::after{
											content:'';
											position:absolute;
											top:0;
											right:0;
											width:3px;
											height:32px;
											background-color:#f3565d;
										}
									}
									&.active{
										background-color:#272727;
										color:#f05050;
										&::after{
											content:'';
											position:absolute;
											top:0;
											right:0;
											width:3px;
											height:32px;
											background-color:#f05050;
										}
									}
									>span,>p{
										overflow:hidden;
										text-overflow:ellipsis;
										white-space:nowrap;
										margin:0 5px;
									}
								}
							}
						}
						&.open{
							>a{
								>p+i{
									transform:rotate(90deg);
									transition:transform .1s;
								}
							}
							>ul{
								/*height:auto;
								transition:height .3s ease-in-out;*/
							}
						}
					}
				}
			}
		}
		//rightbar
		.right-bar{
			position:fixed;
			top:45px;
			right:0;
			bottom:0;
			background-color:#777;
			transform:translateX(100%);
			transition:transform .3s ease-in-out;
			z-index:99;
			&.open{
				transform:translateX(0);
			}
			.y-rightbar-wrap{
				overflow-y:auto;
				.y-tab{
					position:relative;
					//清除浮动
					&::after{
						content:'';
						display:block;
						clear:both;
						visibility:hidden;
						height:0;
					}
					>li{
						float:left;
						width:64px;
						height:45px;
						line-height:45px;
						text-align:center;
						background-color:#333;
						color:#fff;
						cursor:pointer;
						&.active{
							background-color:#555;
						}
						&:hover{
							background-color:#444;
						}
					}
					.y-tab-act{
						width:64px;
						height:3px;
						position:absolute;
						top:42px;
						left:0;
						background-color:#f60;
						transition:left .3s;
						&::after{
							content:'';
							position:absolute;
							width:0;
							height:0;
							top:100%;
							left:50%;
							transform:translateX(-50%);
							border:4px solid transparent;
							border-top-color:#f60;
						}
					}
				}
				.y-tab-page{
					display:none;
					>.y-list-title{
						background-color:#777;
					}
					&.active{
						display:block;
					}
				}
			}
		}
	}
	//main
	main{
		.y-main{
			position:absolute;
		  top:45px;
		  right:0;
		  bottom:0;
		  width:auto;
		  left:250px;
		  background-color:#ddd;
		  z-index:1;
		  transition:left .01s ease-in-out;
		  .y-container{
		  	height:100%;
				padding:20px;
				background-color:#eee;
				.y-pageheader{
					>h2{
						margin:0;
						padding:0;
						font-size:24px;
						color:#333;
						>span{
							font-size:16px;
						}
					}
					.y-page-bar{
						margin-top:15px;
						overflow:hidden;
						width:100%;
						background-color:#fff;
						color:#000;
						>ul{
							overflow:hidden;
							float:left;
							>li{
								float:left;
								height:36px;
								line-height:36px;
								position:relative;
								padding:0 10px 0 15px;
								&:first-child{
									padding-left:15px;
								}
								&:hover{
									background-color:#666;
									color:#eee;
									&::before{
										content:'';
									}
								}
								&::before{
									content:'\f105';
									position:absolute;
									top:0;
									left:0;
								  font-family:FontAwesome;
									height:32px;
									line-height:32px;
									font-size:14px;
									font-weight:500;
									color:#aaa;
								}
								&:first-child::before{
									content:'';
								}
								>a{
									display:inline-block;
								}
							}
						}
						.y-timer{
							float:right;
							height:36px;
							line-height:36px;
							margin-right:15px;
							color:#ff7f50;
						}
					}
				}
				.y-pagecontent{
					padding:20px 15px;
				}
			}
		}
	}

}

//back-to-top
.y-back-top{
  width:35px;
  height:35px;
  border-radius:4px;
  position:fixed;
  right:20px;
  bottom:20px;
  background-color:#545e67;
  z-index:9999;
  cursor:pointer;
  overflow:hidden;
  display:none;
  >i{
  	color:#fff;
	  width:100%;
	  height:100%;
	  line-height:35px;
	  text-align:center;
	  font-size:25px;
	  position:absolute;
	  top:0;
	  transition:top .2s;
  }
  >span{
  	color:#fff;
	  display:block;
	  width:100%;
	  height:100%;
	  line-height:1.2;
	  padding:3px 0;
	  text-align:center;
	  font-size:12px;
	  font-weight:500;
	  position:absolute;
	  top:100%;
	  background-color:#23b7e5;
	  transition:top .2s;
  }
  &.ybt-hover{
	  >i{
	  	top:-100%;
	  }
	}
	&.ybt-hover{
	  >span{
	  	top:0;
	  }
	}
}

//badge
.y-badge{
	position:absolute;
	display:inline-block;
	min-width:10px;
	line-height:1;
	text-align:center;
	white-space:nowrap;
	vertical-align:middle;
	border-radius:10px;

	top:7px;
	right:9px;
	padding:3px 5px;
	font-size:10px;
	font-weight:400;
	background-color:#f05050;
	color:#fff !important;
}

//button
.ybtn{
	display:inline-block;
  padding:6px 12px;
  margin-bottom:0;
  font-size:14px;
  font-weight:500;
  line-height:1.42857143;
  border:1px solid transparent;
  border-radius:4px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  &:focus,&:active:focus{
		outline:5px auto -webkit-focus-ring-color;
  	outline-offset:-2px;
  }
  &:hover,&:focus{
  	color:#333;
  	text-decoration:none;
  }
  &:active{
  	outline:0;
  	box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
  }
  &[disabled]{
	  cursor:not-allowed;
	  box-shadow:none;
	  opacity:.65;
	}
	&.ybtn-default{
		color:#fff;
		background-color:#666;
		border-color:#999;
	}
	&.ybtn-info{
		color:#fff;
		background-color:#23b7e5;
		border-color:#24cbe5;
	}
	&.ybtn-success{
		color:#fff;
		background-color:#27c24c;
		border-color:#45b6af;
	}
	&.ybtn-warning{
		color:#fff;
		background-color:#ff7f50;
		border-color:#dfba49;
	}
	&.ybtn-danger{
		color:#fff;
		background-color:#f05050;
		border-color:#f3565d;
	}
	&.ybtn-sm{
		padding:5px 10px;
	  font-size:12px;
	  line-height:1.5;
	  border-radius:3px;
	}
	&.ybtn-lg{
		padding:10px 16px;
	  font-size:18px;
	  line-height:1.3333333;
	  border-radius:6px;
	}
	&.ybtn-block{
		display:block;
  	width:100%;
	}
}

//input
.y-input{
	display:inline-block;
  width:100%;
  height:34px;
  padding:6px 12px;
  font-size:14px;
  line-height:1.42857143;
  color:#555;
  background-color:#fff;
  background-image:none;
  border:1px solid #ccc;
  border-radius:4px;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
  transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  &:focus{
  	border-color:#66afe9;
  	outline:0;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102, 175, 233, .6);
  }
	&[disabled]{
		background-color:#eee;
  	cursor:not-allowed;
	}
}

//table-header
.ytable-header{
	padding:10px 0;
	height:54px;
	//select
	.y-select{
		position:relative;
		width:160px;
		&.sm{
			width:100px;
		}
		&.lg{
			width:200px;
		}
		>.select-icon{
			position:absolute;
			display:inline-block;
			width:32px;
			height:32px;
			line-height:32px;
			text-align:center;
			right:1px;
			top:1px;
			cursor:pointer;
			border-top-right-radius:3px;
			border-bottom-right-radius:3px;
			&:hover{
				background-color:#f8f8f8;
			}
		}
		>.select-tip{
			display:inline-block;
			height:32px;
			line-height:32px;
			width:52px;
			font-size:13px;
			font-weight:500;
			color:#23b7e5;
			text-align:center;
			position:absolute;
			left:100px;
		}
		>ul{
			width:100%;
			background-color:#fff;
			z-index:20;
			position:absolute;
			border:1px solid #eee;
			border-top:0;
			display:none;
			>li{
				padding:8px 12px;
				border-top:1px solid #eee;
				cursor:pointer;
				&:first-child{
					boder:none;
				}
				&:hover{
					background-color:#ddd;
				}
			}
		}
	}
	//search
	.y-search{
		position:relative;
		width:160px;
		&.sm{
			width:120px;
		}
		&.lg{
			width:200px;
		}
		>.select-icon{
			position:absolute;
			display:inline-block;
			width:36px;
			height:34px;
			line-height:34px;
			text-align:center;
			right:0;
			top:0;
			cursor:pointer;
			background-color:#27c24c;
			color:#fff;
			border-top-right-radius:3px;
			border-bottom-right-radius:3px;
		}
	}
}

//
.ytable-footer{
	.pagination{
		height:32px;
		line-height:32px;
		padding:0 10px;
		>span{
			color:#45b6af;
			font-weight:500;
		}
		ul{
			margin-top:1px;
			overflow:hidden;
			text-align:center;
			>li{
				float:left;
				height:30px;
				min-width:32px;
				line-height:30px;
				border:1px solid #ccc;
				margin-left:-1px;
				padding:0 6px;
				color:#23b7e5;
				background-color:#f8f8f8;
				cursor:pointer;
				&:first-child{
					margin:0;
					border-top-left-radius:4px;
					border-bottom-left-radius:4px;
				}
				&:last-of-type{
					border-top-right-radius:4px;
					border-bottom-right-radius:4px;
				}
				&:hover{
					background-color:#eee;
					color:#45b6af;
				}
				&.active{
					background-color:#24cbe5;
					color:#fff;
					&:hover{
						background-color:#23b7e5;
						color:#fff;
					}
				}
				&.disabled{
					cursor:not-allowed;
				  opacity:.65;
				  background-color:#f0f0f0;
				}
				&.more{
					cursor:not-allowed;
				  background-color:#f8f8f8;
				}
			}
		}
	}
}

//panel
.y-panel{
	width:100%;
	position:relative;
	.y-panel-header{
		height:42px;
		line-height:42px;
		padding:0 15px;
		border-bottom:1px solid transparent;
		color:#fff;
		background-color:#666;
		border-color:#999;
		h4{
			margin:0;
			font-size:14px;
			font-weight:500;
			float:left;
		}
		.plugins{
			float:right;
			padding:5px 0;
			>div{
				width:32px;
				height:32px;
				line-height:32px;
				border-radius:3px;
				text-align:center;
				float:left;
				color:#ccc;
				>i{
					cursor:pointer;
					&:hover{
						color:#fff;
						transform:scale(1.3,1.3);
					}
				}
				&.select-theme{
					position:relative;
					padding:9px;
					>i{
						display:block;
						width:14px;
						height:14px;
						border:2px solid #eee;
						background-color:#666;
						&:hover{
							border-color:#fff;
						}
					}
					ul{
						display:none;
						width:172px;
						padding:10px 15px;
						position:absolute;
						right:-8px;
						top:37px;
						background-color:#eee;
						border-radius:5px;
						li{
							float:left;
							margin-left:8px;
							width:22px;
							height:22px;
							border:2px solid #eee;
							background-color:#999;
							border-radius:3px;
							opacity:.6;
							cursor:pointer;
							&:first-child{
								margin:0;
							}
							&:hover{
								opacity:1;
							}
						}
					}
				}
			}
		}
	}
	&.default{
		.y-panel-header{
			color:#fff;
			background-color:#666;
			border-color:#999;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#ff9655;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#666;
							&:hover{
								border-color:#ff9655;
							}
						}
					}
				}
			}
		}
	}
	&.info{
		.y-panel-header{
			color:#fff;
			background-color:#23b7e5;
			border-color:#24cbe5;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#ff7f50;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#24cbe5;
							&:hover{
								border-color:#ff7f50;
							}
						}
					}
				}
			}
		}
	}
	&.success{
		.y-panel-header{
			color:#fff;
			background-color:#27c24c;
			border-color:#45b6af;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#fad733;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#45b6af;
							&:hover{
								border-color:#fad733;
							}
						}
					}
				}
			}
		}
	}
	&.warning{
		.y-panel-header{
			color:#fff;
			background-color:#ff7f50;
			border-color:#dfba49;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#666;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#dfba49;
							&:hover{
								border-color:#666;
							}
						}
					}
				}
			}
		}
	}
	&.danger{
		.y-panel-header{
			color:#fff;
			background-color:#f05050;
			border-color:#f3565d;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#24cbe5;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#f3565d;
							&:hover{
								border-color:#24cbe5;
							}
						}
					}
				}
			}
		}
	}
	.y-panel-body{
		height:200px;
		border:1px solid #aaa;
		background-color:#24cbe5;
		transition:height .2s;
	}
}

//switch
.y-switch{
	width:45px;
	height:28px;
	position:relative;
  border:1px solid #444;
  background-color:#333;
  border-radius:28px;
  background-clip:content-box;
  display:inline-block;
  -webkit-appearance:none;
  appearance:none;
  -webkit-user-select:none;
  user-select:none;
  outline:none;
  cursor:pointer;
  transition:all .2s ease-in;
  &::before{
  	content:'off';
  	font-size:9px;
  	color:#f05050;
  	text-align:center;
  	width:22px;
  	height:22px;
  	line-height:22px;
  	border-radius:22px;
  	position:absolute;
  	top:2px;
  	left:2px;
  	background-color:#eee;
  	box-shadow:0 0 2px 0px rgba(0,0,0,.4);
  	transition:all .2s ease-in;
  }
  &:checked{
  	border-color:#45b6af;
  	background-color:#27c24c;
  	&::before{
  		content:'on';
  		color:#27c24c;
  		left:19px;
  		background-color:#fff;
  		transition:all .2s ease-in;
  	}
  	transition:all .2s ease-in;
  }
}

//item
.y-items{
	>.y-item{
		padding:15px 20px;
		border-top:1px dashed #ccc;
		&:first-child{
			border-top:0;
		}
	}
}

//notification
.y-notification{
	position:fixed;
	width:240px;
	height:48px;
	line-height:48px;
	padding:0 15px;
	z-index:10001;
	opacity:.8;
	cursor:pointer;
	display:none;
	>i{
		font-size:22px;
		color:#fff;
	}
	>span{
		margin-left:10px;
		font-size:14px;
		font-weight:500;
		color:#fff;
	}
	&:hover{
		opacity:1;
	}
	&.top-left{
		top:10px;
		left:10px;
	}
	&.top-middle{
		top:10px;
		left:calc(~"50% - 120px");
	}
	&.top-right{
		top:10px;
		left:calc(~"100% - 250px");
	}
	&.bottom-right{
		bottom:10px;
		left:calc(~"100% - 250px");
	}
	&.default{
		background-color:#999;
		color:#666;
		color:#fff;
	}
	&.info{
		border:1px solid #24cbe5;
		background-color:#23b7e5;
		color:#fff;
	}
	&.success{
		border:1px solid #45b6af;
		background-color:#27c24c;
		color:#fff;
	}
	&.warning{
		border:1px solid #dfba49;
		background-color:#ff7f50;
		color:#fff;
	}
	&.danger{
		border:1px solid #f3565d;
		background-color:#f05050;
		color:#fff;
	}
}

//tables
.ytable{
  width:100%;
  max-width:100%;
  margin-bottom:20px;
  background-color:#fff;
  >thead,>tbody,>tfoot{
  	>tr{
  		>th,>td{
  			heght:32px;
			  line-height:32px;
			  padding:0;
			  vertical-align:top;
			  border-top:1px solid #ddd;
			  text-align:center;
  		}
  	}
  }
  >thead{
  	>tr{
  		>th{
  			vertical-align:bottom;
  			border-bottom:2px solid #ddd;
  		}
  	}
	  &:first-child{
	  	>tr{
	  		&:first-child{
	  			>th,>td{
	  				border-top:0;
	  			}
	  		}
	  	}
	  }
	}
	>tbody{
		>tr{
			&:hover{
				background-color:#f5f5f5;
			}
			>td{
				>input{
					width:100%;
					height:100%;
					border:0;
					margin-bottom:-1px;
					border-bottom:1px solid #23b7e5;
					font-style:italic;
					color:#24cbe5;
					padding:0 8px;
				}
				&.edit,&.delete{
  				width:70px;
  				font-weight:500;
  				>a{
  					padding:3px 4px;
  					border-radius:3px;
  					color:#fff;
  				}
  			}
  			&.edit{
  				>a{
  					background-color:#24cbe5;
  				}
  			}
  			&.delete{
  				>a{
  					background-color:#f3565d;
  				}
  			}
			}
		}
		&+body{
			border-top:2px;
		}
	}
	&.ytable-bordered{
		border:1px solid #ddd;
		>thead,>tbody,>tfoot{
			>tr{
				>th,td{
					border:1px solid #ddd;
				}
			}
		}
		>thead{
			>tr{
				>th,>td{
					border-bottom-width:2px;
				}
			}
		}
	}
	&.ytable-striped{
		>tbody{<commit_msg>fixed firefox css<commit_after>/*
**	layout.css
**	20160813 __yiru
*/
@import "./mystyle.css";

.y-left{
	float:left;
}
.y-right{
	float:right;
}
.y-hide{
	display:none !important;
}
.y-show{
	display:block !important;
}
.y-inline{
	display:inline-block !important;
}
.y-block{
	display:block !important;
}

/*垂直居中*/
.vertical-parent{
	position:relative;
	overflow:hidden;
	height:100%;
}
.vertical-children{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

body{
	position:relative;
	overflow:auto;
	height:3000px;

	//header
	header{
		.y-header{
			width:100%;
			height:45px;
			background-color:#222;
			color:#fff;
			position:fixed;
			left:0;
			right:0;
			top:0;
			z-index:101;
			//a
			a{
				color:#fff;
			}
			//brand
			.y-brand{
				width:250px;
				height:45px;
				float:left;
				background-color:#24cbe5;
				.brand{
					display:block;
					height:45px;
					line-height:45px;
					position:relative;
					>.logo{
						position:absolute;
						left:5px;
						top:5px;
						padding:0;
						margin:0;
						border:0;
						display:block;
						width:35px;
						height:35px;
						line-height:35px;
						border-radius:100%;
						text-align:center;
						background-image:url('./images/usr.jpg');
						background-size:35px 35px;
						background-repeat:no-repeat;
						// background-color:#24cbe5;
						color:#fff;
						font-size:24px;
					}
					>span{
						display:block;
						margin:0 10px 0 50px;
					}
				}
			}
			//nav
			.y-nav{
				width:calc(~"100% - 250px");
				height:45px;
				float:left;
				background-color:#23b7e5;
				>.y-nav-left{
					float:left;
				}
				>.y-nav-right{
					float:right;
					>ul{
						position:relative;
					}
				}
				.y-nav-wrap{
					padding:0;
					height:45px;
					line-height:45px;
					>ul>li{
						float:left;
						width:48px;
						text-align:center;
						>a:hover{
							color:#ff7f50;
						}
					}
					//search
					.y-search{
						float:left;
						position:relative;
						margin:0 15px;
						>input{
							border:0;
							padding:0;
							width:100px;
							height:32px;
							border-bottom:1px solid #ddd;
							background-color:transparent;
							padding-right:30px;
							font-size:14px;
							color:#fff;
							transition:width .2s;
							&:focus{
								border-bottom:1px solid #fff;
								width:180px;
							}
							&::-webkit-input-placeholder{
								color:#fff;
							}
						}
						>i{
							position:absolute;
							top:8px;
							right:0;
							display:inline-block;
							width:32px;
							height:31px;
							line-height:31px;
							text-align:center;
							font-size:12px;
							cursor: pointer;
						}
					}
					.y-dropdown{
						position:relative;
						font-size:14px;
						>.y-dropdown-menu{
							position:absolute;
							right:0;
							top:43px;
							width:200px;
							display:none;
							background-color:#777;
							border:1px solid #999;
							&::before,&::after{
								content:'';
								position:absolute;
								width:0;
								height:0;
								bottom:100%;
								border:solid transparent;
							}
							&::before{
								border-width:9px;
								right:12px;
								border-bottom-color:#999;
							}
							&::after{
								border-width:8px;
								right:13px;
								border-bottom-color:#444;
							}
							&.left{
								&::before{
									left:12px;
								}
								&::after{
									left:13px;
								}
							}
						}
						//theme
						&.theme{
							>.y-dropdown-menu{
								left:0;
								width:180px;
								.y-list{
									cursor:default;
									>h4{
										margin:0;
										padding:5px 10px;
										font-size:13px;
										color:#ddd;
									}
									>.theme-select{
										overflow:hidden;
										padding:5px 10px;
										>li{
											float:left;
											display:inline-block;
											cursor:pointer;
											width:12px;
											height:12px;
											border-radius:12px;
											margin:0 8px;
											&:nth-of-type(1){
												background-color:#45b6af;
											}
											&:nth-of-type(2){
												background-color:#f3565d;
											}
											&:nth-of-type(3){
												background-color:#dfba49;
											}
											&:nth-of-type(4){
												background-color:#24cbe5;
											}
											&:nth-of-type(5){
												background-color:#ff7f50;
											}
											&:hover{
												transform:scale(1.3,1.3);
												transition:transform .2s;
											}
										}
									}
								}
							}
						}
						&.open{
							.y-dropdown-menu{
								display:block;
							}
						}
					}
					//toggle-right-sidebar
					.toggle-right-sidebar{
						opacity:.8;
						background-color:#555;
					}
				}

			}
		}
	}
	
	&.y-collapse{
		aside{
			.y-sidebar{
				width:42px;
				&.open{
					width:100% !important;
					background-color:transparent;
				}
				.y-sidebar-wrap{
					// padding:0;
					.y-sidebar-title{
						display:none;
					}
					.y-sidebar-l1{
						width:42px;
						background-color:#444;
						>li{
							>a{
								>i:last-child,>p{
									display:none;
								}
							}
							>ul{
								display:none;
								height:auto !important;
								&.hover{
									position:absolute;
									top:0;
									left:42px;
									width:200px;
									display:block !important;
									z-index:12;
								}
							}
						}
					}
				}
			}
		}
		main{
			.y-main{
				left:42px;
			}
		}
	}
	&.y-sidebar-sm{
		header{
			.y-brand{
				width:45px;
				.brand{
					display:block;
					span{
						display:none;
					}
				}
			}
			.y-nav{
				width:calc(~"100% - 45px");
			}
		}
		aside{

		}
		main{
			.y-main{
				left:42px;
			}
		}
	}
	//sidebar
	aside{
		.y-sidebar{
			position:fixed;
			top:45px;
			left:0;
			bottom:0;
			width:250px;
			background-color:#444;
			z-index:11;
			.y-sidebar-wrap{
				/*padding:10px 0;
				transition:padding .01s ease-in-out;*/
				height:100%;
				min-height:100%;
				overflow-y:auto;
				overflow-x:hidden;
				a{
					display:block;
				}
				.y-sidebar-title{
					height:42px;
					line-height:42px;
					margin-bottom:12px;
					padding:0 15px;
					color:#fff;
					font-size:14px;
					font-weight:500;
					border-bottom:1px solid #aaa;
					&:hover{
						background-color:#333;
					}
				}
				.y-sidebar-l1{
					height:calc(~"100% - 54px");
					>li{
						// border-bottom:1px solid #ddd;
						position:relative;
						overflow:visible;
						font-size:15px;
						font-weight:500;
						&:hover{
							background-color:#ff9655;
							color:#fff;
						}
						&:last-child{
							border:none;
						}
						>a{
							position:relative;
							color:#eee;
							height:42px;
							cursor:pointer;
							&.active{
								background-color:#45b6af;
								color:#fff;
							}
							>i{
								position:absolute;
								width:42px;
								height:42px;
								top:0;
								line-height:42px;
								text-align:center;
								&:first-child{
									left:0;
									width:42px;
								}
								/*&:last-child{
									right:0;
									width:24px;
									transform:rotate(0deg);
									transition:transform .1s;
								}*/
							}
							>p{
								line-height:42px;
								margin:0;
								width:100%;
								padding:0 24px 0 42px;
								overflow:hidden;
								text-overflow:ellipsis;
								white-space:nowrap;
								&+i{
									right:0;
									width:24px;
									transform:rotate(0deg);
									transition:transform .1s;
								}
							}
						}
						>ul{
							height:0;
							display:block;
							background-color:#333;
							padding:0;
							overflow:hidden;
							transition:height .3s ease-in-out;
							>li{
								position:relative;
								font-size:13px;
								font-weight:400;
								&:first-child{
									margin-top:8px;
								}
								&:last-child{
									margin-bottom:8px;
								}
								>a{
									width:100%;
									height:32px;
									line-height:32px;
									color:#fff;
									cursor:pointer;
									padding:0 5px 0 30px;
									&:hover{
										background-color:#222;
										color:#f3565d;
										&::after{
											content:'';
											position:absolute;
											top:0;
											right:0;
											width:3px;
											height:32px;
											background-color:#f3565d;
										}
									}
									&.active{
										background-color:#272727;
										color:#f05050;
										&::after{
											content:'';
											position:absolute;
											top:0;
											right:0;
											width:3px;
											height:32px;
											background-color:#f05050;
										}
									}
									>span,>p{
										overflow:hidden;
										text-overflow:ellipsis;
										white-space:nowrap;
										margin:0 5px;
									}
								}
							}
						}
						&.open{
							>a{
								>p+i{
									transform:rotate(90deg);
									transition:transform .1s;
								}
							}
							>ul{
								/*height:auto;
								transition:height .3s ease-in-out;*/
							}
						}
					}
				}
			}
		}
		//rightbar
		.right-bar{
			position:fixed;
			top:45px;
			right:0;
			bottom:0;
			background-color:#777;
			transform:translateX(100%);
			transition:transform .3s ease-in-out;
			z-index:99;
			&.open{
				transform:translateX(0);
			}
			.y-rightbar-wrap{
				overflow-y:auto;
				.y-tab{
					position:relative;
					//清除浮动
					&::after{
						content:'';
						display:block;
						clear:both;
						visibility:hidden;
						height:0;
					}
					>li{
						float:left;
						width:64px;
						height:45px;
						line-height:45px;
						text-align:center;
						background-color:#333;
						color:#fff;
						cursor:pointer;
						&.active{
							background-color:#555;
						}
						&:hover{
							background-color:#444;
						}
					}
					.y-tab-act{
						width:64px;
						height:3px;
						position:absolute;
						top:42px;
						left:0;
						background-color:#f60;
						transition:left .3s;
						&::after{
							content:'';
							position:absolute;
							width:0;
							height:0;
							top:100%;
							left:50%;
							transform:translateX(-50%);
							border:4px solid transparent;
							border-top-color:#f60;
						}
					}
				}
				.y-tab-page{
					display:none;
					>.y-list-title{
						background-color:#777;
					}
					&.active{
						display:block;
					}
				}
			}
		}
	}
	//main
	main{
		.y-main{
			position:absolute;
		  top:45px;
		  right:0;
		  bottom:0;
		  width:auto;
		  left:250px;
		  background-color:#ddd;
		  z-index:1;
		  transition:left .01s ease-in-out;
		  .y-container{
		  	height:100%;
				padding:20px;
				background-color:#eee;
				.y-pageheader{
					>h2{
						margin:0;
						padding:0;
						font-size:24px;
						color:#333;
						>span{
							font-size:16px;
						}
					}
					.y-page-bar{
						margin-top:15px;
						overflow:hidden;
						width:100%;
						background-color:#fff;
						color:#000;
						>ul{
							overflow:hidden;
							float:left;
							>li{
								float:left;
								height:36px;
								line-height:36px;
								position:relative;
								padding:0 10px 0 15px;
								&:first-child{
									padding-left:15px;
								}
								&:hover{
									background-color:#666;
									color:#eee;
									&::before{
										content:'';
									}
								}
								&::before{
									content:'\f105';
									position:absolute;
									top:0;
									left:0;
								  font-family:FontAwesome;
									height:32px;
									line-height:32px;
									font-size:14px;
									font-weight:500;
									color:#aaa;
								}
								&:first-child::before{
									content:'';
								}
								>a{
									display:inline-block;
								}
							}
						}
						.y-timer{
							float:right;
							height:36px;
							line-height:36px;
							margin-right:15px;
							color:#ff7f50;
						}
					}
				}
				.y-pagecontent{
					padding:20px 15px;
				}
			}
		}
	}

}

//back-to-top
.y-back-top{
  width:35px;
  height:35px;
  border-radius:4px;
  position:fixed;
  right:20px;
  bottom:20px;
  background-color:#545e67;
  z-index:9999;
  cursor:pointer;
  overflow:hidden;
  display:none;
  >i{
  	color:#fff;
	  width:100%;
	  height:100%;
	  line-height:35px;
	  text-align:center;
	  font-size:25px;
	  position:absolute;
	  top:0;
	  transition:top .2s;
  }
  >span{
  	color:#fff;
	  display:block;
	  width:100%;
	  height:100%;
	  line-height:1.2;
	  padding:3px 0;
	  text-align:center;
	  font-size:12px;
	  font-weight:500;
	  position:absolute;
	  top:100%;
	  background-color:#23b7e5;
	  transition:top .2s;
  }
  &.ybt-hover{
	  >i{
	  	top:-100%;
	  }
	}
	&.ybt-hover{
	  >span{
	  	top:0;
	  }
	}
}

//badge
.y-badge{
	position:absolute;
	display:inline-block;
	min-width:10px;
	line-height:1;
	text-align:center;
	white-space:nowrap;
	vertical-align:middle;
	border-radius:10px;

	top:7px;
	right:9px;
	padding:3px 5px;
	font-size:10px;
	font-weight:400;
	background-color:#f05050;
	color:#fff !important;
}

//button
.ybtn{
	display:inline-block;
  padding:6px 12px;
  margin-bottom:0;
  font-size:14px;
  font-weight:500;
  line-height:1.42857143;
  border:1px solid transparent;
  border-radius:4px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  &:focus,&:active:focus{
		outline:5px auto -webkit-focus-ring-color;
  	outline-offset:-2px;
  }
  &:hover,&:focus{
  	color:#333;
  	text-decoration:none;
  }
  &:active{
  	outline:0;
  	box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
  }
  &[disabled]{
	  cursor:not-allowed;
	  box-shadow:none;
	  opacity:.65;
	}
	&.ybtn-default{
		color:#fff;
		background-color:#666;
		border-color:#999;
	}
	&.ybtn-info{
		color:#fff;
		background-color:#23b7e5;
		border-color:#24cbe5;
	}
	&.ybtn-success{
		color:#fff;
		background-color:#27c24c;
		border-color:#45b6af;
	}
	&.ybtn-warning{
		color:#fff;
		background-color:#ff7f50;
		border-color:#dfba49;
	}
	&.ybtn-danger{
		color:#fff;
		background-color:#f05050;
		border-color:#f3565d;
	}
	&.ybtn-sm{
		padding:5px 10px;
	  font-size:12px;
	  line-height:1.5;
	  border-radius:3px;
	}
	&.ybtn-lg{
		padding:10px 16px;
	  font-size:18px;
	  line-height:1.3333333;
	  border-radius:6px;
	}
	&.ybtn-block{
		display:block;
  	width:100%;
	}
}

//input
.y-input{
	display:inline-block;
  width:100%;
  height:34px;
  padding:6px 12px;
  font-size:14px;
  line-height:1.42857143;
  color:#555;
  background-color:#fff;
  background-image:none;
  border:1px solid #ccc;
  border-radius:4px;
  box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
  transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  &:focus{
  	border-color:#66afe9;
  	outline:0;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102, 175, 233, .6);
  }
	&[disabled]{
		background-color:#eee;
  	cursor:not-allowed;
	}
}

//table-header
.ytable-header{
	padding:10px 0;
	height:54px;
	//select
	.y-select{
		position:relative;
		width:160px;
		&.sm{
			width:100px;
		}
		&.lg{
			width:200px;
		}
		>.select-icon{
			position:absolute;
			display:inline-block;
			width:32px;
			height:32px;
			line-height:32px;
			text-align:center;
			right:1px;
			top:1px;
			cursor:pointer;
			border-top-right-radius:3px;
			border-bottom-right-radius:3px;
			&:hover{
				background-color:#f8f8f8;
			}
		}
		>.select-tip{
			display:inline-block;
			height:32px;
			line-height:32px;
			width:52px;
			font-size:13px;
			font-weight:500;
			color:#23b7e5;
			text-align:center;
			position:absolute;
			left:100px;
		}
		>ul{
			width:100%;
			background-color:#fff;
			z-index:20;
			position:absolute;
			border:1px solid #eee;
			border-top:0;
			display:none;
			>li{
				padding:8px 12px;
				border-top:1px solid #eee;
				cursor:pointer;
				&:first-child{
					boder:none;
				}
				&:hover{
					background-color:#ddd;
				}
			}
		}
	}
	//search
	.y-search{
		position:relative;
		width:160px;
		&.sm{
			width:120px;
		}
		&.lg{
			width:200px;
		}
		>.select-icon{
			position:absolute;
			display:inline-block;
			width:36px;
			height:34px;
			line-height:34px;
			text-align:center;
			right:0;
			top:0;
			cursor:pointer;
			background-color:#27c24c;
			color:#fff;
			border-top-right-radius:3px;
			border-bottom-right-radius:3px;
		}
	}
}

//
.ytable-footer{
	.pagination{
		height:32px;
		line-height:32px;
		padding:0 10px;
		>span{
			color:#45b6af;
			font-weight:500;
		}
		ul{
			margin-top:1px;
			overflow:hidden;
			text-align:center;
			>li{
				float:left;
				height:30px;
				min-width:32px;
				line-height:30px;
				border:1px solid #ccc;
				margin-left:-1px;
				padding:0 6px;
				color:#23b7e5;
				background-color:#f8f8f8;
				cursor:pointer;
				&:first-child{
					margin:0;
					border-top-left-radius:4px;
					border-bottom-left-radius:4px;
				}
				&:last-of-type{
					border-top-right-radius:4px;
					border-bottom-right-radius:4px;
				}
				&:hover{
					background-color:#eee;
					color:#45b6af;
				}
				&.active{
					background-color:#24cbe5;
					color:#fff;
					&:hover{
						background-color:#23b7e5;
						color:#fff;
					}
				}
				&.disabled{
					cursor:not-allowed;
				  opacity:.65;
				  background-color:#f0f0f0;
				}
				&.more{
					cursor:not-allowed;
				  background-color:#f8f8f8;
				}
			}
		}
	}
}

//panel
.y-panel{
	width:100%;
	position:relative;
	.y-panel-header{
		height:42px;
		line-height:42px;
		padding:0 15px;
		border-bottom:1px solid transparent;
		color:#fff;
		background-color:#666;
		border-color:#999;
		h4{
			margin:0;
			font-size:14px;
			font-weight:500;
			float:left;
		}
		.plugins{
			float:right;
			padding:5px 0;
			>div{
				width:32px;
				height:32px;
				line-height:32px;
				border-radius:3px;
				text-align:center;
				float:left;
				color:#ccc;
				>i{
					cursor:pointer;
					&:hover{
						color:#fff;
						transform:scale(1.3,1.3);
					}
				}
				&.select-theme{
					position:relative;
					padding:9px;
					>i{
						display:block;
						width:14px;
						height:14px;
						border:2px solid #eee;
						background-color:#666;
						&:hover{
							border-color:#fff;
						}
					}
					ul{
						display:none;
						width:172px;
						padding:10px 15px;
						position:absolute;
						right:-8px;
						top:37px;
						background-color:#eee;
						border-radius:5px;
						li{
							float:left;
							margin-left:8px;
							width:22px;
							height:22px;
							border:2px solid #eee;
							background-color:#999;
							border-radius:3px;
							opacity:.6;
							cursor:pointer;
							&:first-child{
								margin:0;
							}
							&:hover{
								opacity:1;
							}
						}
					}
				}
			}
		}
	}
	&.default{
		.y-panel-header{
			color:#fff;
			background-color:#666;
			border-color:#999;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#ff9655;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#666;
							&:hover{
								border-color:#ff9655;
							}
						}
					}
				}
			}
		}
	}
	&.info{
		.y-panel-header{
			color:#fff;
			background-color:#23b7e5;
			border-color:#24cbe5;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#ff7f50;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#24cbe5;
							&:hover{
								border-color:#ff7f50;
							}
						}
					}
				}
			}
		}
	}
	&.success{
		.y-panel-header{
			color:#fff;
			background-color:#27c24c;
			border-color:#45b6af;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#fad733;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#45b6af;
							&:hover{
								border-color:#fad733;
							}
						}
					}
				}
			}
		}
	}
	&.warning{
		.y-panel-header{
			color:#fff;
			background-color:#ff7f50;
			border-color:#dfba49;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#666;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#dfba49;
							&:hover{
								border-color:#666;
							}
						}
					}
				}
			}
		}
	}
	&.danger{
		.y-panel-header{
			color:#fff;
			background-color:#f05050;
			border-color:#f3565d;
			.plugins{
				>div{
					color:#fff;
					>i{
						&:hover{
							color:#24cbe5;
						}
					}
					&.select-theme{
						>i{
							border:2px solid #fff;
							background-color:#f3565d;
							&:hover{
								border-color:#24cbe5;
							}
						}
					}
				}
			}
		}
	}
	.y-panel-body{
		height:200px;
		border:1px solid #aaa;
		background-color:#24cbe5;
		transition:height .2s;
	}
}

//switch
.y-switch{
	width:45px;
	height:28px;
	position:relative;
  border:1px solid #444;
  background-color:#333;
  border-radius:28px;
  background-clip:content-box;
  display:inline-block;
  -webkit-appearance:none;
  appearance:none;
  -webkit-user-select:none;
  user-select:none;
  outline:none;
  cursor:pointer;
  transition:all .2s ease-in;
  &::before{
  	content:'off';
  	font-size:9px;
  	color:#f05050;
  	text-align:center;
  	width:22px;
  	height:22px;
  	line-height:22px;
  	border-radius:22px;
  	position:absolute;
  	top:2px;
  	left:2px;
  	background-color:#eee;
  	box-shadow:0 0 2px 0px rgba(0,0,0,.4);
  	transition:all .2s ease-in;
  }
  &:checked{
  	border-color:#45b6af;
  	background-color:#27c24c;
  	&::before{
  		content:'on';
  		color:#27c24c;
  		left:19px;
  		background-color:#fff;
  		transition:all .2s ease-in;
  	}
  	transition:all .2s ease-in;
  }
}

//item
.y-items{
	>.y-item{
		padding:15px 20px;
		border-top:1px dashed #ccc;
		&:first-child{
			border-top:0;
		}
	}
}

//notification
.y-notification{
	position:fixed;
	width:240px;
	height:48px;
	line-height:48px;
	padding:0 15px;
	z-index:10001;
	opacity:.8;
	cursor:pointer;
	display:none;
	>i{
		font-size:22px;
		color:#fff;
	}
	>span{
		margin-left:10px;
		font-size:14px;
		font-weight:500;
		color:#fff;
	}
	&:hover{
		opacity:1;
	}
	&.top-left{
		top:10px;
		left:10px;
	}
	&.top-middle{
		top:10px;
		left:calc(~"50% - 120px");
	}
	&.top-right{
		top:10px;
		left:calc(~"100% - 250px");
	}
	&.bottom-right{
		bottom:10px;
		left:calc(~"100% - 250px");
	}
	&.default{
		background-color:#999;
		color:#666;
		color:#fff;
	}
	&.info{
		border:1px solid #24cbe5;
		background-color:#23b7e5;
		color:#fff;
	}
	&.success{
		border:1px solid #45b6af;
		background-color:#27c24c;
		color:#fff;
	}
	&.warning{
		border:1px solid #dfba49;
		background-color:#ff7f50;
		color:#fff;
	}
	&.danger{
		border:1px solid #f3565d;
		background-color:#f05050;
		color:#fff;
	}
}

//tables
.ytable{
  width:100%;
  max-width:100%;
  margin-bottom:20px;
  background-color:#fff;
  >thead,>tbody,>tfoot{
  	>tr{
  		>th,>td{
  			heght:32px;
			  line-height:32px;
			  padding:0;
			  vertical-align:top;
			  border-top:1px solid #ddd;
			  text-align:center;
  		}
  	}
  }
  >thead{
  	>tr{
  		>th{
  			vertical-align:bottom;
  			border-bottom:2px solid #ddd;
  		}
  	}
	  &:first-child{
	  	>tr{
	  		&:first-child{
	  			>th,>td{
	  				border-top:0;
	  			}
	  		}
	  	}
	  }
	}
	>tbody{
		>tr{
			&:hover{
				background-color:#f5f5f5;
			}
			>td{
				>input{
					width:100%;
					height:32px;
					border:0;
					margin-bottom:-1px;
					border-bottom:1px solid #23b7e5;
					font-style:italic;
					color:#24cbe5;
					padding:0 8px;
				}
				&.edit,&.delete{
  				width:70px;
  				font-weight:500;
  				>a{
  					padding:3px 4px;
  					border-radius:3px;
  					color:#fff;
  				}
  			}
  			&.edit{
  				>a{
  					background-color:#24cbe5;
  				}
  			}
  			&.delete{
  				>a{
  					background-color:#f3565d;
  				}
  			}
			}
		}
		&+tbody{
			border-top:2px;
		}
	}
	&.ytable-bordered{
		border:1px solid #ddd;
		>thead,>tbody,>tfoot{
			>tr{
				>th,td{
					border:1px solid #ddd;
				}
			}
		}
		>thead{
			>tr{
				>th,>td{
					border-bottom-width:2px;
				}
			}
		}
	}
	&.ytable-striped{
		>tbody{
{'fraction_non_alphanumeric': 0.1504226288135241, 'fraction_numerical': 0.052937633694004275, 'mean_word_length': 1.7864128233319831, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 203, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 2, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6310020', 'n_tokens_mistral': 29746, 'n_tokens_neox': 18961, 'n_words': 2565}