.custom-chart-legend {
    display: flex;
    flex-wrap: wrap; /* This is the key property that makes items wrap to the next line */
    justify-content: center; /* Centers the items horizontally */
    gap: 1rem; /* Creates space between items */
    margin-bottom: 1rem; /* Adds space between the legend and the chart */
    padding: 0 0.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
}

.legend-marker {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 6px;
    flex-shrink: 0; /* Prevents the marker from shrinking */
}

.legend-label {
    color: var(--bs-gray-400);
    font-family: "Roboto Mono", monospace !important;
}

.ticket-description-body {
    font-size: 1rem; /* Make the main description slightly larger than metadata */
    line-height: 1.6;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.1); /* A subtle background to contain it */
    border-radius: 0.25rem;
}

.pnl-total-cell {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.05); /* A light grey background */
}


.move-target-switch {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    /* Use a semi-transparent version of the Info color for the border */
    border: 1px solid rgba(57, 175, 209, 0.4); /* #39afd1 with 40% opacity */
    background-color: rgba(57, 175, 209, 0.1); /* #39afd1 with 10% opacity for a very light tint */
    margin-top: 1rem;
}

.text-event {
    font-size: 0.8rem;
    font-family: "Roboto Mono", monospace !important;
}

.move-target-option {
    flex: 1; /* Each option takes up equal space */
    padding: 0.75rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-right: 1px solid rgba(57, 175, 209, 0.4);
    color: var(--bs-body-color); /* Use the default text color for good contrast on the light background */
}

.move-target-option:last-child {
    border-right: none;
}

.move-target-option:not(.active):hover {
    background-color: rgba(57, 175, 209, 0.2); /* A slightly darker tint of the Info color on hover */
}

.move-target-option.active {
    /* Use the Primary color for the active state */
    background-color: #727cf5; /* ColorPalette.Primary */
    color: #ffffff; /* ColorPalette.White */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.move-target-option.active small {
    /* Use a light gray for the sub-heading in the active state for subtle contrast */
    color: #eef2f7; /* ColorPalette.Light or Gray200 */
}

.move-target-option small {
    font-size: 0.8rem;
    color: #6c757d; /* ColorPalette.Secondary or Gray700 */
    transition: color 0.2s ease-in-out;
}

