.q-grid{
    position: relative;
    .ag-theme-quartz {
        outline: none;
        border: none;
        --ag-border-radius: 0px;
        --ag-wrapper-border-radius: 0px;
        --ag-header-height: 40px;
        --ag-header-foreground-color: white;
        --ag-header-background-color: #5D6A76;
        --ag-row-hover-color: #ECF0F4;
        
        // --ag-header-cell-hover-background-color: rgb(80, 40, 140);
        --ag-header-cell-moving-background-color: #5D6A76;
        .ag-root-wrapper{
            outline: none;
            border: none;
            
        }
        .ag-header{
            border-bottom: none;
            border-radius: 4px;
        }
        .ag-header-cell{
            font-size: 13px;
            color: #fff;
            border-right: 1px solid #738596;
            &:last-child{
                border: none;
            }
        }
        .ag-header-cell-label{
            justify-content: center;
        }
        .ag-header-cell-resize{
            &:after{
                display: none;
            }
        }
        .ag-row{
            border-bottom: 1px solid #ECF0F4;
            &:nth-child(2n){
                background-color: #F7F9FA;
            }
            &.important_row{
                background-color: #f5fcff;
            }
        }
        .ag-cell{
            display: flex;
            justify-content: center;
            flex-direction: column;
            font-size: 13px;
            color: #45576F;
            line-height: 1.4 !important;
            padding-top: 10px;
            padding-bottom: 10px;
            .block{
                display: block;
            }
        }
        .ag-icon-desc::before,
        .ag-icon-asc::before,
        .ag-icon-filter::before{
            color: #fff;
        }
        .ag-body-vertical-scroll{
            width: 4px !important;
            max-width: 4px !important;
            min-width: 4px !important;
            .ag-body-vertical-scroll-viewport{
                width: 4px !important;
                max-width: 4px !important;
                min-width: 4px !important;
                &::-webkit-scrollbar {
                    width: 4px;
                    background-color: transparent;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: #C1CCD7;
                }
                &::-webkit-scrollbar-track {
                    background-color: transparent;
                }
            }
        }
        .ag-body-horizontal-scroll{
            height: 4px !important;
            max-height: 4px !important;
            min-height: 4px !important;
            .ag-body-horizontal-scroll-viewport{
                height: 4px !important;
                max-height: 4px !important;
                min-height: 4px !important;
                &::-webkit-scrollbar {
                    height: 4px;
                    background-color: transparent;
                }
                &::-webkit-scrollbar-thumb {
                    background-color: #C1CCD7;
                }
                &::-webkit-scrollbar-track {
                    background-color: transparent;
                }
            }
        }
    }
    .copy-ico-wrap{
        display: flex;
        align-items: center;
        .copy_ico{
            width: 18px;
            height: 18px;
            background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
            background-size: cover;
            margin-left: 12px;
        }
    }
    &.no-cols{
        .ag-row{
            &:nth-child(2n){
                background-color: #fff;
            }
        }
    }
    .form-flex-wrap{
        display: flex;
        align-items: center;
        width: 100%;
        .grid-tip{
            margin-left: auto;
        }
    }
}

// grid-button
.grid-cell-btn{
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 100%;
    margin: 0 auto;
    .grid-btn{
        display: block;
        width: 100%;
        padding: 0 10px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border: 1px solid #94A0AD;
        border-radius: 2px;
        font-size: 13px;
        color: #94A0AD;
        font-weight: 400;
        text-align: center;
        word-break: break-all;
        span{
            display: block;
            margin-right: 5px;
            &.file{
                width: 13px;
                height: 14px;
                background: url(../../public/static/images/sub/grid-btn-file.svg)no-repeat center;
                background-size: cover;
            }
            &.excel{
                width: 14px;
                height: 13px;
                background: url(../../public/static/images/sub/grid-btn-excel.svg)no-repeat center;
                background-size: cover;
            }
        }
    }
}