* { box-sizing:border-box; }
html { margin:0; padding:0; font-size:12px; }
body { width:100%; height:100%; margin:0; padding:0; }

textarea { resize:none;font-family:inherit; }
button:disabled { color:#b0b0b0; }
input, select, textarea { color:#000000; z-index:3; }
img, input, select, textarea, button { outline:none; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.hidden { display:none; }
.middle { vertical-align:middle; }
.choice { background-color:#c0f8e0; }

.mainFrame { overflow:auto; }
.formOther { border:none; width:100%; height:100%; }
.formCenter { left:50%; transform:translateX(-50%); }

.flowLayout { display:block; }
.freeLayout { display:block; position:relative; }
.flexLayout { display:flex; flex-wrap:wrap; }
.freeLayout>* { position:absolute; }

.topBar, .leftBar, .rightBar, .bottomBar, .floatBar, .mainFrame, .formFrame { position:absolute; }

.photo { display:inline-block; position:relative; border:1px solid #b0b0b0; background-color:white; }
.photoBox { position:absolute; max-width:100%; max-height:100%; top:50%; left:50%; transform:translate(-50%,-50%); }

.annex { display:inline-block; }
.annex input { width:calc(100% - 52px); height:100%; text-decoration:underline; cursor:pointer; }
.annex button { width:48px; padding:0px; height:100%; }

.steper{ display:inline-block; }
.steperLine { position:relative; height:100%; border:1px solid #c0c0c0; background-color:#ffffff; }
.steperLeft { height:100%; background-color:#00ff00; line-height:16px; text-align:right; }
.steperText { position:absolute; font-size:12px; color:#000000; top:50%; left:50%; transform:translate(-50%,-50%); }

.slider { display:inline-block; position:relative; }
.sliderLine { position:relative; height:8px; width:calc(100% - 18px); top:calc(50% - 4px); left:9px; border-radius:4px;  background-color: #ffffff; border:1px solid #c0c0c0; }
.sliderLeft { height:100%; border-radius:4px 0 0 4px; background-color:#009688; }
.sliderMove { position:absolute; height:14px; width:14px; top:calc(50% - 7px); transform:translateX(-50%); border-radius:50%; border:2px solid #009688;  background-color:#ffffff; cursor:pointer; }
.sliderText { position:absolute; height:18px; right:0; top:calc(50% - 10px); border:1px solid #eeeeee; border-radius:3px; font-size:12px; background-color:#ffffff; text-align:center; }

.downIcon { background-repeat:no-repeat; display:block; margin:auto;background-size:cover; }
.leftIcon { background-repeat:no-repeat; display:inline-block; vertical-align:middle;background-size:cover; }

.radio, .check { display:inline-flex; flex-wrap:wrap; align-content:stretch; }
.checkItem, .radioItem { display:inline-block; align-self:center; cursor:default; }
.uncheckIcon { width:16px; height:16px; margin-right:2px; display:inline-block; vertical-align:middle; background:url("Widget/RadioBox.png") no-repeat 0px; }
.docheckIcon { width:16px; height:16px; margin-right:2px; display:inline-block; vertical-align:middle; background:url("Widget/RadioBox.png") no-repeat -16px; }
.unradioIcon { width:16px; height:16px; margin-right:2px; display:inline-block; vertical-align:middle; background:url("Widget/RadioBox.png") no-repeat -32px; }
.doradioIcon { width:16px; height:16px; margin-right:2px; display:inline-block; vertical-align:middle; background:url("Widget/RadioBox.png") no-repeat -48px; }

.dlgCover { position:absolute; left:0; top:0; width:100%; height:100%; background:transparent; overflow:hidden; z-index:1000; }
.dlgLayer { position:absolute; border:solid 1px #0080c0; background-color:#ffffff; z-index:1000; }
.dlgFrame { border:none; width:100%; }
.dlgOwner { position:relative; border:none; width:100%; }
.dlgTitle { width:100%; height:22px; background-image:url("Widget/dlgTitle.png"); user-select:none; }
.dlgTheme { float:left; height:18px; width:calc(100% - 42px); margin-top:2px; margin-left:6px; vertical-align:middle; font:bold 14px/18px; color:#ffffff; }
.dlgClose { float:right; width:26px; height:17px; margin-top:2px; margin-right:5px; line-height:18px; vertical-align:middle; background-image:url("Widget/dlgClose.png"); cursor:pointer; }
.dlgClose:hover { background-image:url("Widget/dlgHover.png") }

.tainer { display:flex; flex-direction:column; }
.folder { display:flex; flex-direction:column; background-color:#ffffff; border:1px solid #808080; }
.grider { display:flex; flex-direction:column; z-index:0; }
.grader { display:flex; flex-direction:column; border:1px solid #0080c0; }
.layout { border-collapse:collapse; border:none; table-layout:fixed; z-index:0; }

.template { display:none; }
.tainerBox { display:flex; flex-wrap:wrap; align-content:flex-start; overflow:auto; height:10px; flex-grow:1; }
.tainerItem { display:inline-block; }

.tainerItem .grider .griderMatter { overflow:hidden; height:auto; border:none;border-top:1px solid #c0c0c0;border-bottom:1px solid #c0c0c0; }
.tainerItem .grider .griderMatter tbody>tr>td { border:none; }

.toolDocker { height:29px; width:100%; padding-top:3px; padding-left:4px; background-color:#e8f0ff; }
.toolDocker button { height:24px; width:30px; vertical-align:middle; border:1px solid #a0a0a0; }
.toolDocker div { height:16px; width:16px; vertical-align:middle; background:url("Widget/Editbar.png") no-repeat; }
.toolAppend>div { background-position:0px; }
.toolInsert>div { background-position:-16px; }
.toolCreate>div { background-position:-32px; }
.toolModify>div { background-position:-48px; }
.toolDelete>div { background-position:-64px; }
.toolRemove>div { background-position:-80px; }
.toolResume>div { background-position:-96px; }

.layout>tbody>tr>td { border:none; z-index:1; }

.grider table { border-collapse:collapse; background-color:#ffffff; z-index:1; }
.grider tbody>tr>td { border:1px solid #c8c8c8; z-index:2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.grider thead>tr>td { border:1px solid #c8c8c8; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-weight:bold; color:black !important; background-color:#e8e8e8 !important; z-index:2; }

.grider tbody>tr:nth-child(even) { background-color:#fafafa; }
.grider tbody>tr.choice { background-color:#c0f8e0; }
.grider tbody>tr.summer { background-color:#e8ffe8; }
.grider tbody>tr.amount { background-color:#fff0f0; }

.griderHeader .region { text-align:center; }

.griderHeader { width:100%; overflow:hidden; border:1px solid #c8c8c8; background-color:#e8e8e8; position:relative; }
.griderFooter { width:100%; overflow:hidden; border:1px solid #c8c8c8; margin-top:-1px; background-color:#e8e8e8; position:relative; }
.griderMatter { width:100%; overflow:auto; height:10px; border:1px solid #c8c8c8; margin-top:-1px; flex-grow:1; }

.griderHeader table { margin-top:-1px; margin-left:-1px; margin-bottom:-1px; table-layout:fixed; position:relative; user-select:none; }
.griderFooter table { margin-top:-1px; margin-left:-1px; margin-bottom:-1px; table-layout:fixed; position:relative; }
.griderMatter table { margin-top:-1px; margin-left:-1px; margin-bottom:-1px; table-layout:fixed; }

.headerOrder0 { width:13px; height:13px; margin-left:3px; margin-right:3px; display:inline-block; vertical-align:middle; background:url("Widget/OrderBox.png") no-repeat 0px; }
.headerOrder1 { width:13px; height:13px; margin-left:3px; margin-right:3px; display:inline-block; vertical-align:middle; background:url("Widget/OrderBox.png") no-repeat -13px; }
.headerOrder2 { width:13px; height:13px; margin-left:3px; margin-right:3px; display:inline-block; vertical-align:middle; background:url("Widget/OrderBox.png") no-repeat -26px; }

.Stepbar { position:relative; background-color:#00ff00; height:13px; border:1px solid #505050; }

.Ratebar { position:relative; border:1px solid #505050; }
.Ratebar div { background-color:#00ff00; min-height:16px; }
.Ratebar span { position:absolute; color:#000000; top:50%; left:50%; transform:translate(-50%,-50%); }

.griderEditor { width:100%; }

.fileFolder { overflow:auto; height:10px; flex-grow:1; }
.iconFolder { display:flex; flex-wrap:wrap; align-content:flex-start; overflow:auto; height:10px; flex-grow:1; }
.folderItem { display:inline-block; padding:4px 8px; }
.folderItem .itemIcon { display:block; border:1px solid #f0f0f0; }
.folderItem .itemName { font-size:12px; height:30px; line-height:14px; text-align:center; word-break:break-all; }

.richer { position:relative; }
.richEditor { height:calc(100% - 28px); width:calc(100% - 2px); outline:none; position:absolute; }

.treeBox { overflow:auto; height:10px; flex-grow:1; }
.nodeIcon { display:inline-block; background-repeat:no-repeat; vertical-align:middle; }
.nodeText { font-size:12px; border:none; margin-left:3px; text-decoration:none; cursor:pointer; }
.nodeBase.active { color:#ffffff; background-color:#50b4e6; }
.nodeText.active { border:1px solid #000000; background-color:#50b4e6; color:#ffffff; }
.nodeText:hover { color:#2040ff; text-decoration:underline; }
.nodeText.active:hover { color:#ffffff; background-color:#50b4e6; }
.fileIcon { display:inline-block; width:16px; height:16px; background:url("Widget/FileBox.png") no-repeat 0px; vertical-align:middle; }

.tabPage { display:none; border:none; width:100%; height:calc(100% - 29px); }
.tabMenu { display:block; list-style:none; height:28px; margin:0px; padding:0px 4px; border-bottom:1px solid #0080c0; color:black; overflow:visible; white-space:nowrap; user-select:none;background: #ffffff; }
.tabMenu li { display:inline-block; height:26px; line-height:26px; vertical-align:middle; padding:0 10px; margin:2px 3px 0 0; background-color:#c0e0e0; border:1px solid #0080c0; border-radius:3px 3px 0px 0px; }
.tabMenu li.active { height:27px; margin-top:1px; background-color:#f8f8e0; border-bottom:1px solid #f8f8e0; color:blue; }

.toastBox {
	position:fixed;
	top:50%; left:50%;
	max-width:60%; min-width:150px;
	max-height:80px;
	padding:0 14px;
	line-height:40px;
	text-align:center;
	border-radius:4px;
	transform:translate(-50%,-50%);
	background:rgba(0,0,0,0.7);
	color:rgb(255, 255, 255);
	font-size:16px;
	z-index:9999;
}

.alertBox {
	position:fixed;
	display:flex;
	overflow:hidden;
	flex-direction:column;
	top:50%;
	width:320px;
	max-height:90%;
	left:calc(50% - 160px);
	right:calc(50% - 160px);
	transform:translateY(-50%);
	background-color:#fff;
	text-align:center;
	border-radius:12px;
	border:1px solid #c0c0c0;
	z-index:5000;
}

.alertBox .header {
	font-weight:700;
	font-size:17px;
	line-height:1.4;
	padding:16px 24px 24px;
}

.alertBox .matter {
	padding:0 24px;
	line-height:1.4;
	overflow-y:auto;
	font-size:14px;
	margin-bottom:32px;
	word-wrap:break-word;
	color:rgba(0,0,0,0.5);
}

.alertBox .footer {
	line-height:56px;
	min-height:56px;
	font-size:17px;
	display:flex;
}

.alertBox button {
	display:block;
	border:none;
	color:#576b95;
	background:transparent;
	font-size:17px;
	font-weight:700;
	flex:1;
}

@font-face {
	font-family: "iconfont";
	src:url('iconfont/iconfont.eot?t=15');
	src:url('iconfont/iconfont.eot?t=15#iefix') format('embedded-opentype'), 
	url('iconfont/iconfont.woff?t=15') format('woff'), 
	url('iconfont/iconfont.ttf?t=15') format('truetype'), 
	url('iconfont/iconfont.svg?t=15#iconfont') format('svg');
}

.iconfont {
	display:block;
	border:none;
	color:#ffffff;
	background-color:transparent;
	font-family:"iconfont" !important;
	font-size:24px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.iconfont-gray {
	display:block;
	border:none;
	color:#0000ff;
	background-color:transparent;
	font-family:"iconfont" !important;
	font-size:24px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}