html,body { width: 100%; height: 100%; overflow: hidden; font-size: var(--c-font-size); margin: 0; padding: 0; color: var(--c-font); box-sizing: border-box;}

input,textarea,select { outline: none;}

a:link { -webkit-tap-highlight-color: #fcd700;}
a:hover { color: var(--c-norm-hover);}

.button a { font-size: var(--c-font-size); padding: 5px 20px; margin:0px 10px; margin-left: 0px; border-radius: 3px; display: inline; cursor: pointer; white-space: nowrap;}
.button a:last-child { margin-right: 0px;}
.button a { background: var(--c-norm); color: var(--c-btns); border-radius: 3px;}
.button a:hover { background:var(--c-norm-hover);}
.button a.red { background: var(--c-danger);}
.button a.red:hover { background:var(--c-danger-hover);}

/* ===================================== ifram ===================================== */

body {display: flex; flex-direction: column;}
#head { height: 55px; z-index: 1000;}
#body { flex: 1; position: relative;}
#menu { width: 220px; overflow-y:auto; height: 100%; position: absolute; left: 0; top: 0;
	&::-webkit-scrollbar {width: 5px; height: 5px;}
	&::-webkit-scrollbar-thumb { background:rgba(255, 255, 255, .8); border-radius: 5px;}
	&::-webkit-scrollbar-track { background:rgba(0, 0, 0, .2); border-radius: 5px;}
}

#main { overflow-y: auto; height: 100%; position: absolute; left: 220px; top: 0; right: 0; padding: 20px;
	&::-webkit-scrollbar {width: 5px; height: 5px;}
	&::-webkit-scrollbar-thumb { background:rgba(0, 0, 0, .2); border-radius: 5px;}
	&::-webkit-scrollbar-track { background:rgba(0, 0, 0, 0); border-radius: 5px;}
}

#tool { width: 300px; position: relative;}

/* ===================================== login ===================================== */

#login { width: 100vw; height: 100vh; position: fixed; background: url(skin/main-bg.jpg); background-size: cover; display: flex; align-items: center; justify-content: center;
	#form { width: 356px; height: 260px; margin-top: -100px;
		.logo { font-size: 22px; font-weight: 100; color: var(--c-btns);
			sup { font-size: 10px; vertical-align: 10px; padding: 0px 5px; margin-left: 10px; background: var(--c-btns); color: #333; border-radius: 3px;}
		}
		input { width: 100%; font-size: 14px; line-height: 45px; margin-top: 10px; display: block; outline: none; border-radius: 5px;
			&.textbox { text-indent: 10px; background:none; color: var(--c-btns); border:rgba(255,255,255, .5) solid 1px;
				&::placeholder { color: var(--c-btns);}
			}
			&.submit { text-align: center; background:rgba(255,255,255, .1); color: var(--c-btns); border:rgba(255,255,255, .5) solid 1px;
				&:hover { background:var(--c-norm-hover); border:rgba(255,255,255, .5) solid 1px;}
			}
		}
	}
}

/* ===================================== head ===================================== */

#head { background:var(--head-bg); color: var(--head-font); box-shadow: rgba(0, 0, 0, .5) 0 0 5px;
	a { color: var(--head-font);}

	.logo { font-size: 22px; font-weight: 100; padding: 0px 0px 0px 20px; float: left;
		sup { font-size: 10px; vertical-align: 10px; padding: 0px 5px; margin-left: 10px;}
	}
	.account { float: right;
		.image { width: 45px; padding-top: 10px; padding-right: 10px; float: left; display: none; }
		.info { padding-top: 8px; padding-right: 10px; float: left; display: none;
			.type { font-size: 12px; padding: 0px 3px; display: inline-block;}
		}
		.tool { padding-top: 26px; float: left;
			a { padding: 0px 30px; display: inline-block; position: relative;
				&::after { content: ''; width: 1px; height: 12px; top: 50%; right: 0; background: var(--c-border); position: absolute; margin-top: -6px;}
				&:last-child::after { display: none;}
			}
			
		}
	}
}

