/* 基础样式改进 */
atable { font-size: 12px; }

/* Appkiz主框架样式重写 */
#appkiz-frame-right-panel { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; }

/* 框架导航 */
#appkiz-sp-left { padding: 0; border: 1px solid #f0f0f0; background-color: #fff; position: absolute; top: 44px; left: 0; width: 180px; bottom: 0; overflow: auto; box-shadow: 2px 0 20px 10px rgb(0 0 0 / 4%); z-index: 1; }
#appkiz-sp-right { padding: 10px; position: absolute; top: 44px; left: 180px; right: 0; bottom: 0; background: #f5f6fe; overflow: auto; }
	#appkiz-sp-right.noleft { left: 0; }

.appkiz-sp-nav ul { margin: 0 0 0 0px; padding: 0 0 0 10px; list-style: none; }
	.appkiz-sp-nav ul li { padding: 2px 0; }
		.appkiz-sp-nav ul li h3 { margin-left: 5px; }
.appkiz-sp-nav a { display: block; padding: 10px; font-size: 13px; line-height: 150%; color: #666; text-decoration: none; }
	.appkiz-sp-nav a:hover { }
	.appkiz-sp-nav a.appkiz-sp-selected { background-color: #eee; color: #000; border-right: 2px solid #3babf9; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

/* 右侧顶部栏 */
.appkiz-sp-topbar { position: relative; margin: 0 5px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
	.appkiz-sp-topbar h1 { padding: 4px; margin: 0; font-weight: normal; font-size: 20px; color: #555; text-decoration: none; }

/* 工具栏 */
.appkiz-sp-toolbar { padding: 10px; min-height: 50px; }
	.appkiz-sp-toolbar button { padding: 6px 16px; font-size: 13px; background-color: #fff; cursor: pointer; border: 1px solid #ccc; border-radius: 5px; }
		.appkiz-sp-toolbar button:active { background-color: #f5f6fe; }
		.appkiz-sp-toolbar button.main { font-weight: 600; }
		.appkiz-sp-toolbar button.disabled { background-color: #ddd; color: #aaa; border: 1px solid #ccc; }
		.appkiz-sp-toolbar button:hover { box-shadow: 0 0 10px rgb(0 149 255 / 20%); transition: all .2s; }

/* HTTP请求时的加载提示（页面顶部横向线条，加载过程动态变化） */
.appkiz-sp-http-loader { display: none; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #14ccde; animation: sp-loader infinite 2s linear; }
	.appkiz-sp-http-loader.loading { display: block; }

@keyframes sp-loader {
	0% { transform: scaleX(100%) translateX(-120%) }
	50% { transform: scaleX(50%) translateX(0) }
	100% { transform: scaleX(100%) translateX(120%) }
}

/* 表格 */
.appkiz-sp-table { margin: 10px; padding: 10px 0; background-color: #fff; }
.appkiz-sp-table-compact { margin: 0; }

/* 查询条件区域 */
@keyframes chg_input_width { 0% { width: 80px; } 100% { width: 160px; } }
.appkiz-sp-query-area { display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px 20px; }
	.appkiz-sp-query-area button { border: 1px solid #ccc; border-radius: 5px; background-color: #fff; color: #000; margin: 5px 0px 5px 5px; padding: 4px 12px; font-size: 14px; }
		.appkiz-sp-query-area button:hover { background-color: #f0f0f0; }
	.appkiz-sp-query-area button.search { border: 0px solid #ccc; border-radius: 5px; background-color: #ffaa00; color: #fff; margin: 5px 0px 5px 5px; padding: 4px 12px; font-size: 14px; }
		.appkiz-sp-query-area button.search:hover { background-color: #ff8000; }
	.appkiz-sp-query-area button.reset { border: 1px solid #ccc; border-radius: 5px; background-color: #fff; color: #000; margin: 5px 0px 5px 5px; padding: 4px 12px; font-size: 14px; }
		.appkiz-sp-query-area button.reset:hover { background-color: #f0f0f0; }
.appkiz-sp-query-field { margin: 0; padding: 2px 4px 2px 0; }
	.appkiz-sp-query-field > label { display: none; padding: 2px 4px 2px 4px; margin: 2px 0 2px 0; font-size: 12px; color: #444; }
.appkiz-sp-query-field-input { display: flex; flex-direction: row; align-items: center; border: 1px solid #ced4da; border-radius: 4px; margin: 2px; background-color: #fff; overflow: hidden; }
	.appkiz-sp-query-field-input > input { border: none; padding: 8px; background-color: #fff; font-size: 13px; margin: 2px; height: 32px; }
	.appkiz-sp-query-field-input > div.checkbox { display: flex; padding: 8px; margin: 2px; height: 32px; }
	.appkiz-sp-query-field-input > div.checkbox > input { margin-left: 20px; }
	.appkiz-sp-query-field-input > input.size-auto { width: 80px; }
	.appkiz-sp-query-field-input > input:not(:placeholder-shown).size-auto { animation: chg_input_width 0.3s; width: 160px; }
	.appkiz-sp-query-field-input > input.datetime:not(:placeholder-shown).size-auto { animation: chg_input_width 0.3s; width: 280px; }
	.appkiz-sp-query-field-input > input.size-half { width: 80px; }
	.appkiz-sp-query-field-input > input.size-1x { width: 160px; }
	.appkiz-sp-query-field-input > input.size-2x { width: 320px; }
.appkiz-sp-query-drop { position: absolute; display: flex; flex-direction: column; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 5px 5px 20px rgba(166,166,166,0.3); margin: 0 0 0 2px; z-index: 9999; max-height: 500px; overflow-y: auto;}
	.appkiz-sp-query-drop > a { display: block; padding: 8px 12px; border-bottom: 1px solid #e8e8e8; cursor: default; }
		.appkiz-sp-query-drop > a:hover { background-color: rgba(230, 247, 255, 1); }
.appkiz-sp-query-drop-clean { width: 12px; cursor: pointer; color: #ccc; display: none; }
.appkiz-sp-query-drop-arrow { width: 12px; }
.appkiz-sp-table button.search i.fa-spinner { display: none; margin-left: 5px; }
.appkiz-sp-table.sp-searching button.search i.fa-spinner { display: inline-block; }

/* 表格 */
.appkiz-sp-table-container { padding: 10px 20px; }
	.appkiz-sp-table-container table { width: 100%; /*table-layout: fixed;*/ border-collapse: collapse; font-size: 13px; border: 1px solid rgb(232, 232, 232); }
		.appkiz-sp-table-container table thead td { background: rgb(246, 246, 246); color: #333; border-bottom: 1px solid rgb(232, 232, 232); white-space: nowrap; padding: 6px; font-weight: 600; cursor: default; }
			.appkiz-sp-table-container table thead td > div { display: flex; flex-direction: row; justify-content: start; align-items: center; }
				.appkiz-sp-table-container table thead td > div > span { display: block; }
					.appkiz-sp-table-container table thead td > div > span.sort { display: flex; margin-left: 5px; flex-direction: column; font-size: 12px; color: #1a81ac; }
						.appkiz-sp-table-container table thead td > div > span.sort > i { display: none; }
			.appkiz-sp-table-container table thead td.sort-up > div > span.sort > i.fa-angle-up { display: block; }
			.appkiz-sp-table-container table thead td.sort-down > div > span.sort > i.fa-angle-down { display: block; }
			.appkiz-sp-table-container table thead td.sortable:hover { background-color: #fff; border-bottom: 2px solid #3babf9; cursor: pointer; }
		.appkiz-sp-table-container table tbody tr:hover { background-color: rgba(230, 247, 255, 0.5); transition: all 0.1s ease-in-out; }
			.appkiz-sp-table-container table tbody tr:hover td {}
	.appkiz-sp-table-container td { padding: 8px 6px; border-bottom: 1px solid rgb(232, 232, 232); overflow: hidden; }
	.appkiz-sp-table-container table tbody tr:nth-child(2n) td { }
	.appkiz-sp-table-container td a:hover { color: #000; }

/* 提示信息 */
.appkiz-sp-table .appkiz-sp-query-prompt { text-align: center; padding: 20px; color: #aaa; }

/* 分页 */
div.appkiz-sp-query-pager { padding: 5px 0; white-space: nowrap; }
	div.appkiz-sp-query-pager ul { list-style: none; display: flex; flex-direction: row; margin: 0; padding: 0; align-items: center; justify-content: center; }
		div.appkiz-sp-query-pager ul li { display: flex; align-items: center; padding: 0; margin: 0; }
			div.appkiz-sp-query-pager ul li a { padding: 4px 8px; margin: 2px; border: 1px solid #ccc; text-decoration: none; color: #888; cursor: pointer; border-radius: 2px; transition: all .3s; }
				div.appkiz-sp-query-pager ul li a.appkiz-sp-query-pager-current { background-color: #3babf9; color: #fff; border: 1px solid #3babf9; }
				div.appkiz-sp-query-pager ul li a.disabled { color: #ccc; }
					div.appkiz-sp-query-pager ul li a.disabled:hover { background: none; }
			div.appkiz-sp-query-pager ul li input { width: 15px; border: 1px solid #888; text-align: center; padding: 2px 8px; margin: 2px; }

/* 卡片式字段列表 */
.appkiz-sp-field-list { margin: 5px; padding: 5px; display: flex; flex-direction: row; flex-wrap: wrap; }
.appkiz-sp-field-list > div { width: 200px; display: flex; flex-direction: column; margin: 10px 5px; }
	.appkiz-sp-field-list > div label { margin: 0 0 5px 0; }
	.appkiz-sp-field-list > div input { padding: 2px 4px; }

/* 表单 */
.appkiz-sp-form { }
	.appkiz-sp-form .frameset { background-color: #fff; border: 1px solid #eee; padding: 10px; margin-top: 15px; margin-bottom: 25px; border-radius: 10px; position: relative; }
		.appkiz-sp-form .frameset > label { color: #888; padding: 3px 6px; border: 1px solid #fff; border-radius: 10px; background-color: #fff; position: absolute; top: -15px; left: 15px; }
	.appkiz-sp-form ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; }
		.appkiz-sp-form ul li { display: block; margin: 4px; padding: 4px; }
			.appkiz-sp-form ul li label { margin: 2px; color: rgb(0 0 0 / 0.5); font-size: 12px; font-weight: normal; }		

/* 支持多种类型的输入框 <sp-input> */
div.appkiz-sp-form-input { display: flex; flex-direction: row; align-items: center; border: 1px solid #ccc; border-radius: 3px; padding: 4px 2px; margin: 2px; background-color: #fff; justify-content: space-between; }
	div.appkiz-sp-form-input > input { border: none; padding: 0; background-color: #fff; font-size: 14px; }
		div.appkiz-sp-form-input > input.readonly { color: #888; }
	div.appkiz-sp-form-input > textarea { border: none; padding: 0; background-color: #fff; font-size: 14px; outline: none; }
		div.appkiz-sp-form-input > textarea.readonly { color: #888; }
	div.appkiz-sp-form-input.error-prompt { border-color: #f00; }
.appkiz-sp-form-input-half { width: 65px; }
.appkiz-sp-form-input-1x { width: 160px; }
.appkiz-sp-form-input-2x { width: 350px; }
.appkiz-sp-form-input-3x { width: 540px; }
.appkiz-sp-form-input-4x { width: 730px; }
.appkiz-sp-form-input-drop { position: absolute; display: flex; flex-direction: column; background-color: #fff; border: 1px solid #ddd; border-radius: 5px; margin: -2px 0 0 2px; z-index: 9999; box-shadow: 5px 5px 20px rgba(166,166,166,0.3); }
	.appkiz-sp-form-input-drop > a { display: block; min-width: 50px; padding: 4px 8px; border-bottom: 1px solid #ddd; cursor: pointer; }
		.appkiz-sp-form-input-drop > a:hover { background-color: rgba(230, 247, 255, 1); }
a.appkiz-sp-form-input-drop-clean { width: 12px; cursor: pointer; color: #ccc; margin-left: -12px; }
i.appkiz-sp-form-input-drop-arrow { width: 12px; margin-left: -12px; }
.appkiz-sp-form-input-not-empty-dot { color: #f00; position: absolute; align-self: start; margin-left: -3px; margin-top: -9px; transform: rotate(45deg); }

/* 多选下拉列表 */
ul.appkiz-sp-form-multi-select { list-style: none; padding: 0; margin: 0; }
	ul.appkiz-sp-form-multi-select li { position: relative; padding: 3px 8px 3px 3px; margin: 3px; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 5px; }
.appkiz-sp-form-multi-select-drop-clean { position: absolute; right: 0; }
.appkiz-sp-form-multi-select-drop-arrow { align-self: end; }

/* 只读字段 <sp-value> */
.appkiz-sp-value-text { }

/* 通用树 */
.appkiz-sp-tree { font-size: 12px; }
	.appkiz-sp-tree ul { list-style: none; padding-left: 15px; }
		.appkiz-sp-tree ul li { padding: 0 4px; margin: 0 4px; white-space: nowrap; }
			.appkiz-sp-tree ul li a { display: inline-block; text-decoration: none; color: #000; padding: 4px; margin: 2px 10px 2px 2px; border: 1px solid rgba(255,255,255,0); }
				.appkiz-sp-tree ul li a.selected { background-color: #fff; border-radius: 5px; color: rgb(54, 54, 54); font-weight: 600; }
			.appkiz-sp-tree ul li i.fa { margin-right: 4px; color: #333; }
			.appkiz-sp-tree ul li i.fa-ellipsis-h { color: transparent; }
			.appkiz-sp-tree ul li i.fa-plus-square-o { display: none; }
			.appkiz-sp-tree ul li i.fa-minus-square-o { display: none; }
			.appkiz-sp-tree ul li a.selected i.fa { color: rgb(54, 54, 54); }
			.appkiz-sp-tree ul li a.selected i.fa-ellipsis-h { color: transparent; }
			.appkiz-sp-tree ul li.haschild { }
				.appkiz-sp-tree ul li.haschild > a > i.fa-ellipsis-h { display: none; }
				.appkiz-sp-tree ul li.haschild.expand { }
					.appkiz-sp-tree ul li.haschild.expand > ul { display: block; }
					.appkiz-sp-tree ul li.haschild.expand > a > i.fa-plus-square-o { display: none; }
					.appkiz-sp-tree ul li.haschild.expand > a > i.fa-minus-square-o { display: inline-block; }
				.appkiz-sp-tree ul li.haschild.collapse { display: block; }
					.appkiz-sp-tree ul li.haschild.collapse > ul { display: none; }
					.appkiz-sp-tree ul li.haschild.collapse > a > i.fa-plus-square-o { display: inline-block; }
					.appkiz-sp-tree ul li.haschild.collapse > a > i.fa-minus-square-o { display: none }
	.appkiz-sp-tree > ul { padding: 0; }
	.appkiz-sp-tree ul li.hidden ul { display: none; }

/* 左右分栏 */
.appkiz-sp-splitter { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: row; }
.appkiz-sp-splitter-left { position: relative; width: 210px; min-width: 210px; background-color: #fdfdfd; display: flex; flex-direction: column; overflow: auto; }
.appkiz-sp-splitter-right { position: relative; width: 100%; overflow: auto; margin-left: 5px; }
.appkiz-sp-splitter-dragger { width: 3px; cursor: col-resize; border-left: 2px solid #ddd; }
	.appkiz-sp-splitter-dragger.mousedown { border-left: 2px solid #bbb; }

/* TAB页 */
.appkiz-sp-tabs-nav { }
	.appkiz-sp-tabs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; }
		.appkiz-sp-tabs-nav ul li { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #ddd; }
			.appkiz-sp-tabs-nav ul li.left-side { width: 20px; }
			.appkiz-sp-tabs-nav ul li.right-side { flex: 1; }
			.appkiz-sp-tabs-nav ul li.tab { }
				.appkiz-sp-tabs-nav ul li.tab:hover { background-color: #f8f8f8; }
				.appkiz-sp-tabs-nav ul li.tab.selected { border-bottom: 2px solid #000; }
				.appkiz-sp-tabs-nav ul li.tab a { padding: 6px 20px; display: inline-block; color: #666; cursor: pointer; text-decoration: none; }
				.appkiz-sp-tabs-nav ul li.tab.selected a { color: #333; cursor: default; }
.appkiz-sp-tabs-panel { padding: 10px; }