.seamless-input-group .dx-texteditor {
    /* Remove the rounded corners on the right side of the input */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.seamless-input-group .input-group-text {
    /* Remove the left border to blend with the input */
    border-left: 0;
}

.trade-details-flyout-header {
    display: flex !important; /* Use flex to ensure proper alignment */
    padding: 0.5rem 0.75rem !important; /* Restore some default padding */
    background-color: #404954 !important;
    color: white !important;
    font-size: 0.8rem;
    font-family: "Roboto Mono", monospace !important;
}

/* Ensure the spin buttons don't have a conflicting border */
.seamless-input-group .dx-spin-btn {
    border-left: 1px solid #dee2e6; /* Adjust color to match theme */
}

.form-grid {
    display: grid;
    grid-template-columns: auto 250px; /* Column 1 for labels, Column 2 for inputs */
    gap: 1rem; /* Space between rows */
    align-items: center; /* Vertically align label and input */
}

/* Optional: Right-align the text in the labels */
.form-grid > label {
    justify-self: end;
    font-weight: bold;
}


.fs-small-stats {
    font-size: 0.8rem; /* Even smaller font for stats */
    line-height: 1.3;
}

.stats-dl dt, .stats-dl dd {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    margin-bottom: 0;
    white-space: nowrap; /* Prevent terms from wrapping too much */
}

.small-stat-term {
    text-overflow: ellipsis;
    overflow: hidden;
}

.small-stat-value {
    text-align: right; /* Align values to the right */
}

/* If using the list for latency by source */
.fs-small-stats .small {
    font-size: 0.9em; /* Make the list items slightly smaller than the main stats font */
}

.fs-small-stats ul.list-unstyled li {
    padding-bottom: 0;
    line-height: 1.2;
}


.highlighted-history-row {
    background-color: #fff3cd !important; /* A light yellow, similar to Bootstrap's .table-warning */
    font-weight: bold;
    /* Add outline or border if desired */
    outline: 2px solid #ffc107; 
}

/* Optional: More specific styling if needed, e.g., for dark mode */
[data-bs-theme="dark"] .highlighted-history-row {
    background-color: #665d3c; /* A darker yellow/gold for dark themes */
    color: #fff; /* Ensure text is readable */
}

.muted-text {
    color: #777; /* A grey color */
    opacity: 0.7; /* Slightly transparent */
    /* You could also add: */
    font-style: italic; 
}

.text-as-link {
    color: var(--bs-link-color, #0d6efd); /* Standard link color, or your theme's link color */
    text-decoration: underline !important;
    cursor: pointer;
    background: none; /* Ensure no button-like background */
    border: none; /* Ensure no button-like border */
    padding: 0; /* Ensure no button-like padding */
    display: inline; /* Behaves like text within the flow */
}

.text-as-link:hover {
    color: var(--bs-link-hover-color, #0a58ca); /* Standard link hover color */
    text-decoration: underline; /* Keep underline on hover, or remove if preferred */
}

/*
  Example CSS for .grid-compact
  You'll likely need to inspect the rendered HTML of your DxGrid
  to target the correct inner elements (e.g., .dxbs-grid-cell, .dxbs-header-cell)
  if you are using DevExpress Blazor components.
*/

.action-icon-button .material-icons {
    font-size: 1.2rem; /* Adjust size as needed */
    vertical-align: middle;
}

.action-icon-button {
    padding: 0.25rem 0.35rem; /* Give a little clickable area */
    line-height: 1; /* Ensure icon is centered if button has height */
}

.allocation-percentage-badge {
    font-size: 0.85em; /* Slightly larger than default badge text, adjust as needed */
    padding: 0.4em 0.65em; /* More padding */
    min-width: 60px; /* Ensure it has some minimum width for readability */
    text-align: center;
}

Use code with caution
/* General approach for a custom table */
.grid-compact th,
.grid-compact td {
    padding-top: 0.25rem; /* Reduce top padding */
    padding-bottom: 0.25rem; /* Reduce bottom padding */
    padding-left: 0.5rem; /* Adjust left/right padding as needed */
    padding-right: 0.5rem;
    font-size: 0.875em; /* Optionally, slightly smaller font */
    line-height: 1.2; /* Adjust line height for tighter rows */
}

.grid-compact thead th {
    /* Specific styles for header cells if needed */
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/*
  More specific targeting if using DevExpress Blazor (DxGrid)
  The exact class names might vary slightly based on DxGrid version or theme.
  Use your browser's developer tools to inspect the rendered grid and find the correct classes.
*/

/* Target data cells in DxGrid */
.grid-compact .dxbs-grid-cell,
.grid-compact .dxbs-grid-table td { /* .dxbs-grid-table td is a common fallback/actual cell element */
    padding-top: 0.25rem !important; /* Use !important cautiously, only if needed to override default Dx styles */
    padding-bottom: 0.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.85em !important; /* e.g., 12px if base is ~14px */
    line-height: 1.3 !important;
}

/* Target header cells in DxGrid */
.grid-compact .dxbs-header-cell,
.grid-compact .dxbs-grid-table th { /* .dxbs-grid-table th is common */
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.875em !important;
    line-height: 1.4 !important;
}

/* If the DxGrid has specific row elements you want to make more compact */
.grid-compact .dxbs-grid-row {
    /* You might not need to style the row directly if cell padding is sufficient */
}

/* If there are icons or other elements within cells that add too much space */
.grid-compact .dxbs-grid-cell .some-icon-class {
    margin: 0.1rem; /* Reduce margins around icons */
}

.text-link {
    color: var(--bs-link-color); /* Use Bootstrap's link color variable for consistency */
    text-decoration: none; /* Or 'underline' if you always want it underlined */
    cursor: pointer;
}

.text-link:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}


.clone-modal-fieldset {
    padding: 1rem; /* Adjust as needed */
    border: 1px solid #454d55; /* Match your theme's border color */
    border-radius: 0.25rem;
    margin-bottom: 1rem;
}

.clone-modal-fieldset legend {
    padding: 0.2em 0.5em; /* Give legend some breathing room */
    font-size: 0.9rem; /* Adjust size */
    font-weight: bold;
    width: auto; /* Important for legend to not take full width */
    float: none; /* Override Bootstrap's float if it's causing issues */
    margin-bottom: 0.5rem; /* Space below legend before content */
    /* To align legend with the content inside the fieldset if needed */
    /* margin-left: -0.5em; /* Adjust if legend content is indented */
}

.clone-modal-fieldset .row {
    /* Ensure rows inside fieldset don't have conflicting margins */
    margin-left: 0;
    margin-right: 0;
}

.clone-modal-fieldset .col-sm-10 { /* Or whatever col class you use for radio content */
    padding-left: 0.5rem; /* Add some padding to align with typical form layouts */
}


.fee-detail-container {
    padding: 15px;
    background-color: #2b3035; /* Dark background */
    color: #e0e0e0; /* Light text */
    border-top: 1px solid #444;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
}

.fee-detail-header {
    display: flex;
    justify-content: space-between; /* Pushes title/costtype left, rate right */
    align-items: center; /* Vertically align items in the header */
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #4a5056; /* Slightly adjusted border color */
}

.fee-detail-main-title {
    font-size: 1.1em; /* Make it slightly larger */
    color: #61dafb; /* A highlight color for the main title part */
    margin: 0; /* Remove default h5 margin */
    font-weight: bold;
}

.fee-detail-costtype-header {
    font-size: 0.95em; /* Relative to main title */
    color: #bdbdbd; /* Slightly dimmer than main title */
    margin-left: 8px;
    font-weight: normal;
}

.fee-detail-rate-prominent {
    display: flex;
    align-items: baseline; /* Aligns "Rate:" text with the value baseline */
    text-align: right;
}

.fee-detail-rate-label {
    font-weight: bold;
    color: #9e9e9e; /* Label color from your original screenshot */
    margin-right: 8px;
    font-size: 0.9em; /* Slightly smaller label */
}

.fee-detail-rate-value {
    font-size: 1.15em; /* Make rate value prominent */
    font-weight: bold;
    color: #80cbc4; /* A distinct highlight color for rate, tealish */
}

/* fee-detail-title is no longer used directly, styles moved to fee-detail-main-title and fee-detail-header */

.fee-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr; /* Label and value */
    gap: 6px 12px; /* Row gap, Column gap */
    align-items: start;
}

.fee-detail-label {
    font-weight: bold;
    color: #9e9e9e; /* Slightly lighter grey for labels */
    text-align: right;
    padding-right: 10px;
}

.fee-detail-value {
    word-break: break-all; /* Prevent long strings from breaking layout */
    color: #e0e0e0;
}

.detail-row-info.detail-row-light {
    background-color: #f8f9fa; /* Bootstrap's gray-100 or var(--bs-gray-100) */
    color: #212529; /* Standard dark text */
    border-top: 1px solid #dee2e6; /* Optional: subtle top border like grid cells */
    border-bottom: 1px solid #dee2e6; /* Optional: subtle bottom border */
}

.detail-row-info.detail-row-dark {
    background-color: #2c2c2c; /* Adjust this to match your dark theme's secondary background */
    color: #adb5bd; /* A lighter gray for text, adjust for contrast */
    border-top: 1px solid #495057; /* Optional: subtle top border for dark theme */
    border-bottom: 1px solid #495057; /* Optional: subtle bottom border */
}

/* Styles specific to Login.razor - or move to a Login.razor.css file */

.login-page-wrapper {
    min-height: 100vh; /* Full viewport height */
    display: flex; /* For centering the account-pages content */
    flex-direction: column;
    justify-content: center; /* Vertically center */
}

.small-curve-icon {
    font-size: 1.5rem;
}

.loggedin-now {
    background-color: #28a745 !important;
    color: white !important;
}

.card.login-card {
    /* display: block; /* Usually default for card, but can be explicit */
    /* position: relative; /* Good for child absolute positioning if ever needed */
}

div.login-card-header {
    background-color: #1281c4; /* #0078A0; */
    /* --- ADJUST THIS FOR OVERALL TEAL BAR HEIGHT --- */
    height: 120px; /* CURRENT VALUE.
                                     If there's too much teal above/below the logo's square,
                                     try reducing this to 95px, 90px, or 85px.
                                     If you want the logo even TALLER, you might need to increase this. */

    padding-left: 0.15rem; /* << TRY REDUCING for less space on sides (e.g., 0.25rem or 0.15rem) */
    padding-right: 0.15rem; /* << TRY REDUCING */

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

div.login-card-header a {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 100%;
    /* To allow the image to truly dictate the width up to its max-width within the link: */
    width: 100%; /* << CHANGE: Let the link try to use the full padded width of the header */
}



div.login-card-header img.login-logo-img {
    display: block;
    max-height: 100%;
    max-width: 70%; /* << THIS IS THE ONE
                            If you want less teal on the sides of the logo's square,
                            try increasing this to 98% or even 100% (if padding on header is enough).
                            If it feels too wide, reduce to 90%. */
    width: auto;
    height: auto;
    object-fit: contain;
}

div.card-body {
    padding: 1.5rem; /* Or your Bootstrap p-4 etc. */
    /* background-color: #your_form_background_color; */ /* Ensure this is set if not default */
}

/* Adjustments for smaller screens */
@media (max-width: 576px) {
    .account-pages {
        padding-top: 1rem !important; /* Reduce top/bottom padding on small screens */
        padding-bottom: 1rem !important;
    }

    .login-card-header img {
        max-height: 40px; /* Smaller logo on mobile */
    }

    .login-card .card-body {
        padding: 1.5rem !important; /* Reduce card padding on mobile */
    }

    .login-card .text-center.w-75 { /* Make intro text take more width */
        width: 90% !important;
    }
}
.entity-dropdown-container {
    /* display: flex; (already set in .razor) */
    /* align-items: center; (already set in .razor) */
    flex-wrap: nowrap; /* Prevents label and dropdown from wrapping onto new lines *within* this component */
    width: 100%;
}

.entity-dropdown-label {
    white-space: nowrap;
    font-weight: 500;
    margin-right: 0.5rem; /* me-2 equivalent */
}

.entity-dropdown-control {
    /* flex-grow: 1; (already set in .razor) */
    flex-grow: 1; /* Allows this div to take up remaining space */
    display: flex; /* Make this a flex container */
    justify-content: flex-end; /* Align its child (the dropdown div) to the right */
    max-width:290px;
}

.entity-dropdown-control-wide {
    /* flex-grow: 1; (already set in .razor) */
    flex-grow: 1; /* Allows this div to take up remaining space */
    display: flex; /* Make this a flex container */
    justify-content: flex-end; /* Align its child (the dropdown div) to the right */
    width: 290px !important;
    
}

.entity-dropdown-clear-btn-abs {
    position: absolute;
    right: 2.5rem; /* Adjust based on dropdown arrow width */
    top: 50%;
    transform: translateY(-50%);
    padding: 0.1rem 0.3rem; /* Smaller padding */
    line-height: 1;
    border: none; /* Optional: remove border for a cleaner look */
    background-color: transparent; /* Optional */
    color: #8a969c; /* Match secondary button text or choose a suitable color */
    z-index: 5; /* Ensure it's above the main button's text */
}

.entity-dropdown-clear-btn-abs:hover {
    color: #343a40; /* Darker on hover */
}

/* Ensure the main button has enough padding for the clear button not to overlap text too much */
.btn.dropdown-toggle.text-truncate {
    /* padding-right: 2.5rem; /* Already added inline, but can be here if ButtonCssClass doesn't override */
}


.entity-dropdown-validation {
    font-size: 0.875em;
    flex-shrink: 0;
    /* If you want validation below, you might need to adjust the parent flex direction on small screens */
}

.entity-dropdown-control .dropdown .btn {
    /* If you want the button to have a max-width or specific width */
    max-width: 250px; /* Example: Adjust as needed */
    /* width: 100%; /* If you want it to fill the .entity-dropdown-control up to its max-width */
}


/* Target the dropdown button specifically within this component */
/* If your button has a unique class like 'entity-dropdown-menu-toggle', use that for more specificity */
.entity-dropdown-menu-toggle btn.dropdown-toggle { /* Or use a more general .btn.dropdown-toggle if you want all dropdowns in this component styled this way */
    min-height: calc(1.5em + .75rem + 2px); /* Matches default Bootstrap form-control height */
    /* Ensure vertical alignment if text is shorter than the button height */
    display: flex; /* Optional: for better internal alignment if you have icons etc. */
    align-items: center; /* Optional: vertically center text/icons */
    width: 100%; /* Make it take the full width of its col-md-8 parent */
    text-align: left; /* Align selected text to the left */
    justify-content: space-between; /* Pushes caret to the right */
    max-width: 300px;
}

.entity-dropdown-button-wrapper .entity-dropdown-menu-toggle {
    /* min-height, display, align-items, text-align, justify-content as above */
    width: auto; /* Let it size to content */
    min-width: 180px; /* Example minimum */
    max-width: 300px; /* Example maximum, ADJUSt THIS! */
    /* By setting width to auto and then constraining with min/max,
       it will try to fit content but not exceed max-width.
       It will still be pushed to the right by justify-content-end on its parent.
    */
}


/* Added for index.html*/
/* Style the container of the menu items */
.menu-items {
    display: flex; /* Make sure it's a flex container */
    align-items: baseline; /* Align items based on their text baseline */
    list-style: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default browser padding */
    margin-bottom: 0; /* Remove default browser margin */
    /* Add any other existing styles for .menu-items */
}

/* Ensure list items themselves don't add extra space */
.menu-items li {
    margin-bottom: 0;
}

/* below 3 for hourly position razor */
.text-negative {
    color: red;
    font-weight: bold;
}

.text-positive {
    color: rgb(10, 207, 151);
    font-weight: bold;
}

.custom-totals-summary {
    padding: 10px;
    border-top: 1px solid #ccc; /* Optional: visual separator */
}

.sized-input-control {
    max-width: 250px;
}

.description-text p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.description-text ul {
    padding-left: 1.2rem;
    list-style-type: disc;
}

/* Styling for the Number Span itself inside the total cell */
.total-number-span { /* New class or reuse/rename total-column-cell */
    font-weight: bold;
    padding: 0 4px; /* Padding around the number */
    /* Text color will be inherited or set on the wrapper */
    /* No background here */
    display: inline-block; /* Behave nicely as a flex item */
    vertical-align: middle;
}

/* Add specific styling for negative numbers if needed */
.total-number-span.negative-value-ontotal {
    color: red; /* Or your negative color */
}

/* Styling for the Flex Wrapper DIV (which now fills the cell) */
.total-cell-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align content to the right */
    width: 100%;
    height: 100%;
    background-color: black; /* Cell background */
    color: white; /* Default text color for content */
    box-sizing: border-box; /* Include padding in width/height */
    /* Optional: Add padding to the whole cell content if desired */
    /* padding: 0 4px; */
}

.actual-mapped-grid-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: black; /* Cell background */
    color: white; /* Default text color for content */
    box-sizing: border-box; /* Include padding in width/height */
    /* Optional: Add padding to the whole cell content if desired */
    /* padding: 0 4px; */
}



.truncate-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.small-icon-inline {
    font-size: inherit; /* Tries to match surrounding text size */
    vertical-align: -0.15em; /* Adjust for better alignment with text */
    margin: 0 0.1em;
}

/* If using the InfoBox component and want to tighten its margin */
.curve-editor-help .alert { /* Assuming InfoBox renders an .alert */
    margin-bottom: 0.75rem !important; /* Adjust as needed */
}

/* ---Curve Theming --- */
.theme-dark .widget-header {
    border-bottom: 1px solid #454d55;
    background-color: #343a40; /* Example dark background */
    color: #f8f9fa; /* Example light text */
}

.widget-header-global {
    /* You can make this subtle or distinct */
    /* Example: A slightly different background or a top border */
    /*background-color: #e9ecef; */ /* Slightly different shade for global */
    /* border-top: 3px solid #007bff; */ /* Example: Blue top border for Global */
}

.theme-dark .widget-header-global {
    /* background-color: #3a4148; */
    /* border-top: 3px solid #17a2b8; */ /* Example: Cyan top border for Global in dark mode */
}


/* Specific style for LOCAL curve headers */
.widget-header-local {
    /* Example: A different background or top border for Local */
    background-color: #39afd1 !important;
    border-top: 3px solid #007bff;
}

.theme-dark .widget-header-local {
    background-color: #2c3e50; /* A darker, distinct blue/grey for local in dark mode */
    /* border-top: 3px solid #6f42c1; */ /* Example: Purple top border for Local in dark mode */
    color: #e0e0e0; /* Ensure text is readable */
}

.theme-dark .widget-header-local .widget-title {
    color: #ffffff; /* Brighter title for local dark */
}


/* Optional: Styles for the overall CurveEditor container based on modality */
.curve-editor-global {
    /* border: 1px solid #ced4da; */ /* Example border */
}

.theme-dark .curve-editor-global {
    /* border: 1px solid #495057; */
}

.curve-editor-local {
     border: 1px solid #adb5bd; /* Slightly different border for local */
     box-shadow: 0 0 5px rgba(40, 167, 69, 0.2);  /* Subtle green shadow for local */
}

.theme-dark .curve-editor-local {
    /* border: 1px solid #6c757d; */
    /* box-shadow: 0 0 5px rgba(111, 66, 193, 0.3); */ /* Subtle purple shadow */
}


.widget-header .widget-last-updated {
    font-size: 0.70rem; /* Make it even smaller */
    line-height: 1.2;
    /* margin-top: -0.25rem; */ /* Optional: Pull it up slightly if too much space after name/date row */
    /* padding-right: 0.1rem; */ /* Align with buttons if they have slight padding */
}

/* Ensure button row has a little space above it now */
.widget-header > .d-flex:last-child { /* Targets the button row */
    margin-top: 0.25rem; /* Add a small margin-top to the button row if LastUpdateInfo is present */
}

/* --- GridStack Theming (from your existing CSS) --- */

.grid-stack-themed.theme-dark {
    background-color: #343a40;
}

.grid-stack-themed.theme-light {
    background-color: white;
    color: #212529; /* Default text color for light theme */
}

/* --- General GridStack Item Content Styling --- */
/* --- THIS IS WHERE YOU COMBINE THE FLEXBOX RULES --- */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
    /* Your existing styles */
    
    border: 1px solid #dee2e6; /* Light theme default border */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
    /* Flexbox rules to make content fill height */
    display: flex;
    flex-direction: column;
    /* height: 100%; Essential: ensures it fills the grid-stack-item's allocated height */
    overflow: hidden; /* Prevents content from breaking out, useful for nested scrolling */
}

