.modern-table {
    display: grid; /* This is a (hacky) way to make the .grid element size to fit its content */
    overflow: auto;
    height: 650px;
    width: 100%;
}

.modern-table .grid {
    display: flex;
    flex-wrap: nowrap;
}
    
.modern-table .grid-col {

}
.grid-item--header {
    z-index: 100;
}
.modern-table .grid-col:first-of-type {
    font-weight: bold;
}

.modern-table .grid-col:first-of-type .grid-item--header {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,1);
}

.modern-table .grid-col--fixed-left  {
    position: sticky;
    left: 0;
    background: white;
}

.modern-table .grid-col--fixed-right {
    position: sticky;
    right: 0;
    z-index: 100;
    background: white;
}

.modern-table .grid-item {
    height: 50px;
    padding: 13px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.modern-table .grid-item:not(:last-of-type) {
    border-bottom: 1px solid gray;
}

.modern-table .grid-item--header {
    height: 50px;
    padding: 13px;
    position: sticky;
    position: -webkit-sticky;
    background: white;
    top: 0;
    font-weight: bold;
    background-color: #40C4FF;
    border-bottom: none;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
}

.modern-table .grid-item--header.active {
    border-bottom: 4px solid #F57C00;
}