/*
Grids

These are default styles for grids.

Markup:
<div class="data-grid__wrapper">
    <div class="data-grid__container">
        <table class="data-grid data-grid--full js-data-grid">
            <thead class="data-grid__header data-grid__header--default data-grid__header-group">
                <tr class="data-grid__row js-data-grid-header-row">
                    <th scope="col" class="data-grid__cell data-grid__cell--sortable st-sort-descent">
                        Lease (DESCENT)
                    </th>
                    <th scope="col" class="data-grid__cell data-grid__cell--sortable st-sort-ascent">
                        Status (ASCENT)
                    </th>
                    <th scope="col" class="data-grid__cell data-grid__cell--sortable">
                        Agent
                    </th>
                    <th scope="col" class="data-grid__cell data-grid__cell--sortable">
                        Start date
                    </th>
                    <th scope="col" class="data-grid__cell data-grid__cell--sortable">
                        End date
                    </th>
                    <th scope="col" class="data-grid__cell data-grid__cell--sortable text-right">
                        Rent
                    </th>
                </tr>
            </thead>
            <tbody class="data-grid__body data-grid__body--no-border-radius">
                <tr class="data-grid__row data-grid__row--active">
                    <td class="data-grid__cell data-grid__cell--bordered">
                        Lease Name
                    </td>
                    <td class="data-grid__cell data-grid__cell--bordered">
                        Status
                    </td>
                    <td class="data-grid__cell data-grid__cell--bordered">
                        Agent Name
                    </td>
                    <td class="data-grid__cell data-grid__cell--bordered">
                        2000-01-01
                    </td>
                    <td class="data-grid__cell data-grid__cell--bordered">
                        2001-01-01
                    </td>
                    <td class="data-grid__cell data-grid__cell--bordered text-right">
                        1,000.00
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="torn-edge">
                <span></span>
            </div>
    <div class="footerAction see-more">
        <a href="" class="btn btn--show-more bMoreMatches"><span class="top-edge">Matches More</span>
        </a>
    </div>
</div>

Name: grid

Styleguide 2.14
*/

// This is added here to not add the entire selectize less
@selectize-color-disabled: #fafafa;
@color-grid-hover: @theme-grey14;

// main grid
// -------------------
.data-grid {
    display: table;
    table-layout: fixed;
    position: relative;
    border-collapse: separate !important; //override bootstrap...
    border-spacing: 0;
}

.data-grid--full {
    min-width: 100%;
}

.data-grid--full-contained {
    margin: 0 -15px;
}

.data-grid--width-auto {
    width: auto !important;
}

.data-grid--bordered {
    border: 1px solid @color-border-grid;
}

.data-grid--large-bottom-border {
    border-bottom: 2px solid @color-border-grid;
}

.data-grid--layout-auto {
    table-layout: auto !important;
}

// table display definitions
// -------------------
.data-grid__colgroup {
    display: table-column-group;
}

.data-grid__colgroup__col {
    display: table-column;
}

.data-grid__header-group {
    display: table-header-group;
}

.data-grid__wrapper {
    position: relative;
    box-shadow: @full-page-content-box-shadow;
}

// container
// -------------------
.data-grid__container {
    z-index: @z-index-data-grid-container;
    position: relative;
}

.data-grid__container--autoscroll {
    display: block;
    max-height: 250px;
    overflow-y: auto;
}

.data-grid__container--full-border {
    border: 1px solid @color-border-grid;

    //remove double bottom border
    .data-grid__body .data-grid__row:last-of-type .data-grid__cell--bordered {
        border-bottom: 0;
    }
}

.data-grid__container--loading {
    min-height: 150px;
}

.data-grid__container--loading:before {
    position: absolute;
    left: 0;
    top: 0;
    z-index: @z-index-grid-container-loading-spinner;
    min-height: 45px;
    height: 100%;
    width: 100%;

    content: " ";
    text-align: center;

    opacity: 0.75;
    background: url("@{icons}spinner-large.gif") top 7px center no-repeat #FFFFFF;

}