/* --- Widget Body Styling (Child of grid-stack-item-content) --- */
/* This rule remains as before */
.widget-body {
    flex-grow: 1; /* Allows the body to take up remaining vertical space after the header */
    overflow-y: auto; /* Allows content within the body to scroll if it exceeds the allocated space */
    overflow-x: hidden; /* Typically, you don't want horizontal scroll on the body itself */
    /* Optional: A very small min-height can sometimes help if there are zero-height issues */
    /* min-height: 1px; */
    /* padding can be applied here or within the child components */
}

.widget-header .widget-date,
.widget-header .widget-last-updated {
    white-space: nowrap; /* Keep it on one line */
    /* Default styling for the date */
}

/* ---- Light Theme Adjustments for Date Visibility ---- */
/* If your light theme global header has a specific background that makes text-muted too faint */
/* This targets .widget-date specifically inside .widget-header-global or .widget-header-local */
/* when NOT in dark mode. */

/* For Global Curve Header (Light Theme) */
.theme-light .widget-header-global .widget-date,
.theme-light .widget-header-global .widget-last-updated {
    color: #495057 !important; /* A darker grey, !important might be needed to override .text-muted */
    /* font-weight: 500; */ /* Slightly bolder if needed */
}

/* For Local Curve Header (Light Theme) - Your screenshot shows a local curve */
.theme-light .widget-header-local .widget-date,
.theme-light .widget-header-local .widget-last-updated {
    color: #212529 !important; /* Darker text for better contrast on lighter blue/aliceblue */
    /* font-weight: 500; */
    /* Or if the local header is very light, text-muted might be okay, but your screenshot suggests it's not */
}


