@import "preset";
@import "AXUtils";


/** .AXGrid **/
.AXGrid{
	.dx-axgrid-preset();

	table{
		thead, tbody, tfoot{
			tr{
				td, th{
					min-width: auto;min-height: auto;
				}
			}
		}
	}

	position:relative;
	.tdRelBlock{
		position:relative;
	}
	.AXgridScrollBody{
		position:relative;
		border:@border;
		overflow:hidden;
		div{
			box-sizing:content-box !important;
		}
		.AXGridColHead{
			position:absolute;left:0px;top:0px;
			width:100%;
			background:url('images/dx-grid-head-bg.png') repeat-x 0px 0px #fff;
			border-bottom:@border;
		}
		.fixedColHead{
			position:absolute;left:0px;top:0px;
			width:auto;
			box-shadow:0px 0px 3px #ccc;
		}
		.AXGridColHead{
			.colHeadTable{
				table-layout:fixed;
				background:url('images/dx-grid-head-bg.png') repeat-x 0px 0px #fff;
				tbody{
					tr{
						td{
							padding:0px;
							background:url('images/dx-grid-head-border.png') repeat-y 100% 0px;
							vertical-align:bottom;
							cursor:pointer;
							.colHeadResizer{
								position:absolute;right:0px;top:0px;
								width:5px;height:20px;
								cursor:w-resize;
							}
							.colHeadResizer:active{
								background:@bgcolor-a;
							}
							.colHeadTool{
								position:absolute;right:1px;top:0px;
								display:block;
								width:20px;height:30px;
								cursor:pointer;
								text-indent:-2000px;overflow:hidden;
							}
							.colHeadTool.readyTool{
								background:url('images/dx-grid-head-tool.png') no-repeat -2px center;
							}
							.colHeadTool.readyTool:hover{
								background:url('images/dx-grid-head-tool-on.png') no-repeat -2px center;
							}
							.colHeadNode{
								position:relative;
								padding:0px;
							}
							.colHeadTdText{
								position:relative;
								line-height:20px;
								padding:5px 8px;
								color:@color;text-shadow:0px 1px 0px #fff;
								.util-text-ellipsis();
							}
							.colHeadTdCheck{
								height:20px;padding:7px 1px 3px 0px;
								color:@color;
							}
							.colHeadTdCheck input{
								vertical-align:middle;
							}
							.colHeadTdHtml{
								height:30px;padding:0px 1px 0px 0px;
								color:@color;
							}
						}
						td.colHeadBottomBorder{
							border-bottom:1px solid #b1b1b1;
						}
						td:hover{
							background-color:@color-a;
						}
						td.sortDesc{
							background-color:@color-a;
							.colHeadNode{
								background:url('images/dx-sort-desc.png') no-repeat center 0px;
							}
						}
						td.sortAsc{
							background-color:#e5e6eb;
							.colHeadNode{
								background:url('images/dx-sort-asc.png') no-repeat center 0px;
							}
						}
					}
				}
			}

		}
		.AXGridBody{
			position:absolute;left:0px;top:0px;
			width:100%;overflow:hidden;
			.gridScrollContent{
				overflow:visible;position:relative;
			}
			.gridFixedScrollContent{
				overflow:visible;position:absolute;left:0px;top:0px;
				box-shadow:0px 0px 3px #ccc;
			}
			.gridScrollTrackXY{
				position:absolute;right:0px;bottom:0px;
				width:9px;height:9px;border:@border-a;
				background:url('images/dx-diagonal-bg.png');
				display:none;
			}
			.gridScrollTrackY{
				position:absolute;right:0px;top:0px;
				width:9px;height:9px;
				display:none;
				.gridScrollHandle{
					position:absolute;left:-1px;top:0px;
					width:9px;height:20px;
					background: #000;
					border:0px none;
					.util-opacity(20);
					.util-border-radius(5px, 5px, 5px, 5px);

					cursor:pointer;
					&:hover, &.hover{
						.util-opacity(50);
					}
				}
				.gridScroll-tip{
					display:none;font-size:10px;
					position:absolute;right:15px;top:0px;
					padding: 5px; border: @border;
					.util-border-radius(5px, 5px, 5px, 5px);
					background: #fff;
				}
			}
			.gridScrollTrackX{
				position:absolute;left:0px;bottom:0px;
				width:9px;height:9px;
				border-top:@border-b;border-bottom:@border-b;
				background:@bgcolor-b;
				display:none;
				.gridScrollHandle{
					position:absolute;left:0px;top:-1px;
					width:20px;height:9px;
					background: #000;
					border:0px none;
					.util-opacity(20);
					.util-border-radius(5px, 5px, 5px, 5px);

					cursor:pointer;
					&:hover, &.hover{
						.util-opacity(50);
					}
				}
			}
			.gridBodyTable{
				width:100%;table-layout:fixed;
				tbody{
					tr{
						td{
							padding:0px;
							background:url('images/dx-grid-body-border.png') repeat-y 100% 0px #FFFFEC;
							vertical-align:bottom;
							border-bottom:@border-d;
							cursor:pointer;
						}
					}
					/* for bigData */
					tr.thpadding td{
						height:0px;
						background:none;
						border-bottom:none;
					}
					tr.tfpadding td{
						height:0px;
						background:none;
						border-bottom:none;
					}
					tr.noListTr td{
						vertical-align:middle;
						height:100px;
						background:@bgcolor-a;
						border-bottom:@border-d;
					}
					tr.line0 td{
						background-color:@bgcolor-a;
					}
					tr.line1 td{
						background-color:@bgcolor-b;
					}
					tr.red td{
						background-color:@bgcolor-g;
					}
					tr.green td{
						background-color:@bgcolor-h;
					}
					tr.blue td{
						background-color:@bgcolor-i;
					}
					tr.yellow td{
						background-color:@bgcolor-j;
					}
					tr.white td{
						background-color:@bgcolor-k;
					}
					tr.gray td{
						background-color:@bgcolor-l;
					}
					tr.hover td{
						background-color:@bgcolor-h;
					}
					tr.selected td{
						background-color:@bgcolor-d;
					}
				}
				thead, tfoot{
					tr td{
						padding:0px;
						background:url('images/dx-grid-body-border.png') repeat-y 100% 0px;
						vertical-align:bottom;
						border-bottom:@border-d;
						background-color:@bgcolor-n;
					}
				}
				thead, tbody, tfoot{
					tr td{
						.bodyBottomBorder{
							border-bottom:@border-d;
						}
						.bodyNullTd{
							background-image:none;
						}
						.bodyNode{
							position:relative;
							padding:0px;
						}
						.bodyTdText{
							position:relative;
							line-height:20px;min-height:20px;
							padding:5px 8px;
							color:@color-b;text-shadow:0px 1px 0px #fff;
							.util-text-ellipsis();
						}
						.bodyTdHtml{
							padding:0px 1px 0px 0px;
						}
						.bodyTdCheckBox{
							line-height:20px;height:20px;
							padding:5px 1px 5px 0px;
							label{
								display:block;
								width:100%;height:100%;
								padding:0px;margin:0px;
							}
						}
					}
				}
			}
			.gridFixedBodyTable{
				table-layout:fixed;
				thead, tfoot{
					tr td{
						padding:0px;
						background:url('images/dx-grid-body-border.png') repeat-y 100% 0px;
						vertical-align:bottom;
						border-bottom:@border-d;
						background-color:@bgcolor-n;
					}
				}
				thead, tbody, tfoot{
					tr{
						td{
							background-color:@bgcolor-r;
							.bodyNode{
								position:relative;
								padding:0px;
							}
							.bodyTdText{
								position:relative;
								line-height:20px;min-height:20px;
								padding:5px 8px;
								color:@color-b;text-shadow:0px 1px 0px #fff;
								.util-text-ellipsis();
							}
							.bodyTdHtml
							{
								padding:0px 1px 0px 0px;
							}
							.bodyTdCheckBox
							{
								line-height:20px;height:20px;
								padding:5px 1px 5px 0px;
							}
						}
						td.bodyBottomBorder{
							border-bottom:@border-e;
						}
						td.bodyNullTd{
							background-image:none;
						}
						td.fixedLine{
							background-image:url('images/dx-grid-fixed-body-border.png');
							background-repeat:repeat-y;
							background-position:100% 0px;
						}
					}
				}
				tbody{
					tr{
						td{
							padding:0px;
							background:url('images/dx-grid-body-border.png') repeat-y 100% 0px @bgcolor-r;
							vertical-align:bottom;
							border-bottom:@border-d;
							cursor:pointer;
						}
					}
					/* for bigData */
					tr.thpadding td{
						height:0px;
						background:none;
						border-bottom:none;
					}
					tr.tfpadding td{
						height:0px;
						background:none;
						border-bottom:none;
					}
					tr.noListTr td{
						vertical-align:middle;
						height:100px;
						background:@bgcolor-a;
						border-bottom:@border-d;
					}
					tr.line0 td{
						background-color:@bgcolor-a;
					}
					tr.line1 td{
						background-color:@bgcolor-b;
					}
					tr.red td{
						background-color:@bgcolor-g;
					}
					tr.green td{
						background-color:@bgcolor-h;
					}
					tr.blue td{
						background-color:@bgcolor-i;
					}
					tr.yellow td{
						background-color:@bgcolor-j;
					}
					tr.white td{
						background-color:@bgcolor-k;
					}
					tr.gray td{
						background-color:@bgcolor-l;
					}
					tr.hover td{
						background-color:@bgcolor-h;
					}
					tr.selected td{
						background-color:@bgcolor-d;
					}
				}
			}
			// -- cell selected 추가 2015-02-03
			tbody tr.selected td.selected{
				background-color: @bgcolor-hh;
			}
		}
		.AXGridFoot{
			left: 0px;
			bottom: 0px;
			position: absolute;
			min-height: 30px;
			display:none;
			//.util-gradient(top, @bgcolor-c, @bgcolor-c);
			background-color: #FFFFEC;
			border-top: @border;
			border-left: 0px none;
			border-right: 0px none;

			.gridFootContent{
				position:relative;left:0px;top:0px;
				width:auto;
			}
			.gridFootfixedContent{
				position:absolute;left:0px;top:0px;
				width:auto;
				background-color: #FFFFEC;
				box-shadow:0px 0px 3px #ccc;
			}
			.gridFootTable{
				table-layout:fixed;

				//background:url('images/dx-grid-head-bg.png') repeat-x 0px 0px #fff;
				//.util-gradient(top, @bgcolor-a, @bgcolor-b);
				tbody{

					tr{
						td{
							padding:0px;
							background:url('images/dx-grid-body-border.png') repeat-y 100% 0px;
							vertical-align:top;
							border-bottom:@border-d;
						}
						td.fixedLine{
							background:url('images/dx-grid-fixed-body-border.png') repeat-y 100% 0px;
						}
						td.selected{
							background-color:#D2D9DF;box-shadow:inset 0px 0px 2px #000;
						}
					}
					tr:last-child td{
						border-bottom: none;
					}
					tr.noListTr td{
						vertical-align:middle;
						height:100px;
						background:@bgcolor-i;
					}
					tr.line0 td{
						background-color:@bgcolor-s;
					}
					tr.line1 td{
						background-color:@bgcolor-t;
					}
					tr.selected td{
						background-color:@bgcolor-w;
					}
					tr.hover td{
						background-color:@bgcolor-u;
					}

					tr{

						td.bodyNullTd{
							background-image:none;
						}
						td{
							.bodyNode{
								position:relative;
								padding:0px;
							}
							.bodyTdText{
								position:relative;
								line-height:20px;min-height:20px;
								padding:5px 8px;
								color:@color;text-shadow:0px 1px 0px #fff;
								.util-text-ellipsis();
							}
							.bodyTdHtml{
								padding:0px 1px 0px 0px;
							}
							.bodyTdCheckBox{
								line-height:20px;height:20px;
								padding:5px 1px 5px 0px;
							}
						}
					}
				}
			}
		}
		/* 아이콘 보기 모드 */
		.gridBodyDiv{
			.viewIcon{
				float:left;
				position:relative;
				border:@border-f;
				margin:5px 0px 0px 5px;
				box-shadow:0px 0px 3px #ccc;
				border-radius:5px;
				background:@bgcolor-f;
				cursor:pointer;
				.gridViewIconThumbnail{
					position:absolute;
					border:@border-g;
				}
				.gridViewIconLabel{
					position:absolute;
					padding:0px;margin:0px;
					.util-text-ellipsis();
				}
				.gridViewIconDescription{
					position:absolute;
					padding:0px;margin:0px;
					overflow:hidden;
					.util-text-ellipsis();
				}
				.gridViewIconbuttons{
					position:absolute;
					padding:0px;margin:0px;
				}
			}
			.viewIcon:hover{
				background-color:@bgcolor-m;
			}
			.viewIcon.selected{
				background-color:@bgcolor-d;
			}
		}
	}
	.AXgridPageBody{
		position:relative;
		height:29px;
		background:url('images/dx-grid-page-bg.png') repeat-x;
		border-bottom:@border;border-left:@border;border-right:@border;
		.AXgridPagingUnit{
			position:absolute;left:0px;top:0px;
			height:30px;
			background:url('images/dx-grid-page-bg.png') repeat-x;
			z-index:3;

			.AXgridPageNumber{
				box-sizing: content-box;
				display:table-cell;padding:3px 0px 0px 5px;height: 26px;
				float:left;font-size:12px;color:@color-c;
			}
			.AXgridPageNo{
				border:0px none;vertical-align: top;
				height:20px;padding:0px 2px;margin:0px;
				outline:none;
			}

			.AXanchorSelect .selectedTextBox{
				box-shadow:inset 0px 1px 1px #e9eced;
				background:@bgcolor-f;
				.selectBoxArrow{padding-top:2px;}
			}
			.AXgridPageNumberCount{
				box-sizing: content-box;
				display:block;
				float:left;
				padding:4px 10px 4px 5px;height:22px;line-height:22px;
				font-size:12px;color:@color-c;
				border-right:@border;
			}
			.AXgridPagingPrev{
				box-sizing: content-box;
				display:block;
				float:left;
				width:29px;height:30px;border-right:@border;
				background:url('images/dx-left-arrows.png') no-repeat;
				text-indent:-1000px;overflow:hidden;
			}
			.AXgridPagingPrev:hover{
				background:url('images/dx-left-arrows.png') no-repeat 0px -30px;
			}
			.AXgridPagingNext{
				box-sizing: content-box;
				display:block;
				float:left;
				width:29px;height:30px;border-right:@border;
				background:url('images/dx-right-arrows.png') no-repeat;
				text-indent:-1000px;overflow:hidden;
			}
			.AXgridPagingNext:hover{
				background:url('images/dx-right-arrows.png') no-repeat 0px -30px;
			}


		}
		.AXgridStatus{
			position:absolute;right:0px;top:0px;
			height:30px;line-height:30px;
			padding:0px 10px;
			font-size:12px;color:@color-c;
			z-index:1;
			b{
				color:@color-d;
			}
		}
		.AXgridScroller{
			position:absolute;right:0px;top:0px;
			height:30px;width:60px;
			z-index:2;
			.AXgridScrollUp{
				display:block;
				position:absolute;left:0px;top:0px;
				width:29px;height:30px;border-left:@border;
				background:url('img/dx-up-arrows.png') no-repeat;
				text-indent:-1000px;overflow:hidden;
			}
			.AXgridScrollUp:hover{
				background:url('img/dx-up-arrows.png') no-repeat 0px -30px;
			}
			.AXgridScrollDn{
				display:block;
				position:absolute;left:30px;top:0px;
				width:29px;height:30px;border-left:border;
				background:url('img/dx-down-arrows.png') no-repeat;
				text-indent:-1000px;overflow:hidden;
			}
			.AXgridScrollDn:hover{
				background:url('img/dx-down-arrows.png') no-repeat 0px -30px;
			}
		}
	}
	.AXgridEditor{
		position:absolute;left:0px;top:0px;
		width:100%;height:60px;
		.editorContent{
			position:absolute;left:0px;top:0px;
			width:100%;
			background:@bgcolor-r;
			border-bottom:@border-h;
			box-shadow:1px 1px 3px #ccc;
		}
		.fixedEditorContent{
			position:absolute;left:0px;top:0px;
			background:@bgcolor-r;
			box-shadow:0px 0px 3px #ccc;
		}
		.editorButtons{
			position:absolute;left:10%;top:19px;
			padding:2px 5px 5px 5px;
			background:@bgcolor-r;
			border-top:1px solid @bgcolor-r;
			border-left:@border-h;
			border-right:@border-h;
			border-bottom:@border-h;
			//box-shadow:1px 1px 3px #ccc;
			//border-bottom-left-radius:@radius;border-bottom-right-radius:@radius;
			&.top{
				position:absolute;left:10%;
				padding:5px 5px 2px 5px;
				background:@bgcolor-v;
				border-bottom:1px solid @bgcolor-v;
				border-left:@border-h;
				border-right:@border-h;
				border-top:@border-h;
				/*
				border-top-left-radius:@radius;
				border-top-right-radius:@radius;
				border-bottom-left-radius:0;
				border-bottom-right-radius:0;
				*/
			}
		}
		.gridBodyTable{
			width:100%;table-layout:fixed;
			tbody{
				tr{
					td{
						padding:0px;
						background:url('images/dx-grid-body-border.png') repeat-y 100% 0px;
						background-color:@bgcolor-r !important;
						vertical-align:top;
						border-bottom:0px none;
					}
					td.selected{
						background-color:@bgcolor-s;box-shadow:inset 0px 0px 2px #000;
					}
				}
				tr.noListTr td{
					vertical-align:middle;
					height:100px;
					background:@bgcolor-e;
				}
				tr.line0 td{
					background-color:@bgcolor-e;
				}
				tr.line1 td{
					background-color:@bgcolor-f;
				}
				tr.selected td{
					background-color:@bgcolor-s;
				}
				tr.hover td{
					background-color:@bgcolor-q;
				}
			}
			thead, tbody, tfoot{
				tr{
					td.bodyNullTd{
						background-image:none;
					}
					td{
						.bodyNode{
							position:relative;
							padding:0px;
						}
						.bodyTdText{
							position:relative;
							line-height:20px;min-height:20px;
							padding:5px 8px;
							color:@color-b;text-shadow:0px 1px 0px #fff;
							.util-text-ellipsis();
						}
						.bodyTdHtml{
							padding:0px 1px 0px 0px;
						}
						.bodyTdCheckBox{
							line-height:20px;height:20px;
							padding:5px 1px 5px 0px;
						}
					}
				}
			}
		}
		.gridFixedBodyTable{
			table-layout:fixed;
			tbody{
				tr{
					td{
						padding:0px;
						background:url('images/dx-grid-body-border.png') repeat-y 100% 0px;
						vertical-align:top;
						border-bottom:0px none;
					}
					td.fixedLine{
						background:url('images/dx-grid-fixed-body-border.png') repeat-y 100% 0px;
					}
					td.selected{
						background-color:#D2D9DF;box-shadow:inset 0px 0px 2px #000;
					}
				}
				tr.noListTr td{
					vertical-align:middle;
					height:100px;
					background:@bgcolor-e;
				}
				tr.line0 td{
					background-color:@bgcolor-o;
				}
				tr.line1 td{
					background-color:@bgcolor-p;
				}
				tr.selected td{
					background-color:@bgcolor-s;
				}
				tr.hover td{
					background-color:@bgcolor-q;
				}
			}
			thead, tbody, tfoot{
				tr{
					td.bodyNullTd{
						background-image:none;
					}
					td{
						.bodyNode{
							position:relative;
							padding:0px;
						}
						.bodyTdText{
							position:relative;
							line-height:20px;min-height:20px;
							padding:5px 8px;
							color:@color-b;text-shadow:0px 1px 0px #fff;
							.util-text-ellipsis();
						}
						.bodyTdHtml{
							padding:0px 1px 0px 0px;
						}
						.bodyTdCheckBox{
							line-height:20px;height:20px;
							padding:5px 1px 5px 0px;
						}
					}
				}
			}
		}
	}
}