// body
// -------------------
.data-grid__body {
    display: table-row-group;
    width: 100%;
}

.data-grid__body--autoscroll {
    overflow-y: auto;
    display: block;
}

// row
// -------------------
.data-grid__row {
    display: table-row;
}

.data-grid__row--white-background {
    background-color: #FFFFFF;
}

.data-grid__row--error {
    color: @color-error;
}

.data-grid__row--success {
    color: @color-success;
}

.data-grid__row--active {
    background-color: #FFFFFF;

    &:hover {
        .data-grid__cell {
            background-color: @color-grid-hover;
        }
        cursor: pointer;
    }
}

.data-grid__row--highlight {
    .data-grid__cell {
        background-color: @theme-grey14;
    }
}

.data-grid__row--selected {
    .data-grid__cell {
        background-color: @theme-blue-9;
    }
}

.data-grid__row--zero-state {
    color: @color-grid-zero-state;
    padding-top: 0; //Cancel out 'empty' class'
    .data-grid__cell {
        padding: 20px !important;
        border-bottom-color: @color-border-grid !important;

        &:first-of-type {
            border-bottom-left-radius: @border-radius-default;
        }

        &:last-of-type {
            border-bottom-right-radius: @border-radius-default;
        }
    }
}

.data-grid__row--disabled {
    color: @color-grid-disabled;
}

.data-grid__row--no-top-border {
    .data-grid__cell {
        border-top: 0 !important;
    }
}

.data-grid__row--cell-border-top {
    .data-grid__cell {
        border-top: 1px solid @color-border-grid !important;
    }
}

//C# generated grid cannot apply tbody class
.data-grid__row--first-cell-border-left {
    .data-grid__cell.data-grid__cell--bordered:first-of-type {
        border-left: 1px solid @color-border-grid;
    }
}

.data-grid__row--last-cell-border-right {
    .data-grid__cell.data-grid__cell--bordered:last-of-type {
        border-right: 1px solid @color-border-grid;
    }
}
// Cells
// -------------------

.data-grid__cell {
    display: table-cell;
    padding: 5px 15px;
    box-sizing: border-box;
    height: 40px;
    vertical-align: middle;
    font-size: @font-size-grid-cell;
    word-wrap: break-word;
    background-color: #FFFFFF;
}

.data-grid__cell--header {
    color: @color-grid-header;
    background-color: @color-background-default;
    border-top: 1px solid @color-border-grid;
    border-bottom: 1px solid @color-border-grid;
    border-left: 1px solid @color-border-grid;
    text-transform: uppercase;
    text-align: left;
    line-height: 12px;
    font-weight: @font-weight-grid-header;
    font-size: @font-size-grid-header;
    letter-spacing: @letter-spacing-grid-headers;
}

.data-grid__cell--narrow {
    padding: 5px;
}

.data-grid__wrapper--financials-table .data-grid__cell--property-col {
    width: 777px;
}

.data-grid__header { //BEM refactor to data-grid__cell--header
    > .data-grid__row > .data-grid__cell {
        .data-grid__cell--header;

        &.data-grid__cell--quick-menu-header {
            border-left: 0;
        }

        &.theader--right {
            text-align: right;
        }
    }
}

.data-grid__cell--grey-background {
    background-color: @theme-grey8;
}

//Occasionally needed for header
.data-grid__cell--no-wrap {
    white-space: nowrap;
}

.data-grid__header {
    .data-grid__cell--no-wrap {
        &:after {
            margin-right: 0 !important; //if we are using nowrap to fix header, we would more space for chevron as well (ex. workorder)
        }
    }
}

.data-grid__cell--no-padding {
    padding: 0 !important;
}

//Replace td.readonly
.data-grid__cell--read-only {
    background-color: @theme-grey11;
}

.data-grid__cell--white-background {
    background-color: #FFFFFF;
}