/* ---- Dark Theme Adjustments for Date Visibility ---- */
/* Ensure date is light enough on dark headers */
.theme-dark .widget-header .widget-date,
.theme-dark .widget-header .widget-last-updated { /* General dark theme rule for date in any header */
    color: #adb5bd !important; /* A light grey, adjust to contrast with your dark header BGs */
    /* font-weight: normal; */ /* Reset if light theme made it bolder */
}

/* Specific override if .widget-header-local in dark mode has a very specific background */
.theme-dark .widget-header-local .widget-date,
.theme-dark .widget-header-local .widget-last-updated {
    color: #ced4da !important; /* Ensure it's very readable on #2c3e50 background */
}

.theme-dark .widget-header-global .widget-date,
.theme-dark .widget-header-global .widget-last-updated {
    color: #ced4da !important; /* If global dark header is similar */
}

/* --- Dark Mode Theming for GridStack Item Content --- */
/* Note: The general .grid-stack-item-content already has flex rules. */
/* This section primarily handles background, color, and potentially border color. */
.grid-stack-item-content.theme-dark { /* Simpler selector, assuming theme class is directly on item-content */
    background-color: #343a40; /* A common dark theme background */
    color: #f8f9fa; /* Light text for dark background */
    border-color: #495057; /* Darker border for dark theme */
}


