.grid-table  {
    .grid-body {
        display: flex;
        flex-direction: row;
        overflow-y: scroll;
        background: #f5f6f7;
        .grid-row {
            position: absolute;
            border-bottom: 1px solid #f2f3f4;
            background-color: #fff;
            &.row-odd {
                background: #fcfcfc;
            }
            &:hover {
                background-color: rgba(33, 150, 243, 0.02);
            }
            .body-row-container {
                height: 100%;
                width: 100%;
            }
            transition: transform 0.4s, top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s,
                -webkit-transform 0.4s;
        }
        .grid-panel {
            &.pin-left {
                z-index: 1;
                box-shadow: rgba(0, 0, 0, 0.05) 4px 0 4px, rgb(230, 230, 229) 0 0 0;
                .grid-row {
                    .grid-cell {
                        &:last-child {
                            border-right: 1px solid #f2f3f4;
                        }
                    }
                }
            }
            &.scroll {
                -webkit-box-flex: 1;
                flex: 1 1 auto;
                overflow: hidden;
                position: relative;
                .scroll-content-box {
                    overflow-x: scroll;
                    overflow-y: hidden;
                    .scroll-content {
                        position: relative;
                        .header-group-inner {
                            height: 100%;
                        }
                    }
                }
            }
            &.pin-right {
                z-index: 1;
                box-shadow: rgba(0, 0, 0, 0.05) -4px 0 4px, rgb(230, 230, 229) 0 0 0;
                .grid-row {
                    .grid-cell {
                        &:first-child {
                            border-left: 1px solid #f2f3f4;
                        }
                    }
                }
            }
        }
    }
}