.data-grid__cell--deleted {
    background-color: @theme-grey8;
    color: @color-text-grey;
    text-decoration: line-through;

    // This is not BEM, but required because we use a third-party component for this and have no other way to fix these styles
    .plugin-item_nowrap.selectize-control.single .selectize-input {
        opacity: 1;
        background-color: @selectize-color-disabled;
    }

    .item-wrap-inner {
        text-decoration: line-through;
        color: @color-text-grey;
    }
}

.data-grid__cell--no-padding {
    padding: 0;
}

.data-grid__cell--error {
    color: @color-error;
}

.data-grid__cell--success {
    color: @color-success;
}

.data-grid__cell--indent {
    padding-left: 50px !important;
}

.data-grid__cell--bordered {
    border-bottom: 1px solid @color-border-grid;
    border-left: 1px dotted @color-border-grid;
}

.data-grid__header > .data-grid__row > .data-grid__cell:first-of-type,
.data-grid__body > .data-grid__row > .data-grid__cell:first-of-type,
.data-grid__footer > .data-grid__row > .data-grid__cell:first-of-type {
    border-left-style: solid;
}

.data-grid__header > .data-grid__row > .data-grid__cell:last-of-type,
.data-grid__body > .data-grid__row > .data-grid__cell:last-of-type,
.data-grid__footer > .data-grid__row > .data-grid__cell:last-of-type {
    border-right: 1px solid @color-border-grid;
}

//editing grid has "remove" column
.data-grid__header--with-remove-column > .data-grid__row > .data-grid__cell:nth-last-child(2) {
    border-right: 1px solid @color-border-grid;
    border-top-right-radius: @border-radius-default;
}

//similar for tbody
.data-grid__body--with-remove-column > .data-grid__row > .data-grid__cell:nth-last-child(2) {
    border-right: 1px solid @color-border-grid;
}

.data-grid__body--with-remove-column > .data-grid__row:last-of-type > .data-grid__cell:nth-last-child(2) {
    border-bottom-right-radius: @border-radius-default;
}

.data-grid__body--no-border-radius.data-grid__body--with-remove-column > .data-grid__row:last-of-type > .data-grid__cell:nth-last-child(2) {
    border-bottom-right-radius: 0;
}

//BEM version
.data-grid__row > {
    .data-grid__cell--header:last-of-type {
        border-right: 1px solid @color-border-grid;
    }
}

//Sample usage: legacy pages that used alternate means to "hide" columns/ grid with "remove" column
.data-grid__cell--border-right {
    border-right: 1px solid @color-border-grid;
}

.data-grid__cell--border-top {
    border-top: 1px solid @color-border-grid;
}

.data-grid__cell--border-top-left-radius {
    border-top-left-radius: @border-radius-default;
}

.data-grid__cell--border-top-right-radius {
    border-top-right-radius: @border-radius-default;
}

.data-grid__cell--border-bottom-right-radius {
    border-bottom-right-radius: @border-radius-default;
}

.data-grid__cell--total {
    font-weight: bold;
}

//Used to signal total amount error in some accounting related grid
.data-grid__cell--accounting-total-error {
    border: 1px solid @color-error !important;
    border-radius: 0 !important;
}

.data-grid__cell--quick-menu-header {
    position: relative;
    width: 18px;
    border-top: 1px solid @color-border-grid;
    border-bottom: 1px solid @color-border-grid;
}

.data-grid__cell--quick-menu {
    position: relative;
    display: table-cell;
    border-bottom: 1px solid @color-border-grid;
    padding-left: 18px;
    padding-right: 0;
}

.data-grid__cell--sortable {
    cursor: pointer;
    position: relative;

    &:hover:after {
        .data-grid__header-chevron;
        transform: rotate(180deg);
    }
}

.data-grid__cell--sortable-tall {
    line-height: 18px;
}

.data-grid__cell--non-sortable {
    color: black;

    &:hover {
        cursor: default;
    }
}

.data-grid__cell--default-pad-left {
    padding: 5px 13px 5px 5px;

    &:first-child {
        padding-left: 5px;
    }
}