/* --- Light Mode Theming for GridStack Item Content --- */
.grid-stack-item-content.theme-light { /* Simpler selector */
    background-color: #ffffff; /* Light background */
    color: #212529; /* Dark text for light background */
    border-color: #dee2e6; /* Lighter border for light theme */
}


/* Widget Header Styling */
.grid-stack-item-content > .widget-header {
    /* No margin or padding here if .grid-stack-item-content handles it */
    /* Or, if .grid-stack-item-content has p-0, then header handles its own padding */
    padding: 0.5rem 0.75rem; /* Example header padding */
    background-color: #f8f9fa; /* Light theme header */
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0; /* Prevent header from shrinking if body content is large */
}

.grid-stack-item-content.theme-dark > .widget-header {
    background-color: #454d55; /* Dark theme header */
    border-bottom-color: #3e444a;
    color: #f8f9fa;
}


/* Widget Body Styling */
.grid-stack-item-content > .widget-body {
    flex-grow: 1; /* Takes remaining space */
    overflow-y: auto; /* Allows vertical scrolling for body content */
    overflow-x: hidden;
    min-height: 0; /* Crucial for flex children to shrink and allow scrolling */
    padding: 0; /* If children (like DevExpress Grid) handle their own padding. */
    /* Or add padding here if you want general body padding: e.g., padding: 10px; */
}


/* In app.css or MainLayout.razor.css */
.topbar {
    position: relative; /* Or 'sticky' if you want it to stick */
    z-index: 10; /* Needs to be higher than the main content area's z-index (0) */
    /* Add a background color if it doesn't have one! */
    /* background-color: var(--your-topbar-background-color, white); /* Replace with your actual color */
}

.config-label {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust the gap as needed */
}

.config-input {
    margin-left: auto; /* Ensure the input is aligned to the right */
    height: 38px; /* Adjust as needed to match your standard input height */
    box-sizing: border-box;
}

.configuration-row {
    margin-bottom: 1rem;
}