/* AXGridColGroupListBox */
.AXGridColGroupListBox{
	.dx-axgrid-preset();
	z-index:4999;
	position:absolute;left:0px;top:0px;
	width:146px;
	background:@bgcolor-f;
	border:@border;border-radius:@radius-a;
	box-shadow:0px 0px 5px #ccc;
	.AXGridColGroupListBoxItem{
		display:block;
		line-height:15px;padding:5px 5px 5px 25px;
		color:@color;text-decoration:none;
		border-bottom:@border-i;
	}
	.AXGridColGroupListBoxItem.last{
		border-bottom:0px none;
	}
	.AXGridColGroupListBoxItem.on{
		color:@color-e;
		background:url('images/dx-item-check.png') no-repeat 3px center;
	}
}

// 2014-04-03 오후 5:40:56 -tom
.AXGrid{
	&.AXGridMobile{
		.dx-axgrid-preset();

		.AXgridScrollBody{
			border:0px none;
			overflow:visible;

			.AXGridToolGroup{
				display:block;
				position:relative;
				height:43px;
				.util-gradient(top, @bgcolor-a, @bgcolor-b);
				border-bottom:@border;
				&.top{
					border-top:@border;
				}
				.displayNone{display:none;}
				.tool-config{
					position:absolute;left:0px;top:0px;
					display:block;width:43px;height:43px;
					box-sizing:content-box;padding:0px;margin:0px;
					background:url(images/mx-grid-icon-config.png) no-repeat center center;
					background-size:30px 30px;
				}
				.tool-pageGroup{
					position:relative;
					display:block;
					width:172px;height:43px;
					margin:0px auto;
					padding:0px;
					box-sizing:content-box;
					.tool-prevPage{
						position:absolute;left:0px;top:0px;
						display:block;width:43px;height:43px;
						box-sizing:content-box;padding:0px;margin:0px;
						background:url(images/mx-grid-icon-prev.png) no-repeat center center;
						background-size:30px 30px;
						cursor:pointer;
					}
					.tool-pageNo{
						padding:0px 0px;
						width:172px;height:43px;
						background:url(images/mx-grid-icon-pageBg.png) no-repeat center center;
						background-size:contain;
						select{
							position:absolute;left:43px;top:6px;
							width:86px;height:30px;
							border:0px none;
							.util-opacity(0);
						}
						span{
							display:block;
							width:86px;
							box-sizing:content-box;
							padding:6px 43px;text-align:center;
							line-height:31px;font-weight:bold;
							color:#6c6c6c;
						}
					}
					.tool-nextPage{
						position:absolute;right:0px;top:0px;
						display:block;width:43px;height:43px;
						box-sizing:content-box;padding:0px;margin:0px;
						background:url(images/mx-grid-icon-next.png) no-repeat center center;
						background-size:30px 30px;
						cursor:pointer;
					}
				}
				.tool-gotoTop{
					position:absolute;right:0px;top:0px;
					display:block;width:43px;height:43px;
					box-sizing:content-box;padding:0px;margin:0px;
					background:url(images/mx-grid-icon-down.png) no-repeat center center;
					background-size:30px 30px;
				}
				.tool-gotoBottom{
					position:absolute;right:0px;top:0px;
					display:block;width:43px;height:43px;
					background:url(images/mx-grid-icon-up.png) no-repeat center center;
					background-size:30px 30px;
				}
			}

			.AXGridBody{
				position:relative;

			}
			/* 모바일 뷰 용 목록 스타일 시트 클래스 */
			.gridBodyDiv{
				.bodyViewMobile{
					position:relative;
					border-bottom:@border;
					margin:0px 0px 0px 0px;
					padding:0px 5px 5px 5px;
					cursor:pointer;
					&.line0{
						background:@bgcolor-i;
					}
					&.line1{
						background:@bgcolor-j;
					}
					&.red{
						background-color:#FFE8E8;
					}
					&.green{
						background-color:#F7FDEA;
					}
					&.blue{
						background-color:#EAF5FD;
					}
					&.yellow{
						background-color:#FEFEE9;
					}
					&.white{
						background-color:#fff;
					}
					&.gray{
						background-color:#f7f7f7;
					}
					&.hover, &:hover{
						background-color:@bgcolor-h;
					}
					&.selected{
						background-color:@bgcolor-d;
					}

					.column{
						float:left;
						padding:0px 0px;margin:0px;
						border-box:content-box;
						.util-text-ellipsis();

						&.underLine{
							border-bottom:@border-e;
						}
						&.col1{
							width:25%;
						}
						&.col2{
							width:50%;
						}
						&.col3{
							width:75%;
						}
						&.col4{
							width:100%;
						}
						&.colNone{
							border:@border-i;
							background:@bgcolor;
							.util-border-radius(4px);
							margin:5px 0px 0px 5px;
							.label{
								margin:0px;
								padding:5px;
								background:@bgcolor;
								color:@color-a;
								font-size:11px;
							}
							.content{
								margin:0px;
								padding:8px 10px 8px 0px;
								line-height:12px;min-height:12px;
								color:@color;
								&.solid{
									display:inline-block;
									padding:8px 10px 8px 10px;
								}
							}
						}
						.label{
							display:inline-block;
							vertical-align:middle;
							margin:10px 0px 10px 5px;
							padding:0px 4px;
							height:20px;line-height:20px;
							background:#b1b1b1;
							color:#fff;
							font-size:11px;
							.util-border-radius(4px);
						}
						.content{
							display:inline;vertical-align:middle;
							margin:10px 10px 10px 5px;
							padding:4px 0px;
							line-height:12px;min-height:12px;
							color:@color;
							&.solid{
								display:inline-block;
								padding:3px 3px;
							}
						}
					}
					.columnClear{
						clear:both;
					}
					.buttonGroup{
						position:absolute;
						right:0px;top:0px;
						.handle{
							cursor: pointer;
							display:inline-block;
							width: 40px;height: 40px;
							background: url("images/mx-grid-icon-handle.png") no-repeat center center;
							background-size:30px 30px;
						}
					}
				}
			}
		}
	}
}

