@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;
        background: @bgcolor;
        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;
            .util-gradient(top, @bgcolor-a, @bgcolor-b);
            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;
                .util-gradient(top, @bgcolor-a, @bgcolor-b);

                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: col-resize;
                            }
                            .colHeadResizer:active {
                                background: @bgcolor-e;
                            }
                            .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: @border;
                        }
                        td:hover {
                            background-color: @bgcolor-x;
                        }
                        td.sortDesc {
                            background-color: @bgcolor-x;
                            .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;
                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 {
                            min-width: auto;
                            min-height: auto;
                            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-i;
                        border-bottom: @border-d;
                    }
                    tr.line0 td {
                        background-color: @bgcolor-i;
                    }
                    tr.line1 td {
                        background-color: @bgcolor-j;
                    }
                    tr.red td {
                        background-color: @bgcolor-k;
                    }
                    tr.green td {
                        background-color: @bgcolor-l;
                    }
                    tr.blue td {
                        background-color: @bgcolor-m;
                    }
                    tr.yellow td {
                        background-color: @bgcolor-n;
                    }
                    tr.white td {
                        background-color: @bgcolor-o;
                    }
                    tr.gray td {
                        background-color: @bgcolor-p;
                    }
                    tr.hover td {
                        background-color: @bgcolor-i;
                    }
                    tr.selected td {
                        background-color: @bgcolor-h;
                    }
                }
                thead, tfoot {
                    tr td {
                        min-width: auto;
                        min-height: auto;
                        padding: 0px;
                        background: url('images/dx-grid-body-border.png') repeat-y 100% 0px;
                        vertical-align: bottom;
                        border-bottom: @border-d;
                        background-color: @bgcolor-r;
                    }
                }
                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-a;
                            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 {
                        min-width: auto;
                        min-height: auto;
                        padding: 0px;
                        background: url('images/dx-grid-body-border.png') repeat-y 100% 0px;
                        vertical-align: bottom;
                        border-bottom: @border-d;
                        background-color: @bgcolor-r;
                    }
                }
                thead, tbody, tfoot {
                    tr {
                        td {
                            min-width: auto;
                            min-height: auto;
                            background-color: @bgcolor-r;
                            .bodyNode {
                                position: relative;
                                padding: 0px;
                            }
                            .bodyTdText {
                                position: relative;
                                line-height: 20px;
                                min-height: 20px;
                                padding: 5px 8px;
                                color: @color-a;
                                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-i;
                        border-bottom: @border-d;
                    }
                    tr.line0 td {
                        background-color: @bgcolor-s;
                    }
                    tr.line1 td {
                        background-color: @bgcolor-t;
                    }
                    tr.red td {
                        background-color: @bgcolor-k;
                    }
                    tr.green td {
                        background-color: @bgcolor-l;
                    }
                    tr.blue td {
                        background-color: @bgcolor-m;
                    }
                    tr.yellow td {
                        background-color: @bgcolor-n;
                    }
                    tr.white td {
                        background-color: @bgcolor-o;
                    }
                    tr.gray td {
                        background-color: @bgcolor-p;
                    }
                    tr.selected td {
                        background-color: @bgcolor-h;
                    }
                    tr.hover td {
                        background-color: @bgcolor-u;
                    }
                }
            }
            // -- 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;
            }
            .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-a;
                                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-j;
                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-q;
            }
            .viewIcon.selected {
                background-color: @bgcolor-h;
            }
        }
    }
    .AXgridPageBody {
        position: relative;
        height: 29px;
        .util-gradient(top, @bgcolor-c, @bgcolor-d);
        //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;
            .util-gradient(top, @bgcolor-c, @bgcolor-d);
            z-index: 3;
            .AXgridPageNumber {
                box-sizing: content-box;
                display: table-cell;
                float: left;
                padding: 4px 0px 0px 4px;
                height: 24px;
                font-size: 12px;
                color: @color-b;
            }
            .AXgridPageNo {
                box-sizing: content-box;
                border: 0px none;
                height: 21px;
                padding: 0px 2px;
                margin: 0px;
                outline: none;
                vertical-align: top;
            }
            .AXanchorSelect .selectedTextBox {
                box-shadow: inset 0px 1px 1px #e9eced;
                background: @bgcolor-j;
            }
            .AXgridPageNumberCount {
                box-sizing: content-box;
                display: block;
                float: left;
                padding: 4px 10px 4px 5px;
                height: 22px;
                line-height: 22px;
                font-size: 12px;
                color: @color-b;
                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-b;
            z-index: 1;
            b {
                color: @color-c;
            }
        }
        .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-v;
            border-bottom: @border-h;
            box-shadow: 1px 1px 3px #ccc;
        }
        .fixedEditorContent {
            position: absolute;
            left: 0px;
            top: 0px;
            background: @bgcolor-v;
            box-shadow: 0px 0px 3px #ccc;
        }
        .editorButtons {
            position: absolute;
            left: 10%;
            top: 19px;
            padding: 2px 5px 5px 5px;
            background: @bgcolor-v;
            border-top: 1px solid @bgcolor-v;
            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-v !important;
                        vertical-align: top;
                        border-bottom: 0px none;
                    }
                    td.selected {
                        background-color: @bgcolor-w;
                        box-shadow: inset 0px 0px 2px #000;
                    }
                }
                tr.noListTr td {
                    vertical-align: middle;
                    height: 100px;
                    background: @bgcolor-i;
                }
                tr.line0 td {
                    background-color: @bgcolor-i;
                }
                tr.line1 td {
                    background-color: @bgcolor-j;
                }
                tr.selected td {
                    background-color: @bgcolor-w;
                }
                tr.hover td {
                    background-color: @bgcolor-u;
                }
            }
            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-a;
                            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-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;
                }
            }
            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-a;
                            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-j;
    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;
        font-size: 12px;
    }
    .AXGridColGroupListBoxItem.last {
        border-bottom: 0px none;
    }
    .AXGridColGroupListBoxItem.on {
        color: @color-d;
        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);
                }
            }
        }
    }
}