.data-grid {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overflow-x: auto;
}

table.data-grid-table {
    width: 100%;
    border-collapse: collapse;
    border: solid 1px #ccc;
    overflow: auto;
}

    table.data-grid-table thead tr th {
        background-color: #0073d8;
        color: #fff;
        border: solid 1px #aaa;
        text-align: center;
        font-size: 110%;
        vertical-align: top;
        padding: 5px 16px 5px 32px;
        position: relative;
        white-space: nowrap;
    }

        table.data-grid-table thead tr th span.data-grid-description {
            display: inline-block;
            margin-left: 2px;
            color: #ccc;
            visibility: hidden;
        }

        table.data-grid-table thead tr th span.sort-asc,
        table.data-grid-table thead tr th span.sort-desc,
        table.data-grid-table thead tr th span.group-by,
        table.data-grid-table thead tr th span.ungroup-by,
        table.data-grid-table thead tr th span.filter {
            visibility: hidden;
            position: absolute;
            z-index: 7;
            top: 6px;
            font-weight: bold;
        }

        table.data-grid-table thead tr th span.sort-asc,
        table.data-grid-table thead tr th span.sort-desc {
            left: 3px;
        }

        table.data-grid-table thead tr th span.group-by,
        table.data-grid-table thead tr th span.ungroup-by {
            left: 12px;
        }

            table.data-grid-table thead tr th span.ungroup-by span.strikeout {
                position: absolute;
                left: 1.5px;
                z-index: 8;
            }            

        table.data-grid-table thead tr th span.filter {
            right: 3px;
            font-size: 80%;
        }

        table.data-grid-table thead tr th.sort-asc span.sort-asc {
            visibility: visible;
        }

        table.data-grid-table thead tr th.sort-desc span.sort-desc {
            visibility: visible;
        }

        table.data-grid-table thead tr th.group-by:hover span.group-by {
            visibility: visible;
        }

        table.data-grid-table thead tr th.ungroup-by:hover span.ungroup-by {
            visibility: visible;
        }

        table.data-grid-table thead tr th:hover span.filter {
            visibility: visible;
        }

        table.data-grid-table thead tr th:hover span.data-grid-description {
            visibility: visible;
        }

        table.data-grid-table thead tr th.column {
            cursor: pointer;
        }

        table.data-grid-table thead tr th.groups-list {
            text-align: left;
            background-color: #008000;
            color: #fff;
        }

            table.data-grid-table thead tr th.groups-list span.removeGroup {
                color: #800000;
                cursor: pointer;
                padding: 0px 8px 0px 2px;
            }

    table.data-grid-table thead tr td,
    table.data-grid-table tfoot tr td {
        background-color: #e4e4e4;
        padding: 2px 5px;
    }

    table.data-grid-table tbody tr td {
        background-color: #fff;
        text-align: left;
        vertical-align: top;
        font-size: 90%;
        padding: 2px 5px;
    }

    table.data-grid-table tbody tr td.group-data {
        background-color: #f1fff8!important;
        font-size: 100%;
        font-weight: bold;
        cursor: pointer;
    }

        table.data-grid-table tbody tr:hover td.group-data {
            background-color: #f1fff8 !important;
        }

        table.data-grid-table tbody tr td div.align-right {
            text-align: right;
        }

    table.data-grid-table tbody tr:nth-child(2n) td {
        background-color: #fafafa;
    }

    table.data-grid-table tbody tr:hover td {
        background-color: #f0f0f0 !important;
    }

    table.data-grid-table div.data-totals {
        white-space: nowrap;
        float: left;
    }

    table.data-grid-table div.data-paging {
        white-space: nowrap;
        float: right;
    }

        table.data-grid-table div.data-paging span {
            margin-left: 5px;
            cursor: pointer;
        }

            table.data-grid-table div.data-paging span.current {
                background-color: #0073d8;
                color: #fff;
                padding: 2px 5px;
            }

/* settings modal */
#dataGridSettingsSearchSelect {
    max-height: 200px;
    width: 100%;
    max-width: 100%;
}

#dataGridSettingsModal span.input-radio {
    white-space: nowrap;
    margin-right: 16px;
    font-size: 16px;
}

    #dataGridSettingsModal span.input-radio input {
        margin-right: 4px;
    }

#dataGridSettingsSortSelect {
    max-height: 200px;
    width: 100%;
    max-width: 100%;
}

#dataGridSettingsModal .tab-pane {
    height: 280px;
}

#dataGridSettingsModal .groups-list {
    height: 240px;
    overflow-y: auto;
    border: solid 1px #999;
    padding: 2px 5px;
}