/* Shared viewport layout for the Title Search and Customer Search grids. */
html.search-grid-viewport,
body.search-grid-viewport {
    height: 100%;
    overflow: hidden !important;
}

    body.search-grid-viewport #wrap,
    body.search-grid-viewport #content,
    body.search-grid-viewport #content > .inner,
    body.search-grid-viewport #content > .inner > form {
        max-width: 100%;
        overflow: hidden !important;
    }

.search-grid-page {
    box-sizing: border-box;
    width: 100%;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
}

.search-grid-filters {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

    .search-grid-filters > .row {
        height: auto;
    }

    .search-grid-filters .form-control,
    .search-grid-filters .k-widget {
        max-width: 100%;
    }

.search-grid-page #GridId1 {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-left: 0 !important;
    overflow: hidden;
}

.search-grid-page #Grid.stable-search-grid {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #c9d2dc;
    background: #fff;
}

.search-grid-page #Grid .k-grid-header {
    background: #e8edf3;
    border-bottom: 1px solid #aeb9c5;
}

    .search-grid-page #Grid .k-grid-header th.k-header {
        box-sizing: border-box;
        padding: 7px 8px;
        color: #263746;
        background: #e8edf3;
        border-color: #c9d2dc;
        font-size: 11px;
        font-weight: 700 !important;
        line-height: 16px;
        vertical-align: middle;
        white-space: normal;
    }

.search-grid-page #Grid .k-grid-content {
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-color: #8b949e #eef1f4;
    scrollbar-width: auto;
    background: #fff;
}

    .search-grid-page #Grid .k-grid-content::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .search-grid-page #Grid .k-grid-content::-webkit-scrollbar-track {
        background: #eef1f4;
    }

    .search-grid-page #Grid .k-grid-content::-webkit-scrollbar-thumb {
        background-color: #8b949e !important;
        border: 2px solid #eef1f4;
        border-radius: 6px;
    }

        .search-grid-page #Grid .k-grid-content::-webkit-scrollbar-thumb:hover {
            background-color: #6f7882 !important;
        }

    .search-grid-page #Grid .k-grid-content table,
    .search-grid-page #Grid .k-grid-header-wrap table {
        border-collapse: separate;
        border-spacing: 0;
    }

.search-grid-page #Grid tbody tr {
    height: 30px !important;
    color: #202b33;
}

    .search-grid-page #Grid tbody tr:nth-child(odd) td {
        background-color: #fff;
    }

    .search-grid-page #Grid tbody tr:nth-child(even) td {
        background-color: #f7f9fb;
    }

    .search-grid-page #Grid tbody tr:hover td {
        background-color: #eaf3fb;
    }

    .search-grid-page #Grid tbody tr.k-state-selected td,
    .search-grid-page #Grid tbody tr.k-state-selected:hover td {
        background-color: #d9ebfa;
        color: #172b3a;
    }

/* Columns carrying a max-Width (customer name, address, remarks) would wrap onto
   several lines and drag the whole row's height up with them. */
.search-grid-page #Grid td {
    box-sizing: border-box;
    padding: 6px 8px;
    border-color: #dde3e8;
    font-size: 11px;
    line-height: 16px;
    vertical-align: middle;
    white-space: nowrap;
}

.search-grid-page #Grid .search-grid-pinned {
    position: sticky;
    left: 0;
    z-index: 3;
    border-right: 1px solid #aeb9c5;
    box-shadow: 2px 0 3px rgba(42, 58, 72, .08);
}

.search-grid-page #Grid .k-grid-header .search-grid-pinned {
    z-index: 5;
    background: #dce5ee;
}

.search-grid-page #Grid .k-pager-wrap {
    position: relative;
    z-index: 6;
    box-sizing: border-box;
    min-height: 42px;
    border-top: 5px solid #fff;
    box-shadow: inset 0 1px 0 #aeb9c5;
    background: #f2f5f8;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .search-grid-page #Grid .k-pager-info {
        float: none;
        display: inline-block;
    }
}

@media (max-height: 650px) {
    .search-grid-page #Grid tbody tr {
        height: 27px !important;
    }

    .search-grid-page #Grid td,
    .search-grid-page #Grid .k-grid-header th.k-header {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}