body {
	overflow: hidden;
}

.sui-container {
	width: 100%;
}

.sui-notify {
	position: fixed;
	z-index: 99999999;
	top: 0;
	right: 0;
	background: rgba(204, 0, 0, 0.8);
	color: #fff;
	padding: 5px 15px;

	.sui-notify-close {
		position: absolute;
		top: 5px;
		right: 5px;
		color: #fff;
	}
}

.sui-form {
	background: #fff;
	border: solid 1px #e5e5e5;
	box-shadow: 0 0 3px #e5e5e5;
	border-radius: 4px;
	.sui-form-h;
	.sui-form-heading {
		border-bottom: dotted 1px #e0e0e0;
		margin-top: 30px;
		margin-bottom: 40px;
		h1,h2,h3,h4,h5,h6 {
			font-size: 16px;
			margin: 0 15px;
			margin-bottom: -10px;
			background: #fff;
			width: 100px;
			text-align: center;
			color: #888;
		}
	}
	.sui-custom-checkbox {
		margin-right: 2rem;
		display: inline-block;
		white-space: nowrap;
	}
	.form-control.checkbox {
		padding: 7px 15px;
		height: auto;
		line-height: 1.8em;
	}
	code {
		font-weight: bold;
	}
}

.sui-form-h {
	padding: 30px 15px;
	.form-group {
		position: relative;
		padding: 0 15%;
		.control-label {
			position: absolute;
			left: 0;
			top: 7px;
			width: 15%;
			text-align: right;
			padding-right: 10px;
		}
		.radio, .checkbox {
			margin: 0;
			padding: 7px 0;
		}
		.regex-tip {
			top: 3px;
			right: 15%;
			padding-right: 15px;
		}
		.form-control.checkbox {
			padding: 7px 15px;
			height: auto;
		}
		&.has-success {
			&:after {
				right: 15%;
			}
		}
	}
	.form-action {
		text-indent: 15px;
		padding: 15px 15%;
		margin: -30px -15px;
		margin-top: 30px;
		background: #f0f0f0;
	}
}

.sui-form-v {
	padding: 15px;
	.form-group {
		padding: 0;
		.control-label {
			position: static;
			left: 0;
			top: 0;
			width: auto;
			text-align: left;
		}
		.radio, .checkbox {
			margin: 0;
			padding: 7px 0;
		}
		.regex-tip {
			right: 10px;
			top: 26px;
		}
		&.has-success {
			&:after {
				top: 32px;
				right: 10px;
			}
		}
	}
	.form-action {
		max-width: inherit;
		padding: 15px 0;
		margin: -15px;
		margin-top: 30px;
		background: #f0f0f0;
	}
}

.sui-header {
	position: relative;
	z-index: 5;
	.navbar-default {
		border-radius: 0;
		.navbar-header {
			position: relative;
			.navbar-brand {
				position: relative;
				width: 190px;
				height: 60px;
				background: @vi-primary-color;
				text-align: center;
				padding: 0 12px;
				&:hover {
					background: @vi-primary-color;
				}
				.logo {
					display: block;
					width: 130px;
					line-height: 54px;
					overflow: hidden;
					img {
						max-width: 100%;
					}
				}
			}
			.btn-collapse-sidebar {
				position: absolute;
				right: 12px;
				top: 15px;
				padding: 0 5px;
				background: @vi-primary-color;
				color: rgba(255, 255, 255, 0.8);
				font-size: 18px;
				font-weight: normal;
				z-index: 99;
				border: solid 1px rgba(255, 255, 255, 0.8);
				border-radius: 3px;
			}
		}

		.navbar-collapse {
			position: absolute;
			top: 0;
			left: 190px;
			right: 0;
			z-index: 1;
			padding-left: 0;
			box-shadow: 0 -3px 5px lighten(@vi-primary-color, 30%);
			// border-bottom: solid 1px #ccc;
			height: 60px;
			background: @header-background;
			color: @header-color;
			.sui-user-panel {
				height: 62px;
				padding: 8px 0;
				a {
					color: @header-color;
				}
				h4 {
					margin: 0;
					margin-bottom: 5px;
				}
				.avatar {
					position: relative;
					margin-right: 10px;
					.img-circle {
						border: solid 2px #fff;
					}
					i {
						display: none;
						position: absolute;
						color: #fff;
						font-style: normal;
						top: 13px;
						left: 9px;
						background: #f30;
					}
					&:hover i {
						display: block;
					}
				}
			}
			.navbar-nav {
				>li {
					//border-right: solid 1px darken(@header-background, 5%);
					position: relative;
					.badge {
						position: absolute;
						top: 8px;
						right: 8px;
						font-size: 10px;
						padding: 2px 4px;
						line-height: 10px;
						background: @vi-danger-color;
					}
					>a {
						color: @header-color;
					}
				}
				.fa {
					font-size: 16px;
					font-weight: normal;
					vertical-align: middle;
					margin-top: -3px;
				}
				.avatar {
					width: 46px;
					height: 46px;
					border: solid 2px #fff;
					border-radius: 46px;
					vertical-align: middle;
					margin: -12px 0;
				}
			}
		}
		
	}
}

