::-webkit-scrollbar {
    height: 10px;
    width: 5px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--theme-color);
    -webkit-border-radius: 1ex;

}

/* button css */

:root {
    --bg-color-h: 213;
    --bg-color-s: 64%;
    --bg-color-l: 40%;
    --bg-alpha: 0.1;
    --c-bg: hsl(var(--bg-color-h), var(--bg-color-s), 95%);
    --c-bg-opaque: hsl(var(--bg-color-h) calc(100% - 10%) 43% / 0.05);
}

.glass-effect,
.glass-effect:focus {
    background: var(--c-bg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    /* Apply blur effect */
    -webkit-backdrop-filter: blur(10px);
    /* For Safari support */
    color: var(--theme-color) !important;
    /* Text color */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px !important;
}

.glass-effect:hover {
    border-radius: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* button css end */

/* header */
.documentIngestionContainer .documentIngestionHeader {
    font-size: 23px;
    font-weight: bold;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
}

/* header-end */

.documentIngestionContainer {
    margin-top: 50px;
    height: 82vh;
    overflow: auto;
    justify-content: center;
    flex-direction: column;
    padding: 0 20px;
}

#documentChunkingContainer .ag-root-wrapper.ag-layout-normal,
#documentLoaderContainer .ag-root-wrapper.ag-layout-normal,
#embeddingContainer .ag-root-wrapper.ag-layout-normal,
#vectorStoreContainer .ag-root-wrapper.ag-layout-normal,
#fileStatusContainer .ag-root-wrapper.ag-layout-normal {
    /* height: 89% !important; */
}


#documentChunkingContainer,
#documentLoaderContainer,
#embeddingContainer,
#vectorStoreContainer,
#fileStatusContainer {
    height: 355px;
    margin: 0 auto;
    overflow: auto;
}

div#document_loader h2,
div#document_chunking h2,
div#embedding h2,
div#vector_store h2 {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.ag-ltr .ag-cell {
    display: flex;
    align-items: center;
}

.ag-ltr .ag-cell span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #666;
    font-weight: 500;
}

#document_loader .ag-header-cell-text,
#document_chunking .ag-header-cell-text,
#embedding .ag-header-cell-text,
#vector_store .ag-header-cell-text,
#fileStatusContainer .ag-header-cell-text {
    cursor: pointer;
    color: #666;
    font-weight: bold;
}

#selectModelHeader {
    font-weight: 500;
}

select#documentModel {
    width: 250px;

}

select#documentModel:focus {
    background-color: #fff;
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
    color: #495057;
    outline: 0;
}

.selectDocumentModel label {
    font-size: 16px;
    color: #666;
    font-weight: 500;
    padding-left: 5px;
}

.selectDocumentModel {
    display: flex;
    flex-direction: column;
}

/* search filter */
#selectModel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.documentIngestionContainer #documentModel,
.documentIngestionContainer #quickFilterInput {
    padding: 5px;
    width: 300px;
    border-radius: 5px;
    border: 2px solid #8d8d8d75;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;; */
    margin: 0;
    margin-left: 5px;
    height: 35px;
}

.documentIngestionContainer #quickFilterInput:focus {
    background-color: #fff;
    border-color: #80bdff;
    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0.25);
    color: #495057;
    outline: 0;
}

.search-container #searchBtn {
    padding: 3px;
    height: 34px;
    width: 40px;
    margin-left: -7px;
    border-radius: 0 5px 5px 0px;
    border: none;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;; */
    cursor: pointer;
    background-color: var(--theme-color);
    color: #fff;
}

.documentIngestionContainer .ag-root-wrapper.ag-layout-normal {
    height: 350px !important;
}

/* search filter-end */

.contentDiv {
    width: 50%;
    gap: 10px;
    margin: 5px;
}

.documentHeader {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: capitalize;
    color: #666;
    font-weight: 600;
    font-size: 16px;
    width: calc(100% - 34px);
}

.emptyContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    height: 355px !important;
}

#documentChunkingContainer .ag-root-wrapper.ag-layout-normal,
#documentLoaderContainer .ag-root-wrapper.ag-layout-normal,
#embeddingContainer .ag-root-wrapper.ag-layout-normal,
#vectorStoreContainer .ag-root-wrapper.ag-layout-normal,
#fileStatusContainer .ag-root-wrapper.ag-layout-normal {
    height: 100% !important;
    width: 100% !important;
}

#documentLoaderContainer .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
#documentChunkingContainer .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
#embeddingContainer .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
#vectorStoreContainer .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within,
#fileStatusContainer .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
    border-color: none;
    border-style: none;
}

#documentLoaderContainer .ag-row-selected::before,
#documentChunkingContainer .ag-row-selected::before,
#embeddingContainer .ag-row-selected::before,
#vectorStoreContainer .ag-row-selected::before,
#fileStatusContainer .ag-row-selected::before {
    background-color: unset !important;
}


/* AG Grid overlays that block selection must be reset */
#documentLoaderContainer .ag-root-wrapper,
#documentLoaderContainer .ag-root,
#documentLoaderContainer .ag-center-cols-container #documentChunkingContainer .ag-root-wrapper,
#documentChunkingContainer .ag-root,
#documentChunkingContainer .ag-center-cols-container #embeddingContainer .ag-root-wrapper,
#embeddingContainer .ag-root,
#embeddingContainer .ag-center-cols-container #vectorStoreContainer .ag-root-wrapper,
#vectorStoreContainer .ag-root,
#vectorStoreContainer .ag-center-cols-container #fileStatusContainer .ag-root-wrapper,
#fileStatusContainer .ag-root,
#fileStatusContainer .ag-center-cols-container {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}