// 2015-01-06 - tom
.AXGrid {
	.inline-editor{
		position: absolute;
		left: 0px;top: 0px;
		line-height: 20px;
		padding: 5px 8px;
		.inline_editor_input{
			box-sizing: border-box;
			width:100%;
			height:20px;
			font-family: inherit;
			font-size: inherit;
			&.finder{
				padding-right: 20px;
			}
		}
		.inline_editor_select{
			box-sizing: border-box;
			width:100%;
			height:20px;
			border: 1px solid;
			font-family: inherit;
			font-size: inherit;
		}
		.finder-handle{
			position:absolute;
			right:8px;top:5px;
			font-family: 'axicon';
			text-align: center;
			width: 20px;
			&:before{
				content: "\f002";
			}
		}
	}
}

// 2015-01-06 - tom
.AXGrid {
	.inline-editor{
		position: absolute;
		left: 0px;top: 0px;
		line-height: 20px;
		padding: 5px 8px;
		.inline_editor_input{
			box-sizing: border-box;
			width:100%;
			height:20px;
			font-family: inherit;
			font-size: inherit;
			&.finder{
				padding-right: 20px;
			}
		}
		.inline_editor_select{
			box-sizing: border-box;
			width:100%;
			height:20px;
			border: 1px solid;
			font-family: inherit;
			font-size: inherit;
		}
		.finder-handle{
			position:absolute;
			right:8px;top:5px;
			font-family: 'axicon';
			text-align: center;
			width: 20px;
			&:before{
				content: "\f002";
			}
		}
	}
}