.limited-input {
    max-width: 80px;
    border: 1px solid white; /* white border to match bootstrap form-check */
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

.limited-text-input {
    max-width: 120px;
    border: 1px solid white; /* white border to match bootstrap form-check */
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

.timezone-button {
    display: flex;
    font-weight: bold;
    background-color: #404954;
    justify-content: flex-end; /* Align the button to the right */
}

.timezone-split-button {
    margin-left: auto; /* Ensure the button is aligned to the right */
    padding-left: 8px; /* Add padding to the left of the button */
    padding-right: 8px; /* Add padding to the right of the button */
}

.description-cell-content {
    white-space: normal; /* Allow text wrapping */
    overflow-wrap: break-word; /* Handle long words */
    /* word-break: break-word; */
    width: 100%; /* Ensure div takes available cell width */
}

.timespan-editor {
    background-color: #404954;
    color: white;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
}


.templateListbox {
    --ct-dropdown-zindex: 1000;
    --ct-dropdown-min-width: 10rem;
    --ct-dropdown-padding-x: 0;
    --ct-dropdown-padding-y: 0.25rem;
    --ct-dropdown-spacer: 0.125rem;
    --ct-dropdown-font-size: 0.9rem;
    --ct-dropdown-box-shadow: var(--ct-secondary-bg);
    --ct-dropdown-color: var(--ct-body-color);
    --ct-dropdown-bg: var(--ct-secondary-bg);
    --ct-dropdown-border-color: var(--ct-border-color);
    --ct-dropdown-border-radius: 0.25rem;
    --ct-dropdown-border-width: var(--ct-border-width);
    --ct-dropdown-inner-border-radius: calc(0.25rem - var(--ct-border-width));
    --ct-dropdown-divider-bg: var(--ct-border-color);
    --ct-dropdown-divider-margin-y: 0.75rem;
    --ct-dropdown-box-shadow: var(--ct-box-shadow);
    --ct-dropdown-link-color: var(--ct-body-color);
    --ct-dropdown-link-hover-color: var(--ct-emphasis-color);
    --ct-dropdown-link-hover-bg: var(--ct-tertiary-bg);
    --ct-dropdown-link-active-color: var(--ct-emphasis-color);
    --ct-dropdown-link-active-bg: var(--ct-tertiary-bg);
    --ct-dropdown-link-disabled-color: var(--ct-emphasis-color);
    --ct-dropdown-item-padding-x: 1.5rem;
    --ct-dropdown-item-padding-y: 0.375rem;
    --ct-dropdown-header-color: inherit;
    --ct-dropdown-header-padding-x: 1.125rem;
    --ct-dropdown-header-padding-y: 0.5rem;
    z-index: var(--ct-dropdown-zindex);
    display: block;
    min-width: 300px; /*var(--ct-dropdown-min-width);*/
    padding: var(--ct-dropdown-padding-y) var(--ct-dropdown-padding-x);
    margin: 0;
    font-size: var(--ct-dropdown-font-size);
    color: var(--ct-dropdown-color);
    text-align: right;
    list-style: none;
    background-color: var(--ct-dropdown-bg);
    background-clip: padding-box;
    border: var(--ct-dropdown-border-width) solid var(--ct-dropdown-border-color);
    border-radius: var(--ct-dropdown-border-radius);
    border-color: var(--ct-dropdown-bg)
}

.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}

.custom-drop-zone.custom-drop-zone-hover {
    border-style: solid;
}

.custom-drop-zone svg {
    width: 42px;
    height: 42px;
}

.custom-drop-zone > *:not(#overviewDemoSelectButton) {
    pointer-events: none;
}

.vol-grid-container {
    display: flex;
    flex-direction: row; /* Ensure grids are in a row */
    justify-content: space-between; /* Distribute evenly */
    gap: 10px; /* Space between grids */
    width: 100%;
    height: 56vh; /* Adjust height based on your layout */
}

.vol-grid-item {
    flex: 1; /* Equal width for all grids */
    min-width: 0; /* Prevent overflow */
    height: 100%; /* Make sure grids use full height */
    overflow: auto; /* Allow scrolling if needed */
    max-width: 32%; /* Each grid takes 25% width */

}

.trade-dialog {
    min-height:300px;
}

.text-italic {
    font-style: italic;
}

@keyframes rejoiningAnimation {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

.fullscreen-mode .navbar,
.fullscreen-mode .sidebar,
.fullscreen-mode .topbar,
.fullscreen-mode .page-header,
.fullscreen-mode .header-title,
.fullscreen-mode .footer {
    display: none !important;
}

.fullscreen-mode .trade-fixed-grid {
    max-height: 1200px !important;
}

.fullscreen-mode .container-fluid {
    width: 98vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.rejoining-spinner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 8px solid rgba(0, 123, 255, 0.5); /* Bootstrap primary color with transparency */
    border-top-color: var(--bs-primary); /* Solid color for animation effect */
    animation: rejoiningAnimation 1.5s infinite ease-in-out;
}

.form-date-control {
    max-width: 200px;
}

.btn-yellow {
    background-color: rgba(255,235,10,1.0);
    color: black;
}

.nav-menu-group {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    max-height: 0;
}
@keyframes slideDown {
    from {
        max-height: 0;
    }

    to {
        max-height: 500px; /* Adjust accordingly */
    }
}

@keyframes slideUp {
    from {
        max-height: 500px; /* Adjust accordingly */
    }

    to {
        max-height: 0;
    }
}

.nav-menu-group {
    overflow: hidden;
    max-height: 0; /* Default state */
    transition: max-height 0.3s ease-in-out; /* For smooth height changes */
}

.nav-menu-group.expanded {
    max-height: 500px; /* Adjust to fit your content */
}

.nav-menu-group.collapsed {
    max-height: 0;
}

.tree-content {
    min-height:300px;
}

.page-header {
    font-size: 2.5rem;
    font-weight: bold;
}

.table-icon {
    font-size: 20px; 
    line-height: 1;
}

.sub-page-header {
    font-size: 1.5rem;
    font-weight: bold;
}

.label {
    min-width: 115px; /* Adjust as needed for alignment */
    margin-right: 5px;
    font-weight: bold;
}

.text-value {
    flex-grow: 1; /* Fills remaining space */
    word-wrap: break-word; /* Handles long text */
}

.templateListbox-item {
    clear: both; /* Clear floats */
    font-weight: 400; /* Font weight */
    color: var(--ct-dropdown-link-color);
    text-align: inherit; /* Text alignment */
    white-space: nowrap; /* Prevent text wrapping */
    background-color: var(--ct-dropdown-bg);
    border: 0; /* Border */
    cursor: pointer; /* Cursor */
    border-radius: var(--ct-dropdown-item-border-radius, 0);
    padding: var(--ct-dropdown-item-padding-y) var(--ct-dropdown-item-padding-x);
    border-color: var(--ct-dropdown-bg)
}

.number-font {
    font-size: 12.5px; /* Adjust the size as needed */
    width: 150px !important; /* Ensure it takes the full width */
    height:40px;
}

.input-group-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-dropdown-item {
    display: block;
    width: 100%;
    padding: var(--ct-dropdown-item-padding-y) var(--ct-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--ct-dropdown-link-color);
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--ct-dropdown-item-border-radius, 0);
}

        
 .modal-body-scroll {
    max-height: 74vh; /* Adjust the height as needed */
    overflow-y: auto;
}

.pnl-pivot-container {
    transition: all 0.3s ease-in-out;
}

.pivot-card {
    max-width: 100vw;
    overflow-x: auto;
}

.pnl-card-expanded {
    min-height: 200px;
}

.pnl-card-collapsed {
    min-height: 30px;
}

.settle-container {
    max-width: 280px;
}

.templateListbox-item:hover, .dropdown-item:focus {
    color: var(--ct-dropdown-link-hover-color);
    background-color: var(--ct-dropdown-link-hover-bg);
}

.templateListbox-item.active, .dropdown-item:active {
    color: var(--ct-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--ct-dropdown-link-active-bg);
}

.templateListbox-text {
    display: block;
    padding: var(--ct-dropdown-item-padding-y) var(--ct-dropdown-item-padding-x);
    color: var(--ct-dropdown-link-color);
}

.templateListbox-dark {
    --ct-dropdown-color: #dee2e6;
    --ct-dropdown-bg: #343a40;
    --ct-dropdown-border-color: var(--ct-border-color);
    --ct-dropdown-box-shadow: var(--ct-secondary-bg);
    --ct-dropdown-link-color: #dee2e6;
    --ct-dropdown-link-hover-color: #fff;
    --ct-dropdown-divider-bg: var(--ct-border-color);
    --ct-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
    --ct-dropdown-link-active-color: var(--ct-emphasis-color);
    --ct-dropdown-link-active-bg: var(--ct-tertiary-bg);
    --ct-dropdown-link-disabled-color: #a1a9b1;
    --ct-dropdown-header-color: #a1a9b1;
}

 .pivot-table-cell-template {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.value-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Optional spacing */
}

/* Base style for the indicator span - MOST BASIC TEST */
.value-indicator {
    display: inline-block;
    /* --- Increased Size --- */
    width: 14px; /* e.g., changed from 10px */
    height: 14px; /* e.g., changed from 10px */
    vertical-align: text-bottom;
    /* --- Optional: Adjust Spacing --- */
    margin-left: 5px; /* e.g., changed from 4px */
    /* --- Keep other styles --- */

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Keep contain */
    border: none; /* Remove test border if still present */
    /* No opacity or animation needed with the C# timer approach */
}

/* Just apply the background image when the class is present */
.pivot-table-green-arrow-up {
    background-image: url("/assets/images/markers/pivot-table-green-arrow-up.svg");
}

.pivot-table-yellow-arrow-down-right {
    background-image: url("/assets/images/markers/pivot-table-yellow-arrow-down-right.svg");
}

.pivot-table-red-arrow-down {
    background-image: url("/assets/images/markers/pivot-table-red-arrow-down.svg");
}


.pivot-table-cell-template-icon {
    width: 10px;
    height: 10px;
    background-size: cover;
    background-repeat: no-repeat;
}

.templateListbox-start {
    --bs-position: start;
}

.templateListbox-end {
    --bs-position: end;
}

.virtual-item-label {
    color: rgba(57, 175, 209) !important;
    font-weight: bold;
}

.templateSelectAll {
    margin-right: 5px !important;
}

.alert-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top:5px;
}