.sui-body {
	position: absolute;
	top: 60px;
	left: 0;
	right: 0;
	bottom: 0;
	background: @background-color;
	overflow: auto;
	border-top: solid 1px #ddd;
}

.sui-breadcrumb {
	background: none;
	border-radius: 0;
	margin: 0 0 10px 0;
	padding: 0;
	a {
		color: #777;
	}
}

.sui-sidebar {
	position: fixed;
	top: 60px;
	bottom: 0;
	left: 0;
	width: 190px;
	background: @sidebar-background;
	z-index: 10;
	overflow: auto;
	padding-top: 40px;

	/* 滚动条样式 */
	&::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	&::-webkit-scrollbar-track {
		background: rgba(0,0,0,0.8); 
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
	&::-webkit-scrollbar-thumb {
		-webkit-border-radius: 10px;
		border-radius: 10px;
		background: rgba(255,255,255,0.4); 
	}

	.copyright {
		position: absolute;
		bottom: 10px;
		left: 15px;
		right: 10px;
		color: #444;
	}
	.caption {
		color: #777;
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
		margin-bottom: 0;
		margin-top: 15px;
		overflow: hidden;
		padding: 10px 15px;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	.nav {
		li {
			a {
				color: @sidebar-color;
				display: block;
				font-size: 13px;
				line-height: 18px;
				padding: 10px 15px;
				position: relative;
				text-decoration: none;
				-webkit-transition: all .3s;
				-o-transition: all .3s;
				transition: all .3s;
				//border-bottom: solid 1px lighten(@sidebar-background, 1%);
				&:hover {
					background: lighten(@sidebar-background, 7%);
				}
			}
			ul {
				display: none;
				list-style: none;
				padding: 0;
				li {
					a {
						background-color: lighten(@sidebar-background, 10%);
						color: #a6a6a6;
						display: block;
						font-size: 13px;
						line-height: 18px;
						padding: 6px 15px 6px 36px;
						position: relative;
						text-decoration: none
					}
				}
			}
			&.has-childs {
				>a {
					&:before {
						content: "\f105";
						float: right;
						font-family: FontAwesome;
						height: 18px;
						line-height: 18px;
						margin-left: 5px;
						text-align: center;
						-webkit-transform: none;
						-ms-transform: none;
						-o-transform: none;
						transform: none;
						-webkit-transition: -webkit-transform .3s;
						transition: -webkit-transform .3s;
						-o-transition: -o-transform .3s;
						transition: transform .3s;
						transition: transform .3s, -webkit-transform .3s, -o-transform .3s;
						width: 18px
					}
				}
			}
			&.active {
				a {
					background: @sidebar-background;
					color: lighten(@sidebar-color, 30%);
				}
				&:after {
					border-color: transparent @background-color transparent transparent;
					border-style: solid;
					border-width: 6px;
					content: "";
					height: 0;
					pointer-events: none;
					position: absolute;
					right: 0;
					top: 50%;
					-webkit-transform: translateY(-50%);
					-ms-transform: translateY(-50%);
					-o-transform: translateY(-50%);
					transform: translateY(-50%);
					width: 0
				}
			}
			&.open {
				.active;
				&:after {
					display: none;
				}
				>a {
					background: lighten(@sidebar-background, 5%);
					&:before {
						transform: rotate(90deg);
					}	
				}
				ul {
					display: block;
					li {
						&.open {
							&:after {
								display: block;
							}
						}
						a {
							background: darken(@sidebar-background, 5%);
							color: @sidebar-color;
						}
						&.active {
							position: relative;
							a {
								//background: lighten(@sidebar-background, 2%);
								color: #fff;
							}
							&:after {
								//display: none;
							}
						}
						&:hover {
							a {
								color: #fff;
							}
						}
					}
				}
			}
		}
	}
}

.sui-primary {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin-left: 190px;
	padding: 20px;
	.sui-primary-2cols {
		position: absolute;
		padding: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		.sui-primary-2cols-divider {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 250px;
			z-index: 8;
			.ui-resizable-handle {
				width: 5px;
				background: #ddd;
				position: absolute;
				top: 0;
				bottom: 0;
				right: -5px;
				cursor: col-resize;
				opacity: 0;
				&:before{
					position: absolute;
					top: 50%;
					right: -10px;
					width: 20px;
					height: 60px;
					line-height: 60px;
					font-family: FontAwesome;
					content: "\f039";
					color: #888;
					background: #ddd;
					margin-top: -30px;
					margin-left: -1px;
					border-radius: 0 3px 3px 0;
					display: block;
					font-size: 12px;
					-webkit-transform:scale(0.6);
					text-transform:rotate(-90deg);
					text-align: center;
				}
				&:hover {
					opacity: 1;
				}
			}
		}
		.sui-primary-2cols-left {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			width: 250px;
			padding: 0;
			background: @subnav-background;
			border-right: solid 1px darken(@subnav-background, 10%);
			box-shadow: 0 2px 2px #ddd;
			overflow-y: auto;
			z-index: 9;
			/* 滚动条样式 */
			&::-webkit-scrollbar {
				width: 6px;
				&:horizontal {
					height: 6px;
				}
			}
			&::-webkit-scrollbar-track {
				background: rgba(255,255,255,0.4);
				-webkit-border-radius: 0;
				border-radius: 0;
				border-left: solid 1px #ddd;
				&:horizontal {
					border-left: none;
					border-top: solid 1px #ddd;
				}
			}
			&::-webkit-scrollbar-thumb {
				-webkit-border-radius: 10px;
				border-radius: 10px;
				background: rgba(0,0,0,0.5); 
			}

			.sui-tree {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				padding-top: 46px;
				.caption {
					position: fixed;
					top: 60px;
					width: 250px;
					font-size: 14px;
					padding: 12px 15px;
					background: darken(@subnav-background, 3%);
					border-bottom: solid 1px darken(@subnav-background, 15%);
					box-shadow: 0 0 1px #ddd;
					color: @toolbar-color;
					font-weight: bold;
					margin-bottom: 10px;
					z-index: 999;
					a {
						// color: @toolbar-color;
						.fa {
							vertical-align: middle;
						}
					}
				}
				.divider {
					//border-bottom: dotted 1px #555;
					background: darken(@subnav-background, 10%);
				}
				ul {
					list-style: none;
					padding: 0;
					li {
						position: relative;
						a {
							display: block;
							color: @subnav-color;
							font-size: 14px;
							white-space: nowrap;
							padding: 2px 10px;
							.fa-fold {
								margin-bottom: -3px;
								border-radius: 16px;
								width: 16px;
								height: 16px;
								line-height: 16px;
								color: #777;
								&:hover {
									background: rgba(0, 0, 0, 0.2);
								}
								&:before {
									content: "\f0da";
								}
							}
							.fa-fold-empty {
								margin-bottom: -3px;
								border-radius: 16px;
								width: 16px;
								height: 16px;
								line-height: 16px;
								color: #777;
							}
							.x-tree-node-indent {
								width: 20px;
								display: inline-block;
							}
							&:hover {
								background: darken(@subnav-background, 5%);
							}
						}
						&.active>a {
							background: @vi-primary-color;
							color: #fff;
							.fa-fold {
								color: #fff;
							}
						}
						&.opened {
							>a .fa-fold:before {
								content: '\f0d7';
							}
						}
						&.view-more {
							background: #f8f8f8;
							.fa {
								color: #999;
							}
							.menu-text {
								color: #999;
							}
						}
						.ext-status {
							position: absolute;
							right: 10px;
							top: 3px;
							color: #888;
						}
						.menu-text {
							margin-left: 5px;
						}
						.dargsort-handle {
							display: none;
							position: absolute;
							right: 4px;
							top: 3px;
							z-index: 99;
							color: #ccc;
							padding-right: 4px;
							padding-left: 4px;
							background: transparent;
							cursor: row-resize;
							background: @subnav-background;
							border-radius: 3px;
							box-shadow: 0 0 3px #ddd;
							font-size: 12px;
						}
						&:hover {
							>.dargsort-handle {
								display: block;
							}
						}
						&.active {
							>.dargsort-handle {
								//background: @vi-primary-color;
								color: @vi-primary-color;
							}
						}
					}
				}
			}

			.sui-mail-list {
				position: absolute;
				top: -4px;
				bottom: 0;
				left: 0;
				right: 0;
				//background: #fff;
				/* 滚动条样式 */
				&::-webkit-scrollbar {
					width: 5px;
					&:horizontal {
						height: 5px;
					}
				}
				&::-webkit-scrollbar-track {
					background: rgba(255,255,255,0.4); 
					-webkit-border-radius: 10px;
					border-radius: 10px;
				}
				&::-webkit-scrollbar-thumb {
					-webkit-border-radius: 10px;
					border-radius: 10px;
					background: rgba(0,0,0,0.4); 
				}
				.sui-tree;
				.caption {
					margin-bottom: 0;
					.edit-btns {
						margin: -3px;
						display: none;
						.chkall {
							margin-left: -2px;
							margin-right: 5px;
							font-size: 11px;
						}
						.pull-right {
							margin: 3px;
						}
					}
				}
				ul {
					li {
						a {
							position: relative;
							border-bottom: solid 1px #ddd;
							overflow: hidden;
							padding: 6px 6px 6px 28px;
							background: #fff;
							.fa {
								position: absolute;
								left: 10px;
								top: 8px;
							}
							.msg-title {
								display: block;
								font-weight: bold;
								color: #333;
								width: 160px;
								overflow:hidden;  
								text-overflow:ellipsis; 
								white-space:nowrap;
								margin-bottom: 3px;
								//padding-right: 80px;
							}
							.msg-summary {
								display: block;
								color: #666;
								width: 100%;
								overflow: hidden;
								line-height: 1.5em;
								max-height: 3em;
								white-space: normal;
								//padding-left: 20px;
							}
							.msg-date {
								position: absolute;
								top: 6px;
								right: 6px;
								display: block;
								color: #999;
								font-size: 11px;
								text-align: right;
							}
						}
						.chkbox {
							display: none;
						}

						&.active {
							a {
								.msg-title, .msg-summary, .msg-date {
									color: #fff;
								}
							}
						}
						&.edit {
							position: relative;
							a {
								padding-left: 48px;
								.fa {
									left: 30px;
								}
							}
							.chkbox {
								display: block;
								position: absolute;
								top: 6px;
								left: 10px;
								z-index: 99;
							}
						}
					}
				}
			}
		}
		.sui-primary-2cols-right {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 250px;
			right: 0;
			padding: 15px;
			overflow: auto;
			background: @background-color;
			.sui-form {
				background: #fff;
				// border: none;
				// border-top: solid 1px #ddd;
				// margin: -15px;
				// margin-top: 5px;
				// padding-top: 20px;
				.form-action-fixed {
					position: fixed;
					right: 30px;
					top: 60px;
					margin: 0;
					padding: 12px;
					text-indent: 0;
					border-radius: 0 0 4px 4px;
					background: rgba(200, 200, 200, 0.4);
					z-index: 999;
				}
			}
		}
	}
}

.sui-page {
	padding-bottom: 20px;
	.sui-page-header {
		position: relative;
		margin-bottom: 15px;
		h1,h2,h3,h4,h5,h6 {
			font-size: 20px;
			font-weight: bold;
			margin: 0;
			padding: 4px 0;
			margin-right: 60px;
		}
		.sui-searchbox {
			position: absolute;
			right: 0;
			top: 0;
			.form-group {
				position: relative;
				.fa-remove {
					position: absolute;
					right: 7px;
					top: 7px;
					color: #666;
				}
			}
		}
		.sui-breadcrumb {
			margin: 0;
			margin-bottom: 15px;
		}
		.sui-page-tabs {
			position: absolute;
			bottom: 4px;
			left: 200px;
			padding-left: 0;
			margin-bottom: 0;
			list-style: none;
			//padding: 5px 10px 0 10px;
			li {
				display: inline-block;
				a {
					display: block;
					border-radius: 4px;
					padding: 2px 12px;
					color: #333;
					//font-size: 14px;
					//background: #e8e8e8;
				}
				&.active {
					a, a:hover {
						background: lighten(@sidebar-background, 10%);
						color: #fff;
					}
				}
			}
		}
	}

	.sui-page-body {
		position: relative;
		.sui-page-body-2cols {
			.sui-page-body-2cols-left {
				padding-right: 240px;
				min-height: 400px;
			}
			.sui-page-body-2cols-right {
				background: #f0f0f0;
				position: absolute;
				right: 0px;
				top: 0px;
				bottom: 0px;
				width: 240px;
				padding: 15px;
			}
		}
		.sui-profile {
			.profile-avatar {
				text-align: center;
				img {
					max-width: 80%;
				}
			}
			.profile-name {
				margin: 20px 0;
				text-align: center;
				font-size: 14px;
				small {
					display: block;
					font-size: 12px;
				}
			}
			.profile-attr {
				.list-group-item {
					background: rgba(255,255,255,.8);
					text-align: right;
				}
			}
		}
		.sui-toolbar {
			background: @toolbar-background;
			color: @toolbar-color;
			padding: 6px 8px;
			overflow: hidden;
			min-height: 40px;
			// box-shadow: 0 0 3px rgba(0, 0, 0, .2);
			// border-radius: 4px 4px 0 0;
			&:before {
				content: "\f148";
				float: left;
				font-family: FontAwesome;
				height: 18px;
				line-height: 18px;
				margin: 5px 5px 5px 0;
				text-align: center;
				-webkit-transform: none;
				-ms-transform: none;
				-o-transform: none;
				transform: none;
				-webkit-transition: -webkit-transform .3s;
				transition: -webkit-transform .3s;
				-o-transition: -o-transform .3s;
				transition: transform .3s;
				transition: transform .3s, -webkit-transform .3s, -o-transform .3s;
				width: 18px;
				color: @toolbar-color;
				transform:rotate(180deg);
			}
			&:last-child {
				// border-radius: 0 0 4px 4px;
				&:before {
					content: "\f149";
				}
			}
			&.no-icon {
				&:before {
					display: none;
				}
			}
			.pagination {
				margin: 0;
			}
		}
		.table-datalist {
			border: solid 1px #e5e5e5;
			// box-shadow: 0 0 3px rgba(0, 0, 0, .1);
			background: #fff;
			// border-radius: 4px;
			th,td {
				&:last-child {
					border-right: none;
				}
			}
		}
	}

	.sui-page-footer {
		background: #f8f8f8;
		padding: 10px;
	}
}

/* 图片选择器 */
.sui-img-selector {
	height: auto;
	padding: 5px;
	background: #fff;
	overflow: hidden;
	.sui-selector-value {
		display: none;
	}
	.sui-selector-box {
		position: relative;
		background: #fff;
		border-radius: 4px 4px 0 0;
		.img-preview {
			display: block;
			text-align: center;
			overflow: hidden;
			img {
				margin: 10px;
				max-height: 200px;
			}
		}
		.img-item {
			position: relative;
			//display: inline-block;
			float: left;
			background: #ddd;
			// margin: 10px 0 10px 10px;
			margin: 5px;
			padding: 1px;
			width: 102px;
			&:hover .operate {
				display: block;
			}
			.thumb {
				position: relative;
				display: block;
				width: 100px;
				height: 100px;
				line-height: 96px;
				text-align: center;
				background: #f8f8f8;
				i {
					position: relative;
					font-size: 64px;
					color: #ccc;
					vertical-align: middle;
					b {
						position: absolute;
						left: 0;
						right: 0;
						top: 50%;
						color: #ccc;
						margin-top: -5px;
						font-weight: bold;
						text-align: center;
						text-transform: uppercase;
					}
				}
			}
			.alt {
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 102px;
				background: #f0f0f0;
				padding: 10px;
				text-align: left;
				display: none;
				z-index: 9999;
				.btn {
					margin-top: 8px;
				}
			}
			.operate {
				position: absolute;
				top: 1px;
				right: 1px;
				background-color: rgba(0,0,0, 0.75);
				line-height: 1em;
				padding: 3px 5px;
				a {
					color: #fff;
				}
			}
		}
		.img-remove {
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			padding: 3px 6px;
			background: rgba(0,0,0,0.5);
			color: #fff;
		}
		img, .img-item img {
			max-width: 100%;
			max-height: 100%;
		}
	}
	.sui-selector-btns {
		padding: 7px 10px;
		position: relative;
		overflow: hidden;
		min-height: 30px;
		background: #f9f9f9;
		margin: -5px;
		.btn {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			border-radius: 0;
			font-size: 14px;
			color: #333;
		}
	}
}

/* 图片浏览器 */
.sui-img-explorer {
	padding: 20px 0;
	margin: -10px;
	dl {
		background: #f0f0f0;
		box-shadow: 0 0 3px #ddd;
		border: solid 1px #ddd;
		border-radius: 3px;
		padding: 8px;
		cursor: pointer;
		.thumb {
			display: block;
			height: 160px;
			width: 100%;
			text-align: center;
			line-height: 156px;
			background: #fff;
			overflow: hidden;
			background: #fff;
			img {
				max-width: 90%;
				max-height: 90%;
			}
			i {
				position: relative;
				font-size: 72px;
				color: #ccc;
				vertical-align: middle;
				b {
					position: absolute;
					left: 0;
					right: 0;
					top: 50%;
					color: #ccc;
					margin-top: -5px;
					font-weight: bold;
					text-align: center;
					text-transform: uppercase;
				}
			}
		}
		.opts {
			input {
				float: right;
			}
		}
		.filename, .title, .summary {
			margin: 3px;
		}
		.summary {
			line-height: 1.4em;
			height: 4.2em;
			overflow: hidden;
			color: #888;
		}
	}

	/* 弹窗 */
	&.pop {
		margin-top: 10px;
		dl {
			padding:2px;
			position:relative;
			overflow:hidden;
			//margin: 10px;
			&.selected {
				border-color: @vi-primary-color;
				background: @vi-primary-color;
				.filename, .title, .summary {
					color: #fff;
				}
				.fa-check-circle-o {
					display:block;
				}
			}

			.fa-check-circle-o {
				position:absolute;
				right:6px;
				top:6px;
				color:@vi-primary-color;
				font-size:14px;
				display:none;
			}

			.thumb {
				height: 100px;
				width: 100%;
				text-align: center;
				line-height: 96px;
				img {
					max-width: 90%;
					max-height: 90%;
				}
			}

			.filename {
				color: #666;
			}

			&:hover {
				background: @vi-primary-color;
				border-color: @vi-primary-color;
				.filename, .title, .summary {
					color: #fff;
				}
			}
		}
	}
}

/* 缩略图 */
.sui-sku-thumb {
	.sui-img-value {
		display: none;
	}
	.sui-img-selector-box {
		position: relative;
		display: block;
		background: none;
		border-radius: 0;
		width: 50px;
		height: 50px;
		line-height: 48px;
		text-align: center;
		background:#ddd; 
		border:solid 1px #ccc; 
		// overflow: hidden;
		cursor: pointer;
		a {
			display: block;
		}
		img {
			max-width:100%; 
			max-height: 100%;
		}

		.img-remove {
			// display: none;
			position: absolute;
			padding: 0;
			top: -1px;
			right: -1px;
			line-height: 1em;
			font-size: 12px;
			z-index: 999;
			background: rgba(0, 0, 0, 0.8);
			color: #fff;
			width: 14px;
			height: 14px;
			text-align: center;
			span {
				display: none;
			}
		}
		&:hover .img-remove {
			display: block;
		}
	}
}

.sui-resource-selector {
	.sui-img-selector;
	.sui-selector-box {
		.img-item {
			position: relative;
			//display: inline-block;
			float: left;
			// margin: 10px 0 10px 10px;
			width: 33.33%;
			margin: 0;
			background: none;
			.box {
				position: relative;
				background: #f0f0f0;
				background: #f0f0f0;
				box-shadow: 0 0 3px #ddd;
				border: solid 1px #ddd;
				border-radius: 3px;
				padding-left: 100px;
				margin: 5px;
				height: 102px;
				border-radius: 4px;
				overflow: hidden;
				.thumb {
					position: absolute;
					left: 0;
					top: 0;
					display: block;
					width: 100px;
					height: 100px;
					line-height: 96px;
					text-align: center;
					background: #f8f8f8;
				}
				.title {
					margin: 5px 10px;
					font-weight: bold;
				}
				.summary {
					margin: 5px 10px;
					line-height: 1.4em;
					height: 4.2em;
					overflow: hidden;
					color: #777;
				}
				.operate {
					top: 0;
					right: 0;
					border-radius: 0 3px 0 0;
				}
			}
			
		}
	}
}

.sui-resource-explorer {
	.sui-img-explorer;
	&.pop {
		dl {
			padding-left: 110px;
			min-height: 100px;
			.thumb {
				position: absolute;
				left: 0;
				top: 0;
				width: 100px;
				overflow: hidden;
			}
			.title {
				font-weight: bold;
			}
		}
	}
}

/* 登录页面开始 */
.sui-login-form {
	width: 380px;
	margin: 120px auto;
	color: #fff;
	padding: 20px 50px;
	background: #f9f9f9;
	border-radius: 8px;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	.sui-login-logo {
		text-align: center;
		margin: 20px 0;
		font-size: 22px;
		font-weight: bold;
		color: #555;
		line-height: 1.6em;
		// background: #f0f0f0;
		padding: 15px 10px;
		border-radius: 4px;
		h5 {
			display: block;
			font-size: 14px;
			margin: 5px;
		}
	}
	.help-block {
		color: #666;
		margin-top: 30px;
		ol {
			margin-top: 10px;
			padding-left: 20px;
		}
	}
	.input-group {
		margin-bottom: 15px;
	}
	.btn-primary {
		background: @vi-primary-color;
		border-color: @vi-primary-color;
		padding: 0;
		line-height: 38px;
		font-size: 16px;
		&.action:hover,
		&:hover {
			background: darken(@vi-primary-color, 10%);
			border-color: darken(@vi-primary-color, 10%);
		}
	}
}

/* 折叠样式 */
.sui-collapsed {
	.sui-header {
		.btn-collapse-sidebar {
			//left: 0;
			z-index: 9;
			color: #fff;
		}
		.navbar-default {
			.navbar-header {
				.navbar-brand {
					width: 50px;
					img {
						display: none;
					}
				}
			}
			.navbar-collapse {
				left: 50px;
			}
		}
	}

	.sui-sidebar {
		width: 50px;
		overflow: visible;
		.caption {
			visibility: hidden;
		}
		.nav {
			li {
				&.has-childs {
					a:before {
						display: none;
					}
					ul {
						position: absolute;
						left: 50px;
						width: 140px;
						box-shadow: 3px 3px 3px #ddd;
						display: none;
						z-index: 999;
						padding-bottom: 4px;
						background: rgba(0, 0, 0, 0.9);
						border-top: solid 1px #000;
						li {
							a {
								padding: 5px 15px;
								background: none;
								text-align: left;
								&:hover {
									background: #000;
								}
							}
							.menu-text {
								position: static;
								padding: 0;
								font-weight: normal;
								background: none;
								color: lighten(@sidebar-color, 10%);
								&:after {
									display: none;
								}
							}
							&.active {
								a {
									background: rgba(0, 0, 0, 1);
									.menu-text {
										color: #fff;
									}
								}
								&:after {
									display: none;
								}
							}
						}
					}
					
				}
				&:hover {
					>a {
						background: lighten(@sidebar-background, 10%);
					}
					ul {
						display: block;
					}
					.menu-text {
						display: inline;
					}
				}
				a {
					text-align: center;
					.fa {
						font-size: 16px;
					}
					.menu-text {
						position: absolute;
						top: 0;
						left: 50px;
						width: 140px;
						background: rgba(0, 0, 0, 0.9);
						padding: 10px 15px;
						display: none;
						color: #fff;
						text-align: left;
						font-weight: bold;
						&:after {
							border-color: transparent darken(@sidebar-background, 5%) transparent transparent;
							border-style: solid;
							border-width: 6px;
							content: "";
							height: 0;
							pointer-events: none;
							position: absolute;
							left: -12px;
							top: 19px;
							-webkit-transform: translateY(-50%);
							-ms-transform: translateY(-50%);
							-o-transform: translateY(-50%);
							transform: translateY(-50%);
							width: 0;
							z-index: 99;
						}
					}
				}
				ul {
					display: none;
				}
			}
		}
		.copyright {
			display: none;
		}
	}
	.sui-primary {
		margin-left: 50px;
	}
}

.sui-attr-list {
	dl {
		overflow: hidden;
		margin: 3px 0;
		dt {
			float: left;
			font-weight: normal;
		}
		dd {
			float: right;
			color: #666;
		}
	}
}

.sui-loading {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.95);
	z-index: 99999;
	.sui-loading-text {
		width: 160px;
		margin: 100px auto;
		padding: 5px 10px;
		text-align: center;
		background: #fff;
		border: solid 1px #ccc;
		box-shadow: 0 0 3px #ccc;
		//color: #fff;
	}
}


.sui-card {

}
.sui-card-chart {
	background: #fff;
	position: relative;
	padding: 10px;
	// border: solid 1px #e5e5e5;
	// border-radius: 4px;
	margin-bottom: 15px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .1);
	overflow: hidden;
	.card-heading {
		padding: 5px;
		font-weight: bold;
		font-size: 14px;
		.pull-right {
			font-weight: normal;
		}
	}
	.card-body {
		padding: 5px;
		.card-label {
			color: #999;
		}
		.card-value {
			font-size: 22px;
		}
		.card-icon {
			position: absolute;
			top: 15px;
			right: 15px;
			.fa {
				font-size: 48px;
				color: #ddd;
			}
		}
		.card-desc {
			display: block;
		}
		.table {
			tr>td, tr>th {
				padding: 4px 0;
				border-top: dotted 1px #ddd;
			}
		}
	}
	
	&.sc-col1 {
		border-left: solid 6px #4fa9f9;
		.card-icon {
			color: lighten(#4fa9f9, 10%);
		}
	}
	&.sc-col2 {
		border-left: solid 6px #6ec71f;
		.card-icon {
			color: lighten(#6ec71f, 10%);
		}
	}
	&.sc-col3 {
		border-left: solid 6px #f59446;
		.card-icon {
			color: lighten(#f59446, 10%);
		}
	}
	&.sc-col4 {
		border-left: solid 6px #f44236;
		.card-icon {
			color: lighten(#f44236, 10%);
		}
	}
}

.sui-copyright {
	padding: 10px 5px;
	text-align: right;
	color: #999;
}