// 2016-01-21
.AXGrid {
	.dx-axgrid-preset();
	.AXgridScrollBody {
		.gridScrollTrackXY {
			position: absolute;
			right: 0px;
			bottom: 0px;
			width: 9px;
			height: 9px;
			border: @border-a;
			background: url('images/dx-diagonal-bg.png');
			display: none;
		}
		.gridScrollTrackY {
			position: absolute;
			right: 0px;
			top: 0px;
			width: 11px;
			height: 9px;
			background: #fff;
			border-left: @border;
			display: none;
			.gridScrollHandle {
				position: absolute;
				left: 1px;
				top: 0px;
				width: 9px;
				height: 20px;
				background: #000;
				border: 0px none;
				.util-opacity(20);
				.util-border-radius(5px, 5px, 5px, 5px);

				cursor: pointer;
				&:hover, &.hover {
					.util-opacity(50);
				}
			}
			.gridScroll-tip {
				display: none;
				font-size: 10px;
				position: absolute;
				right: 15px;
				top: 0px;
				padding: 5px;
				border: @border;
				.util-border-radius(5px, 5px, 5px, 5px);
				background: #fff;
			}
		}
		.gridScrollTrackX {
			position: absolute;
			left: 0px;
			bottom: 0px;
			width: 9px;
			height: 11px;
			display: none;
			border-top: @border;
			.gridScrollHandle {
				position: absolute;
				left: 0px;
				top: 1px;
				width: 20px;
				height: 9px;
				background: #000;
				border: 0px none;
				.util-opacity(20);
				.util-border-radius(5px, 5px, 5px, 5px);

				cursor: pointer;
				&:hover, &.hover {
					.util-opacity(50);
				}
			}
		}
	}
}