.dropdown-menu-scrollable {
    max-height: 200px; /* Adjust the height as needed */
    overflow-y: auto;
    z-index: 500; /* Ensure it appears above other content */
}

.alert-message {
    flex: 1 1 auto; /* Allows the alert to grow and shrink as needed */
    min-width: 0; /* Prevents the alert from overflowing */
    text-align: center;
}

.custom-dropdown {
    width: 300px;
}

.expandedTradeSection {
    font-weight: bold;
    border:solid;
}

.modal-form-control {
    max-width: 180px;
}

.no-wrap {
    white-space: nowrap;
}

.modal-wide-dialog {
    max-width: 950px;
}

.modal-thin-dialog {
    max-width: 450px;
}

.modal-x-wide-dialog {
    max-width: 1000px;
}

.modal-xl-wide-dialog {
    max-width: 1200px;
}

.form-wizard-header .nav-link.active {
    background-color: var(--bs-primary) !important; /* Use your theme's primary color */
    color: white !important;
}

/* Optional: Style for the icons inside the active tab */
.form-wizard-header .nav-link.active .material-icons {
    color: white !important;
}

.role-label{
    max-width:100px;
}

.form-text {
    width: 250px;
    margin-top: 0 !important;
}

.form-text-override {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ct-secondary-color);
}


.entity-dropdown-menu-toggle {
    min-width: 250px;
}

.major-role-label {
    font-weight: bold;
    border: solid;
    padding: 1px;
}


.admin-inherited {
    accent-color: #ffc107 !important; /* Bootstrap warning color */
    pointer-events: none; /* Disable interaction */
    opacity: 0.6; /* Make it visually clear that the checkbox is disabled */
}

/* custom-styles.css - force dark rows to have a good text colour*/
.trade-section .table-striped-dark > tbody > tr:nth-of-type(even) > * {
    color: #ffffff ; 
}

.trade-section .table-striped-dark tbody tr:nth-of-type(odd) > * {
    color: #ffffff; 
}

.trade-section .striped-dark {
    background-color: #404954 !important; /* Adjust the color as needed */
}

.trade-section .striped {
    background-color: #f6f7fb !important; /* Adjust the color as needed */
}

.trade-section .table-striped-dark tbody tr.grouped-row:first-of-type {
    background-color: red !important; /* Apply striping to the first row in the group for dark theme */
    color: #ffffff; /* Ensure text color is readable */
}

.trade-section .lighter-background {
    background-color: #0d6efd !important; 
}

.trade-section-container {
    height: 30rem;
    overflow-y: auto;
}

.trade-fixed-grid {
    max-height: 615px;
    overflow: auto;
}

.fixed-grid {
    max-height: 615px; 
    overflow: auto;
}

.pivot-table-large {
    height: 100%;
    /*overflow: auto;*/
}

/* Add this to your CSS file */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transform: scale(1.02); /* Slightly scale up */
    transition: transform 0.2s ease-in-out; /* Smooth transition */
}

.modal-title-text
{
    color: white !important;
    font-weight: bold;
}

.trade-section .cancelled {
    text-decoration: line-through;
    text-decoration-color: red;
}

.icon-container {
    display: flex;
    align-items: center; /* Aligns icons vertically in the center */
}

.icon-cell {
    min-width: 100px;
    text-decoration: none; /* Turn off the strike-through for the icon */
}

.date-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.reference-header {
    max-width: 135px;
}

.reference-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 135px;
    align-items: center;
    vertical-align:central
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1020; /* Ensure it is above other content */
}

@keyframes flash-grid-up {
    0% {
        background-color: #09bf8c;
    }
    /* Light green */
    100% {
        background-color: transparent;
    }
}

@keyframes flash-grid-down {
    0% {
        background-color: red;
    }
    /* Light red */
    100% {
        background-color: transparent;
    }
}

.flash-grid-up {
    animation: flash-grid-up 5s ease-out;
}

.flash-grid-down {
    animation: flash-grid-down 5s ease-out;
}

.bold {
    font-weight: bold;
}

.toolbar-date-control {
    line-height: 2;
    display: flex;
}

.toolbar-button {
    align-items: center;
    height: 100% !important;
    display: flex;
}

.toolbar-item {
    display: flex;
    align-items: center;
}

.flash-grid-up.reset, .flash-grid-down.reset {
    animation: none;
    animation: flash-grid-up 0s ease-out;
    /* This immediately resets the animation to re-trigger */
}

@keyframes fade-in-out {
    0% {
        opacity: 0;
    }
    /* Start invisible */
    20% {
        opacity: 1;
    }
    /* Fade in quickly */
    80% {
        opacity: 1;
    }
    /* Stay visible */
    100% {
        opacity: 0;
    }
    /* Fade out */
}