/* ===================================== body ===================================== */

#menu { background:var(--menu-bg); color: var(--menu-font);
	.name { line-height: 50px; padding-left: 20px; cursor: pointer;
		&::after {content: ' '; width: 45px; height: 45px; display:block; float: right;}
		i { font-size: 16px; vertical-align: middle; padding-right: 10px;}
	}
	.next { max-height: 0px; overflow: hidden;
		a { color: var(--menu-font); line-height: 50px; padding-left: 43px; display: block;}
		a:hover { background: var(--menu-hover);}
		.on a { background-color: var(--menu-hover);}
	}
	.item.on .next { max-height:1000px;}
}

#main { background: var(--c-bg);
	.nav { height: 50px; font-size: 0px; line-height: 48px; margin-bottom: 16px; background: var(--c-main); border: var(--c-border) solid 1px; border-radius: 5px;
		li { font-size: var(--c-font-size); display: inline-block;
			a { color: var(--c-font); line-height: 48px; margin: 0px 30px 0px 10px; display: inline-block; position: relative;}
			&::first-child a { margin-left: 20px;}
			a::before, a::after { width: 0px; height: 0px; content: ""; border-style: solid; border-width: 25px 10px; position: absolute; top: -1px;}
			a::before { border-color: transparent transparent transparent var(--c-border); right: -30px;}
			a::after { border-color: transparent transparent transparent var(--c-main); right: -29px;}
		}
	}

	.info { line-height: 30px; padding:10px; margin-bottom: 16px; background: var(--c-main); border: var(--c-border) solid 1px;
		.button { font-size: 0px; float: right;
			li { display: inline;}
			a { vertical-align: middle; padding: 5px 20px; margin-left: 10px;}
		}
	}

	/* 统计块状结构 */
	.block { font-size: 0px; text-align: justify; padding-bottom: 16px; overflow: hidden;
		&:after { width: 100%; font-size: 0px; display: inline-block; overflow: hidden; content: ".";}
		.group { width: 66%; display: inline-block;
			&:hover span { border-left-color: transparent;}
			li { width: 50%; float: left;}
			a { text-align: center; padding: 26px 0px; display: block; background: #7CBAE5; color: #FFF;
				span { display: block; border-left: #6FA7CE solid 1px;}
				i { font-size: 40px;}
				em { font-size: 35px; font-style: normal;}
				strong { font-size: 16px; text-align: center; font-weight: normal; display: block;}
				&:hover { background: #6FA7CE;}
			}
			&:first-child a span { border-left: 0px;}
		}
		.item { width: 32.2%; vertical-align: top; display: inline-block;
			a { text-align: center; padding: 26px 0px; display: block; background: #60D295; color: #FFF; border: 1px solid #57C78B;
				i { font-size: 40px;}
				em { font-size: 35px; font-style: normal;}
				strong { font-size: 16px; text-align: center; font-weight: normal; display: block;}
				&:hover { background: #57C78B;}
			}
		}
	}

	.block-icon { font-size: 0px; text-align: justify; overflow: hidden;
		&:after { width: 100%; font-size: 0px; display: inline-block; overflow: hidden; content: ".";}
		.item { width: 32.2%; vertical-align: top; padding-bottom: 16px; display: inline-block;
			a { height: 94px; font-size: 12px; padding-left: 94px; display: block; position: relative; color: #333; border: 1px solid #E7E7EB;
				&:hover { background: #f4f5f9;}
			}
			i { width: 94px; height: 94px; font-size: 50px; text-align: center; line-height: 94px; position: absolute; left: -1px; top: -1px; background: #7CBAE5; color: #FFF;}
			strong { padding: 10px; padding-bottom: 5px; display: block;}
			span { padding: 10px; padding-top: 0px; display: block; color: #8D8D8D;}
		}
	}

	.plan { background: var(--c-main); border: 1px solid var(--c-border); border-radius: 5px; overflow: hidden; margin-bottom: 16px;
		.title { background: var(--c-main); border-bottom: 1px solid var(--c-main);}

		.info { margin-bottom: 0px; border: 0px; border-bottom: var(--c-border) solid 1px;
			.button.button-input a { border-radius: 0px 3px 3px 0px;}
			.button.button-input input { border-radius: 3px 0px 0px 3px; border: #44b549 solid 1px; height: 24px; border-right: 0px; width: 100px; padding:1px 10px;}
		}

		.list-data { width: 100%;
			tr { border-bottom: var(--c-border) solid 1px;
				&.head { background: var(--c-fous);}
				&:last-child { border-bottom-color: rgba(0, 0, 0, 0);}
				&:hover { background:var(--c-fous);}
			}
			td { height: 50px; line-height: normal; vertical-align: middle; padding: 10px;
				.text-overflow { width: 300px; text-overflow: ellipsis; white-space: nowrap; display: block; overflow: hidden;}
				label { margin-right: 10px; padding-left: 5px; line-height: 30px;}
				input[type="checkbox"] { width: 18px; height: 18px;}
				input[type="text"],input[type="password"],select { width: 100%; height: 40px; text-indent: 10px;}
				select { text-indent: 6px;}
				textarea { width: 100%; box-sizing: border-box; resize: none; height: 700px;
					&.area { width: 100%; height: 200px; min-height: auto; padding: 10px; display: block;}
				}
				textarea[class="html"] { display: none;}
				.editor { height: 700px;}
				input[type="text"],input[type="password"],select,textarea, textarea.area { background: var(--c-bg); border: var(--c-border) solid 1px; border-radius: 5px;}

				.upload { width: 100%; display: block; position: relative;
					.list { height: 40px; line-height: 40px; text-indent: 10px; display: block; background: var(--c-bg); border: var(--c-border) solid 1px; border-radius: 5px;}
					.browse { width: 100px; height: 38px;  text-align: center;line-height: 38px; position: absolute; right: 1px; top: 1px; background: var(--c-border); border-left: var(--c-border) solid 1px;}
				}

				.item { padding: 2px 12px; margin-right: 5px;}
				&.button { width: 100px; text-align: center; font-size: 0px; white-space: nowrap;
					&.right { text-align: right;}
				}
			}
		}

		&:last-child { margin-bottom: 0;}

	}

	.pagination { font-size: 0; text-align: right; padding-bottom: 16px;
		li { display: inline-block;  background: var(--c-main); border: var(--c-border) solid 1px; border-right: 0;
			&:first-child { border-radius: 5px 0 0 5px;}
			&:last-child { border-right: var(--c-border) solid 1px; border-radius: 0 5px 5px 0;}
			a,span { color: var(--c-font); display: block; text-align: center; width: 40px; height: 40px; line-height: 40px; font-size: 14px;}
			a:hover { background: var(--c-fous);}
			&.active { background: var(--c-fous);}
		}
	}

}

.webuploader-pick { background:none; color: #333; height: 100%; display: block; padding: 0px;}

/* 工具部分 */
#tool .switch { padding: 11px; box-shadow: rgba(0,0,0,.1) -4px 0px 3px; border-radius: 3px 0px 0px 3px; display: none; position:absolute; left: -46px; bottom: 30px; cursor: pointer;}

.laydate_box { box-sizing: content-box;}
.laydate_body .laydate_bottom { display: none;}
.laydate_table { margin: 5px!important;}

@media screen and (max-width: 1366px) {
	#main { margin: 0px;}
	#tool { position: absolute; top: 55px; bottom: 0px; right: -300px; z-index: 1000;}
	#tool .switch { display: block;}
	#tool.show { right: 0px;}
}

@media screen and (max-width: 800px){
	#menu { left: -200px;}
	#main { left: 0;}
}

/* 百度地图 */
#map { height: 300px;}
#map img { max-width: none;}

.selectivity-error { display: none !important;}


/* 多列列表 */			
.webuploader-pick { background:none; color: var(--c-font);}