.grid-container-dx {
    display: flex; /* Use flexbox to arrange items */
    flex-direction: row; /* Arrange items in a row */
    justify-content: flex-start; /* Align items to the left */
    flex-wrap: wrap; /* Allow wrapping to next line if necessary */
}

.alternate-background-color {
    background-color: #f0f0f0 !important; /* #f0f0f0;Light gray */
}

.alternate-background-color-dark {
    background-color: #526170 !important; /* ##526170;  less Dark gray */
    font-weight: bold !important;
}

.default-background-color {
    background-color: transparent;
}

.default-background-color-dark {
    background-color: #343a40 !important; /* #343a40; Dark gray */
}

@keyframes flashCell {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: yellow;
    }

    100% {
        background-color: transparent;
    }
}

[class*="flash-grid-cell-"] {
    animation: flashCell 1s ease-in-out;
}

.grid-container-dx .dx-data-grid {
    margin: 10px; /* Space between grids */
}

.dx-data-grid-wide {
    flex: 0 0 400px; /* Wider width for each grid */
}

.trade-grid-container {
    max-width:1300px
}

.dx-data-grid-narrow {
    flex: 0 0 250px; /* Narrower width for each grid */
}

.dx-data-grid {
    /*flex: 0 0 200px;  Fixed width for each grid */
    margin: 10px; /* Space between grids */
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td, .dxbl-grid .dxbl-grid-table > tbody > tr > th, .dxbl-grid .dxbl-grid-table > tfoot > tr > td, .dxbl-grid .dxbl-grid-table > tfoot > tr > th, .dxbl-grid .dxbl-grid-table > thead > tr > td, .dxbl-grid .dxbl-grid-table > thead > tr > th {
    font-family: "Roboto Mono", monospace !important;
}

.chartcontainer {
    height: 150px;
}

.gridEditor {
    clear: both; /* Clear floats */
    font-weight: 400; /* Font weight */
    text-align: inherit; /* Text alignment */
    white-space: nowrap; /* Prevent text wrapping */
    cursor: pointer; /* Cursor */
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    font-size: 0.9rem;
    font-family: "Roboto Mons", monospace !important; 
}

.gridEditor-toolTip {
    clear: both; /* Clear floats */
    font-weight: 400; /* Font weight */
    text-align: inherit; /* Text alignment */
    white-space: nowrap; /* Prevent text wrapping */
    cursor: pointer; /* Cursor */
    border: none;
    color: white;
    padding: 0 0.25rem;
    font-size: 0.7rem;
    font-family: "Roboto", sans-serif !important;
}

.dxbl-grid {
    --dxbl-grid-selection-bg: #8a969c !important;
}

.gridEditor-dark:hover, .gridEditor-dark:focus {
    background-color: #6169d0;
}

.gridEditor-dark.active, .gridEditor-dark:active {
    text-decoration: none;
    background-color: #6c757d;
}

.dxc-val-elements text {
    fill: #3498db !important;
}

.dxc-arg-elements text {
    fill: #3498db !important;
}

.gridEditor-dark {
    background-color: #343a40;
    color: #dee2e6;
    border-color: #727cf5;
}

.gridEditor-light {
    color: #343a40;
    background-color: #dee2e6;
    border-color: #727cf5;
}

.gridEditor-header {
    background-color: #727cf5 !important;
}

.gridEditor-editCell {
    font-weight: bold;
}

.gridEditor-value-negative {
    color: red;
    font-weight: bold !important;
}

.gridEditor-value-positive {
    color: #0acf97;
    font-weight: bold !important;
}