.table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 75vh;
    border: 1px solid #d9e2ec;
    border-radius: 10px;
    background: #ffffff;
}

table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #ffffff;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #2c7be5;
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
}

th,
td {
    border: 1px solid #d9e2ec;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

tbody tr:nth-child(even) {
    background: #f8fbff;
}

tbody tr:hover {
    background: #eef5ff;
}

td:first-child,
th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

thead th:first-child {
    z-index: 3;
    background: #2c7be5;
}

tbody td:first-child {
    background: #ffffff;
    font-weight: 600;
}

tbody tr:nth-child(even) td:first-child {
    background: #f8fbff;
}