.grid-custom-toolbar-new {
    background-image: url("../../../images/grid-icons/Ic_Plus.png");
    /* background-image: url("../images/grid-icons/plus-svgrepo-com.svg"); */
    /* background-image: url("../images/grid-icons/plus.png"); */
}

.grid-custom-toolbar-edit {
    background-image: url("../../../images/grid-icons/Ic_Edit.png");
    /* background-image: url("../images/grid-icons/edit-pen-sheet-write-svgrepo-com.svg"); */
    /* background-image: url("../images/grid-icons/edit.png"); */
}

.grid-custom-toolbar-delete {
    background-image: url("../../../images/grid-icons/Ic_Delete.png");
    /* background-image: url("../images/grid-icons/trash-recycle-bin-svgrepo-com.svg"); */
    /* background-image: url("../images/grid-icons/delete.jpeg"); */
}

.grid-custom-remove-product {
    background-image: url("../../../images/grid-icons/Remove_Product.png");
}

.grid-custom-toolbar-import {
    background-image: url("../../../images/grid-icons/Ic_import.png");
    /* background-image: url("../images/grid-icons/export-content-svgrepo-com.svg"); */
    /* background-image: url("../images/grid-icons/export.png"); */
}

.grid-custom-toolbar-export {
    background-image: url("../../../images/grid-icons/Ic_Export.png");
    /* background-image: url("../images/grid-icons/export-content-svgrepo-com.svg"); */
    /* background-image: url("../images/grid-icons/export.png"); */
}

.grid-custom-toolbar-open-ai {
    background-image: url("../../../images/grid-icons/open-ai.jpg");
}

.grid-custom-toolbar-new, .grid-custom-toolbar-edit, .grid-custom-toolbar-delete, .grid-custom-remove-product, .grid-custom-toolbar-import, .grid-custom-toolbar-export, .grid-custom-toolbar-open-ai {
    width: 36px; /* Set your desired width */
    height: 36px; /* Set your desired height */
    background-size: cover; /* Ensure the image covers the full area */
    background-repeat: no-repeat; /* Prevent repeating the image */
    background-position: center; /* Center the image */
}

/* Style for the grid header */
.custom-grid-header .dx-header {
    /* background-color: #003366; /* Dark blue background */
    background-color: #0f70b7 !important;
    color: white; /* White text color */
}

    /* Style for header cell text */
    .custom-grid-header .dx-header .dx-header-cell {
        font-weight: bold; /* Bold text for header cells */
        font-size: 15px; /* Adjust font size if needed */
    }

        /* Optional: Change the hover color for header cells */
        .custom-grid-header .dx-header .dx-header-cell:hover {
            background-color: #00509e; /* Lighter blue on hover */
        }

.alt-item {
    background-color: #eefdff; /* very light blue */
}

/* Add hover effect and cursor change for DxGrid rows */
.dxbl-grid-table tr:hover {
    background-color: #f5f5f5; /* Light grey background on hover */
    cursor: pointer; /* Change cursor to pointer on hover */
}

/* Dark Mode */
.dark-mode .dxbl-grid-table tr:hover {
    background-color: #333333; /* Dark grey background for dark mode */
}

/* Custom CSS for making buttons large and circular */
.custom-toolbar .btn {
    border-radius: 50%; /* Circle shape */
    width: 20px; /* Adjust button size */
    height: 30px; /* Adjust button size */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px; /* Adjust icon size */
}

.custom-toolbar .large-button {
    font-size: 24px; /* Make icons larger */
}

.custom-toolbar .green {
    background-color: #28a745;
    color: white;
}

.custom-toolbar .purple {
    background-color: #6f42c1;
    color: white;
}

.custom-toolbar .red {
    background-color: #dc3545;
    color: white;
}

/* Optional: Disable hover effect */
.custom-toolbar .btn:hover {
    opacity: 1; /* Ensure no change on hover */
}

.grid-buttons-custom-font {
    font-weight: bold;
    font-size: 15px;
    font-family: Arial, sans-serif;
}

.grid-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px); /* Adjust based on other fixed-height elements like toolbars */
    overflow: hidden; /* Prevent grid overflow outside the container */
}

.grid-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main-grid {
    flex: 1; /* takes remaining space below toolbar */
    min-height: 200px;
    overflow: auto;
}

/*.main-grid {
    flex: 1;
    overflow-y: auto;*/ /* Enable vertical scrolling inside the grid */
/*}*/

/* Custom styles for the focused row */
.dxbl-grid-focused-row {
    background-color: #b70f7d !important;
    color: white !important;
}
/*.dxbl-grid-focused-row {
    background-color: #0f70b7 !important;
    color: white !important;
}*/



/* Prevent header text from wrapping and make sure it fits */
/*.dxbl-grid-header {
    white-space: nowrap !important;*/ /* Prevent wrapping */
/*overflow: hidden !important;*/ /* Hide overflowed text */
/*text-overflow: ellipsis !important;*/ /* Add ellipsis if text is too long */
/*}*/