body,
.table,
.table thead th,
.nav-left-sidebar .navbar-nav .nav-link {
    color: #444;
}

/* Custom styles for disabled date picker */
.shopify-daterange1.disabled-daterange {
    background-color: white !important;
    color: #495057 !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    border: 1px solid #ced4da !important;
    transition: all 0.2s ease;
}

.shopify-daterange1.disabled-daterange:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
}

.shopify-daterange1.disabled-daterange:focus {
    border-color: #ced4da !important;
    box-shadow: none !important;
    outline: none !important;
}

.shopify-daterange1.disabled-daterange::placeholder {
    color: #6c757d !important;
    opacity: 0.7 !important;
}

/* Normal state when enabled */
.shopify-daterange1:not(.disabled-daterange) {
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.shopify-daterange1:not(.disabled-daterange):hover {
    border-color: #80bdff !important;
}

/* Label styling for disabled state */
.disabled-daterange-label {
    color: #6c757d !important;
    opacity: 0.7;
}

/* Label styling for enabled state */
.enabled-daterange-label {
    color: #495057 !important;
    opacity: 1;
}

table tr td,
table tr th {
    white-space: nowrap;
    vertical-align: middle;
}

table.table tr td,
table.table tr th {
    white-space: nowrap;
    vertical-align: middle;
}

table.table tr td.address,
table.table tr th.address {
    max-width: 210px;
    white-space: normal;
}

table.table tr th input {
    max-width: 120px;
    font-size: 12px;
    padding: 4px 15px;
    border: 1px solid #e6e6f2;
}

table.table tr th.address input {
    width: 190px;
    max-width: 190px;
}
.nav-left-sidebar {
    height: calc(100% - 60px);
}
div.dataTables_wrapper div.dataTables_info {
    padding-bottom: 30px;
}

.fw-bold {
    font-weight: 600;
    color: #666;
}

.selectall,
.selectrow {
    cursor: pointer;
    width: 45px;
    text-align: center;
}

.order_form .order_show .bootstrap-select.dropdown {
    width: 100%;
    min-width: 90px;
}

.stock_status_wrap {
    float: left;
    width: 100%;
    font-size: 14px;
    text-align: left;
}

.stock_row {
    float: left;
    width: 100%;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
}

.stock_sku {
    float: left;
    width: 130px;
    margin: 0 5px 0 0;
    padding: 5px 5px 5px;
}

.stock_size {
    float: left;
    width: 40px;
    margin: 0 15px 0 0;
    min-height: 18px;
    text-align: center;
    padding: 5px 5px 5px;
}

.stock_orders {
    float: left;
    width: 60px;
    margin: 0 15px 0 0;
    text-align: center;
    padding: 5px 5px 5px;
}

.stock_qty {
    float: left;
    width: 100px;
    margin: 0 15px 0 0;
    padding: 5px 5px 5px;
}

.stock_status {
    float: left;
    width: auto;
    text-align: left;
    padding: 5px 5px 5px;
}

.stock_status_wrap .stock_row:first-child {
    background-color: #3085d6;
    border-top: 1px solid #3085d6;
    color: #fff;
    border-left: 1px solid #3085d6;
    border-right: 1px solid #3085d6;
    border-radius: 3px 3px 0 0;
}

.stock_status_wrap .stock_row:last-child {
    border-bottom: 1px solid #bbb;
    border-radius: 0 0 3px 3px;
}

.missingskus_wrap {
    float: left;
    width: 100%;
    font-size: 14px;
}

.missingskus_wrap_info {
    float: left;
    width: 100%;
    margin: 0 0 20px 0;
}

.missingskus_table {
    float: left;
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
}

.missingsku_row:first-child {
    background-color: #5969ff;
    color: #fff;
    border-left: 1px solid #5969ff;
    border-top: 1px solid #5969ff;
    border-right: 1px solid #5969ff;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.missingsku_row {
    float: left;
    width: 100%;
    border-bottom: 1px solid #e4e4e4;
}

.missingsku_row .clientsku {
    float: left;
    width: 50%;
    padding: 5px;
}

.missingsku_row .oursku {
    float: left;
    width: 50%;
    padding: 5px;
}

.missingsku_row:last-child {
    border-bottom: 0;
}

.nav-left-sidebar .nav-link.active i {
    color: #ffffff;
}

.page-closed .fromdate,
.page-closed .todate,
.page-closed .cfromdate,
.page-closed .ctodate {
    width: 113px;
}

.page-viewerclosed .fromdate,
.page-viewerclosed .todate,
.page-viewerclosed .cfromdate,
.page-viewerclosed .ctodate {
    width: 113px;
}

.salesreport .ct-series-a .ct-bar:nth-child(1) {
    stroke: grey;
    stroke-width: 10px;
}

.salesreport .ct-series-a .ct-bar:nth-child(2) {
    stroke: grey;
    stroke-width: 10px;
}

.salesreport .ct-series-a .ct-bar:nth-child(3) {
    stroke: grey;
    stroke-width: 10px;
}

.salesreport .ct-series-a .ct-bar:nth-child(4) {
    stroke: grey;
    stroke-width: 10px;
}

.salesreport .ct-series-a .ct-bar:nth-child(5) {
    stroke: grey;
    stroke-width: 10px;
}

.salesreport .ct-series-a .ct-bar:nth-child(6) {
    stroke: grey;
    stroke-width: 10px;
}

.salesreport .ct-series-a .ct-bar:nth-child(7) {
    stroke: yellow;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(1) {
    stroke: red;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(2) {
    stroke: red;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(3) {
    stroke: green;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(4) {
    stroke: purple;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(5) {
    stroke: purple;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(6) {
    stroke: purple;
    stroke-width: 10px;
}

.salesreport .ct-series-b .ct-bar:nth-child(7) {
    stroke: grey;
    stroke-width: 10px;
}

.swal2-header .swal2-title {
    color: #000000;
    font-size: 1.3em;
}

.swal2-actions .swal2-styled {
    padding: 8px 15px;
    font-size: 14px !important;
}

.swal2-actions .swal2-styled:focus {
    box-shadow: none;
}

.nav-left-sidebar .navbar .navbar-nav .nav-link {
    padding: 10px 12px;
}

.skusuggestions {
    padding: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 200px;
    overflow-y: auto;
    z-index: 1;
    background-color: #fff;
    display: none;
}

.skusuggestions.in {
    display: block;
}

.skusuggestions li {
    float: left;
    width: 100%;
    padding: 5px 0 5px 16px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f3f3;
    margin: 0 0 5px 0;
}

.skusuggestions .loader {
    border: none;
    text-align: center;
    line-height: 200px;
    padding: 0;
    margin: 0;
}

.table th,
.table td {
    vertical-align: middle;
    text-align: center;
}

/* Chart Styles */

.month-labels {
    margin-left: 50px; /* Align with chart bars */
    margin-bottom: 20px;
}

.month-section {
    flex: 1;
    text-align: center;
}

.month-title {
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    margin: 0;
    padding: 8px 0;
    border-bottom: 2px solid #e9ecef;
}

.chart-area {
    height: 400px;
    margin-bottom: 20px;
}

.y-axis {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 50px;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    color: #6c757d;
}

.y-axis-label {
    text-align: right;
    padding-right: 10px;
    font-weight: 600;
    font-family: arial;
    color: #000;
}

.bars-container {
    margin-left: 50px;
    height: 350px;
    gap: 8px;
    position: relative;
}

.day-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.bars-pair {
    display: flex;
    gap: 2px;
    align-items: end;
    width: 100%;
    height: 100%;
}

.bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    transition: opacity 0.2s;
    cursor: pointer;
}

.bar:hover {
    opacity: 0.8;
}

.bar.this-month {
    background-color: #6f42c1;
}

.bar.last-month {
    background-color: #a855f7;
}

.day-label {
    font-size: 12px;
    color: #000;
    margin-bottom: -21px;
    text-orientation: mixed;
    font-weight: 600;
    font-family: arial;
}

.grid-lines {
    position: absolute;
    top: 0;
    left: 50px;
    right: 0;
    bottom: 50px;
    pointer-events: none;
}

.grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e9ecef;
}

.y-axis-title {
    position: absolute;
    left: -15px;
    top: 50%;
    transform: rotate(-90deg) translateY(-50%);
    transform-origin: center;
    font-size: 12px;
    color: #000;
    font-weight: 500;
}

/* Gap utility for older Bootstrap versions */
.gap-2 > * + * {
    margin-left: 0.5rem;
}

.gap-4 > * + * {
    margin-left: 1.5rem;
}

.chart-container {
    position: relative;
}

.x-axis-label,
.y-axis-label {
    position: absolute;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    pointer-events: none;
    z-index: 10;
}

.dailyunitsgraph .x-axis-label {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.dailyunitsgraph .y-axis-label {
    top: 50%;
    left: -35px;
    transform: translateY(-50%) rotate(-90deg);
}

.totalsalesot .x-axis-label {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.totalsalesot .y-axis-label {
    top: 50%;
    left: 15px;
    transform: translateY(-50%) rotate(-90deg);
}

.sellingskugraph .x-axis-label {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.sellingskugraph .y-axis-label {
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotate(-90deg);
}

/* CSS for the toggle-style title */

.chart-title-toggle {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 10px 20px;
    width: 100%;
    margin: 0 auto;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.chart-title-toggle span {
    flex: 1;
    text-align: center;
    color: #333;
}
.chart-title {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px 20px;
    width: 350px;
    margin: 0 auto;
    font-weight: bold;
    font-size: 16px;
}

.chart-title span {
    flex: 1;
    text-align: center;
    color: #333;
}

.total_sales {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 10px 20px;
    width: 100%;
    margin: 0 auto;
    font-weight: 600;
    font-size: 24px;
}

.dailyunitsgraph_wrap {
    position: relative;
    width: 100%;
    display: inline-block;
}

.dailyunitsgraph .ct-bar {
    transition: all 0.3s ease;
}

.dailyunitsgraph .ct-series-a .ct-bar {
    stroke: #8166e6;
}
.dailyunitsgraph .ct-series-b .ct-bar {
    stroke: #b1a1ed;
}

.chartist-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

.overlayloader {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.overlayloader.in {
    display: flex;
}

.sellingskugraph .ct-bar {
    stroke-width: 50px !important;
    stroke: #4647c2 !important;
}

.sellingskugraph_heading h3 {
    text-align: center;
    color: #333;
    font-size: 24px;
    margin: 15px 0 0 0;
}

/* CSS for .catebreakgraph donut chart - Blue/Indigo shades with positioned labels */

.catebreakgraph {
    position: relative;
    width: 100%;
    height: 450px; /* Increased height for labels outside donut */
    margin: 0 auto;
    overflow: visible;
    background: transparent;
    padding: 25px; /* Add padding for labels */
}

/* SVG container */
.catebreakgraph svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    background: transparent;
}

/* Donut slice styling */
.catebreakgraph .ct-slice-donut {
    stroke-width: 3px;
    stroke: #ffffff;
    transition: all 0.3s ease;
}

/* Hide any filled pie slices to ensure hollow center */
.catebreakgraph .ct-slice-pie {
    display: none !important;
}

.catebreakgraph .ct-slice:not(.ct-slice-donut) {
    display: none !important;
}

/* Color scheme for specific categories - Override theme.min.css */
.catebreakgraph .ct-series-a .ct-slice-donut {
    fill: #252a5d !important;
} /* Necklaces */
.catebreakgraph .ct-series-b .ct-slice-donut {
    fill: #766de4 !important;
} /* Bracelets */
.catebreakgraph .ct-series-c .ct-slice-donut {
    fill: #b7bcf1 !important;
} /* Rings */
.catebreakgraph .ct-series-d .ct-slice-donut {
    fill: #4647c2 !important;
} /* Earrings */
.catebreakgraph .ct-series-e .ct-slice-donut {
    fill: #252a5d !important;
} /* Charms - same as necklaces */
.catebreakgraph .ct-series-f .ct-slice-donut {
    fill: #766de4 !important;
}
.catebreakgraph .ct-series-g .ct-slice-donut {
    fill: #b7bcf1 !important;
}

/* Override theme.min.css donut-solid styles */
.catebreakgraph .ct-series-a .ct-slice-donut-solid {
    fill: #252a5d !important;
}
.catebreakgraph .ct-series-b .ct-slice-donut-solid {
    fill: #766de4 !important;
}
.catebreakgraph .ct-series-c .ct-slice-donut-solid {
    fill: #b7bcf1 !important;
}
.catebreakgraph .ct-series-d .ct-slice-donut-solid {
    fill: #4647c2 !important;
}
.catebreakgraph .ct-series-e .ct-slice-donut-solid {
    fill: #252a5d !important;
}
.catebreakgraph .ct-series-f .ct-slice-donut-solid {
    fill: #766de4 !important;
}
.catebreakgraph .ct-series-g .ct-slice-donut-solid {
    fill: #b7bcf1 !important;
}

/* Additional color targeting for pie slices */
.catebreakgraph .ct-slice-donut.ct-series-a {
    fill: #252a5d !important;
}
.catebreakgraph .ct-slice-donut.ct-series-b {
    fill: #766de4 !important;
}
.catebreakgraph .ct-slice-donut.ct-series-c {
    fill: #b7bcf1 !important;
}
.catebreakgraph .ct-slice-donut.ct-series-d {
    fill: #4647c2 !important;
}
.catebreakgraph .ct-slice-donut.ct-series-e {
    fill: #252a5d !important;
}

/* Override all possible theme variations */
.catebreakgraph .ct-slice-donut-solid.ct-series-a {
    fill: #252a5d !important;
}
.catebreakgraph .ct-slice-donut-solid.ct-series-b {
    fill: #766de4 !important;
}
.catebreakgraph .ct-slice-donut-solid.ct-series-c {
    fill: #b7bcf1 !important;
}
.catebreakgraph .ct-slice-donut-solid.ct-series-d {
    fill: #4647c2 !important;
}
.catebreakgraph .ct-slice-donut-solid.ct-series-e {
    fill: #252a5d !important;
}

/* Hover effects */
.catebreakgraph .ct-slice-donut:hover {
    stroke-width: 4px;
    opacity: 0.9;
    cursor: pointer;
}

/* Positioned label styling (DOM-based labels) */
.catebreakgraph .positioned-label {
    position: absolute;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
}

/* SVG label styling */
.catebreakgraph text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    pointer-events: none;
    user-select: none;
}

/* Category name labels */
.catebreakgraph .ct-label-category {
    font-size: 14px !important;
    font-weight: 600 !important;
    fill: #1f2937 !important;
    text-anchor: middle !important;
    dominant-baseline: middle !important;
}

/* Count number labels */
.catebreakgraph .ct-label-count {
    font-size: 18px !important;
    font-weight: bold !important;
    fill: #1f2937 !important;
    text-anchor: middle !important;
    dominant-baseline: middle !important;
}

/* Zero count styling */
.catebreakgraph .ct-label-count.zero {
    fill: #9ca3af !important;
    font-size: 16px !important;
}

/* Ensure chart has proper positioning */
.catebreakgraph .ct-chart-pie {
    overflow: visible;
    background: transparent !important;
}

/* Category labels styling - positioned outside donut */
.catebreakgraph .ct-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    fill: #333 !important;
    text-anchor: middle !important;
    dominant-baseline: middle !important;
    pointer-events: none;
}

/* Ensure labels are outside the donut ring */
.catebreakgraph .ct-label {
    font-family: system-ui, -apple-system, sans-serif !important;
}

/* Category name labels with better positioning */
.catebreakgraph .ct-label.ct-horizontal {
    font-size: 13px !important;
    font-weight: 600 !important;
    fill: #333 !important;
}

/* Text wrapping for long category names */
.catebreakgraph .ct-label tspan {
    font-size: 12px !important;
    line-height: 1.2;
}

/* Chart positioning */
.catebreakgraph .ct-chart {
    overflow: visible;
    background: transparent !important;
}

/* Force white center for donut */
.catebreakgraph::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px; /* Adjust based on donut inner radius */
    height: 140px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure SVG is above the white center */
.catebreakgraph svg {
    position: relative;
    z-index: 2;
}

/* Chart title styling */
.catebreakgraph-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 20px;
    font-family: system-ui, -apple-system, sans-serif;
}

.topseller_graph img {
    width: 90px;
    float: left;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .catebreakgraph {
        height: 350px;
    }

    .catebreakgraph .positioned-label {
        font-size: 12px;
    }

    .catebreakgraph .ct-label-category {
        font-size: 12px !important;
    }

    .catebreakgraph .ct-label-count {
        font-size: 16px !important;
    }

    .catebreakgraph .ct-slice-donut {
        stroke-width: 2px;
    }

    .catebreakgraph::before {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .catebreakgraph {
        height: 320px;
    }

    .catebreakgraph .positioned-label {
        font-size: 11px;
    }

    .catebreakgraph .ct-label-category {
        font-size: 11px !important;
    }

    .catebreakgraph .ct-label-count {
        font-size: 14px !important;
    }

    .catebreakgraph::before {
        width: 100px;
        height: 100px;
    }
}

/* Animation for chart load */
.catebreakgraph .ct-slice-donut {
    animation: chartSlideIn 1s ease-out;
}

@keyframes chartSlideIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Ensure parent container has proper background */
.card-body {
    background: white;
}

/* Hide any legend that might be auto-generated */
.chart-legend {
    display: none !important;
}

.skuselector .select2-container .select2-selection--single {
    height: 42px;
}

.skuselector .select2-container--default .select2-selection--single {
    border: 1px solid #e6e6f2;
    border-radius: 0.25rem;
}

.skuselector
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    padding: 7px 15px;
}

.skuselector
    .select2-container
    .select2-selection--single
    .select2-selection__clear {
    right: 50px;
    top: 1px;
}

/* SKU Chart Tooltip */
.sku-chart-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

/* SKU Bar Labels */
.sku-bar-label {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1;
}

/* Holiday Sales Break Chart */
.holidaysalesbreak .ct-bar {
    stroke-width: 50px !important;
}

.holidaysalesbreak .ct-series-a .ct-bar {
    stroke: #252a5d !important;
}

.holidaysalesbreak .ct-series-b .ct-bar {
    stroke: #766de4 !important;
}

.holidaysalesbreak .ct-series-c .ct-bar {
    stroke: #b7bcf1 !important;
}

.holidaysalesbreak .ct-series-d .ct-bar {
    stroke: #4647c2 !important;
}

.holidaysalesbreak .x-axis-label {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.holidaysalesbreak .y-axis-label {
    top: 50%;
    left: -35px;
    transform: translateY(-50%) rotate(-90deg);
}

/* Holiday Chart Tooltip */
.holiday-chart-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

/* Quarterly Sales Chart */
.quaterlysalescomp .ct-bar {
    stroke-width: 50px !important;
}

.quaterlysalescomp .ct-series-a .ct-bar {
    stroke: #252a5d !important;
}

.quaterlysalescomp .ct-series-b .ct-bar {
    stroke: #766de4 !important;
}

.quaterlysalescomp .ct-series-c .ct-bar {
    stroke: #b7bcf1 !important;
}

.quaterlysalescomp .ct-series-d .ct-bar {
    stroke: #4647c2 !important;
}

.quaterlysalescomp .x-axis-label {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.quaterlysalescomp .y-axis-label {
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotate(-90deg);
}

/* Quarterly Chart Tooltip */
.quarterly-chart-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}

.catcolors {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    flex-wrap: wrap;
}

.catcolor {
    display: inline-flex;
    margin: 5px 15px 5px;
    align-items: center;
    gap: 10px;
    min-width: 40%;
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Quarterly Sales Chart Colors - Match Holiday Chart */
.quaterlysalescomp .ct-series-a .ct-bar {
    stroke: #b7bcf1 !important; /* Rings - Light blue */
}

.quaterlysalescomp .ct-series-b .ct-bar {
    stroke: #766de4 !important; /* Bracelets - Purple */
}

.quaterlysalescomp .ct-series-c .ct-bar {
    stroke: #252a5d !important; /* Necklaces - Dark blue */
}

.quaterlysalescomp .ct-series-d .ct-bar {
    stroke: #4647c2 !important; /* Earrings - Medium blue */
}

/* Holiday Sales Chart Colors - Match Quarterly Chart */
.holidaysalesbreak .ct-series-a .ct-bar {
    stroke: #252a5d !important; /* Necklaces - Dark blue */
}

.holidaysalesbreak .ct-series-b .ct-bar {
    stroke: #766de4 !important; /* Bracelets - Purple */
}

.holidaysalesbreak .ct-series-c .ct-bar {
    stroke: #b7bcf1 !important; /* Rings - Light blue */
}

.holidaysalesbreak .ct-series-d .ct-bar {
    stroke: #4647c2 !important; /* Earrings - Medium blue */
}

/* Total Saled Today Chart Colors - Match dashboard salesreport colors exactly */
.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(1) {
    stroke: red !important; /* Assigned - matches dashboard ct-series-b nth-child(2) */
    stroke-width: 10px;
}

.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(2) {
    stroke: green !important; /* Barcode - matches dashboard ct-series-b nth-child(3) */
    stroke-width: 10px;
}

.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(3) {
    stroke: purple !important; /* Packing - matches dashboard ct-series-b nth-child(4) */
    stroke-width: 10px;
}

.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(4) {
    stroke: purple !important; /* Packing Canada - matches dashboard ct-series-b nth-child(5) */
    stroke-width: 10px;
}

.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(5) {
    stroke: green !important; /* Closed - should be green per user feedback */
    stroke-width: 10px;
}

.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(6) {
    stroke: grey !important; /* Out of Stock - matches dashboard ct-series-b nth-child(7) */
    stroke-width: 10px;
}

.salesreport #verticalchart .ct-series-a .ct-bar:nth-child(7) {
    stroke: yellow !important; /* Unprocessed - matches dashboard ct-series-a nth-child(7) */
    stroke-width: 10px;
}

.salesreportw {
    height: 300px;
    display: inline-block;
    width: 100%;
}