.data-grid__cell--no-border {
    border: 0 !important; //important because ".less table td" is applying border left, can be removed once that is removed
}

.data-grid__cell--no-left-border {
    border-left: 0 !important; //important because ".less table td" is applying border left, can be removed once that is removed
}

.data-grid__cell--no-right-border {
    border-right: 0 !important;
}

.data-grid__cell--border-left-style-solid {
    border-left-style: solid !important;
}

.data-grid__cell--no-top-border {
    border-top: 0;
}

.data-grid__cell--no-bottom-border {
    border-bottom: 0 !important;
}

.data-grid__cell--align-top {
    vertical-align: top;
}

.data-grid__cell--align-middle {
    vertical-align: middle !important;
}

//We want this "column header" to be hidden, as it is serving as placeholder
.data-grid__cell--remove-column-header {
    border: 0 !important;
}

.data-grid__cell--edit-icon-column {
    padding: 7px;
    white-space: nowrap;
}

.data-grid__cell--text-center {
    text-align: center;
}

//Used by TextBoxControl
.data-grid__cell--use-validation-image {
    position: relative;
    .validationImageWithAltText {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.data-grid__meta-text {
    color: @theme-grey6;
    font-style: italic;
}

.data-grid__meta-text--normal-font {
    font-style: normal;
}

.data-grid__meta-text--secondary {
    color: @theme-grey6;
    font-style: normal;
    font-size: 12px;
}

.data-grid__meta-text--subtitle {
    text-transform: uppercase;
	font-size: 11px;
	font-weight: @font-weight-semibold;
}

// Modified Cell //TODO convert to BEM
// -------------------
.data-grid__link-icon-cell {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
}

.data-grid__delete-cell {
    display: table-cell;
    vertical-align: middle;
}

// Cells border radius
// -------------------
.data-grid__header > .data-grid__row:first-of-type {
    > .data-grid__cell:first-of-type {
        border-top-left-radius: @border-radius-default;
    }
    > .data-grid__cell:last-of-type {
        border-top-right-radius: @border-radius-default;
    }
}

//BEM header
.data-grid__row {
    .data-grid__cell--header:first-of-type {
        border-top-left-radius: @border-radius-default;
    }
    .data-grid__cell--header:last-of-type {
        border-top-right-radius: @border-radius-default;
    }
}

.data-grid__row.data-grid__row--no-header-border-radius {
    .data-grid__cell--header:first-of-type {
        border-top-left-radius: 0;
    }
    .data-grid__cell--header:last-of-type {
        border-top-right-radius: 0;
    }
}
//No border-radius if it has filter above body
.data-grid__header.data-grid__header--no-border-radius .data-grid__row:first-of-type {
    .data-grid__cell:first-of-type {
        border-top-left-radius: 0;
    }
    .data-grid__cell:last-of-type {
        border-top-right-radius: 0;
    }
}

.data-grid__footer .data-grid__row:last-of-type .data-grid__cell:last-of-type,
.data-grid__body .data-grid__row:last-of-type .data-grid__cell:last-of-type {
    border-bottom-right-radius: @border-radius-default;
}

.data-grid__footer .data-grid__row:last-of-type .data-grid__cell:first-of-type,
.data-grid__body .data-grid__row:last-of-type .data-grid__cell:first-of-type {
    border-bottom-left-radius: @border-radius-default;
}

//No border-radius if it has footer under body
.data-grid__body.data-grid__body--no-border-radius .data-grid__row:last-of-type {
    .data-grid__cell:first-of-type {
        border-bottom-left-radius: 0;
    }
    .data-grid__cell:last-of-type {
        border-bottom-right-radius: 0;
    }
}

//If there is "footer tools" (which is essentially another footer), don't show border radius
.data-grid__footer.data-grid__footer--no-border-radius .data-grid__row:last-of-type {
    .data-grid__cell:first-of-type {
        border-bottom-left-radius: 0;
    }
    .data-grid__cell:last-of-type {
        border-bottom-right-radius: 0;
    }
}

//Forcing border radius (Lease ledger overrides)
.data-grid__row--border-radius-bottom-forced {

    .data-grid__cell:first-of-type {
        border-bottom-left-radius: 5px !important;
    }

    .data-grid__cell:last-of-type {
        border-bottom-right-radius: 5px !important;
    }

    .data-grid__cell--no-border-bottom-left-radius:first-of-type {
        border-bottom-left-radius: 0 !important;
    }

    .data-grid__cell--no-border-bottom-right-radius:last-of-type {
        border-bottom-right-radius: 0 !important;
    }
}

// Grid Modifiers
// -------------------
.data-grid--in-pop-up-window {
    .data-grid__cell {
        padding: 0 10px;
    }
}

.data-grid--budget-view {
    .data-grid__cell {
        padding: 0 5px;
    }
}

.data-grid--white-cells-except-last {
    .data-grid__body .data-grid__cell:not(:last-child) {
        background-color: #FFFFFF;
    }
}

.data-grid--bordered-body {
    .data-grid__header-group {
        .data-grid__cell {
            border-bottom: 1px solid @color-border-grid;
        }
    }

    .data-grid__body {
        .data-grid__cell + .data-grid__cell {
            border-left: 1px inset @color-border-grid;

            &.data-grid__cell--quick-menu {
                border-left: 0;
            }

            &.data-grid__cell--no-left-border {
                border-left: none;
            }
        }

        .data-grid__row {
            .data-grid__cell:first-of-type {
                border-left: 1px solid @color-border-grid;
            }
            .data-grid__cell:nth-last-child(1) { // changed
                border-right: 1px solid @color-border-grid;
            }
        }

        .data-grid__row + .data-grid__row {
            .data-grid__cell { // changed
                border-top: 1px solid @color-border-grid;
            }
        }

        .data-grid__row:first-of-type {
            .data-grid__cell { //changed
                border-top: 1px solid @color-border-grid;
            }
        }

        .data-grid__row:last-of-type {
            .data-grid__cell { // changed
                border-bottom: 1px solid @color-border-grid;
            }
        }
    }
}

// Like `.data-grid--bordered-body` but without the bordering around the last column. This is useful when there's a delete action.
.data-grid--bordered-except-last-column {
    .data-grid__body {
        .data-grid__row {
            .data-grid__cell:nth-last-child(1) {
                border-right: initial; // reset
            }
            .data-grid__cell:nth-last-child(2) {
                border-right: 1px solid @color-border-grid;
            }
        }
    }
}

// Header / Footer
// -------------------
.data-grid__header {}

.data-grid__header--bordered {
    padding-top: 5px;
    padding-left: 5px;
    border-bottom: 1px solid @color-border-grid;
    border-left: 1px solid @color-border-grid;
    &:first-child {
        border-left: none;
    }
}

.data-grid__header--default {
    background: @theme-grey1;
}

.data-grid__header--sortable {
    white-space: nowrap;
    cursor: pointer;

    &:hover {
        cursor: pointer;
    }
}

.data-grid__header--no-top-border {
    .data-grid__cell {
        border-top: 0 !important;
    }
}

.data-grid__header--external-header {
    .data-grid__cell {
        border-top: 0 !important;
        background: #FFFFFF !important;
    }
}

.data-grid__header-text--checkbox {
    margin-top: 1px;
}

.data-grid__footer {}

.data-grid__footer--default {
    background: #FFFFFF;
    border-radius: 0 0 5px 5px;
    padding-top: 10px;
}

.data-grid__footer-cell {
}

.data-grid__footer-cell--row-header {
    border-left: 1px solid @color-border-grid !important; //important override ".financial .grid tfoot tr td:first-child"
    text-align: left;
    text-transform: uppercase;
    padding-left: 15px !important;
    font-weight: 600 !important; //important to overwrite ".grid tbody th"
}

// Other grid components
// -------------------

.data-grid__no-results {
    padding: 20px;
    color: @color-grid-zero-state;
    border-left: 1px solid @color-border-grid;
    border-right: 1px solid @color-border-grid;
    border-bottom: 1px solid @color-border-grid;
    border-radius: 0 0 @border-radius-default @border-radius-default;
    background-color: #FFFFFF;
}

//When a table is built using div, colspan cannot be used
.data-grid__zero-state-div {
    border: 1px solid @color-border-grid;
    border-top: 0;
    padding: 20px;
    background-color: #FFFFFF;
    color: @color-grid-zero-state;
    width: 100%;
    border-radius: 0 0 5px 5px;
}

.data-grid__action-icon {
    display: block;
    height: 25px;
    width: 25px;

    margin-left: 5px;

    cursor: pointer;
}

.data-grid__action-icon--inline-delete-icon {
    vertical-align: middle;
    margin-left: 10px;
}

.data-grid__action-icon--inline-add-icon {
    vertical-align: middle;
    margin-left: 10px;
}

.data-grid__action-icon--delete {
    padding-left: 14px;
}

.data-grid__action-icon--delete-disabled {
    padding-left: 14px;

    cursor: help;
    opacity: 0.3;

    &:hover {
        cursor: help;
    }
}

.data-grid__action-icon--undelete {
    padding-left: 17px;

    .icon-undo;
}

.data-grid__load-more {
    display: flex;
    justify-content: center;
    text-align: center;
    border-top: 1px solid @color-border-grid;
}

.data-grid__load-more-tab {
    display: block;
    width: 180px;
    padding: @font-size-base * 0.5; // make the padding relative to the font-sizing for this element

    background-color: #FFFFFF;
    border: 1px solid @color-border-grid;
    border-top-color: transparent;
    border-radius: 0 0 5px 5px;

    cursor: pointer;
}

.data-grid__row--sending-email {
    .email__grid-col-sent {
        border-left: 1px solid @color-border-grid;
    }

    .email__grid-col-sent-by {
        border-right: 1px solid @color-border-grid;
    }
}

//This is to make sure grids aligns correctly, there is a "hidden" first row that helps alignment in financial grids (eg recurring transaction)
.data-grid__body .firstrow.additionalRow .quick-menu-col {
    width: 38px !important;
}

// Financial modifiers
// -------------------------------
.data-grid__cell--financial {
    display: table-cell;
    vertical-align: top;
    word-wrap: break-word;
}

.financial .grid td.accountTitle,
.financial .grid td.accountTitle:hover{
    background: @theme-grey1;
    font-weight: bold;
    border-right: 1px solid @color-border-grid;
}


//This is a temporary style that will be removed when grids are completely redone
.data-grid__header-text--old-financials,
.data-grid__header-text--old-financials:hover {
    font-weight: @font-weight-grid-header !important;
    font-size: @font-size-grid-header !important;
    color: @color-grid-header  !important;
    text-decoration: none !important;
    letter-spacing: @letter-spacing-grid-headers !important;
}

// Grid with editable inputs
// --------------------------
.data-grid__input-cell {
    vertical-align: middle;
}

.data-grid__input-cell,
.data-grid__cell--editing-cell {
    padding: 0 !important;
    .form__validation-error-wrapper {
        display: inline;
    }
}

.data-grid__cell--editing-cell-checkbox {
    padding: 0 15px !important;
    text-align: center;
}

.data-grid__cell--with-checkbox,
.data-grid__cell--header-with-checkbox {
    width: 48px;
}

.data-grid__cell--header-with-checkbox {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

// For cols with a radio and some text in header
.data-grid__header--col-has-radio {
    width: 90px;
}
// Radio buttons affected by .less input which
// sets width to 206px
.data-grid__cell--has-radio {
    input[type="radio"] {
        width: auto !important;
    }
}


// jquery.tablesorter customization
// --------------------------------
.tablesorter-header-inner { //L421 of lib always add a div wrapper
    display: inline-block;
}

//Some grid using tablesorter has a tfoot, and the library is incorrectly applying the header sort class
tfoot .data-grid__header--sorted:after {
    background: none !important;
}

// Smart-Table class customization
// --------------------------------
[st-sort] {
    cursor: pointer;
}

.data-grid__header-chevron {
    content: '';
    margin-right: 5px;
    display: inline-block;
    width: 7px;
    height: 5px;
    position: absolute;
    top: 16px;
    right: 0;
    .svgicon--icons-chevron-grid-down-black;
    z-index: @z-index-data-grid-sort-icon; //z-index to make sure it doesn't cut off by quick menu col
}

.data-grid__header--sorted.DESC, //aspx grid
.st-sort-descent {
    &:after {
        .data-grid__header-chevron;
    }

    &:hover:after {
        transform: rotate(0deg);
    }
}

.data-grid__header--sorted.ASC, //aspx grid
.st-sort-ascent {
    &:after {
        .data-grid__header-chevron;
        transform: rotate(180deg);
    }
}

// TO BE DELETED WHEN ASPX GRID IS RESTYLED AU-1004
// -------------------------------------------------
.data-grid__header-text {
    text-transform: uppercase;
    font-weight: @font-weight-grid-header;
    font-size: @font-size-grid-header;
    color: @color-grid-header;
    letter-spacing: @letter-spacing-grid-headers;
}

// CS generated grid with header within tbody (and why we should convert those pages...)
// ------------------------------------------------
.data-grid--header-in-body {
    .data-grid {
        width: auto !important;
    }

    .data-grid__row--header {
        .data-grid__cell {
            display: table-cell;
            padding: 5px 15px;
            box-sizing: border-box;
            height: 40px;
            vertical-align: middle;
            font-size: @font-size-grid-cell;
            word-wrap: break-word;
            background-color: @color-background-default;
            border-left: 1px solid @color-border-grid;
            border-top: 1px solid @color-border-grid;

            &:last-of-type {
                border-right: 1px solid @color-border-grid;
            }

            a {
                position: relative;
                span {
                    background-image: none;
                    display: inline-block;

                    &:hover:after {
                        .data-grid__header-chevron;
                        transform: rotate(180deg);
                        top: 5px;
                    }

                    &.sortDescending {
                        &:after {
                            .data-grid__header-chevron;
                            top: 5px;
                        }

                        &:hover:after {
                            .data-grid__header-chevron;
                            transform: rotate(0deg);
                            top: 5px;
                        }
                    }

                    &.sortAscending {
                        &:after {
                            .data-grid__header-chevron;
                            transform: rotate(180deg);
                            top: 5px;
                        }
                    }
                }
            }
        }
    }

    //Buildium.Enterprise.Web.Shared\Controls\GridControl.cs for class name
    .data-grid__row.gridBodyCopy,
    .data-grid__row.gridBodyCopyCream {
        td,
        .data-grid__cell {
            display: table-cell;
            padding: 5px 15px;
            box-sizing: border-box;
            height: 40px;
            vertical-align: middle;
            font-size: @font-size-grid-cell;
            word-wrap: break-word;
            background-color: #FFFFFF;
            border-left: 1px dotted @color-border-grid;
            border-top: 1px solid @color-border-grid;
            border-right: 0;

            &:first-of-type {
                border-left-style: solid;
            }

            &:last-of-type {
                border-right: 1px solid @color-border-grid;
            }
        }
        &:last-of-type {
            td,
            .data-grid__cell {
                border-bottom: 1px solid @color-border-grid;
            }
        }
    }

    .data-grid__row--zero-state {
        .data-grid__cell {
            border: 1px solid @color-border-grid;
            border-radius: 0 0 @border-radius-default @border-radius-default;
            padding: 20px;
            box-sizing: border-box;
        }
    }
}

.grid-wrap.split {
    background: white;

    border-bottom-left-radius: 5px;
    .data-grid-filters--bordered {
        border-right: none;
    }
    .data-grid-filters {
        border-radius: 0px;
    }
}