    /**
     * Creates base structure for a Grid.
     * @member Ext.grid.Panel
     */
    @mixin extjs-grid {
        //main grid view
        .#{$prefix}panel {
            .#{$prefix}grid-body {
                background: $panel-body-background-color;
                border-color: $panel-body-border-color;
                border-style: $panel-body-border-style;
                border-width: 1px;
                border-top-color: $grid-header-background-color;
            }
            .#{$prefix}summary-bottom {
                border-bottom-color: $grid-header-background-color;
            }
        }

        .#{$prefix}docked-summary {
            border-width: 1px;
            border-color: $panel-body-border-color;
            border-style: $panel-body-border-style;
        }

        .#{$prefix}grid-empty {
            padding: 10px;
            color: gray;
            font: normal 11px tahoma, arial, helvetica, sans-serif;
        }

        .#{$prefix}grid-header-hidden .#{$prefix}grid-body {
            border-top-color: $panel-body-border-color !important;
        }

        .#{$prefix}grid-view {
            overflow: hidden;

            position: relative;
        }

        .#{$prefix}grid-table {
            table-layout: fixed;
            border-collapse: separate;
        }

        // Tree with a default single column is auto width
        // Override any inline width style set by the widget itself (through its ColumnModel) to force it to be auto width.
        .#{$prefix}autowidth-table table.#{$prefix}grid-table {
            table-layout: auto;
            width: auto!important;
        }

        .#{$prefix}grid-locked .#{$prefix}grid-inner-locked {
            border-width: 0 1px 0 0 !important;
            border-style: solid;
        }

        .#{$prefix}grid-header-ct {
            cursor: default;
            zoom: 1;
            padding: 0;
            border: 1px solid $panel-body-border-color;

            // Body border provided by headerCt only when in accordion layout.
            border-bottom-color: $grid-header-background-color;

            @if $supports-gradients or $compile-all {
                @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
            }
        }

        .#{$prefix}accordion-item .#{$prefix}grid-header-ct {
            border-width: 0 0 1px !important;
        }

        // When hideHeaders: true, we need !important to override above rule
        .#{$prefix}accordion-item .#{$prefix}grid-header-ct-hidden {
            border: 0 !important;
        }

        .#{$prefix}column-header {
            padding: 0;
            position: absolute;
            overflow: hidden;
            border: 0 none;

            border-right: 1px solid $grid-header-background-color;

            text-shadow: 0 1px 0 rgba(255, 255, 255, .3);

            @if $grid-header-color {
                color: $grid-header-color;
            }
            font: normal ceil($font-size * .9) $font-family;

            @if $supports-gradients or $compile-all {
                @include background-gradient($grid-header-background-color, $grid-header-background-gradient);
            }
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}column-header {
                border-right: 0 none;
                border-left: 1px solid $grid-header-background-color;
            }
        }

        .#{$prefix}group-header {
            padding: 0;
            border-left-width: 0;
        }
        .#{$prefix}group-sub-header {
            background: transparent;
            border-top: 1px solid $grid-header-background-color;
            border-left-width: 0;
        }

        .#{$prefix}column-header-inner {
            zoom: 1;
            white-space: nowrap;
            line-height: $grid-header-line-height;
            padding: $grid-header-padding;

            .#{$prefix}column-header-text {
                white-space: nowrap;
            }
        }

        @if $include-rtl {
            .#{$prefix}ie {
                .#{$prefix}rtl.#{$prefix}column-header-text {
                    // in all version of IE except for 8 strict, left and right padding are
                    // automatically reversed on inline elements when the direction property
                    // is "rtl". triggering hasLayout corrects this bug in IE6/7/quirks, and
                    // display: inline-block is used for IE9/10
                    zoom: 1;
                    display: inline-block;
                }
            }
        }

        @if $supports-gradients or $compile-all {
            .#{$prefix}column-header-over,
            .#{$prefix}column-header-sort-ASC,
            .#{$prefix}column-header-sort-DESC {
                @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient);
            }
        }

        @if not $supports-gradients or $compile-all {
            .#{$prefix}nlg {
                .#{$prefix}grid-header-ct,
                .#{$prefix}column-header {
                    background: repeat-x 0 top;
                    background-image: theme-background-image($theme-name, 'grid/column-header-bg.gif');
                }

                .#{$prefix}column-header-over,
                .#{$prefix}column-header-sort-ASC,
                .#{$prefix}column-header-sort-DESC {
                    background: #ebf3fd repeat-x 0 top;
                    background-image: theme-background-image($theme-name, 'grid/column-header-over-bg.gif');
                }
            }
        }

        .#{$prefix}column-header-trigger {
            display: none;
            height: 100%;
            width: $grid-header-trigger-width;
            background: no-repeat left center;
            background-color: #c3daf9;
            background-image: theme-background-image($theme-name, 'grid/grid3-hd-btn.gif');
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            cursor: pointer;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}column-header-trigger {
                left: 0;
                right: auto;
                background-image: theme-background-image($theme-name, 'grid/grid3-hd-btn-left.gif');
                background-position: right center;
            }
        }

        .#{$prefix}column-header-over, .#{$prefix}column-header-open {
            .#{$prefix}column-header-trigger {
                display: block;
            }
        }

        .#{$prefix}column-header-align-right {
            text-align: right;

            .#{$prefix}column-header-text {
                padding-right: 0.5ex;
                margin-right: 6px;
            }
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}column-header-align-right {
                text-align: left;
            }
            .#{$prefix}column-header-align-right .#{$prefix}rtl.#{$prefix}column-header-text {
                padding-right: 0;
                padding-left: 0.5ex;
                margin-right: 0;
                margin-left: 6px;
            }
            .#{$prefix}rtl.#{$prefix}column-header-align-left {
                text-align: right;
            }
        }

        .#{$prefix}column-header-align-center {
            text-align: center;
        }
        .#{$prefix}column-header-align-left {
            text-align: left;
        }

        // Sort direction indicator is a background of the text span.
        .#{$prefix}column-header-sort-ASC,
        .#{$prefix}column-header-sort-DESC {
            .#{$prefix}column-header-text {
                padding-right: $grid-header-sort-icon-width + 3;
                background: no-repeat right 6px;
            }
        }
        @if $include-rtl {
            .#{$prefix}column-header-sort-ASC,
            .#{$prefix}column-header-sort-DESC {
                .#{$prefix}rtl.#{$prefix}column-header-text {
                    padding-right: 0;
                    padding-left: $grid-header-sort-icon-width + 3;
                    background-position: 0 6px;
                }
            }
        }
        .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text {
            background-image: theme-background-image($theme-name, 'grid/sort_asc.gif');
        }
        .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text {
            background-image: theme-background-image($theme-name, 'grid/sort_desc.gif');
        }

        //grid rows
        .#{$prefix}grid-row {
            vertical-align: top;
            .#{$prefix}grid-cell {
                @if $grid-row-cell-color {
                    color: $grid-row-cell-color;
                }
                font: $grid-row-cell-font;
                background-color: $grid-row-cell-background;
                border-color: $grid-row-cell-background;
                border-style: $grid-row-cell-border-style;
                border-width: 1px 0;
            }
        }

        .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell {
            border-width: $grid-row-cell-border-width;
            border-top-color: lighten($grid-row-cell-border-color, 5);
            border-bottom-color: $grid-row-cell-border-color;
        }

        .#{$prefix}grid-rowwrap {
            border-width: $grid-row-wrap-border-width;
            border-color: $grid-row-wrap-border-color;
            border-style: $grid-row-wrap-border-style;
            border-top-color: lighten($grid-row-wrap-border-color, 5);

            overflow: hidden;
        }

        .#{$prefix}grid-row-alt .#{$prefix}grid-cell,
        .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap {
            background-color: $grid-row-cell-alt-background;
        }

        .#{$prefix}grid-row-over .#{$prefix}grid-cell,
        .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap {
            border-color: $grid-row-cell-over-border-color;

            background-color: $grid-row-cell-over-background-color;
        }

        .#{$prefix}grid-row-focused .#{$prefix}grid-cell,
        .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap {
            border-top: 1px dotted $grid-row-cell-focus-border-color!important;
            border-bottom: 1px dotted $grid-row-cell-focus-border-color!important;
            background-color: $grid-row-cell-focus-background-color;
        }

        .#{$prefix}grid-row-selected {
            .#{$prefix}grid-cell,
            .#{$prefix}grid-rowwrap {
                border-style: $grid-row-cell-selected-border-style;
                border-color: $grid-row-cell-selected-border-color;
                background-color: $grid-row-cell-selected-background-color !important;
            }
            .#{$prefix}grid-rowbody {
                background-color: $grid-row-cell-selected-background-color !important;
            }
        }

        .#{$prefix}grid-row-summary {
            .#{$prefix}grid-cell,
            .#{$prefix}grid-rowwrap,
            .#{$prefix}grid-cell-rowbody {
                border-color: $grid-row-cell-border-color;
                background-color: transparent !important;
                border-top-width: 0;
                font: $grid-row-cell-font;
            }
        }

        .#{$prefix}grid-rowwrap {
            .#{$prefix}grid-cell,
            .#{$prefix}grid-cell-inner {
                border-width: 0;
                background-color: transparent;
            }
        }

        .#{$prefix}grid-row-body-hidden {
            display: none;
        }

        .#{$prefix}grid-rowbody {
            font: $grid-row-body-font;

            padding: $grid-row-body-padding;

            p {
                margin: 5px 5px 10px 5px;
            }
        }

        @if $include-ie {
            .#{$prefix}ie6 .#{$prefix}grid-rowbody {
                width: 100%;
            }
        }

        //grid cells
        .#{$prefix}grid-cell {
            overflow: hidden;
            border-color: $grid-row-cell-background;
        }

        .#{$prefix}grid-cell-inner {
            overflow: hidden;

            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;

            padding: $grid-cell-inner-padding-top $grid-cell-inner-padding-horizontal $grid-cell-inner-padding-bottom;

            white-space: nowrap;
        }

        .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-inner {
            line-height: $grid-row-cell-line-height - 2;
            padding-bottom: $grid-cell-inner-padding-bottom + 1;
        }

        // Action columns with a standard, 16x16 icon require less padding
        .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
            line-height: 0;
            // !important needed to override .x-tree-panel .x-grid-cell-inner's padding setting.
            padding: 1px 2px 1px 2px!important;
        }

        .#{$prefix}action-col-cell .#{$prefix}item-disabled {
            @include opacity(0.3);
        }

        .#{$prefix}grid-with-row-lines .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner {
            padding-top: 1px;
        }

        .#{$prefix}grid-row .#{$prefix}grid-cell-special {
            padding: 0;
            border-right: 1px solid $grid-cell-with-col-lines-border-color;
            @include background-gradient(#f6f6f6, 'grid-cell-special');
        }

        @if $include-rtl {
            .#{$prefix}grid-row .#{$prefix}rtl.#{$prefix}grid-cell-special {
                border-right: 0;
                border-left: 1px solid $grid-cell-with-col-lines-border-color;
            }
        }

        .#{$prefix}grid-row .#{$prefix}grid-cell-row-checker {
            vertical-align: middle;
        }

        .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
            border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%);

            @include background-gradient($grid-row-cell-selected-background-color, 'grid-cell-special');
        }

        .#{$prefix}grid-dirty-cell {
            background-image: theme-background-image($theme-name, 'grid/dirty.gif');
            background-position: 0 0;
            background-repeat: no-repeat;
        }

        @if $include-rtl {
            .#{$prefix}rtl.#{$prefix}grid-dirty-cell {
                background-image: theme-background-image($theme-name, 'grid/dirty-rtl.gif');
                background-position: right 0;
            }
        }

        .#{$prefix}grid-cell-selected {
            background-color: #B8CFEE !important;
        }

        @if not $supports-gradients or $compile-all {
            .#{$prefix}nlg {
                .#{$prefix}grid-cell-special {
                    background-repeat: repeat-y;
                    background-position: top right;
                }

                .#{$prefix}grid-row .#{$prefix}grid-cell-special,
                .#{$prefix}grid-row-over .#{$prefix}grid-cell-special {
                    background-image: theme-background-image($theme-name, 'grid/cell-special-bg.gif');

                }

                .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special,
                .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special {
                    background-image: theme-background-image($theme-name, 'grid/cell-special-selected-bg.gif');
                }
            }
        }

        .#{$prefix}grid-with-col-lines .#{$prefix}grid-cell {
            padding-right: 0;
            border-right: 1px solid $grid-cell-with-col-lines-border-color;
        }

        .#{$prefix}property-grid {
            .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
            .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
                padding-left: 12px;
                background-image: theme-background-image($theme-name, 'grid/property-cell-bg.gif');
                background-repeat: no-repeat;
                background-position: -16px 2px;
            }
        }

        .#{$prefix}grid-with-row-lines.#{$prefix}property-grid {
            .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner,
            .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
                background-position: -16px 1px;
            }
        }

        @if $include-ie {
            .#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner {
                background-position: -16px 2px;
            }
        }

        .#{$prefix}grid-row-body-hidden, .#{$prefix}grid-group-collapsed {
            display: none;
        }

        //grid expander
        .#{$prefix}grid-view {
            .#{$prefix}grid-td-expander {
                vertical-align: top;
            }
        }

        .#{$prefix}grid-td-expander {
            background: repeat-y right transparent;
        }

        .#{$prefix}grid-view {
            .#{$prefix}grid-td-expander {
                .#{$prefix}grid-cell-inner {
                    padding: 0 !important;
                }
            }
        }

        .#{$prefix}grid-row-expander {
            background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
            background-color: transparent;

            width: 9px;
            height: 13px;

            margin-left: 3px;

            background-repeat: no-repeat;
            background-position: 0 -2px;
        }

        .#{$prefix}grid-row-collapsed {
            .#{$prefix}grid-row-expander {
                background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
            }
        }

        .#{$prefix}grid-resize-marker {
            position: absolute;
            z-index: 5;
            top: 0;
            width: 1px;
            background-color: #0f0f0f;
        }

        //column move icons, when moving columns
        .col-move-top,
        .col-move-bottom {
            width: 9px;
            height: 9px;
            position: absolute;
            top: 0;
            line-height: 0;
            font-size: 0;
            overflow: hidden;
            z-index: 20000;
            background: no-repeat left top transparent;
        }

        .col-move-top {
            background-image: theme-background-image($theme-name, 'grid/col-move-top.gif');
        }

        .col-move-bottom {
            background-image: theme-background-image($theme-name, 'grid/col-move-bottom.gif');
        }

        //pading toolbar
        .#{$prefix}tbar-page-number {
            width: 30px;
        }

        //grouped grid
        .#{$prefix}grid-group,
        .#{$prefix}grid-group-body,
        .#{$prefix}grid-group-hd {
            zoom: 1;
        }

        .#{$prefix}grid-group-hd {

            padding: 10px 4px 4px 4px;

            background: $grid-grouped-header-background-color;

            border-width: $grid-grouped-header-border-width;
            border-style: $grid-grouped-header-border-style;
            border-color: $grid-grouped-header-border-color;

            cursor: pointer;
            white-space: nowrap;
        }

        .#{$prefix}grid-group-hd-not-collapsible {
            cursor: default;
        }

        .#{$prefix}grid-group-hd-collapsible {
            .#{$prefix}grid-group-title {
                background: transparent no-repeat 0 -1px;
                background-image: theme-background-image($theme-name, 'grid/group-collapse.gif');
                padding: 0 0 0 14px;
            }
        }

        .#{$prefix}grid-group-title {
            color: $grid-grouped-title-color;
            font: $grid-grouped-title-font;
        }

        .#{$prefix}grid-group-hd-collapsed {
            .#{$prefix}grid-group-title {
                background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
            }
        }

        .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body {
            display: none;
        }

        .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title {
            background-image: theme-background-image($theme-name, 'grid/group-expand.gif');
        }

        .#{$prefix}group-by-icon {
            background-image: theme-background-image($theme-name, 'grid/group-by.gif');
        }

        .#{$prefix}show-groups-icon {
            background-image: theme-background-image($theme-name, 'grid/group-by.gif');
        }

        .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner {
            padding: 0;
            line-height: 0;
        }

        .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner {
            padding-left: 4px;
            padding-right: 4px;
        }

        .#{$prefix}grid-row-checker,
        .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
            height: 14px;
            width: 14px;
            line-height: 0;
            background-image: theme-background-image($theme-name, 'grid/unchecked.gif');
            background-position: -1px -1px;
            background-repeat: no-repeat;
            background-color: transparent;
        }

        // Row checker is a div but column header checker is the text span element, so make it display: block
        // Header checkbox element needs centering
        .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
            display: block;
            margin-left: 5px;
        }

        @if $include-rtl {
            .#{$prefix}column-header-checkbox .#{$prefix}rtl.#{$prefix}column-header-text {
                margin-left: 0;
                margin-right: 4px;
            }
        }

        @if $include-ie or $compile-all {
            /* IE6, IE7, and all IE Quirks mode need line-height to be the same as checkbox height or the header/row height will be too tall */
            .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie7m {
                .#{$prefix}grid-row-checker,
                .#{$prefix}column-header-checkbox .#{$prefix}column-header-text {
                    line-height: 14px;
                }
            }
        }

        .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text {
            background-image: theme-background-image($theme-name, 'grid/checked.gif');
        }

        .#{$prefix}grid-cell-row-checker .#{$prefix}grid-cell-inner {
            padding-top: 4px;
            padding-bottom: 2px;
            line-height: $grid-row-height - 6;
        }
        .#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-row-checker .#{$prefix}grid-cell-inner {
            padding-top: 3px;
        }
        .#{$prefix}grid-row-checker {
            margin-left: 1px;

            background-position: 50% -2px;
        }

        .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker,
        .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker {
            background-image: theme-background-image($theme-name, 'grid/checked.gif');
        }

        //grid icons
        .#{$prefix}tbar-page-first {
            background-image: theme-background-image($theme-name, 'grid/page-first.gif') !important;
        }

        .#{$prefix}tbar-loading {
            background-image: theme-background-image($theme-name, 'grid/refresh.gif') !important;
        }

        .#{$prefix}tbar-page-last {
            background-image: theme-background-image($theme-name, 'grid/page-last.gif') !important;
        }

        .#{$prefix}tbar-page-next {
            background-image: theme-background-image($theme-name, 'grid/page-next.gif') !important;
        }

        .#{$prefix}tbar-page-prev {
            background-image: theme-background-image($theme-name, 'grid/page-prev.gif') !important;
        }

        .#{$prefix}item-disabled {
            .#{$prefix}tbar-loading {
                background-image: theme-background-image($theme-name, 'grid/refresh-disabled.gif') !important;
            }

            .#{$prefix}tbar-page-first {
                background-image: theme-background-image($theme-name, 'grid/page-first-disabled.gif') !important;
            }

            .#{$prefix}tbar-page-last {
                background-image: theme-background-image($theme-name, 'grid/page-last-disabled.gif') !important;
            }

            .#{$prefix}tbar-page-next {
                background-image: theme-background-image($theme-name, 'grid/page-next-disabled.gif') !important;
            }

            .#{$prefix}tbar-page-prev {
                background-image: theme-background-image($theme-name, 'grid/page-prev-disabled.gif') !important;
            }
        }

        //menu icons
        .#{$prefix}hmenu-sort-asc .#{$prefix}menu-item-icon {
            background-image: theme-background-image($theme-name, 'grid/hmenu-asc.gif');
        }

        .#{$prefix}hmenu-sort-desc .#{$prefix}menu-item-icon {
            background-image: theme-background-image($theme-name, 'grid/hmenu-desc.gif');
        }

        .#{$prefix}hmenu-lock .#{$prefix}menu-item-icon {
            background-image: theme-background-image($theme-name, 'grid/hmenu-lock.gif');
        }

        .#{$prefix}hmenu-unlock .#{$prefix}menu-item-icon {
            background-image: theme-background-image($theme-name, 'grid/hmenu-unlock.gif');
        }

        .#{$prefix}group-by-icon {
            background-image: theme-background-image($theme-name, 'grid/group-by.gif');
        }

        .#{$prefix}cols-icon .#{$prefix}menu-item-icon {
            background-image: theme-background-image($theme-name, 'grid/columns.gif');
        }

        .#{$prefix}show-groups-icon {
            background-image: theme-background-image($theme-name, 'grid/group-by.gif');
        }

        // Drag/drop indicator styles
        .#{$prefix}grid-drop-indicator {
            position: absolute;
            height: 1px;
            line-height: 0px;
            background-color: #77BC71;
            overflow: visible;

            .#{$prefix}grid-drop-indicator-left {
                position: absolute;
                top: -8px;
                left: -12px;
                background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png');
                height: 16px;
                width: 16px;
            }

            .#{$prefix}grid-drop-indicator-right {
                position: absolute;
                top: -8px;
                right: -11px;
                background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png');
                height: 16px;
                width: 16px;
            }
        }

        .#{$prefix}ie6 {
            .#{$prefix}grid-drop-indicator-left {
                background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif');
            }

            .#{$prefix}grid-drop-indicator-right {
                background-image: theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif');
            }
        }

        // Cell Editor
        .#{$prefix}grid-editor {
            // Position editor text over underlying grid cell text
            .#{$prefix}form-text {
                padding: 0 $grid-cell-editor-field-padding-horizontal;
            }
            .#{$prefix}form-cb-wrap {
                padding-top: $grid-cell-editor-checkbox-padding-top;
            }
        }

        // Row Editor
        .#{$prefix}grid-row-editor {
            position: absolute !important;
            z-index: 1;
            zoom: 1;
            overflow: visible !important;

            .#{$prefix}form-text {
                padding: 0 $grid-row-editor-field-padding-horizontal;
            }
            .#{$prefix}form-cb-wrap {
                padding-top: $grid-row-editor-cb-wrap-padding-top;
            }
            .#{$prefix}form-checkbox {
                margin-left: $grid-row-editor-checkbox-margin-left;
            }
            .#{$prefix}form-display-field {
                font: $grid-editor-font;
                padding-top: 0;
                padding-left: $grid-row-editor-field-padding-horizontal;
            }

            .#{$prefix}panel-body {
                background-color: $grid-row-editor-background-color;
                border-top: $grid-row-editor-border;
                border-bottom: $grid-row-editor-border;
            }
        }

        // Row/Cell Editor Shared Styles
        .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
            // Align checkbox input
            .#{$prefix}form-cb-wrap {
                text-align: center;
            }
            .#{$prefix}form-trigger {
                height: $grid-row-height - $form-field-border-width;
            }
            .#{$prefix}form-trigger-wrap {
                .#{$prefix}form-spinner-up, .#{$prefix}form-spinner-down {
                    background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
                    height: 10px !important;
                }
            }
            @if $include-rtl {
                .#{$prefix}rtl.#{$prefix}form-trigger-wrap {
                    .#{$prefix}form-spinner-up, .#{$prefix}form-spinner-down {
                        background-image: theme-background-image($theme-name, 'form/spinner-small-rtl.gif');
                    }
                }
            }
        }
        .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
            .#{$prefix}form-text {
                font: $grid-editor-font;
                height: $grid-row-height - 2;
            }
        }

        .#{$prefix}border-box .#{$prefix}grid-editor,
        .#{$prefix}border-box .#{$prefix}grid-row-editor {
            .#{$prefix}form-trigger {
                height: $grid-row-height;
            }
            .#{$prefix}form-text {
                height: $grid-row-height;
                padding-bottom: 1px; // fix for firefox/opera since they ignore line-height on inputs
            }
        }

        @if $include-ie {
            .#{$prefix}ie {
                .#{$prefix}grid-editor .#{$prefix}form-text {
                    padding-left: $grid-cell-editor-field-padding-horizontal + 1;
                }
                .#{$prefix}grid-row-editor .#{$prefix}form-text {
                    padding-left: $grid-row-editor-field-padding-horizontal + 1;
                }
            }
            .#{$prefix}ie8m {
                .#{$prefix}grid-editor .#{$prefix}form-text,
                .#{$prefix}grid-row-editor .#{$prefix}form-text {
                    padding-top: 1px;
                }
            }
            .#{$prefix}strict .#{$prefix}ie6,
            .#{$prefix}strict .#{$prefix}ie7 {
                .#{$prefix}grid-editor .#{$prefix}form-text,
                .#{$prefix}grid-row-editor .#{$prefix}form-text {
                    height: $grid-row-height - ($form-field-border-width * 3);
                }
            }
            .#{$prefix}quirks .#{$prefix}ie9 {
                .#{$prefix}grid-editor, .#{$prefix}grid-row-editor {
                    .#{$prefix}form-text {
                        line-height: $grid-editor-line-height + 2;
                    }
                }
            }
        }

        @if $include-opera {
            .#{$prefix}opera {
                .#{$prefix}grid-editor .#{$prefix}form-text {
                    padding-left: $grid-cell-editor-field-padding-horizontal + 1;
                }
                .#{$prefix}grid-row-editor .#{$prefix}form-text {
                    padding-left: $grid-row-editor-field-padding-horizontal + 1;
                }
            }
        }

        .#{$prefix}grid-row-editor-buttons {
            background-color: $grid-row-editor-background-color;
            position: absolute;
            bottom: -31px;
            padding: 4px;
            height: 32px;

            .#{$prefix}strict .#{$prefix}ie7m & {
                width: 192px;
                height: 24px;
            }
        }

        .#{$prefix}grid-row-editor-buttons-ml,
        .#{$prefix}grid-row-editor-buttons-mr,
        .#{$prefix}grid-row-editor-buttons-bl,
        .#{$prefix}grid-row-editor-buttons-br,
        .#{$prefix}grid-row-editor-buttons-bc {
            position: absolute;
            overflow: hidden;
        }

        .#{$prefix}grid-row-editor-buttons-bl,
        .#{$prefix}grid-row-editor-buttons-br {
            width: 4px;
            height: 4px;
            bottom: 0px;
            background-image: theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif');
        }
        .#{$prefix}grid-row-editor-buttons-bl {
            left: 0px;
            background-position: 0px -16px;
        }
        .#{$prefix}grid-row-editor-buttons-br {
            right: 0px;
            background-position: 0px -20px;
        }

        .#{$prefix}grid-row-editor-buttons-bc {
            position: absolute;
            left: 4px;
            bottom: 0px;
            width: 192px;
            height: 1px;
            background-color: $grid-row-editor-border-color;
        }

        .#{$prefix}grid-row-editor-buttons-ml,
        .#{$prefix}grid-row-editor-buttons-mr {
            height: 27px;
            width: 1px;
            top: 1px;
            background-color: $grid-row-editor-border-color;
        }
        .#{$prefix}grid-row-editor-buttons-ml {
            left: 0px
        }
        .#{$prefix}grid-row-editor-buttons-mr {
            background-position: 0px -20px;
            right: 0px;
        }

        .#{$prefix}grid-row-editor-errors {
            ul {
                margin-left: 5px;
            }
            li {
                list-style: disc;
                margin-left: 15px;
            }
        }

        // Inner locked grid has a 1px border. Last cell looks bad with an extra grey one.
        // The rules must be last because they override default header and cell bordering.
        // Must use the border-right property because we have to override the .x-column-header border-right setting.
        .#{$prefix}grid-inner-locked {
            .#{$prefix}column-header-last {
                border-right: 0 none;
            }
            .#{$prefix}grid-cell-last {
                border-right: 0 none;
            }
        }

    }