.strike-through-row {
    text-decoration: line-through;
    color: gray; /* Optional: Dim the color for visual emphasis */
    font-style: italic;

}

/* Flash animation for price increase */
@keyframes flash-price-up {
    0% {
        background-color: #09bf8c; /* light green */
    }

    100% {
        background-color: transparent;
    }
}

/* Flash animation for price decrease */
@keyframes flash-price-down {
    0% {
        background-color: #f8d7da; /* light red */
    }

    100% {
        background-color: transparent;
    }
}

/* Apply this class when the price increases */
[class*="flash-up-cell-"]
{
    animation: flash-price-up 1s ease-in-out;
}

/* Apply this class when the price decreases */
[class*="flash-down-cell-"]
{
    animation: flash-price-down 1s ease-in-out;
}

.buy {
    color: #0acf97 !important;
}

.sell {
    color: #eb4957 !important;
}

.pay {
    color: #0acf97 !important;
}

.receive {
    color: #eb4957 !important;
}

.put {
    color: #0acf97 !important;
}

.call {
    color: #eb4957 !important;
}

@media (max-width: 1200px) {
    .transaction-types-toolbar-item {
        display: none;
    }
}

.smallSideMenu {
    display: flex;
    flex-direction: column;
    width: 200px;
    overflow: hidden;
}

.smallSideMenu:hover {
    background-color: #f0f0f0; /* Change this to your desired hover effect */
    cursor: pointer;
}

.smallside-nav-title {
    display: none; 
}

.logo-big-img {
    transform: scale(0.80); 
    transform-origin: top left;
}

/* Show the smallside-nav-title when hovering over the parent .side-nav-item */
.side-nav-item:hover .smallside-nav-title {
    display: block;
    color: #f0f0f0; /* Change this to your desired hover color */
    overflow: visible;
}

.hideable-menu {
    transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.topbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Optional: Distribute space between items */
}

.logo-alt-topbar {
    float: right;
    display: block;
    line-height: var(--ct-topbar-height);
    padding: 0 0.75rem;
}

.topbar-menu {
    display: flex;
    align-items: center; /* Align items vertically centered */
}

.topbar-menu > div {
    display: flex;
    align-items: center; /* Align items vertically centered */
}

.menu-items {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-items li {
    margin-left: 10px; /* Adjust spacing between menu items as needed */
}

/* Hover effect to expand the menu */
.hideable-menu:hover {
    width: 250px; /* Adjust based on your full menu width */
}

.menushow {
    width: 250px; /* Adjust based on your full menu width */
    opacity: 1;
}

.menuhide {
    width: 50px; /* Adjust based on your small menu width */
    opacity: 1; /* Ensure opacity is 1 to keep it visible */
}

.custom-margin {
    margin-right: 20px;
}

.custom-left-margin {
    margin-left: 1px;
}

.profile-section {
    margin-bottom: 2rem !important;
}

.select-restricted {
    width: 6rem;
}

.icon-table-header{
    max-width: 1rem !important;
}


.trade-section {
    margin-top: 2px !important;
}



.config-editor-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5);  Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it appears above other content */
}

.spinner-container {
    position: relative;
}

.spinner {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade-in-slide-down {
    from {
        margin-top: -70px;
    }

    to {
        margin-top: 0px;
    }
}

.fadeInAnimation {
    animation-name: fade-in-slide-down;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

.menu-item-container {
    display: flex;
    align-items: center;
}

.menu-icon {
    margin-right: 8px;
}

.nav-menu-group {
}

.nav-menu-group.expand {
    height: auto;
    opacity: 1;
}

.nav-menu-group.collapse {
    overflow: hidden;
    transition: height 0.3s ease, opacity 0.3s ease;
    height: 0;
    opacity: 0;
}

.chart-tooltip {
    background-color: var(--bs-dark);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--bs-gray-600);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-size: 0.8rem;
    min-width: 150px;
}

.tooltip-header {
    font-weight: 600;
    color: var(--bs-light);
    border-bottom: 1px solid var(--bs-gray-700);
    padding-bottom: 0.3rem;
    margin-bottom: 0.4rem;
}

.tooltip-body .tooltip-row {
    display: flex;
    justify-content: space-between;
}

.tooltip-body .tooltip-label {
    color: var(--bs-gray-500);
    margin-right: 1rem;
}

.tooltip-body .tooltip-value {
    font-weight: 500;
    color: var(--bs-gray-300);
}

#capture-flash-overlay {
    display: none; /* Hidden by default */
    position: fixed; /* Sit on top of everything */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent black */
    z-index: 2050; /* Needs to be higher than the modal backdrop (typically ~1050) */
    /* Flexbox for centering the content */
    justify-content: center;
    align-items: center;
}

    #capture-flash-overlay .overlay-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: white;
        text-align: center;
        font-family: sans-serif;
    }

        #capture-flash-overlay .overlay-content .material-icons {
            font-size: 48px;
            margin-bottom: 16px;
            /* Optional animation */
            animation: pulse 1.5s infinite;
        }

        #capture-flash-overlay .overlay-content p {
            font-size: 20px;
        }

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

comment {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color); /* Use theme's border color */
}

.comment-header {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.comment-body {
    font-size: 0.95rem;
    white-space: pre-wrap; /* This preserves line breaks and wraps text */
    word-break: break-word; /* Prevents long strings from overflowing */
}

/* Style for replies from the support team */
.support-reply {
    background-color: rgba(13, 110, 253, 0.05); /* Light blue, semi-transparent */
    border-left: 4px solid #0d6efd; /* Blue accent */
    margin-left: 2rem; /* Indent support replies */
}

/* Style for replies from the client/reporter */
.client-reply {
    background-color: var(--bs-secondary-bg); /* Use theme's secondary background */
    border-left: 4px solid #6c757d; /* Grey accent */
    margin-right: 2rem; /* "Indent" from the right */
}

/* Style for internal notes, only visible to support */
.internal-note {
    background-color: rgba(255, 193, 7, 0.05); /* Light yellow, semi-transparent */
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-left: 4px solid #ffc107; /* Yellow accent */
    margin-left: 2rem;
}