/* =========================================================
   Sticky Grid CSS
   Usage:
   <div class="table-responsive sticky-grid sticky-grid-md">
   ========================================================= */

/* Main Container */
.sticky-grid {
    position: relative;
    overflow: auto;
    width: 100%;
    max-height: 50vh;
}

/* Height Variants */
.sticky-grid-sm {
    max-height: 40vh !important;
}

.sticky-grid-md {
    max-height: 60vh !important;
}

.sticky-grid-lg {
    max-height: 80vh !important;
}

/* Sticky Header */
.sticky-grid table thead th,
.sticky-grid table th {
    position: sticky;
    top: -1px;
    z-index: 100;
    background: #438eb9 !important;
    color: #ffffff !important;
    white-space: nowrap;
    font-weight: 100;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* Table Improvements */
.sticky-grid table {
    margin-bottom: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

    .sticky-grid table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Optional Zebra Hover */
    .sticky-grid table tbody tr:hover {
        background-color: #f5f9fc;
    }

/* Scrollbar Styling */
.sticky-grid::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.sticky-grid::-webkit-scrollbar-thumb {
    background: #b5b5b5;
    border-radius: 10px;
}

.sticky-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
}